Custom select range style

<!--
  АДАПТАЦИЯ (docs/PORTING.md §4a): оригинал таргетирует классы
  `range-start`/`range-end`/`range-middle`, которые `react-day-picker`
  проставляет на `<td>` (`day`) в этом режиме. У `reka-ui` эквивалентные
  булевы флаги — атрибуты `data-selection-start`/`data-selection-end` на
  самом `<button>` (`CellTrigger`), а не на ячейке-обёртке, поэтому те же
  скруглённые "таблетки" переведены на `data-[selection-start]`/
  `data-[selection-end]` вместо `.range-start`/`.range-end`.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Card, CardContent } from "@/components/ui/card"
import { Calendar as CCalendar } from "@/components/ui/calendar"
import { CalendarDateRange as CCalendarRange } from "@/components/ui/calendar"

const anchor = new Date(2026, 0, 15)
const date = ref<CCalendarRange | undefined>({
  from: anchor,
  to: new Date(2026, 0, 20),
})
</script>

<template>
  <Card class="p-0">
    <CardContent class="p-0">
      <CCalendar
        mode="range"
        v-model="date"
        day-class="relative before:absolute before:inset-y-px before:inset-x-0 [&:has([data-selection-start=true]):not(:has([data-selection-end=true]))]:before:bg-linear-to-r before:from-transparent before:from-50% before:to-accent before:to-50% [&:has([data-selection-end=true]):not(:has([data-selection-start=true]))]:before:bg-linear-to-l"
        day-button-class="!rounded-full data-[selection-start=true]:data-[selection-end=false]:rounded-e-full data-[selection-end=true]:data-[selection-start=false]:rounded-s-full"
      />
    </CardContent>
  </Card>
</template>