Dialog

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<dialog class="aparte-dialog" id="settings" aria-labelledby="settings-title">
  <div class="aparte-dialog__header">
    <h2 class="aparte-dialog__title" id="settings-title">Settings</h2>
    <button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-dialog__close" type="button" aria-label="Close" data-aparte-dialog-close>
      <aparte-icon name="close"></aparte-icon>
    </button>
  </div>
  <div class="aparte-dialog__body">
    <label class="aparte-field-label" for="endpoint">Endpoint</label>
    <input class="aparte-field" id="endpoint" value="http://localhost:11434/v1">
  </div>
  <div class="aparte-dialog__footer">
    <button class="aparte-btn aparte-btn--ghost" type="button" data-aparte-dialog-close>Cancel</button>
    <button class="aparte-btn aparte-btn--primary aparte-btn--solid" type="button" data-aparte-dialog-close="saved">Save</button>
  </div>
</dialog>
<button class="aparte-btn aparte-btn--surface" type="button" data-aparte-dialog-open="settings">Open settings</button>

A modal, drawn on the native <dialog>.

The kit said for a year that a dialog was “deliberately absent — a modal needs a portal and a stack manager”. The browser has had both since 2022: <dialog> with showModal() puts the box in the top layer above everything, traps focus, closes on Escape, hands the focus back, and draws a ::backdrop. So this recipe styles THAT element, and core’s one addition is the wiring — a data-aparte-dialog-open on any control opens the dialog it names, a data-aparte-dialog-close inside one closes it, and a click on the backdrop closes it unless the dialog carries data-aparte-dialog-static. Nothing here reaches for position:fixed on your behalf: the top layer is the browser’s.

Sizes: --sm (24rem), the default (32rem), --lg (48rem); under 30rem of window every size becomes a full-screen sheet, which is what a settings hub is on a phone. The value passed to data-aparte-dialog-close="…" becomes the dialog’s returnValue, read in its native close event.

Classes

.aparte-dialog · .aparte-dialog--lg · .aparte-dialog--sm · .aparte-dialog__body · .aparte-dialog__close · .aparte-dialog__footer · .aparte-dialog__header · .aparte-dialog__title

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.