control.css

Interactive controls: dial, slider, button variants, hold-to-commit, popover.

src/control.css · 5 blocks · blocks that belong to a custom element are on that element's page

.ov-btn

⭐ AND THE FURNITURE BELONGS TO THE ASSEMBLY, NOT THE MEMBER - but only for the split button, and the difference is the point. A SPLIT BUTTON IS ONE ACTION with a menu attached, so its ticks and its leading bar mark the ends of the whole thing; left per-member, machina drew three framed cells and neo drew two bars, which is two controls sitting next to each other. A SEGMENTED GROUP is several exclusive CHOICES, so its furniture stays on each member, where it separates them - and in a theme with no border that bar is the only thing that does.

Also styled in chrome.css. Written into markup by src/ov-allocator.js, src/ov-hold.js, src/ov-player.js, src/ov-sound-switch.js, src/ov-switch.js, src/ov-timeline.js, src/ov-transport.js, so an element sets it for you. Used on allocator.html, annunciator.html, aux.html, baseline.html, chrome.html, control.html, corner.html, countdown.html and 16 more.

.ov-btn-group

⭐ ONE SHAPE, SEVERAL CONTROLS. A segmented group and a split button are the same idea with different contents: the members announce separately, because they do separate things, but the ASSEMBLY is a single object. Two things follow from that and both were missing from the split button, which said "two controls in one shape" in a comment and drew two shapes.

1. The seam between members is a single rule, not two adjacent borders. 2. Only the OUTER edges carry the theme's corner treatment. A member in the middle of a shape has no outside to cut, and a member at one end cuts only the two corners that ARE on the outside.

🔴 The cut edge has to follow the clip. The diagonals are drawn from tokens and know nothing about clip-path, so a member whose corner is not cut but whose size token survives sprouts a stroke across the middle of the assembly. Every corner is zeroed here and then given back by position.

Used on control.html.

.ov-pop

No still. A popover lives in the top layer and is nothing until it is opened.

The Popover API puts this in the TOP LAYER, which is the same lesson the dialog taught: .ov-finish sets isolation:isolate, so anything positioned inside a themed surface is painted within that surface's stacking context and later sections cover it. Nothing but the top layer escapes that.

Also styled in chrome.css. Used on control.html.

.ov-slider

A real <input type=range>. The keyboard behaviour, the announcement and the value semantics come free, and none of them are worth reimplementing.

Written into markup by src/ov-player.js, src/ov-timeline.js, src/ov-transport.js, so an element sets it for you. Used on bevel.html, control.html.

.ov-sound

Written into markup by src/ov-annunciator.js, src/ov-sound-switch.js, so an element sets it for you.