Playbar
Persistent bottom now-playing dock (workspace-modules S5), mounted as the last child of an app frame (below the shell's __main). Three zones: now playing (thumb · title/artist) · transport (buttons + scrubber + timestamps) · utilities (hidden ≤768px). Per the pluggable-engines principle the bar itself is layout + skin only — the demo below wires a native <audio> engine in ~110 lines, exactly how a consumer wires theirs. Consumed here: Icon Button · Slider · Popover · Media Player playlist pattern. Mounts below the App Shell main zone.
a11y (built in): every control is a real <button type="button"> with an aria-label, and both the scrubber and the volume slider are native <input type="range"> (.lb-slider) — arrow-key seekable, with a :focus-visible ring on the thumb. Shuffle/repeat state lives on aria-pressed, which is also the selector the accent styling hangs off, so the attribute is the source of truth rather than a class; the artwork is a decorative <img alt="">; below 768px __utils is display: none, so queue and volume need another home on mobile. Your engine owns the rest — the reference wiring flips the play button's aria-label between Play and Pause, keeps aria-valuetext on the scrubber (1:12 of 3:32), and marks the playing queue row aria-current="true".
The bar — fully wired
Live with the full 18-track album: play/pause · prev/next · shuffle and repeat toggles (accent + tinted when on) · seek · queue popover reusing the media-player playlist pattern (scrolls past ~4 rows, active row marked) · volume popover with mute. Repeat wraps the queue; shuffle randomizes the next pick.
Usage
Pure CSS bar. .lb-playbar → __now (__thumb + __titles) · __transport (__buttons + __scrub with the canonical .lb-slider-track-wrap holding the real .lb-slider range — keyboard-seekable) · __utils (queue/volume as consumed Popovers). Toggle buttons carry aria-pressed — pressed renders accent. Wire your engine to the controls exactly as this page's demo script does; view source for the ~110-line reference wiring.