Year select with navigation

<!--
  АДАПТАЦИЯ (docs/PORTING.md §4a/§5): та же подмена `Dropdown` → `Select`,
  что и в `c-calendar-8`, но здесь оригинал подменяет только
  `YearsDropdown` (`captionLayout="dropdown-years"`): месяц остаётся
  обычным текстом, навигация по месяцам — стрелками. Реализовано через
  слот `#caption` `CCalendar` (закрытое состояние `Select`, см. §5
  `ui-select`).
-->
<script setup lang="ts">
import { ref } from "vue"
import { Card, CardContent } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar as CCalendar } from "@/components/ui/calendar"

const fixedMonth = new Date(2026, 0, 15)
const date = ref<Date | undefined>(fixedMonth)
const years = [2024, 2025, 2026, 2027, 2028]
</script>

<template>
  <Card class="p-0">
    <CardContent class="p-0">
      <CCalendar
        mode="single"
        v-model="date"
        :month="fixedMonth"
        nav-class="flex items-center w-full absolute top-0 inset-x-0 justify-between pointer-events-none [&>button]:pointer-events-auto"
      >
        <template #caption>
          <div class="flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)">
            <div class="flex w-full items-center justify-center gap-3 [&>span]:text-sm [&>span]:font-medium">
              <span>Jan</span>
              <Select model-value="2026">
                <SelectTrigger>
                  <SelectValue>{{ `2026` }}</SelectValue>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem v-for="y in years" :key="y" :value="String(y)">{{ y }}</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </template>
      </CCalendar>
    </CardContent>
  </Card>
</template>