Widgets integrados

Oculta contenido adicional detrás de un resumen que se puede abrir y cerrar sin necesidad de scripts. Empieza cerrado, salvo que añadas open.

<details>
  <summary>What is LUZ?</summary>
  <p>A vanilla design system in plain CSS and ES modules.</p>
</details>

Con estilos de elements/interactive.css, sin clase.

Una caja sobre la página para una tarea o un mensaje. Al abrirla con showModal(), el resto de la página queda inerte, aparece un fondo y se puede cerrar con Escape. El botón de este ejemplo la abre sin scripts.

<button class="luz-btn luz-btn--primary" type="button" command="show-modal" commandfor="d-dialog">Open dialog</button>
<dialog id="d-dialog" aria-labelledby="d-dialog-title">
  <h4 id="d-dialog-title">A native dialog</h4>
  <p>Press Escape or the button to close it.</p>
  <form method="dialog">
    <button class="luz-btn luz-btn--primary">Close</button>
  </form>
</dialog>

Con estilos de elements/interactive.css, sin clase. Un diálogo sin clase recibe un fondo y vuelve a estar centrado. .luz-modal es el componente con cabecera, cuerpo y pie.

Un botón del navegador que comparte la ubicación de quien visita la página y gestiona por sí mismo el aviso de permisos. Es experimental y su disponibilidad es limitada: consulta la tabla de compatibilidad en MDN. Los atributos autolocate y watch controlan cuándo lee la posición.

Solo marcado: este elemento no se representa.

<geolocation>
  <button id="fallback">Use location</button>
</geolocation>

LUZ no añade estilos: se mantiene el aspecto del navegador.

La etiqueta de un elemento details que siempre permanece visible: al hacer clic, abre o cierra el resto del contenido. LUZ le añade un estado hover y un anillo de foco.

<details>
  <summary>What is LUZ?</summary>
  <p>A vanilla design system in plain CSS and ES modules.</p>
</details>

Con estilos de elements/interactive.css, sin clase.