Accordion

Para contenido que se consulta por partes y no hace falta leer entero, como las preguntas frecuentes del hotel. Por defecto se pueden abrir varias secciones a la vez. No escondas en un acordeón lo que el usuario necesita para decidir, como el precio o la política de cancelación. Para cambiar entre vistas, usa Tabs.

items sirve cuando título y contenido son texto. Desde React no admite nodos: para contenido rico, escribe las secciones como hijos AccordionItem, como en los ejemplos de abajo. Sigue el patrón accordion de la APG: Enter o Espacio abren y cierran, ↑/↓ pasan de cabecera en cabecera e Inicio/Fin van a los extremos.

Con single, abrir una sección cierra la anterior. Úsalo cuando las secciones son alternativas y el usuario solo necesita una, como las indicaciones para llegar según el transporte. Si tiene que compararlas, ponlas una al lado de la otra. Cada AccordionItem lleva su value y su heading (antes, id y title).

default-open recibe, en JSON, los value que se abren de entrada; se lee solo al montarse. Con SSR (Next) pásalo como atributo, como aquí: la prop defaultOpen llega después del primer render del elemento y no abre nada (hueco del kit); en una app solo de cliente, la prop vale. Para abrir o cerrar una sección después, cambia su open, y escucha su onToggle, que recibe { value, open }. El icono va en el slot icon y un título con marcado en el slot heading: un estado puede ir como Badge en la cabecera y verse sin abrir la sección. La cabecera es un botón dentro de un encabezado de nivel 3 (level lo cambia).

Cambia frente al kit React: cerrada, una sección queda oculta de verdad, y ni el foco ni el lector de pantalla entran en ella. Aun así, deja fuera las acciones que el usuario tiene que encontrar sin buscar.

Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).