added support classes

[Artles777]

Added additional classes to be able to implement rounding of the date selection range.

The following styles had to be applied for this case:

.mx-calendar {
.cell.in-range + .cell.active.active-end,
.cell.hovered ~ .cell.active.active-start:has(+ :not(.cell.in-range):not(.cell.active-end)),
.cell.active-start ~ .cell.hover-in-range + .cell.hovered,
.cell.active-start + .cell.hovered,
.cell.hover-in-range + .cell.hovered,
.cell.hover-in-range.range-invert + .cell.active.active-start,
.cell.active-start + .cell.active-end,

.mx-date-row:has(+ .mx-date-row .cell:first-child:not(.cell.in-range):not(.cell.active-end)) .cell.hovered + .cell.active.active-start:last-of-type,
.mx-date-row:has(.cell.hovered + .cell.active-start:last-child) + .mx-date-row:has(+ .cell.active-end),
.mx-date-row:has(.hover-in-range:last-of-type) + .mx-date-row .cell.hovered,
.mx-date-row:has(.cell.active-start:last-of-type) + .mx-date-row .cell.hovered:first-of-type,
.mx-date-row:has(.cell.hovered:last-of-type) ~ .mx-date-row .cell.active-start:has(+ .cell:not(.cell.in-range):not(.cell.active-end)),
.mx-date-row:has(.cell.hovered ~ .cell.hover-in-range:last-of-type) ~ .mx-date-row .cell.active-start:has(+ .cell:not(.cell.in-range):not(.cell.active-end)),
.mx-date-row:has(.in-range:last-of-type) + .mx-date-row .cell.active-end,
.mx-date-row:has(.cell.active-start:last-of-type) + .mx-date-row .cell.active-end {
@apply rounded-l-none;
}
}

.mx-calendar {
.cell.active-start:has(+ .cell.in-range),
.cell.active-start:has(~ .cell.hovered),
.cell.hovered:has(~ .cell.hover-in-range + .cell.active-start),
.cell.hovered:has(+ .cell.active-start + .cell:not(.cell.in-range):not(.cell.active-end)),
.cell.active.active-start:has(~ .cell.hover-in-range + .cell.hover-in-range),
.cell.hovered:has(+ .cell.hover-in-range.range-invert),
.cell.active-start:has(+ .cell.active-end),

.mx-date-row:has(+ .mx-date-row .cell:first-child:not(.cell.in-range):not(.cell.active-end)) .cell.hovered:has(+ .cell.active-start:last-of-type),
.mx-date-row:has(+ .mx-date-row .hover-in-range.range-invert) .cell.hovered,
.mx-date-row:has(+ .mx-date-row .in-range) .cell.active-start,
.mx-date-row:has(+ .mx-date-row .hover-in-range) .cell.active-start,
.mx-date-row:has(+ .mx-date-row .hovered) .cell.active-start,
.mx-date-row:has(+ .mx-date-row .active-start + .cell:not(.cell.in-range):not(.cell.active-end)) .cell.hovered,
.mx-date-row:has(+ .mx-date-row .cell.active-end) .cell.active-start {
@apply rounded-r-none;
}
}

.mx-calendar {
.cell.hover-in-range:has(+ .cell.disabled) {
@apply rounded-r-5xl;
}
}

You might want to add more classes or rename them somehow, but the idea was to be able to round at different states.