trentuna/asw
8
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Port vault section (5 pages) and docs section (11 pages)

Browse source 
- content/vault/: _index.md, diff.md, session.md, status.md, tasks.md, wikilinks.md
- content/docs/: _index.md, introduction, tokens, reset, semantic-html,
  components, data-attributes, navigation, layouts, charts, chroma, accordion-dialog

96 pages build clean (was 36). Docs use sidebar nav + TOC layout.
Vault uses sidebar with section fallback (no vault menu configured yet).
URLs fixed: playground refs → asw.trentuna.com.

Closes: asw#12, asw#9
This commit is contained in:
Vigilio Desto 2026-04-10 18:40:50 +02:00
parent cbe44d845c
commit da1d02ccd1
Signed by: vigilio
GPG key ID: 159D6AD58C8E55E9
19 changed files with 2462 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

362
content/docs/data-attributes.md Normal file
View file

@ -0,0 +1,362 @@
---
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