diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue index c92ab9db49..08746c809e 100644 --- a/docs/app/components/content/ComponentCode.vue +++ b/docs/app/components/content/ComponentCode.vue @@ -93,6 +93,8 @@ const options = computed(() => { chip: key.toLowerCase().endsWith('color') ? { color: variant } : undefined })) + // TODO: process "undefined | Date | DateRange", https://github.com/nuxt/ui/issues/2651 + return { name: key, label: key, diff --git a/docs/app/components/content/examples/calendar/CalendarDatePickerExample.vue b/docs/app/components/content/examples/calendar/CalendarDatePickerExample.vue new file mode 100644 index 0000000000..c60583b213 --- /dev/null +++ b/docs/app/components/content/examples/calendar/CalendarDatePickerExample.vue @@ -0,0 +1,21 @@ +<script setup lang="ts"> +import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date' + +const df = new DateFormatter('en-US', { + dateStyle: 'medium' +}) + +const modelValue = shallowRef(new CalendarDate(2022, 1, 10)) +</script> + +<template> + <UPopover> + <UButton color="neutral" variant="subtle" icon="i-lucide-calendar"> + {{ df.format(modelValue.toDate(getLocalTimeZone())) }} + </UButton> + + <template #content> + <UCalendar v-model="modelValue" class="p-2" /> + </template> + </UPopover> +</template> diff --git a/docs/app/components/content/examples/calendar/CalendarDateRangePickerExample.vue b/docs/app/components/content/examples/calendar/CalendarDateRangePickerExample.vue new file mode 100644 index 0000000000..37804cb250 --- /dev/null +++ b/docs/app/components/content/examples/calendar/CalendarDateRangePickerExample.vue @@ -0,0 +1,35 @@ +<script setup lang="ts"> +import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date' + +const df = new DateFormatter('en-US', { + dateStyle: 'medium' +}) + +const modelValue = shallowRef({ + start: new CalendarDate(2022, 1, 20), + end: new CalendarDate(2022, 2, 10) +}) +</script> + +<template> + <UPopover> + <UButton color="neutral" variant="subtle" icon="i-lucide-calendar"> + <template v-if="modelValue.start"> + <template v-if="modelValue.end"> + {{ df.format(modelValue.start.toDate(getLocalTimeZone())) }} - {{ df.format(modelValue.end.toDate(getLocalTimeZone())) }} + </template> + + <template v-else> + {{ df.format(modelValue.start.toDate(getLocalTimeZone())) }} + </template> + </template> + <template v-else> + Pick a date + </template> + </UButton> + + <template #content> + <UCalendar v-model="modelValue" class="p-2" :number-of-months="2" range /> + </template> + </UPopover> +</template> 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..78b6ea2884 --- /dev/null +++ b/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue @@ -0,0 +1,17 @@ +<script setup lang="ts"> +import { CalendarDate } from '@internationalized/date' +import type { Matcher } from 'radix-vue/date' + +const modelValue = shallowRef({ + start: new CalendarDate(2022, 1, 1), + end: new CalendarDate(2022, 1, 9) +}) + +const isDateDisabled: Matcher = (date) => { + return date.day >= 10 && date.day <= 16 +} +</script> + +<template> + <UCalendar v-model="modelValue" :is-date-disabled="isDateDisabled" range /> +</template> diff --git a/docs/app/components/content/examples/calendar/CalendarEventsExample.vue b/docs/app/components/content/examples/calendar/CalendarEventsExample.vue new file mode 100644 index 0000000000..998bf3b008 --- /dev/null +++ b/docs/app/components/content/examples/calendar/CalendarEventsExample.vue @@ -0,0 +1,30 @@ +<script setup lang="ts"> +import { CalendarDate } from '@internationalized/date' + +const modelValue = shallowRef(new CalendarDate(2022, 1, 10)) + +function getColorByDate(date: Date) { + const isWeekend = date.getDay() % 6 == 0 + const isDayMeeting = date.getDay() % 3 == 0 + + if (isWeekend) { + return undefined + } + + if (isDayMeeting) { + return 'error' + } + + return 'success' +} +</script> + +<template> + <UCalendar v-model="modelValue"> + <template #day="{ day }"> + <UChip :show="!!getColorByDate(day.toDate('UTC'))" :color="getColorByDate(day.toDate('UTC'))" size="2xs"> + {{ day.day }} + </UChip> + </template> + </UCalendar> +</template> diff --git a/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue b/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue new file mode 100644 index 0000000000..6caef84106 --- /dev/null +++ b/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue @@ -0,0 +1,11 @@ +<script setup lang="ts"> +import { CalendarDate } from '@internationalized/date' + +const modelValue = shallowRef(new CalendarDate(2023, 9, 10)) +const minDate = new CalendarDate(2023, 9, 1) +const maxDate = new CalendarDate(2023, 9, 30) +</script> + +<template> + <UCalendar v-model="modelValue" :min-value="minDate" :max-value="maxDate" /> +</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..49c21f461f --- /dev/null +++ b/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue @@ -0,0 +1,17 @@ +<script setup lang="ts"> +import { CalendarDate } from '@internationalized/date' +import type { Matcher } from 'radix-vue/date' + +const modelValue = shallowRef({ + start: new CalendarDate(2022, 1, 1), + end: new CalendarDate(2022, 1, 9) +}) + +const isDateUnavailable: Matcher = (date) => { + return date.day >= 10 && date.day <= 16 +} +</script> + +<template> + <UCalendar v-model="modelValue" :is-date-unavailable="isDateUnavailable" range /> +</template> diff --git a/docs/content/3.components/calendar.md b/docs/content/3.components/calendar.md new file mode 100644 index 0000000000..0a9edcdd44 --- /dev/null +++ b/docs/content/3.components/calendar.md @@ -0,0 +1,210 @@ +--- +title: Calendar +description: A calendar component for selecting single dates, multiple dates or date ranges. +links: + - label: Calendar + icon: i-custom-radix-vue + to: https://www.radix-vue.com/components/calendar.html + - label: GitHub + icon: i-simple-icons-github + to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Calendar.vue +navigation.badge: New +--- + +::note +This component relies on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner. +:: + +## Usage + +Use the `v-model` directive to control the selected date. + +::component-code +--- +--- +:: + +<!-- TODO: Add example with default value --> + +### Multiple + +Use the `multiple` prop to allow multiple selections. + +::component-code +--- +ignore: + - multiple +props: + multiple: true +--- +:: + +### Range + +Use the `range` prop to select a range of dates. + +::component-code +--- +ignore: + - range +props: + range: true +--- +:: + +### Color + +Use the `color` prop to change the color of the calendar. + +::component-code +--- +props: + color: neutral +--- +:: + +### Size + +Use the `size` prop to change the size of the calendar. + +::component-code +--- +props: + size: xl +--- +:: + +### Disabled + +Use the `disabled` prop to disable the calendar. + +::component-code +--- +props: + disabled: true +--- +:: + +### Number Of Months + +Use the `numberOfMonths` prop to change the number of months in the calendar. + +::component-code +--- +props: + numberOfMonths: 3 +--- +:: + +### Month Controls + +Use the `month-controls` prop to show the month controls. Defaults to `true`. + +::component-code +--- +props: + monthControls: false +--- +:: + +### Year Controls + +Use the `year-controls` prop to show the year controls. Defaults to `true`. + +::component-code +--- +props: + yearControls: false +--- +:: + +### Fixed Weeks + +Use the `fixed-weeks` prop to display the calendar with fixed weeks. + +::component-code +--- +props: + fixedWeeks: false +--- +:: + +## Examples + +### With chip events + +Use the [Chip](/components/chip) component to add events to specific days. + +::component-example +--- +name: 'calendar-events-example' +--- +:: + +### With disabled dates + +Use the `is-date-disabled` prop with a function to mark specific dates as disabled. + +::component-example +--- +name: 'calendar-disabled-dates-example' +--- +:: + +### With unavailable dates + +Use the `is-date-unavailable` prop with a function to mark specific dates as unavailable. + +::component-example +--- +name: 'calendar-unavailable-dates-example' +--- +:: + +### With min/max dates + +Use the `min-value` and `max-value` props to limit the dates. + +::component-example +--- +name: 'calendar-min-max-dates-example' +--- +:: + +### As a DatePicker + +Use a [Button](/components/button) and a [Popover](/components/popover) component to create a date picker. + +::component-example +--- +name: 'calendar-date-picker-example' +--- +:: + +### As a DateRangePicker + +Use a [Button](/components/button) and a [Popover](/components/popover) component to create a date range picker. + +::component-example +--- +name: 'calendar-date-range-picker-example' +--- +:: + +## API + +### Props + +:component-props + +### Slots + +:component-slots + +### Emits + +:component-emits + +## Theme + +:component-theme diff --git a/docs/content/3.components/input-menu.md b/docs/content/3.components/input-menu.md index 5254414b62..37e3d88287 100644 --- a/docs/content/3.components/input-menu.md +++ b/docs/content/3.components/input-menu.md @@ -771,7 +771,7 @@ name: 'input-menu-filter-fields-example' --- :: -### As a country picker +### As a CountryPicker This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened. diff --git a/docs/content/3.components/input-number.md b/docs/content/3.components/input-number.md index ca8e5d8146..65f5837b5c 100644 --- a/docs/content/3.components/input-number.md +++ b/docs/content/3.components/input-number.md @@ -11,6 +11,10 @@ links: navigation.badge: New --- +::note +This component relies on the [@internationalized/number](https://react-spectrum.adobe.com/internationalized/number/index.html) package which provides utilities for formatting and parsing numbers across locales and numbering systems. +:: + ## Usage Use the `v-model` directive to control the value of the InputNumber. diff --git a/docs/content/3.components/select-menu.md b/docs/content/3.components/select-menu.md index 1de5a7cf5e..3430b5a9d9 100644 --- a/docs/content/3.components/select-menu.md +++ b/docs/content/3.components/select-menu.md @@ -806,7 +806,7 @@ name: 'select-menu-filter-fields-example' --- :: -### As a country picker +### As a CountryPicker This example demonstrates using the SelectMenu as a country picker with lazy loading - countries are only fetched when the menu is opened. diff --git a/package.json b/package.json index b8db7ae2e9..fdec411ae4 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ }, "dependencies": { "@iconify/vue": "^4.1.2", + "@internationalized/date": "^3.6.0", "@internationalized/number": "^3.6.0", "@nuxt/devtools-kit": "^1.6.1", "@nuxt/fonts": "^0.10.2", diff --git a/playground/app/app.vue b/playground/app/app.vue index 2f10354c6d..172a3ab9b8 100644 --- a/playground/app/app.vue +++ b/playground/app/app.vue @@ -24,6 +24,7 @@ const components = [ 'button', 'button-group', 'card', + 'calendar', 'carousel', 'checkbox', 'chip', diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue new file mode 100644 index 0000000000..cd05cb4e3f --- /dev/null +++ b/playground/app/pages/components/calendar.vue @@ -0,0 +1,20 @@ +<script setup lang="ts"> +import { CalendarDate } from '@internationalized/date' + +const singleValue = shallowRef(new CalendarDate(2022, 1, 10)) +const multipleValue = shallowRef({ + start: new CalendarDate(2022, 1, 10), + end: new CalendarDate(2022, 1, 20) +}) +</script> + +<template> + <div class="flex flex-col gap-4"> + <div class="flex justify-center gap-2"> + <UCalendar v-model="singleValue" /> + </div> + <div class="flex justify-center gap-2"> + <UCalendar v-model="multipleValue" range /> + </div> + </div> +</template> diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a158125a2..ad870da713 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.13(typescript@5.6.3)) + '@internationalized/date': + specifier: ^3.6.0 + version: 3.6.0 '@internationalized/number': specifier: ^3.6.0 version: 3.6.0 @@ -1281,8 +1284,8 @@ packages: resolution: {integrity: sha512-tKd+jsmhq21AP1LhexC0pPwsCxEhGgAkg28byjJAd+xhmIs8LUX8JbUc3vBf3PhLxWiB5EvyBE5X7JSPAqMAqg==} engines: {node: '>=18'} - '@internationalized/date@3.5.6': - resolution: {integrity: sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==} + '@internationalized/date@3.6.0': + resolution: {integrity: sha512-+z6ti+CcJnRlLHok/emGEsWQhe7kfSmEW+/6qCzvKY67YPh7YOBfvc7+/+NXq+zJlbArg30tYpqLjNgcAYv2YQ==} '@internationalized/number@3.6.0': resolution: {integrity: sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==} @@ -7887,7 +7890,7 @@ snapshots: '@inquirer/figures@1.0.8': {} - '@internationalized/date@3.5.6': + '@internationalized/date@3.6.0': dependencies: '@swc/helpers': 0.5.15 @@ -13914,7 +13917,7 @@ snapshots: dependencies: '@floating-ui/dom': 1.6.12 '@floating-ui/vue': 1.1.5(vue@3.5.13(typescript@5.6.3)) - '@internationalized/date': 3.5.6 + '@internationalized/date': 3.6.0 '@internationalized/number': 3.6.0 '@tanstack/vue-virtual': 3.10.9(vue@3.5.13(typescript@5.6.3)) '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.6.3)) diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue new file mode 100644 index 0000000000..1a9b944448 --- /dev/null +++ b/src/runtime/components/Calendar.vue @@ -0,0 +1,165 @@ +<script lang="ts"> +import { tv, type VariantProps } from 'tailwind-variants' +import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootEmits, DateRange, 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' + +const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } } + +const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) }) + +type CalendarVariants = VariantProps<typeof calendar> + +type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true + ? DateRange + : M extends true + ? DateValue[] + : DateValue + +export interface CalendarProps<R extends boolean, M extends boolean> extends Omit<CalendarRootProps, 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'> { + /** + * The element or component this component should render as. + * @defaultValue 'div' + */ + as?: any + color?: CalendarVariants['color'] + size?: CalendarVariants['size'] + /** Whether or not a range of dates can be selected */ + range?: R & boolean + /** Whether or not multiple dates can be selected */ + multiple?: M & boolean + /** Show month controls */ + monthControls?: boolean + /** Show year controls */ + yearControls?: boolean + defaultValue?: CalendarModelValue<R, M> + modelValue?: CalendarModelValue<R, M> + class?: any + ui?: Partial<typeof calendar.slots> +} + +export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> { + 'update:modelValue': [date: CalendarModelValue<R, M>] +} + +export interface CalendarSlots { + 'heading': (props: { value: string }) => any + 'day': (props: Pick<CalendarCellTriggerProps, 'day'>) => any + 'week-day': (props: { day: string }) => any +} +</script> + +<script setup lang="ts" generic="R extends boolean = false, M extends boolean = false"> +import { computed } from 'vue' +import { useForwardPropsEmits } from 'radix-vue' +import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced' +import { reactiveOmit } from '@vueuse/core' +import { useLocale } from '../composables/useLocale' +import UButton from './Button.vue' + +const props = withDefaults(defineProps<CalendarProps<R, M>>(), { + fixedWeeks: true, + monthControls: true, + yearControls: true +}) +const emits = defineEmits<CalendarEmits<R, M>>() +defineSlots<CalendarSlots>() + +const { code: locale, dir, t } = useLocale() + +const rootProps = useForwardPropsEmits(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'color', 'size', 'monthControls', 'yearControls', 'class', 'ui'), emits) + +const ui = computed(() => calendar({ + color: props.color, + size: props.size +})) + +function paginateYear(date: DateValue, sign: -1 | 1) { + if (sign === -1) { + return date.subtract({ years: 1 }) + } + + return date.add({ years: 1 }) +} + +const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar) +</script> + +<template> + <Calendar.Root + v-slot="{ weekDays, grid }" + v-bind="rootProps" + :model-value="(modelValue as CalendarModelValue<true & false>)" + :default-value="(defaultValue as CalendarModelValue<true & false>)" + :locale="locale" + :dir="dir" + :class="ui.root({ class: [props.class, props.ui?.root] })" + > + <Calendar.Header :class="ui.header({ class: props.ui?.header })"> + <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child> + <UButton :icon="appConfig.ui.icons.chevronDoubleLeft" :size="props.size" color="neutral" variant="ghost" /> + </Calendar.Prev> + <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child> + <UButton :icon="appConfig.ui.icons.chevronLeft" :size="props.size" color="neutral" variant="ghost" /> + </Calendar.Prev> + <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })"> + <slot name="heading" :value="headingValue"> + {{ headingValue }} + </slot> + </Calendar.Heading> + <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child> + <UButton :icon="appConfig.ui.icons.chevronRight" :size="props.size" color="neutral" variant="ghost" /> + </Calendar.Next> + <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child> + <UButton :icon="appConfig.ui.icons.chevronDoubleRight" :size="props.size" color="neutral" variant="ghost" /> + </Calendar.Next> + </Calendar.Header> + <div :class="ui.body({ class: props.ui?.body })"> + <Calendar.Grid + v-for="month in grid" + :key="month.value.toString()" + :class="ui.grid({ class: props.ui?.grid })" + > + <Calendar.GridHead> + <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })"> + <Calendar.HeadCell + v-for="day in weekDays" + :key="day" + :class="ui.headCell({ class: props.ui?.headCell })" + > + <slot name="week-day" :day="day"> + {{ day }} + </slot> + </Calendar.HeadCell> + </Calendar.GridRow> + </Calendar.GridHead> + <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })"> + <Calendar.GridRow + v-for="(weekDates, index) in month.rows" + :key="`weekDate-${index}`" + :class="ui.gridRow({ class: props.ui?.gridRow })" + > + <Calendar.Cell + v-for="weekDate in weekDates" + :key="weekDate.toString()" + :date="weekDate" + :class="ui.cell({ class: props.ui?.cell })" + > + <Calendar.CellTrigger + :day="weekDate" + :month="month.value" + :class="ui.cellTrigger({ class: props.ui?.cellTrigger })" + > + <slot name="day" :day="weekDate"> + {{ weekDate.day }} + </slot> + </Calendar.CellTrigger> + </Calendar.Cell> + </Calendar.GridRow> + </Calendar.GridBody> + </Calendar.Grid> + </div> + </Calendar.Root> +</template> diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index b59d40bc12..617b246c2d 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -107,7 +107,7 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma /** The controlled value of the Combobox. Can be binded-with with `v-model`. */ modelValue?: SelectModelValue<T, V, M> /** Whether multiple options can be selected or not. */ - multiple?: M + multiple?: M & boolean } export type InputMenuEmits<T, V, M extends boolean> = Omit<ComboboxRootEmits<T>, 'update:modelValue'> & { @@ -167,11 +167,9 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' }) const appConfig = useAppConfig() const { t } = useLocale() -const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'resetSearchTermOnBlur'), emits) +const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits) const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps) const arrowProps = toRef(() => props.arrow as ComboboxArrowProps) -// This is a hack due to generic boolean casting (see https://github.com/nuxt/ui/issues/2541) -const multiple = toRef(() => typeof props.multiple === 'string' ? true : props.multiple) const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props) const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props) @@ -189,7 +187,7 @@ const ui = computed(() => inputMenu({ highlight: highlight.value, leading: isLeading.value || !!props.avatar || !!slots.leading, trailing: isTrailing.value || !!slots.trailing, - multiple: multiple.value, + multiple: props.multiple, buttonGroup: orientation.value })) @@ -336,7 +334,6 @@ defineExpose({ v-model:search-term="searchTerm" :name="name" :disabled="disabled" - :multiple="multiple" :display-value="displayValue" :filter-function="() => rootItems" :class="ui.root({ class: [props.class, props.ui?.root] })" diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index f675d91b03..a222c230bc 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -99,7 +99,7 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M /** The controlled value of the Combobox. Can be binded-with with `v-model`. */ modelValue?: SelectModelValue<T, V, M> /** Whether multiple options can be selected or not. */ - multiple?: M + multiple?: M & boolean } export type SelectMenuEmits<T, V, M extends boolean> = Omit<ComboboxRootEmits<T>, 'update:modelValue'> & { @@ -160,12 +160,10 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' }) const appConfig = useAppConfig() const { t } = useLocale() -const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'resetSearchTermOnBlur'), emits) +const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits) const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps) const arrowProps = toRef(() => props.arrow as ComboboxArrowProps) const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: 'Search...', variant: 'none' }) as InputProps) -// This is a hack due to generic boolean casting (see https://github.com/nuxt/ui/issues/2541) -const multiple = toRef(() => typeof props.multiple === 'string' ? true : props.multiple) const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate() @@ -187,7 +185,7 @@ const ui = computed(() => selectMenu({ })) function displayValue(value: T | T[]): string { - if (multiple.value && Array.isArray(value)) { + if (props.multiple && Array.isArray(value)) { return value.map(v => displayValue(v)).filter(Boolean).join(', ') } @@ -307,7 +305,6 @@ function onUpdateOpen(value: boolean) { as-child :name="name" :disabled="disabled" - :multiple="multiple" :display-value="() => searchTerm" :filter-function="() => rootItems" @update:model-value="onUpdate" diff --git a/src/runtime/locale/ar.ts b/src/runtime/locale/ar.ts index c1fb6ed5a8..6b86aee2d0 100644 --- a/src/runtime/locale/ar.ts +++ b/src/runtime/locale/ar.ts @@ -10,6 +10,12 @@ export default defineLocale({ noData: 'لا توجد بيانات', create: 'إنشاء "{label}"' }, + calendar: { + prevYear: 'السنة السابقة', + nextYear: 'السنة المقبلة', + prevMonth: 'الشهر السابق', + nextMonth: 'الشهر المقبل' + }, inputNumber: { increment: 'زيادة', decrement: 'تقليل' diff --git a/src/runtime/locale/cs.ts b/src/runtime/locale/cs.ts index b9296d33fd..ab1da24f66 100644 --- a/src/runtime/locale/cs.ts +++ b/src/runtime/locale/cs.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: 'Žádná data', create: 'Vytvořit "{label}"' }, + calendar: { + prevYear: 'Předchozí rok', + nextYear: 'Další rok', + prevMonth: 'Předchozí měsíc', + nextMonth: 'Další měsíc' + }, inputNumber: { increment: 'Zvýšit', decrement: 'Snížit' diff --git a/src/runtime/locale/de.ts b/src/runtime/locale/de.ts index e60b3f7eac..a0583dd649 100644 --- a/src/runtime/locale/de.ts +++ b/src/runtime/locale/de.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: 'Keine Daten', create: '"{label}" erstellen' }, + calendar: { + prevYear: 'Vorheriges Jahr', + nextYear: 'Nächstes Jahr', + prevMonth: 'Vorheriger Monat', + nextMonth: 'Nächster Monat' + }, inputNumber: { increment: 'Erhöhen', decrement: 'Verringern' diff --git a/src/runtime/locale/en.ts b/src/runtime/locale/en.ts index 4be5a9c824..74e669b5ce 100644 --- a/src/runtime/locale/en.ts +++ b/src/runtime/locale/en.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: 'No data', create: 'Create "{label}"' }, + calendar: { + prevYear: 'Previous year', + nextYear: 'Next year', + prevMonth: 'Previous month', + nextMonth: 'Next month' + }, inputNumber: { increment: 'Increment', decrement: 'Decrement' diff --git a/src/runtime/locale/es.ts b/src/runtime/locale/es.ts index f3579f4e8d..bd24c608ac 100644 --- a/src/runtime/locale/es.ts +++ b/src/runtime/locale/es.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: 'Sin datos', create: 'Crear "{label}"' }, + calendar: { + prevYear: 'A o anterior', + nextYear: 'A o siguiente', + prevMonth: 'Mes anterior', + nextMonth: 'Mes siguiente' + }, inputNumber: { increment: 'Incremento', decrement: 'Decremento' diff --git a/src/runtime/locale/fa_ir.ts b/src/runtime/locale/fa_ir.ts index 8a047305eb..6d1548902c 100644 --- a/src/runtime/locale/fa_ir.ts +++ b/src/runtime/locale/fa_ir.ts @@ -10,6 +10,12 @@ export default defineLocale({ noData: 'دادهای موجود نیست', create: 'ایجاد "{label}"' }, + calendar: { + prevYear: 'سال گذشته', + nextYear: 'سال آینده', + prevMonth: 'ماه گذشته', + nextMonth: 'ماه آینده' + }, inputNumber: { increment: 'افزایش', decrement: 'کاهش' diff --git a/src/runtime/locale/fr.ts b/src/runtime/locale/fr.ts index 19086796f1..111c863b91 100644 --- a/src/runtime/locale/fr.ts +++ b/src/runtime/locale/fr.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: 'Aucune donnée', create: 'Créer "{label}"' }, + calendar: { + prevYear: 'Année précédente', + nextYear: 'Année suivante', + prevMonth: 'Mois précédent', + nextMonth: 'Mois suivant' + }, inputNumber: { increment: 'Augmenter', decrement: 'Diminuer' diff --git a/src/runtime/locale/it.ts b/src/runtime/locale/it.ts index cd0eb32b05..c7f70a3444 100644 --- a/src/runtime/locale/it.ts +++ b/src/runtime/locale/it.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: 'Nessun dato', create: 'Crea "{label}"' }, + calendar: { + prevYear: 'Anno precedente', + nextYear: 'Anno successivo', + prevMonth: 'Mese precedente', + nextMonth: 'Mese successivo' + }, inputNumber: { increment: 'Aumenta', decrement: 'Diminuisci' diff --git a/src/runtime/locale/ko.ts b/src/runtime/locale/ko.ts index 5fe4a3a0f6..b7d78e1c60 100644 --- a/src/runtime/locale/ko.ts +++ b/src/runtime/locale/ko.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: '데이터가 없습니다.', create: '"{label}" 생성' }, + calendar: { + prevYear: '이전 해', + nextYear: '다음 해', + prevMonth: '이전 달', + nextMonth: '다음 달' + }, inputNumber: { increment: '증가', decrement: '감소' diff --git a/src/runtime/locale/nl.ts b/src/runtime/locale/nl.ts index a7198ab1ca..5a3e3f9e40 100644 --- a/src/runtime/locale/nl.ts +++ b/src/runtime/locale/nl.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: 'Geen gegevens', create: '"{label}" creëren' }, + calendar: { + prevYear: 'Vorig jaar', + nextYear: 'Volgend jaar', + prevMonth: 'Vorige maand', + nextMonth: 'Volgende maand' + }, inputNumber: { increment: 'Verhogen', decrement: 'Verlagen' diff --git a/src/runtime/locale/pl.ts b/src/runtime/locale/pl.ts index 033ee61c11..923af69736 100644 --- a/src/runtime/locale/pl.ts +++ b/src/runtime/locale/pl.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: 'Brak danych', create: 'Utwórz "{label}"' }, + calendar: { + prevYear: 'Poprzedni rok', + nextYear: 'Przyszły rok', + prevMonth: 'Poprzedni miesiąc', + nextMonth: 'Przyszły miesiąc' + }, inputNumber: { increment: 'Zwiększ', decrement: 'Zmniejsz' diff --git a/src/runtime/locale/ru.ts b/src/runtime/locale/ru.ts index 85135db5f3..f3d98d849e 100644 --- a/src/runtime/locale/ru.ts +++ b/src/runtime/locale/ru.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: 'Нет данных', create: 'Создать "{label}"' }, + calendar: { + prevYear: 'Предыдущий год', + nextYear: 'Следующий год', + prevMonth: 'Предыдущий месяц', + nextMonth: 'Следующий месяц' + }, inputNumber: { increment: 'Увеличить', decrement: 'Уменьшить' diff --git a/src/runtime/locale/tr.ts b/src/runtime/locale/tr.ts index 4e475e2662..882788dcd8 100644 --- a/src/runtime/locale/tr.ts +++ b/src/runtime/locale/tr.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: 'Veri yok', create: '"{label}" oluştur' }, + calendar: { + prevYear: 'Önceki yıl', + nextYear: 'Sonraki yıl', + prevMonth: 'Önceki ay', + nextMonth: 'Sonraki ay' + }, inputNumber: { increment: 'Arttır', decrement: 'Azalt' diff --git a/src/runtime/locale/zh_hans.ts b/src/runtime/locale/zh_hans.ts index c829c64164..0a9c2213ae 100644 --- a/src/runtime/locale/zh_hans.ts +++ b/src/runtime/locale/zh_hans.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: '没有数据', create: '创建 "{label}"' }, + calendar: { + prevYear: '去年', + nextYear: '明年', + prevMonth: '上个月', + nextMonth: '下个月' + }, inputNumber: { increment: '增加', decrement: '减少' diff --git a/src/runtime/locale/zh_hant.ts b/src/runtime/locale/zh_hant.ts index 1671051c28..556d237a6e 100644 --- a/src/runtime/locale/zh_hant.ts +++ b/src/runtime/locale/zh_hant.ts @@ -9,6 +9,12 @@ export default defineLocale({ noData: '沒有資料', create: '創建 "{label}"' }, + calendar: { + prevYear: '去年', + nextYear: '明年', + prevMonth: '上个月', + nextMonth: '下个月' + }, inputNumber: { increment: '增加', decrement: '减少' diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts index 072e3e8db8..aa067d6b7d 100644 --- a/src/runtime/types/index.ts +++ b/src/runtime/types/index.ts @@ -6,6 +6,7 @@ export * from '../components/AvatarGroup.vue' export * from '../components/Badge.vue' export * from '../components/Breadcrumb.vue' export * from '../components/Button.vue' +export * from '../components/Calendar.vue' export * from '../components/Card.vue' export * from '../components/Carousel.vue' export * from '../components/Checkbox.vue' diff --git a/src/runtime/types/locale.ts b/src/runtime/types/locale.ts index b5b3ed02bb..4148874b97 100644 --- a/src/runtime/types/locale.ts +++ b/src/runtime/types/locale.ts @@ -4,6 +4,12 @@ export type Messages = { noData: string create: string } + calendar: { + prevYear: string + nextYear: string + prevMonth: string + nextMonth: string + } inputNumber: { increment: string decrement: string diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts new file mode 100644 index 0000000000..800e9e81f2 --- /dev/null +++ b/src/theme/calendar.ts @@ -0,0 +1,64 @@ +import type { ModuleOptions } from '../module' + +export default (options: Required<ModuleOptions>) => ({ + slots: { + root: '', + header: 'flex items-center justify-between', + body: 'flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0', + heading: 'text-center font-medium truncate mx-auto', + grid: 'w-full border-collapse select-none space-y-1 focus:outline-none', + gridRow: 'grid grid-cols-7', + gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7', + gridBody: 'grid', + headCell: 'rounded-[calc(var(--ui-radius)*1.5)]', + cell: 'relative text-center', + cellTrigger: ['m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold', options.theme.transitions && 'transition'] + }, + 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:not-data-[selected]:text-[var(--ui-${color})] data-[highlighted]:bg-[var(--ui-${color})]/20 hover:not-data-[selected]: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:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10' + } + }, + size: { + xs: { + heading: 'text-xs', + cell: 'text-xs', + headCell: 'text-[10px]', + cellTrigger: 'size-7', + body: 'space-y-2 pt-2' + }, + sm: { + heading: 'text-xs', + headCell: 'text-xs', + cell: 'text-xs', + cellTrigger: 'size-7' + }, + md: { + heading: 'text-sm', + headCell: 'text-xs', + cell: 'text-sm', + cellTrigger: 'size-8' + }, + lg: { + heading: 'text-md', + headCell: 'text-md', + cellTrigger: 'size-9 text-md' + }, + xl: { + heading: 'text-lg', + headCell: 'text-lg', + cellTrigger: 'size-10 text-lg' + } + } + }, + defaultVariants: { + size: 'md', + color: 'primary' + } +}) diff --git a/src/theme/index.ts b/src/theme/index.ts index 90d2af7156..7bbbdf938b 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -6,6 +6,7 @@ export { default as badge } from './badge' export { default as breadcrumb } from './breadcrumb' export { default as button } from './button' export { default as buttonGroup } from './button-group' +export { default as calendar } from './calendar' export { default as card } from './card' export { default as carousel } from './carousel' export { default as checkbox } from './checkbox' diff --git a/test/components/Calendar.spec.ts b/test/components/Calendar.spec.ts new file mode 100644 index 0000000000..7549019ea1 --- /dev/null +++ b/test/components/Calendar.spec.ts @@ -0,0 +1,65 @@ +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' +import { CalendarDate } from '@internationalized/date' + +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 modelValue', { props: { modelValue: new CalendarDate(2025, 1, 1) } }], + ['with default value', { props: { defaultValue: new CalendarDate(2025, 1, 1) } }], + ['with range', { props: { range: true } }], + ['with multiple', { props: { multiple: true } }], + ['with disabled', { props: { disabled: true } }], + ['with readonly', { props: { readonly: true } }], + ['with isDateDisabled', { props: { isDateDisabled: () => true } }], + ['with isDateUnavailable', { props: { isDateUnavailable: () => true } }], + ['with weekStartsOn', { props: { weekStartsOn: 1 } }], + ['with weekdayFormat', { props: { weekdayFormat: 'short' } }], + ['with numberOfMonths', { props: { numberOfMonths: 2 } }], + ['without fixedWeeks', { props: { fixedWeeks: false } }], + ['without monthControls', { props: { monthControls: false } }], + ['without yearControls', { props: { yearControls: false } }], + ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]), + ['with color neutral', { props: { color: 'neutral' } }], + ['with as', { props: { as: 'section' } }], + ['with class', { props: { class: 'max-w-sm' } }], + ['with ui', { props: { ui: { header: 'gap-4' } } }], + // Slots + ['with heading slot', { slots: { heading: () => 'Heading' } }], + ['with day slot', { slots: { day: ({ day }: Parameters<CalendarSlots['day']>[0]) => day.day } }], + ['with week-day slot', { slots: { 'week-day': ({ day }: Parameters<CalendarSlots['week-day']>[0]) => day } }] + ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CalendarProps<false, false>, slots?: Partial<CalendarSlots> }) => { + const html = await ComponentRender(nameOrHtml, options, Calendar) + expect(html).toMatchSnapshot() + }) + + describe('emits', () => { + test('update:modelValue event single', async () => { + const wrapper = await mountSuspended(Calendar) + const date = new CalendarDate(2025, 1, 1) + + 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 CalendarDate(2025, 1, 1), new CalendarDate(2025, 1, 2)] + + 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..08c9c7823e --- /dev/null +++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap @@ -0,0 +1,4751 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Calendar > renders with as correctly 1`] = ` +"<section role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</section>" +`; + +exports[`Calendar > renders with class correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="max-w-sm"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with color neutral correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with day slot correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with default value correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-selected="true" 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-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with disabled correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" data-disabled="" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" disabled="" aria-label="Previous year" aria-disabled="true" data-disabled="true" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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 data-disabled="" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-disabled="true" data-disabled="" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with heading slot correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">Heading</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with isDateDisabled correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with isDateUnavailable correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with modelValue correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-selected="true" 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-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with multiple correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with numberOfMonths correctly 1`] = ` +"<div role="application" aria-label="Event Date, January - February 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January - February 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January - February 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with range correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> + <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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" data-readonly="" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" aria-readonly="true" data-readonly="" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with size lg correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-md">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] 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"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">4</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">11</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">18</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">25</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">1</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with size sm correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-lg">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] 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"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">4</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">11</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">18</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">25</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">1</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] 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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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"> + <div class="flex items-center justify-between gap-4"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with week-day slot correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with weekStartsOn correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 weekdayFormat correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Sun</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Mon</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Tue</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Wed</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Thu</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Fri</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders without fixedWeeks correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 monthControls correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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 class="text-center font-medium truncate mx-auto text-sm">January 2025</div> + <!--v-if--><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders without yearControls correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"> + <!--v-if--><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg> + <!--v-if--> + <!--v-if--> + </button> + <!--v-if--> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap new file mode 100644 index 0000000000..a7be8df9dc --- /dev/null +++ b/test/components/__snapshots__/Calendar.spec.ts.snap @@ -0,0 +1,4751 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Calendar > renders with as correctly 1`] = ` +"<section role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</section>" +`; + +exports[`Calendar > renders with class correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="max-w-sm"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with color neutral correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg-inverted)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:bg-[var(--ui-bg-inverted)] data-today:not-data-[selected]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:not-data-[selected]:bg-[var(--ui-bg-inverted)]/10 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with day slot correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with default value correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-selected="true" 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-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with disabled correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" data-disabled="" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" disabled="" aria-label="Previous year" aria-disabled="true" data-disabled="true" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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" disabled="" aria-label="Previous month" aria-disabled="true" data-disabled="true" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 data-disabled="" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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" aria-disabled="true" data-disabled="" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with heading slot correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">Heading</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with isDateDisabled correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with isDateUnavailable correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with modelValue correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-selected="true" 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-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with multiple correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with numberOfMonths correctly 1`] = ` +"<div role="application" aria-label="Event Date, January - February 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January - February 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January - February 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with range correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> + <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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" data-readonly="" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" aria-readonly="true" data-readonly="" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with size lg correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-md">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-md">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] 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"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">4</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">11</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">18</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">25</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">1</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-9 text-md">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with size sm correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-lg">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-lg">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] 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"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">4</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">11</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">18</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">25</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">1</div> + </td> + </tr> + <tr class="grid grid-cols-7"> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-10 text-lg">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center"> + <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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-[10px]">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] 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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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"> + <div class="flex items-center justify-between gap-4"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with week-day slot correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders with weekStartsOn correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 weekdayFormat correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Sun</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Mon</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Tue</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Wed</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Thu</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">Fri</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders without fixedWeeks correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 monthControls correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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> + <!--v-if--> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div> + <!--v-if--><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`; + +exports[`Calendar > renders without yearControls correctly 1`] = ` +"<div role="application" aria-label="Event Date, January 2025" dir="ltr"> + <div class="flex items-center justify-between"> + <!--v-if--><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span> + <!--v-if--> + <!--v-if--> + </button> + <!--v-if--> + </div> + <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"> + <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none"> + <thead aria-hidden="true"> + <tr class="mb-1 grid w-full grid-cols-7"> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">S</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">M</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">W</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">T</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">F</th> + <th class="rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] text-xs">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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">1</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">9</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">10</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">12</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">13</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">14</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">15</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">16</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">17</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">19</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">20</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">21</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">22</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">23</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">24</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">26</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">27</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">28</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">29</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">30</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">31</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">2</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">3</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">4</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">5</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">6</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">7</div> + </td> + <td role="gridcell" aria-disabled="false" class="relative text-center text-sm"> + <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-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 focus-visible:ring-2 focus:outline-none data-disabled:text-[var(--ui-text-muted)] data-unavailable:line-through data-unavailable:text-[var(--ui-text-muted)] data-unavailable:pointer-events-none data-[selected]:text-[var(--ui-bg)] data-today:font-semibold transition focus-visible:ring-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary)] data-today:not-data-[selected]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:not-data-[selected]:bg-[var(--ui-primary)]/20 size-8">8</div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"> + <div role="heading" aria-level="2">Event Date, January 2025</div> + </div> +</div>" +`;