From 03d8b317114cba3c81920cb658de37c1e8002a67 Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 24 Jul 2026 01:51:12 +0200 Subject: [PATCH] =?UTF-8?q?fix(accordion):=20el=20Item=20no=20es=20una=20f?= =?UTF-8?q?ila=20de=20lista=20=E2=80=94=20hover=20que=20llena=20toda=20la?= =?UTF-8?q?=20fila?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit El `Accordion.Item` (un `
` contenedor del header + contenido) llevaba `archetype: 'item'`, y `archetypes.css` estiliza `[data-archetype='item']` como FILA de lista/menú: le mete `padding-block: 6px` y su PROPIO fondo de `:hover`. En un acordeón eso peleaba con el hover del Trigger: el fondo del item (fila entera) y el del trigger (más corto, por el padding de 6px) se apilaban en un hover desigual y bandeado que no cubría toda la fila. Un item de acordeón es un CONTENEDOR de disclosure, no una fila clicable — la parte interactiva es el Trigger (que ya tiene `archetype: 'trigger'` y su hover). Quitado el archetype del Item (regla: «omit archetype for display parts»). Ahora el item no arrastra padding ni hover de fila: el Trigger llena el item y su hover cubre toda la fila, sin banda doble. El disclosure no cambia: los eventos open/close siguen apuntando al Item por su kebab, no por el archetype; el `data-state` sigue emitiéndose. Verificado: en el FAQ el item pasa de 57px (con 6px de padding) a 45px (trigger + 1px de separador), sin `data-archetype`; la demo canon del Accordion intacta (abre/cierra, eventos en la traza). `svelte-check` sin errores · `vitest src/uix/morfo/components` 53/53. Co-Authored-By: Claude Opus 4.8 --- src/uix/morfo/components/accordion.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/uix/morfo/components/accordion.ts b/src/uix/morfo/components/accordion.ts index 5c27e4b76..53f4c1cd1 100644 --- a/src/uix/morfo/components/accordion.ts +++ b/src/uix/morfo/components/accordion.ts @@ -79,7 +79,13 @@ export const accordionMorfo = { { name: 'Item', kebab: 'item', - archetype: 'item', + // NO archetype: the Item is a disclosure CONTAINER, not an interactive + // list/menu row. `archetype: 'item'` pulled the `archetypes.css` + // list-row styling — `padding-block: 6px` plus its own `:hover` + // background — which fought the Trigger's hover: the item's fill + // (full row) and the trigger's fill (shorter) stacked into an uneven, + // banded hover that did not read as full-row. The interactive part is + // the Trigger, which carries `archetype: 'trigger'` and its own hover. kind: 'public', defaultElement: 'div', optional: false,