3.7 KiB

Raw Blame History

Continue tomorrow

Fecha de corte: 2026-05-22. Rama: active-uix.

Resumen del día

Auditoría + mejoras a 6 componentes form (select, field, editable, number-field, search-field, combobox). Commits clave: ffdb4804 → df948aa3. Todos los componentes pasaron svelte-check 0/0 al cerrar.

Pendiente / en curso

Hecho:

src/uix/eidos/components/popover/popover.css emite min-inline-size: var(--floating-anchor-width, auto) como default → popover ≥ anchor para TODOS los popover-based.
sideOffset unificado a 6 en soma popover-content y en los 5 pickers (date / date-range / time / time-range / color).

Pendiente: los pickers anclan al chevron trigger (~14px), no al input wrapper (~448px). Por eso --floating-anchor-width resuelve a 14px y el min-inline-size no actúa visible.

Patrón verificado vs Ark / Radix / shadcn / React Aria:

Select / Combobox → anchor = trigger button (ya correcto).
Pickers compuestos (date/time/color + range) → anchor = input wrapper (falta).

Implementación (Approach A, soma-side):

En cada picker provider (src/uix/soma/components/{date,time,color}-picker/*-provider.svelte.ts), exponer inputRef.
El *-input.svelte wrapper registra provider.inputRef.current = el en mount.
Donde el popover hace FloatingContent.use({ customAnchor: ... }), usar inputRef.current si existe, sino triggerRef.current.

Verificación: abrir popover, comprobar que getComputedStyle(wrapper).getPropertyValue('--floating-anchor-width') == ancho del input wrapper, no del chevron.

2. Combobox multi mode con tags inline

Decisión del usuario: patrón Material UI Autocomplete — items seleccionados como pills DENTRO del input, caret al final.

Pendiente:

Añadir Combobox.SelectedTags part al morfo (kebab selected-tags, archetype group, optional).
Soma: ComboboxSelectedTagsProvider que renderiza un pill por value con X para eliminar.
Eidos: wrapper + CSS — tags + <input> en flex container con flex-wrap.
Backspace en input vacío ya elimina último tag (commit C4 del audit, ya en main).
Demo: ejemplo en multi mode.

Notas técnicas:

El $effect actual del provider sync inputValue al label SOLO en single mode. Para multi NO se debe tocar inputValue (filter activo).
Mi patch anterior de "stamp labels on close" en multi fue revertido. El sync queda en cargo de SelectedTags.

3. SearchField como Combobox-like

Decisión del usuario: SearchField debe tener layer flotante con results clickables.

Opciones:

A (elegida): añadir SearchField.Results part con popover propio (items clickables emiten commit-select).
B (descartada): documentar y reusar Combobox.

Pendiente.

4. Combobox: revisar effect de single-mode label sync al mezclar con tags inline

El $effect en combobox-provider.svelte.ts (líneas ~145) sync inputValue al label en single mode. Al añadir SelectedTags (item 2), verificar que no haya loops en multi.

Estado actual del working tree (sin commit aún)

src/uix/eidos/components/popover/popover.css — --_popover-min-width añadido.
src/uix/eidos/components/{date,date-range,time,time-range,color}-picker/*-content.svelte — sideOffset = 6.
src/uix/soma/components/popover/components/popover-content.svelte — default sideOffset = 6.
src/uix/soma/components/combobox/combobox-provider.svelte.ts — revertido patch multi-on-close + comentario "Multi mode renders selections as inline tags via a separate Combobox.SelectedTags part" como recordatorio.

Comandos útiles

cd G:/dev/svelte/vicen
npx svelte-check --threshold error    # 0/0 expected
npm run dev                            # via .claude/launch.json "dev"

3.7 KiB Raw Blame History