blob: 0b2c49a57f0a69705331e06555da1a2f916477e9 [file] [log] [blame]
<style include="navi-colors-css">
:host {
align-items: center;
display: flex;
}
span {
background: var(--navi-step-indicator-color);
border-radius: 50%;
display: inline-block;
height: 8px;
margin: 0 4px;
width: 8px;
}
span.active {
background: var(--navi-step-indicator-active-color);
}
.screen-reader-only {
clip: rect(0, 0, 0, 0);
position: fixed;
}
</style>
<template is="dom-repeat" items="[[dots_]]">
<span class$="[[getActiveClass_(index, model.active)]]"></span>
</template>
<div class="screen-reader-only">
[[computeLabel_(model.active, model.total)]]
</div>