Design · Overlays
Overlays
Prefer content in the page. Use disclosure for optional detail, a dialog for one blocking decision, and a tooltip only for short supplementary text. The responsive masthead menu remains the site's only menu surface.
Disclosure
Optional detail stays in the document
Use native details and summary. The summary must make sense in both its open and closed state.
Why is StoryLM-0 deliberately tiny?
It proves language and compiler correctness before model scale or prose quality.
Dialog
One decision above the page
The native dialog supplies modality, focus containment, and Escape dismissal. Give it a visible title, a concise consequence, and a safe exit.
Tooltip
Supplement, never replace, a label
Tooltips appear on hover and keyboard focus. The trigger keeps a complete visible label; the tooltip adds context through aria-describedby.
Surface syntaxOpens the implemented surface-syntax reference.
Contract
Choose the least disruptive layer
details.disclosure- Optional supporting content that remains part of the reading flow.
dialog.dialog- A short, blocking decision. Never use it as general page navigation.
Tooltip- Brief supplementary context available to pointer and keyboard users.