RangeCalendarCell

Source: client/lib/theme/vueda-tailwind/controls/index.js

A grid slot inside a RangeCalendarGridRow.root. Same p-0 plus relative plus focus-within:z-20 layout shape as CalendarCell.root, plus the range-fill recipe: [&:has([data-selected])]:bg-accent paints --accent on the cell (not on the day button) whenever the inner trigger is part of the selected range, so middle cells render as a continuous strip while the data-selection-start and data-selection-end cells round only their outer corners via the [&:has([data-selected][data-selection-start])] / [&:has([data-selected][data-selection-end])] variants. Range fill goes on the cell rather than the day button so the run can round cleanly at its endpoints.

Vue component: RangeCalendarCell

Slot	Default classes	Description
root	3 classes	A grid slot inside a RangeCalendarGridRow.root. Same p-0 plus relative plus focus-within:z-20 layout shape as CalendarCell.root, plus the range-fill recipe: [&:has([data-selected])]:bg-accent paints --accent on the cell (not on the day button) whenever the inner trigger is part of the selected range, so middle cells render as a continuous strip while the data-selection-start and data-selection-end cells round only their outer corners via the [&:has([data-selected][data-selection-start])] / [&:has([data-selected][data-selection-end])] variants. Range fill goes on the cell rather than the day button so the run can round cleanly at its endpoints.

root

A grid slot inside a RangeCalendarGridRow.root. Same p-0 plus relative plus focus-within:z-20 layout shape as CalendarCell.root, plus the range-fill recipe: [&:has([data-selected])]:bg-accent paints --accent on the cell (not on the day button) whenever the inner trigger is part of the selected range, so middle cells render as a continuous strip while the data-selection-start and data-selection-end cells round only their outer corners via the [&:has([data-selected][data-selection-start])] / [&:has([data-selected][data-selection-end])] variants. Range fill goes on the cell rather than the day button so the run can round cleanly at its endpoints.

Default classes:

relative p-0 text-center text-sm focus-within:relative focus-within:z-20
[&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-vueda-cal-day last:[&:has([data-selected])]:rounded-r-vueda-cal-day
[&:has([data-selected][data-selection-end])]:rounded-r-vueda-cal-day [&:has([data-selected][data-selection-start])]:rounded-l-vueda-cal-day

Source: client/lib/theme/vueda-tailwind/controls/RangeCalendarCell.theme.js:18