# RevaCSS 2.0.0: AI reference

Source: http://revacss.eristavi.org/ai/guide.md

# Using RevaCSS with AI

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

RevaCSS is an HTML/CSS-first framework with a zero-JavaScript core. Use native HTML, a small set of documented component classes and inherited data attributes. Start with working markup and adapt it to the project.

This guide is for people building with an AI assistant and for agents given this file as project context. Follow the user's instructions and the project's existing workflow. This file describes RevaCSS usage; it does not authorize publishing, installing tools or running tests.

## Give your assistant the right context

Tell your assistant to use RevaCSS explicitly. Give it the current documentation index at `/llms.txt` under the documentation site's base path, then the relevant Markdown reference pages listed there. For GitHub Pages, that base path is `/RevaCSS/`.

The generated `/ai/api.json` contains the package version, exact supported attribute values, component contracts and HTML examples. `/ai/html-custom-data.json` provides attribute descriptions and value suggestions for compatible HTML editors. `/llms-full.txt` combines the guide and generated reference; it is large, so prefer individual pages when only one component is needed.

Use the version shown in the reference. Consult the getting-started guide for a published download or npm package. Do not assume the newest source version is already available on npm, invent a CDN URL or mix files from different releases.

## Start with a complete page

Download the compiled starter from the release linked in the getting-started guide. Put this document beside its `dist` directory. The generated global stylesheet works without a package manager or CSS build step.

```html
<!doctype html>
<html lang="en" data-theme="auto" data-palette="default">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My RevaCSS project</title>
    <link rel="stylesheet" href="dist/reva.css">
  </head>
  <body>
    <main class="container">
      <h1>Your projects</h1>
      <article class="card">
        <h2>First project</h2>
        <p>A clear starting point for your work.</p>
        <form action="/projects" method="post">
          <div class="form-group">
            <label for="project-name">Project name</label>
            <input id="project-name" name="name" required>
          </div>
          <button type="submit">Create project</button>
        </form>
      </article>
    </main>
  </body>
</html>
```

The form destination above is a placeholder: replace it with your application's real endpoint. RevaCSS styles the form; your application handles saving the project.

## Configure shared defaults

For an application-defined component, read the [custom-component guide](https://eristavi.github.io/RevaCSS/guide/custom-components/) or the generated `/ai/custom-components.md` reference under the documentation site's base path. Reuse existing hooks when appropriate, consume public tokens and keep application classes separate from the framework API. Colour-token inheritance alone does not apply materials to arbitrary elements. The complete starter adds no browser JavaScript and is a documentation example, not a new shipped core component.

Built-in palettes are `default` and `mono` only. Custom palettes remain ordinary CSS. Veil surface and button materials are deprecated and retained for existing sites; avoid them in new interfaces.

Put shared appearance settings on `html`, or on a documented local boundary when only one section should change. Add local overrides only for intentional exceptions.

```html
<html lang="en"
      data-theme="auto"
      data-palette="mono"
      data-shape="rounded"
      data-density="comfortable">
```

Use `data-theme="auto"` for the system preference. Use `data-shape` for corner shape. Read the generated attribute reference for the exact values and scope of each option; a setting affects its supported targets, not every HTML element.

Start with one complete global or scoped build. The scoped build uses a `.reva` boundary. Load matching optional extensions after that build. Glass, Veil, Soft UI and independent button materials require their respective extension files. Preserve reduced-motion, forced-colour and contrast fallbacks.

For colours, shapes and spacing, prefer existing attributes and documented public tokens. Use ordinary application CSS for page composition or custom styling beyond those options. Never promise an effect just because an attribute name sounds plausible.

## Preserve component contracts

- Use a native `button` for actions and `a.button` for destinations. Native controls do not need an invented button class.
- Use labelled native inputs, selects, textareas, fieldsets and legends. Keep names, values, validation and form destinations meaningful.
- Use `details` and `summary` for documented disclosures. Native popovers need unique IDs and matching `popovertarget` values.
- Copy the full documented structure for navigation, drawers and radio-selected panels. Do not replace it with markup from another framework.
- Radio-selected content is not an ARIA tabs widget. A native popover drawer is not a modal dialog or focus trap.
- Keep IDs and radio-group names unique when combining examples. Replace demonstration links and sample data with real project content.
- Follow the required styling dependencies listed in the component reference. Individual component files are not independent behaviour packages.

Read a component's Markdown page before generating its markup. The page includes its hook, states, styling module, behaviour limits and existing examples. For a complex navbar, consult the full top-menu documentation or a complete demo's source.

## Connect application behaviour

CSS supplies appearance and supported native interactions. Your application supplies data, search, sorting, authentication, form processing, payments, persistent state and real-time updates.

Add application JavaScript where the product requires it. Keep that code separate from the zero-JavaScript CSS core. The documentation's optional appearance customizer is a demo helper, not a runtime dependency for ordinary RevaCSS pages.

Use progressive enhancement for modern CSS. Follow the documented browser support and fallbacks. Do not claim accessibility certification or physical-device validation from generated markup alone.

## Prompts you can adapt

**Build a landing page:** “Use RevaCSS and its current AI reference to create a responsive HTML landing page. Use native HTML, shared appearance attributes and documented component structures. Include pricing, an FAQ and a labelled contact form. Identify the form endpoint I need to connect.”

**Adapt a demo:** “Start from the RevaCSS shop demo. Preserve its native navigation and component markup. Replace the fictional products with my catalogue, use the mono palette and keep system light/dark mode. Show where product data and checkout should connect.”

**Change the appearance:** “Update my RevaCSS page to use the default palette and a spacious density through shared settings. Preserve local semantic states and accessibility fallbacks. Use only values supported by the current reference.”

**Review generated code:** “Compare this page with the RevaCSS component contracts. Flag unsupported attributes, missing extensions, duplicate IDs, placeholder destinations and missing labels. Follow my project's instructions about when to run tests.”

## Workflow for agents

1. Read the installed package version and the matching RevaCSS reference.
2. Select the relevant component pages and existing demo sources.
3. Choose global or scoped CSS and the required extensions.
4. Generate meaningful HTML, then apply shared defaults and intentional local overrides.
5. Connect the application's behaviour without changing the framework's core contract.
6. Review the result and report its limitations. Run tests only when the user or project workflow authorizes them; when deferred, say they have not been run.

The text reference is generated from the documentation's component contracts, examples, public tokens and option manifest on each documentation build. It helps agents look up the supported API; it does not guarantee that an AI service will discover or read it automatically.

## Unreleased source additions

The current documentation preview includes additions not yet in the published 1.2.1 packages. Do not assume these classes exist in that npm/GitHub release. Tests for the additions are deferred.

- Put `.responsive` on a separate, full-width wrapper inside a sized parent. Descendant `.grid.cols-2`/`.grid.cols-3`, toolbars, card footer rows and navigation rails adapt to that wrapper. Do not put containment on a subgrid card. Viewport/intrinsic fallbacks remain.
- Use native `dir="rtl"` and `lang` for RTL pages, and `dir="auto"` or `bdi` for mixed user content. Do not reverse DOM order or mirror every icon.
- Use `.visually-hidden` for necessary accessible labels. Focusable content using it is revealed on keyboard focus. Decorative content still needs `aria-hidden` where appropriate.
- Print utilities: `.no-print` hides, `.print-only` reveals and `.print-links` appends HTTP(S) destinations on paper. These are opt-in; ordinary link styling does not append URLs.
- Required status and error explanations are visible HTML text. Applications supply validation messages and state; CSS does not compute range outputs or replace native pickers.


---

Source: http://revacss.eristavi.org/ai/custom-components.md

# Building custom components

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

RevaCSS supplies shared appearance settings. Your application can add its own components using native HTML, documented theme tokens and existing component hooks. A custom component is application code; it does not need to become a framework module.

This contract describes how to extend the current API. The starter is a documentation example, not a new core component or a completed accessibility acceptance record. Browser and device checks for this addition remain deferred.

## The extension contract

1. **Use native structure and behaviour.** Choose headings, lists, links, forms, buttons and details/summary according to their purpose. A class supplies styling, not keyboard behaviour or an accessible name.
2. **Inherit appearance.** Put shared settings on `html` or a parent section. Do not install a new palette or repeat the theme on every instance unless that instance needs an explicit exception.
3. **Consume documented tokens.** Use text tokens for text, surface tokens for surfaces and matching foreground tokens for filled actions. Avoid hardcoded light/dark colours in reusable component CSS.
4. **Reuse a surface hook when it fits.** Extend `.card` for a card-like component. Keep its surface, border, radius and shadow rules intact to retain supported materials and preference fallbacks.
5. **Keep extensions local.** Name application classes and custom properties for their purpose, such as `.project-summary` and `--project-summary-title-size`. Do not add undocumented `data-*` options or redefine the framework's API for one component.
6. **Preserve usability.** Let content wrap and controls remain native. Keep visible focus, meaningful labels and state text. Document application-owned behaviour and validate applicable acceptance gates before claiming production readiness.

## Tokens to use

| Purpose | Tokens | Usage |
| --- | --- | --- |
| Page and surfaces | `--re-bg`, `--re-surface`, `--re-surface-alt` | Choose by semantic purpose. Reuse `.card` when you need material support. |
| Text and links | `--re-text`, `--re-muted`, `--re-link` | Supporting text uses muted; links use link. Let native links retain their focus styling. |
| Boundaries | `--re-line`, `--re-control-line` | Surface separation and interactive-control boundaries are different roles. |
| Primary action | `--re-primary`, `--re-primary-end`, `--re-on-primary` | Replace the two fill stops and readable foreground together. Prefer the existing native button styling. |
| Status fills | `--re-success`, `--re-warning`, `--re-danger` | Pair each fill with its matching `--re-on-*` foreground; add visible status text. These are not general text colours. |
| Geometry | `--re-space`, `--re-radius`, `--re-button-radius` | Consume only what the component needs; keep content height intrinsic. |
| Typography | `--re-font`, `--re-font-heading` | Native text already inherits the framework fonts. Heading font falls back to the body font. |

The [public token reference](https://eristavi.github.io/RevaCSS/reference/tokens/) lists the full documented set. Tokens such as `--re-action-start` used inside the framework's action rules are implementation details, not extension hooks.

## Start with an existing surface

The starter extends `.card` with `.project-summary`. The card owns background, border, shape, elevation and material. The application stylesheet adds a small content layout and supporting text.

```html
<article class="card stack project-summary" aria-labelledby="project-title">
  <p class="project-summary-label">Website project</p>
  <h3 id="project-title" class="project-summary-title">Your next interface</h3>
  <p>Build a custom component once and inherit its appearance.</p>
  <dl class="project-summary-meta">
    <div><dt>Status</dt><dd>Ready for review</dd></div>
    <div><dt>Owner</dt><dd>Design team</dd></div>
  </dl>
  <a href="/projects/interface/">Open project</a>
</article>
```

Replace the example destination with your real route. Make `project-title` unique for each instance and choose the heading level appropriate to the document. If the component includes form fields, also make label/control IDs unique; use a separate radio-group name for each independent group.

```css
.project-summary > .project-summary-label {
  color: var(--re-muted);
  font-size: .875em;
}

.project-summary > .project-summary-title {
  font-size: var(--project-summary-title-size, 1.4em);
}
```

Load application CSS after the matching framework files. The complete stylesheet and HTML starter are in `examples/custom-components.css` and `examples/custom-components.html`. From a source checkout, run the documented CSS build and open the example. For a downloaded starter, put the HTML and extension CSS beside your `dist/` directory as described on the online guide.

## Appearance and local overrides

The exact colour-mode values are `data-theme="light"`, `data-theme="dark"` and `data-theme="auto"`. Auto follows the operating-system preference. `data-palette` selects the colour family; `data-accent` changes the primary action colours, not the complete palette. Shape, density and materials are separate settings.

```html
<section data-theme="dark" data-palette="default" data-shape="rounded">
  <article class="card stack project-summary">
    <h3 class="project-summary-title">Inherited dark Default</h3>
    <p>Shared settings reach the existing surface and native content.</p>
  </article>
  <section data-theme="light">
    <article class="card stack project-summary">
      <h3 class="project-summary-title">Local light Default</h3>
      <p>Only the colour mode changes. The palette and shape still inherit.</p>
    </article>
  </section>
</section>
```

Override an application property on the instance when needed, for example `style="--project-summary-title-size: 1.6em"`. A local custom property inherits into descendants; choose a distinct component name or explicitly reset it if nested instances should use different values.

For an existing site, use `reva.scoped.css` instead of the global build and keep the component inside `.reva`. Put shared configuration and token overrides on that boundary or inside it; the boundary installs its own defaults. Application selectors still need their own boundary if they must not affect matching classes elsewhere. CSS scoping is not Shadow DOM isolation.

## Custom palettes and materials

Use **Customize → Colours → Palette → Custom** to define a palette with separate light and dark colours. Export its CSS and load it after RevaCSS. Use the exported `data-palette="custom"` name, or rename both the stylesheet selector and the HTML value to your brand name.

Keep the exported `@layer re.tokens` wrapper and the three `--re-palette-*` aliases for muted text, links and control borders. They allow material and accessibility rules to take priority. An unlayered colour override can outrank those rules. Define both modes and check all relevant foreground/background pairs, including both gradient endpoints. Contrast feedback is guidance; translucent surfaces still need review in their actual surroundings.

`data-material` styles documented targets. An arbitrary `.project-summary` element does **not** automatically acquire Glass, Veil or Soft UI just because it consumes colour tokens. The starter also uses `.card`, so it receives that hook's supported surface treatments. Load the corresponding optional stylesheet after the core. Use `data-material="solid"` for a local reset of an inherited material.

If you design a new surface without an existing hook, you own its material styling and its reduced-transparency, forced-colours, increased-contrast and print fallbacks. Do not copy private material variables into an extension and treat them as a stable API.

## Behaviour, preferences and compatibility

Use native controls for disabled, checked, required and disclosure states. Keep state text alongside colour. `aria-disabled="true"` alone does not stop an action; an application must implement the corresponding behaviour. CSS does not save preferences, add components, fetch records or provide an ARIA widget's keyboard contract.

The starter adds no animations. If an extension adds motion, respect `data-motion="none"` and reduced-motion preferences, using the documented motion guidance. If it adds advanced CSS, start with a usable layout and gate optional enhancements with `@supports`; feature detection does not replace browser verification. RevaCSS's modern core has its own support boundary, so this is not a promise to support legacy browsers.

Before accepting an extension, review long and translated content, narrow parent containers, RTL, text enlargement, unique IDs across multiple instances, keyboard/focus behaviour and applicable states. Review both modes, chosen palettes/materials and accessibility preferences in the actual application. Follow [QUALITY_STANDARD.md](https://github.com/eristavi/RevaCSS/blob/main/QUALITY_STANDARD.md) and record deferred or unverified checks explicitly.

## Application responsibilities

An application can render or insert a component using this markup and preserve the same appearance contract. It owns component selection, data, permissions, destinations, form submissions and storage of user choices. It can update documented parent attributes when users change settings. Server-rendered preferences can also supply those attributes without browser JavaScript.

The RevaCSS core and this starter remain HTML/CSS-only. The documentation customizer is an optional site tool with its own JavaScript; it is not a runtime dependency for the exported component.

## Complete starter HTML

Save this document and its application stylesheet beside your matching `dist/` directory.

```html
<!doctype html>
<html lang="en" data-theme="auto" data-palette="default" data-shape="rounded">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Custom component starter · RevaCSS</title>
  <link rel="stylesheet" href="dist/reva.css">
  <link rel="stylesheet" href="dist/reva.glass.css">
  <link rel="stylesheet" href="custom-components.css">
</head>
<body id="page-top">
  <a class="skip-link" href="#main">Skip to content</a>
  <main id="main" class="container stack">
    <h1>One component, shared appearance</h1>
    <p>This application component reuses the card surface and native HTML. Change the settings on html to configure the inherited example; the local light and dark examples keep their explicit modes.</p>
    <section class="stack" aria-labelledby="inherited-heading">
      <h2 id="inherited-heading">Inherited appearance</h2>
      <article class="card stack project-summary" aria-labelledby="inherited-title">
        <p class="project-summary-label">Website project</p>
        <h3 id="inherited-title" class="project-summary-title">Your next interface</h3>
        <p>Build a custom component once and let its parent provide the appearance.</p>
        <dl class="project-summary-meta">
          <div><dt>Status</dt><dd>Ready for review</dd></div>
          <div><dt>Owner</dt><dd>Design team</dd></div>
        </dl>
        <div class="accordion">
          <details>
            <summary>Component notes</summary>
            <p>The card owns the surface. Custom CSS adds content layout and supporting text, without replacing material or focus styling.</p>
          </details>
        </div>
        <a href="#component-notes">Read the extension notes</a>
      </article>
    </section>
    <div class="grid">
      <section class="stack" data-theme="light" aria-labelledby="light-heading">
        <h2 id="light-heading">Local light mode</h2>
        <article class="card stack project-summary" aria-labelledby="light-title">
          <p class="project-summary-label">Website project</p>
          <h3 id="light-title" class="project-summary-title">Your next interface</h3>
          <p>The mode changes here; palette, shape and density still inherit.</p>
          <dl class="project-summary-meta">
            <div><dt>Status</dt><dd>Ready for review</dd></div>
            <div><dt>Owner</dt><dd>Design team</dd></div>
          </dl>
          <a href="#component-notes">Read the extension notes</a>
        </article>
      </section>
      <section class="stack" data-theme="dark" aria-labelledby="dark-heading">
        <h2 id="dark-heading">Local dark mode</h2>
        <article class="card stack project-summary" aria-labelledby="dark-title">
          <p class="project-summary-label">Website project</p>
          <h3 id="dark-title" class="project-summary-title">Your next interface</h3>
          <p>The same component and stylesheet work in either mode.</p>
          <dl class="project-summary-meta">
            <div><dt>Status</dt><dd>Ready for review</dd></div>
            <div><dt>Owner</dt><dd>Design team</dd></div>
          </dl>
          <a href="#component-notes">Read the extension notes</a>
        </article>
      </section>
    </div>
    <section class="stack" data-material="glass" aria-labelledby="glass-heading">
      <h2 id="glass-heading">Inherited glass material</h2>
      <article class="card stack project-summary" aria-labelledby="glass-title">
        <p class="project-summary-label">Website project</p>
        <h3 id="glass-title" class="project-summary-title">Your next interface</h3>
        <p>Glass applies to the existing card hook. Unsupported filtering and accessibility preferences use the material module's fallbacks.</p>
        <a href="#component-notes">Read the extension notes</a>
      </article>
    </section>
    <section id="component-notes" class="stack" aria-labelledby="notes-heading">
      <h2 id="notes-heading">Extension notes</h2>
      <p>Load custom-components.css after RevaCSS. Keep the component's card class to inherit material styling. Use unique heading IDs for every instance and replace these demonstration links with real application destinations.</p>
      <p>Change html's data-theme to light, dark or auto. Change data-palette to a documented palette, or load your exported custom palette after the framework. Adding components and saving preferences belong to your application.</p>
      <p>This is an HTML/CSS reference example. Browser, device and accessibility acceptance checks for this addition are deferred; a successful build does not establish conformance.</p>
      <a href="#page-top">Back to top</a>
    </section>
  </main>
</body>
</html>
```

## Application stylesheet

Save as `custom-components.css` beside the HTML.

```css
/* Application extension: load after the matching RevaCSS stylesheets.
   .card owns the surface, material, shape and preference fallbacks.
   These rules add only project-specific content styling. */
.project-summary {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.project-summary > .project-summary-label {
  color: var(--re-muted);
  font-size: .875em;
}

.project-summary > .project-summary-title {
  font-size: var(--project-summary-title-size, 1.4em);
}

.project-summary > .project-summary-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--re-space);
  margin: 0;
}

.project-summary-meta > div {
  min-inline-size: 0;
}

.project-summary-meta :where(dt, dd) {
  margin: 0;
  overflow-wrap: anywhere;
}

.project-summary-meta dt {
  font-size: .875em;
}
```


---

Source: http://revacss.eristavi.org/ai/attributes.md

# Attribute reference

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

## data-palette

Supported values: `default`, `mono`.

Default: default. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Coordinated page, surface, foreground, border, link and primary colours. Light/dark follows data-theme. Success, warning and error colours stay semantic.

## data-theme

Supported values: `auto`, `light`, `dark`.

Default: auto. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Page and component colour scheme: auto follows the visitor's preference.

## data-accent

Supported values: `blue`, `violet`, `teal`, `green`, `orange`, `rose`.

Default: Palette primary. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Primary actions, badges, alerts, native accent controls and checked switches. Links retain their theme colour. Explicit accents reset their foreground; omitted accents follow data-palette.

## data-shape

Supported values: `square`, `subtle`, `rounded`, `pill`, `custom`.

Default: rounded. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Styled controls, surfaces, navigation, media, code, choice labels, avatars and placeholders. Custom uses --re-custom-surface-radius, --re-custom-field-radius and --re-custom-action-radius (nonnegative lengths; .75rem defaults). Local presets reset all three groups.

## data-fill

Supported values: `gradient`, `solid`.

Default: gradient. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Button, badge and alert gradients; optional glass sheen. Does not change material.

## data-density

Supported values: `compact`, `comfortable`, `spacious`, `custom`.

Default: comfortable. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Control and surface padding, list and description spacing, card sections and layout spacing. Custom separates surface padding (--re-custom-surface-padding, 1rem), control padding multiplier (--re-custom-control-density, 1), and content spacing (--re-custom-content-space, 1rem). Minimum control heights are preserved; local presets reset all groups.

## data-depth

Supported values: `flat`, `subtle`, `pronounced`.

Default: subtle. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Action and surface shadows. Text-control inset shadows are configured with data-controls.

## data-motion

Supported values: `none`, `subtle`, `expressive`.

Default: subtle. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Action transitions, accordion expansion and chevron rotation (expressive adds a fade), press movement, decorative edges, custom spinners, switch transitions and skeleton shimmer. Reduced motion wins; native progress is browser-owned.

## data-type

Supported values: `compact`, `standard`, `large`.

Default: standard. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Page or subtree typography.

## data-border

Supported values: `subtle`, `defined`, `none`.

Default: subtle. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Styled control and surface borders, table rules and navigation boundaries. Invalid-state and forced-colour boundaries take priority.

## data-contrast

Supported values: `auto`, `more`.

Default: auto. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Foreground and boundary contrast; optional glass becomes opaque. System preferences retain their component-specific priority.

## data-tone

Supported values: `neutral`, `cool`, `warm`.

Default: Palette surfaces. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Override page and surface temperature without resetting the palette accent, links or foregrounds.

## data-controls

Supported values: `styled`, `minimal`.

Default: styled. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Text input, select and textarea backing and inset shadow.

## data-width

Supported values: `narrow`, `standard`, `wide`, `full`, `custom`.

Default: standard. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Page-container width. Narrow, Standard and Wide cap .container at 48rem, 75rem and 90rem. Full fills the parent with 1rem side padding. Custom uses --re-custom-max-width (75rem) and --re-custom-side-padding (1rem); max width includes padding, which is reduced in narrow containers. Local presets reset width/padding. Navbar width is configured separately.

## data-table

Supported values: `plain`, `striped`, `bordered`.

Default: plain. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Table stripes and grid lines; rule thickness follows data-border.

## data-size

Supported values: `small`, `medium`, `large`.

Default: medium. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Controls, menu actions, badges, alerts, accordion summaries, breadcrumbs, pagination, form labels, choice labels, spinners and avatars.

## data-ratio

Supported values: `auto`, `square`, `landscape`, `portrait`, `wide`.

Default: auto. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Image and video aspect ratio; auto retains natural proportions.

## data-fit

Supported values: `cover`, `contain`.

Default: cover. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Image, video and avatar content within constrained dimensions.

## data-gap

Supported values: `none`, `small`, `medium`, `large`.

Default: medium. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Spacing in .grid, .row, .stack, .accordion, .pagination, .tabs and .toolbar; combines with density.

## data-material

Supported values: `solid`, `glass`, `veil`, `soft`.

Deprecated values: `veil`. Retained for compatibility; avoid in new interfaces.

Default: solid. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Solid surfaces by default; optional Glass or Soft UI surfaces and actions use their matching extension. Veil is deprecated and retained for existing sites. Explicit material boundaries stop another inherited material.

## data-edge

Supported values: `plain`, `gradient`, `shine`, `animated`.

Default: plain. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Decorative borders on buttons, .button links and cards. Shine sweeps on interaction; animated turns continuously. Native action inputs keep regular borders.

## data-variant

Supported values: `primary`, `success`, `warning`, `danger`, `neutral`.

Default: primary. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Button, action-input, .button link, badge and alert semantic colour. Primary uses the inherited accent; local legacy button classes override inherited variants, while a valid action-level attribute takes precedence.

## data-appearance

Supported values: `tinted`, `solid`, `outline`.

Default: tinted. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to supported targets

Badge and alert backing and border treatment. Does not configure buttons.

## data-navbar

Supported values: `standard`, `centered`, `floating`, `split`.

Default: standard. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to .top-menu only

Top navigation layout: standard brand and links, centered links, inset floating surface, or central brand with links on either side. Mobile retains the shared Menu button and popovers. Does not change sidebars.

## data-navbar-position

Supported values: `static`, `sticky`.

Default: static. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to .navbar-header, standalone .top-menu and .app-shell > header

Static follows normal document flow. Sticky keeps the outer header at block-start of its scroll container; layout, palette and material remain independent. Put the wrapper in the scrolling page, outside short sections.

## data-navbar-spacing

Supported values: `flush`, `spaced`.

Default: spaced. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to .navbar-header and standalone .top-menu

Flush removes the wrapper gap and Floating margins so a sticky bar meets the safe top edge. Spaced adds wrapper breathing room, reduced on small screens, and retains Floating margins.

## data-navbar-width

Supported values: `contained`, `full`.

Default: contained. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; applies to .navbar-header and .top-menu

Contained follows the shared page width and navbar layout. Full fills its parent with a navbar surface while aligning its contents to the shared page width. Use a page-wide wrapper to reach both screen edges; app-shell toolbars retain their grid column.

## data-button-material

Supported values: `default`, `solid`, `glass`, `veil`, `soft`, `liquid`.

Deprecated values: `veil`. Retained for compatibility; avoid in new interfaces.

Default: default. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; native button/submit/reset actions and .button/.scroll-top links, excluding navigation toggles and dropdown controls

Optional button material extension. Default follows data-material at the action; explicit choices override general material for actions only. Liquid is transparent neutral glass without accent tint; movement follows data-motion. Veil is deprecated and retained for existing sites.

## data-font

Supported values: `manrope`, `system`.

Default: manrope. Omit the attribute to retain the default; a default description is not necessarily a valid literal value.

Scope: Inherited; page, section or individual text/control

Body text, headings and native controls. Manrope is the framework default with system-ui/sans-serif fallback; its font stylesheet is optional. System uses system-ui/sans-serif even when Manrope is loaded. A local preset resets this choice; code remains monospace and --re-font-heading remains an optional heading override.


---

Source: http://revacss.eristavi.org/ai/tokens.md

# Public CSS tokens

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

## --re-custom-max-width / --re-custom-side-padding

Group: Custom width. Value: Nonnegative length.

Maximum page width including padding (75rem default) and per-side padding (1rem default) with data-width=custom. Padding is capped in narrow parents.

## --re-container-width / --re-container-padding

Group: Layout. Value: Size / nonnegative length.

Container width/padding overrides used by Full and Custom; existing width presets reset both. Navbar width remains independent.

## --re-custom-surface-padding / --re-custom-content-space

Group: Custom density. Value: Nonnegative length.

Base surface padding and content gaps with data-density=custom; both default to 1rem. Cards scale surface padding by 1.5.

## --re-custom-control-density

Group: Custom density. Value: Nonnegative number.

Control-padding multiplier with data-density=custom; default 1. Minimum control heights remain independent.

## --re-surface-space

Group: Layout. Value: Nonnegative length.

Base surface padding; falls back to --re-space when omitted. Local density presets reset it.

## --re-custom-surface-radius / --re-custom-field-radius / --re-custom-action-radius

Group: Custom shape. Value: Nonnegative length.

Independent surface, field and action corners with data-shape=custom; .75rem defaults. Local presets reset all groups.

## --re-liquid-scale-x / --re-liquid-scale-y

Group: Liquid buttons. Value: Positive numbers.

Pressed expansion: subtle 1.025/1.015; expressive 1.045/1.02. Motion none and reduced motion suppress expansion.

## --re-liquid-blur

Group: Liquid buttons. Value: Nonnegative length.

Backdrop blur radius; default 14px. Accessibility preferences disable filtering.

## --re-liquid-opacity

Group: Liquid buttons. Value: Percentage.

Neutral backing; default 12%. The background remains visible through the glass. Review label contrast over custom backgrounds; preference fallbacks are opaque.

## --re-anchor-offset

Group: Scrolling. Value: Nonnegative length.

Gap above fragment destinations; default 1rem. Sticky navbar clearance is added separately; account for custom fixed headers yourself.

## --re-target-duration

Group: Scrolling. Value: Nonnegative time.

Expressive fragment highlight duration; default 1.4s. Does not set native scroll speed.

## --re-drawer-shift / --re-drawer-direction

Group: Overlay motion. Value: Length / 1 or -1.

Drawer entrance distance and inline-end/start direction. Direction defaults to 1.

## --re-popover-offset / --re-popover-scale

Group: Overlay motion. Value: Length / positive number.

Numeric expressive overlay translation and scale.

## --re-safe-top / --re-safe-right / --re-safe-bottom / --re-safe-left

Group: Viewport. Value: Nonnegative lengths.

Physical safe-area insets, defaulting to browser env() values. Used by full-height overlays and modal bounds.

## --re-gallery-width

Group: Gallery. Value: Positive length.

Maximum slide width; default 24rem, bounded by the scroll container.

## --re-reveal-distance

Group: Scroll motion. Value: Length.

Optional expressive card entrance distance; default .75rem.

## --re-view-duration

Group: Document transitions. Value: Nonnegative time.

Optional navigation transition duration; defaults to inherited --re-duration.

## --re-secondary / --re-secondary-end / --re-on-secondary

Group: Semantic colours. Value: Colours.

Secondary action fill, gradient endpoint and foreground.

## --re-success / --re-success-end / --re-on-success

Group: Semantic colours. Value: Colours.

Success fill, gradient endpoint and foreground.

## --re-warning / --re-warning-end / --re-on-warning

Group: Semantic colours. Value: Colours.

Warning fill, gradient endpoint and foreground.

## --re-danger / --re-danger-end / --re-on-danger

Group: Semantic colours. Value: Colours.

Danger fill, gradient endpoint and foreground.

## --re-secondary-link / --re-danger-link

Group: Semantic colours. Value: Colours.

Readable secondary and danger outline/ghost text.

## --re-chart-color

Group: Charts. Value: Colour.

Local SVG series stroke; defaults to the primary colour.

## --re-chart-ring-width

Group: Charts. Value: SVG user units.

Doughnut stroke width; default 22.

## --re-drawer-width

Group: Drawer. Value: Length.

Inspector width; default 28rem, customisable with ordinary CSS. Bounded by the viewport.

## --re-sidebar-width

Group: Application layout. Value: Length.

Sidebar and mobile drawer width; 16rem fallback, bounded by viewport.

## --re-navbar-height

Group: Navigation. Value: Nonnegative length.

Full header clearance for anchors and keyboard focus; fallback 6rem plus twice the Floating margin. Override for taller content; the optional demo helper measures it.

## --re-navbar-offset

Group: Navigation. Value: Nonnegative length.

Extra sticky block-start offset; default 0px, with the top safe area added separately.

## --re-navbar-space

Group: Navigation. Value: Nonnegative length.

Spaced header wrapper gap; default 1rem, capped at .5rem below 48rem. Flush removes it.

## --re-navbar-z

Group: Navigation. Value: Integer.

Sticky header stacking level; default 30. Native top-layer overlays remain above it.

## --re-navbar-width

Group: Navigation. Value: Length or percentage.

Layout width; standard 100%, floating min(100% - 2rem, page width). data-navbar-width=full overrides the surface width.

## --re-navbar-margin

Group: Navigation. Value: Length.

Layout block margin; standard 0, floating 1rem. data-navbar-spacing=flush removes it.

## --re-veil-opacity

Group: Veil (deprecated). Value: Percentage.

Surface backing; 94% default. Accessibility fallbacks use opaque backing.

## --re-veil-strength

Group: Veil (deprecated). Value: Number, 0–1.

Perimeter colour and contour strength; 1 default. More contrast removes decoration.

## --re-dropdown-width

Group: Navigation. Value: Length.

Standalone dropdown width; 18rem fallback, bounded by viewport

## --re-bg

Group: Palette. Value: Colour.

Page background

## --re-surface

Group: Palette. Value: Colour.

Opaque component surface

## --re-surface-alt

Group: Palette. Value: Colour.

Secondary surface

## --re-text

Group: Palette. Value: Colour.

Main foreground

## --re-muted

Group: Palette. Value: Colour.

Supporting foreground

## --re-link

Group: Palette. Value: Colour.

Link foreground

## --re-line

Group: Palette. Value: Colour.

Surface boundary

## --re-control-line

Group: Palette. Value: Colour.

Control boundary

## --re-primary / --re-primary-end

Group: Accent. Value: Colours.

Accent stops; override both together

## --re-on-primary

Group: Accent. Value: Colour.

Foreground for the accent fill

## --re-font

Group: Typography. Value: Font-family list.

Body and control font

## --re-font-heading

Group: Typography. Value: Font-family list.

Optional heading override; otherwise falls back to --re-font

## --re-radius / --re-field-radius / --re-button-radius

Group: Layout. Value: Length.

Surface, field and action roundness. Fields fall back to --re-radius.

## --re-space / --re-gap

Group: Layout. Value: Length.

Base spacing

## --re-container

Group: Layout. Value: Length or percentage.

Maximum container width; 75rem by default, 100% with Full

## --re-column

Group: Layout. Value: Length.

Auto-fit grid column target; 18rem fallback

## --re-prose

Group: Layout. Value: Length.

Readable content width; 65ch fallback

## --re-card-padding

Group: Layout. Value: Length.

Optional card padding override

## --re-glass-opacity

Group: Material. Value: Percentage.

Glass surfaces; 32% default

## --re-glass-button-opacity

Group: Material. Value: Percentage.

Glass actions and small surfaces; 90% default

## --re-glass-shadow

Group: Material. Value: Shadow list or none.

Glass elevation and rim shadows; follows shared data-depth

## --re-glass-filter

Group: Material. Value: Filter value.

blur(12px) saturate(145%) default

## --re-icon-size

Group: Assets. Value: Length.

Icon dimensions; 1.25em fallback

## --re-icon-stroke

Group: Assets. Value: Number.

SVG stroke width; 1.75 fallback

## --re-avatar-size

Group: Assets. Value: Length.

Avatar base size; 2.75rem fallback

## --re-skeleton-width / --re-skeleton-height

Group: Content. Value: Length or percentage.

Placeholder width/height; 100% / 1em fallbacks

## --re-description-label

Group: Content. Value: Length.

Description-list label column; 12rem fallback

## --re-menu-width

Group: Navigation. Value: Length.

Desktop panel width; 20rem fallback

## --re-menu-anchor

Group: Navigation. Value: CSS identifier.

Unique menu anchor; see complete menu markup


---

Source: http://revacss.eristavi.org/ai/files.md

# Stylesheet entry points

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Start with `dist/reva.css` or its minified equivalent. For an existing site that needs a local boundary, use `dist/reva.scoped.css` inside `.reva`. Do not combine the global and scoped complete builds.

Load matching optional extensions after the core: `reva.glass.css`, `reva.veil.css`, `reva.soft.css`, `reva.button-materials.css`, `reva.motion.css` and `reva.selects.css` as needed; scoped equivalents are listed below. Veil surface and button finishes are deprecated; their files and values remain for compatibility. Prefer Solid, Glass or Soft UI for new work. Fonts are optional; `reva-fonts.css` requires its adjacent fonts directory.

- `reva.css`
- `reva.tokens.css`
- `reva.base.css`
- `reva.components.css`
- `reva.badges.css`
- `reva.alerts.css`
- `reva.accordions.css`
- `reva.breadcrumbs.css`
- `reva.pagination.css`
- `reva.form-groups.css`
- `reva.loading.css`
- `reva.tabs.css`
- `reva.lists.css`
- `reva.empty-states.css`
- `reva.avatars.css`
- `reva.icons.css`
- `reva.switches.css`
- `reva.input-groups.css`
- `reva.skeletons.css`
- `reva.toolbars.css`
- `reva.description-lists.css`
- `reva.card-patterns.css`
- `reva.navigation.css`
- `reva.app-shell.css`
- `reva.drawers.css`
- `reva.timeline.css`
- `reva.steps.css`
- `reva.rating.css`
- `reva.calendar.css`
- `reva.message-thread.css`
- `reva.charts.css`
- `reva.navigation-rail.css`
- `reva.dropdowns.css`
- `reva.selects.css`
- `reva.selects.scoped.css`
- `reva.motion.css`
- `reva.motion.scoped.css`
- `reva.glass.css`
- `reva.glass.scoped.css`
- `reva.soft.css`
- `reva.soft.scoped.css`
- `reva.veil.css`
- `reva.veil.scoped.css`
- `reva.button-materials.css`
- `reva.button-materials.scoped.css`
- `reva.scoped.css`

Component module names identify styling dependencies. Prefer a complete build when you do not need a custom subset. Consult the [stylesheet reference](http://revacss.eristavi.org/reference/) for complete file descriptions.


---

Source: http://revacss.eristavi.org/ai/components/typography.md

# Typography

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Native HTML text elements receive their styling automatically. This page covers all six heading levels, body text, inline semantics, lists, quotations and technical notation, with the HTML beneath every example.

HTML documentation: http://revacss.eristavi.org/components/typography/

## Component contract

- Markup: Native headings, paragraphs, lists and inline text
- Options and states: None; choose semantic HTML.
- Styling module: reva.base.css
- Behaviour: Document structure comes from your markup.

- Choose an element for its meaning, rather than its visual size. Use a logical heading hierarchy and a clear page heading; no typography classes are required.
- The heading specimen uses a separate document so its h1–h6 examples do not interrupt the documentation page's own outline. Its palette follows the browser colour preference.
- Theme, font and data-type defaults inherit from the parent. data-size configures controls, not body text. The optional prose class limits reading width; it is not required for text styling.
- Some elements use RevaCSS styling and others preserve browser-native presentation. Semantic markup does not automatically add application behaviour or accessible explanations; expand abbreviations in text when needed.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### All six heading levels

h1 through h6 retain their native semantics and default styling. This isolated document has its own page heading; use levels according to the structure of your real content.

```html
<main class="container" style="padding: 1rem;">
  <h1>Heading 1 — Page title</h1>
  <h2>Heading 2 — Main section</h2>
  <h3>Heading 3 — Subsection</h3>
  <h4>Heading 4 — Detailed section</h4>
  <h5>Heading 5 — Supporting detail</h5>
  <h6>Heading 6 — Further detail</h6>
  <p>Heading levels express hierarchy, not a choice of font size.</p>
</main>
```

### Paragraphs and readable text

Paragraphs use the inherited font, colour and line height. The optional prose wrapper provides a readable maximum width.

```html
<div class="prose">
  <p>RevaCSS starts with ordinary HTML. Use paragraphs to organise related sentences into clear blocks of content.</p>
  <p>A new paragraph gives the next idea room to breathe. Shared typography settings apply without repeated classes.</p>
  <p><small>Supporting information: available features may vary by browser.</small></p>
</div>
```

### Importance, emphasis and visual annotation

strong expresses importance and em expresses stress. b draws attention, i distinguishes an alternate voice or term, u annotates, and s marks information that is no longer accurate.

```html
<p><strong>Important:</strong> save your changes before leaving.</p>
<p>This setting is <em>especially</em> useful for shared themes.</p>
<p>The keyword is <b>inheritance</b>.</p>
<p>The term <i lang="la">in situ</i> means in its original place.</p>
<p>Spelling annotation: <u>recieve</u> should be receive.</p>
<p><s>Registration closes on Friday.</s> Registration now closes on Monday.</p>
<p><mark>Highlighted for review:</mark> confirm the delivery date.</p>
```

### Links and supporting text

Use real destinations and meaningful link labels. Small print remains readable and is not a substitute for essential instructions.

```html
<p>Start with the <a href="__BASE__guide/">RevaCSS installation guide</a>.</p>
<p>For a local section, see <a href="#headings">all six heading levels</a>.</p>
<p><small>Terms apply to the current preview release.</small></p>
```

### Inserted and deleted content

Use ins and del to identify document edits. Their semantics differ from simply drawing a line through outdated text with s.

```html
<p>The meeting starts at <del datetime="2026-10-01">09:00</del> <ins datetime="2026-10-02">10:00</ins>.</p>
```

### Abbreviations and definitions

Expand abbreviations visibly on first use. The title attribute provides additional information but should not be the only explanation.

```html
<p>Cascading Style Sheets (<abbr title="Cascading Style Sheets">CSS</abbr>) controls presentation.</p>
<p><dfn>Inheritance</dfn> is the process by which supported styling values pass from a parent to its descendants.</p>
```

### Unordered, ordered and nested lists

Use ul when order is not meaningful and ol for sequences. Nest another list inside its parent li; native numbering options need no helper classes.

```html
<ul>
  <li>Light theme</li>
  <li>Dark theme
    <ul>
      <li>Solid surfaces</li>
      <li>Glass surfaces</li>
    </ul>
  </li>
</ul>
<ol>
  <li>Load the stylesheet</li>
  <li>Set shared defaults</li>
  <li>Add semantic HTML</li>
</ol>
<ol start="4">
  <li>Override local exceptions</li>
  <li>Review the result</li>
</ol>
```

### Terms and descriptions

Native dl, dt and dd express term/value associations. The separate description-list component is available when you need a responsive record layout.

```html
<dl>
  <dt>Theme</dt>
  <dd>The light, dark or system colour mode.</dd>
  <dt>Material</dt>
  <dd>The solid or glass surface treatment.</dd>
  <dt>Accent</dt>
  <dd>The shared highlight colour.</dd>
</dl>
```

### Block quotations, inline quotes and citations

blockquote contains a quotation, q marks an inline quotation, and cite names a work rather than a person's name. The text below is demonstration copy.

```html
<figure>
  <blockquote>
    <p>Good defaults leave room for your own decisions.</p>
  </blockquote>
  <figcaption>From <cite>A demonstration of semantic typography</cite>.</figcaption>
</figure>
<p>The example describes its approach as <q>native by design</q>.</p>
```

### Code, keyboard input, output and variables

code identifies code, kbd keyboard input, samp program output and var a variable. Escape angle brackets when showing HTML as text.

```html
<p>Set <code>data-theme="dark"</code> on your page.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The command reports <samp>Build complete.</samp></p>
<p>The rectangle area is <var>w</var> × <var>h</var>.</p>
<pre tabindex="0" aria-label="Example HTML"><code>&lt;button type="button"&gt;Save&lt;/button&gt;
&lt;p&gt;Your content stays in HTML.&lt;/p&gt;</code></pre>
```

### Subscripts and superscripts

sub and sup support conventional notation. Provide an understandable text explanation when a formula needs more context.

```html
<p>Water has the chemical formula H<sub>2</sub>O.</p>
<p>A square metre is written m<sup>2</sup>.</p>
<p>The expression x<sup>2</sup> means x squared.</p>
```

### Dates and machine-readable values

time supplies a machine-readable date or time; data associates visible text with an application value. CSS does not format dates or calculate values.

```html
<p>Published <time datetime="2026-10-02">2 October 2026</time>.</p>
<p>The call begins at <time datetime="15:30">15:30</time>.</p>
<p>Product: <data value="RV-001">RevaCSS starter</data>.</p>
```

### Contact information

address contains contact information for the relevant page or article. RevaCSS removes the default italic styling; use ordinary HTML links where appropriate.

```html
<address>
  RevaCSS project<br>
  <a href="https://github.com/eristavi/RevaCSS">Project repository and issue tracker</a>
</address>
```

### Thematic breaks and controlled line breaks

hr marks a thematic change, br creates a meaningful line break and wbr marks an optional wrapping opportunity. Use paragraphs and CSS spacing rather than repeated br elements.

```html
<p>The first topic ends here.</p>
<hr>
<p>A new topic begins here.</p>
<p>A two-line label:<br>Native HTML and CSS</p>
<p>An optional break: verylong<wbr>projectname<wbr>example</p>
```

### Language, direction and ruby annotations

Set language and direction where needed. bdi isolates text with an unknown direction; bdo deliberately overrides direction. Ruby annotations retain native browser presentation.

```html
<p lang="fr">Une interface claire et lisible.</p>
<p>Contributor: <bdi dir="auto" lang="he">עדי</bdi>.</p>
<p>Direction override demonstration: <bdo dir="rtl">ABC</bdo>.</p>
<p lang="ja"><ruby>東京<rp>（</rp><rt>とうきょう</rt><rp>）</rp></ruby></p>
```

### Inherited text scale and a local exception

data-type selects body typography scale. Configure a parent and override only exceptions; headings and paragraphs require no extra styling classes.

```html
<section data-type="large">
  <h3>A larger shared text scale</h3>
  <p>Headings and body text use the parent typography scale.</p>
  <section data-type="compact">
    <h4>A compact local section</h4>
    <p>Only this branch changes its text scale.</p>
  </section>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/layouts.md

# Cards and layouts

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Use a small set of layout classes. Grids adapt intrinsically; rows wrap; stacks arrange content vertically.

HTML documentation: http://revacss.eristavi.org/components/layouts/

## Component contract

- Markup: .card, .container, .grid, .row, .stack; optional .responsive parent
- Options and states: Optional cols-2/cols-3; shared width and gap settings. .responsive enables named container queries.
- Styling module: reva.components.css
- Behaviour: Layouts arrange content; there is no numbered 12-column API.



## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### A layout inside a narrow parent

The responsive wrapper measures its own width. The fixed-column grid collapses below 40rem even on a wide desktop. Put the wrapper inside a sized parent; do not put containment on a subgrid card.

```html
<div style="max-inline-size: 32rem;">
  <div class="responsive">
    <div class="grid cols-2">
      <article class="card"><h3>First item</h3><p>One column in this narrow space.</p></article>
      <article class="card"><h3>Second item</h3><p>The browser window can remain wide.</p></article>
    </div>
  </div>
</div>
```

### Cards

Apply .card to an article or section. Shared shape, density, depth and border attributes control its treatment.

```html
<article class="card" data-shape="rounded" data-depth="subtle">
  <h3>Your next project</h3>
  <p>A surface for related content.</p>
  <a href="#main">Read more</a>
</article>
```

### Responsive grids

The default grid fits as many columns as space permits. cols-2 and cols-3 switch to one column below 40rem. Inside a responsive wrapper they also use the wrapper width; cols-3 uses two columns from 40rem to below 60rem.

```html
<div class="grid cols-2" data-gap="large">
  <article class="card"><h3>First card</h3><p>First column.</p></article>
  <article class="card"><h3>Second card</h3><p>Second column.</p></article>
</div>
```

### Rows and stacks

Combine .row, .stack and alignment utilities. data-gap can be inherited from html or a section, or overridden on a layout.

```html
<div class="stack" data-gap="large">
  <p>A vertical stack.</p>
  <div class="row justify-between" data-gap="small">
    <span>Actions wrap when space runs out.</span>
    <button type="button">Continue</button>
  </div>
</div>
```

### Containers and prose

data-width can set inherited container defaults or be overridden on .container. .prose limits text measure independently of the page width.

```html
<section class="container" data-width="narrow">
  <div class="prose">
    <h3>Comfortable reading</h3>
    <p>A narrow container with a readable text measure.</p>
  </div>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/tables.md

# Tables

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Use real table semantics, captions and header scopes. Wrap wide tables in a labelled, focusable scroll region.

HTML documentation: http://revacss.eristavi.org/components/tables/

## Component contract

- Markup: table; .table-scroll for overflow
- Options and states: data-table; caption and native header cells.
- Styling module: reva.components.css
- Behaviour: CSS does not sort, filter or fetch records.



## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Plain table

Set data-table on html or a section for shared defaults, or on the table for a local override. The wrapper contains horizontal overflow.

```html
<div class="table-scroll" role="region" aria-label="Project status, plain table" tabindex="0">
  <table data-table="plain">
    <caption>Project status</caption>
    <thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead>
    <tbody>
      <tr><th scope="row">Website</th><td>In review</td></tr>
      <tr><th scope="row">Documentation</th><td>In progress</td></tr>
    </tbody>
  </table>
</div>
```

### Striped table

Set data-table on html or a section for shared defaults, or on the table for a local override. The wrapper contains horizontal overflow.

```html
<div class="table-scroll" role="region" aria-label="Project status, striped table" tabindex="0">
  <table data-table="striped">
    <caption>Project status</caption>
    <thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead>
    <tbody>
      <tr><th scope="row">Website</th><td>In review</td></tr>
      <tr><th scope="row">Documentation</th><td>In progress</td></tr>
    </tbody>
  </table>
</div>
```

### Bordered table

Set data-table on html or a section for shared defaults, or on the table for a local override. The wrapper contains horizontal overflow.

```html
<div class="table-scroll" role="region" aria-label="Project status, bordered table" tabindex="0">
  <table data-table="bordered">
    <caption>Project status</caption>
    <thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead>
    <tbody>
      <tr><th scope="row">Website</th><td>In review</td></tr>
      <tr><th scope="row">Documentation</th><td>In progress</td></tr>
    </tbody>
  </table>
</div>
```


---

Source: http://revacss.eristavi.org/ai/components/media.md

# Images and media

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Media scales within its container. Image attributes control cropping; meaningful alternative text remains your responsibility.

HTML documentation: http://revacss.eristavi.org/components/media/

## Component contract

- Markup: img, video, figure
- Options and states: data-ratio and data-fit; meaningful alt text.
- Styling module: reva.components.css
- Behaviour: Intrinsic media dimensions and playback are browser/application-owned.



## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Figures and responsive images

Supply intrinsic width and height to reserve space. Use a caption for visible context.

```html
<figure>
  <img src="__BASE__images/example-landscape.svg" width="640" height="360" alt="Illustrated hills beneath a pale sky">
  <figcaption>A responsive image with a caption.</figcaption>
</figure>
```

### Image ratios

data-ratio constrains the image. cover crops it; contain keeps the full image within the chosen ratio.

```html
<div class="grid cols-2">
  <img src="__BASE__images/example-landscape.svg" width="640" height="360" data-ratio="square" data-fit="cover" alt="Hills, cropped to a square">
  <img src="__BASE__images/example-landscape.svg" width="640" height="360" data-ratio="square" data-fit="contain" alt="The entire hills illustration inside a square">
</div>
```


---

Source: http://revacss.eristavi.org/ai/components/description-lists.md

# Description lists

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One description-list class arranges native term and description pairs. Use this pattern for record summaries and profile metadata.

HTML documentation: http://revacss.eristavi.org/components/description-lists/

## Component contract

- Markup: dl.description-list, dt, dd
- Options and states: Native div groups for term/value pairs.
- Styling module: reva.description-lists.css
- Behaviour: Pairs adapt to their available container width.

- Use dl, dt and dd for associations, not a table when there are no tabular column relationships. A native div may group each term with its description.
- Pairs stack when their own container is narrow; a viewport fallback supports browsers without container queries. Use --re-description-label to customise the label column.
- Colours, density and borders inherit. Basic dl without this class retains normal document formatting.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Record details

Each native div groups a term and its value.

```html
<dl class="description-list">
  <div><dt>Project</dt><dd>RevaCSS</dd></div>
  <div><dt>Status</dt><dd><span class="badge" data-variant="success">Active</span></dd></div>
  <div><dt>Documentation</dt><dd><a href="__BASE__guide/">Getting started</a></dd></div>
</dl>
```

### Metadata inside a card

The label width is optional; the enclosing card supplies its inherited surface.

```html
<article class="card">
  <h3>Account summary</h3>
  <dl class="description-list" style="--re-description-label: 8rem;">
    <div><dt>Plan</dt><dd>Professional</dd></div>
    <div><dt>Billing</dt><dd>Monthly</dd></div>
    <div><dt>Team</dt><dd>12 members</dd></div>
  </dl>
</article>
```


---

Source: http://revacss.eristavi.org/ai/components/scroll-top.md

# Scroll to top

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

A labelled native link returns to a page-owned top anchor. One structural class; no JavaScript.

HTML documentation: http://revacss.eristavi.org/components/scroll-top/

## Component contract

- Markup: a.scroll-top with href pointing to an existing top ID
- Options and states: A visible link label; optional numeric positioning in application CSS.
- Styling module: reva.scroll-top.css + reva.scrolling.css
- Behaviour: Native fragment navigation. No scroll observer, automatic hiding or JavaScript.

- Included in complete and scoped builds. Modular consumers load tokens, base, reva.scroll-top.css and reva.scrolling.css.
- Put a unique ID at the beginning of your page and link to it. Keep a visible label; decorative arrows are aria-hidden.
- The link is in normal flow by default. It stays available without a scroll timeline or observer and is hidden in print.
- Document scrolling follows data-motion on html. Local motion on the link alone cannot change the viewport scroll container.
- For a floating link, application CSS can set position:fixed and physical safe-area offsets. Reserve enough space so it cannot cover content, controls or focused elements.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Footer return link

This example links to the top of this documentation page.

```html
<a class="scroll-top" href="#page-top"><span aria-hidden="true">↑</span> Back to top</a>
```

### Complete anchor structure



```html
<body id="page-top">
  <main>Page content</main>
  <footer><a class="scroll-top" href="#page-top">Back to top</a></footer>
</body>
```


---

Source: http://revacss.eristavi.org/ai/components/buttons.md

# Buttons

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Native actions use the inherited primary accent by default. Set data-variant on a parent for shared semantic colours, or on an action for a local exception. Keep buttons for actions and anchors for navigation.

HTML documentation: http://revacss.eristavi.org/components/buttons/

## Component contract

- Markup: button, action inputs; a.button for destinations
- Options and states: Inherited data-variant; outline/ghost presentation; existing secondary/danger/warning classes.
- Styling module: reva.base.css
- Behaviour: Local action attributes override inherited values and legacy classes; data-appearance remains badge/alert-only.

- data-variant accepts primary, success, warning, danger and neutral. It applies to native buttons, button/submit/reset inputs and .button links. Other form controls do not acquire action colours, and navigation toggles keep their neutral menu styling.
- Existing secondary, danger and warning classes remain supported as local choices over inherited variants. A valid data-variant placed directly on an action takes precedence over those classes. An unsupported value leaves the nearest valid inherited variant in effect, with a local legacy class still taking priority.
- Outline and ghost are presentation classes that can combine with data-variant. data-appearance still applies only to badges and alerts. Secondary remains a class; it is not an accepted data-variant value.
- Shared theme, material, accent, shape, size, border, fill, depth and motion continue to apply. Glass and decorative edges consume the action's resolved semantic colours. Native disabled prevents activation; an anchor cannot be disabled with the disabled attribute.
- Optional reva.button-materials.css configures inherited data-button-material. Default follows data-material; explicit solid, glass, veil, soft or liquid affects actions only. See the Button materials guide for local resets, scoped use and motion/preferences.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Button variants

Use the shared semantic vocabulary. No identifying class is needed on native buttons.

```html
<div class="row">
  <button type="button">Primary</button>
  <button type="button" data-variant="success">Confirm</button>
  <button type="button" data-variant="warning">Review warning</button>
  <button type="button" data-variant="danger">Delete</button>
  <button type="button" data-variant="neutral">Neutral</button>
</div>
```

### Parent defaults and local exceptions

The button and badge share the parent's meaning. The delete action overrides only its variant.

```html
<section class="stack" data-variant="success" data-shape="rounded">
  <div class="row">
    <button type="button">Approve</button>
    <span class="badge">Approved</span>
    <button type="button" data-variant="danger">Delete</button>
  </div>
  <div class="alert">Success: Your changes have been saved.</div>
</section>
```

### Semantic colour with outline or ghost

Presentation classes remain optional. data-appearance is not a button setting.

```html
<div class="row" data-variant="success">
  <button type="button">Confirm</button>
  <button type="button" class="outline">Outline confirm</button>
  <button type="button" class="ghost">Quiet confirm</button>
  <button type="button" class="outline" data-variant="danger">Outline delete</button>
</div>
```

### Existing classes and precedence

Local semantic classes override the parent. An explicit action attribute wins when both APIs are present.

```html
<div class="row" data-variant="success">
  <button type="button">Inherited success</button>
  <button type="button" class="danger">Existing danger class</button>
  <button type="button" class="secondary">Existing secondary class</button>
  <button type="button" class="danger" data-variant="primary">Explicit primary override</button>
</div>
```

### Links and native action inputs

Only native action input types receive the semantic button treatment. Destination links keep their .button hook.

```html
<section class="row" data-variant="success">
  <a class="button" href="__BASE__guide/">Read the guide</a>
  <input type="button" value="Confirm">
  <button type="button" disabled>Unavailable</button>
</section>
```

### Glass and semantic edge colours

The parent supplies the variant and material. A local primary value resets the semantic colour while retaining glass.

```html
<section class="row" data-material="glass" data-theme="dark"
         data-variant="success" data-shape="pill">
  <button type="button" data-edge="gradient">Confirm</button>
  <button type="button" data-variant="primary">Continue</button>
  <button type="button" data-variant="danger" data-material="solid">Solid delete</button>
</section>
```

### Actions in light and dark

Primary and secondary actions inherit the same accent. Theme changes their palette; shape, size, borders, depth and motion remain independently configurable. These examples use solid buttons; the optional glass stylesheet enables translucent button material.

```html
<div class="grid" data-accent="violet" data-shape="pill">
  <section class="card" data-theme="light">
    <h3>Light</h3>
    <div class="row">
      <button type="button">Continue</button>
      <button type="button" class="secondary">Go back</button>
    </div>
  </section>
  <section class="card" data-theme="dark">
    <h3>Dark</h3>
    <div class="row">
      <button type="button">Continue</button>
      <button type="button" class="secondary">Go back</button>
    </div>
  </section>
</div>
```

### Sizes and disabled state

data-size can set inherited control sizes on html or a section; a value on a control overrides them. Native disabled prevents activation.

```html
<div class="row">
  <button type="button" data-size="small">Small</button>
  <button type="button" data-size="medium">Medium</button>
  <button type="button" data-size="large">Large</button>
  <button type="button" disabled>Unavailable</button>
</div>
```

### Links styled as actions

Use .button on a real destination link. Anchors do not support the disabled attribute.

```html
<a class="button" href="#main">Back to page content</a>
```

### Local button configuration

Shared attributes can be placed directly on a button or inherited from a surrounding section.

```html
<button type="button" data-accent="violet" data-shape="pill" data-fill="solid" data-motion="none">Violet action</button>
```

### Gradient edges and motion

Plain is the default. Gradient is stationary; shine makes one 800ms sweep on hover or keyboard focus; animated turns slowly. Use continuous animation sparingly for a selected main action. Edges follow the action colour and shape, independently of fill. Native input buttons retain regular borders.

```html
<div class="row">
  <button type="button" data-edge="plain">Plain</button>
  <button type="button" data-edge="gradient">Gradient</button>
  <button type="button" data-edge="shine">Shine</button>
  <button type="button" data-edge="animated">Animated</button>
</div>
```

### A shared edge with local exceptions

Set data-edge on html or a section to configure buttons, .button links and cards. A nearer plain value removes decoration. data-border none removes the gradient ring; data-motion none pauses it. Reduced motion keeps a static ring; higher contrast, forced colours and print remove decoration.

```html
<section data-edge="animated" data-shape="pill" data-accent="violet" data-motion="none">
  <article class="card">
    <h3>Shared stationary edge</h3>
    <div class="row">
      <button type="button">Inherited edge</button>
      <a class="button secondary" href="#main" data-edge="shine" data-motion="subtle">Focused shine</a>
      <button type="button" data-edge="plain">Plain exception</button>
      <button type="button" disabled>Unavailable</button>
    </div>
  </article>
</section>
```

### A separate material for actions

The card follows the general material. Actions use liquid; the local default button returns to the card’s material. Load reva.button-materials.css after the core.

```html
<section data-material="soft" data-button-material="liquid">
  <article class="card"><h3>Shared defaults</h3><p>Soft surfaces with liquid actions.</p><div class="row"><button type="button">Save project</button><button type="button" data-button-material="default">Follow surface</button><a class="button outline" href="__BASE__themes/button-materials/">Button material guide</a></div></article>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/forms.md

# Forms

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Native controls need explicit labels. RevaCSS supplies appearance; your HTML supplies names, hints, errors and form behavior.

HTML documentation: http://revacss.eristavi.org/components/forms/

## Component contract

- Markup: label, input, select, textarea, fieldset, legend
- Options and states: required, disabled, readonly, aria-invalid as appropriate.
- Styling module: reva.base.css
- Behaviour: Native validation is preserved; applications provide error messages.



## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Disabled and read-only states

Native disabled fieldsets disable their descendant controls. Read-only fields retain focus and submission; disabled fields are omitted from submission.

```html
<fieldset disabled>
  <legend>Shipping options unavailable</legend>
  <label for="disabled-address">Address</label><input id="disabled-address" name="address" autocomplete="street-address" value="Unavailable">
  <label for="disabled-service">Service</label><select id="disabled-service" name="service"><option>Standard</option></select>
</fieldset>
<div class="form-group">
  <label for="explicit-readonly">Account reference</label>
  <input id="explicit-readonly" name="reference" value="REVA-001" readonly aria-describedby="readonly-hint">
  <small id="readonly-hint">Read only. This reference cannot be changed.</small>
</div>
```

### Date, time and numeric controls

Native pickers, constraints and keyboard behaviour remain browser-owned. Picker appearance and support vary by browser. These fields have no submission handler.

```html
<div class="grid cols-2">
  <div class="form-group"><label for="extended-date">Appointment date <small>(required)</small></label><input id="extended-date" name="date" type="date" required></div>
  <div class="form-group"><label for="extended-time">Time</label><input id="extended-time" name="time" type="time"></div>
  <div class="form-group"><label for="extended-datetime">Local date and time</label><input id="extended-datetime" name="local-time" type="datetime-local"></div>
  <div class="form-group"><label for="extended-number">Quantity</label><input id="extended-number" name="quantity" type="number" min="1" max="20" step="1" value="1"></div>
</div>
```

### Text fields, select and textarea

Associate labels with unique input IDs. Set appropriate input types and autocomplete tokens.

```html
<div class="stack">
  <div><label for="demo-email">Email</label>
    <input id="demo-email" name="email" type="email" autocomplete="email" placeholder="you@example.com"></div>
  <div><label for="demo-role">Role</label>
    <select id="demo-role" name="role"><option>Designer</option><option>Developer</option></select></div>
  <div><label for="demo-message">Message</label>
    <textarea id="demo-message" name="message" rows="3"></textarea></div>
</div>
```

### Checkboxes and radios

Wrap each choice in its label. A shared radio name creates one native selection group.

```html
<fieldset>
  <legend>Preferences</legend>
  <label><input type="checkbox" name="updates"> Receive updates</label>
  <label><input type="radio" name="demo-plan" value="personal" checked> Personal</label>
  <label><input type="radio" name="demo-plan" value="team"> Team</label>
</fieldset>
```

### Hints, errors and read-only fields

Connect explanatory text with aria-describedby. aria-invalid styles a supplied error state; CSS does not create or announce errors.

```html
<label for="demo-error">Email</label>
<input id="demo-error" type="email" value="invalid-address" aria-invalid="true" aria-describedby="demo-error-text">
<p id="demo-error-text">Enter an email address containing @.</p>
<label for="demo-readonly">Account ID</label>
<input id="demo-readonly" value="REVA-001" readonly>
<label for="demo-disabled">Unavailable field</label>
<input id="demo-disabled" value="Unavailable" disabled>
```

### Other native controls

Range, file, colour, date, progress and meter retain native behavior. No output calculation is performed by CSS.

```html
<div class="stack">
  <div><label for="demo-range">Volume</label><input id="demo-range" type="range" min="0" max="100" value="40"></div>
  <div><label for="demo-file">Attachment</label><input id="demo-file" type="file"></div>
  <div><label for="demo-colour">Colour</label><input id="demo-colour" type="color" value="#245dcc"></div>
  <div><label for="demo-date">Date</label><input id="demo-date" type="date"></div>
  <div><label for="demo-progress">Upload progress</label><progress id="demo-progress" value="60" max="100">60%</progress></div>
  <div><label for="demo-meter">Storage used</label><meter id="demo-meter" value="0.4">40%</meter></div>
</div>
```

### Minimal controls

data-controls changes input treatment. It does not remove required labels or control boundaries.

```html
<section data-controls="minimal" data-density="compact">
  <label for="demo-minimal">Project name</label>
  <input id="demo-minimal" placeholder="Your project">
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/selects.md

# Native select dropdowns

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

An optional CSS-only enhancement styles ordinary select option lists with the existing framework tokens. No classes, extra wrappers or new data attributes.

HTML documentation: http://revacss.eristavi.org/components/selects/

## Component contract

- Markup: Native select and option elements; no classes.
- Options and states: Existing shared tokens and native form attributes.
- Styling module: Optional reva.selects.css / reva.selects.scoped.css
- Behaviour: Support-gated customizable dropdown; native fallback. Multiple/listbox selects unchanged.

- Load reva.selects.css after the global core, or reva.selects.scoped.css after the scoped core. The documentation loads the extension for its live examples.
- The enhancement is guarded by support for appearance:base-select and ::picker(select). Unsupported browsers retain their ordinary native picker. Supported browsers use an in-page picker rather than the operating-system mobile selection sheet.
- Only single-selection dropdowns are enhanced. Multiple selects and size greater than one keep their native listbox treatment. Labels, names, values, required validation and disabled options remain native HTML.
- Theme, palette, typography, size, density, shape, border and depth use existing tokens. The option surface stays opaque for readability, including inside a glass parent. Selected options keep the browser checkmark; disabled options remain unavailable.
- Picker icons respect motion and reduced-motion preferences. Forced colours use system colours and visible selection states. Browser keyboard behaviour and form submission are retained; CSS does not search or fetch options.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Ordinary select, framework option list

The same simple HTML works with and without the optional stylesheet.

```html
<label for="native-select-project">Project status</label>
<select id="native-select-project" name="status">
  <option value="active">In progress</option>
  <option value="review">In review</option>
  <option value="complete">Complete</option>
</select>
```

### Groups and disabled options

Native groups, disabled options and a longer label.

```html
<label for="native-select-team">Assign a team</label>
<select id="native-select-team" name="team">
  <option value="" disabled selected>Choose a team</option>
  <optgroup label="Available teams">
    <option value="operations">Operations and service delivery</option>
    <option value="design">Design</option>
  </optgroup>
  <optgroup label="Unavailable">
    <option value="finance" disabled>Finance — assignment unavailable</option>
  </optgroup>
</select>
```

### Native listbox retained

Multiple selection is deliberately outside the enhanced dropdown contract.

```html
<label for="native-select-members">Team members</label>
<select id="native-select-members" name="members" multiple size="3">
  <option value="alex">Alex</option>
  <option value="sam">Sam</option>
  <option value="jamie">Jamie</option>
</select>
```


---

Source: http://revacss.eristavi.org/ai/components/form-groups.md

# Form groups

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One form-group class keeps a native label, control and help text together. Theme and control settings inherit from the parent; use fieldset and legend for related choices.

HTML documentation: http://revacss.eristavi.org/components/form-groups/

## Component contract

- Markup: .form-group; optional .field-error
- Options and states: for/id labels and aria-describedby descriptions.
- Styling module: reva.form-groups.css
- Behaviour: Error display and announcements are application-owned.

- Every control needs an accessible label. Match label for to a unique control id. Associate help and error text using aria-describedby; placeholders do not replace labels.
- Use native required, disabled and readonly where appropriate. aria-invalid="true" marks a known validation error; your server or application owns the error text and when it is shown. CSS does not generate validation messages.
- The optional field-error class styles explicit error text. State the error in words and explain how to fix it; do not rely only on a red border.
- Use existing grid and stack classes for arrangement. This component adds no grid system. Optional glass affects existing fieldsets, while text controls retain their normal readable backing.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### An explicitly supplied validation error

The application supplies aria-invalid and the visible error. CSS keeps the error border and focus outline consistent. Associate both the hint and error with the field.

```html
<div class="form-group">
  <label for="complete-error-email">Email <small>(required)</small></label>
  <input id="complete-error-email" name="email" type="email" required value="invalid-address" aria-invalid="true" aria-describedby="complete-email-hint complete-email-error">
  <small id="complete-email-hint">Use the address where you want to receive updates.</small>
  <p class="field-error" id="complete-email-error">Enter a complete email address, such as name@example.com.</p>
</div>
```

### Label, control and help

Only the group needs a class. IDs connect the label and explanation to the native control.

```html
<div class="form-group">
  <label for="profile-display-name">Display name</label>
  <input id="profile-display-name" name="display-name"
         autocomplete="nickname" aria-describedby="profile-name-help">
  <small id="profile-name-help">The name shown on your public profile.</small>
</div>
```

### A known validation error

This static server-validation example includes an explicit error and aria-invalid. No automatic validation script is added.

```html
<div class="form-group">
  <label for="profile-email">Email address (required)</label>
  <input id="profile-email" name="email" type="email" required
         autocomplete="email" value="invalid-address" aria-invalid="true"
         aria-describedby="profile-email-help profile-email-error">
  <small id="profile-email-help">We use this for account notifications.</small>
  <small class="field-error" id="profile-email-error">Enter a complete email address, such as name@example.com.</small>
</div>
```

### Responsive grouped fields

Existing grid layout arranges groups. A textarea and select retain native behavior and shared control styling.

```html
<div class="grid" data-size="medium" data-density="comfortable">
  <div class="form-group">
    <label for="profile-language">Language</label>
    <select id="profile-language" name="language">
      <option value="en">English</option>
      <option value="fr">French</option>
    </select>
  </div>
  <div class="form-group">
    <label for="profile-bio">About you</label>
    <textarea id="profile-bio" name="bio" rows="3"
              aria-describedby="profile-bio-help"></textarea>
    <small id="profile-bio-help">Write a short introduction.</small>
  </div>
</div>
```

### Related choices in a fieldset

The legend names the group. Each radio has its own native label. This fieldset inherits optional glass material.

```html
<section data-material="glass" data-theme="dark">
  <fieldset aria-describedby="contact-channel-help">
    <legend>Preferred contact method</legend>
    <div class="form-group">
      <label><input type="radio" name="contact-channel" value="email" checked> Email</label>
      <label><input type="radio" name="contact-channel" value="phone"> Phone</label>
      <small id="contact-channel-help">Choose one contact method.</small>
    </div>
  </fieldset>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/input-groups.md

# Input groups

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One input-group wrapper arranges a native input with text prefixes, suffixes or an action. Each field keeps its own label and shared control styling.

HTML documentation: http://revacss.eristavi.org/components/input-groups/

## Component contract

- Markup: .input-group around native controls and text
- Options and states: A label remains outside or associated with the input.
- Styling module: reva.input-groups.css
- Behaviour: Actions need an application handler or a real form destination.

- The prefix or suffix does not replace a label. Include units in the visible label and connect meaningful supporting text with aria-describedby when needed.
- Groups wrap when space is limited. Small gaps keep each control's borders and focus outline clear rather than relying on tightly joined corners.
- Use type="submit" only for actions backed by an actual form. Application routes and processing remain your responsibility. Static action demos use type="button".

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### An amount with a prefix

The visible label names both the field and its currency; the decorative prefix avoids repeating it.

```html
<div class="form-group">
  <label for="invoice-amount">Amount in euros</label>
  <div class="input-group">
    <span aria-hidden="true">€</span>
    <input id="invoice-amount" name="amount" type="number" min="0" step="0.01"
           aria-describedby="invoice-amount-help">
  </div>
  <small id="invoice-amount-help">Enter the total before tax.</small>
</div>
```

### A field with an action

The example action is presentation-only. Your application supplies the search behavior.

```html
<div class="form-group">
  <label for="group-search">Search projects</label>
  <div class="input-group">
    <input id="group-search" name="query" type="search">
    <button type="button">Search</button>
  </div>
</div>
```

### A measured value

Units are explicit in the label, with a decorative suffix.

```html
<div class="form-group" data-size="small">
  <label for="package-weight">Package weight in kilograms</label>
  <div class="input-group">
    <input id="package-weight" name="weight" type="number" min="0" step="0.1">
    <span aria-hidden="true">kg</span>
  </div>
</div>
```

### A native action input

Action inputs use the same grouping role as buttons. The editable field takes the available width; the action wraps when needed.

```html
<div class="form-group">
  <label for="native-group-query">Search documents</label>
  <div class="input-group">
    <input id="native-group-query" type="search" name="query">
    <input type="button" value="Search">
  </div>
</div>
```


---

Source: http://revacss.eristavi.org/ai/components/switches.md

# Switches

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

A switch class styles a native checkbox as an on/off control. Checked state, keyboard activation, form submission and disabled behavior remain native.

HTML documentation: http://revacss.eristavi.org/components/switches/

## Component contract

- Markup: input.switch[type=checkbox] inside a label
- Options and states: Native checked/disabled; optional role=switch.
- Styling module: reva.switches.css
- Behaviour: Checked state, keyboard activation and submission remain native.

- Use switches for boolean settings. Keep a stable visible label; Space toggles the focused checkbox. Optional role="switch" communicates on/off semantics while checked remains the native input state.
- Place the checkbox inside its label for a comfortable label target. Add aria-describedby for explanatory text. Do not maintain aria-checked manually on a native checkbox.
- Size, shape, accent, borders and motion follow the parent. Switches keep opaque control backing, including inside a glass section. Reduced-motion preferences stop thumb transitions.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### A native on/off setting

The label names the setting and activates its checkbox.

```html
<label>
  <input class="switch" type="checkbox" role="switch"
         name="email-updates" checked>
  Email updates
</label>
```

### Help and disabled settings

Associated help text explains the setting. Native disabled prevents changes.

```html
<div class="form-group" data-shape="pill">
  <label>
    <input class="switch" type="checkbox" role="switch"
           name="weekly-summary" aria-describedby="weekly-summary-help">
    Weekly summary
  </label>
  <small id="weekly-summary-help">Receive one summary every Monday.</small>
</div>
<label>
  <input class="switch" type="checkbox" role="switch"
         name="managed-backups" checked disabled>
  Backups enabled by your administrator
</label>
```

### Shared defaults

Set accent and size on the parent; controls only need the switch class.

```html
<section data-accent="teal" data-size="large" data-shape="pill">
  <label><input class="switch" type="checkbox" role="switch" checked> Notifications</label>
  <label><input class="switch" type="checkbox" role="switch">Activity emails</label>
</section>
```

### A sized labelled switch

The group label and switch consume the size setting once. A local switch size remains an independent override.

```html
<section data-size="large">
  <div class="form-group">
    <label><input class="switch" type="checkbox" role="switch" checked> Email notifications</label>
  </div>
  <div class="form-group">
    <label><input class="switch" type="checkbox" role="switch" data-size="small"> A smaller local switch</label>
  </div>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/rating.md

# Star ratings

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One rating class supports an accessible read-only display or native radio choices that submit ordinary form values.

HTML documentation: http://revacss.eristavi.org/components/rating/

## Component contract

- Markup: fieldset.rating > legend, label > input[type=radio], span; labelled .rating display
- Options and states: Native radio name/value/checked/disabled/required and reset; accessible numeric display.
- Styling module: reva.rating.css
- Behaviour: Integer star selection without JavaScript; backend supplies averages and submissions.

- Read-only ratings need an explicit accessible label and visible numeric value. The application supplies both the stars and their matching value; CSS calculates no average.
- For selection, put class="rating" on a fieldset with a legend. Each label contains a named native radio, a decorative SVG star with aria-hidden=true, and text such as "3 stars". Arrow keys, disabled and required states, form submission and reset remain native.
- This pattern uses integer ratings from one to five. Choices begin unset unless the server marks one checked. Use a normal reset button to clear an initially unset group.
- Filled stars identify every value up to the checked choice. Focus is visible on the corresponding star. No new data attributes or JavaScript.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### A published rating

Text communicates the value without relying on colour or star glyphs.

```html
<p><span class="rating" role="img" aria-label="4 out of 5 stars">★★★★☆</span> <span>4 out of 5 · 12 reviews</span></p>
```

### Choose a rating

Native radio values remain available to a normal form action. No review is submitted by this example.

```html
<form><fieldset class="rating"><legend>Your rating</legend>
<label><input type="radio" name="product-rating" value="1"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>1 star</span></label>
<label><input type="radio" name="product-rating" value="2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>2 stars</span></label>
<label><input type="radio" name="product-rating" value="3"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>3 stars</span></label>
<label><input type="radio" name="product-rating" value="4"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>4 stars</span></label>
<label><input type="radio" name="product-rating" value="5"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>5 stars</span></label>
</fieldset><button type="reset" class="outline">Clear rating</button></form>
```

### Unavailable selection

Disabled native choices preserve their state and cannot be changed.

```html
<fieldset class="rating" disabled><legend>Published review (editing unavailable)</legend>
<label><input type="radio" name="locked-rating" value="1"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>1 star</span></label>
<label><input type="radio" name="locked-rating" value="2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>2 stars</span></label>
<label><input type="radio" name="locked-rating" value="3"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>3 stars</span></label>
<label><input type="radio" name="locked-rating" value="4" checked><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>4 stars</span></label>
<label><input type="radio" name="locked-rating" value="5"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>5 stars</span></label>
</fieldset>
```


---

Source: http://revacss.eristavi.org/ai/components/toolbars.md

# Toolbars

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One toolbar class arranges related native actions and allows them to wrap. Controls inherit their existing button and form styling.

HTML documentation: http://revacss.eristavi.org/components/toolbars/

## Component contract

- Markup: .toolbar
- Options and states: Use a named role=group for ordinary controls.
- Styling module: reva.toolbars.css
- Behaviour: No ARIA toolbar arrow-key management is added.

- Use role="group" with a descriptive name for this CSS-only pattern. Each control remains a normal Tab stop. Do not add role="toolbar" without implementing its expected arrow-key focus behavior.
- Use links for destinations and buttons for application actions. Native disabled works as usual. Name icon-only buttons explicitly.
- Gap and density inherit. The wrapper paints no extra surface; combine it with card when a surface is useful.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Actions in a narrow workspace

Below 24rem of wrapper width, toolbar children fill the line and nested input groups stack. These links retain ordinary navigation behaviour.

```html
<div style="max-inline-size: 22rem;">
  <div class="responsive">
    <div class="toolbar" role="group" aria-label="Workspace links">
      <a class="button" href="__BASE__guide/">Getting started</a>
      <a class="button outline" href="__BASE__reference/">API reference</a>
    </div>
  </div>
</div>
```

### A group of actions

The labelled group explains why these controls belong together.

```html
<div class="toolbar" role="group" aria-label="Project actions">
  <button type="button">Create project</button>
  <button type="button" class="secondary">Export</button>
  <button type="button" disabled>Archive selected</button>
</div>
```

### Related destinations

Ordinary links keep navigation semantics inside a labelled action group.

```html
<div class="toolbar" role="group" aria-label="Documentation shortcuts" data-gap="small">
  <a class="button" href="__BASE__guide/">Get started</a>
  <a class="button secondary" href="__BASE__attributes/">Shared settings</a>
  <a class="button outline" href="__BASE__icons/">SVG icons</a>
</div>
```


---

Source: http://revacss.eristavi.org/ai/components/app-shell.md

# Sidebar and app shell

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One app-shell class arranges a native aside, header and main. Sidebar links, expandable groups and profile regions use semantic HTML, with inherited theme styling and zero browser JavaScript.

HTML documentation: http://revacss.eristavi.org/components/app-shell/

## Component contract

- Markup: .app-shell > aside, header, main; standalone aside.sidebar
- Options and states: Native nav links, details/summary and aria-current; unique drawer id with popover=auto and popovertarget.
- Styling module: reva.app-shell.css
- Behaviour: Responsive at 60rem. Mobile drawer is a non-modal native popover, with outside-click/Escape dismissal and ordinary Tab navigation. Applications supply destinations and data.

- Use .app-shell on one wrapper. Direct aside, header and main children identify the regions. No shell-header, sidebar-item or sidebar-link classes are required. A direct section can replace main when the shell is embedded inside a document that already has a main landmark.
- At 60rem and wider the desktop aside occupies the left column, with a sticky, independently scrollable sidebar. Below 60rem the header and content form one column; a separate aside[popover=auto] provides a viewport-bounded drawer. The layout uses viewport media queries, including when embedded in a demo.
- The desktop sidebar and mobile drawer share navigation content through your template. Keep destinations consistent and use unique IDs for every drawer and any repeated form controls. The shell itself needs only one class; a standalone aside.sidebar needs one class when used without the shell.
- Only the direct sidebar nav is styled. Native details/summary handles expandable groups at any depth, aria-current=page marks the current destination, and ordinary anchors navigate. Label navigation landmarks; retain native Tab, Enter, Space and Escape behaviour.
- Use a direct header button with popovertarget matching the drawer id, and a drawer close button with popovertargetaction=hide. Direct header popover buttons are reserved for the mobile drawer; put other header popover controls inside a group. Native popover support is required.
- The drawer is non-modal: it does not trap focus, make the page inert or lock body scrolling. Outside-click and Escape dismiss it natively. In-page links do not automatically close it. Closing and focus restoration follow native browser behaviour. Resizing to desktop hides an open drawer; returning to mobile can restore its open state.
- Palette, material, shape, density, depth, border, size and motion inherit from html or a parent. No data-sidebar preset is needed in this first version. data-navbar still configures only top menus. Glass and Veil modules include sidebar and shell-header surfaces with their existing accessibility fallbacks.
- Load tokens, base and reva.app-shell.css for modular use, or use the complete/components/scoped builds. --re-sidebar-width defaults to 16rem; mobile width remains viewport-bounded. More contrast and forced colours retain boundaries; reduced motion disables chevron transitions. Print omits navigation and keeps content.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### One-class responsive app shell

Resize this isolated preview: desktop sidebar becomes a Menu button and native drawer below 60rem. Expand Settings, then Team.

```html
<div class="app-shell">
  <aside aria-label="Desktop workspace navigation">
<header><a href="#overview">Studio</a><small>Team workspace</small></header>
<nav aria-label="Workspace navigation">
  <a href="#overview" aria-current="page">Overview</a>
  <a href="#projects">Projects</a>
  <details>
    <summary>Settings</summary>
    <a href="#general">General</a>
    <details><summary>Team</summary><a href="#members">Members</a></details>
  </details>
</nav>
<footer><strong>Alex Morgan</strong><br><small>Workspace admin</small></footer>
  </aside>
  <aside id="workspace-drawer" popover="auto" aria-label="Mobile workspace navigation">
    <button type="button" popovertarget="workspace-drawer" popovertargetaction="hide">Close sidebar</button>
<header><a href="#overview">Studio</a><small>Team workspace</small></header>
<nav aria-label="Workspace navigation">
  <a href="#overview" aria-current="page">Overview</a>
  <a href="#projects">Projects</a>
  <details>
    <summary>Settings</summary>
    <a href="#general">General</a>
    <details><summary>Team</summary><a href="#members">Members</a></details>
  </details>
</nav>
<footer><strong>Alex Morgan</strong><br><small>Workspace admin</small></footer>
  </aside>
  <header>
    <button type="button" popovertarget="workspace-drawer" aria-label="Open sidebar"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button>
    <strong>Workspace overview</strong>
  </header>
  <main id="overview">
    <h1>Overview</h1>
    <p>Your application content goes here.</p>
    <section id="projects"><h2>Projects</h2><p>Reusable layout, native navigation, shared theme.</p></section>
    <section id="general"><h2>General settings</h2><p>A real application supplies settings forms.</p></section>
    <section id="members"><h2>Team members</h2><p>A real application supplies member records.</p></section>
  </main>
</div>
```

### Sidebar outside an app shell

One sidebar class establishes the same native navigation styling without the surrounding application layout.

```html
<aside class="sidebar" aria-label="Workspace sidebar">
<header><a href="#overview">Studio</a><small>Team workspace</small></header>
<nav aria-label="Workspace navigation">
  <a href="#overview" aria-current="page">Overview</a>
  <a href="#projects">Projects</a>
  <details>
    <summary>Settings</summary>
    <a href="#general">General</a>
    <details><summary>Team</summary><a href="#members">Members</a></details>
  </details>
</nav>
<footer><strong>Alex Morgan</strong><br><small>Workspace admin</small></footer>
</aside>
```


---

Source: http://revacss.eristavi.org/ai/components/navigation-rail.md

# Navigation rail

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

A compact native nav with visible labels and optional existing SVG icons. One structural class, no additional attributes.

HTML documentation: http://revacss.eristavi.org/components/navigation-rail/

## Component contract

- Markup: nav.nav-rail > a
- Options and states: Native links with visible labels and aria-current where applicable.
- Styling module: reva.navigation-rail.css
- Behaviour: Vertical rail becomes a wrapping horizontal layout below 40rem.

- Use nav.nav-rail with direct anchors and an accessible navigation label. Use aria-current=page only for an actual current page; ordinary fragment links are not automatically tracked by CSS.
- Labels stay visible. Existing SVG icons are decorative and should use aria-hidden=true. Navigation uses ordinary browser keyboard and link behaviour.
- The rail is vertical on wider viewports and wraps horizontally below 40rem. It does not change the app shell or sidebar. Place it as an alternative navigation layout, not a second set of required sidebar controls.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Compact navigation

Native anchors with visible text.

```html
<nav class="nav-rail" aria-label="Workspace">
  <a href="#rail-overview">Overview</a>
  <a href="#rail-projects">Projects</a>
  <a href="#rail-activity">Activity</a>
</nav>
<section id="rail-overview"><h3>Overview</h3></section>
<section id="rail-projects"><h3>Projects</h3></section>
<section id="rail-activity"><h3>Activity</h3></section>
```


---

Source: http://revacss.eristavi.org/ai/components/drawers.md

# Drawer / inspector

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One drawer class turns a native popover into a viewport-edge inspector. Use semantic children and inherited data attributes for details, filters or settings.

HTML documentation: http://revacss.eristavi.org/components/drawers/

## Component contract

- Markup: .drawer[popover=auto] > header, section, footer
- Options and states: Unique id and native popovertarget; shared appearance attributes inherit. CSS variables customise width and logical placement.
- Styling module: reva.drawers.css
- Behaviour: Non-modal native popover. Outside-click/Escape dismissal; ordinary Tab navigation. No focus trap, body-scroll lock or JavaScript.

- Use an aside.drawer with popover=auto and a unique id. Native button popovertarget opens it; popovertargetaction=hide closes it. Label the panel with aria-labelledby and give its heading a unique id.
- Direct header, section and footer children identify the regions. No drawer-header, drawer-body or drawer-footer classes are needed. The panel scrolls as a whole, keeping all content reachable at small heights and zoom.
- Default width is 28rem, bounded by the viewport, on the logical end edge. Customise with inherited CSS variables --re-drawer-width, --re-drawer-start and --re-drawer-end. No component-specific data attributes are required.
- Theme, palette, density, shape, depth, border and optional materials inherit from the actual DOM parent. Opening in the top layer does not move that DOM boundary. Keep drawers inside .reva for scoped builds. Existing optional motion styles apply; data-motion=none and reduced-motion preferences suppress entrance motion.
- This is a non-modal overlay, not a permanent split-pane layout: no focus trap, page inertness or scroll lock. Outside-click and Escape dismiss it natively. Ordinary links and form actions do not close it automatically; the browser restores focus according to native popover behavior. Native popover support is required.
- Load tokens, base and reva.drawers.css for modular use, or the complete/components/scoped builds. Optional glass and veil modules already style popover surfaces. Forced colours retain boundaries; print hides drawers.
- Application code or the server supplies details, filter results and saved settings. The component does not fetch, filter or save records.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Project inspector

One structural class and inherited appearance. Open, close, click outside or press Escape.

```html
<section>
  <button type="button" popovertarget="drawer-end">Open project inspector</button>
  <aside class="drawer" id="drawer-end" popover="auto" aria-labelledby="drawer-end-title">
    <header><h2 id="drawer-end-title">Project inspector</h2><button type="button" popovertarget="drawer-end" popovertargetaction="hide" autofocus>Close</button></header>
    <section><p>Review the project without leaving this page.</p><dl><dt>Owner</dt><dd>Alex Morgan</dd><dt>Status</dt><dd>In progress</dd></dl><label>Completion <progress value="72" max="100">72%</progress></label></section>
    <footer><button type="button" popovertarget="drawer-end" popovertargetaction="hide">Done</button></footer>
  </aside>
</section>
```

### Filter drawer

One structural class and inherited appearance. Open, close, click outside or press Escape.

```html
<section style="--re-drawer-start: 0; --re-drawer-end: auto; --re-drawer-direction: -1; --re-drawer-width: 20rem">
  <button type="button" popovertarget="drawer-start">Open filter drawer</button>
  <aside class="drawer" id="drawer-start" popover="auto" aria-labelledby="drawer-start-title">
    <header><h2 id="drawer-start-title">Filter drawer</h2><button type="button" popovertarget="drawer-start" popovertargetaction="hide" autofocus>Close</button></header>
    <section><fieldset><legend>Project status</legend><label><input type="checkbox" checked> In progress</label><label><input type="checkbox"> Complete</label></fieldset><p>A backend supplies and applies the filter values.</p></section>
    <footer><button type="button" popovertarget="drawer-start" popovertargetaction="hide">Done</button></footer>
  </aside>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/top-menu.md

# Top menu

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Native, responsive navigation. Use the full documented HTML structure.

HTML documentation: http://revacss.eristavi.org/components/top-menu/

## Component contract

- Markup: .top-menu and documented menu structure
- Options and states: Unique panel IDs, popovertarget, popover=auto. Optional .navbar-header wrapper; inherited data-navbar-position, data-navbar-spacing and data-navbar-width configure scrolling, gap and frame independently.
- Styling module: reva.navigation.css
- Behaviour: Native popover support is required; nested focus restoration is browser-dependent.



## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

Read the [full HTML documentation](http://revacss.eristavi.org/components/top-menu/) and complete demo sources for this component's nested structure.


---

Source: http://revacss.eristavi.org/ai/components/dropdowns.md

# Dropdowns

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One dropdown class turns a native popover list into a standalone set of links or actions. Use it beside a button, outside the top navigation, with inherited theme styling and no JavaScript.

HTML documentation: http://revacss.eristavi.org/components/dropdowns/

## Component contract

- Markup: ul.dropdown[popover=auto] > li > a or button
- Options and states: Unique id and native popovertarget; role=list and a panel label.
- Styling module: reva.dropdowns.css
- Behaviour: Native outside-click/Escape dismissal; ordinary Tab navigation, not an ARIA menu. Actions and in-page links do not automatically dismiss.

- Use a native button with type="button" and popovertarget matching the list’s unique document-wide id. Keep popover="auto" for outside-click and Escape dismissal; another unrelated auto popover closes the current one.
- Keep ordinary list, link and button semantics. role="list" preserves list semantics when markers are removed. Do not add role="menu", role="menuitem", aria-haspopup="menu" or fixed aria-expanded: this pattern uses ordinary Tab navigation, not application-menu arrow keys.
- The opener’s native association anchors the panel where CSS anchor positioning is supported. No wrapper or anchor-name is required. Panels can flip at viewport edges; otherwise they use a viewport-bounded centred fallback. Native popover support is required.
- Panels inherit theme, shape, density, border and depth through their DOM parent, even in the top layer. Keep the panel inside the configured parent or .reva boundary. Shared size affects rows once; rows remain neutral rather than adopting filled button variants or animated edges.
- Tab and Shift+Tab move through ordinary controls. Enter/Space activate buttons; Escape dismisses. Default opening and focus restoration follow native browser behaviour. An optional autofocus close button explicitly places focus inside on opening. Do not use this pattern as a modal dialog.
- Destination links navigate normally. In-page links and arbitrary action buttons do not automatically dismiss the panel; an explicit popovertargetaction="hide" button can close it. Applications supply business actions; CSS adds no event handlers.
- The complete, scoped and components builds include the dropdown. Modular use: tokens, base and reva.dropdowns.css; glass requires the matching optional extension. --re-dropdown-width defaults to 18rem and remains viewport-bounded. Open dropdowns are omitted from print.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### A standalone link dropdown

One class on the list, one unique id, and native button targeting. Use the documentation links as real destinations.

```html
<button type="button" popovertarget="resource-dropdown">Resources</button>
<ul class="dropdown" id="resource-dropdown" popover="auto"
    role="list" aria-label="Resources">
  <li><a href="__BASE__guide/">Get started</a></li>
  <li><a href="__BASE__reference/">API reference</a></li>
  <li><a href="__BASE__icons/">SVG icons</a></li>
</ul>
```

### Explicit close and unavailable actions

The close button is functional and receives focus on opening. The disabled action remains unavailable through native HTML.

```html
<button type="button" popovertarget="project-dropdown">Project options</button>
<ul class="dropdown" id="project-dropdown" popover="auto"
    role="list" aria-label="Project options">
  <li><button type="button" popovertarget="project-dropdown"
              popovertargetaction="hide" autofocus>Close options</button></li>
  <li><a href="__BASE__components/card-patterns/">View card patterns</a></li>
  <li><button type="button" disabled>Archive project — unavailable</button></li>
</ul>
```

### Light and dark parent defaults

Theme, shape and size live on the containing section; neither dropdown needs repeated styling attributes.

```html
<section data-theme="light" data-shape="rounded" data-size="small">
  <button type="button" popovertarget="light-dropdown">Light resources</button>
  <ul class="dropdown" id="light-dropdown" popover="auto"
      role="list" aria-label="Light resources">
    <li><a href="__BASE__themes/light/">Light theme guide</a></li>
    <li><a href="__BASE__guide/styling/">Shared styling</a></li>
  </ul>
</section>
<section data-theme="dark" data-shape="subtle" data-size="large">
  <button type="button" popovertarget="dark-dropdown">Dark resources</button>
  <ul class="dropdown" id="dark-dropdown" popover="auto"
      role="list" aria-label="Dark resources">
    <li><a href="__BASE__themes/dark/">Dark theme guide</a></li>
    <li><a href="__BASE__reference/tokens/">CSS tokens</a></li>
  </ul>
</section>
```

### Glass and a local solid boundary

The optional glass extension follows the parent material. A solid section resets the second panel without repeating settings on its rows.

```html
<section data-material="glass" data-shape="rounded" data-accent="teal">
  <button type="button" popovertarget="glass-dropdown">Glass resources</button>
  <ul class="dropdown" id="glass-dropdown" popover="auto"
      role="list" aria-label="Glass resources">
    <li><button type="button" popovertarget="glass-dropdown"
                popovertargetaction="hide" autofocus>Close resources</button></li>
    <li><a href="__BASE__themes/glass/">Glass material guide</a></li>
    <li><a href="__BASE__reference/">API reference</a></li>
  </ul>
  <section data-material="solid">
    <button type="button" popovertarget="solid-dropdown">Solid resources</button>
    <ul class="dropdown" id="solid-dropdown" popover="auto"
        role="list" aria-label="Solid resources">
      <li><a href="__BASE__guide/">Get started</a></li>
      <li><a href="__BASE__guide/accessibility/">Behaviour and accessibility</a></li>
    </ul>
  </section>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/breadcrumbs.md

# Breadcrumbs

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One breadcrumbs class styles a native navigation landmark and ordered list. Real links lead to ancestor pages; aria-current identifies the current page.

HTML documentation: http://revacss.eristavi.org/components/breadcrumbs/

## Component contract

- Markup: nav.breadcrumbs > ol > li
- Options and states: A landmark name; aria-current=page on the current location.
- Styling module: reva.breadcrumbs.css
- Behaviour: Ancestor links need actual destinations.

- Give the navigation a descriptive aria-label, particularly when there are other navigation landmarks.
- Keep role="list" on the list to preserve list announcements in browsers that treat list-style:none differently. Decorative separators have no spoken text.
- Use actual destination URLs in your application. The documentation examples link to real documentation pages. Theme, typography, size and density inherit; breadcrumbs have no surface requiring glass.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### A page trail

The current location is plain text with aria-current; only ancestor pages are links.

```html
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol role="list">
    <li><a href="__BASE__">Home</a></li>
    <li><a href="__BASE__guide/">Guide</a></li>
    <li><span aria-current="page">Breadcrumbs</span></li>
  </ol>
</nav>
```

### Wrapping and parent defaults

Long labels wrap. The same logical layout works with the document reading direction.

```html
<section data-size="small" data-density="compact">
  <nav class="breadcrumbs" aria-label="Documentation breadcrumb">
    <ol role="list">
      <li><a href="__BASE__">Documentation home</a></li>
      <li><a href="__BASE__attributes/">Shared component settings and defaults</a></li>
      <li><span aria-current="page">Customising navigation for your project</span></li>
    </ol>
  </nav>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/steps.md

# Step navigation

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One ordered-list class presents the stages of a process. Current state and destinations stay in native HTML.

HTML documentation: http://revacss.eristavi.org/components/steps/

## Component contract

- Markup: ol.steps > li > a or span
- Options and states: aria-current=step; visible state text; inherited appearance.
- Styling module: reva.steps.css
- Behaviour: Native process navigation; application supplies stage state and destinations.

- Use ol.steps with li children and aria-current="step" on the current link or span. Visible labels identify current, completed and upcoming stages; CSS does not infer completion.
- Use real links only for stages the user can visit. A plain span represents a future or unavailable stage without creating a fake disabled control.
- The list wraps on narrow screens and uses logical spacing. Applications supply validation, navigation and stage state; this is not a client-side wizard.
- Available in core, components, scoped and standalone reva.steps.css builds. No new data attributes.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Order progress

Completed and upcoming states are explicit text, with native current-step semantics.

```html
<nav aria-label="Order stages"><ol class="steps" role="list">
<li><a href="#steps-bag">Bag</a><small>Complete</small></li>
<li><span aria-current="step">Delivery</span><small>Current stage</small></li>
<li><span>Payment</span><small>Upcoming</small></li>
</ol></nav>
<section id="steps-bag"><h3>Your order</h3><p>Review your bag before supplying delivery details.</p></section>
```


---

Source: http://revacss.eristavi.org/ai/components/pagination.md

# Pagination

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One pagination class arranges native page links. Shared theme, size, density, shape, depth, borders, gap and optional glass styling inherit from the parent. Your server or application supplies page destinations.

HTML documentation: http://revacss.eristavi.org/components/pagination/

## Component contract

- Markup: nav.pagination > ol > li
- Options and states: aria-current=page; spans for unavailable controls.
- Styling module: reva.pagination.css
- Behaviour: Applications supply URLs, page counts and results.

- Use a labelled nav and ordered list. Give numeric links accessible names such as Page 2. Mark exactly one current page with aria-current="page".
- Unavailable controls are spans with aria-disabled="true", without href or tabindex. aria-disabled alone does not stop a link from navigating. Ellipses are text, not controls.
- CSS provides presentation only. It does not fetch results, calculate page counts, change the current page or restore focus after an application update.
- The live demo links navigate to this page's example anchors to demonstrate native navigation. Production markup should point to actual result pages.
- A decorative underline follows eligible links on hover or keyboard focus, then returns to the current page. The current page keeps its own styling throughout. CSS anchor positioning and anchor-scope enable this default enhancement; unsupported browsers retain ordinary pagination. Shared data-motion controls duration, and reduced motion removes transitions. The effect reserves ::after on the direct ol.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Current and unavailable pages

The current page and unavailable Previous control are plain spans. Demo links have real anchor destinations.

```html
<nav class="pagination" aria-label="Example pages">
  <ol role="list">
    <li><span aria-disabled="true">Previous</span></li>
    <li><span aria-current="page" aria-label="Page 1">1</span></li>
    <li><a href="#pagination-more" aria-label="Page 2">2</a></li>
    <li><a href="#pagination-glass" aria-label="Page 3">3</a></li>
    <li><a href="#pagination-more" rel="next">Next</a></li>
  </ol>
</nav>
```

### A longer range

Ellipses are passive text. Links wrap rather than stretching the page beyond its container.

```html
<nav class="pagination" aria-label="Long example page range">
  <ol role="list">
    <li><a href="#pagination-basic" rel="prev">Previous</a></li>
    <li><a href="#pagination-basic" aria-label="Page 1">1</a></li>
    <li><span aria-label="More pages">…</span></li>
    <li><span aria-current="page" aria-label="Page 8">8</span></li>
    <li><span aria-label="More pages">…</span></li>
    <li><a href="#pagination-glass" aria-label="Page 20">20</a></li>
    <li><a href="#pagination-glass" rel="next">Next</a></li>
  </ol>
</nav>
```

### Inherited glass and pill shape

The parent supplies material and shape; page links need no styling attributes.

```html
<section data-theme="dark" data-material="glass" data-shape="pill">
  <nav class="pagination" aria-label="Glass example pages">
    <ol role="list">
      <li><a href="#pagination-basic" rel="prev">Previous</a></li>
      <li><a href="#pagination-basic" aria-label="Page 1">1</a></li>
      <li><span aria-current="page" aria-label="Page 2">2</span></li>
      <li><span aria-disabled="true">Next</span></li>
    </ol>
  </nav>
</section>
```

### Application URL pattern

Replace these sample paths with routes served by your application. This is code-only to avoid navigating to unimplemented demo routes.

```html
<nav class="pagination" aria-label="Search result pages">
  <ol role="list">
    <li><a href="/search?page=1" rel="prev">Previous</a></li>
    <li><a href="/search?page=1" aria-label="Page 1">1</a></li>
    <li><span aria-current="page" aria-label="Page 2">2</span></li>
    <li><a href="/search?page=3" aria-label="Page 3">3</a></li>
    <li><a href="/search?page=3" rel="next">Next</a></li>
  </ol>
</nav>
```


---

Source: http://revacss.eristavi.org/ai/components/accordions.md

# Accordions

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Native details and summary elements provide the interaction. One accordion wrapper arranges the group; theme, shape, density, spacing, borders, depth, material and motion inherit from the parent.

HTML documentation: http://revacss.eristavi.org/components/accordions/

## Component contract

- Markup: .accordion > details > summary
- Options and states: Optional shared unique name; native open attribute.
- Styling module: reva.accordions.css
- Behaviour: Exclusive groups depend on native details name support. Inherited motion enhances expansion where intrinsic-size transitions are supported; native instant disclosure is the fallback.

- Keep summary as the first child of details. A rotating CSS chevron replaces the visual marker; native keyboard behavior remains intact; do not add button roles or manually maintained aria-expanded attributes.
- Omit name to allow multiple items to stay open. Give details a shared, unique name for native exclusive groups. Browsers without exclusive-group support still provide independent disclosure toggles. Names are document-wide, so separate accordion instances need different names.
- Use open on at most one item in an exclusive group. CSS does not add custom arrow-key navigation or force collapsed content to print.
- Motion is included in the core and accordion module: none opens instantly, subtle expands and rotates the chevron over 140ms, and expressive adds a content fade over 240ms. Height transitions require ::details-content, interpolate-size and discrete transitions; other browsers use instant native disclosure. Reduced-motion preferences disable transitions.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Independent sections

Each native disclosure opens and closes independently. The wrapper supplies spacing without extra classes on items.

```html
<div class="accordion">
  <details open>
    <summary>What does RevaCSS include?</summary>
    <p>Native HTML styling and optional components.</p>
  </details>
  <details>
    <summary>Do I need JavaScript?</summary>
    <p>These accordions work through native browser behavior.</p>
  </details>
</div>
```

### One item open at a time

Matching name attributes request an exclusive group. Use a different name for every group in your document.

```html
<div class="accordion">
  <details name="account-faq" open>
    <summary>How do I create an account?</summary>
    <p>Complete the registration form.</p>
  </details>
  <details name="account-faq">
    <summary>How do I change my details?</summary>
    <p>Open your profile settings.</p>
  </details>
</div>
```

### Inherited motion intensity

Choose motion once on a parent. Open and close each section to compare instant, subtle and expressive behaviour. Reduced motion wins; browsers without intrinsic-size transitions retain native disclosure.

```html
<section data-motion="none">
  <h3>None</h3>
  <div class="accordion">
    <details>
      <summary>How does none motion work?</summary>
      <p>The content and indicator change immediately.</p>
      <p>The browser owns the open state and keyboard behaviour.</p>
    </details>
  </div>
</section>
<section data-motion="subtle">
  <h3>Subtle</h3>
  <div class="accordion">
    <details>
      <summary>How does subtle motion work?</summary>
      <p>Content expands smoothly and the indicator rotates.</p>
      <p>The browser owns the open state and keyboard behaviour.</p>
    </details>
  </div>
</section>
<section data-motion="expressive">
  <h3>Expressive</h3>
  <div class="accordion">
    <details>
      <summary>How does expressive motion work?</summary>
      <p>Content expands with a gentle fade and a rotating indicator.</p>
      <p>The browser owns the open state and keyboard behaviour.</p>
    </details>
  </div>
</section>
```

### Inherited material and shape

Configure the wrapper once. Both native disclosures inherit glass, dark colours and roundness.

```html
<div class="accordion" data-theme="dark" data-material="glass"
     data-shape="rounded" data-gap="small">
  <details>
    <summary>Shared appearance</summary>
    <p>This disclosure follows its parent settings.</p>
  </details>
  <details>
    <summary>More information</summary>
    <p>No component attributes are repeated.</p>
  </details>
</div>
```


---

Source: http://revacss.eristavi.org/ai/components/tabs.md

# Tabs

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

A tab-style header selects its associated content panel using native radios underneath. Visible radio circles are removed; the selected tab has an accent underline and surface backing. No JavaScript is added.

HTML documentation: http://revacss.eristavi.org/components/tabs/

## Component contract

- Markup: fieldset.tabs, radio labels, .tab-panel
- Options and states: One unique radio name per instance; label immediately before its panel.
- Styling module: reva.tabs.css
- Behaviour: This is radio-selected content, not the ARIA tabs interaction contract.

- The visual presentation is a tab bar, while the underlying interaction retains radio semantics. Do not add tablist/tab roles or manually maintained aria-selected attributes. Applications requiring the ARIA tabs interaction contract need a separate behaviour layer.
- Give the fieldset a legend and every radio a label. Use one unique radio name per instance and mark exactly one radio checked. Tab enters the radio group; arrow keys select its native choices.
- Keep each tab-panel immediately after its label. Panels may contain ordinary headings, links and controls. CSS :has selects the checked radio's following panel. Without :has support, all panels remain readable; print also shows all panels.
- Theme, shape, size, density, gap, borders and fieldset material follow the parent. Radio controls are visually hidden, not removed from the focus order. Focus appears on the tab label, and native disabled choices remain unavailable. Included in complete, scoped and components builds; modular use: tokens, base and reva.tabs.css.
- A shared underline glides between selected tabs in browsers supporting CSS anchor positioning and anchor-scope. Other browsers retain a static selected border. No extra class is needed. Parent data-motion controls duration; reduced motion removes the transition. The effect reserves ::after on .tabs.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### A tab bar with two panels

Click a tab label or use native radio-group arrow keys. The selected tab is underlined; radio circles are visually hidden.

```html
<fieldset class="tabs">
  <legend>Account information</legend>
  <label>
    <input type="radio" name="account-panels" checked> Overview
  </label>
  <section class="tab-panel">
    <h3>Account overview</h3>
    <p>Your account is active.</p>
  </section>
  <label>
    <input type="radio" name="account-panels"> Preferences
  </label>
  <section class="tab-panel">
    <h3>Your preferences</h3>
    <p>Choose preferences in your application settings.</p>
    <a href="__BASE__components/form-groups/">Explore form groups</a>
  </section>
</fieldset>
```

### An independent instance

A different name keeps this selection independent of the first example.

```html
<fieldset class="tabs" data-shape="pill" data-gap="small">
  <legend>Documentation view</legend>
  <label><input type="radio" name="documentation-panels" checked> HTML</label>
  <section class="tab-panel">
    <p>Start with native elements and shared parent settings.</p>
  </section>
  <label><input type="radio" name="documentation-panels"> Styling</label>
  <section class="tab-panel">
    <p>Add a component class only when the pattern needs one.</p>
  </section>
</fieldset>
```

### An unavailable tab

Native disabled prevents selection and keyboard focus. Keep an available choice checked; a disabled label explains its unavailable state.

```html
<fieldset class="tabs">
  <legend>Project views</legend>
  <label><input type="radio" name="project-view-panels" checked> Overview</label>
  <section class="tab-panel"><h3>Project overview</h3><p>Your active project details.</p></section>
  <label><input type="radio" name="project-view-panels" disabled> Reports — unavailable</label>
  <section class="tab-panel"><h3>Reports</h3><p>This view is currently unavailable.</p></section>
</fieldset>
```


---

Source: http://revacss.eristavi.org/ai/components/disclosures.md

# Disclosures and overlays

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Native HTML supplies disclosure and popover interactions. CSS styles their surfaces without adding application behavior.

HTML documentation: http://revacss.eristavi.org/components/disclosures/

## Component contract

- Markup: details/summary, dialog, [popover]
- Options and states: Native open, popovertarget and popover attributes.
- Styling module: reva.base.css
- Behaviour: Dialog styling does not itself implement a modal workflow.

- Plain details and exclusive groups share the accordion content animation. Motion inherits from data-motion: none opens immediately, subtle expands smoothly, and expressive adds a gentle fade. The native summary marker remains unchanged; an accordion wrapper adds its rotating chevron and group layout.
- Content transitions require ::details-content, interpolate-size and discrete transitions. Unsupported browsers retain instant native disclosure; reduced motion, forced colours and print disable transitions. Complete and scoped builds include these rules; modular consumers load reva.accordions.css after tokens and base.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Native disclosure

summary toggles its details. Add open if it should start expanded.

```html
<details>
  <summary>What is included?</summary>
  <p>Native HTML foundations and optional component styles.</p>
</details>
```

### Exclusive disclosure groups

Matching name values allow one disclosure in that group to remain open. Give separate instances unique group names.

```html
<details name="demo-faq">
  <summary>Do I need JavaScript?</summary>
  <p>These disclosures work with native HTML.</p>
</details>
<details name="demo-faq">
  <summary>Can I customise the styles?</summary>
  <p>Use shared attributes and ordinary CSS.</p>
</details>
```

### Native popover

popovertarget opens this popover without JavaScript in supporting browsers. Native auto popovers support light dismissal.

```html
<button type="button" popovertarget="demo-popover">Show information</button>
<div id="demo-popover" popover>
  <h3>Helpful information</h3>
  <p>This is a native popover surface.</p>
  <button type="button" popovertarget="demo-popover" popovertargetaction="hide">Close</button>
</div>
```

### Dialog markup

open displays a non-modal dialog. This static markup does not implement modal opening or focus management; those require supported native invoker commands or a separate script. A form with method="dialog" can close an open dialog.

```html
<dialog open aria-labelledby="demo-dialog-title">
  <h3 id="demo-dialog-title">Review your changes</h3>
  <p>This example describes a non-modal dialog.</p>
  <form method="dialog"><button>Close</button></form>
</dialog>
```


---

Source: http://revacss.eristavi.org/ai/components/alerts.md

# Alerts

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Messages with one alert class. Theme, accent, shape, size, density, depth, borders, fill and material follow the parent. Attributes are optional exceptions, not required on every alert.

HTML documentation: http://revacss.eristavi.org/components/alerts/

## Component contract

- Markup: .alert
- Options and states: data-variant and data-appearance, including inherited values.
- Styling module: reva.alerts.css
- Behaviour: Static messages have no automatic live region or dismissal.

- Default: primary variant with a tinted appearance. Primary uses your inherited accent for informational messages. Success, warning, danger and neutral share the badge vocabulary. Write the meaning in text; colour alone is insufficient.
- Use ordinary div, section or paragraph markup for static messages. The alert class does not create a live region. For a message updated by your application, establish role="status" before a non-urgent update, or role="alert" for an urgent update that warrants interruption. These ARIA roles do not add interactivity.
- data-variant and data-appearance work on html, parent sections or individual exceptions. Unsupported values preserve the nearest valid ancestor setting. Decorative data-edge does not apply to alerts.
- Alerts are persistent. CSS does not provide a dismiss action; no inactive close buttons are included. Use native links for destinations and buttons only for actions implemented by your application.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### One class, no attributes

A static informational message uses the inherited accent and needs no announcement role.

```html
<div class="alert">
  <strong>Information:</strong> Your draft is saved locally.
</div>
```

### Shared status variants

Choose meaning through visible text and optional variants. Each message stays readable without relying on its colour.

```html
<div class="stack">
  <div class="alert">Information: Your next invoice arrives on Monday.</div>
  <div class="alert" data-variant="success">Success: Your changes have been saved.</div>
  <div class="alert" data-variant="warning">Warning: Your subscription expires in three days.</div>
  <div class="alert" data-variant="danger">Error: Your payment could not be processed.</div>
  <div class="alert" data-variant="neutral">Note: This project is archived.</div>
</div>
```

### Headings, lists and links

Ordinary HTML supports richer messages. Use a heading level that fits your document and descriptive links.

```html
<section class="alert" data-variant="warning" aria-labelledby="alert-review-heading">
  <h3 id="alert-review-heading">Review before continuing</h3>
  <p>Please check the following details:</p>
  <ul>
    <li>Your billing address</li>
    <li>Your preferred payment method</li>
  </ul>
  <p><a href="#main">Return to the documentation content</a></p>
</section>
```

### Parent defaults and local exceptions

Both alerts inherit appearance and shape. Only the exception needs its own variant.

```html
<section class="stack" data-variant="success" data-appearance="tinted"
         data-shape="rounded" data-density="comfortable">
  <div class="alert">Success: Your profile is complete.</div>
  <div class="alert" data-variant="warning">Warning: Verify your email address.</div>
</section>
```

### Tinted, solid and outline

The same appearance setting configures badges and alerts. Outline keeps an opaque surface backing for readable content.

```html
<div class="stack" data-variant="success">
  <div class="alert">Success: Tinted appearance.</div>
  <div class="alert" data-appearance="solid">Success: Solid appearance.</div>
  <div class="alert" data-appearance="outline">Success: Outline appearance.</div>
</div>
```

### Glass with a solid exception

Load the optional glass extension. Parent material carries into alerts; a local solid section stops it. Unsupported blur retains opaque backing.

```html
<section class="stack" data-theme="dark" data-material="glass">
  <div class="alert">Information: A frosted message surface.</div>
  <section data-material="solid">
    <div class="alert">Information: An opaque local exception.</div>
  </section>
</section>
```

### Application announcement markup

This markup is for an application that later updates the message. Keep the region in the document before updating its contents; use urgent alerts sparingly.

```html
<!-- Non-urgent feedback; populate after a completed action. -->
<div class="alert" data-variant="success" role="status"></div>

<!-- Urgent feedback; populate when immediate attention is needed. -->
<div class="alert" data-variant="danger" role="alert"></div>
```


---

Source: http://revacss.eristavi.org/ai/components/badges.md

# Badges

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Passive status labels, counts and categories. One badge class identifies the component; theme, accent, size, shape, density, depth, borders and material follow the parent. No attributes are required on individual badges.

HTML documentation: http://revacss.eristavi.org/components/badges/

## Component contract

- Markup: .badge
- Options and states: data-variant and data-appearance, including inherited values.
- Styling module: reva.badges.css
- Behaviour: Passive labels; no automatic announcements or interaction.

- Use a span for a plain label. A badge has no automatic alert/status role, focusability or live announcement. For changing information, choose a live region on its meaningful containing element only when announcements are needed.
- Write the status in visible text. Colour alone must not carry its meaning. Counts need context, for example “3 unread messages.” Use native links and buttons for actions; a badge itself is a passive label.
- data-variant (primary, success, warning, danger, neutral) and data-appearance (tinted, solid, outline) configure badges on html, any parent, or an optional local exception. Unsupported values keep the nearest valid parent setting. data-fill retains its existing gradient/solid meaning; decorative data-edge does not apply to badges.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### One class, no attributes

The default badge is tinted and uses the inherited accent. Use ordinary text around a count to explain it.

```html
<p>Product update <span class="badge">New</span></p>
<p>Unread messages <span class="badge">3</span></p>
```

### Configure a parent once

Both badges inherit the parent. The same settings can be placed on html for the whole site.

```html
<section data-theme="dark" data-accent="violet"
         data-shape="pill" data-size="large"
         data-appearance="solid" data-depth="flat">
  <p>
    <span class="badge">Featured</span> <span class="badge">New</span></p>
</section>
```

### Status colours from parents

A status on a parent applies to all badges inside it. Each label states its meaning in text.

```html
<div class="row">
  <section data-variant="primary">
    <span class="badge">New</span>
  </section>
  <section data-variant="success">
    <span class="badge">Approved</span>
  </section>
  <section data-variant="warning">
    <span class="badge">Pending</span>
  </section>
  <section data-variant="danger">
    <span class="badge">Overdue</span>
  </section>
  <section data-variant="neutral">
    <span class="badge">Archived</span>
  </section>
</div>
```

### Tinted, solid and outline

Appearance is separate from status and from the shared gradient setting.

```html
<div class="row" data-variant="success">
  <section data-appearance="tinted">
    <span class="badge">Tinted</span>
  </section>
  <section data-appearance="solid">
    <span class="badge">Solid</span>
  </section>
  <section data-appearance="outline">
    <span class="badge">Outline</span>
  </section>
</div>
```

### Shared size and shape

Size and shape are inherited. Labels can wrap instead of widening a narrow page.

```html
<div class="row" data-shape="pill">
  <section data-size="small">
    <span class="badge">Small</span>
  </section>
  <section data-size="medium">
    <span class="badge">Medium</span>
  </section>
  <section data-size="large">
    <span class="badge">Large</span>
  </section>
</div>
<p data-shape="square">
    <span class="badge">Square</span></p>
```

### Optional local exceptions

The parent remains the default. Override only the label or subtree that needs to differ; plain buttons keep their existing API.

```html
<section data-variant="success" data-appearance="solid">
  <p>
    <span class="badge">Approved</span></p>
  <p><span class="badge" data-variant="warning">Pending review</span></p>
  <section data-appearance="outline">
    <p>
    <span class="badge">Paid</span></p>
  </section>
</section>
```

### Inherited glass with a solid exception

Load the optional glass stylesheet. Badges inherit material; solid stops it locally. Unsupported blur falls back to the normal opaque badge.

```html
<section data-material="glass" data-theme="dark"
         data-shape="pill" data-variant="primary">
  <p>
    <span class="badge">Glass label</span></p>
  <section data-material="solid">
    <p>
    <span class="badge">Solid exception</span></p>
  </section>
</section>
```

### A count inside a sized action

The badge remains relative to the action text while preserving shared size and an optional local badge override. The button label supplies count context.

```html
<div class="row" data-size="large">
  <button type="button">Messages <span class="badge" data-variant="neutral">3 unread</span></button>
</div>
```


---

Source: http://revacss.eristavi.org/ai/components/progress.md

# Progress and meters

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Native progress and meter elements already inherit the accent and available width. No component class is required.

HTML documentation: http://revacss.eristavi.org/components/progress/

## Component contract

- Markup: progress, meter
- Options and states: Native value/max and meter thresholds; accessible labels.
- Styling module: reva.base.css
- Behaviour: Values and native indeterminate presentation are not calculated by CSS.

- Use progress for task completion. A missing value means indeterminate progress; native animation and appearance follow the browser. Provide a label and visible completion text.
- Use meter for a known measurement within a range, not loading. min, max, low, high and optimum describe its scale and meaningful thresholds. Native meter colours may reflect those thresholds rather than your accent.
- Your application or server supplies values. CSS cannot calculate completion or update measurements. Progress and meter have no added glass material or custom animation.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Known completion

A native label names the progress indicator; visible text communicates its value.

```html
<div class="form-group">
  <label for="upload-completion">Upload progress</label>
  <progress id="upload-completion" value="65" max="100">65%</progress>
  <small>65% complete</small>
</div>
```

### Indeterminate progress

Omit value when completion is unknown. Keep a visible explanation while the browser renders its native indicator.

```html
<div class="form-group">
  <label for="indexing-progress">Preparing your files</label>
  <progress id="indexing-progress">Working</progress>
  <small>This may take a moment.</small>
</div>
```

### A measured range

Meter describes a bounded measurement. The browser uses its native threshold presentation.

```html
<div class="form-group">
  <label for="storage-capacity">Storage used</label>
  <meter id="storage-capacity" min="0" max="100" low="50"
         high="85" optimum="20" value="72">72%</meter>
  <small>72 GB of 100 GB used</small>
</div>
```


---

Source: http://revacss.eristavi.org/ai/components/loading.md

# Loading indicators

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

A single spinner class supplies decorative CSS motion. Visible text explains what is happening; your application decides when to show or remove the indicator.

HTML documentation: http://revacss.eristavi.org/components/loading/

## Component contract

- Markup: .spinner
- Options and states: Decorative aria-hidden plus visible loading text.
- Styling module: reva.loading.css
- Behaviour: Application owns loading state; reduced motion stops the spinner.

- The spinner is decorative: use aria-hidden="true" and keep meaningful text beside it. A static example needs no live-region role.
- For application updates, establish a role="status" region before changing its text. aria-busy on the affected content can communicate that work is incomplete; your application manages its value.
- Size and motion follow shared parent settings. data-motion="none" and reduced-motion preferences stop the custom spinner. The visible message remains available.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Visible loading text

The text carries the meaning, so the spinner is hidden from assistive technology.

```html
<p><span class="spinner" aria-hidden="true"></span> Loading your records…</p>
```

### Without animation

Configure motion on the parent to keep a stationary indicator.

```html
<section data-motion="none" data-size="large">
  <p><span class="spinner" aria-hidden="true"></span> Preparing your report…</p>
</section>
```

### Application-owned status

Keep the live region in place before updating it; hide the decorative spinner once loading finishes.

```html
<!-- Update this established region from your application. -->
<p role="status">
  <span class="spinner" aria-hidden="true"></span>
  Loading results…
</p>
```

### Loading inside a sized action

The action supplies size once; its spinner follows the resolved text size without multiplying that setting again. Applications control disabled and loading state.

```html
<section class="row" data-size="large">
  <button type="button" disabled>
    <span class="spinner" aria-hidden="true"></span>
    Preparing report…
  </button>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/skeletons.md

# Skeletons

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

A skeleton class draws a decorative loading placeholder. Keep a real loading message available; your application controls when placeholders are replaced by content.

HTML documentation: http://revacss.eristavi.org/components/skeletons/

## Component contract

- Markup: .skeleton
- Options and states: Hide decorative placeholders; retain meaningful loading text.
- Styling module: reva.skeletons.css
- Behaviour: Application owns aria-busy and replacing placeholders.

- Hide decorative placeholders from assistive technology using aria-hidden="true" on their containing wrapper. Do not place essential text inside a skeleton.
- aria-busy on the affected region communicates incomplete updates. Your application must clear busy state when the content arrives. A static documentation example adds no automatic live announcements.
- Theme, roundness and motion inherit. data-motion="none" pauses shimmer, reduced-motion preferences remove it, and forced colours use static boundaries. Placeholders are omitted from print.
- Use --re-skeleton-width and --re-skeleton-height on a parent or individual exception. Included in all core builds; modular use: tokens, base and reva.skeletons.css.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Loading card content

Visible text explains the waiting state; only the placeholders are decorative.

```html
<article class="card" aria-busy="true" aria-label="Project details">
  <p>Loading project details…</p>
  <div class="stack" aria-hidden="true">
    <span class="skeleton" style="--re-skeleton-width: 55%;"></span>
    <span class="skeleton"></span>
    <span class="skeleton" style="--re-skeleton-width: 80%;"></span>
  </div>
</article>
```

### Shared stationary placeholders

The parent disables motion. An optional height gives the first placeholder a media shape.

```html
<section data-motion="none" data-shape="rounded">
  <p>Preparing a preview…</p>
  <div class="stack" aria-hidden="true">
    <span class="skeleton" style="--re-skeleton-height: 8rem;"></span>
    <span class="skeleton" style="--re-skeleton-width: 60%;"></span>
  </div>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/empty-states.md

# Empty states

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One empty-state class centres ordinary content with readable spacing. Your application decides when the collection is empty; CSS only arranges the message.

HTML documentation: http://revacss.eristavi.org/components/empty-states/

## Component contract

- Markup: .empty-state
- Options and states: Ordinary heading, explanation and real next action.
- Styling module: reva.empty-states.css
- Behaviour: Applications determine when there are no results.

- Explain what is missing and the next useful action. Keep headings at the appropriate document level and use native links for navigation.
- An empty state is content, not automatically an alert. For application-updated results, choose an appropriate established announcement region only when needed.
- Spacing follows density, text follows the theme, and native actions keep their inherited styling. Combine with card when a surface is useful; card can receive optional glass material.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### No records yet

A heading and explanation are enough when there is no meaningful action to offer.

```html
<section class="empty-state" aria-labelledby="empty-records-heading">
  <h3 id="empty-records-heading">No records yet</h3>
  <p>Your records will appear here after you add them.</p>
</section>
```

### A useful next step

Combine existing card and button styles with the empty-state layout.

```html
<section class="card empty-state" aria-labelledby="empty-start-heading">
  <h3 id="empty-start-heading">Start your first project</h3>
  <p>Explore the guide to choose your page defaults and components.</p>
  <a class="button" href="__BASE__guide/">Read the guide</a>
</section>
```

### No chart data

Reuse the existing empty-state instead of drawing a misleading empty or zero chart.

```html
<section class="empty-state" aria-labelledby="empty-chart-title"><h3 id="empty-chart-title">No revenue data yet</h3><p>The chart will appear after a reporting period is available.</p></section>
```

### Unavailable metric

Missing values are distinct from a measured zero.

```html
<article class="card"><dl><dt>Forecast revenue</dt><dd><output>Unavailable</output></dd><dd><small>No forecast has been supplied.</small></dd></dl></article>
```


---

Source: http://revacss.eristavi.org/ai/components/card-patterns.md

# Card patterns

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Extend the existing card class with native header, figure and footer elements. No extra classes are needed for the card's structural sections.

HTML documentation: http://revacss.eristavi.org/components/card-patterns/

## Component contract

- Markup: .card with header, figure and footer
- Options and states: Native structure; row for optional action arrangement.
- Styling module: reva.card-patterns.css
- Behaviour: The components bundle includes the card surface and these patterns.

- Use article for self-contained content or section with an appropriate heading for a page section. Heading levels should fit the surrounding document.
- Header and footer separators follow shared borders and density. Native media keeps its responsive sizing and meaningful alternative text. Existing row and grid classes arrange actions or multiple cards.
- Theme, shape, depth, density and optional glass material belong to the existing card. The new module adds structure without replacing its surface styling.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Header, content and actions

Native elements identify the structural sections of the card.

```html
<article class="card">
  <header>
    <h3>Project overview</h3>
    <p><span class="badge">New</span> RevaCSS documentation</p>
  </header>
  <p>Start with inherited page defaults, then add only local exceptions.</p>
  <footer class="row">
    <a class="button" href="__BASE__guide/">Read the guide</a>
    <a href="__BASE__attributes/">View defaults</a>
  </footer>
</article>
```

### A media card

Intrinsic image dimensions reserve its natural space. The figure adds a visible caption.

```html
<article class="card">
  <figure>
    <img src="__BASE__images/example-landscape.svg" width="640" height="360"
         alt="Illustrated hills beneath a pale sky">
    <figcaption>A quiet landscape</figcaption>
  </figure>
  <h3>Explore the possibilities</h3>
  <p>Native content and responsive media share the same surface.</p>
  <footer><a href="__BASE__components/media/">Explore media styling</a></footer>
</article>
```

### Shared glass material

Only the enclosing section needs theme and material settings.

```html
<section data-theme="dark" data-material="glass" data-shape="rounded">
  <article class="card">
    <header><h3>Frosted account summary</h3></header>
    <p>A native header and footer follow the inherited card surface.</p>
    <footer><a href="__BASE__themes/glass/">Explore glass material</a></footer>
  </article>
</section>
```


---

Source: http://revacss.eristavi.org/ai/components/metrics.md

# Metric cards

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

Use the existing card class and native term/value pairs for readable values, trends and comparisons. No metric-specific classes or data attributes.

HTML documentation: http://revacss.eristavi.org/components/metrics/

## Component contract

- Markup: .card > dl > dt, dd > output
- Options and states: Existing shared attributes; visible trend and comparison text.
- Styling module: reva.card-patterns.css
- Behaviour: Backend supplies values; native meter/progress optional. No JavaScript or new attributes.

- Use .card on an article, with a direct dl containing dt for the metric label and dd > output for its value. Further dd elements contain comparison text, context or a native progress/meter.
- Theme, palette, shape, density, typography, border, depth, decorative edges and optional materials reuse the existing card contract. Place shared attributes on html, a parent or the card.
- Write the trend and comparison period in words. An increase is not always good: costs and incidents can rise. Colour and arrows are never the only explanation.
- The backend supplies formatted values, comparison text and native progress/meter values. CSS does not calculate statistics, animate counters, fetch data or announce updates on a timer.
- Use the existing grid layout to arrange multiple cards. Long values wrap, the DOM reading order stays unchanged and no chart or icon is required.
- Load the complete/scoped build, or tokens, base, components and reva.card-patterns.css. Materials and motion remain optional.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Value and comparison

One existing class; label, value and comparison stay readable in HTML.

```html
<article class="card">
  <dl>
    <dt>Total revenue</dt>
    <dd><output>€42,500</output></dd>
    <dd>Up 8.4% versus August</dd>
    <dd><small>Recognised revenue in September.</small></dd>
  </dl>
</article>
```

### Decrease with context

Explicit language separates the direction from its business meaning.

```html
<article class="card">
  <dl>
    <dt>Support incidents</dt>
    <dd><output>12</output></dd>
    <dd>Down 25% versus August</dd>
    <dd><small>Fewer incidents this month.</small></dd>
  </dl>
</article>
```

### Value and target

A labelled native meter shows a bounded value; the number and target remain visible.

```html
<article class="card">
  <dl>
    <dt>Team utilisation</dt>
    <dd><output>78%</output></dd>
    <dd>Target range: 70–85%</dd>
    <dd><label>Utilisation <meter min="0" max="100" low="70" high="85" optimum="78" value="78">78%</meter></label></dd>
  </dl>
</article>
```


---

Source: http://revacss.eristavi.org/ai/components/timeline.md

# Activity timeline

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One class on an ordered list presents events and audit history with native timestamps.

HTML documentation: http://revacss.eristavi.org/components/timeline/

## Component contract

- Markup: ol.timeline > li
- Options and states: Semantic time and event text; inherited shared appearance.
- Styling module: reva.timeline.css
- Behaviour: Server supplies ordered events; no JavaScript.

- Use ol.timeline with one li per event. Ordinary headings or paragraphs describe the event; time with datetime supplies an unambiguous timestamp.
- Keep chronological or reverse chronological DOM order explicit. CSS does not reorder, group, fetch or announce events.
- Spacing, typography, palette and border thickness inherit. Markers are decorative: event meaning must remain visible in text. Logical properties support RTL.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Recent activity

One structural class and ordinary event text.

```html
<ol class="timeline">
  <li><p><strong>Workspace refresh shared</strong></p><p>Ready for review.</p><time datetime="2026-10-03T09:40:00+03:00">October 3 · 09:40</time></li>
  <li><p><strong>Report completed</strong></p><time datetime="2026-10-02T16:30:00+03:00">October 2 · 16:30</time></li>
</ol>
```


---

Source: http://revacss.eristavi.org/ai/components/calendar.md

# Calendar grid

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

A native table displays a month, dated events and a highlighted date. It is a schedule view, not another date-picker control.

HTML documentation: http://revacss.eristavi.org/components/calendar/

## Component contract

- Markup: table.calendar > caption, thead, tbody
- Options and states: Weekday headers, time[datetime], aria-current=date and native event links.
- Styling module: reva.calendar.css
- Behaviour: Server-rendered month display; no date picker, range selection or booking engine.

- Use table.calendar with a caption, weekday headers with scope="col", and ordinary tbody rows. Supply time[datetime] for each date; leave cells outside the month empty.
- aria-current="date" marks an application-supplied highlighted date. This example fixes October 5 for demonstration; CSS does not read the current date or calculate weekdays.
- Events use ordinary links to details or server routes. Month navigation can use real links. Table navigation retains native semantics; there is no ARIA grid or custom keyboard model.
- The application supplies dates, time zones, availability and event data. Range selection, booking, drag-and-drop and date-picker logic are outside this CSS module.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### A month with linked events

A Monday-first October 2026 schedule with two complete event destinations.

```html
<table class="calendar"><caption>October 2026 · Project schedule</caption><thead><tr><th scope="col"><abbr title="Monday">Mon</abbr></th><th scope="col"><abbr title="Tuesday">Tue</abbr></th><th scope="col"><abbr title="Wednesday">Wed</abbr></th><th scope="col"><abbr title="Thursday">Thu</abbr></th><th scope="col"><abbr title="Friday">Fri</abbr></th><th scope="col"><abbr title="Saturday">Sat</abbr></th><th scope="col"><abbr title="Sunday">Sun</abbr></th></tr></thead><tbody><tr><td></td><td></td><td></td><td><time datetime="2026-10-01">1</time></td><td><time datetime="2026-10-02">2</time></td><td><time datetime="2026-10-03">3</time></td><td><time datetime="2026-10-04">4</time></td></tr>
<tr><td><time datetime="2026-10-05" aria-current="date">5</time><ul><li><a href="#calendar-review" aria-label="Design review, October 5">Review</a></li></ul></td><td><time datetime="2026-10-06">6</time></td><td><time datetime="2026-10-07">7</time></td><td><time datetime="2026-10-08">8</time></td><td><time datetime="2026-10-09">9</time></td><td><time datetime="2026-10-10">10</time></td><td><time datetime="2026-10-11">11</time></td></tr>
<tr><td><time datetime="2026-10-12">12</time><ul><li><a href="#calendar-call" aria-label="Team call, October 12">Call</a></li></ul></td><td><time datetime="2026-10-13">13</time></td><td><time datetime="2026-10-14">14</time></td><td><time datetime="2026-10-15">15</time></td><td><time datetime="2026-10-16">16</time></td><td><time datetime="2026-10-17">17</time></td><td><time datetime="2026-10-18">18</time></td></tr>
<tr><td><time datetime="2026-10-19">19</time></td><td><time datetime="2026-10-20">20</time></td><td><time datetime="2026-10-21">21</time></td><td><time datetime="2026-10-22">22</time></td><td><time datetime="2026-10-23">23</time></td><td><time datetime="2026-10-24">24</time></td><td><time datetime="2026-10-25">25</time></td></tr>
<tr><td><time datetime="2026-10-26">26</time></td><td><time datetime="2026-10-27">27</time></td><td><time datetime="2026-10-28">28</time></td><td><time datetime="2026-10-29">29</time></td><td><time datetime="2026-10-30">30</time></td><td><time datetime="2026-10-31">31</time></td><td></td></tr></tbody></table>
<section id="calendar-review"><h3>Design review · October 5</h3><p>Review the workspace draft at 10:00.</p></section>
<section id="calendar-call"><h3>Team call · October 12</h3><p>Plan the next week at 09:30.</p></section>
```


---

Source: http://revacss.eristavi.org/ai/components/message-thread.md

# Message thread

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One ordered-list layout arranges existing cards as conversation messages, keeping sender names, timestamps and reading order explicit.

HTML documentation: http://revacss.eristavi.org/components/message-thread/

## Component contract

- Markup: ol.message-thread > li > article.card
- Options and states: Existing data-variant=primary marks outgoing messages; native sender/time/footer and optional avatar.
- Styling module: reva.message-thread.css
- Behaviour: Ordered static history. Sending, real-time updates and announcements belong to the application.

- Use ol.message-thread > li > article.card. Existing cards supply surfaces and optional materials; existing avatars are optional. Header and footer remain semantic elements.
- Use the existing data-variant="primary" on an outgoing message card to align it to the logical end. Include a visible sender such as "You"; alignment or colour alone must not identify ownership.
- Messages remain in DOM order. Native time[datetime] identifies each timestamp. Visible text can supply delivery state; CSS does not invent delivery or read status.
- The application supplies composing, sending, live updates and unread announcements. This module adds no role="log", automatic scrolling or live-region behaviour to a static history.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### A support conversation

Existing cards and avatars with one thread layout class.

```html
<ol class="message-thread" role="list" aria-label="Order support conversation">
<li><article class="card"><header><span class="avatar" aria-hidden="true">AM</span><strong>Alex · Support</strong><time datetime="2026-10-04T10:00:00+03:00">10:00</time></header><p>Hello! How can I help with your order?</p></article></li>
<li><article class="card" data-variant="primary"><header><strong>You</strong><time datetime="2026-10-04T10:02:00+03:00">10:02</time></header><p>Could you tell me the dimensions of the Arc lamp?</p><footer>Delivered</footer></article></li>
<li><article class="card"><header><strong>Alex · Support</strong><time datetime="2026-10-04T10:03:00+03:00">10:03</time></header><p>Of course: 32 × 18 × 42 cm.</p></article></li>
</ol>
```


---

Source: http://revacss.eristavi.org/ai/components/charts.md

# Charts

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

The dashboard’s existing line/area and doughnut charts now share a reusable figure class and stylesheet. No additional chart types or duplicate dashboard charts.

HTML documentation: http://revacss.eristavi.org/components/charts/

## Component contract

- Markup: figure.chart > svg, figcaption
- Options and states: Backend supplies coordinates, title/description and exact data.
- Styling module: reva.charts.css
- Behaviour: Existing line/area and doughnut patterns; no new chart types.

- Use figure.chart with a direct SVG and figcaption. Supply a viewBox, role=img and unique title/desc IDs connected with aria-labelledby. Provide exact data in visible HTML or a linked table.
- Direct polyline is the line, polygon is the area, circles without pathLength are points; g > line draws the grid and SVG text supplies labels. Coordinates and scales are calculated by your backend, not by CSS.
- Doughnut segments are circles with pathLength=100. The backend supplies stroke-dasharray and stroke-dashoffset. --re-chart-color selects each segment colour; --re-chart-ring-width controls the stroke (22 by default). SVG rotates segments around the viewBox centre.
- Always identify series and values in text. Forced colours and print can remove colour distinctions; descriptions and tables preserve meaning. No automatic legends, tooltips or data fetching.
- The full/components/scoped builds include chart presentation. Modular consumers can load reva.charts.css with tokens and base. Existing chart geometry is reused; no new chart types are introduced.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Existing revenue chart

The same line/area chart already used by the dashboard, now without demo-only chart classes.

```html
<figure class="chart"><svg viewBox="0 0 540 210" role="img" aria-labelledby="revenue-svg-title revenue-svg-desc"><title id="revenue-svg-title">Monthly revenue, April to September 2026</title><desc id="revenue-svg-desc">Revenue rises from 28,400 euros in April to 42,500 euros in September, with a dip in June. April 28,400; May 32,100; June 29,700; July 36,800; August 39,200; September 42,500 euros.</desc><g><line x1="50" x2="500" y1="150" y2="150"></line><text x="0" y="154">10k</text></g><g><line x1="50" x2="500" y1="110" y2="110"></line><text x="0" y="114">20k</text></g><g><line x1="50" x2="500" y1="70" y2="70"></line><text x="0" y="74">30k</text></g><g><line x1="50" x2="500" y1="30" y2="30"></line><text x="0" y="34">40k</text></g><polygon points="50,190 50,76.4 140,61.599999999999994 230,71.2 320,42.80000000000001 410,33.19999999999999 500,20 500,190"></polygon><polyline points="50,76.4 140,61.599999999999994 230,71.2 320,42.80000000000001 410,33.19999999999999 500,20"></polyline><circle cx="50" cy="76.4" r="4"></circle><circle cx="140" cy="61.599999999999994" r="4"></circle><circle cx="230" cy="71.2" r="4"></circle><circle cx="320" cy="42.80000000000001" r="4"></circle><circle cx="410" cy="33.19999999999999" r="4"></circle><circle cx="500" cy="20" r="4"></circle><text x="50" y="208" text-anchor="middle">Apr</text><text x="140" y="208" text-anchor="middle">May</text><text x="230" y="208" text-anchor="middle">Jun</text><text x="320" y="208" text-anchor="middle">Jul</text><text x="410" y="208" text-anchor="middle">Aug</text><text x="500" y="208" text-anchor="middle">Sep</text></svg><figcaption>Six months of recognised revenue.</figcaption></figure>
```

### Existing channel chart

The same doughnut chart already used by the dashboard, with all shares in its accessible description.

```html
<figure class="chart"><svg viewBox="0 0 160 160" role="img" aria-labelledby="channels-svg-title channels-svg-desc"><title id="channels-svg-title">Revenue share by channel</title><desc id="channels-svg-desc">Direct 55 percent, partners 30 percent, referrals 15 percent.</desc><circle style="--re-chart-color: var(--re-primary)" cx="80" cy="80" r="58" pathLength="100" stroke-dasharray="55 45" stroke-dashoffset="0"></circle><circle style="--re-chart-color: color-mix(in srgb,var(--re-primary) 55%,var(--re-surface))" cx="80" cy="80" r="58" pathLength="100" stroke-dasharray="30 70" stroke-dashoffset="-55"></circle><circle style="--re-chart-color: color-mix(in srgb,var(--re-primary) 25%,var(--re-surface))" cx="80" cy="80" r="58" pathLength="100" stroke-dasharray="15 85" stroke-dashoffset="-85"></circle><text x="80" y="77" text-anchor="middle" style="font-size:19px">€42.5k</text><text x="80" y="96" text-anchor="middle" style="font-size:7px;letter-spacing:.6px">TOTAL REVENUE</text></svg><figcaption>Share of September revenue</figcaption></figure>
```


---

Source: http://revacss.eristavi.org/ai/components/lists.md

# List groups

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One list-group class arranges ordinary list items with shared surface colours, borders, shape and density. Native lists without this class retain their existing typography.

HTML documentation: http://revacss.eristavi.org/components/lists/

## Component contract

- Markup: ul.list-group or ol.list-group
- Options and states: Keep role=list; ordinary links for destinations.
- Styling module: reva.lists.css
- Behaviour: Ordinary collections, not interactive listboxes.

- Use ul for an unordered collection and ol when order matters. Keep role="list" because list-style:none can affect list announcements in some browsers.
- Use links for destinations. A list item needs no extra class; its only-child link gets a comfortable minimum target height. Do not use listbox roles for ordinary navigation.
- aria-current marks the actual current destination. Status badges remain passive content inside a list item.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Text items with badges

Standard list markup supports richer content without per-item classes.

```html
<ul class="list-group" role="list">
  <li>Profile <span class="badge" data-variant="success">Complete</span></li>
  <li>Billing <span class="badge" data-variant="warning">Review needed</span></li>
  <li>Notifications enabled</li>
</ul>
```

### Linked items

A labelled navigation landmark contains real documentation destinations.

```html
<nav aria-label="Related documentation">
  <ul class="list-group" role="list">
    <li><a href="__BASE__guide/">Getting started</a></li>
    <li><a href="__BASE__attributes/">Shared attributes</a></li>
    <li><a href="__BASE__components/lists/" aria-current="page">List groups</a></li>
  </ul>
</nav>
```


---

Source: http://revacss.eristavi.org/ai/components/avatars.md

# Avatars

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

One avatar class supports an image or explicit initials. Size, shape, borders and colours follow shared parent defaults.

HTML documentation: http://revacss.eristavi.org/components/avatars/

## Component contract

- Markup: .avatar on img or an initials span
- Options and states: alt text or full-name labelling when needed.
- Styling module: reva.avatars.css
- Behaviour: Failed-image replacement must be supplied by the application.

- Use meaningful alt text when the image identifies a person. Use alt="" when a nearby visible name already gives the same information.
- For standalone initials, supply the full name through an accessible label. Initials are not an automatic image-loading fallback; your application or server chooses which markup to render.
- data-shape="pill" makes the square avatar round. Use --re-avatar-size for a custom base dimension; data-size scales it. Set attributes on a parent for shared defaults.
- Constrained avatars keep a square aspect ratio as their available width decreases. Shape changes the boundary, not the aspect ratio.

## HTML examples

Examples are snippets from the documentation, not independent applications. Make IDs and radio names unique, replace demonstration URLs and supply the application's data and handlers.

### Initials with a full name

The visible name gives context, so the initials are decorative.

```html
<div class="row" data-shape="pill">
  <span class="avatar" aria-hidden="true">RE</span>
  <span>Revaz Eristavi</span>
</div>
```

### Image markup

This documentation illustration demonstrates cropping. Replace the source with a real profile image.

```html
<div class="row" data-shape="pill">
  <img class="avatar" src="__BASE__images/example-landscape.svg"
       width="44" height="44" alt="">
  <span>Example profile</span>
</div>
```

### Inherited sizes and shapes

Each parent supplies a size. A full accessible name accompanies standalone initials.

```html
<div class="row" data-shape="pill">
  <section data-size="small"><span class="avatar" role="img" aria-label="Alex Morgan">AM</span></section>
  <section data-size="medium"><span class="avatar" role="img" aria-label="Jamie Lee">JL</span></section>
  <section data-size="large"><span class="avatar" role="img" aria-label="Sam Taylor">ST</span></section>
</div>
```


---

Source: http://revacss.eristavi.org/ai/demos.md

# Complete website starters

RevaCSS 2.0.0 · Erisian

Generated from the same source manifests and examples as the documentation. Use this version's API; check the getting-started guide for publication availability.

These are full demonstration websites. Open a demo, use its customizer and download the HTML. Download linked stylesheets and update their paths for your own hosting. Replace fictional content and connect product behaviour to your application.

## Marketing website

A complete landing page with product sections, pricing, FAQ and a contact-form preview.

http://revacss.eristavi.org/demos/marketing/

## Workspace dashboard

Metrics, project progress, SVG charts and activity in a responsive app shell.

http://revacss.eristavi.org/demos/dashboard/

## Shop

A catalogue, category pages, product details and a sample shopping bag.

http://revacss.eristavi.org/demos/shop/

## Blog and journal

Stories, full articles, reading navigation, category archives and an author profile.

http://revacss.eristavi.org/demos/blog/

## Living Blueprint

An original scroll composition: interface pieces assemble through inherited class-based movement, zoom and rotation.

http://revacss.eristavi.org/demos/living-blueprint/

## Effects Lab

Aura, Spring lift and Layered depth: JavaScript-free experimental candidates for a future release, with native SVG tap previews on the cards.

http://revacss.eristavi.org/demos/effects-lab/