Countdown

Composable countdown display with tabular numerals using the public DuskMoon Core 1.19.9 CSS contract.

Installation

npm install @duskmoon-dev/el-countdown

import '@duskmoon-dev/el-countdown/register';

Live Demo

<el-dm-countdown animated aria-label="Time remaining">
  <span class="countdown-value">02</span> minutes
</el-dm-countdown>

Properties

| Property | Type | Default | Description | | ———— | ———–– | —–– | ————————— | —— | ––––– | | size | 'sm' | 'md' | 'lg' | 'md' | Value size | | color | theme color | — | Text color | | animated | boolean | false | Enable tick animation class | | transition | boolean | false | Enable color transitions |

Composition and accessibility

Application code owns the timer and accessible announcement. Mark direct numeric children with class="countdown-value"; add countdown-tick while a value changes.