---
title: "Data Attributes"
description: "Complete reference for ASW's data-attribute vocabulary — roles, states, text modifiers, nav, and agentic-specific patterns."
type: docs
weight: 50
date: 2026-04-09
tags: ["data-attributes", "css", "reference"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-5"
ai-provider: "Anthropic"

---

ASW uses `data-*` attributes as its entire styling API. No class names are needed. Agents can write semantic HTML with intent expressed as data attributes; the stylesheet does the rest.

---

## data-role

Semantic role indicator. Applied to the element that *is* the component.

| Value | Element | Description |
|-------|---------|-------------|
| `primary` | `<a>` | Filled CTA button |
| `secondary` | `<a>` | Outlined CTA button |
| `card` | any | Card container |
| `command-box` | `<div>` | Install/command pill with prefix glyph |
| `status-card` | `<div>` | Bordered status block |
| `diff` | `<div>` | Inline diff viewer (legacy; prefer `data-diff`) |
| `log-entry` | any | Single log line, bottom border |
| `list-item` | any | Minimal padding list item |
| `prev-next` | `<div>` | Prev/next navigation pair |
| `tag-cloud` | `<div>` | Tag cluster |
| `timeline` | `<div>` | Simple left-spine timeline (legacy; prefer `data-layout="timeline"`) |

```html
<a href="/docs/" data-role="primary">Read docs →</a>
<a href="/github/" data-role="secondary">Source</a>

<div data-role="command-box">
  <span class="prefix">$</span><!-- .prefix is one of ASW's intentional class exceptions -->
  npm install agentic-css
</div>
```

---

## data-status

Semantic status state. Renders with mono font and status-appropriate colour.

| Value | Colour | Use |
|-------|--------|-----|
| `awake` | accent (green) | Active, running |
| `sleeping` | muted, italic | Idle, paused |
| `blocked` | red | Waiting, error state |
| `danger` | red | Critical state |
| `warning` | orange | Caution |
| `unknown` | dim | Indeterminate |

```html
<span data-status="awake">online</span>
<span data-status="blocked">waiting on DNS</span>
<span data-status="sleeping">idle since 03:00</span>
```

---

## data-task

Task list item with state glyph. Apply to `<li>` elements.

| Value | Glyph | Colour |
|-------|-------|--------|
| `todo` | ○ | orange |
| `done` | ● | accent |
| `blocked` | ◐ | red |

```html
<ul>
  <li data-task="done">Deploy nginx config</li>
  <li data-task="todo">Update DNS records</li>
  <li data-task="blocked">TLS cert — waiting on propagation</li>
</ul>
```

---

## data-callout

Advisory block with left border accent and optional title.

| Value | Border colour |
|-------|--------------|
| *(default)* | blue |
| `tip` | accent (green) |
| `warning` | orange |
| `error` | red |

```html
<div data-callout="tip">
  <span data-callout-title>Tip</span>
  <p>Use data attributes instead of class names.</p>
</div>

<div data-callout="warning">
  <span data-callout-title>Warning</span>
  <p>This resets the token cascade.</p>
</div>
```

---

## data-text

Text modifier. Supports multiple space-separated values.

| Value | Effect |
|-------|--------|
| `dim` | `var(--text-3)` — muted |
| `accent` | `var(--accent)` — green accent |
| `eyebrow` | mono, uppercase, spaced — section label |
| `small` | `var(--text-sm)` |
| `mono` | monospace font |
| `tagline` | larger, lighter — subtitle treatment |

```html
<p data-text="eyebrow">Getting started</p>
<h1>Token System</h1>
<p data-text="tagline">How the custom property hierarchy is structured.</p>

<p data-text="dim small">Last updated 2026-04-10</p>
<code data-text="mono accent">--accent</code>
```

---

## data-layout

Layout pattern. See [Layouts](/docs/layouts/) for the full reference.

Common values: `docs`, `hero`, `install`, `actions`, `grid-2`, `grid-3`, `card-grid`, `stats`, `prose`, `fluid`, `timeline`, `report`.

---

## data-nav

Navigation variant. Applied to `<nav>` elements.

| Value | Description |
|-------|-------------|
| `sidebar` | Vertical nav list, no pipe separators |
| `toc` | TOC nav, compact, left-border active indicator |

```html
<nav data-nav="sidebar" aria-label="Documentation">
  <ul>
    <li><a href="/docs/introduction/" aria-current="page">Introduction</a></li>
    <li><a href="/docs/tokens/">Token System</a></li>
  </ul>
</nav>
```

---

## data-subnav

Inline breadcrumb-style section nav. Slash-separated. `aria-current="page"` marks the active item.

```html
<nav data-subnav>
  <a href="/vigilio/">index</a>
  <a href="/vigilio/now">now</a>
  <a href="/vigilio/status" aria-current="page">status</a>
</nav>
```

---

## data-tooltip / data-tooltip-position

CSS-only tooltip on hover and focus. No JavaScript.

```html
<span data-tooltip="Explained here">term</span>

<!-- Bottom placement -->
<span data-tooltip="Below the element" data-tooltip-position="bottom">term</span>
```

Tooltip content comes from the attribute value. Max-width is `var(--tooltip-max-width)`.

---

## data-badge

Inline mono pill. Used for token labels, version indicators, or icon tags.

```html
<span data-badge>&lt;/&gt;</span>
<span data-badge>v2.1</span>
<span data-badge>data=</span>
```

---

## data-diff / data-diff-line / data-diff-file

Semantic diff viewer. Renders a code diff with standard +/- gutter markers.

```html
<div data-diff>
  <span data-diff-file>src/tokens.css</span>
  <span data-diff-line="hunk">@@ -12,6 +12,8 @@</span>
  <span data-diff-line="context">  --text: var(--gray-1);</span>
  <span data-diff-line="removed">  --accent: var(--green-5);</span>
  <span data-diff-line="added">  --accent: var(--green-4);</span>
  <span data-diff-line="added">  --accent-hover: var(--green-3);</span>
</div>
```

---

## data-session / data-mode

Session metadata block. Used to render agent session records.

```html
<section data-session data-mode="autonomous">
  <header>
    <h3>Session 2847</h3>
    <p data-text="dim small">2026-04-10 · 28 min · claude-sonnet-4-6</p>
  </header>
  <ul>
    <li data-task="done">Token layer audit</li>
    <li data-task="todo">Deploy docs site</li>
  </ul>
</section>
```

`data-mode` values: `autonomous` (blue), `interactive` (accent).

---

## data-wikilink / data-unresolved

Knowledge-graph link style. Dotted underline distinguishes internal wiki links from standard hyperlinks.

```html
<a href="/vault/sessions/" data-wikilink>Sessions</a>

<!-- Unresolved — link target doesn't exist yet -->
<a href="#" data-wikilink data-unresolved>Missing Note</a>
```

---

## data-tag / data-hash

Inline taxonomy labels.

```html
<a href="/tags/agentic/" data-tag>agentic</a>
<span data-hash>a3f9c12</span>
```

`data-tag` prepends a `#` character. `data-hash` renders in mono with tight letter-spacing.

---

## data-redacted

Privacy-aware redaction. Renders content as a black bar. Assistive technology should use `aria-label` for a screen-reader replacement.

```html
<!-- Full redaction -->
<span data-redacted aria-label="redacted">sk-ant-abc123</span>

<!-- Hover to reveal -->
<span data-redacted="reveal" aria-label="classified content">classified</span>

<!-- Shows [REDACTED] label, hides children -->
<span data-redacted="label" aria-label="API key">sk-ant-abc123</span>
```

---

## ai-disclosure

Marks AI content provenance with a left border indicator.

| Value | Border |
|-------|--------|
| `ai-generated` | subtle accent |
| `ai-assisted` | lighter accent |
| `autonomous` | full accent |
| `mixed` | amber |

```html
<section ai-disclosure="autonomous">
  <p>This section was written entirely by an autonomous agent.</p>
</section>
```

Add `data-show-disclosure` to render an inline `[autonomous]` badge after the content.

---

## data-reading-progress

CSS-only scroll progress bar. Apply to `<body>` or any scrolling container. Uses `animation-timeline: scroll()` — Chrome 115+, Firefox 110+.

```html
<body data-reading-progress>
```

Renders a thin accent-colored bar fixed to the top of the viewport.

---

## data-visible

Responsive visibility control.

| Value | Effect |
|-------|--------|
| `desktop` | Hidden on mobile |
| `mobile` | Hidden on desktop |

```html
<span data-visible="desktop">Full label</span>
<span data-visible="mobile">Short</span>
```

---

## data-abstract / data-byline / data-section

Document metadata patterns for structured article content.

```html
<article>
  <header>
    <h1>Title</h1>
    <p data-byline>By Vigilio Desto · 2026-04-10</p>
    <p data-abstract>A concise summary of the article's argument and scope.</p>
  </header>
  
  <section data-section>
    <h2 data-section-header>Introduction</h2>
    <p>Body content.</p>
  </section>
</article>
```

---

## Related

- [Layouts](/docs/layouts/) — `data-layout` values in full
- [Semantic HTML](/docs/semantic-html/) — how plain elements are styled without attributes
- [Components](/docs/components/) — callouts, tasks, and session blocks in detail