{{! Progress (ADR 0051): an ordered list of steps; each has its circle (the step's number, counted by CSS in the site's digits, or an icon), and its text, in a box or not. Each step draws its half of the line to its neighbours. Up to a step: CSS by the done-N class; as visitors scroll: view.js marks the steps reached. }}
<ol {{@attrs}}>{{#items}}<li class="sv-progress__step"><span class="sv-progress__marker" aria-hidden="true">{{#marker}}<span class="sv-progress__glyph sv-glyph-{{icon}}"></span>{{/marker}}</span><div class="sv-progress__content{{#box}} sv-card-{{box}}{{#boxCustom}} sv-card-custom{{/boxCustom}}{{/box}}"{{#boxCustom}} style="--sv-custom-card:{{boxCustom}}"{{/boxCustom}}>{{#marker}}<span class="sv-progress__number" aria-hidden="true"></span>{{/marker}}<h3 class="sv-progress__title"{{@edit items.title}}>{{{title}}}</h3>{{#text}}<p class="sv-progress__text"{{@edit items.text}}>{{text}}</p>{{/text}}</div></li>{{/items}}</ol>