Overlays
What floats over the page, and what it floats on. The system has no shadows, so an overlay needs a wash and a hairline to be an overlay of something — which is also why the specimen draws the modal inside a bordered box rather than floating it over the page.
Surface and behaviour, apart#
sds-modal draws the surface, which is what a card can document: a card is a
still picture and has nothing to open. sds-dialog is the behaviour —
opening, taking the focus and giving it back, Escape, the page behind it inert
— on the platform's <dialog>, which does all of it correctly.
Deliberately not one component: a dialog that had to be opened to be drawn would be undocumentable, and a surface that grabbed the focus would be unusable in a specimen.
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."
.actions="${[cancel, remove]}"></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."
.actions="${[cancel, remove]}"></sds-dialog>Also the dialog's accessible name.
-
headingrequired # -
- type
- string
Also the dialog's accessible name.
-
body# -
- type
- string | markup
Rendered buttons. Ghost first, primary last — the order the rest of the system reads in.
-
actions# -
- type
- "markup[]"
Rendered buttons. Ghost first, primary last — the order the rest of the system reads in.
Centred, and bounded by the modal measure: what is inside one is read.
-
width# -
- type
- number
- default
- 330
Centred, and bounded by the modal measure: what is inside one is read.
-
open# -
- type
- boolean
- default
- false
show() opens it modally 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.
-
heading# -
- type
- string
-
body# -
- type
- string | markup
-
actions# -
- type
- "markup[]"
-
width# -
- type
- number
- default
- 330
It is positioned by whatever opens it. The host is display: contents and
is not in the box tree, so those styles land on the element that is actually
laid out — which is the same reason sds-surface takes a box-style.
It is positioned by whatever opens it. The host is display: contents and
is not in the box tree, so those styles land on the element that is actually
laid out — which is the same reason sds-surface takes a box-style.
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><sds-overlay></sds-overlay>Media for sds-lightbox, which is the same platform <dialog>
with a different surface: a modal stops at a reading measure because what is
inside one is read, and a drawing is looked at.
Media for sds-lightbox, which is the same platform <dialog>
with a different surface: a modal stops at a reading measure because what is
inside one is read, and a drawing is looked at.