# modest-ui

> A minimal, themeable CSS component library.

IMPORTANT: The npm package is "mdst-ui", NOT "modest-ui". The name "modest-ui"
on npm is an UNRELATED Vue library — do not install it. This package is named
"mdst-ui" to match its class/token prefix (.mdst-ui, --mdst-*). Whenever a
human says "modest-ui", the package to install is "mdst-ui".

- Version: 2.0.0 (this file describes v2; class names differ from v1)
- Package (npm): mdst-ui
- Docs: https://modest-ui.com
- GitHub: https://github.com/thisismodest/modest-ui
- License: MIT

## Installation

CDN (pin the major version so markup and CSS match):
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdst-ui@2/dist/modest-ui.min.css" />

npm:
  npm install mdst-ui   # NOT "npm install modest-ui"

Import (bundled):
  @import "mdst-ui/dist/modest-ui.css";

Cherry-pick (tokens first):
  @import "mdst-ui/base/tokens.css";
  @import "mdst-ui/components/button/button.css";

modest-ui is CSS only. JavaScript shown in the docs is example code for
behaviour you own (switching tabs, showing a toast, revealing a password).

## Rules for writing modest-ui markup

1. Put `class="mdst-ui"` on `<body>` (or a wrapper) and write semantic HTML.
   Bare elements inside it are styled with no classes.
2. Add a modifier class only for a variant: `<button class="mdst-button--solid">`.
   Modifiers work on bare elements without the base class.
3. Use the base class (`.mdst-button`, `.mdst-input`) outside `.mdst-ui`, or for
   components that have no native element (card, tag, tabs, toast…).
4. Drive runtime state with data attributes (`data-state="active"`, `"visible"`,
   `"completed"`), and ARIA where it exists (`aria-pressed`, `aria-invalid`,
   `aria-selected`, `aria-disabled`). Never use data attributes for colour or size.
5. Theme with `--mdst-*` tokens. Don't restyle components to change colours.
6. Put your own layout CSS outside any cascade layer; it always wins.
7. Every `<input>` takes the same class, `.mdst-input`, and is styled by its
   `type`: text, email, number, date, checkbox, radio, range, file, color.
   A checkbox with `role="switch"` is drawn as a toggle. Labels need no
   class. Only password and OTP have a wrapper (`.mdst-password-input`,
   `.mdst-otp-input`), and the inputs inside take no element class.

## Naming

BEM with the `mdst-` prefix:
- Block: `.mdst-card`
- Element: `.mdst-card__header`, `.mdst-tabs__panel`
- Modifier: `.mdst-card--sm`, `.mdst-card__header--borderless`

Shared modifier vocabulary:
- Status: `--success`, `--info`, `--warning`, `--danger` (and `--muted`)
- Fill and edge: `--solid`, `--subtle`, `--borderless`
- Size: `--sm`, `--lg`
- Direction: `--start`, `--end` (never left/right)

## Classless elements

Styled automatically inside `.mdst-ui`: button, input (every type, as with
`.mdst-input`), input[type="checkbox"][role="switch"] (a toggle), textarea,
select, form, fieldset, legend, label, details, dialog, table, progress,
meter, code, pre, h1–h6, p, a, strong, em, small, mark, kbd, abbr[title], del,
ins, s, cite, samp, var, sub, sup, blockquote, hr, ul, ol, li.

Class-only components: avatar, badge, banner, breadcrumbs, card, drawer,
otp-input, password-input, popover, radio cards, skeleton, spinner, stepper,
tabs, tag, toast, toolbar, tooltip, utilities.

## Behaviour to know

- Cascade layer: everything is in `@layer mdst-ui`. Any CSS outside a layer
  beats it. To order against other layers: `@layer reset, mdst-ui, utilities;`
- Flow spacing: children of plain containers inside `.mdst-ui` (the root and
  unclassed main, section, article, div, form, fieldset, …) are spaced by
  `--mdst-flow-space`. Give a container a class or an inline style to lay it
  out yourself.
- Dark mode is opt-in: `:root { color-scheme: light dark; }` follows the
  system, `color-scheme: dark` forces it. Without it pages stay light.
- Focus: one keyboard ring for everything (`--mdst-focus-ring`,
  `--mdst-focus-offset`).
- Right-to-left: components use logical properties and mirror in `dir="rtl"`.
- The reset only applies inside `.mdst-ui`.

---

## Design Tokens

Override these custom properties on `:root` (or any element) to theme modest-ui.

### Colors

| Token                | Value   |
| -------------------- | ------- |
| --mdst-color-fg      | #000    |
| --mdst-color-bg      | #fff    |
| --mdst-color-border  | #000    |
| --mdst-color-muted   | #666    |
| --mdst-color-subtle  | #f5f5f5 |
| --mdst-color-focus   | #000    |
| --mdst-color-danger  | #dc2626 |
| --mdst-color-warning | #b45309 |
| --mdst-color-success | #15803d |

### Typography

| Token              | Value                                                                        |
| ------------------ | ---------------------------------------------------------------------------- |
| --mdst-font-sans   | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif |
| --mdst-font-mono   | ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace       |
| --mdst-line-height | 1.5                                                                          |

### Semantic font roles

| Token            | Value                 |
| ---------------- | --------------------- |
| --mdst-font-text | var(--mdst-font-sans) |
| --mdst-font-ui   | var(--mdst-font-sans) |

### Font sizes

| Token            | Value    |
| ---------------- | -------- |
| --mdst-text-xs   | 0.75rem  |
| --mdst-text-sm   | 0.875rem |
| --mdst-text-base | 1rem     |
| --mdst-text-lg   | 1.125rem |
| --mdst-text-xl   | 1.25rem  |

### Spacing

| Token           | Value     |
| --------------- | --------- |
| --mdst-space-px | 0.0625rem |
| --mdst-space-1  | 0.25rem   |
| --mdst-space-2  | 0.5rem    |
| --mdst-space-3  | 0.75rem   |
| --mdst-space-4  | 1rem      |
| --mdst-space-5  | 1.25rem   |
| --mdst-space-6  | 1.5rem    |
| --mdst-space-8  | 2rem      |

### Semantic spacing aliases

| Token           | Value               |
| --------------- | ------------------- |
| --mdst-space-xs | var(--mdst-space-1) |
| --mdst-space-sm | var(--mdst-space-2) |
| --mdst-space-md | var(--mdst-space-4) |
| --mdst-space-lg | var(--mdst-space-6) |
| --mdst-space-xl | var(--mdst-space-8) |

### Flow

| Token             | Value |
| ----------------- | ----- |
| --mdst-flow-space | 1em   |

### Focus

| Token               | Value |
| ------------------- | ----- |
| --mdst-focus-offset | 0px   |

### Border

| Token               | Value    |
| ------------------- | -------- |
| --mdst-radius       | 0        |
| --mdst-border-width | 0.0625em |

### Transitions

| Token                  | Value          |
| ---------------------- | -------------- |
| --mdst-transition-fast | 50ms ease-out  |
| --mdst-transition      | 100ms ease-out |
| --mdst-transition-slow | 200ms ease-out |

### Depth

| Token            | Value                                 |
| ---------------- | ------------------------------------- |
| --mdst-shadow-sm | 0 0.125rem 0.375rem rgb(0 0 0 / 0.15) |
| --mdst-shadow    | 0 0.25rem 0.75rem rgb(0 0 0 / 0.2)    |
| --mdst-backdrop  | rgb(0 0 0 / 0.4)                      |
| --mdst-z-overlay | 1000                                  |

### State

| Token                   | Value |
| ----------------------- | ----- |
| --mdst-disabled-opacity | 0.5   |

### Optional tokens

Not set by default; set them to change behaviour everywhere.

| Token | Effect |
| --- | --- |
| `--mdst-focus-ring` | Replaces the keyboard focus ring, e.g. `3px dashed hotpink`, or `none` |
| `--mdst-color-info` | Colour for `--info` variants (defaults to the text colour) |
| `--mdst-button-hover-shadow` | Button hover (default: an inset ring in the text colour), or `none` |

### Button variables

Set on a button, a class, or a container to make your own variant:

| Variable | Default |
| --- | --- |
| `--mdst-button-tone` | `--mdst-color-fg` (text, and the fill of solid buttons) |
| `--mdst-button-bg` | `--mdst-color-bg` |
| `--mdst-button-fg` | the tone |
| `--mdst-button-border` | `--mdst-color-border` |

---

## Components

---

### Avatar `.mdst-avatar`

Circular or square avatar containers for user images and initials. Supports multiple sizes and grouping with overlap.

Classes:
- `.mdst-avatar`
- `.mdst-avatar-group`
- `.mdst-avatar--lg`
- `.mdst-avatar--sm`
- `.mdst-avatar--square`
- `.mdst-avatar--xl`

```html
<!-- Avatar with image -->
<span class="mdst-avatar">
  <img src="avatar.jpg" alt="User" />
</span>

<!-- Avatar with initials -->
<span class="mdst-avatar">AB</span>

<!-- Sizes -->
<span class="mdst-avatar mdst-avatar--sm">AB</span>
<span class="mdst-avatar mdst-avatar--lg">AB</span>
<span class="mdst-avatar mdst-avatar--xl">AB</span>

<!-- Square variant -->
<span class="mdst-avatar mdst-avatar--square">
  <img src="avatar.jpg" alt="User" />
</span>

<!-- Avatar group -->
<div class="mdst-avatar-group">
  <span class="mdst-avatar">
    <img src="user1.jpg" alt="User 1" />
  </span>
  <span class="mdst-avatar">
    <img src="user2.jpg" alt="User 2" />
  </span>
  <span class="mdst-avatar">+3</span>
</div>
```

---

### Badge `.mdst-badge`

Small count and notification indicators. Supports solid, subtle, and dot variants with optional absolute positioning for overlays.

Classes:
- `.mdst-badge`
- `.mdst-badge--danger`
- `.mdst-badge--dot`
- `.mdst-badge--info`
- `.mdst-badge--lg`
- `.mdst-badge--muted`
- `.mdst-badge--sm`
- `.mdst-badge--solid`
- `.mdst-badge--subtle`
- `.mdst-badge--success`
- `.mdst-badge--top-end`
- `.mdst-badge--warning`

```html
<!-- Default badge -->
<span class="mdst-badge">3</span>

<!-- Variants -->
<span class="mdst-badge mdst-badge--solid">12</span>
<span class="mdst-badge mdst-badge--subtle">New</span>
<span class="mdst-badge mdst-badge--dot"></span>

<!-- Status colors -->
<span class="mdst-badge mdst-badge--danger mdst-badge--solid">5</span>
<span class="mdst-badge mdst-badge--success">✓</span>
<span class="mdst-badge mdst-badge--warning">!</span>
<span class="mdst-badge mdst-badge--muted">0</span>

<!-- Sizes -->
<span class="mdst-badge mdst-badge--sm">3</span>
<span class="mdst-badge mdst-badge--lg">12</span>

<!-- Positioned on an element -->
<div style="position: relative; display: inline-flex;">
  <button class="mdst-button">Inbox</button>
  <span class="mdst-badge mdst-badge--solid mdst-badge--danger mdst-badge--top-end">7</span>
</div>

<!-- Dot indicator -->
<span class="mdst-badge mdst-badge--success mdst-badge--dot"></span>
```

---

### Banner `.mdst-banner`

Full-width message strip for cookie consent, alerts, and announcements. Sits in the page flow, sticks to the top or bottom of a section, or fixes to the viewport. Status variants are modifier classes; visibility is driven by data-state.

Classes:
- `.mdst-banner`
- `.mdst-banner__actions`
- `.mdst-banner__close`
- `.mdst-banner__content`
- `.mdst-banner--border-bottom`
- `.mdst-banner--border-end`
- `.mdst-banner--border-start`
- `.mdst-banner--border-top`
- `.mdst-banner--borderless`
- `.mdst-banner--bottom`
- `.mdst-banner--danger`
- `.mdst-banner--end`
- `.mdst-banner--fixed`
- `.mdst-banner--info`
- `.mdst-banner--sm`
- `.mdst-banner--start`
- `.mdst-banner--success`
- `.mdst-banner--top`
- `.mdst-banner--warning`

```html
<!-- In the flow of the page -->
<section class="mdst-banner mdst-banner--info" aria-label="Announcement">
  <div class="mdst-banner__content">Scheduled maintenance on Sunday.</div>
  <button class="mdst-banner__close" aria-label="Dismiss">✕</button>
</section>

<!-- Sticky to the top of a scrolling section -->
<section style="overflow-y: auto">
  <div class="mdst-banner mdst-banner--top mdst-banner--border-bottom">...</div>
  ...
</section>

<!-- Fixed to the bottom of the viewport (cookie consent) -->
<section class="mdst-banner mdst-banner--fixed mdst-banner--bottom"
     data-state="visible" aria-label="Cookie consent">
  <div class="mdst-banner__content">We use analytics cookies.</div>
  <div class="mdst-banner__actions">
    <button class="mdst-button mdst-button--sm">Reject</button>
    <button class="mdst-button mdst-button--sm mdst-button--solid">Accept</button>
  </div>
</section>

<!-- Compact card fixed to the bottom-right corner -->
<section class="mdst-banner mdst-banner--sm mdst-banner--fixed mdst-banner--bottom mdst-banner--end"
     data-state="visible" aria-label="Cookie consent">...</section>

<!-- Edge-to-edge fixed banner -->
<div class="mdst-banner mdst-banner--fixed mdst-banner--top" style="--mdst-banner-offset: 0">...</div>

<!-- Example JS -->
<script>
  function showBanner(el) {
    el.setAttribute("data-state", "visible");
  }
  function hideBanner(el) {
    el.setAttribute("data-state", "hidden");
  }
</script>
```

---

### Breadcrumbs `.mdst-breadcrumbs`

Navigation breadcrumb trail with separator support. Works classless via aria-label or with explicit class.

Classes:
- `.mdst-breadcrumbs`
- `.mdst-breadcrumbs--arrow`
- `.mdst-breadcrumbs--sm`

```html
<!-- Class-based breadcrumbs -->
<nav class="mdst-breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li><span aria-current="page">Widget</span></li>
  </ol>
</nav>

<!-- Arrow separator -->
<nav class="mdst-breadcrumbs mdst-breadcrumbs--arrow" aria-label="Breadcrumb">
  <ol>
    <li><a href="#home">Home</a></li>
    <li><span aria-current="page">Page</span></li>
  </ol>
</nav>

<!-- Compact -->
<nav class="mdst-breadcrumbs mdst-breadcrumbs--sm" aria-label="Breadcrumb">
  <ol>
    <li><a href="#home">Home</a></li>
    <li><span aria-current="page">Page</span></li>
  </ol>
</nav>
```

---

### Button `.mdst-button`

Button with solid, borderless, and danger variants, toggle and disabled states, and three sizes. Variants are just variables, so you can make your own.

Classes:
- `.mdst-button`
- `.mdst-button--borderless`
- `.mdst-button--danger`
- `.mdst-button--lg`
- `.mdst-button--sm`
- `.mdst-button--solid`

```html
<button class="mdst-button">Default</button>
<button class="mdst-button mdst-button--solid">Inverted</button>
<button class="mdst-button mdst-button--borderless">Ghost</button>
<button class="mdst-button mdst-button--sm">Small</button>
<button class="mdst-button mdst-button--lg">Large</button>

<!-- Danger is a colour: combine it with any variant -->
<button class="mdst-button mdst-button--danger mdst-button--solid">Delete</button>

<!-- Toggle buttons -->
<button class="mdst-button" aria-pressed="true">Bold</button>

<!-- Links can't be disabled: drop the href, keep role="link", add aria-disabled -->
<a class="mdst-button" role="link" aria-disabled="true">Unavailable</a>

/* Hover: any box-shadow, or none */
:root { --mdst-button-hover-shadow: none; }

/* Prefer an underline? Add your own rule */
.mdst-ui button:hover { text-decoration: underline; }

<!-- Your own variant: set the variables -->
.btn-brand { --mdst-button-tone: #4338ca; }
<button class="mdst-button mdst-button--solid btn-brand">Brand</button>
```

---

### Card `.mdst-card`

A bordered container for grouping content with optional header, body, and footer sections.

Classes:
- `.mdst-card`
- `.mdst-card__body`
- `.mdst-card__footer`
- `.mdst-card__header`
- `.mdst-card--borderless`
- `.mdst-card--flush`
- `.mdst-card--interactive`
- `.mdst-card--sm`
- `.mdst-card__footer--borderless`
- `.mdst-card__header--borderless`

```html
<!-- Basic card -->
<div class="mdst-card">
  <div class="mdst-card__body">Content</div>
</div>

<!-- With header, body, and footer -->
<div class="mdst-card">
  <div class="mdst-card__header">Title</div>
  <div class="mdst-card__body">Content goes here.</div>
  <div class="mdst-card__footer">
    <button class="mdst-button mdst-button--sm">Action</button>
  </div>
</div>

<!-- Interactive (hover state) -->
<div class="mdst-card mdst-card--interactive">
  <div class="mdst-card__body">Clickable card</div>
</div>

<!-- Compact padding -->
<div class="mdst-card mdst-card--sm">
  <div class="mdst-card__body">Tight content</div>
</div>

<!-- Flush body (no body padding, for tables/images) -->
<div class="mdst-card mdst-card--flush">
  <div class="mdst-card__header">Table card</div>
  <div class="mdst-card__body">
    <table class="mdst-table">...</table>
  </div>
</div>

<!-- Borderless header (no bottom border) -->
<div class="mdst-card">
  <div class="mdst-card__header mdst-card__header--borderless">Title</div>
  <div class="mdst-card__body">Content</div>
</div>

<!-- Borderless footer (no top border) -->
<div class="mdst-card">
  <div class="mdst-card__body">Content</div>
  <div class="mdst-card__footer mdst-card__footer--borderless">
    Tags or metadata here
  </div>
</div>
```

---

### Checkbox `.mdst-input`

Checkbox, and a toggle switch for checkboxes with role="switch". Label support, checked, and disabled states.

Classes:
- `.mdst-input`
- `.mdst-input--pill`

```html
<!-- With label (recommended) -->
<label>
  <input type="checkbox" class="mdst-input" />
  Label text
</label>

<!-- Standalone -->
<input type="checkbox" class="mdst-input" />

<!-- States -->
<input type="checkbox" class="mdst-input" checked />
<input type="checkbox" class="mdst-input" disabled />

<!-- Toggle -->
<input type="checkbox" class="mdst-input" role="switch" />
<input type="checkbox" class="mdst-input" role="switch" checked />
<input type="checkbox" class="mdst-input" role="switch" disabled />

<!-- Toggle rounded -->
<input type="checkbox" class="mdst-input mdst-input--pill" role="switch" />
<input type="checkbox" class="mdst-input mdst-input--pill" role="switch" checked />
```

---

### Code `.mdst-code`

Inline code component for displaying code snippets within text.

Classes:
- `.mdst-code`

```html
<p>Use <code class="mdst-code">const x = 1</code> to declare a variable.</p>
```

---

### Color `.mdst-input`

Native colour input drawn as a round or square swatch.

Classes:
- `.mdst-input`
- `.mdst-input--square`

```html
<input type="color" class="mdst-input" value="#000000" />

<!-- Square, following --mdst-radius -->
<input type="color" class="mdst-input mdst-input--square" value="#F4E3C1" />

<!-- With the hex value beside it -->
<div style="display: flex; gap: 0.5rem; align-items: center">
  <input type="color" class="mdst-input" value="#4A3F1F" />
  <input type="text" class="mdst-input" value="#4A3F1F" style="width: 7rem" />
</div>
```

---

### Date & time `.mdst-input`

Date, time, datetime-local, month, and week inputs, styled to match the text fields. The pickers are the browser's own.

Classes:
- `.mdst-input`

```html
<input type="date" class="mdst-input" />
<input type="time" class="mdst-input" />
<input type="datetime-local" class="mdst-input" />
<input type="month" class="mdst-input" />
<input type="week" class="mdst-input" />

<!-- Limit the range -->
<input type="date" class="mdst-input" min="2026-10-01" max="2026-10-31" />
```

---

### Details `.mdst-details`

Expandable details/accordion component with section variants.

Classes:
- `.mdst-details`
- `.mdst-details--borderless`
- `.mdst-details--section`
- `.mdst-details--sm`

```html
<!-- Basic details -->
<details class="mdst-details">
  <summary>Click to expand</summary>
  <p>Content goes here.</p>
</details>

<!-- Open by default -->
<details class="mdst-details" open>
  <summary>Already open</summary>
  <p>Content goes here.</p>
</details>

<!-- Section variant -->
<details class="mdst-details mdst-details--section">
  <summary>Section Title</summary>
  <p>Content goes here.</p>
</details>

<!-- Exclusive open — only one open at a time -->
<details class="mdst-details" name="faq" open>
  <summary>Question 1</summary>
  <p>Answer 1</p>
</details>
<details class="mdst-details" name="faq">
  <summary>Question 2</summary>
  <p>Answer 2</p>
</details>
<details class="mdst-details" name="faq">
  <summary>Question 3</summary>
  <p>Answer 3</p>
</details>
```

---

### Dialog `.mdst-dialog`

Modal dialog component with header, body, footer structure and multiple sizes.

Classes:
- `.mdst-dialog`
- `.mdst-dialog__body`
- `.mdst-dialog__close`
- `.mdst-dialog__footer`
- `.mdst-dialog__header`
- `.mdst-dialog__title`
- `.mdst-dialog--full`
- `.mdst-dialog--lg`
- `.mdst-dialog--sm`

```html
<dialog id="my-dialog" class="mdst-dialog">
  <div class="mdst-dialog__header">
    <h2 class="mdst-dialog__title">Dialog Title</h2>
    <button class="mdst-dialog__close" commandfor="my-dialog" command="close">✕</button>
  </div>
  <div class="mdst-dialog__body">
    <p>Dialog content goes here.</p>
  </div>
  <div class="mdst-dialog__footer">
    <button class="mdst-button mdst-button--borderless" commandfor="my-dialog" command="close">Cancel</button>
    <button class="mdst-button mdst-button--solid" commandfor="my-dialog" command="close">Confirm</button>
  </div>
</dialog>

<button commandfor="my-dialog" command="show-modal">Open Dialog</button>
```

---

### Drawer `.mdst-drawer`

Side panel built on native <dialog>. Backdrop, focus trapping, Escape to close, and accessibility for free.

Classes:
- `.mdst-drawer`
- `.mdst-drawer__body`
- `.mdst-drawer__close`
- `.mdst-drawer__footer`
- `.mdst-drawer__header`
- `.mdst-drawer--full`
- `.mdst-drawer--lg`
- `.mdst-drawer--sm`
- `.mdst-drawer--start`

```html
<!-- Trigger button -->
<button commandfor="my-drawer" command="show-modal">Open Drawer</button>

<!-- Right drawer (default) -->
<dialog id="my-drawer" class="mdst-drawer">
  <div class="mdst-drawer__header">
    <span>Drawer Title</span>
    <button class="mdst-drawer__close" commandfor="my-drawer" command="close">&#10005;</button>
  </div>
  <div class="mdst-drawer__body">
    <p>Content goes here.</p>
  </div>
  <div class="mdst-drawer__footer">
    <button commandfor="my-drawer" command="close">Cancel</button>
    <button commandfor="my-drawer" command="close">Save</button>
  </div>
</dialog>

<!-- Left position -->
<dialog class="mdst-drawer mdst-drawer--start">...</dialog>

<!-- Sizes -->
<dialog class="mdst-drawer mdst-drawer--sm">...</dialog>
<dialog class="mdst-drawer mdst-drawer--lg">...</dialog>
<dialog class="mdst-drawer mdst-drawer--full">...</dialog>
```

---

### Dropdown `.mdst-dropdown`

Native select dropdown with borderless and inline variants in multiple sizes.

Classes:
- `.mdst-dropdown`
- `.mdst-dropdown--borderless`
- `.mdst-dropdown--inline`
- `.mdst-dropdown--lg`
- `.mdst-dropdown--sm`

```html
<!-- Basic dropdown -->
<select class="mdst-dropdown">
  <option value="">Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<!-- With optgroups -->
<select class="mdst-dropdown">
  <option value="">Choose a fruit</option>
  <optgroup label="Citrus">
    <option value="orange">Orange</option>
    <option value="lemon">Lemon</option>
  </optgroup>
  <optgroup label="Berries">
    <option value="strawberry">Strawberry</option>
    <option value="blueberry">Blueberry</option>
  </optgroup>
</select>

<!-- Inline usage -->
<p>Sort by
  <select class="mdst-dropdown mdst-dropdown--inline mdst-dropdown--borderless">
    <option value="newest">Newest</option>
    <option value="oldest">Oldest</option>
  </select>
</p>
```

---

### File `.mdst-input`

Native file input with a styled "Choose file" button. No JavaScript required.

Classes:
- `.mdst-input`
- `.mdst-input--borderless`
- `.mdst-input--solid`

```html
<!-- Basic file input -->
<input type="file" class="mdst-input" />

<!-- Borderless -->
<input type="file" class="mdst-input mdst-input--borderless" />

<!-- Solid button -->
<input type="file" class="mdst-input mdst-input--solid" />

<!-- Disabled -->
<input type="file" class="mdst-input" disabled />

<!-- Accept only images -->
<input type="file" class="mdst-input" accept="image/*,.png,.jpg,.jpeg,.gif,.webp" />

<!-- Multiple files -->
<input type="file" class="mdst-input" multiple />
```

---

### Form `.mdst-form`

A light structure layer for plain forms: fields stack under their labels, fieldsets get a border and legend, and invalid fields show in the error colour. Zero specificity, so your own styles always win.

Classes:
- `.mdst-fieldset`
- `.mdst-form`
- `.mdst-legend`

```html
<body class="mdst-ui">
  <form>
    <fieldset>
      <legend>Account</legend>
      <label for="email">Email</label>
      <input id="email" type="email" required>
    </fieldset>
    <button>Save</button>
  </form>
</body>

<!-- Outside .mdst-ui, use the classes -->
<form class="mdst-form">…</form>
<fieldset class="mdst-fieldset"><legend class="mdst-legend">…</legend></fieldset>

<!-- Mark a field invalid -->
<input aria-invalid="true" aria-describedby="email-error">

/* Tighter or looser forms */
form { --mdst-flow-space: 0.75rem; }
```

---

### Text `.mdst-input`

Text, email, number, search, tel, and url inputs, plus textarea. Styled classless or with .mdst-input, with borderless, focus, and invalid states.

Classes:
- `.mdst-input`
- `.mdst-input--borderless`

```html
<!-- Text input -->
<input type="text" class="mdst-input" placeholder="Enter text" />

<!-- Any text-like type: email, number, search, tel, url -->
<input type="email" class="mdst-input" placeholder="you@example.com" />

<!-- Invalid -->
<input type="email" class="mdst-input" aria-invalid="true" />

<!-- Textarea -->
<textarea class="mdst-input" placeholder="Write something..."></textarea>

<!-- Disabled -->
<input type="text" class="mdst-input" disabled />
```

---

### Meter `.mdst-meter`

Styles the native <meter> element for scalar values like storage, scores, or password strength. Fill colour follows the low, high, and optimum attributes.

Classes:
- `.mdst-meter`
- `.mdst-meter--lg`
- `.mdst-meter--sm`

```html
<!-- Default meter (0–1) -->
<meter class="mdst-meter" value="0.6">60%</meter>

<!-- Custom range -->
<meter class="mdst-meter" min="0" max="256" value="92">92 of 256 GB</meter>

<!-- Higher is better: colour shifts to warning / error as the value drops -->
<meter class="mdst-meter" low="0.3" high="0.7" optimum="1" value="0.5">Fair</meter>

<!-- Lower is better: colour shifts as usage climbs -->
<meter class="mdst-meter" max="256" low="160" high="224" optimum="0" value="212">212 GB</meter>

<!-- Sizes -->
<meter class="mdst-meter mdst-meter--sm" value="0.5">50%</meter>
<meter class="mdst-meter mdst-meter--lg" value="0.5">50%</meter>

<!-- Classless (inside .mdst-ui container) -->
<div class="mdst-ui">
  <meter value="0.75">75%</meter>
</div>
```

---

### OTP `.mdst-otp-input`

One-time password digits with danger and success states. Auto-advance and paste are a few lines of your own JavaScript; the docs include an example.

Classes:
- `.mdst-otp-input`
- `.mdst-otp-input__separator`
- `.mdst-otp-input--danger`
- `.mdst-otp-input--success`

```html
<!-- 4-digit code -->
<div class="mdst-otp-input">
  <input type="text" maxlength="1" inputmode="numeric" />
  <input type="text" maxlength="1" />
  <input type="text" maxlength="1" inputmode="numeric" />
  <input type="text" maxlength="1" />
</div>

<!-- With separator -->
<div class="mdst-otp-input">
  <input type="text" maxlength="1" inputmode="numeric" />
  <input type="text" maxlength="1" />
  <span class="mdst-otp-input__separator"></span>
  <input type="text" maxlength="1" inputmode="numeric" />
  <input type="text" maxlength="1" />
</div>

<!-- Error state -->
<div class="mdst-otp-input mdst-otp-input--danger">...</div>

<!-- Success state -->
<div class="mdst-otp-input mdst-otp-input--success">...</div>
```

---

### Password `.mdst-password-input`

Password field with an eye toggle. The field is a real type="password"; showing the text takes a few lines of your own JavaScript.

Classes:
- `.mdst-password-input`

```html
<!-- Basic password input -->
<div class="mdst-password-input">
  <input type="password" autocomplete="current-password" class="mdst-input" placeholder="Enter password" />
  <input type="checkbox" name="password-toggle" aria-label="Toggle password visibility" />
</div>

<!-- Disabled -->
<div class="mdst-password-input">
  <input type="password" autocomplete="current-password" class="mdst-input" placeholder="Disabled" disabled />
  <input type="checkbox" name="password-toggle" aria-label="Toggle password visibility" disabled />
</div>

<!-- Multiple instances (no IDs needed) -->
<div class="mdst-password-input">
  <input type="password" autocomplete="current-password" class="mdst-input" placeholder="Current password" />
  <input type="checkbox" name="password-toggle" aria-label="Toggle password visibility" />
</div>

<div class="mdst-password-input">
  <input type="password" autocomplete="new-password" class="mdst-input" placeholder="New password" />
  <input type="checkbox" name="password-toggle" aria-label="Toggle password visibility" />
</div>

<script>
  // Example: show or hide the text when the eye toggle changes
  document.querySelectorAll(".mdst-password-input > input[type=checkbox]").forEach((toggle) => {
    toggle.addEventListener("change", () => {
      const field = toggle.parentElement.querySelector("input:not([type=checkbox])");
      field.type = toggle.checked ? "text" : "password";
    });
  });
</script>
```

---

### Popover `.mdst-popover`

Popover component using the native Popover API for tooltips and dropdowns.

Classes:
- `.mdst-popover`
- `.mdst-popover--anchored`
- `.mdst-popover--lg`
- `.mdst-popover--sm`

```html
<!-- Basic popover -->
<button popovertarget="my-popover">Toggle Popover</button>

<div id="my-popover" class="mdst-popover" popover>
  <p>Popover content</p>
</div>

<!-- Anchored popover -->
<button id="trigger" popovertarget="anchored">Open Menu</button>

<div id="anchored" class="mdst-popover mdst-popover--anchored" popover anchor="trigger">
  <p>Anchored below the button</p>
</div>

<!-- Manual popover -->
<div id="manual" class="mdst-popover" popover="manual">
  <p>Won't close on outside click</p>
</div>
```

---

### Pre `.mdst-pre`

Preformatted code block component for displaying multi-line code.

Classes:
- `.mdst-pre`
- `.mdst-pre--borderless`
- `.mdst-pre--scroll`
- `.mdst-pre--sm`

```html
<!-- Default (wraps text) -->
<pre class="mdst-pre">{
  "json": "content"
}</pre>

<!-- Compact -->
<pre class="mdst-pre mdst-pre--sm">single line</pre>

<!-- Borderless -->
<pre class="mdst-pre mdst-pre--borderless">no border</pre>

<!-- Horizontal scroll -->
<pre class="mdst-pre mdst-pre--scroll">long content...</pre>
```

---

### Progress `.mdst-progress`

Progress bar component styling the native <progress> element with size and status variants.

Classes:
- `.mdst-progress`
- `.mdst-progress--danger`
- `.mdst-progress--lg`
- `.mdst-progress--sm`
- `.mdst-progress--success`

```html
<!-- Default progress bar -->
<progress class="mdst-progress" value="60" max="100">60%</progress>

<!-- Indeterminate (no value attribute) -->
<progress class="mdst-progress">Loading…</progress>

<!-- Status variants -->
<progress class="mdst-progress mdst-progress--success" value="100" max="100">100%</progress>
<progress class="mdst-progress mdst-progress--danger" value="35" max="100">35%</progress>

<!-- Sizes -->
<progress class="mdst-progress mdst-progress--sm" value="50" max="100">50%</progress>
<progress class="mdst-progress mdst-progress--lg" value="50" max="100">50%</progress>

<!-- Classless (inside .mdst-ui container) -->
<div class="mdst-ui">
  <progress value="75" max="100">75%</progress>
</div>
```

---

### Radio `.mdst-input`

Radio button with label support, group layout, and selectable cards.

Classes:
- `.mdst-input`
- `.mdst-radio-card`
- `.mdst-radio-card-group`
- `.mdst-radio-group`
- `.mdst-radio-group--horizontal`

```html
<!-- With label (recommended) -->
<label>
  <input type="radio" name="group" class="mdst-input" />
  Label text
</label>

<!-- Radio group (vertical) -->
<div class="mdst-radio-group">
  <label>
    <input type="radio" name="group" class="mdst-input" checked />
    Option 1
  </label>
  <label>
    <input type="radio" name="group" class="mdst-input" />
    Option 2
  </label>
</div>

<!-- Radio group (horizontal) -->
<div class="mdst-radio-group mdst-radio-group--horizontal">
  ...
</div>

<!-- Radio card -->
<div class="mdst-radio-card-group">
  <label class="mdst-radio-card">
    <input type="radio" name="group" class="mdst-input" checked />
    Any content here
  </label>
  <label class="mdst-radio-card">
    <input type="radio" name="group" class="mdst-input" />
    Any content here
  </label>
</div>
```

---

### Range `.mdst-input`

Range slider styled to match the rest of the library.

Classes:
- `.mdst-input`

```html
<!-- Basic range -->
<input type="range" class="mdst-input" min="0" max="100" value="50" />

<!-- With steps -->
<input type="range" class="mdst-input" min="0" max="100" value="25" step="25" />

<!-- Disabled -->
<input type="range" class="mdst-input" min="0" max="100" value="75" disabled />
```

---

### Skeleton `.mdst-skeleton`

Placeholder loading shapes with an animated shimmer effect. Supports text, heading, and circle variants for building loading states.

Classes:
- `.mdst-skeleton`
- `.mdst-skeleton--circle`
- `.mdst-skeleton--heading`
- `.mdst-skeleton--text`

```html
<!-- Basic skeleton -->
<div class="mdst-skeleton" style="width: 100%"></div>

<!-- Text lines -->
<div class="mdst-skeleton mdst-skeleton--text" style="width: 80%"></div>
<div class="mdst-skeleton mdst-skeleton--text" style="width: 100%"></div>
<div class="mdst-skeleton mdst-skeleton--text" style="width: 60%"></div>

<!-- Heading -->
<div class="mdst-skeleton mdst-skeleton--heading" style="width: 50%"></div>

<!-- Circle -->
<span class="mdst-skeleton mdst-skeleton--circle"></span>

<!-- Custom size via inline style -->
<div class="mdst-skeleton" style="width: 100%; height: 8rem"></div>

<!-- Card skeleton composition -->
<div style="display: flex; align-items: center; gap: 0.5rem">
  <span class="mdst-skeleton mdst-skeleton--circle" style="width: 2.5rem; height: 2.5rem"></span>
  <div style="flex: 1">
    <div class="mdst-skeleton mdst-skeleton--text" style="width: 60%"></div>
    <div class="mdst-skeleton mdst-skeleton--text" style="width: 40%"></div>
  </div>
</div>
```

---

### Spinner `.mdst-spinner`

Animated loading spinner using CSS borders and rotation. Inherits color from context with size variants.

Classes:
- `.mdst-spinner`
- `.mdst-spinner--lg`
- `.mdst-spinner--sm`

```html
<!-- Default spinner -->
<span class="mdst-spinner" role="status" aria-label="Loading"></span>

<!-- Sizes -->
<span class="mdst-spinner mdst-spinner--sm" role="status" aria-label="Loading"></span>
<span class="mdst-spinner mdst-spinner--lg" role="status" aria-label="Loading"></span>

<!-- Inherits currentColor from parent -->
<div style="color: var(--mdst-color-danger)">
  <span class="mdst-spinner mdst-spinner--sm" role="status" aria-label="Error"></span>
  Something went wrong
</div>

<!-- Inside a button -->
<button class="mdst-button" disabled>
  <span class="mdst-spinner mdst-spinner--sm" role="status" aria-label="Submitting"></span>
  Submitting
</button>
```

---

### Stepper `.mdst-stepper`

Multi-step progress indicator driven by data-state attributes for completed, active, upcoming, and error states.

Classes:
- `.mdst-stepper`
- `.mdst-stepper__indicator`
- `.mdst-stepper__label`
- `.mdst-stepper__step`
- `.mdst-stepper--sm`
- `.mdst-stepper--vertical`

```html
<!-- Set data-state on each .mdst-stepper__step -->

data-state="completed"  → Step is done (filled indicator, solid connector)
data-state="active"     → Current step (bold indicator and label)
data-state="upcoming"   → Not yet reached (muted indicator and label)
data-state="error"      → Step has an error (error-colored indicator and label)

<!-- Your JS updates these attributes as the user progresses -->
step.dataset.state = "completed";
step.dataset.state = "active";
step.dataset.state = "error";
```

---

### Table `.mdst-table`

Table component with bordered, striped, small, equal, and stacked variants.

Classes:
- `.mdst-table`
- `.mdst-table-wrap`
- `.mdst-table--bordered`
- `.mdst-table--fixed`
- `.mdst-table--sm`
- `.mdst-table--stack`
- `.mdst-table--striped`

```html
<!-- Basic table -->
<table class="mdst-table">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

<!-- With scroll wrapper -->
<div class="mdst-table-wrap">
  <table class="mdst-table">...</table>
</div>

<!-- Stack on mobile -->
<table class="mdst-table mdst-table--stack">...</table>

<!-- Combined variants -->
<table class="mdst-table mdst-table--bordered mdst-table--striped">...</table>
```

---

### Tabs `.mdst-tabs`

Data-attribute-driven tabbed interface with pills, vertical, and small variants.

Classes:
- `.mdst-tabs`
- `.mdst-tabs__list`
- `.mdst-tabs__panel`
- `.mdst-tabs__tab`
- `.mdst-tabs--pills`
- `.mdst-tabs--sm`
- `.mdst-tabs--vertical`

```html
<!-- On .mdst-tabs__tab (tab buttons) -->
data-state="active"          Tab is selected
data-state="inactive"        Tab is not selected
data-disabled                Tab cannot be selected (boolean attribute)
data-disabled="true"         Same as above (explicit value)

<!-- On .mdst-tabs__panel (content panels) -->
data-state="active"          Panel is visible
data-state="inactive"        Panel is hidden (display: none)

<!-- Your JS toggles these attributes to switch tabs.
     modest-ui provides all the visual states. -->
```

---

### Tag `.mdst-tag`

Inline labels for status, categories, and metadata. Supports solid, subtle, and borderless variants, status colours, with optional dismiss button.

Classes:
- `.mdst-tag`
- `.mdst-tag__dismiss`
- `.mdst-tag--borderless`
- `.mdst-tag--danger`
- `.mdst-tag--info`
- `.mdst-tag--interactive`
- `.mdst-tag--lg`
- `.mdst-tag--muted`
- `.mdst-tag--pill`
- `.mdst-tag--sm`
- `.mdst-tag--solid`
- `.mdst-tag--subtle`
- `.mdst-tag--success`
- `.mdst-tag--warning`

```html
<!-- Default tag -->
<span class="mdst-tag">Tag</span>

<!-- Variants -->
<span class="mdst-tag mdst-tag--solid">Solid</span>
<span class="mdst-tag mdst-tag--subtle">Subtle</span>
<span class="mdst-tag mdst-tag--borderless">Ghost</span>

<!-- Pill shape -->
<span class="mdst-tag mdst-tag--pill">Pill</span>

<!-- Status colors -->
<span class="mdst-tag mdst-tag--success">Active</span>
<span class="mdst-tag mdst-tag--danger">Failed</span>
<span class="mdst-tag mdst-tag--muted">Archived</span>

<!-- Status + variant combos -->
<span class="mdst-tag mdst-tag--success mdst-tag--solid">Online</span>
<span class="mdst-tag mdst-tag--danger mdst-tag--subtle">Offline</span>

<!-- Sizes -->
<span class="mdst-tag mdst-tag--sm">Small</span>
<span class="mdst-tag mdst-tag--lg">Large</span>

<!-- Dismissible -->
<span class="mdst-tag">
  Label
  <button class="mdst-tag__dismiss" aria-label="Remove">&times;</button>
</span>
```

---

### Toast `.mdst-toast`

Notification toast messages with success, info, warning, and danger variants. Visibility is driven by data-state.

Classes:
- `.mdst-toast`
- `.mdst-toast-group`
- `.mdst-toast__close`
- `.mdst-toast--danger`
- `.mdst-toast--info`
- `.mdst-toast--success`
- `.mdst-toast--warning`

```html
<!-- Toast group (fixed container) -->
<div class="mdst-toast-group">

  <!-- A visible success toast -->
  <output class="mdst-toast mdst-toast--success" data-state="visible">
    Your changes have been saved.
    <button class="mdst-toast__close" aria-label="Dismiss">✕</button>
  </output>

  <!-- A hidden toast (waiting to be shown) -->
  <output class="mdst-toast mdst-toast--danger" data-state="hidden">
    Something went wrong.
    <button class="mdst-toast__close" aria-label="Dismiss">✕</button>
  </output>

</div>

<!-- Example JS -->
<script>
  function showToast(el) {
    el.setAttribute("data-state", "visible");
  }
  function hideToast(el) {
    el.setAttribute("data-state", "hidden");
  }
</script>
```

---

### Toolbar `.mdst-toolbar`

A wrapping row of controls with groups, attached (segmented) groups, separators, and a spacer to push actions to the end. Toggle buttons use aria-pressed.

Classes:
- `.mdst-toolbar`
- `.mdst-toolbar__group`
- `.mdst-toolbar__separator`
- `.mdst-toolbar__spacer`
- `.mdst-toolbar--bordered`
- `.mdst-toolbar__group--attached`

```html
<!-- Filters on the left, actions pushed to the right -->
<div class="mdst-toolbar">
  <input type="search" class="mdst-input" placeholder="Search…" aria-label="Search" />
  <div class="mdst-toolbar__spacer"></div>
  <div class="mdst-toolbar__group">
    <button class="mdst-button">Export</button>
    <button class="mdst-button mdst-button--solid">Add</button>
  </div>
</div>

<!-- Attached toggle group with a separator -->
<div class="mdst-toolbar mdst-toolbar--bordered" role="toolbar" aria-label="Formatting">
  <div class="mdst-toolbar__group mdst-toolbar__group--attached">
    <button class="mdst-button mdst-button--sm" aria-pressed="true">B</button>
    <button class="mdst-button mdst-button--sm" aria-pressed="false">I</button>
  </div>
  <hr class="mdst-toolbar__separator" />
  <button class="mdst-button mdst-button--sm mdst-button--borderless">Undo</button>
</div>
```

---

### Tooltip `.mdst-tooltip`

Tooltip component using the native Popover API and CSS anchor positioning.

Classes:
- `.mdst-tooltip`
- `.mdst-tooltip--end`
- `.mdst-tooltip--start`
- `.mdst-tooltip--top`

```html
<!-- Bottom (default) -->
<button id="my-trigger" popovertarget="my-tooltip">
  Hover or click me
</button>
<div id="my-tooltip" class="mdst-tooltip" popover anchor="my-trigger">
  Helpful tooltip text
</div>

<!-- Top -->
<button id="top-trigger" popovertarget="top-tip">Top</button>
<div id="top-tip" class="mdst-tooltip mdst-tooltip--top" popover anchor="top-trigger">
  Above the trigger
</div>

<!-- Left -->
<button id="left-trigger" popovertarget="left-tip">Left</button>
<div id="left-tip" class="mdst-tooltip mdst-tooltip--start" popover anchor="left-trigger">
  Left of the trigger
</div>

<!-- Right -->
<button id="right-trigger" popovertarget="right-tip">Right</button>
<div id="right-tip" class="mdst-tooltip mdst-tooltip--end" popover anchor="right-trigger">
  Right of the trigger
</div>
```

---

### Typography `.mdst-*`

Typography utilities for headings, body text, small text, and font styles.

Classes:
- `.mdst-a`
- `.mdst-abbr`
- `.mdst-blockquote`
- `.mdst-cite`
- `.mdst-del`
- `.mdst-em`
- `.mdst-fieldset`
- `.mdst-h1`
- `.mdst-h2`
- `.mdst-h3`
- `.mdst-h4`
- `.mdst-h5`
- `.mdst-h6`
- `.mdst-hr`
- `.mdst-ins`
- `.mdst-kbd`
- `.mdst-li`
- `.mdst-mark`
- `.mdst-ol`
- `.mdst-p`
- `.mdst-s`
- `.mdst-samp`
- `.mdst-small`
- `.mdst-strong`
- `.mdst-sub`
- `.mdst-sup`
- `.mdst-ul`
- `.mdst-var`
- `.mdst-hr--flush`
- `.mdst-p--lg`
- `.mdst-p--muted`
- `.mdst-p--sm`
- `.mdst-ul--unstyled`

```html
<!-- Headings -->
<h1 class="mdst-h1">Heading 1</h1>
<h2 class="mdst-h2">Heading 2</h2>

<!-- Paragraph -->
<p class="mdst-p">Default paragraph.</p>
<p class="mdst-p mdst-p--muted">Muted text.</p>

<!-- Inline -->
<a href="#docs" class="mdst-a">Link</a>
<strong class="mdst-strong">Bold</strong>
<em class="mdst-em">Italic</em>
<mark class="mdst-mark">Highlight</mark>
<kbd class="mdst-kbd">Ctrl</kbd> + <kbd class="mdst-kbd">K</kbd>
<abbr title="Cascading Style Sheets">CSS</abbr>
<del>Removed</del> <ins>Added</ins>
<s>£40</s> £32
<cite>The Elements of Style</cite>
<samp>File saved.</samp> <var>w</var>
H<sub>2</sub>O  mc<sup>2</sup>

<!-- Blockquote -->
<blockquote class="mdst-blockquote">Quote</blockquote>

<!-- Horizontal rule -->
<hr class="mdst-hr" />
<hr class="mdst-hr mdst-hr--flush" />

<!-- Lists -->
<ul class="mdst-ul">
  <li class="mdst-li">Item</li>
</ul>
```

---

### Utilities `.mdst-*`

Small utility classes for common layout and text patterns: screen-reader-only, truncation, centering, and more.

Classes:
- `.mdst-mono`
- `.mdst-muted`
- `.mdst-sr-only`
- `.mdst-truncate`

```html
<!-- Screen reader only -->
<span class="mdst-sr-only">Skip to content</span>

<!-- Truncated text -->
<div class="mdst-truncate" style="max-width: 12rem">
  Long text that will be truncated...
</div>

<!-- Muted text -->
<span class="mdst-muted">Secondary text</span>

<!-- Monospace text -->
<code class="mdst-mono">monospace</code>
```

---

## Theming Example

```css
:root {
  --mdst-color-fg: #1a1a1a;
  --mdst-color-bg: #ffffff;
  --mdst-color-border: #e5e5e5;
  --mdst-color-focus: #2563eb;
  --mdst-radius: 6px;
  --mdst-font-text: Charter, Georgia, serif;
}
```

Setting colour tokens yourself replaces both the light and dark values. To keep
dark mode, set them inside `@media (prefers-color-scheme: dark)` too, or use
`light-dark()`:

```css
:root {
  color-scheme: light dark;
  --mdst-color-fg: light-dark(#1a1a1a, #f5f5f5);
  --mdst-color-bg: light-dark(#ffffff, #111111);
}
```

---

## Quick Class Reference

Avatar:         .mdst-avatar  .mdst-avatar-group  | --lg  --sm  --square  --xl
Badge:          .mdst-badge  | --danger  --dot  --info  --lg  --muted  --sm  --solid  --subtle  --success  --top-end  --warning
Banner:         .mdst-banner  + __actions  __close  __content  | --border-bottom  --border-end  --border-start  --border-top  --borderless  --bottom  --danger  --end  --fixed  --info  --sm  --start  --success  --top  --warning
Breadcrumbs:    .mdst-breadcrumbs  | --arrow  --sm
Button:         .mdst-button  | --borderless  --danger  --lg  --sm  --solid
Card:           .mdst-card  + __body  __footer  __header  | --borderless  --flush  --interactive  --sm  --borderless  --borderless
Checkbox:       .mdst-input  | --pill
Code:           .mdst-code
Color:          .mdst-input  | --square
Date & time:    .mdst-input
Details:        .mdst-details  | --borderless  --section  --sm
Dialog:         .mdst-dialog  + __body  __close  __footer  __header  __title  | --full  --lg  --sm
Drawer:         .mdst-drawer  + __body  __close  __footer  __header  | --full  --lg  --sm  --start
Dropdown:       .mdst-dropdown  | --borderless  --inline  --lg  --sm
File:           .mdst-input  | --borderless  --solid
Form:           .mdst-fieldset  .mdst-form  .mdst-legend
Text:           .mdst-input  | --borderless
Meter:          .mdst-meter  | --lg  --sm
OTP:            .mdst-otp-input  + __separator  | --danger  --success
Password:       .mdst-password-input
Popover:        .mdst-popover  | --anchored  --lg  --sm
Pre:            .mdst-pre  | --borderless  --scroll  --sm
Progress:       .mdst-progress  | --danger  --lg  --sm  --success
Radio:          .mdst-input  .mdst-radio-card  .mdst-radio-card-group  .mdst-radio-group  | --horizontal
Range:          .mdst-input
Skeleton:       .mdst-skeleton  | --circle  --heading  --text
Spinner:        .mdst-spinner  | --lg  --sm
Stepper:        .mdst-stepper  + __indicator  __label  __step  | --sm  --vertical
Table:          .mdst-table  .mdst-table-wrap  | --bordered  --fixed  --sm  --stack  --striped
Tabs:           .mdst-tabs  + __list  __panel  __tab  | --pills  --sm  --vertical
Tag:            .mdst-tag  + __dismiss  | --borderless  --danger  --info  --interactive  --lg  --muted  --pill  --sm  --solid  --subtle  --success  --warning
Toast:          .mdst-toast  .mdst-toast-group  + __close  | --danger  --info  --success  --warning
Toolbar:        .mdst-toolbar  + __group  __separator  __spacer  | --bordered  --attached
Tooltip:        .mdst-tooltip  | --end  --start  --top
Typography:     .mdst-a  .mdst-abbr  .mdst-blockquote  .mdst-cite  .mdst-del  .mdst-em  .mdst-fieldset  .mdst-h1  .mdst-h2  .mdst-h3  .mdst-h4  .mdst-h5  .mdst-h6  .mdst-hr  .mdst-ins  .mdst-kbd  .mdst-li  .mdst-mark  .mdst-ol  .mdst-p  .mdst-s  .mdst-samp  .mdst-small  .mdst-strong  .mdst-sub  .mdst-sup  .mdst-ul  .mdst-var  | --flush  --lg  --muted  --sm  --unstyled
Utilities:      .mdst-mono  .mdst-muted  .mdst-sr-only  .mdst-truncate