ornament.css

Decorative GL. See ov-ornament.js: it encodes nothing, on purpose.

Two shapes, and they need opposite positioning, which is why this is not one rule with a modifier:

<ov-ornament> IN FLOW. A strip, a block, a spacer. It takes part in the panel's layout like any other child and has a default height so it does not collapse.

.ov-ornament--behind OUT OF FLOW. A backdrop for the box it is in, filling it and sitting under the content, which is the per-panel shader background.

src/ornament.css · 1 block · blocks that belong to a custom element are on that element's page

.ov-has-ornament

No still yet.

A panel that carries a backdrop needs a stacking context of its own, or the absolutely positioned accent escapes to the nearest positioned ancestor. .ov-panel is already position:relative, so this is for everything else.

No demo page uses it, and no script writes it.