svelte-kit-vice/src/uix/eidos/components/year-grid

Eidos YearGrid

Visual wrapper for Soma YearGrid. Standalone year-picker primitive — a paged grid of years (default decadeSize=12). Reuses calendar tokens (--calendar-*) for consistent chrome with the inline Calendar.

<script lang="ts">
  import { YearGrid } from '$uix/eidos/components/year-grid';

  let value = $state<{ year: number } | undefined>();
</script>

<YearGrid bind:value size="md" variant="surface" color="primary">
  {#snippet children({ years, headingValue })}
    <YearGrid.Header>
      <YearGrid.PrevButton>‹</YearGrid.PrevButton>
      <YearGrid.Heading />
      <YearGrid.NextButton>›</YearGrid.NextButton>
    </YearGrid.Header>
    <YearGrid.Grid>
      {#each years as year (year)}
        <YearGrid.Cell {year} />
      {/each}
    </YearGrid.Grid>
  {/snippet}
</YearGrid>

Parts: Provider, Header, Heading, PrevButton, NextButton, Grid, Cell. Eidos exposes size, variant, color on the root.

Sema events

• commit-set — commit.set on cell, intent: 'affirm', sequence post.
• shift-navigate-step — shift.navigate on provider, sequence post.

Baseline

Origen: extracción standalone del year-view de DatePicker (tarea #70, junto con MonthGrid). Air no tenía componente equivalente — la selección de año vivía sólo dentro del DatePicker. Soma YearGrid es nuevo en UIX; sirve para escenarios de selección de año aislada (reportes anuales, filtros, navegación de archivos por año).

Comparativa

Capacidad	UIX YearGrid	React Spectrum (Adobe)	Ark UI DatePicker (year view)	Radix Themes
Standalone year-grid component	Sí	No — embebido en DatePicker	No — embebido en DatePicker	No
value: { year } bindable	Sí	Sólo combinado con día	Idem	—
decadeSize configurable (años por página)	Sí (default 12)	Default 12, no configurable	Default 12	—
Paginación PageUp/Down (década anterior/siguiente)	Sí	Sí	Sí	—
Navegación por flechas dentro del grid	Sí (4 columnas)	Sí	Sí	—
Highlight año actual (data-current)	Sí	Sí	Sí	—
data-readonly / data-disabled	Sí	Sí	Sí	—
min / max value (rango limitado)	Sí	Sí	Sí	—
Composable Header + PrevButton + NextButton + Heading	Sí	Parcial	Sí	—

Decisiones

• Componente standalone, no sólo view del DatePicker — extraído para reusabilidad. DatePicker kind: 'year' lo consume internamente.
• decadeSize configurable — algunos diseños prefieren 10 (década natural) o 20 (dos décadas). UIX permite ambos sin nuevo componente.
• Mismo modelo de eventos que MonthGrid — commit-set y shift-navigate-step, para que la pareja month-grid/year-grid sea sema-simétrica.
• select único evento mutante; resto son focus moves — el audit script reconoce next-year/prev-year/next-row/prev-row/ first-year/last-year/next-page/prev-page como focus moves (no mutan el valor). Sólo Enter/Space y los botones de paginación mutan estado.

Gaps

Gap	Disposición	Detalle
Multi-año selection (range)	diferir	Resolver con YearRangePicker cuando llegue caso real.
Quick-jump a una década específica (input + go)	diferir	Útil para escalar 100+ años; la paginación cubre el caso común.
Renombrar nav-step a forma canónica	resuelto	Renombrado a shift-navigate-step (verb navigate + variant step) per book cap. 27 §5.
Highlight visual de la década actual (extra al año)	diferir	Hoy se marca sólo el año actual con data-current. La década podría marcarse en el heading.