asw/content/docs/data-attributes.md

title	description	type	weight	date	tags	ai-disclosure	ai-model	ai-provider
Data Attributes	Complete reference for ASW's data-attribute vocabulary — roles, states, text modifiers, nav, and agentic-specific patterns.	docs	50	2026-04-09	data-attributes css reference	generated	claude-sonnet-4-5	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")

<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

<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

<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

<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

<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 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

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<!-- 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

<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+.

<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

<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.

<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 — data-layout values in full
• Semantic HTML — how plain elements are styled without attributes
• Components — callouts, tasks, and session blocks in detail