# Dragonglass full documentation

> Complete agent-oriented reference generated from the same rendered documentation as the Dragonglass website.

---

Source: ./index.html.md

Pure CSS for app interfaces

## Build app interfaces with HTML that stays readable

Dragonglass turns semantic HTML into app interfaces with readable data-* component contracts, responsive layouts, focused utilities, and compiled themes. Install the CSS and start building.

[Get started](#quick-start) [Browse components](/dragonglass/app-components.html.md)

Markup and rendered result

```html
<article data-card>
  <header>
    <h2>Project: Dragonglass</h2>
  </header>
  <p>The team is reviewing the final interface states.</p>
  <footer>
    <a href="/dragonglass/app-components.html">Open project</a>
  </footer>
</article>
```

### Write semantic HTML. Select a component. Refine the interface.

The markup keeps the structure, component, and visual adjustments easy to read.

#### Semantic HTML

Define the interface structure with native HTML elements.

#### Component attributes

Select documented components, variants, and states with readable data-* attributes.

#### Focused utilities

Adjust layout and presentation while the underlying structure stays visible.

Plain CSS distribution Responsive layout primitives Twelve compiled themes

### Install Dragonglass and build your first card

Install the package, import Dragonglass and one theme, then add semantic HTML.

Import the theme after `dragonglass.css` so it can provide the color tokens.

Step 1: Install the package

```sh
npm install dragonglass
```

Step 2: Import Dragonglass and a theme

```js
import "dragonglass/dist/dragonglass.css";
import "dragonglass/dist/themes/default.css";
```

Step 3: Add your first card

```html
<article data-card>
  <header>
    <h2>Project: Dragonglass</h2>
  </header>
  <p>The team is reviewing the final interface states.</p>
  <footer>
    <a href="/dragonglass/app-components.html">Open project</a>
  </footer>
</article>
```

Dragonglass styles the semantic regions and applies the card contract through data-card.

[Explore card variants](/dragonglass/cards.html.md)

[Browse all components](/dragonglass/app-components.html.md)

### Find components by what the interface needs to do

Component guides show the available markup, variants, and states.

#### Actions

Buttons, links, and chips for the actions people can take.

#### Forms

Fields, validation states, toggles, native pickers, and search interfaces.

#### Navigation

Toolbars, breadcrumbs, expansion panels, steppers, tabs, and menus.

#### Feedback

Alerts, notifications, and progress indicators.

#### Surfaces

Cards, dialogs, bottom sheets, and drawers.

#### Data display

Badges, lists, responsive tables, and tooltips.

Use utilities for focused changes to spacing, layout, typography, color, borders, and elevation.

[Browse all components](/dragonglass/app-components.html.md) [Open the utility reference](/dragonglass/utilities.html.md)

### Change the theme. Keep the component markup

Dragonglass includes twelve compiled themes built on the same semantic token contract. Each theme supports light and dark color schemes while the component markup stays unchanged.

[Explore themes and colors](/dragonglass/colors.html.md)

- Default
- Indigo
- Violet
- Magenta
- Ruby
- Amber
- Moss
- Emerald
- Teal
- Ocean
- Graphite
- Stone

Compile a custom theme

```scss
@use "pkg:dragonglass/theme" as dragonglass;

:root {
  @include dragonglass.tokens(#7c3aed);
}
```

### Choose where to continue

Go directly to the part of Dragonglass you need next.

#### [Getting started](#quick-start)

Install Dragonglass and build your first interface.

#### [Components and API](/dragonglass/app-components.html.md)

Find components by purpose and inspect their markup, variants, and states.

#### [Layout foundations](/dragonglass/layout.html.md)

Build application shells, content regions, toolbars, and responsive layouts.

#### [Utilities](/dragonglass/utilities.html.md)

Find the available classes for layout, spacing, typography, color, borders, and elevation.

#### [Themes and colors](/dragonglass/colors.html.md)

Choose a bundled theme or compile custom color tokens.

#### [Forms](/dragonglass/forms.html.md)

Review fields, validation states, toggles, pickers, and search layouts.

---

#### Browser support

Dragonglass supports Chrome 119+, Edge 119+, Firefox 121+, Safari 16.5+, and iOS Safari 16.5+.

---

Source: ./app-components.html.md

## App components

Find application components by purpose and open their examples and API.

Component guides are grouped by purpose. Each guide pairs rendered examples with their markup and an API table for the relevant elements, attributes, variants, states and tokens.

After choosing a component, open the [utility reference](/dragonglass/utilities.html.md) for focused spacing, color, typography, layout and elevation adjustments.

### Actions

- [Buttons](/dragonglass/buttons.html.md) Base button styles, semantic color utilities and FAB variants.
- [Links](/dragonglass/links.html.md) Inline, standalone and quiet link treatments for navigation and supporting actions.
- [Chips](/dragonglass/chips.html.md) Chip tones and checked, pressed and current visual states.

### Forms

- [Forms](/dragonglass/forms.html.md) Field, floating-label, validation-state and toggle selectors.

### Navigation

- [Breadcrumbs](/dragonglass/breadcrumbs.html.md) Wrapping breadcrumb trails built from direct link and button children.
- [Toolbars](/dragonglass/toolbars.html.md) Wrapping nav[data-toolbar] rows and container variants.
- [Tabs](/dragonglass/tabs.html.md) Grouped details layout selected by data-tabs.
- [Menus](/dragonglass/menus.html.md) Positioned menus inside details[data-trigger].
- [Expansion panels](/dragonglass/expansion-panels.html.md) Full-width details panels with a generated open-state marker.
- [Steppers](/dragonglass/steppers.html.md) Horizontal, vertical and numbers-only stepper presentations.

### Feedback

- [Alerts](/dragonglass/alerts.html.md) Alert surfaces with info, success, warning and danger tones.
- [Notifications](/dragonglass/notifications.html.md) Fixed and inline notifications with tone, position and shadow tokens.
- [Progress](/dragonglass/progress.html.md) Determinate, indeterminate and spinner styles for progress elements.

### Surfaces

- [Cards](/dragonglass/cards.html.md) Basic, elevated, squared and full-width card variants.
- [Dialogs](/dragonglass/dialogs.html.md) Centered dialogs with shape, width and elevation variants.
- [Bottom sheets](/dragonglass/bottom-sheets.html.md) Bottom-anchored dialog layout with an optional shadow.
- [Drawers](/dragonglass/drawers.html.md) Persistent and temporary complementary regions at either viewport edge.

### Data display

- [Lists](/dragonglass/lists.html.md) Styled unordered, ordered and definition-list layouts.
- [Badges](/dragonglass/badges.html.md) Generated badge content selected by data-badge.
- [Tooltips](/dragonglass/tooltips.html.md) Generated tooltip content, positions and color utilities.
- [Tables](/dragonglass/tables.html.md) Responsive data-table layout with generated mobile cell labels.

---

Source: ./layout.html.md

## Layout

Responsive containers, direct-child content regions and toolbar layouts.

### Application shell

```html
<article>
  <header>
    <h3>Project Atlas</h3>
    <nav data-toolbar aria-label="Project actions">
      <a href="/projects.html">All projects</a>
      <button type="button">New task</button>
    </nav>
  </header>
  <section>
    <p>Track the work that is ready for review.</p>
  </section>
  <footer>
    <nav aria-label="Project sections">
      <a href="/overview.html" aria-current="page">Overview</a>
      <a href="/activity.html">Activity</a>
      <a href="/reports.html">Reports</a>
    </nav>
  </footer>
</article>
```

### Standalone toolbar

```html
<nav data-toolbar aria-label="Result actions">
  <button type="button">Filter</button>
  <a href="/exports.html">View exports</a>
</nav>
```

### Composition

A container is a `main` or `article` with direct `header`, `section` and `footer` children. The header and footer keep their natural height. The section receives the remaining height, padding and overflow.

The `data-toolbar` attribute turns a nav into a wrapping row with toolbar spacing and a divider.

### Responsive behavior

Standalone toolbars wrap when their actions exceed the current width. A toolbar nested in a header or footer stays on one row and overflows when its actions exceed the available width. Content sections own vertical scrolling and keep the page shell within the viewport.

### API

**Layout elements, attributes, states and tokens**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| main, article | Element | Column container | Establishes the container contract for direct header, section and footer children. |
| header, footer | Element | Intrinsic height | Keeps page-level or container-level chrome outside the scrolling content region. |
| section | Element | Flexible and scrollable | Fills the remaining container space and owns content padding when it is a direct child. |
| nav | Element | Horizontal row | Applies a horizontal, non-wrapping layout to links and buttons. |
| data-toolbar | Attribute | Absent | Turns a nav into a wrapping action row. Toolbars inside a header or footer stay on one row. |
| aria-current="page" | State | Absent | Applies the selected surface and text colors to a nav link. |
| --container-padding | Token | Theme value | Controls padding on the direct, scrollable content section. |

---

Source: ./heroes.html.md

## Hero recipes

Centered, split and presentation hero recipes composed from existing primitives.

These recipes combine semantic sections with existing grid, height, typography, spacing, button and link primitives. They introduce no hero-specific attribute or stylesheet.

### Centered

Use a half-screen minimum height and centered grid content for one message with primary and secondary actions.

### Make the next decision clear.

Use one focused message and a direct path forward.

[Start now](/dragonglass/app-components.html.md) [Read the details](/dragonglass/layout.html.md)

```html
<section class="grid-center grid-gutters min-h-half-screen pt-8 pb-8 text-center">
  <h2 class="md:w-10/12 text-5xl font-bold leading-tight mt-0 mb-4">Make the next decision clear.</h2>
  <p class="md:w-8/12 text-lg leading-relaxed mt-0 mb-4">Use one focused message and a direct path forward.</p>
  <p class="md:w-8/12 mt-0 mb-0">
    <a data-button href="/dragonglass/app-components.html">Start now</a>
    <a data-link="standalone" href="/dragonglass/layout.html">Read the details</a>
  </p>
</section>
```

### Split

Use fractional grid widths to pair the opening message with a compact supporting section.

### Plan the work. Keep the context.

Bring the decision and its supporting details into one opening view.

[Open workspace](/dragonglass/app-components.html.md)

#### Today

Review the launch checklist and assign the remaining owners.

[View checklist](/dragonglass/app-components.html.md)

```html
<section class="grid grid-gutters min-h-three-quarter-screen pt-8 pb-8">
  <section class="md:w-7/12 pt-8 pb-8">
    <h2 class="text-5xl font-bold leading-tight mt-0 mb-4">Plan the work. Keep the context.</h2>
    <p class="text-lg leading-relaxed mt-0 mb-4">Bring the decision and its supporting details into one opening view.</p>
    <p class="mt-0 mb-0">
      <a data-button href="/dragonglass/app-components.html">Open workspace</a>
    </p>
  </section>
  <section class="md:w-5/12 p-6 border">
    <h3 class="text-2xl font-semibold leading-tight mt-0 mb-3">Today</h3>
    <p class="mt-0 mb-4">Review the launch checklist and assign the remaining owners.</p>
    <p class="mt-0 mb-0">
      <a data-link="standalone quiet" href="/dragonglass/app-components.html">View checklist</a>
    </p>
  </section>
</section>
```

### Presentation

Use the full small viewport and the largest display size when one idea should establish the page rhythm.

Annual report

### A year of steady progress.

Present one major idea with enough space for deliberate pacing.

[Read the report](/dragonglass/index.html.md)

```html
<section class="grid-center grid-gutters min-h-screen pt-8 pb-8">
  <p class="md:w-10/12 text-lg font-semibold mt-0 mb-3">Annual report</p>
  <h2 class="md:w-10/12 text-6xl font-bold leading-none mt-0 mb-6">A year of steady progress.</h2>
  <p class="md:w-8/12 text-xl leading-relaxed mt-0 mb-6">Present one major idea with enough space for deliberate pacing.</p>
  <p class="md:w-8/12 mt-0 mb-0">
    <a data-link="standalone" href="/dragonglass">Read the report</a>
  </p>
</section>
```

---

Source: ./buttons.html.md

## Buttons

Base button styles, semantic color utilities and FAB variants.

### Plain and unavailable buttons

```html
<button type="button">Plain button</button>
<button type="button" disabled>Disabled button</button>
<button type="button" aria-disabled="true">ARIA-disabled button</button>
```

### Semantic tones

```html
<button type="button" class="bg-primary">Primary</button>
<button type="button" class="bg-accent">Accent</button>
<button type="button" class="bg-info">Info</button>
<button type="button" class="bg-success">Success</button>
<button type="button" class="bg-warning">Warning</button>
<button type="button" class="bg-danger">Danger</button>
<button type="button" class="bg-default">Default</button>
```

### Borders and focus outlines

```html
<button type="button" class="border-primary">Primary outline</button>
<button type="button" class="border-success-dark">Success outline</button>
<button type="button" class="border-danger-light">Danger outline</button>
<button
  type="button"
  class="bg-info focus:outline-2 focus:outline-offset-1 focus:outline-info-light"
>
  Visible focus outline
</button>
```

### Sizes

```html
<button type="button" class="bg-primary text-2xs">Compact</button>
<button type="button" class="bg-primary text-base">Default</button>
<button type="button" class="bg-primary text-xl">Large</button>
```

### Floating actions

```html
<button type="button" data-button="fab" class="bg-primary inline" aria-label="Add item">
  <i class="material-icons" aria-hidden="true">add</i>
</button>
<button
  type="button"
  data-button="fab no-shadow"
  class="bg-accent inline"
  aria-label="Edit item"
>
  <i class="material-icons" aria-hidden="true">edit</i>
</button>
```

### Responsive behavior

Buttons keep their labels on one line. A surrounding toolbar wraps when space is limited. FAB dimensions scale with their text size.

### API

**Button elements, attributes, states and tokens**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| button | Element | Plain | Receives the base button styling. |
| disabled | State | Absent | Applies unavailable opacity, cursor and pointer-event styles. |
| aria-disabled="true" | State | Absent | Applies the same visual unavailable state as disabled. |
| data-button="fab" | Attribute | Absent | Creates a circular floating action button with default elevation. |
| no-shadow | Attribute token | Shadow | Removes the default FAB elevation when included in data-button. |
| bg-{tone} | Class token | Transparent | Applies a semantic background tone such as primary, success or danger. |
| border-{tone}{weight} | Class token | No border | Creates an outlined treatment with an optional light or dark weight. |
| text-{size} | Class token | Inherited | Scales button text and the em-based button dimensions. |
| --button-disabled-opacity | Token | Theme value | Controls the visual emphasis of unavailable buttons. |

---

Source: ./links.html.md

## Links

Inline, standalone and quiet link treatments for navigation and supporting actions.

### Inline link

Inline links keep a visible underline so they remain identifiable inside surrounding copy.

Read the [layout guide](/dragonglass/layout.html.md) before composing a page.

```html
<p>Read the <a data-link href="/dragonglass/layout.html">layout guide</a> before composing a page.</p>
```

### Standalone link

The `standalone` token presents a link as an independent action without giving it button semantics.

[View all components](/dragonglass/app-components.html.md)

```html
<p>
  <a data-link="standalone" href="/dragonglass/app-components.html">View all components</a>
</p>
```

### Quiet and combined links

The `quiet` token lowers resting emphasis. Tokens are space-separated and may be combined on the same `data-link` attribute.

Updated yesterday by [Ana](/dragonglass/index.html.md). [View activity](/dragonglass/app-components.html.md)

```html
<p>
  Updated yesterday by <a data-link="quiet" href="/dragonglass">Ana</a>.
  <a data-link="standalone quiet" href="/dragonglass/app-components.html">View activity</a>
</p>
```

### API

**Link elements, variants and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| a[data-link] | Element and attribute | Inline | Applies the persistent underline treatment to an anchor with an href. |
| standalone | Attribute token | Absent | Adds emphasis for a standalone action and reveals its underline on interaction. |
| quiet | Attribute token | Absent | Uses secondary text color until hover or focus restores primary text color. |
| standalone quiet | Combined attribute tokens | Absent | Combines standalone emphasis with the quieter resting color. |
| Focus state | State | Global link focus | Keeps the framework focus indicator in addition to each link treatment. |

---

Source: ./chips.html.md

## Chips

Chip tones and checked, pressed and current visual states.

### Actions, links and values

[Forms](/dragonglass/forms.html.md) Read only

```html
<p>
  <button data-chip type="button">Action</button>
  <a data-chip href="/dragonglass/forms.html">Forms</a>
  <span data-chip>Read only</span>
</p>
```

### Semantic tones

Primary Accent Passed Queued Review Blocked Default

```html
<p>
  <span data-chip="primary">Primary</span>
  <span data-chip="accent">Accent</span>
  <span data-chip="success">Passed</span>
  <span data-chip="info">Queued</span>
  <span data-chip="warning">Review</span>
  <span data-chip="danger">Blocked</span>
  <span data-chip="default">Default</span>
</p>
```

### Selection states

Active [Chips](/dragonglass/chips.html.md)

```html
<p>
  <label data-chip="success">
    <input type="checkbox" checked /> Active
  </label>
  <button data-chip type="button" aria-pressed="true">Pinned</button>
  <a data-chip href="/dragonglass/chips.html" aria-current="true">Chips</a>
</p>
```

### API

**Chip elements, attributes, tokens and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| button / a / label / span | Element | Contextual | Receives chip styling from data-chip. |
| data-chip | Attribute | Required | Accepts primary, accent, success, info, warning, danger or default. |
| --chip-border / --chip-background / --chip-text | Token | Theme | Set the resting border, background and text colors. |
| --chip-active / --chip-active-text | Token | Theme | Set selected and pressed colors. |
| input:checked / aria-pressed=true / aria-current=true | State | False | Selects the active chip appearance. |

---

Source: ./forms.html.md

## Forms

Field, floating-label, validation-state and toggle selectors.

### Default HTML fields

```html
<form data-card>
  <section>
  <fieldset>
    <label for="profile-name">Name</label>
    <input id="profile-name" name="name" type="text" aria-describedby="profile-name-help">
    <small id="profile-name-help">Use a readable public name.</small>
  </fieldset>
  <fieldset>
    <label for="profile-email">Email</label>
    <input id="profile-email" name="email" type="email" required aria-describedby="profile-email-help">
    <small id="profile-email-help">Enter the address used for account messages.</small>
  </fieldset>
  <fieldset>
    <label for="account-id">Account ID</label>
    <input id="account-id" name="account-id" type="text" value="AC-1042" disabled aria-describedby="account-id-help">
    <small id="account-id-help">Account IDs cannot be changed.</small>
  </fieldset>
  <fieldset>
    <label for="profile-handle">Handle</label>
    <input id="profile-handle" name="handle" type="text" value="Ada Lovelace" aria-invalid="true" aria-describedby="profile-handle-error">
    <small id="profile-handle-error">Use letters, numbers or hyphens without spaces.</small>
  </fieldset>
  <fieldset>
    <label for="profile-message">Message</label>
    <textarea id="profile-message" name="message" aria-describedby="profile-message-help"></textarea>
    <small id="profile-message-help">Write a short message.</small>
  </fieldset>
  <fieldset>
    <label for="profile-role">Role</label>
    <select id="profile-role" name="role" aria-describedby="profile-role-help">
      <option value="">Select a role</option>
      <option value="admin">Admin</option>
      <option value="editor">Editor</option>
      <option value="viewer">Viewer</option>
    </select>
    <small id="profile-role-help">Choose the access level for this person.</small>
  </fieldset>
  </section>
</form>
```

### Floating labels

```html
<form data-card>
  <section>
  <div data-floating>
    <input id="floating-name" name="name" type="text" placeholder="Full name" aria-describedby="floating-name-help">
    <label for="floating-name">Full name</label>
    <small id="floating-name-help">Enter the name shown to teammates.</small>
  </div>
  <div data-floating data-field="warning">
    <input id="floating-slug" name="slug" type="text" value="draft-name" placeholder="Project slug" aria-describedby="floating-slug-help">
    <label for="floating-slug">Project slug</label>
    <small id="floating-slug-help">Changing this value updates shared links.</small>
  </div>
  <div data-floating data-field="success">
    <input id="floating-domain" name="domain" type="text" value="example.com" placeholder="Domain" aria-describedby="floating-domain-help">
    <label for="floating-domain">Domain</label>
    <small id="floating-domain-help">This domain is available.</small>
  </div>
  <div data-floating>
    <input id="floating-code" name="code" type="text" value="bad code" placeholder="Invite code" aria-describedby="floating-code-error" aria-invalid="true">
    <label for="floating-code">Invite code</label>
    <small id="floating-code-error">Remove the space from the invite code.</small>
  </div>
  <div data-floating>
    <textarea id="floating-notes" name="notes" placeholder="Notes" aria-describedby="floating-notes-help"></textarea>
    <label for="floating-notes">Notes</label>
    <small id="floating-notes-help">Add context for reviewers.</small>
  </div>
  <div data-floating>
    <select id="floating-team" name="team" aria-describedby="floating-team-help">
      <option value="">Select a team</option>
      <option value="design">Design</option>
      <option value="engineering">Engineering</option>
    </select>
    <label for="floating-team">Team</label>
    <small id="floating-team-help">Choose the team that owns this work.</small>
  </div>
  </section>
</form>
```

### Selection controls

```html
<form data-card>
  <section>
  <fieldset>
    <legend>Review frequency</legend>
    <input id="review-weekly" name="review-frequency" type="radio" value="weekly">
    <label for="review-weekly">Weekly</label>
    <input id="review-monthly" name="review-frequency" type="radio" value="monthly">
    <label for="review-monthly">Monthly</label>
  </fieldset>
  <fieldset>
    <legend>Updates</legend>
    <input id="email-updates" name="email-updates" type="checkbox" value="enabled">
    <label for="email-updates">Send email updates</label>
  </fieldset>
  <fieldset>
    <legend>Availability</legend>
    <input id="public-profile" name="public-profile" type="checkbox" value="public" data-toggle>
    <label for="public-profile">Public profile</label>
  </fieldset>
  </section>
</form>
```

### Sliders

```html
<form data-card>
  <section>
  <fieldset>
    <label for="volume">Volume</label>
    <input id="volume" name="volume" type="range" min="0" max="100" value="60" aria-describedby="volume-help">
    <small id="volume-help">Choose a value from 0 to 100.</small>
  </fieldset>
  <fieldset>
    <label for="locked-volume">Managed volume</label>
    <input id="locked-volume" name="locked-volume" type="range" min="0" max="100" value="20" disabled aria-describedby="locked-volume-help">
    <small id="locked-volume-help">Your administrator manages this value.</small>
  </fieldset>
  </section>
</form>
```

### Native pickers

```html
<form data-card>
  <section>
  <fieldset>
    <label for="start-date">Date</label>
    <input id="start-date" name="start-date" type="date">
  </fieldset>
  <fieldset>
    <label for="start-time">Time</label>
    <input id="start-time" name="start-time" type="time">
  </fieldset>
  <fieldset>
    <label for="billing-month">Month</label>
    <input id="billing-month" name="billing-month" type="month">
  </fieldset>
  <fieldset>
    <label for="reporting-week">Week</label>
    <input id="reporting-week" name="reporting-week" type="week">
  </fieldset>
  <fieldset>
    <label for="brand-color">Brand color</label>
    <input id="brand-color" name="brand-color" type="color" value="#3366ff">
  </fieldset>
  <fieldset>
    <label for="shirt-size">Size</label>
    <select id="shirt-size" name="shirt-size">
      <option value="small">Small</option>
      <option value="medium">Medium</option>
      <option value="large">Large</option>
    </select>
  </fieldset>
  </section>
</form>
```

### Forms on colored surfaces

```html
<form data-card class="bg-primary">
  <section>
    <fieldset>
      <label for="invite-name">Name</label>
      <input id="invite-name" name="name" type="text" aria-describedby="invite-name-help">
      <small id="invite-name-help">Enter the name shown on the invitation.</small>
    </fieldset>
    <div data-floating>
      <input id="invite-email" name="email" type="email" placeholder="Email" aria-describedby="invite-email-help">
      <label for="invite-email">Email</label>
      <small id="invite-email-help">We will send the invitation to this address.</small>
    </div>
  </section>
  <footer>
    <nav aria-label="Invitation actions">
      <button type="reset" class="text-white">Reset</button>
      <button type="submit" class="bg-white text-primary">Send invitation</button>
    </nav>
  </footer>
</form>
```

### Search forms

#### Search landmark

```html
<search aria-label="Documentation">
  <form action="/dragonglass/forms.html">
    <fieldset>
      <label for="docs-search">Search docs</label>
      <input id="docs-search" type="search" name="q">
    </fieldset>
    <button type="submit">Search</button>
  </form>
</search>
```

#### Search role on a form

```html
<form action="/dragonglass/forms.html" role="search" aria-label="Components">
  <fieldset>
    <label for="component-search">Find a component</label>
    <input id="component-search" type="search" name="component" value="forms">
  </fieldset>
  <button type="submit">Find</button>
</form>
```

#### Search inside a toolbar

```html
<nav data-toolbar aria-label="Documentation tools">
  <search aria-label="Component filters">
    <form action="/dragonglass/forms.html">
      <fieldset>
        <label for="filter-search">Filter components</label>
        <input id="filter-search" type="search" name="filter">
      </fieldset>
      <button type="submit">Filter</button>
    </form>
  </search>
</nav>
```

### Composition

Inside `data-floating`, the control precedes its `label` because the sibling selectors drive the visual label state.

### Responsive behavior

Text controls fill the available width, textareas resize vertically and range inputs preserve their full track. The surrounding form or card controls column width.

### State motion

Fields transition only their border and text color. Toggle thumbs communicate checked states through color and horizontal movement, while floating labels use transforms for focus states. When a user requests reduced motion, toggle thumbs and floating labels change state without a transition. Their checked, focused, valid, and invalid states remain visible.

### API

**Form elements, attributes, states and tokens**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| input, select, textarea | Element | Full width | Receives full-width Dragonglass field styling. |
| label[for] | Element | for attribute present | Receives inline label spacing and a pointer cursor. |
| fieldset and legend | Element | No border | Removes the fieldset border and styles its direct legend. |
| data-floating | Attribute | Absent | Turns a neutral wrapper with a control, label and small into a floating field. |
| data-field="primary\|accent\|info\|success\|warning\|danger\|default" | Attribute token | Neutral | Applies a documented semantic color to a field container and its control. |
| data-toggle | Attribute | Absent | Displays a checkbox as a switch. |
| aria-invalid="true" | State | Absent | Applies danger colors to the control and matching wrapper content. |
| --control-accent | Token | Theme value | Controls focus, checked and range accents. |
| search / form[role=search] | Element / attribute | Contextual | Aligns a fieldset and submit action in a flexible row. |
| input[type=search] | Element / attribute | Empty | Fills the available width and removes the default bottom margin. |

---

Source: ./breadcrumbs.html.md

## Breadcrumbs

Wrapping breadcrumb trails built from direct link and button children.

### Linked trail

Add `data-breadcrumb` to a labeled `nav`. Place each anchor directly inside the nav and mark the current location with `aria-current="page"`.

```html
<nav data-breadcrumb aria-label="Breadcrumb">
  <a href="/dragonglass/app-components.html">Components</a>
  <a href="/dragonglass/layout.html">Foundations</a>
  <a href="/dragonglass/breadcrumbs.html" aria-current="page">Breadcrumbs</a>
</nav>
```

### Links and actions

A breadcrumb combines anchors and buttons as direct children of the breadcrumb nav.

```html
<nav data-breadcrumb aria-label="File location">
  <button type="button">Workspace</button>
  <a href="/dragonglass">Documents</a>
  <button type="button" aria-current="page">Quarterly report</button>
</nav>
```

### API

The host supports only direct `a` and `button` children. Separators are visual chevrons, so source markup contains no generated separator text.

**Breadcrumb elements, child contract and current state**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| nav[data-breadcrumb] | Element and attribute | Required | Creates a wrapping breadcrumb trail with separators between segments. |
| Direct a child | Supported child | None | Navigates to a location in the breadcrumb hierarchy. |
| Direct button child | Supported child | None | Runs an in-page location action without adding a wrapper or list element. |
| aria-current="page" | State | Absent | Identifies the current breadcrumb segment. |
| Child structure | Contract | Direct children only | Supports only anchors and buttons directly inside the nav, with no lists or wrappers. |

---

Source: ./toolbars.html.md

## Toolbars

Wrapping nav[data-toolbar] rows and container variants.

### Actions and links

```html
<nav data-toolbar aria-label="Editor actions">
  <button type="button">Save</button>
  <button type="button">Preview</button>
  <a href="/dragonglass/cards.html">Cards</a>
</nav>
```

### Filter chips

```html
<nav data-toolbar aria-label="Issue filters">
  <label data-chip>
    <input type="checkbox" checked> Open
  </label>
  <label data-chip>
    <input type="checkbox"> Assigned
  </label>
  <button type="button">Apply</button>
</nav>
```

### Header and footer toolbars

A toolbar wraps by default. Inside a header or footer it uses `flex-wrap: nowrap` and overflows when its actions exceed the available width.

#### Project settings

```html
<header>
  <h3>Project settings</h3>
  <nav data-toolbar aria-label="Project actions">
    <button type="button">Share</button>
    <button type="button">Export</button>
  </nav>
</header>
<footer>
  <nav data-toolbar aria-label="Form actions">
    <button type="button">Cancel</button>
    <button type="submit">Save changes</button>
  </nav>
</footer>
```

### API

**Toolbar elements, attributes, tokens and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| nav | Element | Required | Provides the nav[data-toolbar] selector host. |
| data-toolbar | Attribute | Required | Applies the flexible toolbar layout to a nav. |
| --spacing-2 / --spacing-3 | Token | Theme | Control the gap and default toolbar padding. |
| --border-size-1 / --default-light | Token | Theme | Control the toolbar divider. |
| header or footer ancestor | State | Wrapping | Removes padding and divider and prevents wrapping. |

---

Source: ./tabs.html.md

## Tabs

Grouped details layout selected by data-tabs.

### Native grouped disclosures

```html
<section data-tabs>
  <details name="account-tabs" open>
    <summary>Overview</summary>
    <p>Account summary.</p>
  </details>
  <details name="account-tabs">
    <summary>Billing</summary>
    <p>Billing details.</p>
  </details>
</section>
```

### Rich panel content

```html
<section data-tabs>
  <details name="settings-tabs" open>
    <summary>Profile</summary>
    <p>Ada Lovelace</p>
  </details>
  <details name="settings-tabs">
    <summary>Contact</summary>
    <label for="tabs-email">Email</label>
    <input id="tabs-email" type="email" name="email">
  </details>
  <details name="settings-tabs">
    <summary>Security</summary>
    <p>Review sign-in settings.</p>
  </details>
</section>
```

### Layout behavior

`sibling-count()`, `sibling-index()`, and `::details-content` place the summaries in one tab row and align the open panel below them. The same markup also forms stacked native disclosures with accessible content and keyboard operation.

When a user requests reduced motion, summary color and border state changes occur without a transition.

### API

**Tab disclosure elements, attributes, tokens and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| section / details / summary | Element | Required | Matches direct details children and their direct summaries. |
| data-tabs | Attribute | Required | Aligns grouped details controls and places the open content below. |
| open | Attribute / state | Absent | Applies the active summary color and border. |
| --primary / --default-light / --spacing-4 | Token | Theme | Control the active marker, divider and panel spacing. |

---

Source: ./menus.html.md

## Menus

Positioned menus inside details[data-trigger].

### Action menu

```html
<details data-trigger open>
  <summary>Account menu</summary>
  <menu>
    <li><a href="/dragonglass/forms.html">Profile settings</a></li>
    <li><button type="button">Sign out</button></li>
  </menu>
</details>
```

### Menu positions

The top and right tokens change the default bottom-left placement. Their combination opens the menu above the trigger and aligns it to the right edge.

```html
<details data-trigger>
  <summary>Top menu</summary>
  <menu data-menu="top">
    <li>
      <a href="/dragonglass/forms.html">Profile settings</a>
      <button type="button" aria-label="Add profile to favorites">
        <i class="material-icons" aria-hidden="true">star</i>
      </button>
    </li>
  </menu>
</details>
<details data-trigger>
  <summary>Right menu</summary>
  <menu data-menu="right">
    <li>
      <a href="/dragonglass/forms.html">Profile settings</a>
      <button type="button" aria-label="Add profile to favorites">
        <i class="material-icons" aria-hidden="true">star</i>
      </button>
    </li>
  </menu>
</details>
<details data-trigger>
  <summary>Top-right menu</summary>
  <menu data-menu="top right">
    <li>
      <a href="/dragonglass/forms.html">Profile settings</a>
      <button type="button" aria-label="Add profile to favorites">
        <i class="material-icons" aria-hidden="true">star</i>
      </button>
    </li>
  </menu>
</details>
```

### Motion and accessibility

Starting styles, inert CSS interactivity, and the native details content pseudo-element reveal the menu from `opacity: 0` and `scale(.98)`. The open state uses `opacity: 1` and `scale(1)`. During close, the content remains visible for the animation while its actions stay inactive.

Reduced motion changes the menu state without a transition or transform. Native `details` and `summary` provide keyboard operation. Every icon-only action has an accessible name.

### API

**Menu elements, attributes, tokens and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| details / summary / menu / li | Element | Required | Matches the trigger, its direct menu and the menu's direct rows. |
| data-trigger | Attribute | Required | Provides the positioned disclosure context. |
| data-menu | Attribute | Bottom left | Accepts top, right or the combined top right tokens. |
| open | Attribute / state | Absent | Shows the menu through the parent details state. |
| --card-radius / --surface-raised / --text-primary / --border-default | Token | Theme | Control menu corners, surface, text and border colors. |
| --motion-duration-fast / --motion-duration-base / --motion-easing-enter / --motion-easing-exit | Motion token | 120ms / 200ms / ease-out / ease-in | Control the menu's opacity and transform transition without changing its state contract. |

---

Source: ./expansion-panels.html.md

## Expansion panels

Full-width details panels with a generated open-state marker.

### Collapsed and open panels

```html
<details data-expansion-panel open>
  <summary>Account status</summary>
  <p>Your account is active.</p>
</details>
```

### Panel with form content

```html
<details data-expansion-panel open>
  <summary>Contact details</summary>
  <form>
    <label for="contact-email">Email</label>
    <input id="contact-email" type="email" name="email">
    <button type="submit">Save</button>
  </form>
</details>
```

### Colored panel

Apply a `bg-*` utility to `details` to color the complete panel, including its heading and content.

```html
<details class="bg-primary" data-expansion-panel open>
  <summary>Deployment status</summary>
  <p>The latest release is available.</p>
</details>
```

### Colored heading

Apply a `bg-*` utility to `summary` when only the panel heading needs a distinct color.

```html
<details data-expansion-panel open>
  <summary class="bg-accent">Security settings</summary>
  <p>Two-factor authentication is active.</p>
</details>
```

### Behavior

The native `details` element controls disclosure state. The open summary keeps a stable bottom border while its generated marker rotates. Reduced motion changes the marker and summary state without a transition.

### API

**Expansion panel elements, attributes, tokens and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| details / summary | Element | Required | Matches details[data-expansion-panel] and its direct summary. |
| data-expansion-panel | Attribute | Required | Applies the full-width expansion panel treatment. |
| open | Attribute / state | Absent | Rotates the generated disclosure marker. |
| --card-radius / --border-default | Token | Theme | Control panel corners and border color. |
| --spacing-3 / --spacing-4 | Token | Theme | Control summary and content spacing. |
| --motion-duration-fast / --motion-easing-standard | Motion token | 120ms / ease-in-out | Control the marker, border and summary state transitions. |

---

Source: ./steppers.html.md

## Steppers

Horizontal, vertical and numbers-only stepper presentations.

### Current and completed steps

1. Account
2. Billing
3. Confirm

```html
<ol data-stepper>
  <li data-step="done">Account</li>
  <li aria-current="step">Billing</li>
  <li>Confirm</li>
</ol>
```

### Error state

`data-step="error"` changes the marker to the danger state. `aria-current="step"` adds the current-step color and weight.

1. Profile
2. Payment
3. Receipt

```html
<ol data-stepper>
  <li data-step="done">Profile</li>
  <li data-step="error" aria-current="step">Payment</li>
  <li>Receipt</li>
</ol>
```

### Vertical and numbers-only layouts

The vertical layout gives labels more room. The numbers layout keeps the same text labels in the markup while CSS presents a compact sequence.

1. Account
2. Billing
3. Confirm

1. Account
2. Billing
3. Receipt

```html
<ol data-stepper="vertical">
  <li data-step="done">Account</li>
  <li aria-current="step">Billing</li>
  <li>Confirm</li>
</ol>
<ol data-stepper="numbers" aria-label="Checkout progress">
  <li data-step="done">Account</li>
  <li aria-current="step">Billing</li>
  <li>Receipt</li>
</ol>
```

### API

**Stepper elements, attributes, tokens and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ol / li | Element | Required | Matches direct li children of ol[data-stepper]. |
| data-stepper | Attribute | Horizontal | Accepts vertical or numbers layout tokens. |
| aria-current=step | Attribute / state | Absent | Applies the current-step color and weight. |
| data-step=done / error | Attribute / state | Upcoming | Marks completed or failed steps. |
| --primary / --success / --danger | Token | Theme | Color current, completed and failed states. |

---

Source: ./alerts.html.md

## Alerts

Alert surfaces with info, success, warning and danger tones.

### Semantic alerts

```html
<div data-alert="info" role="status">
  Your profile has unsaved changes.
</div>
<div data-alert="success" role="status">
  The invoice was paid successfully.
</div>
<div data-alert="warning" role="alert">
  Your storage is almost full.
</div>
<div data-alert="danger" role="alert">
  The payment method was rejected.
</div>
```

### Alert with supporting content

```html
<div data-alert="warning" role="alert">
  <strong>Review required.</strong>
  <p>The billing address has missing fields.</p>
</div>
```

### API

**Alert elements, attributes, tokens and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| data-alert | Attribute | Primary | Accepts info, success, warning or danger. |
| --alert-color / --alert-bg | Token | Primary theme colors | Set the accent border and alert background. |
| info / success / warning / danger | State | Primary | Maps the alert to a supported semantic tone. |

---

Source: ./notifications.html.md

## Notifications

Fixed and inline notifications with tone, position and shadow tokens.

### Status and alert messages

```html
<aside data-notification="info inline" role="status">Sync started.</aside>
<aside data-notification="success inline" role="status">File uploaded successfully.</aside>
<aside data-notification="warning inline" role="status">Storage is almost full.</aside>
<aside data-notification="danger inline" role="alert">Upload failed.</aside>
```

### Content and close action

```html
<aside data-notification="success inline" role="status">
  <button type="button" data-notification-close aria-label="Dismiss">
    <span aria-hidden="true">×</span>
  </button>
  <strong>Export ready.</strong>
  <p>Your report is ready to download.</p>
</aside>
```

### Fixed positions

Combine one vertical token with one horizontal token. The default is top right. Center stands alone or pairs with top, right, bottom or left.

```html
<aside data-notification="info top right" role="status">Saved.</aside>
<aside data-notification="warning bottom center" role="status">Storage is almost full.</aside>
<aside data-notification="danger center left" role="alert">Connection lost.</aside>
```

### Shadow

```html
<aside data-notification="info inline" role="status">Default shadow</aside>
<aside data-notification="info inline no-shadow" role="status">No shadow</aside>
```

### Composition

A direct close button with `data-notification-close` receives absolute positioning and reserved space. The attribute provides the presentation and does not remove the notification.

### Responsive behavior

Fixed notifications stay within the viewport with a maximum width based on the page gap. Inline notifications use the available content width and remain in document flow.

### API

**Notification elements, attributes, states and tokens**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| data-notification | Attribute | Primary border, top right | Activates notification layout and accepts tone, position and shadow tokens. |
| data-notification-close | Button attribute | Optional | Styles a direct close button and reserves its space without removing the notification. |
| info\|success\|warning\|danger | Attribute token | Primary | Sets the semantic border color. |
| inline | Attribute token | Fixed | Keeps a notification in document flow and resets position transforms. |
| top\|right\|bottom\|left\|center | Attribute token | top right | Combines vertical and horizontal placement for fixed notifications. |
| no-shadow | Attribute token | --shadow-lg | Removes elevation. |
| --notification-color | Token | --primary-accent | Controls the notification border and is set by semantic tone tokens. |

---

Source: ./progress.html.md

## Progress

Determinate, indeterminate and spinner styles for progress elements.

### Determinate progress

Use `value` and `max` when the operation exposes measurable progress. Associate the element with a label or give it an accessible name.

Upload progress

```html
<label for="upload-progress">Upload progress</label>
<progress id="upload-progress" value="40" max="100" data-progress="primary">
  40%
</progress>
```

### Supported tones

```html
<progress value="20" max="100" data-progress="primary" aria-label="Primary progress">20%</progress>
<progress value="30" max="100" data-progress="accent" aria-label="Accent progress">30%</progress>
<progress value="40" max="100" data-progress="info" aria-label="Information progress">40%</progress>
<progress value="50" max="100" data-progress="success" aria-label="Successful progress">50%</progress>
<progress value="60" max="100" data-progress="warning" aria-label="Warning progress">60%</progress>
<progress value="70" max="100" data-progress="danger" aria-label="Danger progress">70%</progress>
```

### Indeterminate progress

Without a `value`, Dragonglass displays a continuous indeterminate bar. Give it an accessible name that describes the work in progress.

```html
<progress data-progress="primary" aria-label="Loading results"></progress>
<progress data-progress="warning" aria-label="Saving changes"></progress>
```

### Spinners

The `spinner` token creates a compact circular indicator and combines with one supported tone. Its accessible name must describe the operation instead of the visual spinner.

```html
<progress data-progress="spinner primary" aria-label="Loading"></progress>
<progress data-progress="spinner danger" aria-label="Retrying"></progress>
```

### Reduced motion

When a user requests reduced motion, indeterminate bars stop on a visible pulse and circular spinners remain visible without rotation. Dragonglass applies the same static result to WebKit and Gecko progress parts. The static indicator still means that work is in progress, not that the operation has completed.

### API

**Progress elements, attributes, tokens and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| progress | Element | Required | Receives the full-width base track. |
| value | Attribute | Absent | Its absence selects the continuous indeterminate presentation. |
| data-progress | Attribute | Primary bar | Accepts primary, accent, info, success, warning, danger and spinner. |
| --progress-color / --progress-track | Token | Primary / default-lighter | Set the indicator and track colors. |
| determinate / indeterminate / spinner | State | Indeterminate without value | Selects a measured bar, continuous bar or circular presentation. Continuous indicators become static when reduced motion is requested. |

---

Source: ./cards.html.md

## Cards

Basic, elevated, squared and full-width card variants.

### Basic and elevated cards

A basic card groups content in the normal page flow. The elevated variant adds stronger visual emphasis to the same structure.

```html
<article data-card>
  <section>
    <h3>Release notes</h3>
    <p>Review the latest component changes.</p>
  </section>
</article>
```

```html
<article data-card="elevated">
  <section>
    <h3>Elevated card</h3>
    <p>This card uses the elevated variant.</p>
  </section>
</article>
```

### Header, content and footer

Direct header, section and footer regions separate the title, supporting content and action area.

```html
<article data-card>
  <header>
    <h3>Project update</h3>
    <nav aria-label="Card actions">
      <button data-button="fab" type="button" aria-label="Share project update">
        <i class="material-icons" aria-hidden="true">share</i>
      </button>
    </nav>
  </header>
  <section>
    <p>The accessibility review is ready.</p>
  </section>
  <footer>
    <a href="/dragonglass/alerts.html">Review alerts</a>
  </footer>
</article>
```

### Media and square cards

A media region adds an image to the card content. The squared variant creates compact, equal-ratio tiles.

```html
<article data-card>
  <section data-media role="img" aria-label="Mountain ridge under a cloudy sky" style="background-image: url('https://picsum.photos/480/480')"></section>
  <section>
    <h3>Field report</h3>
  </section>
</article>
```

```html
<article data-card="squared">
  <section data-media class="bg-primary">
    <header>
      <h3>May release</h3>
    </header>
    <section>Available May 24 from 7 to 11 p.m.</section>
  </section>
</article>
```

### Full-width card

The full-width variant gives summaries the complete content row instead of a compact card column.

```html
<article data-card="full-width">
  <header>
    <h3>Documentation status</h3>
  </header>
  <section>
    <p>The summary spans the full available content width.</p>
  </section>
  <footer>
    <a href="/dragonglass">Browse documentation</a>
  </footer>
</article>
```

### API

**Card elements, attributes, tokens and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| data-card | Attribute | Basic | Accepts elevated, squared or full-width variant tokens. |
| data-media | Attribute | Absent | Creates a cover media region inside the card. |
| --card-padding / --card-radius / --card-shadow | Token | Theme | Control content spacing, corners and elevated shadow. |
| basic / elevated / squared / full-width | State / variant | Basic | Selects border, elevation, aspect ratio or width behavior. |

---

Source: ./dialogs.html.md

## Dialogs

Centered dialogs with shape, width and elevation variants.

### Dialog with actions

```html
<dialog open class="static" aria-labelledby="review-dialog-title">
  <header>
    <h3 id="review-dialog-title">Review changes</h3>
    <nav aria-label="Dialog actions">
      <button type="button" data-button="fab" class="inline" aria-label="Share review">
        <i class="material-icons" aria-hidden="true">share</i>
      </button>
    </nav>
  </header>
  <section>
    Confirm the title and owner before publishing this project.
  </section>
  <footer>
    <nav aria-label="Review decision">
      <button type="button">Cancel</button>
      <button type="button" class="bg-primary">Publish</button>
    </nav>
  </footer>
</dialog>
```

### Shape, width and elevation

```html
<dialog open class="static" data-dialog="squared" aria-labelledby="event-dialog-title">
  <section data-media class="bg-primary">
    <header>
      <h3 id="event-dialog-title">Team event</h3>
      <button type="button" data-button="fab" class="inline" aria-label="Share event">
        <i class="material-icons" aria-hidden="true">share</i>
      </button>
    </header>
    <section>May 24, 7:00 PM</section>
  </section>
</dialog>

<dialog open class="static" data-dialog="full-width" aria-labelledby="workspace-dialog-title">
  <header><h3 id="workspace-dialog-title">Workspace settings</h3></header>
  <section>Settings use the available viewport width.</section>
</dialog>

<dialog open class="static" data-dialog="no-shadow" aria-labelledby="embedded-dialog-title">
  <header><h3 id="embedded-dialog-title">Embedded decision</h3></header>
  <section>The surrounding surface supplies separation without elevation.</section>
</dialog>
```

### Composition

A dialog accepts direct `header`, `section` and `footer` children. The `static` utility keeps these open previews in the document flow. The default position centers the dialog.

### Responsive behavior

Standard dialogs size to their content. The `full-width` token leaves a one-rem viewport gap. Long body content scrolls without moving the header or footer actions.

### Motion

Transitions and starting styles reveal a non-static dialog through opacity and a short vertical translation. The modal stays open with `data-closing` while its surface and backdrop animate, then `close()` completes the exit.

The `static` utility excludes documentation previews and embedded dialogs from this motion. When a user requests reduced motion, the dialog and its backdrop change state without transitions or spatial movement.

### Accessibility

The examples connect each dialog to its heading with `aria-labelledby`. A dialog opened with `showModal()` blocks the page and supports Escape. Focus behavior follows the native dialog API.

### API

**Dialog elements, attributes, states and tokens**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| dialog | Element | Closed | Receives centered, elevated surface styling. |
| open | State | Absent | Displays the dialog with its flex layout. |
| data-dialog="squared" | Attribute token | Standard shape | Applies the squared card dimensions and media layout. |
| full-width | Attribute token | Content width | Expands the dialog to the available viewport width with an outer gap. |
| no-shadow | Attribute token | --shadow-2xl | Removes dialog elevation. |
| --dialog-radius | Token | Theme value | Controls the corner radius of standard dialogs. |
| --motion-duration-base / --motion-easing-enter / --motion-easing-exit | Motion token | 200ms / ease-out / ease-in | Control supported opening and closing transitions for the dialog surface and backdrop. |

---

Source: ./bottom-sheets.html.md

## Bottom sheets

Bottom-anchored dialog layout with an optional shadow.

### Open bottom sheet

This preview stays in the page flow so its content remains visible above the footer. In an app, mount the dialog as a direct child of the document root so fixed positioning and layering are not constrained by an ancestor stacking context.

```html
<dialog data-dialog="bottom-sheet" open aria-labelledby="filter-sheet-title">
  <header>
    <h3 id="filter-sheet-title">Filters</h3>
  </header>
  <section>
    <p>Choose the results to include.</p>
    <label class="mr-2"><input type="checkbox" name="availability"> Available now</label>
    <label class="mr-2"><input type="checkbox" name="delivery"> Free delivery</label>
  </section>
  <footer><button type="button">Apply filters</button></footer>
</dialog>
```

### Structured content and actions

The bottom sheet CSS targets direct header, section and footer children. The `open` attribute displays the sheet.

```html
<dialog data-dialog="bottom-sheet no-shadow" aria-labelledby="share-sheet-title">
  <header><h3 id="share-sheet-title">Share</h3></header>
  <section><p>Choose where to share this item.</p></section>
  <footer><button type="button">Copy link</button></footer>
</dialog>
```

### Motion and accessibility

Discrete transitions and starting styles reveal the sheet through opacity and a short translation from the bottom. The `data-closing` state reverses those properties and keeps the backdrop synchronized. The modal stays open through the exit animation, then `close()` completes the flow.

When a user requests reduced motion, the sheet and its backdrop change state without transitions or spatial movement. The example connects the sheet to its heading with `aria-labelledby`. A sheet opened with `showModal()` blocks the page and supports Escape. Focus behavior follows the native dialog API.

### API

**Bottom sheet elements, attributes, tokens and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| dialog | Element | Required | Receives the base dialog and open-state styling. |
| data-dialog=bottom-sheet | Attribute | Required | Anchors the dialog to the bottom edge. |
| data-dialog=no-shadow | Attribute token | Shadow | Removes the default dialog elevation. |
| open | Attribute / state | Absent | Displays the sheet. |
| --dialog-radius / --shadow-2xl | Token | Theme | Control the top corners and default elevation. |
| --motion-duration-base / --motion-easing-enter / --motion-easing-exit | Motion token | 200ms / ease-out / ease-in | Control supported opening and closing transitions for the sheet and backdrop. |

---

Source: ./drawers.html.md

## Drawers

Persistent and temporary complementary regions at either viewport edge.

### Persistent drawer

Use `aside data-drawer` for a persistent complementary region. The drawer may contain navigation, controls, or supporting content and stays fixed at the requested viewport edge. Navigation is optional.

This preview stays inside its frame so you can inspect the drawer without covering the rest of the page.

```html
<aside data-drawer aria-label="Workspace shortcuts">
  <section class="h-48 relative bg-primary">
    <h2 data-position="absolute bottom left">Workspace</h2>
  </section>
  <nav aria-label="Workspace shortcuts">
    <ul data-list>
      <li><a href="/projects"><i class="material-icons" aria-hidden="true">folder</i> Projects</a></li>
      <li><a href="/activity"><i class="material-icons" aria-hidden="true">history</i> Recent activity</a></li>
    </ul>
  </nav>
</aside>
```

### Temporary drawer

Place a `summary` followed by a direct `aside data-drawer` inside a `details data-trigger data-drawer-trigger` disclosure. The `data-drawer-trigger` attribute is a CSS hook and adds no JavaScript behavior. The native `open` attribute is the only state and opens or closes the drawer with a click, Enter, or Space.

A click outside the open drawer closes it and consumes that click, so a covered control stays inactive. Controls inside the drawer keep their native behavior. The complementary region receives its accessible name from `aria-label` or `aria-labelledby`. Focus stays in the native document order. Escape leaves the disclosure open.

The first preview remains visible for inspection. The interactive demo below starts closed and lets you open or close the temporary drawer.

```html
<details data-trigger data-drawer-trigger>
  <summary>Open filters</summary>
  <aside data-drawer="right" aria-labelledby="project-filters-title">
    <section class="h-48 relative bg-primary">
      <h2 id="project-filters-title" data-position="absolute bottom left">Filter projects</h2>
    </section>
    <form aria-label="Project filters">
      <ul data-list>
        <li><label><i class="material-icons" aria-hidden="true">check_circle</i><input type="checkbox" name="active"> Active projects</label></li>
        <li><label><i class="material-icons" aria-hidden="true">group</i><input type="checkbox" name="shared"> Shared with me</label></li>
      </ul>
    </form>
  </aside>
</details>
```

### Position and motion

A drawer starts at the left edge. Add `data-drawer="right"` to anchor it to the right edge. The open state moves the drawer into view. Native details content and inert CSS define the entrance and exit transitions. Reduced motion changes state without a transition or spatial offset.

### API

**Drawer elements, attributes and states**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| aside[data-drawer] | Element | Persistent | Creates a standalone persistent drawer or a temporary drawer inside the required disclosure structure. |
| details[data-trigger][data-drawer-trigger] > summary + aside[data-drawer] | Structure | Required for temporary drawers | Marks the temporary drawer disclosure for CSS while native details state provides zero-JavaScript control. |
| data-drawer="right" | Attribute token | Left | Anchors the drawer to the right viewport edge. |
| open | Native details state | Absent | Shows the temporary drawer through its parent details. |
| --motion-duration-base / --motion-duration-fast / --motion-easing-enter / --motion-easing-exit | Motion token | 200ms / theme value / ease-out / ease-in | Control the entrance and exit transition timing. |

---

Source: ./lists.html.md

## Lists

Styled unordered, ordered and definition-list layouts.

### Basic combinations

#### Details

```html
<ul data-list>
  <li><span>Bryan Cranston</span></li>
</ul>

<ul data-list>
  <li>
    <span><i class="material-icons" aria-hidden="true">person</i><span>Bryan Cranston</span></span>
  </li>
</ul>

<ul data-list>
  <li>
    <span>Bryan Cranston</span>
    <span aria-label="Favorite"><i class="material-icons" aria-hidden="true">star</i></span>
  </li>
</ul>

<ul data-list>
  <li>
    <span>Bryan Cranston</span>
    <span><small>Actor</small><i class="material-icons" aria-hidden="true">star</i></span>
  </li>
</ul>

<ul data-list>
  <li>
    <span><span>Bryan Cranston<small>Played Walter White in Breaking Bad.</small></span></span>
  </li>
</ul>
```

### Combined display content

#### Details, avatar, secondary icon and information

```html
<ul data-list>
  <li>
    <span><i class="material-icons" aria-hidden="true">person</i><span>Bryan Cranston</span></span>
    <span aria-label="Favorite"><i class="material-icons" aria-hidden="true">star</i></span>
  </li>
</ul>

<ul data-list>
  <li>
    <span><i class="material-icons" aria-hidden="true">person</i><span>Bryan Cranston</span></span>
    <span><small>Actor</small><i class="material-icons" aria-hidden="true">star</i></span>
  </li>
</ul>

<ul data-list>
  <li>
    <span>
      <i class="material-icons" aria-hidden="true">person</i>
      <span>Bryan Cranston<small>Played Walter White in Breaking Bad.</small></span>
    </span>
    <span><small>Actor</small><i class="material-icons" aria-hidden="true">star</i></span>
  </li>
</ul>
```

### Action combinations

#### Details, avatar, secondary action and information

```html
<ul data-list>
  <li><button type="button">Bryan Cranston</button></li>
</ul>

<ul data-list>
  <li>
    <button type="button"><i class="material-icons" aria-hidden="true">person</i><span>Bryan Cranston</span></button>
  </li>
</ul>

<ul data-list>
  <li>
    <button type="button">Bryan Cranston</button>
    <button type="button" aria-label="Add Bryan Cranston to favorites"><i class="material-icons" aria-hidden="true">star</i></button>
  </li>
</ul>

<ul data-list>
  <li>
    <button type="button">Bryan Cranston</button>
    <button type="button" aria-label="Add actor Bryan Cranston to favorites"><small>Actor</small><i class="material-icons" aria-hidden="true">star</i></button>
  </li>
</ul>

<ul data-list>
  <li>
    <button type="button"><span>Bryan Cranston<small>Played Walter White in Breaking Bad.</small></span></button>
  </li>
</ul>

<ul data-list>
  <li>
    <button type="button"><i class="material-icons" aria-hidden="true">person</i><span>Bryan Cranston</span></button>
    <button type="button" aria-label="Add Bryan Cranston to favorites"><i class="material-icons" aria-hidden="true">star</i></button>
  </li>
</ul>

<ul data-list>
  <li>
    <button type="button"><i class="material-icons" aria-hidden="true">person</i><span>Bryan Cranston</span></button>
    <button type="button" aria-label="Add actor Bryan Cranston to favorites"><small>Actor</small><i class="material-icons" aria-hidden="true">star</i></button>
  </li>
</ul>

<ul data-list>
  <li>
    <button type="button">
      <i class="material-icons" aria-hidden="true">person</i>
      <span>Bryan Cranston<small>Played Walter White in Breaking Bad.</small></span>
    </button>
    <button type="button" aria-label="Add actor Bryan Cranston to favorites"><small>Actor</small><i class="material-icons" aria-hidden="true">star</i></button>
  </li>
</ul>
```

### Complete list

```html
<ul data-list>
  <li>
    <button type="button">
      <i class="material-icons bg-info" aria-hidden="true">person</i>
      <span>Bryan Cranston<small>Played Walter White in Breaking Bad.</small></span>
    </button>
    <button type="button" aria-label="Add actor Bryan Cranston to favorites"><small>Actor</small><i class="material-icons" aria-hidden="true">star</i></button>
  </li>
  <li>
    <button type="button">
      <i class="material-icons bg-primary" aria-hidden="true">person</i>
      <span>Aaron Paul<small>Played Jesse Pinkman in Breaking Bad.</small></span>
    </button>
    <button type="button" aria-label="Add actor Aaron Paul to favorites"><small>Actor</small><i class="material-icons" aria-hidden="true">star</i></button>
  </li>
  <li>
    <button type="button">
      <i class="material-icons bg-success" aria-hidden="true">person</i>
      <span>Bob Odenkirk<small>Played Saul Goodman in Breaking Bad.</small></span>
    </button>
    <button type="button" aria-label="Add actor Bob Odenkirk to favorites"><small>Actor</small><i class="material-icons" aria-hidden="true">star</i></button>
  </li>
</ul>
```

### Numbered list

```html
<ol data-list>
  <li><span>Create the project</span></li>
  <li><span>Invite the team</span></li>
  <li><span>Publish the first release</span></li>
</ol>
```

### Definition list

- **Status:**
  Ready for review
- **Owner:**
  Documentation team

```html
<dl>
  <dt>Status</dt>
  <dd>Ready for review</dd>
  <dt>Owner</dt>
  <dd>Documentation team</dd>
</dl>
```

### API

**List elements and row regions**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ul[data-list] | Element and attribute | Unordered | Removes list markers and applies the application-row layout. |
| ol[data-list] | Element and attribute | Numbered | Generates numbered application rows with an internal counter. |
| li | Direct child | Required per row | Creates a row with a flexible primary region and an optional compact secondary region. |
| dl > dt + dd | Definition elements | Term and detail | Uses an intrinsic term column and a flexible detail column. |
| a / button | Interactive element | Optional | Fills the primary row region or stays compact as the second child. |

---

Source: ./badges.html.md

## Badges

Generated badge content selected by data-badge.

### Badge colors

```html
<span data-badge="1" class="after:bg-primary">1 notification</span>
```

```html
<span data-badge="1" class="after:bg-accent">1 notification</span>
```

```html
<span data-badge="1" class="after:bg-info">1 notification</span>
```

```html
<span data-badge="1" class="after:bg-success">1 notification</span>
```

```html
<span data-badge="1" class="after:bg-warning">1 notification</span>
```

```html
<span data-badge="1" class="after:bg-danger">1 notification</span>
```

```html
<span data-badge="1" class="after:bg-default">1 notification</span>
```

### Badge API

**Badge attributes and color utilities**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| data-badge | HTML data attribute | Required | Supplies the short visual value rendered by the::after pseudo-element. |
| after:bg-{color} | Pseudo-element color utility | bg-white | Sets the badge background to primary, accent, info, success, warning, danger or default. |

---

Source: ./tooltips.html.md

## Tooltips

Generated tooltip content, positions and color utilities.

### Default tooltip

```html
<span data-tooltip="This is a tooltip" class="inline">This span has a tooltip</span>
```

### Tooltip colors

Apply after:bg-{color} to select a semantic tooltip background. Dragonglass supports primary, accent, info, success, warning, danger, and default.

```html
<span data-tooltip="This is a primary tooltip" class="inline after:bg-primary">primary tooltip</span>
```

```html
<span data-tooltip="This is a accent tooltip" class="inline after:bg-accent">accent tooltip</span>
```

```html
<span data-tooltip="This is a info tooltip" class="inline after:bg-info">info tooltip</span>
```

```html
<span data-tooltip="This is a success tooltip" class="inline after:bg-success">success tooltip</span>
```

```html
<span data-tooltip="This is a warning tooltip" class="inline after:bg-warning">warning tooltip</span>
```

```html
<span data-tooltip="This is a danger tooltip" class="inline after:bg-danger">danger tooltip</span>
```

```html
<span data-tooltip="This is a default tooltip" class="inline after:bg-default">default tooltip</span>
```

### Tooltip directions

Set data-tooltip-position to bottom, left, or right. An omitted attribute places the tooltip above its trigger.

```html
<span data-tooltip="This tooltip opens bottom" data-tooltip-position="bottom" class="inline ml-16">bottom tooltip</span>
```

```html
<span data-tooltip="This tooltip opens left" data-tooltip-position="left" class="inline ml-16">left tooltip</span>
```

```html
<span data-tooltip="This tooltip opens right" data-tooltip-position="right" class="inline ml-16">right tooltip</span>
```

### Tooltip API

**Tooltip attributes and color utilities**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| data-tooltip | HTML data attribute | Required | Supplies the visual text rendered by the::after pseudo-element. |
| data-tooltip-position | HTML data attribute | Top | Accepts top, bottom, left or right. An absent attribute uses top. |
| after:bg-{color} | Pseudo-element color utility | bg-white | Sets the tooltip background to primary, accent, info, success, warning, danger or default. |

---

Source: ./tables.html.md

## Tables

Responsive data-table layout with generated mobile cell labels.

### Responsive table

Below 800px, each `data-label` value becomes the visible heading for its cell.

```html
<table data-table>
  <caption>Food details</caption>
  <thead>
    <tr>
      <th scope="col">Type of food</th>
      <th scope="col">Calories</th>
      <th scope="col">Average price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Type of food">Slice of pizza</td>
      <td data-label="Calories">450</td>
      <td data-label="Average price">$5.00</td>
    </tr>
    <tr>
      <td data-label="Type of food">Hamburger</td>
      <td data-label="Calories">350</td>
      <td data-label="Average price">$3.50</td>
    </tr>
  </tbody>
</table>
```

### Table colors

Set data-table to a semantic color token to apply that tone to the responsive table. Dragonglass supports primary, accent, success, info, warning, danger, and default.

```html
<table data-table="primary">
  <caption>Food details</caption>
  <thead>
    <tr>
      <th scope="col">Type of food</th>
      <th scope="col">Calories</th>
      <th scope="col">Average price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Type of food">Slice of pizza</td>
      <td data-label="Calories">450</td>
      <td data-label="Average price">$5.00</td>
    </tr>
    <tr>
      <td data-label="Type of food">Hamburger</td>
      <td data-label="Calories">350</td>
      <td data-label="Average price">$3.50</td>
    </tr>
  </tbody>
</table>
```

```html
<table data-table="accent">
  <caption>Food details</caption>
  <thead>
    <tr>
      <th scope="col">Type of food</th>
      <th scope="col">Calories</th>
      <th scope="col">Average price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Type of food">Slice of pizza</td>
      <td data-label="Calories">450</td>
      <td data-label="Average price">$5.00</td>
    </tr>
    <tr>
      <td data-label="Type of food">Hamburger</td>
      <td data-label="Calories">350</td>
      <td data-label="Average price">$3.50</td>
    </tr>
  </tbody>
</table>
```

```html
<table data-table="success">
  <caption>Food details</caption>
  <thead>
    <tr>
      <th scope="col">Type of food</th>
      <th scope="col">Calories</th>
      <th scope="col">Average price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Type of food">Slice of pizza</td>
      <td data-label="Calories">450</td>
      <td data-label="Average price">$5.00</td>
    </tr>
    <tr>
      <td data-label="Type of food">Hamburger</td>
      <td data-label="Calories">350</td>
      <td data-label="Average price">$3.50</td>
    </tr>
  </tbody>
</table>
```

```html
<table data-table="info">
  <caption>Food details</caption>
  <thead>
    <tr>
      <th scope="col">Type of food</th>
      <th scope="col">Calories</th>
      <th scope="col">Average price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Type of food">Slice of pizza</td>
      <td data-label="Calories">450</td>
      <td data-label="Average price">$5.00</td>
    </tr>
    <tr>
      <td data-label="Type of food">Hamburger</td>
      <td data-label="Calories">350</td>
      <td data-label="Average price">$3.50</td>
    </tr>
  </tbody>
</table>
```

```html
<table data-table="warning">
  <caption>Food details</caption>
  <thead>
    <tr>
      <th scope="col">Type of food</th>
      <th scope="col">Calories</th>
      <th scope="col">Average price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Type of food">Slice of pizza</td>
      <td data-label="Calories">450</td>
      <td data-label="Average price">$5.00</td>
    </tr>
    <tr>
      <td data-label="Type of food">Hamburger</td>
      <td data-label="Calories">350</td>
      <td data-label="Average price">$3.50</td>
    </tr>
  </tbody>
</table>
```

```html
<table data-table="danger">
  <caption>Food details</caption>
  <thead>
    <tr>
      <th scope="col">Type of food</th>
      <th scope="col">Calories</th>
      <th scope="col">Average price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Type of food">Slice of pizza</td>
      <td data-label="Calories">450</td>
      <td data-label="Average price">$5.00</td>
    </tr>
    <tr>
      <td data-label="Type of food">Hamburger</td>
      <td data-label="Calories">350</td>
      <td data-label="Average price">$3.50</td>
    </tr>
  </tbody>
</table>
```

```html
<table data-table="default">
  <caption>Food details</caption>
  <thead>
    <tr>
      <th scope="col">Type of food</th>
      <th scope="col">Calories</th>
      <th scope="col">Average price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Type of food">Slice of pizza</td>
      <td data-label="Calories">450</td>
      <td data-label="Average price">$5.00</td>
    </tr>
    <tr>
      <td data-label="Type of food">Hamburger</td>
      <td data-label="Calories">350</td>
      <td data-label="Average price">$3.50</td>
    </tr>
  </tbody>
</table>
```

### Table API

**Responsive table attributes**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| data-label | td attribute | Absent | Provides the visible mobile label generated by the responsive table CSS. |
| data-table | Table attribute | Required for compact layout | Its presence enables the responsive layout. It accepts primary, accent, success, info, warning, danger or default for an optional tone. |

---

Source: ./utilities.html.md

## Utilities

Find focused spacing, layout, border, typography, elevation and color adjustments.

### Find a utility

The reference groups every documented utility family by purpose. Each table shows the class pattern, accepted values and available variants.

- [Motion](#utilities-motion)
- [Spacing](#utilities-spacing)
- [Layout and stacking](#utilities-layout)
- [Grid containers](#utilities-grid)
- [Images and backgrounds](#utilities-media)
- [Borders and outlines](#utilities-borders)
- [Typography](#utilities-typography)
- [Elevation](#utilities-elevation)
- [Colors](#utilities-colors)

### Compose focused adjustments

A utility class changes one visual property or a small related set.

```html
<article class="relative z-1 p-4 shadow-base bg-default-lightest">
  <h2 class="text-xl font-semibold leading-tight text-primary-dark">Project summary</h2>
  <p class="mt-2 mb-4 text-default-dark">Utilities make focused visual adjustments.</p>
  <button class="bg-primary hover:bg-primary-dark focus:outline-2 focus:outline-primary">
    Open project
  </button>
</article>
```

### Constrain content width

Use `container` for the common fluid and centered page width. Combine `max-w-*` with `mx-auto` when an element needs a different limit. These classes add no padding.

```html
<section class="container">
  <h2>Application content</h2>
  <p>The container stays fluid until it reaches the configured maximum width.</p>
</section>

<p class="max-w-prose mx-auto">
  This text measure stays readable and preserves its vertical margins.
</p>
```

### Prefixes and special characters

Interactive variants place `focus:`, `active:` or `hover:` before a supported class. Color utilities also accept `before:` and `after:`. Fractional widths accept the responsive prefixes `sm:`, `md:`, `lg:` and `xl:`.

Colons and slashes appear directly inside the HTML class attribute. Authored CSS and DOM selectors use their escaped forms.

```html
<div class="grid-gutters">
  <section class="w-6/12 md:w-4/12 xl:w-3/12 p-4">Responsive column</section>
</div>
```

### Motion

Motion tokens give components shared timing semantics. Components transition only their documented properties and honor the user's reduced-motion preference.

**Motion utility families**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| --motion-duration-{speed} | Duration token | instant (0ms), fast (120ms), base (200ms), deliberate (280ms) | Selects an instant, compact, standard or emphasized duration. Override a token at an appropriate scope to tune component motion without applying a transition to every property. Variants: CSS custom property |
| --motion-easing-{intent} | Easing token | standard (ease-in-out), enter (ease-out), exit (ease-in) | Selects the easing for a state change, an entering surface or an exiting surface. Variants: CSS custom property |

### Spacing

Spacing utilities read the shared spacing scale and apply one physical side or every side.

**Spacing utility families**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| p-{size} \| pt-{size} \| pr-{size} \| pb-{size} \| pl-{size} | Padding | 0, px, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16 | Sets padding on every side, top, right, bottom or left respectively. Variants: Base only |
| m-{size} \| mt-{size} \| mr-{size} \| mb-{size} \| ml-{size} | Margin | 0, px, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16 | Sets margin on every side, top, right, bottom or left respectively. Variants: Base only |

### Layout and stacking

Layout utilities control positioning, stacking, fractional width and compact display behavior.

**Layout and stacking utility families**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| container | Centered container | 100% width, var(--container-max-width) maximum | Centers content with logical auto margins and adds no padding. Variants: Base only |
| max-w-{size} | Maximum width | sm (36rem), md (48rem), lg (64rem), xl (80rem), prose (65ch) | Limits width without changing the element width or margins. Variants: Base only |
| mx-auto | Horizontal centering | margin-inline: auto | Centers a width-constrained element without changing vertical margins. Variants: Base only |
| relative \| static \| absolute \| fixed \| sticky | Position | The class name is the position value | Sets the position property directly. Variants: Base only |
| z-{level} | Z-index | auto, negative-10, negative-1, 0, 1, 2, 3, 4, 6, 8, 12, 16, 1000 | Sets a documented z-index from the framework scale. Variants: Base only |
| w-{part}/{whole} | Fractional width | whole: 2 through 12; part: 1 through whole - 1 | Sets a fractional width. Responsive variants start at 576px, 768px, 992px and 1200px. Variants: Base, sm:, md:, lg:, xl: |
| inline | Inline display | No value | Uses inline-block display, resets positioned offsets and aligns the element vertically. Variants: Base only |
| w-full \| h-full \| h-auto | Full and automatic sizing | 100% width, 100% height, automatic height | Controls the media box before applying object-fit or background utilities. Variants: Base only |
| h-{size} \| min-h-{size} | Height and minimum height | 8 (2rem), 12 (3rem), 16 (4rem), 24 (6rem), 32 (8rem), 48 (12rem), 64 (16rem), 96 (24rem), 128 (32rem) | Sets height or minimum height from the quarter-rem framework scale. Variants: Base only |
| h-{viewport} \| min-h-{viewport} | Viewport height and minimum height | half-screen (50svh), three-quarter-screen (75svh), screen (100svh) | Sets height or minimum height relative to the small viewport. Variants: Base only |
| u-scrollable | Height helper | max-height: 360rem | Sets a maximum height while overflow behavior remains unchanged. Variants: Base only |

### Grid containers

Grid classes create wrapping flex rows whose direct children start at full width.

**Grid containers utility families**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| grid | Grid container | Start alignment without gutters | Creates the base wrapping row. Variants: Base only |
| grid-center \| grid-end | Grid alignment | center, end | Aligns grid children along the row. The base grid class uses start alignment. Variants: Base only |
| grid-gutters | Guttered grid | 0.8rem child padding | Creates a grid row with consistent horizontal gutters. Variants: Base only |

### Images and backgrounds

Media utilities control image fitting, focal position, background sizing and repetition.

**Images and backgrounds utility families**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| object-{fit} | Object fit | cover, contain, fill, none, scale-down | Sets object-fit on replaced elements such as img. Variants: Base only |
| object-{position} | Object position | top-left, top, top-right, left, center, right, bottom-left, bottom, bottom-right | Selects the visible focal point inside an image box. Variants: Base only |
| bg-auto \| bg-cover \| bg-contain | Background size | auto, cover, contain | Sets background-size without changing the image source. Variants: Base only |
| bg-{position} | Background position | top-left, top, top-right, left, center, right, bottom-left, bottom, bottom-right | Selects the background image focal point. Variants: Base only |
| bg-repeat \| bg-no-repeat | Background repeat | repeat, no-repeat | Controls background image repetition. Variants: Base only |

### Borders and outlines

Border and outline utilities separate width, style, offset and color for explicit composition.

**Borders and outlines utility families**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| border | Border shorthand | 1px-scale width and solid style | Adds the default solid border. Variants: Base, focus:, active:, hover: |
| border-{size} | Border width | 0 through 13 | Sets border width from the border scale. Variants: Base, focus:, active:, hover: |
| outline | Outline shorthand | 1px-scale width and solid style | Adds the default solid outline. Variants: Base, focus:, active:, hover: |
| outline-none | Outline removal | none | Removes the outline. Variants: Base, focus:, active:, hover: |
| outline-{size} | Outline width | 0 through 13 | Sets outline width and a solid outline style. Variants: Base, focus:, active:, hover: |
| outline-{style} | Outline style | solid, dashed, dotted, double | Sets the outline style. Variants: Base, focus:, active:, hover: |
| outline-offset-{size} | Outline offset | 0, px, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16 | Offsets the outline with a value from the spacing scale. Variants: Base, focus:, active:, hover: |

### Typography

Typography utilities control one font or text property and support interactive state variants.

**Typography utility families**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| text-{size} | Font size | 2xs, xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl | Sets font size from the framework scale. Variants: Base, focus:, active:, hover: |
| normal-style \| italic \| oblique | Font style | normal, italic, oblique | Sets font style. Variants: Base, focus:, active:, hover: |
| font-{weight} | Font weight | thin, extralight, light, normal, medium, semibold, bold, extrabold, black | Sets numeric font weight from 100 through 900. Variants: Base, focus:, active:, hover: |
| normal-case \| capitalize \| uppercase \| lowercase | Text transform | none, capitalize, uppercase, lowercase | Changes visual casing without changing source text. Variants: Base, focus:, active:, hover: |
| leading-{height} | Line height | none, tight, snug, normal, relaxed, loose | Sets line height from 1 through 2. Variants: Base, focus:, active:, hover: |
| text-{alignment} | Text alignment | left, right, center, justify | Sets physical text alignment. Variants: Base, focus:, active:, hover: |

### Elevation

Elevation utilities use token-backed outer and inset shadows with interactive state variants.

**Elevation utility families**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| shadow-{size} | Outer shadow | 2xs, xs, sm, base, lg, xl, 2xl, 3xl | Applies an outer shadow and its matching stacking level. Variants: Base, focus:, active:, hover: |
| shadow-inner-{size} | Inset shadow | 2xs, xs, sm, base, lg, xl, 2xl, 3xl | Applies an inset shadow. Variants: Base, focus:, active:, hover: |
| shadow-none | Shadow removal | none | Removes box shadow. Variants: Base, focus:, active:, hover: |
| text-shadow-sm \| text-shadow-base \| text-shadow-lg | Text shadow | sm, base, lg | Applies a compact token-colored shadow to improve text separation over media. Variants: Base only |
| text-shadow-none | Text shadow removal | none | Removes text shadow, including low-specificity defaults. Variants: Base only |

### Colors

Color utilities cover backgrounds, borders, outlines and text across every semantic family and weight.

**Colors utility families**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| {kind}-{family}{weight} | Semantic color | kind: bg, border, outline, text; family: primary, accent, success, info, warning, danger, default; weight: lightest, lighter, light, base, dark, darker, darkest | Applies the selected semantic token. Base weight omits the weight suffix, such as bg-primary. Border colors require a border style to become visible. Variants: Base, focus:, active:, hover:, before:, after: |
| {kind}-white \| {kind}-black | Literal color | kind: bg, border, outline, text | Applies the literal white or black token. These utilities remain unchanged across color schemes. Variants: Base, focus:, active:, hover:, before:, after: |
| bg-transparent \| bg-scrim \| bg-media-scrim | Transparent background | transparent, var(--scrim), var(--media-scrim) | Sets only the background color and preserves the current text color. Variants: Base only |

---

Source: ./grid.html.md

## Grid

Wrapping flex rows, gutters and responsive fractional widths.

### Fractional columns

A grid starts mobile-first with full-width children. Fraction utilities divide a row with denominators from 2 through 12.

```html
<div class="grid">
  <div class="w-4/12"><div class="p-3 shadow-xs">Four of twelve columns</div></div>
  <div class="w-8/12"><div class="p-3 shadow-xs">Eight of twelve columns</div></div>
</div>
```

### Guttered columns

`grid-gutters` adds consistent spacing between columns.

```html
<div class="grid-gutters">
  <div class="w-6/12"><div class="p-3 shadow-xs">First column</div></div>
  <div class="w-6/12"><div class="p-3 shadow-xs">Second column</div></div>
</div>
```

### Responsive columns

Unprefixed fractions apply at every width. Prefixed fractions take effect at their real minimum-width breakpoint and remain active until a later rule overrides them.

```html
<div class="grid-gutters">
  <div class="sm:w-6/12 md:w-4/12 lg:w-3/12 xl:w-2/12"><div class="p-3 shadow-xs">Responsive column</div></div>
  <div class="sm:w-6/12 md:w-4/12 lg:w-3/12 xl:w-2/12"><div class="p-3 shadow-xs">Responsive column</div></div>
</div>
```

### Grid API and breakpoints

**Grid classes and breakpoints**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| grid | Container class | Full-width children | Creates a wrapping flex row without gutters. |
| grid-gutters | Container class | 0.8rem gutters | Creates the same grid and adds horizontal container offsets plus 0.8rem child padding. |
| w-{part}/{whole} | Width utility | 1 through whole - 1 | Sets a fractional width. Both numbers range from 1 to 12, with part smaller than whole. |
| sm:w-{part}/{whole} | Responsive width | min-width: 576px | Applies the fraction at the small breakpoint and above. |
| md:w-{part}/{whole} | Responsive width | min-width: 768px | Applies the fraction at the medium breakpoint and above. |
| lg:w-{part}/{whole} | Responsive width | min-width: 992px | Applies the fraction at the large breakpoint and above. |
| xl:w-{part}/{whole} | Responsive width | min-width: 1200px | Applies the fraction at the extra-large breakpoint and above. |

---

Source: ./positioning.html.md

## Positioning

Fixed and absolute placement through directional data-position tokens.

### Fixed to the viewport

A bare `data-position` uses fixed positioning at the top right. Combine one vertical token with one horizontal token. The following examples remain as markup so they do not cover this reference page.

```html
<aside data-position>Top right by default</aside>
<aside data-position="top center">Top center</aside>
<aside data-position="bottom left">Bottom left</aside>
<aside data-position="center">Viewport center</aside>
```

### Absolute inside a container

Add `absolute` to change only the positioning mode. The parent below uses `relative` to establish the containing block.

Top left

Center

Bottom right

```html
<section class="relative min-h-64 border">
  <p data-position="absolute top left" class="bg-primary p-2">Top left</p>
  <p data-position="absolute center" class="bg-info p-2">Center</p>
  <p data-position="absolute bottom right" class="bg-success p-2">Bottom right</p>
</section>
```

### Supported combinations

Use corners, `top center`, `bottom center`, `left center`, `right center`, or `center`. Combinations with opposing edges are outside the contract.

### API

**Positioning attribute, tokens and composition requirements**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| data-position | Attribute | fixed top right | Activates viewport positioning with top-right offsets from the spacing scale. |
| absolute | Attribute token | fixed | Changes only the position mode to absolute. The containing block comes from an ancestor positioned by the application. |
| top \| right \| bottom \| left | Attribute token | top right | Selects one vertical edge and one horizontal edge using the standard spacing offset. |
| center | Attribute token | Absent | Centers both axes alone, or the remaining axis when paired with an edge token. |
| Positioned ancestor | Composition requirement | Application controlled | Provides the containing block for absolute positioning, commonly through the relative utility. |

---

Source: ./images.html.md

## Images

Object-fit, focal-position and background image utilities.

### Fit an image inside its box

Set the image box dimensions, then use an `object-*` utility to control the fit and focal point.

```html
<img
  src="https://picsum.photos/id/1018/1200/800"
  alt="Mountain landscape"
  class="w-full h-64 object-cover object-center"
>
```

### Move the image focal point

Position utilities use a nine-point grid shared with background images.

```html
<img
  src="https://picsum.photos/id/1018/1200/800"
  alt="Mountain landscape"
  class="w-full h-64 object-cover object-bottom-right"
>
```

### Position a background image

Keep the image URL in the standard `background-image` style. Utilities control size, position and repetition.

```html
<section
  class="min-h-64 bg-cover bg-bottom-right bg-no-repeat"
  style="background-image: url('https://picsum.photos/id/1018/1200/800')"
  role="img"
  aria-label="Mountain landscape"
></section>
```

### Adjust card media

Background utilities load after card defaults, so they can move a `data-media` focal point without changing the card contract.

```html
<section
  data-media
  class="bg-cover bg-bottom-right bg-no-repeat"
  style="background-image: url('https://picsum.photos/id/1018/1200/800')"
></section>
```

### API

**Image sizing, fitting, position and background utilities**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| w-full \| h-full \| h-auto | Sizing utility | width: auto; height: auto | Controls the media box width and height. |
| object-cover \| object-contain \| object-fill \| object-none \| object-scale-down | Object-fit utility | fill | Controls how an img fits inside its content box. |
| object-{position} | Object-position utility | center | Selects one of nine focal positions from top-left through bottom-right. |
| bg-auto \| bg-cover \| bg-contain | Background-size utility | auto | Controls the rendered background image size. |
| bg-{position} | Background-position utility | top-left | Selects one of the same nine focal positions for a background image. |
| bg-repeat \| bg-no-repeat | Background-repeat utility | repeat | Enables or disables background image repetition. |

---

Source: ./elevations.html.md

## Elevations

Outer shadows, inset shadows and explicit stacking utilities.

### Outer shadows

Outer shadows range from `shadow-2xs` to `shadow-3xl`.

```html
<div class="shadow-base bg-white p-4">Raised surface</div>
```

### Inner shadows

Inner shadows use the same scale with the `shadow-inner-` prefix.

```html
<div class="shadow-inner-base bg-white p-4">Inset surface</div>
```

### Interactive states

State precedence follows interaction intent instead of shadow size. A hover or focus utility overrides the base elevation, and an active utility overrides both while the control is pressed.

```html
<button type="button" class="shadow-base hover:shadow-3xl active:shadow-sm">Change elevation</button>
<input aria-label="Focus elevation example" class="shadow-base focus:shadow-3xl bg-white" value="Focus this field">
```

Elevation changes transition only `box-shadow` with `--motion-duration-base` and `--motion-easing-standard`.

### Text shadows

Text shadows separate lettering from media. Keep a scrim or another sufficient contrast surface behind important text.

Small text shadow

Base text shadow

Large text shadow

No text shadow

```html
<p class="bg-primary text-white text-shadow-sm p-4">Small text shadow</p>
<p class="bg-primary text-white text-shadow-base p-4">Base text shadow</p>
<p class="bg-primary text-white text-shadow-lg p-4">Large text shadow</p>
<p class="bg-primary text-white text-shadow-none p-4">No text shadow</p>
```

### Shadow tokens

Each outer utility reads its matching `--shadow-*` token, and each inset utility reads the matching `--shadow-inner-*` token. A token override changes that elevation value across every use of the utility.

```html
<div class="shadow-base bg-white p-4">Token-backed surface</div>
```

**Outer and inner shadow tokens**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| --shadow-2xs | CSS custom property | shadow-2xs | Outer shadow token used by shadow-2xs. |
| --shadow-inner-2xs | CSS custom property | shadow-inner-2xs | Inset shadow token used by shadow-inner-2xs. |
| --shadow-xs | CSS custom property | shadow-xs | Outer shadow token used by shadow-xs. |
| --shadow-inner-xs | CSS custom property | shadow-inner-xs | Inset shadow token used by shadow-inner-xs. |
| --shadow-sm | CSS custom property | shadow-sm | Outer shadow token used by shadow-sm. |
| --shadow-inner-sm | CSS custom property | shadow-inner-sm | Inset shadow token used by shadow-inner-sm. |
| --shadow-base | CSS custom property | shadow-base | Outer shadow token used by shadow-base. |
| --shadow-inner-base | CSS custom property | shadow-inner-base | Inset shadow token used by shadow-inner-base. |
| --shadow-lg | CSS custom property | shadow-lg | Outer shadow token used by shadow-lg. |
| --shadow-inner-lg | CSS custom property | shadow-inner-lg | Inset shadow token used by shadow-inner-lg. |
| --shadow-xl | CSS custom property | shadow-xl | Outer shadow token used by shadow-xl. |
| --shadow-inner-xl | CSS custom property | shadow-inner-xl | Inset shadow token used by shadow-inner-xl. |
| --shadow-2xl | CSS custom property | shadow-2xl | Outer shadow token used by shadow-2xl. |
| --shadow-inner-2xl | CSS custom property | shadow-inner-2xl | Inset shadow token used by shadow-inner-2xl. |
| --shadow-3xl | CSS custom property | shadow-3xl | Outer shadow token used by shadow-3xl. |
| --shadow-inner-3xl | CSS custom property | shadow-inner-3xl | Inset shadow token used by shadow-inner-3xl. |

### Z-index scale

Outer shadow utilities retain a z-index derived from their elevation level. Explicit stacking overrides include `z-auto`, `z-negative-10`, `z-negative-1`, `z-0`, `z-1`, `z-2`, `z-3`, `z-4`, `z-6`, `z-8`, `z-12`, `z-16` or `z-1000`.

```html
<div class="relative z-8">Navigation surface</div>
<div class="relative z-auto">Natural stacking order</div>
```

---

Source: ./colors.html.md

## Colors

Semantic color tokens, utility classes, bundled themes, and custom theme compilation.

### Browse light themes

 [Default](/dragonglass/themes/default.html.md)  [Indigo](/dragonglass/themes/indigo.html.md)  [Violet](/dragonglass/themes/violet.html.md)  [Magenta](/dragonglass/themes/magenta.html.md)  [Ruby](/dragonglass/themes/ruby.html.md)  [Amber](/dragonglass/themes/amber.html.md)  [Moss](/dragonglass/themes/moss.html.md)  [Emerald](/dragonglass/themes/emerald.html.md)  [Teal](/dragonglass/themes/teal.html.md)  [Ocean](/dragonglass/themes/ocean.html.md)  [Graphite](/dragonglass/themes/graphite.html.md)  [Stone](/dragonglass/themes/stone.html.md)

### Browse dark themes

 [Default](/dragonglass/themes/dark/default.html.md)  [Indigo](/dragonglass/themes/dark/indigo.html.md)  [Violet](/dragonglass/themes/dark/violet.html.md)  [Magenta](/dragonglass/themes/dark/magenta.html.md)  [Ruby](/dragonglass/themes/dark/ruby.html.md)  [Amber](/dragonglass/themes/dark/amber.html.md)  [Moss](/dragonglass/themes/dark/moss.html.md)  [Emerald](/dragonglass/themes/dark/emerald.html.md)  [Teal](/dragonglass/themes/dark/teal.html.md)  [Ocean](/dragonglass/themes/dark/ocean.html.md)  [Graphite](/dragonglass/themes/dark/graphite.html.md)  [Stone](/dragonglass/themes/dark/stone.html.md)

### Background and text colors

Each semantic color includes lightest, lighter, light, base, dark, darker and darkest tokens. White and black remain the global contrast extremes.

```html
<div class="bg-primary p-3">Primary background</div>
<p class="text-primary-dark">Primary dark text</p>
```

### Transparent backgrounds

These utilities change only the background color and preserve the current text color.

```html
<div class="bg-transparent p-3">Transparent background</div>
<div class="bg-scrim text-white p-3">Scrim background</div>
<div class="bg-media-scrim text-white p-3">Media scrim background</div>
```

### Buttons by color

```html
<button type="button" class="bg-primary">primary</button>
<button type="button" class="bg-accent">accent</button>
<button type="button" class="bg-info">info</button>
<button type="button" class="bg-success">success</button>
<button type="button" class="bg-warning">warning</button>
<button type="button" class="bg-danger">danger</button>
<button type="button" class="bg-default">default</button>
```

### Form fields by color

```html
<fieldset data-field="primary">
  <label for="primary-field">primary field</label>
  <input id="primary-field" name="primary-field" type="text" aria-describedby="primary-field-help">
  <small id="primary-field-help">Uses the primary theme color.</small>
</fieldset>
<fieldset data-field="accent">
  <label for="accent-field">accent field</label>
  <input id="accent-field" name="accent-field" type="text" aria-describedby="accent-field-help">
  <small id="accent-field-help">Uses the accent theme color.</small>
</fieldset>
<fieldset data-field="info">
  <label for="info-field">info field</label>
  <input id="info-field" name="info-field" type="text" aria-describedby="info-field-help">
  <small id="info-field-help">Uses the info theme color.</small>
</fieldset>
<fieldset data-field="success">
  <label for="success-field">success field</label>
  <input id="success-field" name="success-field" type="text" aria-describedby="success-field-help">
  <small id="success-field-help">Uses the success theme color.</small>
</fieldset>
<fieldset data-field="warning">
  <label for="warning-field">warning field</label>
  <input id="warning-field" name="warning-field" type="text" aria-describedby="warning-field-help">
  <small id="warning-field-help">Uses the warning theme color.</small>
</fieldset>
<fieldset data-field="danger">
  <label for="danger-field">danger field</label>
  <input id="danger-field" name="danger-field" type="text" aria-describedby="danger-field-help">
  <small id="danger-field-help">Uses the danger theme color.</small>
</fieldset>
<fieldset data-field="default">
  <label for="default-field">default field</label>
  <input id="default-field" name="default-field" type="text" aria-describedby="default-field-help">
  <small id="default-field-help">Uses the default theme color.</small>
</fieldset>
```

### Interactive color states

```html
<button type="button" class="bg-primary-dark hover:bg-primary active:bg-primary-light">Background states</button>
<input aria-label="Color focus example" class="p-3 text-primary-dark focus:text-primary" value="Focus this field">
```

### Compile a theme from one color

The Sass theme module derives every semantic family, weight, foreground and progress color from one opaque primary. Every base uses its lightest family token as foreground. The compiler accepts an OKLCH primary lightness from 42% through 56% and a contrast ratio of at least 4.5:1 for that pair. The compiled theme loads after `dragonglass.css`.

```scss
@use "pkg:dragonglass/theme" as dragonglass;

:root {
  @include dragonglass.tokens(#7c3aed);
}
```

```sh
bunx sass --pkg-importer=node theme.scss theme.css --style=compressed
```

A theme selector around each mixin call lets one stylesheet contain several themes.

```scss
@use "pkg:dragonglass/theme" as dragonglass;

[data-theme="violet"] {
  @include dragonglass.tokens(#7c3aed);
}

[data-theme="forest"] {
  @include dragonglass.tokens(#167c55);
}
```

### Automatic dark mode

Each theme derives dark structural roles from the same primary and follows `prefers-color-scheme` automatically. The `data-color-scheme` attribute on the root element forces light or dark mode.

```html
<html data-color-scheme="dark"></html>
```

### Color tokens

Semantic custom properties expose token values directly as an alternative to generated color utility classes.

```html
<div style="background-color: var(--primary); color: var(--primary-darker)">
  Primary token preview
</div>
```

**Semantic color custom properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| --primary-lightest | CSS color token | primary | Used by bg-primary-lightest, text-primary-lightest, border-primary-lightest and outline-primary-lightest. |
| --primary-lighter | CSS color token | primary | Used by bg-primary-lighter, text-primary-lighter, border-primary-lighter and outline-primary-lighter. |
| --primary-light | CSS color token | primary | Used by bg-primary-light, text-primary-light, border-primary-light and outline-primary-light. |
| --primary | CSS color token | primary | Used by bg-primary, text-primary, border-primary and outline-primary. |
| --primary-dark | CSS color token | primary | Used by bg-primary-dark, text-primary-dark, border-primary-dark and outline-primary-dark. |
| --primary-darker | CSS color token | primary | Used by bg-primary-darker, text-primary-darker, border-primary-darker and outline-primary-darker. |
| --primary-darkest | CSS color token | primary | Used by bg-primary-darkest, text-primary-darkest, border-primary-darkest and outline-primary-darkest. |
| --accent-lightest | CSS color token | accent | Used by bg-accent-lightest, text-accent-lightest, border-accent-lightest and outline-accent-lightest. |
| --accent-lighter | CSS color token | accent | Used by bg-accent-lighter, text-accent-lighter, border-accent-lighter and outline-accent-lighter. |
| --accent-light | CSS color token | accent | Used by bg-accent-light, text-accent-light, border-accent-light and outline-accent-light. |
| --accent | CSS color token | accent | Used by bg-accent, text-accent, border-accent and outline-accent. |
| --accent-dark | CSS color token | accent | Used by bg-accent-dark, text-accent-dark, border-accent-dark and outline-accent-dark. |
| --accent-darker | CSS color token | accent | Used by bg-accent-darker, text-accent-darker, border-accent-darker and outline-accent-darker. |
| --accent-darkest | CSS color token | accent | Used by bg-accent-darkest, text-accent-darkest, border-accent-darkest and outline-accent-darkest. |
| --info-lightest | CSS color token | info | Used by bg-info-lightest, text-info-lightest, border-info-lightest and outline-info-lightest. |
| --info-lighter | CSS color token | info | Used by bg-info-lighter, text-info-lighter, border-info-lighter and outline-info-lighter. |
| --info-light | CSS color token | info | Used by bg-info-light, text-info-light, border-info-light and outline-info-light. |
| --info | CSS color token | info | Used by bg-info, text-info, border-info and outline-info. |
| --info-dark | CSS color token | info | Used by bg-info-dark, text-info-dark, border-info-dark and outline-info-dark. |
| --info-darker | CSS color token | info | Used by bg-info-darker, text-info-darker, border-info-darker and outline-info-darker. |
| --info-darkest | CSS color token | info | Used by bg-info-darkest, text-info-darkest, border-info-darkest and outline-info-darkest. |
| --success-lightest | CSS color token | success | Used by bg-success-lightest, text-success-lightest, border-success-lightest and outline-success-lightest. |
| --success-lighter | CSS color token | success | Used by bg-success-lighter, text-success-lighter, border-success-lighter and outline-success-lighter. |
| --success-light | CSS color token | success | Used by bg-success-light, text-success-light, border-success-light and outline-success-light. |
| --success | CSS color token | success | Used by bg-success, text-success, border-success and outline-success. |
| --success-dark | CSS color token | success | Used by bg-success-dark, text-success-dark, border-success-dark and outline-success-dark. |
| --success-darker | CSS color token | success | Used by bg-success-darker, text-success-darker, border-success-darker and outline-success-darker. |
| --success-darkest | CSS color token | success | Used by bg-success-darkest, text-success-darkest, border-success-darkest and outline-success-darkest. |
| --warning-lightest | CSS color token | warning | Used by bg-warning-lightest, text-warning-lightest, border-warning-lightest and outline-warning-lightest. |
| --warning-lighter | CSS color token | warning | Used by bg-warning-lighter, text-warning-lighter, border-warning-lighter and outline-warning-lighter. |
| --warning-light | CSS color token | warning | Used by bg-warning-light, text-warning-light, border-warning-light and outline-warning-light. |
| --warning | CSS color token | warning | Used by bg-warning, text-warning, border-warning and outline-warning. |
| --warning-dark | CSS color token | warning | Used by bg-warning-dark, text-warning-dark, border-warning-dark and outline-warning-dark. |
| --warning-darker | CSS color token | warning | Used by bg-warning-darker, text-warning-darker, border-warning-darker and outline-warning-darker. |
| --warning-darkest | CSS color token | warning | Used by bg-warning-darkest, text-warning-darkest, border-warning-darkest and outline-warning-darkest. |
| --danger-lightest | CSS color token | danger | Used by bg-danger-lightest, text-danger-lightest, border-danger-lightest and outline-danger-lightest. |
| --danger-lighter | CSS color token | danger | Used by bg-danger-lighter, text-danger-lighter, border-danger-lighter and outline-danger-lighter. |
| --danger-light | CSS color token | danger | Used by bg-danger-light, text-danger-light, border-danger-light and outline-danger-light. |
| --danger | CSS color token | danger | Used by bg-danger, text-danger, border-danger and outline-danger. |
| --danger-dark | CSS color token | danger | Used by bg-danger-dark, text-danger-dark, border-danger-dark and outline-danger-dark. |
| --danger-darker | CSS color token | danger | Used by bg-danger-darker, text-danger-darker, border-danger-darker and outline-danger-darker. |
| --danger-darkest | CSS color token | danger | Used by bg-danger-darkest, text-danger-darkest, border-danger-darkest and outline-danger-darkest. |
| --default-lightest | CSS color token | default | Used by bg-default-lightest, text-default-lightest, border-default-lightest and outline-default-lightest. |
| --default-lighter | CSS color token | default | Used by bg-default-lighter, text-default-lighter, border-default-lighter and outline-default-lighter. |
| --default-light | CSS color token | default | Used by bg-default-light, text-default-light, border-default-light and outline-default-light. |
| --default | CSS color token | default | Used by bg-default, text-default, border-default and outline-default. |
| --default-dark | CSS color token | default | Used by bg-default-dark, text-default-dark, border-default-dark and outline-default-dark. |
| --default-darker | CSS color token | default | Used by bg-default-darker, text-default-darker, border-default-darker and outline-default-darker. |
| --default-darkest | CSS color token | default | Used by bg-default-darkest, text-default-darkest, border-default-darkest and outline-default-darkest. |

---

Source: ./fonts.html.md

## Fonts

Font size, style, weight, transform, line-height and alignment utilities.

### Composed typography

Dragonglass typography utility preview.

```html
<p class="text-base italic font-light capitalize text-justify leading-loose">Dragonglass typography utility preview.</p>
```

### Font sizes

text-2xs (0.75rem)

text-xs (0.8rem)

text-sm (0.9rem)

text-base (1rem)

text-lg (1.25rem)

text-xl (1.5rem)

text-2xl (1.965rem)

text-3xl (2.25rem)

text-4xl (3rem)

text-5xl (3.75rem)

text-6xl (4.5rem)

```html
<p class="text-2xs">text-2xs (0.75rem)</p>
<p class="text-xs">text-xs (0.8rem)</p>
<p class="text-sm">text-sm (0.9rem)</p>
<p class="text-base">text-base (1rem)</p>
<p class="text-lg">text-lg (1.25rem)</p>
<p class="text-xl">text-xl (1.5rem)</p>
<p class="text-2xl">text-2xl (1.965rem)</p>
<p class="text-3xl">text-3xl (2.25rem)</p>
<p class="text-4xl">text-4xl (3rem)</p>
<p class="text-5xl">text-5xl (3.75rem)</p>
<p class="text-6xl">text-6xl (4.5rem)</p>
```

### Style, weight and layout utilities

#### Styles

normal-style

italic

oblique

#### Weights

font-thin

font-extralight

font-light

font-normal

font-medium

font-semibold

font-bold

font-extrabold

font-black

#### Text transforms

normal-case

capitalize

uppercase

lowercase

#### Line heights

leading-none

leading-tight

leading-snug

leading-normal

leading-relaxed

leading-loose

#### Alignment

text-left

text-right

text-center

text-justify

Typography utilities

```html
<p class="font-semibold leading-relaxed text-left">Typography utilities</p>
```

### Typography API

**Typography utilities and tokens**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| text-2xs | Font size utility | 0.75rem | Uses --font-size-2xs. |
| text-xs | Font size utility | 0.8rem | Uses --font-size-xs. |
| text-sm | Font size utility | 0.9rem | Uses --font-size-sm. |
| text-base | Font size utility | 1rem | Uses --font-size-base. |
| text-lg | Font size utility | 1.25rem | Uses --font-size-lg. |
| text-xl | Font size utility | 1.5rem | Uses --font-size-xl. |
| text-2xl | Font size utility | 1.965rem | Uses --font-size-2xl. |
| text-3xl | Font size utility | 2.25rem | Uses --font-size-3xl. |
| text-4xl | Font size utility | 3rem | Uses --font-size-4xl. |
| text-5xl | Font size utility | 3.75rem | Uses --font-size-5xl. |
| text-6xl | Font size utility | 4.5rem | Uses --font-size-6xl. |
| normal-style \| italic \| oblique | Font style utility | normal-style | Sets the font-style property. |
| font-thin through font-black | Font weight utility | font-normal (400) | Sets numeric weights from 100 through 900. |
| normal-case \| capitalize \| uppercase \| lowercase | Text transform utility | normal-case | Changes visual casing without changing source text. |
| leading-none through leading-loose | Line height utility | leading-normal (1.5) | Sets line height from 1 through 2. |
| text-left \| text-right \| text-center \| text-justify | Text alignment utility | Browser direction | Sets physical text alignment. |

---

Source: ./themes/default.html.md

## Default theme

Preview the Default theme in light mode across semantic colors, components, and interactive states.

### Browse light themes

 [Default](/dragonglass/themes/default.html.md)  [Indigo](/dragonglass/themes/indigo.html.md)  [Violet](/dragonglass/themes/violet.html.md)  [Magenta](/dragonglass/themes/magenta.html.md)  [Ruby](/dragonglass/themes/ruby.html.md)  [Amber](/dragonglass/themes/amber.html.md)  [Moss](/dragonglass/themes/moss.html.md)  [Emerald](/dragonglass/themes/emerald.html.md)  [Teal](/dragonglass/themes/teal.html.md)  [Ocean](/dragonglass/themes/ocean.html.md)  [Graphite](/dragonglass/themes/graphite.html.md)  [Stone](/dragonglass/themes/stone.html.md)

### Browse dark themes

 [Default](/dragonglass/themes/dark/default.html.md)  [Indigo](/dragonglass/themes/dark/indigo.html.md)  [Violet](/dragonglass/themes/dark/violet.html.md)  [Magenta](/dragonglass/themes/dark/magenta.html.md)  [Ruby](/dragonglass/themes/dark/ruby.html.md)  [Amber](/dragonglass/themes/dark/amber.html.md)  [Moss](/dragonglass/themes/dark/moss.html.md)  [Emerald](/dragonglass/themes/dark/emerald.html.md)  [Teal](/dragonglass/themes/dark/teal.html.md)  [Ocean](/dragonglass/themes/dark/ocean.html.md)  [Graphite](/dragonglass/themes/dark/graphite.html.md)  [Stone](/dragonglass/themes/dark/stone.html.md)

### Background and text colors

Each semantic color includes lightest, lighter, light, base, dark, darker and darkest tokens. White and black remain the global contrast extremes.

```html
<div class="bg-primary p-3">Primary background</div>
<p class="text-primary-dark">Primary dark text</p>
```

### Transparent backgrounds

These utilities change only the background color and preserve the current text color.

```html
<div class="bg-transparent p-3">Transparent background</div>
<div class="bg-scrim text-white p-3">Scrim background</div>
<div class="bg-media-scrim text-white p-3">Media scrim background</div>
```

### Buttons by color

```html
<button type="button" class="bg-primary">primary</button>
<button type="button" class="bg-accent">accent</button>
<button type="button" class="bg-info">info</button>
<button type="button" class="bg-success">success</button>
<button type="button" class="bg-warning">warning</button>
<button type="button" class="bg-danger">danger</button>
<button type="button" class="bg-default">default</button>
```

### Form fields by color

```html
<fieldset data-field="primary">
  <label for="primary-field">primary field</label>
  <input id="primary-field" name="primary-field" type="text" aria-describedby="primary-field-help">
  <small id="primary-field-help">Uses the primary theme color.</small>
</fieldset>
<fieldset data-field="accent">
  <label for="accent-field">accent field</label>
  <input id="accent-field" name="accent-field" type="text" aria-describedby="accent-field-help">
  <small id="accent-field-help">Uses the accent theme color.</small>
</fieldset>
<fieldset data-field="info">
  <label for="info-field">info field</label>
  <input id="info-field" name="info-field" type="text" aria-describedby="info-field-help">
  <small id="info-field-help">Uses the info theme color.</small>
</fieldset>
<fieldset data-field="success">
  <label for="success-field">success field</label>
  <input id="success-field" name="success-field" type="text" aria-describedby="success-field-help">
  <small id="success-field-help">Uses the success theme color.</small>
</fieldset>
<fieldset data-field="warning">
  <label for="warning-field">warning field</label>
  <input id="warning-field" name="warning-field" type="text" aria-describedby="warning-field-help">
  <small id="warning-field-help">Uses the warning theme color.</small>
</fieldset>
<fieldset data-field="danger">
  <label for="danger-field">danger field</label>
  <input id="danger-field" name="danger-field" type="text" aria-describedby="danger-field-help">
  <small id="danger-field-help">Uses the danger theme color.</small>
</fieldset>
<fieldset data-field="default">
  <label for="default-field">default field</label>
  <input id="default-field" name="default-field" type="text" aria-describedby="default-field-help">
  <small id="default-field-help">Uses the default theme color.</small>
</fieldset>
```

### Interactive color states

```html
<button type="button" class="bg-primary-dark hover:bg-primary active:bg-primary-light">Background states</button>
<input aria-label="Color focus example" class="p-3 text-primary-dark focus:text-primary" value="Focus this field">
```

### Compile a theme from one color

The Sass theme module derives every semantic family, weight, foreground and progress color from one opaque primary. Every base uses its lightest family token as foreground. The compiler accepts an OKLCH primary lightness from 42% through 56% and a contrast ratio of at least 4.5:1 for that pair. The compiled theme loads after `dragonglass.css`.

```scss
@use "pkg:dragonglass/theme" as dragonglass;

:root {
  @include dragonglass.tokens(#7c3aed);
}
```

```sh
bunx sass --pkg-importer=node theme.scss theme.css --style=compressed
```

A theme selector around each mixin call lets one stylesheet contain several themes.

```scss
@use "pkg:dragonglass/theme" as dragonglass;

[data-theme="violet"] {
  @include dragonglass.tokens(#7c3aed);
}

[data-theme="forest"] {
  @include dragonglass.tokens(#167c55);
}
```

### Automatic dark mode

Each theme derives dark structural roles from the same primary and follows `prefers-color-scheme` automatically. The `data-color-scheme` attribute on the root element forces light or dark mode.

```html
<html data-color-scheme="dark"></html>
```

### Color tokens

Semantic custom properties expose token values directly as an alternative to generated color utility classes.

```html
<div style="background-color: var(--primary); color: var(--primary-darker)">
  Primary token preview
</div>
```

**Semantic color custom properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| --primary-lightest | CSS color token | primary | Used by bg-primary-lightest, text-primary-lightest, border-primary-lightest and outline-primary-lightest. |
| --primary-lighter | CSS color token | primary | Used by bg-primary-lighter, text-primary-lighter, border-primary-lighter and outline-primary-lighter. |
| --primary-light | CSS color token | primary | Used by bg-primary-light, text-primary-light, border-primary-light and outline-primary-light. |
| --primary | CSS color token | primary | Used by bg-primary, text-primary, border-primary and outline-primary. |
| --primary-dark | CSS color token | primary | Used by bg-primary-dark, text-primary-dark, border-primary-dark and outline-primary-dark. |
| --primary-darker | CSS color token | primary | Used by bg-primary-darker, text-primary-darker, border-primary-darker and outline-primary-darker. |
| --primary-darkest | CSS color token | primary | Used by bg-primary-darkest, text-primary-darkest, border-primary-darkest and outline-primary-darkest. |
| --accent-lightest | CSS color token | accent | Used by bg-accent-lightest, text-accent-lightest, border-accent-lightest and outline-accent-lightest. |
| --accent-lighter | CSS color token | accent | Used by bg-accent-lighter, text-accent-lighter, border-accent-lighter and outline-accent-lighter. |
| --accent-light | CSS color token | accent | Used by bg-accent-light, text-accent-light, border-accent-light and outline-accent-light. |
| --accent | CSS color token | accent | Used by bg-accent, text-accent, border-accent and outline-accent. |
| --accent-dark | CSS color token | accent | Used by bg-accent-dark, text-accent-dark, border-accent-dark and outline-accent-dark. |
| --accent-darker | CSS color token | accent | Used by bg-accent-darker, text-accent-darker, border-accent-darker and outline-accent-darker. |
| --accent-darkest | CSS color token | accent | Used by bg-accent-darkest, text-accent-darkest, border-accent-darkest and outline-accent-darkest. |
| --info-lightest | CSS color token | info | Used by bg-info-lightest, text-info-lightest, border-info-lightest and outline-info-lightest. |
| --info-lighter | CSS color token | info | Used by bg-info-lighter, text-info-lighter, border-info-lighter and outline-info-lighter. |
| --info-light | CSS color token | info | Used by bg-info-light, text-info-light, border-info-light and outline-info-light. |
| --info | CSS color token | info | Used by bg-info, text-info, border-info and outline-info. |
| --info-dark | CSS color token | info | Used by bg-info-dark, text-info-dark, border-info-dark and outline-info-dark. |
| --info-darker | CSS color token | info | Used by bg-info-darker, text-info-darker, border-info-darker and outline-info-darker. |
| --info-darkest | CSS color token | info | Used by bg-info-darkest, text-info-darkest, border-info-darkest and outline-info-darkest. |
| --success-lightest | CSS color token | success | Used by bg-success-lightest, text-success-lightest, border-success-lightest and outline-success-lightest. |
| --success-lighter | CSS color token | success | Used by bg-success-lighter, text-success-lighter, border-success-lighter and outline-success-lighter. |
| --success-light | CSS color token | success | Used by bg-success-light, text-success-light, border-success-light and outline-success-light. |
| --success | CSS color token | success | Used by bg-success, text-success, border-success and outline-success. |
| --success-dark | CSS color token | success | Used by bg-success-dark, text-success-dark, border-success-dark and outline-success-dark. |
| --success-darker | CSS color token | success | Used by bg-success-darker, text-success-darker, border-success-darker and outline-success-darker. |
| --success-darkest | CSS color token | success | Used by bg-success-darkest, text-success-darkest, border-success-darkest and outline-success-darkest. |
| --warning-lightest | CSS color token | warning | Used by bg-warning-lightest, text-warning-lightest, border-warning-lightest and outline-warning-lightest. |
| --warning-lighter | CSS color token | warning | Used by bg-warning-lighter, text-warning-lighter, border-warning-lighter and outline-warning-lighter. |
| --warning-light | CSS color token | warning | Used by bg-warning-light, text-warning-light, border-warning-light and outline-warning-light. |
| --warning | CSS color token | warning | Used by bg-warning, text-warning, border-warning and outline-warning. |
| --warning-dark | CSS color token | warning | Used by bg-warning-dark, text-warning-dark, border-warning-dark and outline-warning-dark. |
| --warning-darker | CSS color token | warning | Used by bg-warning-darker, text-warning-darker, border-warning-darker and outline-warning-darker. |
| --warning-darkest | CSS color token | warning | Used by bg-warning-darkest, text-warning-darkest, border-warning-darkest and outline-warning-darkest. |
| --danger-lightest | CSS color token | danger | Used by bg-danger-lightest, text-danger-lightest, border-danger-lightest and outline-danger-lightest. |
| --danger-lighter | CSS color token | danger | Used by bg-danger-lighter, text-danger-lighter, border-danger-lighter and outline-danger-lighter. |
| --danger-light | CSS color token | danger | Used by bg-danger-light, text-danger-light, border-danger-light and outline-danger-light. |
| --danger | CSS color token | danger | Used by bg-danger, text-danger, border-danger and outline-danger. |
| --danger-dark | CSS color token | danger | Used by bg-danger-dark, text-danger-dark, border-danger-dark and outline-danger-dark. |
| --danger-darker | CSS color token | danger | Used by bg-danger-darker, text-danger-darker, border-danger-darker and outline-danger-darker. |
| --danger-darkest | CSS color token | danger | Used by bg-danger-darkest, text-danger-darkest, border-danger-darkest and outline-danger-darkest. |
| --default-lightest | CSS color token | default | Used by bg-default-lightest, text-default-lightest, border-default-lightest and outline-default-lightest. |
| --default-lighter | CSS color token | default | Used by bg-default-lighter, text-default-lighter, border-default-lighter and outline-default-lighter. |
| --default-light | CSS color token | default | Used by bg-default-light, text-default-light, border-default-light and outline-default-light. |
| --default | CSS color token | default | Used by bg-default, text-default, border-default and outline-default. |
| --default-dark | CSS color token | default | Used by bg-default-dark, text-default-dark, border-default-dark and outline-default-dark. |
| --default-darker | CSS color token | default | Used by bg-default-darker, text-default-darker, border-default-darker and outline-default-darker. |
| --default-darkest | CSS color token | default | Used by bg-default-darkest, text-default-darkest, border-default-darkest and outline-default-darkest. |