Sheet

Pulsa una llegada: el panel entra por la derecha con la reserva y la lista sigue detrás, en su sitio. Es el hueco que el kit React no tenía: antes, consultar un detalle pedía un modal o una página. heading y description pintan la cabecera con la ✕; el cuerpo hace scroll solo y las acciones del slot footer se quedan fijas al pie.

Va sobre el <dialog> nativo, como Modal: el foco entra al abrir, queda atrapado, vuelve a la fila que lo abrió y la página queda inerte. Tú controlas open y lo cierras en onClose, que llega con Esc, el clic fuera o la ✕. active en la fila deja claro de quién es el panel.

side elige el borde: right por defecto, left para una navegación secundaria y bottom para móvil, donde ocupa todo el ancho y hasta el 85 % del alto. size fija el ancho de los laterales, de sm (384 px) a xl (896 px), y siempre deja 40 px de página a la vista; en el inferior no aplica. Entra y sale deslizándose desde su borde en 300 ms; cerrar a mitad de la entrada da la vuelta desde donde va.

Esc, el clic fuera y la ✕ no cierran directamente: emiten uz-request-close (onRequestClose), que es cancelable. Con preventDefault() el panel sigue abierto y puedes preguntar con confirm() antes de perder lo escrito. El botón «Cancelar» llama al método requestClose() para pasar por la misma pregunta.

Si nunca debe cerrarse por fuera, dismissible={false} apaga Esc y el clic fuera, y deja solo la ✕ y tus botones.

• Sheet: el detalle o la edición de un registro mientras la lista importa. Se puede leer con la lista detrás y volver a ella sin perder el scroll.
• Modal: una tarea corta que pide toda la atención y no puede quedarse a medias.
• Popover: unos filtros o dos campos junto a su botón, sin bloquear la página.

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).