Built-in widgets

Hides extra content behind a summary the user opens and closes, with no script needed. It starts closed unless you add open.

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

Styled by elements/interactive.css, with no class.

A box above the page for a task or a message. Opened with showModal() it makes the rest of the page inert, shows a backdrop and closes with Escape. The button here opens it with no script.

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

Styled by elements/interactive.css, with no class. A dialog with no class gets a surface and its centering back. .luz-modal is the component with a header, body and footer.

A button drawn by the browser that shares the visitor's location and handles the permission prompt itself. Experimental and of limited availability: check the compatibility table on MDN. The autolocate and watch attributes control when it reads the position.

Markup only: this element is not rendered.

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

LUZ adds no style: the browser look is kept.

The label of a details that always stays in view: clicking it opens and closes the rest. LUZ gives it a hover and a focus ring.

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

Styled by elements/interactive.css, with no class.