Overlays

Surface and behaviour, apart#

sds-modal draws the surface, which a card can document. A card is a still picture and has nothing to open. sds-dialog is the behaviour. The open, the focus in and back, Escape, the page behind it inert, all on the platform's <dialog>, which does all of it right.

Not one component, on purpose. A dialog that has to open before it draws has no documentation, and a surface that takes the focus has no specimen.

How big one is#

A size is a shape, not a width. Each one says how wide the surface is and how tall it can get. So two dialogs of the same size are the same box, whatever they say. Past that height nothing grows. The head and the foot stay, and sds-modal__body scrolls.

sm is the default, because a dialog asks one question. md is the reading width of prose. lg is past the reading measure on purpose. What needs that much room is a thing to operate, not to read: a table, a picker, a diff. A question that wide is one nobody reads to the end. Every size gives its gutter back on a narrow screen.

The head, in every surface that has one#

The title on the left and the close on the right, the same row whichever surface opened. A <dialog>, the sds-modal a card documents, the lightbox. It carries a property set of its own for that reason. A custom property travels down and never sideways, and the head inside sds-lightbox, which is no .sds-modal, has no other set to read.

Two things settle there, and a glance judges a surface by both. The close is a square around a glyph. Its box reaches the padding edge, while the mark inside stands half a square further in than the title. The head gives that half back, and the two marks end up the same distance from their own edges. And the head is one control tall, the band the foot's buttons make. So the two strips the body sits between are one band.

A long heading wraps. The close never gives. Squeezed, it is a rectangle around a glyph off its centre. So it keeps its square, at the end of the row, with the row's gap before it.

sds-dialog#

<sds-button for="confirm-delete" command="show">Remove the token</sds-button>

<sds-dialog id="confirm-delete" heading="Remove this token?"
  body="Anything using it stops answering immediately."
  confirm-label="Remove" confirm-icon="actions-delete"
  tone="danger"></sds-dialog>

A question#

A confirm-label is the whole of a confirmation. The dialog draws the pair itself, the way out first, the press that answers last, and says which one the reader pressed. Nothing above comes from a script, which is the point. A question is markup, and the button that opens it names the dialog by id.

The pair is a <form method="dialog">, so the platform closes the dialog and records the press. Two events carry it, both bubbling and composed:

A dismissal is an answer. So the second one fires whatever closed the dialog, with or without the dialog's own pair. ask() is the same thing as a promise, for a caller that waits for the answer:

if (await document.querySelector('#confirm-delete').ask()) remove(token);

Set actions, and the dialog draws those buttons instead. A question with more than two answers, or one whose press is a link, is markup a caller writes.

show() opens it modally, ask() opens it and settles on the answer, and close() closes it. It answers sds-command from a button that names it with for.

sds-modal#

The surface alone: the same head, body and foot, with nothing that opens or closes it. For a specimen, and for a page that positions and manages its own floating surface.

sds-overlay#

The wash a floating surface sits on: --surface-overlay, never a shadow. It takes nothing and draws nothing else. What floats on it is a modal, and that is its own element.

<sds-overlay></sds-overlay>