WORK-005
ID:WORK-005Status:pending

Build stat Rune

Priority:mediumComplexity:unknown
claude/align-sidenav-styling-4MuxV View source

Relationships

Implements 1
Branches 3
claude/align-sidenav-styling-4MuxV current pending
claude/file-naming-convention-LJdwR pendingmain pendingchangeset-release/main pending
History 2
  1. ebe0c64
    Content editedby Claude
    Migrate plan files to {% ref %} xref syntax (WORK-021)
  2. d275b2a
    Created (pending)by Claude
    Add work items for 16 unbuilt runes from SPEC-008

Summary

Key metric display — a prominent number with label and optional trend indicator. Used for dashboards, KPI sections, and data highlights. Alias: metric. This is a core rune.

Attributes

NameTypeDefaultRequiredDescription
valueString—YesThe metric value (e.g., "99.9%", "$4.2M")
labelString—YesWhat the metric measures
trendString—NoTrend direction: up, down, flat
changeString—NoChange amount (e.g., "+12%")
iconString—NoIcon name from theme icon registry

Content Model

  • Self-closing or minimal content
  • Optional paragraph child becomes a description/context line

Transform Output

  • typeof: Stat
  • Tag: <div>
  • Properties: value (span), label (span), trend, change (span), icon
  • Refs: description (p, if content provided)

Implementation Tasks

  1. Create schema in packages/runes/src/tags/stat.ts
  2. Add RuneConfig entry in packages/runes/src/config.ts — mostly declarative (modifiers for trend, structure injection for value/label/change)
  3. Write CSS in packages/lumina/styles/runes/stat.css
  4. Import CSS in packages/lumina/index.css
  5. Write tests in packages/runes/test/tags/stat.test.ts
  6. Create inspector fixture
  7. Run CSS coverage tests

Dependencies

None — fully declarative, no JS needed.