ActionBar
A bottom command strip + readout wells (container role="group" + aria-label): command buttons + statistic / task-progress / media transport / music rhythm readouts, three surfaces (charcoal/dark/light). Distinct from oas-toolbar (a tool palette) — the action-bar is bottom commands + readouts, and readout wells are vocabulary the toolbar lacks; because the center slot routinely carries readout wells (progressbar and other readout regions are not command controls), the container does not claim the toolbar role (whose roving arrow-key navigation contract presumes a pure command set) and degrades to an honest group with natively tabbable command buttons.
Basic usage
slot="start" / the default slot hold command buttons (oas-action-bar-button), slot="center" holds readout wells (oas-action-bar-well container + oas-statistic-well / oas-task-progress-well / oas-transport-well / oas-music-well), slot="end" holds end content.
Command buttons + statistic wells
Command buttons (oas-action / active / plain)
Clicking dispatches oas-action (detail { value, active } — active is the state at click time); the active boolean attribute is the selected state (controlled display — the host listens and writes back); active-tint customizes the highlight color (one of the 11 preset names or any CSS color, e.g. record-red); plain removes fills within groups.
Record button (record-red active-tint) and toggle feedback
Click "Record" to watch the oas-action feedback and the active state flip (host write-back demo).
Surfaces (theme)
theme="charcoal" (default, constant-ink surface) / "dark" (constant ink · deep) / "light" (theme-native); the constant-ink surfaces use the --oas-color-ink* semantic tokens and do not flip with the host theme (transport-bar visual anchor).
Three surfaces
Task progress well (oas-task-progress-well)
label / progress (0-100, controlled display — host-driven) / detail; the cancel button dispatches oas-cancel (detail { label }; the component only emits — it does not remove itself, the host decides what follows); progress 100 keeps the finished state.
When fully empty (label/detail both absent and no progress set) the well collapses entirely (host data-empty reflection, no layout footprint, same as oas-statistic-well) — no idle capsule when there is no task.
Export task progress + cancel
Click the × in the well to watch the oas-cancel feedback; the "Export" button drives the progress forward.
Media transport well (oas-transport-well)
frames (current frame, controlled display — keyboard seek only emits, the host writes back) / frame-rate (fps, the timecode conversion base) / duration (total frames, optional — drives the /total segment and the seek upper bound) / label / detail. The timecode reads HH:MM:SS:FF (pure display conversion — no drop-frame / playback clock); the timecode doubles as a scrub slider (role="slider", accessible name label > built-in copy): after focusing, ←/→ step ±1 frame, ↑/↓ ±1 second, Home/End jump to first/last frame, each dispatching oas-seek (detail { frames }, proposal already clamped to [0, duration]).
When fully empty (all of label/frames/frame-rate/duration/detail absent) the well collapses entirely (host data-empty reflection, no layout footprint, same as oas-statistic-well).
Timecode scrub (keyboard seek, host write-back)
Focus the timecode with Tab, then press ←/→ (±1 frame), ↑/↓ (±1 second), Home/End (first/last frame) to watch oas-seek and the timecode advance (host write-back demo).
Music rhythm well (oas-music-well)
bars / beats (current bar / beat, 1-based, together driving the bar.beat position segment) / tempo (BPM) / meter (time signature, shown verbatim) / label / detail; pure readout (no interaction, no events — the rhythm position is host-driven display, the well has no beat clock); the detail segment auto-composes {tempo} BPM · {meter} · {detail}.
When fully empty (all six attributes absent) the well collapses entirely (no layout footprint, same as oas-statistic-well).
Rhythm position readout
RTL
With dir="rtl" on the container the component mirrors automatically: data-rtl hook + logical-properties-only layout (the well area's auto margin follows the writing direction).
RTL mirror
API
oas-action-bar
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
theme | Surface: charcoal (default, constant-ink surface) / dark (constant ink · deep) / light (theme-native); constant-ink surfaces use the --oas-color-ink* semantic tokens and do not flip with the host theme; invalid values fall back to charcoal with a one-time warning | string | charcoal |
Slots
| Name | Description |
|---|---|
| default | Command area (oas-action-bar-button or any command control) |
center | Readout well area (oas-action-bar-well + well children; pushed to the far end of the writing direction) |
end | End area |
start | Leading command area |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-action-bar-bg | var(--oas-color-ink) |
--oas-action-bar-fg | var(--oas-color-on-ink) |
--oas-action-bar-height | 44px |
oas-transport-well
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
detail | Supplementary info (resolution / color space etc., composed with the auto frame-rate text; hides when empty) | string | — |
duration | Total frames (optional — drives the /total segment, the seek upper bound and aria-valuemax) | string | — |
frame-rate | Frame rate fps (timecode conversion base; when absent/invalid the timecode degrades to a raw frame count) | string | — |
frames | Current frame (controlled display — keyboard seek only emits, the host writes back to drive the readout; invalid falls back to 0, negatives clamp to 0, beyond duration clamps to the last frame) | string | — |
label | Readout label (hides when empty) | string | — |
Events
| Event | Description |
|---|---|
oas-seek | Dispatched on keyboard seek (←/→ ±1 frame, ↑/↓ ±1 second, Home/End first/last frame; RTL mirrors the horizontal arrows); detail { frames } (proposal already clamped); controlled display — the component never changes frames itself, the host writes back |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-action-bar-well-bg | color-mix(in srgb, var(--oas-color-on-ink) 10%, transparent) |
--oas-action-bar-well-height | 32px |
oas-music-well
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
bars | Current bar (1-based; with beats drives the bar.beat position segment, hidden when both are absent) | string | 1 |
beats | Current beat (1-based; with bars drives the bar.beat position segment, hidden when both are absent) | string | 1 |
detail | Supplementary info (composed with the auto BPM/meter text; hides when empty) | string | — |
label | Readout label (hides when empty) | string | — |
meter | Time signature (e.g. 4/4, shown verbatim; hides when empty) | string | — |
tempo | Tempo BPM (invalid values drop the segment) | string | — |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-action-bar-well-bg | color-mix(in srgb, var(--oas-color-on-ink) 10%, transparent) |
--oas-action-bar-well-height | 32px |