Foundations

Status & indicators

State glyphs, badges, progress, progress ring and meter.

State glyph

Status, priority, run, sync, and source sets for dense lists. :selected_for_dev draws the same empty ring as :todo.

Five sets

status / priority / run / sync / source side by side. Aliases (status_glyph, priority_glyph, …) take flicker-shaped assigns.

status

priority

run

sync

source

<.status_glyph status={:in_progress} />
<.priority_glyph priority={:high} />
<.run_glyph state={:verifying} />
<.sync_glyph state={:live} />
<.source_glyph source={:repo} />

API reference

Props and slots, introspected from the component.

state_glyph/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the svg.
`kind`*	`status \| priority \| run \| sync \| source`	`—`	Glyph set: status circles, priority bars, run-pipeline, sync, or source-kind states.
`label`	`string`	`nil`	Accessible name. Decorative (aria-hidden) when omitted — pair with visible text.
`size`	`sm \| md`	`"md"`	sm is 12px; md is 14px.
`value`*	`any`	`—`	Set value (atom or string). See the set lists in the moduledoc.

status_glyph/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the svg.
`label`	`string`	`nil`	Accessible name; decorative when omitted.
`size`	`sm \| md`	`"md"`	sm is 12px; md is 14px.
`status`*	`any`	`—`	Workflow status (atom or string).

priority_glyph/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the svg.
`label`	`string`	`nil`	Accessible name; decorative when omitted.
`priority`*	`any`	`—`	Priority (atom or string).
`size`	`sm \| md`	`"md"`	sm is 12px; md is 14px.

run_glyph/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the svg.
`label`	`string`	`nil`	Accessible name; decorative when omitted.
`size`	`sm \| md`	`"md"`	sm is 12px; md is 14px.
`state`*	`any`	`—`	Run-pipeline state (atom or string).

sync_glyph/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the svg.
`label`	`string`	`nil`	Accessible name; decorative when omitted.
`size`	`sm \| md`	`"md"`	sm is 12px; md is 14px.
`state`*	`any`	`—`	Sync state (atom or string).

source_glyph/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the svg.
`label`	`string`	`nil`	Accessible name; decorative when omitted.
`size`	`sm \| md`	`"md"`	sm is 12px; md is 14px.
`source`*	`any`	`—`	Source kind (atom or string).

Badge

Status pills — colors × variants × sizes.

Colors

neutral, primary, accent, info, success, warning, danger.

neutral primary accent success warning danger

Variants

soft (default), solid, and outline.

soft solid outline

Sizes

sm, md (default), lg.

sm md lg

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`color`	`neutral \| primary \| accent \| info \| success \| warning \| danger`	`"neutral"`	Semantic color token for the badge surface.
`size`	`sm \| md \| lg`	`"md"`	Badge padding and type scale.
`variant`	`soft \| solid \| outline`	`"soft"`	Surface style: soft tint, solid fill, or outline border.
Slots
`:inner_block`*	Badge label content.

Progress and meter

Progress communicates task completion. Meter communicates a scalar measurement in a known range, with optional low, high, and optimum regions.

Task progress

Determinate and indeterminate progress use role=progressbar.

Measurements

Meter exposes min, max, value, and semantic range regions.

Ring

shape="ring" is an SVG completion circle. completed/scope is the flicker-shaped alias of value/max. The track uses --lantern-border-strong so 7/19 stays readable.

7 / 19

<.progress shape="ring" value={7} max={19} label="Completion">7 / 19</.progress>
<.progress shape="ring" completed={7} scope={19} size="sm" label="Progress" />

API reference

Props and slots, introspected from the component.

progress/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`color`	`primary \| accent \| success \| warning \| danger \| info \| neutral`	`"accent"`	Semantic fill / stroke color token.
`completed`	`integer`	`nil`	Flicker alias of ring `value`; used with `scope`.
`indeterminate`	`boolean`	`false`	Force indeterminate bar (also true when bar value is nil).
`label`	`string`	`nil`	Accessible name. Bars use "Progress" when omitted. A ring without a label or caption is decorative (`aria-hidden`).
`max`	`integer`	`nil`	Ring total. Defaults to 100 when only `value` is set. Ignored on bars.
`scope`	`integer`	`nil`	Flicker alias of ring `max`.
`shape`	`bar \| ring`	`"bar"`	`bar` is a track fill; `ring` is the SVG completion circle.
`shimmer`	`boolean`	`false`	Animated sheen on the determinate bar fill (e.g. active upload).
`size`	`sm \| md \| lg`	`"md"`	Bar track height, or ring diameter (sm 28px, md 40px, lg 48px).
`value`	`integer`	`nil`	Bar: percent 0–100 (nil is indeterminate). Ring: completed amount.
Slots
`:inner_block`	Optional caption beside a ring (counts, short copy).

meter/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`high`	`any`	`nil`	Lower bound of the high region; enables optimum-based state coloring.
`label`	`string`	`"Meter"`	Accessible name for aria-label.
`low`	`any`	`nil`	Upper bound of the low region; enables optimum-based state coloring.
`max`	`any`	`100`	Upper bound of the range.
`min`	`any`	`0`	Lower bound of the range.
`optimum`	`any`	`nil`	Optimal value; region distance drives data-state (optimal/suboptimal/critical). Defaults to the range midpoint, (min + max) / 2, per HTML <meter>.
`size`	`sm \| md \| lg`	`"md"`	Track height (sm ~0.375rem … lg ~0.75rem).
`value`*	`any`	`—`	Current measurement (number).
`value_text`	`string`	`nil`	Human-readable value for aria-valuetext (e.g. "7.2 pH").