Error title
Description text.
We will not share your email.
Invalid email address.
Hint text.
This field is required.
April 2026
Drop files here or browse
PNG, JPG up to 10 MB
invoice-q2.pdf selected
Saved
Changes saved successfully.
Payment successful
Your order has been placed.
Revenue
$12,400
↑ 12% from last month
vs last month
No items yet
Create your first item to get started.
Order placed
2 hours ago
Short supporting description.
Welcome back
Tip
Select a template to get started quickly.
No results found
Try adjusting your search terms.
Result title
Result description text.
Active
1,284
Churned
22
New this week
+128
Heads up
Your subscription renews in 3 days.
Body copy paragraph.
Inline quotation text.
or for semantics." }, "kbd": { "status": "stable", "root_selector": "kbd", "element": "kbd", "elements": [], "data_attrs": [], "minimal_html": "⌘ K", "notes": "Single inline keyboard key indicator. Use the native element for semantics." }, "code": { "status": "stable", "root_selector": "code", "element": "code", "elements": [], "data_attrs": [], "minimal_html": "npm install", "notes": "Inline code surface. For multi-line snippets use code-block. Syntax highlighting is not provided." }, "code-block": { "status": "stable", "root_selector": "code-block", "element": "pre", "elements": [], "data_attrs": [], "minimal_html": "const x = 1;\nconsole.log(x);", "notes": "Multi-line code block. Wrap the inner for valid HTML. Syntax-highlight integration is up to the consumer." }, "callout": { "status": "stable", "root_selector": "callout", "element": "div", "elements": [ { "selector": "callout-title", "role": "callout heading", "element": "p" }, { "selector": "callout-body", "role": "callout description", "element": "p" } ], "data_attrs": [], "minimal_html": "\n Heads up\n Supplementary explanation text.\n", "notes": "Inline-start accent informational callout. For dismissible/transient surfaces prefer alert or inline-notice; semantic distinction from alert is not fully resolved." }, "markdown-surface": { "status": "stable", "root_selector": "markdown-surface", "element": "div", "elements": [], "data_attrs": [], "minimal_html": "\n Title\n Rendered markdown body copy.\n \n Item\n \n", "notes": "Opinionated reset for rendered markdown/prose blocks. Resets margins on h1–h3, p, ul, pre and applies a vertical rhythm. May conflict with custom prose stacks." }, "number-input": { "status": "stable", "root_selector": "number-input", "element": "div", "elements": [ { "selector": "input", "role": "native numeric input", "element": "input" }, { "selector": "number-input-controls", "role": "increment/decrement column", "element": "div" }, { "selector": "number-input-step", "role": "single step button (up or down)", "element": "button" } ], "data_attrs": [], "minimal_html": "\n \n \n +\n −\n \n", "notes": "Composed numeric input with stacked stepper buttons. Always set aria-label on the input and on each step button. JS owns increment/decrement behavior." }, "range-slider": { "status": "stable", "root_selector": "range-slider", "element": "input", "elements": [], "data_attrs": [ { "attr": "disabled", "on": "root", "values": [ "present" ], "description": "Native disabled state." } ], "minimal_html": "", "notes": "Single-element native range input. Always provide aria-label or labelled-by association. min/max/step/value live on the native input." }, "rating": { "status": "stable", "root_selector": "rating", "element": "div", "elements": [ { "selector": "rating-item", "role": "single star/level button", "element": "button" }, { "selector": "rating-item-active", "role": "active visual modifier (alternative to data-active)", "element": "button" } ], "data_attrs": [ { "attr": "data-active", "on": "rating-item", "values": [ "true" ], "description": "Marks the item as selected/highlighted." }, { "attr": "data-value", "on": "root", "values": [ "1..5" ], "description": "Current rating value." }, { "attr": "data-max", "on": "root", "values": [ "5", "10" ], "description": "Maximum rating scale." }, { "attr": "data-half", "on": "root", "values": [ "true" ], "description": "Enables half-step rating." }, { "attr": "aria-disabled", "on": "root", "values": [ "true" ], "description": "Disables every rating item visually and via cursor." } ], "minimal_html": "\n ★\n ★\n ★\n ★\n ★\n", "notes": "Star/level rating control. JS owns selection state; toggle data-active='true' on the active items. Use role='radiogroup' on root and aria-label on each item. Half-step contract is not yet finalized." }, "tags-input": { "status": "stable", "root_selector": "tags-input", "element": "div", "elements": [ { "selector": "tags-input-list", "role": "row of selected tag chips", "element": "div" }, { "selector": "tags-input-item", "role": "single selected tag", "element": "span" }, { "selector": "tags-input-remove", "role": "remove tag button", "element": "button" }, { "selector": "tags-input-field", "role": "free-text entry input", "element": "input" } ], "data_attrs": [ { "attr": "data-tags", "on": "root", "values": [ "JSON string" ], "description": "Serialized tag data." }, { "attr": "data-tags-invalid", "on": "root", "values": [ "true" ], "description": "Invalid/error state on the wrapper (red border)." }, { "attr": "data-tags-disabled", "on": "root", "values": [ "true" ], "description": "Disables the input and all remove buttons." } ], "minimal_html": "\n \n design\n ×\n \n \n \n", "notes": "Composite chip + free-text input. JS owns tag add/remove. Use the wrapper-level data-tags-invalid / data-tags-disabled attributes (not data-invalid) — interaction API is still evolving." }, "autocomplete": { "status": "stable", "root_selector": "autocomplete", "element": "div", "elements": [ { "selector": "autocomplete-input", "role": "free-text input", "element": "input" }, { "selector": "autocomplete-list", "role": "suggestion listbox", "element": "ul" }, { "selector": "autocomplete-option", "role": "single suggestion", "element": "li" } ], "data_attrs": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the suggestion list." }, { "attr": "data-active", "on": "autocomplete-option", "values": [ "true" ], "description": "Highlights the option (e.g. keyboard cursor)." }, { "attr": "data-active-option", "on": "root", "values": [ "ID of active option" ], "description": "ID of the keyboard-focused option (ARIA 1.2)." } ], "minimal_html": "\n \n \n First match\n Second match\n \n", "notes": "Single-select free-text autocomplete. JS owns filtering, navigation and aria-activedescendant wiring. Keyboard interaction API may be extended (beta surface)." }, "combobox": { "status": "stable", "root_selector": "combobox", "element": "div", "elements": [ { "selector": "combobox-input", "role": "free-text input", "element": "input" }, { "selector": "combobox-list", "role": "options listbox", "element": "ul" }, { "selector": "combobox-option", "role": "single option", "element": "li" } ], "data_attrs": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the options list." }, { "attr": "data-active", "on": "combobox-option", "values": [ "true" ], "description": "Highlights the keyboard-focused option." }, { "attr": "aria-selected", "on": "combobox-option", "values": [ "true" ], "description": "Marks the option as the currently selected value." }, { "attr": "data-active-option", "on": "root", "values": [ "ID of active option" ], "description": "ID of the keyboard-focused option (ARIA 1.2)." } ], "minimal_html": "\n \n \n Selected option\n Highlighted option\n \n", "notes": "Single-select combobox. Differs from autocomplete by exposing a persisted aria-selected option. JS owns filtering and aria-activedescendant wiring. Keyboard interaction API may be extended (beta surface)." } } }
for semantics." }, "kbd": { "status": "stable", "root_selector": "kbd", "element": "kbd", "elements": [], "data_attrs": [], "minimal_html": "⌘ K", "notes": "Single inline keyboard key indicator. Use the native element for semantics." }, "code": { "status": "stable", "root_selector": "code", "element": "code", "elements": [], "data_attrs": [], "minimal_html": "npm install", "notes": "Inline code surface. For multi-line snippets use code-block. Syntax highlighting is not provided." }, "code-block": { "status": "stable", "root_selector": "code-block", "element": "pre", "elements": [], "data_attrs": [], "minimal_html": "const x = 1;\nconsole.log(x);", "notes": "Multi-line code block. Wrap the inner for valid HTML. Syntax-highlight integration is up to the consumer." }, "callout": { "status": "stable", "root_selector": "callout", "element": "div", "elements": [ { "selector": "callout-title", "role": "callout heading", "element": "p" }, { "selector": "callout-body", "role": "callout description", "element": "p" } ], "data_attrs": [], "minimal_html": "\n Heads up\n Supplementary explanation text.\n", "notes": "Inline-start accent informational callout. For dismissible/transient surfaces prefer alert or inline-notice; semantic distinction from alert is not fully resolved." }, "markdown-surface": { "status": "stable", "root_selector": "markdown-surface", "element": "div", "elements": [], "data_attrs": [], "minimal_html": "\n Title\n Rendered markdown body copy.\n \n Item\n \n", "notes": "Opinionated reset for rendered markdown/prose blocks. Resets margins on h1–h3, p, ul, pre and applies a vertical rhythm. May conflict with custom prose stacks." }, "number-input": { "status": "stable", "root_selector": "number-input", "element": "div", "elements": [ { "selector": "input", "role": "native numeric input", "element": "input" }, { "selector": "number-input-controls", "role": "increment/decrement column", "element": "div" }, { "selector": "number-input-step", "role": "single step button (up or down)", "element": "button" } ], "data_attrs": [], "minimal_html": "\n \n \n +\n −\n \n", "notes": "Composed numeric input with stacked stepper buttons. Always set aria-label on the input and on each step button. JS owns increment/decrement behavior." }, "range-slider": { "status": "stable", "root_selector": "range-slider", "element": "input", "elements": [], "data_attrs": [ { "attr": "disabled", "on": "root", "values": [ "present" ], "description": "Native disabled state." } ], "minimal_html": "", "notes": "Single-element native range input. Always provide aria-label or labelled-by association. min/max/step/value live on the native input." }, "rating": { "status": "stable", "root_selector": "rating", "element": "div", "elements": [ { "selector": "rating-item", "role": "single star/level button", "element": "button" }, { "selector": "rating-item-active", "role": "active visual modifier (alternative to data-active)", "element": "button" } ], "data_attrs": [ { "attr": "data-active", "on": "rating-item", "values": [ "true" ], "description": "Marks the item as selected/highlighted." }, { "attr": "data-value", "on": "root", "values": [ "1..5" ], "description": "Current rating value." }, { "attr": "data-max", "on": "root", "values": [ "5", "10" ], "description": "Maximum rating scale." }, { "attr": "data-half", "on": "root", "values": [ "true" ], "description": "Enables half-step rating." }, { "attr": "aria-disabled", "on": "root", "values": [ "true" ], "description": "Disables every rating item visually and via cursor." } ], "minimal_html": "\n ★\n ★\n ★\n ★\n ★\n", "notes": "Star/level rating control. JS owns selection state; toggle data-active='true' on the active items. Use role='radiogroup' on root and aria-label on each item. Half-step contract is not yet finalized." }, "tags-input": { "status": "stable", "root_selector": "tags-input", "element": "div", "elements": [ { "selector": "tags-input-list", "role": "row of selected tag chips", "element": "div" }, { "selector": "tags-input-item", "role": "single selected tag", "element": "span" }, { "selector": "tags-input-remove", "role": "remove tag button", "element": "button" }, { "selector": "tags-input-field", "role": "free-text entry input", "element": "input" } ], "data_attrs": [ { "attr": "data-tags", "on": "root", "values": [ "JSON string" ], "description": "Serialized tag data." }, { "attr": "data-tags-invalid", "on": "root", "values": [ "true" ], "description": "Invalid/error state on the wrapper (red border)." }, { "attr": "data-tags-disabled", "on": "root", "values": [ "true" ], "description": "Disables the input and all remove buttons." } ], "minimal_html": "\n \n design\n ×\n \n \n \n", "notes": "Composite chip + free-text input. JS owns tag add/remove. Use the wrapper-level data-tags-invalid / data-tags-disabled attributes (not data-invalid) — interaction API is still evolving." }, "autocomplete": { "status": "stable", "root_selector": "autocomplete", "element": "div", "elements": [ { "selector": "autocomplete-input", "role": "free-text input", "element": "input" }, { "selector": "autocomplete-list", "role": "suggestion listbox", "element": "ul" }, { "selector": "autocomplete-option", "role": "single suggestion", "element": "li" } ], "data_attrs": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the suggestion list." }, { "attr": "data-active", "on": "autocomplete-option", "values": [ "true" ], "description": "Highlights the option (e.g. keyboard cursor)." }, { "attr": "data-active-option", "on": "root", "values": [ "ID of active option" ], "description": "ID of the keyboard-focused option (ARIA 1.2)." } ], "minimal_html": "\n \n \n First match\n Second match\n \n", "notes": "Single-select free-text autocomplete. JS owns filtering, navigation and aria-activedescendant wiring. Keyboard interaction API may be extended (beta surface)." }, "combobox": { "status": "stable", "root_selector": "combobox", "element": "div", "elements": [ { "selector": "combobox-input", "role": "free-text input", "element": "input" }, { "selector": "combobox-list", "role": "options listbox", "element": "ul" }, { "selector": "combobox-option", "role": "single option", "element": "li" } ], "data_attrs": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the options list." }, { "attr": "data-active", "on": "combobox-option", "values": [ "true" ], "description": "Highlights the keyboard-focused option." }, { "attr": "aria-selected", "on": "combobox-option", "values": [ "true" ], "description": "Marks the option as the currently selected value." }, { "attr": "data-active-option", "on": "root", "values": [ "ID of active option" ], "description": "ID of the keyboard-focused option (ARIA 1.2)." } ], "minimal_html": "\n \n \n Selected option\n Highlighted option\n \n", "notes": "Single-select combobox. Differs from autocomplete by exposing a persisted aria-selected option. JS owns filtering and aria-activedescendant wiring. Keyboard interaction API may be extended (beta surface)." } } }
npm install
const x = 1;\nconsole.log(x);
for valid HTML. Syntax-highlight integration is up to the consumer." }, "callout": { "status": "stable", "root_selector": "callout", "element": "div", "elements": [ { "selector": "callout-title", "role": "callout heading", "element": "p" }, { "selector": "callout-body", "role": "callout description", "element": "p" } ], "data_attrs": [], "minimal_html": "\n Heads up\n Supplementary explanation text.\n", "notes": "Inline-start accent informational callout. For dismissible/transient surfaces prefer alert or inline-notice; semantic distinction from alert is not fully resolved." }, "markdown-surface": { "status": "stable", "root_selector": "markdown-surface", "element": "div", "elements": [], "data_attrs": [], "minimal_html": "\n Title\n Rendered markdown body copy.\n \n Item\n \n", "notes": "Opinionated reset for rendered markdown/prose blocks. Resets margins on h1–h3, p, ul, pre and applies a vertical rhythm. May conflict with custom prose stacks." }, "number-input": { "status": "stable", "root_selector": "number-input", "element": "div", "elements": [ { "selector": "input", "role": "native numeric input", "element": "input" }, { "selector": "number-input-controls", "role": "increment/decrement column", "element": "div" }, { "selector": "number-input-step", "role": "single step button (up or down)", "element": "button" } ], "data_attrs": [], "minimal_html": "\n \n \n +\n −\n \n", "notes": "Composed numeric input with stacked stepper buttons. Always set aria-label on the input and on each step button. JS owns increment/decrement behavior." }, "range-slider": { "status": "stable", "root_selector": "range-slider", "element": "input", "elements": [], "data_attrs": [ { "attr": "disabled", "on": "root", "values": [ "present" ], "description": "Native disabled state." } ], "minimal_html": "", "notes": "Single-element native range input. Always provide aria-label or labelled-by association. min/max/step/value live on the native input." }, "rating": { "status": "stable", "root_selector": "rating", "element": "div", "elements": [ { "selector": "rating-item", "role": "single star/level button", "element": "button" }, { "selector": "rating-item-active", "role": "active visual modifier (alternative to data-active)", "element": "button" } ], "data_attrs": [ { "attr": "data-active", "on": "rating-item", "values": [ "true" ], "description": "Marks the item as selected/highlighted." }, { "attr": "data-value", "on": "root", "values": [ "1..5" ], "description": "Current rating value." }, { "attr": "data-max", "on": "root", "values": [ "5", "10" ], "description": "Maximum rating scale." }, { "attr": "data-half", "on": "root", "values": [ "true" ], "description": "Enables half-step rating." }, { "attr": "aria-disabled", "on": "root", "values": [ "true" ], "description": "Disables every rating item visually and via cursor." } ], "minimal_html": "\n ★\n ★\n ★\n ★\n ★\n", "notes": "Star/level rating control. JS owns selection state; toggle data-active='true' on the active items. Use role='radiogroup' on root and aria-label on each item. Half-step contract is not yet finalized." }, "tags-input": { "status": "stable", "root_selector": "tags-input", "element": "div", "elements": [ { "selector": "tags-input-list", "role": "row of selected tag chips", "element": "div" }, { "selector": "tags-input-item", "role": "single selected tag", "element": "span" }, { "selector": "tags-input-remove", "role": "remove tag button", "element": "button" }, { "selector": "tags-input-field", "role": "free-text entry input", "element": "input" } ], "data_attrs": [ { "attr": "data-tags", "on": "root", "values": [ "JSON string" ], "description": "Serialized tag data." }, { "attr": "data-tags-invalid", "on": "root", "values": [ "true" ], "description": "Invalid/error state on the wrapper (red border)." }, { "attr": "data-tags-disabled", "on": "root", "values": [ "true" ], "description": "Disables the input and all remove buttons." } ], "minimal_html": "\n \n design\n ×\n \n \n \n", "notes": "Composite chip + free-text input. JS owns tag add/remove. Use the wrapper-level data-tags-invalid / data-tags-disabled attributes (not data-invalid) — interaction API is still evolving." }, "autocomplete": { "status": "stable", "root_selector": "autocomplete", "element": "div", "elements": [ { "selector": "autocomplete-input", "role": "free-text input", "element": "input" }, { "selector": "autocomplete-list", "role": "suggestion listbox", "element": "ul" }, { "selector": "autocomplete-option", "role": "single suggestion", "element": "li" } ], "data_attrs": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the suggestion list." }, { "attr": "data-active", "on": "autocomplete-option", "values": [ "true" ], "description": "Highlights the option (e.g. keyboard cursor)." }, { "attr": "data-active-option", "on": "root", "values": [ "ID of active option" ], "description": "ID of the keyboard-focused option (ARIA 1.2)." } ], "minimal_html": "\n \n \n First match\n Second match\n \n", "notes": "Single-select free-text autocomplete. JS owns filtering, navigation and aria-activedescendant wiring. Keyboard interaction API may be extended (beta surface)." }, "combobox": { "status": "stable", "root_selector": "combobox", "element": "div", "elements": [ { "selector": "combobox-input", "role": "free-text input", "element": "input" }, { "selector": "combobox-list", "role": "options listbox", "element": "ul" }, { "selector": "combobox-option", "role": "single option", "element": "li" } ], "data_attrs": [ { "attr": "data-open", "on": "root", "values": [ "true" ], "description": "Shows the options list." }, { "attr": "data-active", "on": "combobox-option", "values": [ "true" ], "description": "Highlights the keyboard-focused option." }, { "attr": "aria-selected", "on": "combobox-option", "values": [ "true" ], "description": "Marks the option as the currently selected value." }, { "attr": "data-active-option", "on": "root", "values": [ "ID of active option" ], "description": "ID of the keyboard-focused option (ARIA 1.2)." } ], "minimal_html": "\n \n \n Selected option\n Highlighted option\n \n", "notes": "Single-select combobox. Differs from autocomplete by exposing a persisted aria-selected option. JS owns filtering and aria-activedescendant wiring. Keyboard interaction API may be extended (beta surface)." } } }
Supplementary explanation text.
Rendered markdown body copy.