svelte-kit-vice/src/uix/eidos/components/date-range-picker

Eidos DateRangePicker

Composite component: segmented DateRangeField + Popover + RangeCalendar. Eidos wraps Soma's composition without owning range state or validation — those remain in Soma through DateRangePicker.Provider + child providers.

Estado

Incidencia 2026-05-20 (parcialmente atendida):

• ✓ Auto-paging del popup en selección eliminado (incidencia #1).
• ✓ Click sobre endpoint de rango completo limpia solo ese endpoint (incidencia #2).
• ✓ Tratamientos visuales start/end diferenciados con stripe + swap a secondary cuando el data-color colisiona con affirm/fulfill (incidencia #4).
• ✓ Raw hex purgados; tokens de eidos regenerados.
• ✓ Morfo declara eventos (open, close-range-commit, close-cancel, close-dismiss, close-dismiss-outside, commit-clear) y data-last-action.
• ⚠️ Modo modal/no-modal con acciones explícitas (incidencia #5) — todavía no implementado.
• ⚠️ Botón clear explícito en la UI — todavía no implementado.
• ⚠️ Controles de demo start segments / end segments / paged nav — pendiente decidir si exponer en demo o sólo en API doc.

Baseline

• air: no había componente DateRangePicker en morfo-runtime; sólo visuales de calendario sirven como precedente.
• terra (morfo-runtime): componente compuesto sobre date-range-field, range-calendar y popover. Es la referencia directa de este wrapper.
• soma actual: añade startReadonlySegments/endReadonlySegments, allowSingleDay, isDateHoliday, números de semana y anuncios de navegación accesibles.

Comparativa

Aspecto	UIX DateRangePicker	React Aria	Bits UI	Ark UI
Composición	Field + Popover + RangeCalendar	Field + Popover + RangeCalendar	Field + Popover + RangeCalendar	Field + Popover + RangeCalendar
minDays / maxDays	✓	✗	✗	✗
allowSingleDay	✓	✗	✗	✗
isDateHoliday	✓	✗	✗	✗
Segmentos readonly por endpoint	✓	✗	parcial	✗
Eventos sema declarativos	✓ (5 events + intent)	n/a	n/a	n/a
data-last-action para tinte de salida	✓	✗	✗	✗
Modos modal/no-modal	✗ (pendiente)	✓	✗	✗
Auto-page al seleccionar en mes final	✗ (deliberado)	✗	✓	✓
Limpieza por endpoint individual	✓	parcial	✗	✗
Distinción visual start/end	✓ (stripe + swap)	✓	parcial	parcial

Decisiones

• Eidos no expone Provider — el root wrapper monta DateRangePicker.Provider internamente y estampa data-size / data-variant / data-color. Los consumidores manipulan estado por props (bind:value, bind:placeholder, bind:open), no accediendo al provider.
• El calendario es un range-calendar, no un calendar. Sub-partes envuelven los exports de soma/date-range-picker directamente, no los de Eidos Calendar, porque el contexto activo es RangeCalendarProvider.
• Selección nunca re-ancla el placeholder. La navegación entre meses es siempre explícita por parte del usuario (prev/next/month-select). Click en cualquier fecha — incluso en el último mes visible — mantiene el rango visible donde estaba (incidencia #1).
• Limpieza es por endpoint, no global. Click en un endpoint de un rango completo elimina sólo ese endpoint y re-ancla en el otro (incidencia #2). Para limpiar todo el rango se usa el botón clear (futuro) o value = { start: undefined, end: undefined } desde el caller.
• Start usa affirm por defecto, end usa el data-color accent. Cuando el accent colisiona (data-color="affirm"/"fulfill"), el start cambia a secondary para mantener distinción perceptiva (incidencia #4).
• El morfo declara eventos del picker (open, close-*, commit-clear). Eventos de celda (commit-start, commit-range, shift-navigate) los emite range-calendar; el picker no los duplica.

Gaps

ID	Disposición	Detalle
Modal mode con Save/Cancel (#5)	implementar	Prop mode: 'modal' | 'inline'. Modal añade Footer + SaveButton + CancelButton; click en celdas no auto-cierra. Requiere extensión del morfo (Footer/Save/Cancel parts) y nuevo evento close-save.
Botón Clear explícito	implementar	Limpia ambos endpoints. Emite commit-clear (ya declarado). Va en el header del calendario o en el field input.
Demo: start segments / end segments / paged nav	diferir	Mover a sección API-only del README; quitar de los controles interactivos del demo si no mejoran el preview.
data-disabled-reason en celdas para min/maxDays	diferir	El cell ya emite data-disabled; el "porqué" (out-of-bounds vs range-length) puede añadirse vía data-disabled-reason para que el screen reader explique. No bloqueante.
Tests browser-level del flujo completo	implementar	Falta cobertura visual (Playwright) del flujo abrir → seleccionar start → seleccionar end → commit/dismiss.