zero-hour 1.3.0 → 1.3.2

package/README.md

@@ -55,6 +55,8 @@ initCountdownTimers({
   selector: 'countdown-timer',
   onDone: (el) => {
     // The component dispatches: el.dispatchEvent(new CustomEvent('done'))
+    // Note: if the timer is already complete (e.g. user opened the page after the target time),
+    // `initCountdownTimers` will call `onDone` immediately (catch-up).
     el.classList.add('is-done');
   },
   // Optional styles:
@@ -123,6 +125,7 @@ el?.start();
 | `time` | `HH:MM[:SS]` | `00:00:00` | Target time. |
 | `utc` | `UTC±H[:MM]` or `±H[:MM]` | `UTC+0` | UTC offset used to compute the target moment. Examples: `utc="UTC+03:00"`, `utc="UTC-5"`. |
 | `units` | `string` | `"d:h:m:s"` | Visible groups pattern using `d`, `h`, `m`, `s` separated by `:` (e.g. `"h:m:s"`). Empty/invalid value falls back to showing all. |
+| `mode` | `"static"` \| `"scroll"` | `"static"` | Digit transition mode. `scroll` animates digits (rolling effect), `static` swaps without scroll. |
 
 <br>
 
@@ -130,11 +133,12 @@ el?.start();
 
 | Method | Description |
 |-------------------|--------------------------------------------------------------------------------------------------|
-| `initCountdownTimers({ selector?, onDone?, stylesheet? }): HTMLElement[]` | Finds elements by selector (default: `countdown-timer`), subscribes to the `done` event (when `onDone` is provided), and optionally applies styles to each element (`stylesheet?: CSSStyleSheet \| string \| null`). When a string is provided, it is applied via `adoptedStyleSheets` when supported, otherwise via a `<style>` fallback inside the shadow root. |
+| `initCountdownTimers({ selector?, onDone?, stylesheet? }): HTMLElement[]` | Finds elements by selector (default: `countdown-timer`), subscribes to the `done` event (when `onDone` is provided), and calls `onDone` immediately if a timer is already complete at init time (catch-up). Also optionally applies styles to each element (`stylesheet?: CSSStyleSheet \| string \| null`). When a string is provided, it is applied via `adoptedStyleSheets` when supported, otherwise via a `<style>` fallback inside the shadow root. |
 | `start(): void` | Starts/restarts the countdown (only runs when `digits-url` is set). |
 | `stop(): void` | Stops the timer and clears the scheduled tick. |
 | `reset(): void` | Clears the “done fired” flag and either starts again (if `autostart=true`) or renders a static initial value. |
 | `isRunning(): boolean` | Returns `true` if the timer is running and the next tick is scheduled. |
+| `isDone(): boolean` | Returns `true` if the computed target moment is in the past (logically complete), regardless of whether a `done` event listener was attached in time. |
 | `adoptStylesheet(sheet: CSSStyleSheet): void` | Replaces `adoptedStyleSheets` inside the component’s shadow root. |
 
 <br>
@@ -144,6 +148,7 @@ el?.start();
 - Updates tick **exactly on second boundaries** (schedules the next tick to the next full second) to keep the display stable.
 - Days render as **two digits** and are capped at **99**.
 - `units` controls which groups (d/h/m/s) are visible. Separators are auto-hidden when `separator-url` is not set, or when a separator is not needed between visible groups.
+- `mode="scroll"` enables rolling digit transitions; default is `static` (no scroll).
 - The `done` event fires once per run (after `reset()` it can fire again).
 - Digit sprite must be horizontal, frames left-to-right: `0,1,2,3,4,5,6,7,8,9`. The frame index equals the digit.
 

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=`:host {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=`:host {
   display: block;
   width: 100%;
   container-type: inline-size;
@@ -35,6 +35,27 @@
 .zh__digit {
   aspect-ratio: var(--zh-digit-aspect, 9 / 12);
   width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.zh__digit-track {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(0);
+}
+
+.zh--mode-scroll .zh__digit-track {
+  transition: transform var(--zh-scroll-duration, 375ms)
+    var(--zh-scroll-timing, cubic-bezier(0.445, 0.05, 0.55, 0.95));
+}
+
+.zh__digit-face {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
   background-image: var(--zh-digits-url);
   background-repeat: no-repeat;
   /* Digits sprite is horizontal (frames left-to-right). */
@@ -51,4 +72,4 @@
   white-space: nowrap;
   clip-path: inset(50%);
 }
-`,T=p;function z(r){const t=r.charCodeAt(0)-48;return t>=0&&t<=9?t:0}function u(r){return r<0?0:r}const d={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},f={hours:0,minutes:0,seconds:0};function m(r){return"adoptedStyleSheets"in r}function b(r){try{const t=new CSSStyleSheet;return t.replaceSync(r),t}catch{return null}}const x=b(p);function y(r){const t=Math.floor(r/1e3),s=t%60,e=Math.floor(t/60)%60,n=Math.floor(t/3600),i=Math.floor(n/24),o=n%24;return{d:i,h:o,m:e,s,totalSec:t}}function E(r){return String(r).padStart(2,"0")}function g(r,t){return[...String(r).padStart(t,"0")]}function F(r,t,s){if(!r.hasAttribute(t))return s;const e=r.getAttribute(t);return e==null||e===""?!0:e!=="false"}function w(r){if(r==null)return null;const t=r.trim();if(!t)return null;const s=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!s)return null;const e=Number(s[1]),n=Number(s[2]),i=Number(s[3]);return!Number.isFinite(e)||!Number.isFinite(n)||!Number.isFinite(i)?null:{year:e,month:n,day:i}}function _(r){if(r==null)return{...f};const t=r.trim();if(!t)return{...f};const s=t.split(":"),e=Number(s[0]??"0"),n=Number(s[1]??"0"),i=Number(s[2]??"0");return{hours:Number.isFinite(e)?e:0,minutes:Number.isFinite(n)?n:0,seconds:Number.isFinite(i)?i:0}}function v(r){if(r==null)return null;const t=r.trim();if(!t)return null;const s=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!s)return null;const e=Number(s[1]),n=Number(s[2]),i=Number(s[3]??"0");return!Number.isFinite(e)||!Number.isFinite(n)||!Number.isFinite(i)||e<0||e>23||n<0||n>59||i<0||i>59?null:{hours:e,minutes:n,seconds:i}}function S(r){if(r==null)return null;let t=r.trim();if(!t)return null;/^utc/i.test(t)&&(t=t.slice(3));let s=1;if(t[0]==="+"?t=t.slice(1):t[0]==="-"&&(s=-1,t=t.slice(1)),!t)return null;const[e,n="0"]=t.split(":"),i=Number(e),o=Number(n);if(!Number.isFinite(i)||!Number.isFinite(o))return null;const l=i*60+o;return s*l}function C(){if(typeof window>"u"||!("location"in window))return null;const r=window.location?.search??"";if(!r)return null;const t=new URLSearchParams(r),s={},e=t.get("date")?.trim();e&&(s.date=e);const n=t.get("time")?.trim();n&&(s.time=n);const i=t.get("utc")?.trim();i&&(s.utc=i);const o=t.get("units")?.trim();return o&&(s.units=o),Object.keys(s).length?s:null}function k(r){const t=(r??"").trim().toLowerCase();if(!t)return d;const s=t.split(":").map(h=>h.trim()).filter(Boolean);if(!s.length)return d;const e=new Set(s),n=e.has("d"),i=e.has("h"),o=e.has("m"),l=e.has("s");return!n&&!i&&!o&&!l?d:{showDays:n,showHours:i,showMinutes:o,showSeconds:l}}class c extends HTMLElement{static defaultStylesheet=x;static observedAttributes=["digits-url","separator-url","autostart","date","time","utc","units"];shadow=this.attachShadow({mode:"open"});digitsUrl=null;separatorUrl=null;autostart=!0;durationMs=0;targetEpochMs=null;startEpochMs=null;nextTickTimeout=null;doneFired=!1;rootEl;daysEl;hoursEl;minutesEl;secondsEl;a11yEl;sep0El;sep1El;sep2El;styleEl=null;showDays=!0;showHours=!0;showMinutes=!0;showSeconds=!0;connectedCallback(){this.render(),this.readAttributes(),this.autostart?this.start():this.renderStaticInitial()}disconnectedCallback(){this.stop()}attributeChangedCallback(t,s,e){if(!this.isConnected)return;const n=this.isRunning();this.readAttributes(),this.doneFired=!1,n&&this.autostart?this.start():this.renderStaticInitial()}start(){this.stop(),this.digitsUrl&&(this.durationMs=this.targetEpochMs!=null?this.targetEpochMs-Date.now():0,this.startEpochMs=Date.now(),this.tick(),this.scheduleNextSecondBoundary())}stop(){this.nextTickTimeout!=null&&(window.clearTimeout(this.nextTickTimeout),this.nextTickTimeout=null),this.startEpochMs=null}reset(){this.doneFired=!1,this.autostart?this.start():this.renderStaticInitial()}isRunning(){return this.startEpochMs!=null&&this.nextTickTimeout!=null}readAttributes(){this.rootEl||this.render();const t=C();this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=F(this,"autostart",!0);const s=k(t?.units??this.getAttribute("units"));this.showDays=s.showDays,this.showHours=s.showHours,this.showMinutes=s.showMinutes,this.showSeconds=s.showSeconds;const e=w(this.getAttribute("date")),i=w(t?.date??null)??e,o=_(this.getAttribute("time")),h=v(t?.time??null)??o,a=S(this.getAttribute("utc")),D=S(t?.utc??null)??a??0;if(!i)this.targetEpochMs=null;else{const N=Date.UTC(i.year,i.month-1,i.day,h.hours,h.minutes,h.seconds);this.targetEpochMs=N-D*60*1e3}if(this.durationMs=0,!this.digitsUrl){this.setTextFallback("—:—:—:—");return}this.rootEl.style.setProperty("--zh-digits-url",`url("${this.digitsUrl}")`),this.separatorUrl?this.rootEl.style.setProperty("--zh-sep-url",`url("${this.separatorUrl}")`):this.rootEl.style.removeProperty("--zh-sep-url"),this.applyUnitsVisibility()}renderStaticInitial(){if(this.targetEpochMs!=null){const t=Date.now(),s=u(this.targetEpochMs-t),{d:e,h:n,m:i,s:o}=y(s);this.setDigits({d:e,h:n,m:i,s:o})}else this.setDigits({d:0,h:0,m:0,s:0})}render(){this.applyStyles(null),this.rootEl=document.createElement("div"),this.rootEl.className="zh",this.daysEl=document.createElement("div"),this.daysEl.className="zh__group",this.hoursEl=document.createElement("div"),this.hoursEl.className="zh__group",this.minutesEl=document.createElement("div"),this.minutesEl.className="zh__group",this.secondsEl=document.createElement("div"),this.secondsEl.className="zh__group",this.sep0El=document.createElement("span"),this.sep0El.className="zh__sep",this.sep1El=document.createElement("span"),this.sep1El.className="zh__sep",this.sep2El=document.createElement("span"),this.sep2El.className="zh__sep",this.a11yEl=document.createElement("span"),this.a11yEl.className="zh__a11y",this.a11yEl.setAttribute("aria-live","polite"),this.rootEl.append(this.daysEl,this.sep0El,this.hoursEl,this.sep1El,this.minutesEl,this.sep2El,this.secondsEl,this.a11yEl),this.shadow.innerHTML="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.setDigits({d:0,h:0,m:0,s:0})}setTextFallback(t){this.a11yEl.textContent=t}applyUnitsVisibility(){if(!this.rootEl)return;if(this.daysEl.style.display=this.showDays?"":"none",this.hoursEl.style.display=this.showHours?"":"none",this.minutesEl.style.display=this.showMinutes?"":"none",this.secondsEl.style.display=this.showSeconds?"":"none",!!!this.separatorUrl){this.sep0El.style.display="none",this.sep1El.style.display="none",this.sep2El.style.display="none";return}const s=[this.showDays,this.showHours,this.showMinutes,this.showSeconds],e=[];for(let i=0;i<s.length;i++)s[i]&&e.push(i);this.rootEl.style.setProperty("--zh-groups",String(e.length));const n=[!1,!1,!1];if(e.length>=2)for(let i=0;i<e.length-1;i++){const o=e[i+1],l=Math.min(2,Math.max(0,o-1));n[l]=!0}this.sep0El.style.display=n[0]?"":"none",this.sep1El.style.display=n[1]?"":"none",this.sep2El.style.display=n[2]?"":"none"}setDigits({d:t,h:s,m:e,s:n}){const i=g(Math.min(t,99),2),o=g(s,2),l=[...E(e)],h=[...E(n)];this.syncDigitGroup(this.daysEl,i),this.syncDigitGroup(this.hoursEl,o),this.syncDigitGroup(this.minutesEl,l),this.syncDigitGroup(this.secondsEl,h);const a=[];this.showDays&&a.push(i.join("")),this.showHours&&a.push(o.join("")),this.showMinutes&&a.push(l.join("")),this.showSeconds&&a.push(h.join("")),this.a11yEl.textContent=a.length?a.join(":"):"—"}syncDigitGroup(t,s){for(;t.children.length<s.length;){const e=document.createElement("span");e.className="zh__digit",t.appendChild(e)}for(;t.children.length>s.length;){const e=t.lastElementChild;if(!e)break;t.removeChild(e)}for(let e=0;e<s.length;e++){const n=t.children[e],i=z(s[e]);n.style.setProperty("--zh-sheet-index",String(i))}}tick(){if(!this.digitsUrl)return;const t=u(this.durationMs);if(t===0){this.setDigits({d:0,h:0,m:0,s:0}),this.fireDoneOnce(),this.stop();return}const s=this.startEpochMs??Date.now(),e=u(Date.now()-s),n=u(t-e),{d:i,h:o,m:l,s:h,totalSec:a}=y(n);this.setDigits({d:i,h:o,m:l,s:h}),a===0&&(this.fireDoneOnce(),this.stop())}fireDoneOnce(){this.doneFired||(this.doneFired=!0,this.dispatchEvent(new CustomEvent("done")))}scheduleNextSecondBoundary(){const s=1e3-Date.now()%1e3;this.nextTickTimeout=window.setTimeout(()=>{this.tick(),this.isRunning()&&this.scheduleNextSecondBoundary()},s)}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}applyStyles(t){if(typeof t=="string"){if(m(this.shadow)){const s=b(t);if(s){this.shadow.adoptedStyleSheets=[s],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&m(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(c.defaultStylesheet&&m(this.shadow)){this.shadow.adoptedStyleSheets=[c.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=p}}customElements.get("countdown-timer")||customElements.define("countdown-timer",c);function A(r={}){const{selector:t="countdown-timer",onDone:s,stylesheet:e}=r,n=Array.from(document.querySelectorAll(t));return s&&n.forEach(i=>{i.addEventListener("done",()=>s(i))}),e&&n.forEach(i=>{const o=i;typeof e=="string"?o.adoptStyles(e):o.adoptStylesheet(e)}),n}exports.initCountdownTimers=A;exports.zeroHourCssText=T;
+`,T=g;function F(o){const t=o.charCodeAt(0)-48;return t>=0&&t<=9?t:0}function d(o){return o<0?0:o}const p={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},y={hours:0,minutes:0,seconds:0};function f(o){return"adoptedStyleSheets"in o}function z(o){try{const t=new CSSStyleSheet;return t.replaceSync(o),t}catch{return null}}const N=z(g);function E(o){const t=Math.floor(o/1e3),e=t%60,s=Math.floor(t/60)%60,i=Math.floor(t/3600),n=Math.floor(i/24),r=i%24;return{d:n,h:r,m:s,s:e,totalSec:t}}function w(o){return String(o).padStart(2,"0")}function S(o,t){return[...String(o).padStart(t,"0")]}function x(o,t,e){if(!o.hasAttribute(t))return e;const s=o.getAttribute(t);return s==null||s===""?!0:s!=="false"}function b(o){if(o==null)return null;const t=o.trim();if(!t)return null;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const s=Number(e[1]),i=Number(e[2]),n=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(i)||!Number.isFinite(n)?null:{year:s,month:i,day:n}}function C(o){if(o==null)return{...y};const t=o.trim();if(!t)return{...y};const e=t.split(":"),s=Number(e[0]??"0"),i=Number(e[1]??"0"),n=Number(e[2]??"0");return{hours:Number.isFinite(s)?s:0,minutes:Number.isFinite(i)?i:0,seconds:Number.isFinite(n)?n:0}}function v(o){if(o==null)return null;const t=o.trim();if(!t)return null;const e=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!e)return null;const s=Number(e[1]),i=Number(e[2]),n=Number(e[3]??"0");return!Number.isFinite(s)||!Number.isFinite(i)||!Number.isFinite(n)||s<0||s>23||i<0||i>59||n<0||n>59?null:{hours:s,minutes:i,seconds:n}}function D(o){if(o==null)return null;let t=o.trim();if(!t)return null;/^utc/i.test(t)&&(t=t.slice(3));let e=1;if(t[0]==="+"?t=t.slice(1):t[0]==="-"&&(e=-1,t=t.slice(1)),!t)return null;const[s,i="0"]=t.split(":"),n=Number(s),r=Number(i);if(!Number.isFinite(n)||!Number.isFinite(r))return null;const l=n*60+r;return e*l}function A(){if(typeof window>"u"||!("location"in window))return null;const o=window.location?.search??"";if(!o)return null;const t=new URLSearchParams(o),e={},s=t.get("date")?.trim();s&&(e.date=s);const i=t.get("time")?.trim();i&&(e.time=i);const n=t.get("utc")?.trim();n&&(e.utc=n);const r=t.get("units")?.trim();return r&&(e.units=r),Object.keys(e).length?e:null}function U(o){const t=(o??"").trim().toLowerCase();if(!t)return p;const e=t.split(":").map(a=>a.trim()).filter(Boolean);if(!e.length)return p;const s=new Set(e),i=s.has("d"),n=s.has("h"),r=s.has("m"),l=s.has("s");return!i&&!n&&!r&&!l?p:{showDays:i,showHours:n,showMinutes:r,showSeconds:l}}class m extends HTMLElement{static defaultStylesheet=N;static observedAttributes=["digits-url","separator-url","autostart","date","time","utc","units","mode"];shadow=this.attachShadow({mode:"open"});digitsUrl=null;separatorUrl=null;autostart=!0;durationMs=0;targetEpochMs=null;startEpochMs=null;nextTickTimeout=null;doneFired=!1;rootEl;daysEl;hoursEl;minutesEl;secondsEl;a11yEl;sep0El;sep1El;sep2El;styleEl=null;showDays=!0;showHours=!0;showMinutes=!0;showSeconds=!0;mode="static";hasDigitsRendered=!1;connectedCallback(){this.render(),this.readAttributes(),this.autostart?this.start():this.renderStaticInitial()}disconnectedCallback(){this.stop()}attributeChangedCallback(t,e,s){if(!this.isConnected)return;const i=this.isRunning();this.readAttributes(),this.doneFired=!1,i&&this.autostart?this.start():this.renderStaticInitial()}start(){this.stop(),this.digitsUrl&&(this.durationMs=this.targetEpochMs!=null?this.targetEpochMs-Date.now():0,this.startEpochMs=Date.now(),this.tick(),this.scheduleNextSecondBoundary())}stop(){this.nextTickTimeout!=null&&(window.clearTimeout(this.nextTickTimeout),this.nextTickTimeout=null),this.startEpochMs=null}reset(){this.doneFired=!1,this.autostart?this.start():this.renderStaticInitial()}isRunning(){return this.startEpochMs!=null&&this.nextTickTimeout!=null}isDone(){return!this.digitsUrl||this.targetEpochMs==null?!1:Date.now()>=this.targetEpochMs}readAttributes(){this.rootEl||this.render();const t=A();this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=x(this,"autostart",!0);const e=(this.getAttribute("mode")??"").trim().toLowerCase();this.mode=e==="scroll"?"scroll":"static";const s=U(t?.units??this.getAttribute("units"));this.showDays=s.showDays,this.showHours=s.showHours,this.showMinutes=s.showMinutes,this.showSeconds=s.showSeconds;const i=b(this.getAttribute("date")),r=b(t?.date??null)??i,l=C(this.getAttribute("time")),h=v(t?.time??null)??l,c=D(this.getAttribute("utc")),_=D(t?.utc??null)??c??0;if(!r)this.targetEpochMs=null;else{const M=Date.UTC(r.year,r.month-1,r.day,h.hours,h.minutes,h.seconds);this.targetEpochMs=M-_*60*1e3}if(this.durationMs=0,!this.digitsUrl){this.setTextFallback("—:—:—:—");return}this.rootEl.style.setProperty("--zh-digits-url",`url("${this.digitsUrl}")`),this.separatorUrl?this.rootEl.style.setProperty("--zh-sep-url",`url("${this.separatorUrl}")`):this.rootEl.style.removeProperty("--zh-sep-url"),this.applyUnitsVisibility(),this.rootEl.classList.toggle("zh--mode-scroll",this.mode==="scroll")}renderStaticInitial(){if(this.targetEpochMs!=null){const t=Date.now(),e=d(this.targetEpochMs-t),{d:s,h:i,m:n,s:r}=E(e);this.setDigits({d:s,h:i,m:n,s:r},!1)}else this.setDigits({d:0,h:0,m:0,s:0},!1)}render(){this.applyStyles(null),this.rootEl=document.createElement("div"),this.rootEl.className="zh",this.daysEl=document.createElement("div"),this.daysEl.className="zh__group",this.hoursEl=document.createElement("div"),this.hoursEl.className="zh__group",this.minutesEl=document.createElement("div"),this.minutesEl.className="zh__group",this.secondsEl=document.createElement("div"),this.secondsEl.className="zh__group",this.sep0El=document.createElement("span"),this.sep0El.className="zh__sep",this.sep1El=document.createElement("span"),this.sep1El.className="zh__sep",this.sep2El=document.createElement("span"),this.sep2El.className="zh__sep",this.a11yEl=document.createElement("span"),this.a11yEl.className="zh__a11y",this.a11yEl.setAttribute("aria-live","polite"),this.rootEl.append(this.daysEl,this.sep0El,this.hoursEl,this.sep1El,this.minutesEl,this.sep2El,this.secondsEl,this.a11yEl),this.shadow.innerHTML="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.setDigits({d:0,h:0,m:0,s:0},!1),this.hasDigitsRendered=!1}setTextFallback(t){this.a11yEl.textContent=t}applyUnitsVisibility(){if(!this.rootEl)return;if(this.daysEl.style.display=this.showDays?"":"none",this.hoursEl.style.display=this.showHours?"":"none",this.minutesEl.style.display=this.showMinutes?"":"none",this.secondsEl.style.display=this.showSeconds?"":"none",!!!this.separatorUrl){this.sep0El.style.display="none",this.sep1El.style.display="none",this.sep2El.style.display="none";return}const e=[this.showDays,this.showHours,this.showMinutes,this.showSeconds],s=[];for(let n=0;n<e.length;n++)e[n]&&s.push(n);this.rootEl.style.setProperty("--zh-groups",String(s.length));const i=[!1,!1,!1];if(s.length>=2)for(let n=0;n<s.length-1;n++){const r=s[n+1],l=Math.min(2,Math.max(0,r-1));i[l]=!0}this.sep0El.style.display=i[0]?"":"none",this.sep1El.style.display=i[1]?"":"none",this.sep2El.style.display=i[2]?"":"none"}setDigits({d:t,h:e,m:s,s:i},n=!0){let r=n;this.hasDigitsRendered||(r=!1);const l=S(Math.min(t,99),2),a=S(e,2),h=[...w(s)],c=[...w(i)];this.syncDigitGroup(this.daysEl,l,r),this.syncDigitGroup(this.hoursEl,a,r),this.syncDigitGroup(this.minutesEl,h,r),this.syncDigitGroup(this.secondsEl,c,r);const u=[];this.showDays&&u.push(l.join("")),this.showHours&&u.push(a.join("")),this.showMinutes&&u.push(h.join("")),this.showSeconds&&u.push(c.join("")),this.a11yEl.textContent=u.length?u.join(":"):"—",this.hasDigitsRendered=!0}syncDigitGroup(t,e,s){for(;t.children.length<e.length;){const i=t.children.length;t.appendChild(this.createDigitSlot(e[i]))}for(;t.children.length>e.length;){const i=t.lastElementChild;if(!i)break;t.removeChild(i)}for(let i=0;i<e.length;i++){const n=t.children[i];this.syncDigitSlot(n,e[i],s)}}createDigitSlot(t){const e=document.createElement("span");e.className="zh__digit";const s=document.createElement("span");s.className="zh__digit-track";const i=this.createDigitFace(t);return i.classList.add("zh__digit-face--current"),s.append(i),e.append(s),e}createDigitFace(t){const e=document.createElement("span");return e.className="zh__digit-face",this.setFaceDigit(e,t),e}setFaceDigit(t,e){t.dataset.zhDigit=e;const s=F(e);t.style.setProperty("--zh-sheet-index",String(s))}ensureDigitTrack(t){let e=t.querySelector(".zh__digit-track");return e||(e=document.createElement("span"),e.className="zh__digit-track",t.innerHTML="",t.append(e)),e}getOrCreateCurrentFace(t,e){let s=t.querySelector(".zh__digit-face--current");if(!s)s=t.querySelector(".zh__digit-face")??this.createDigitFace(e),s.classList.add("zh__digit-face--current"),this.setFaceDigit(s,s.dataset.zhDigit??e),t.innerHTML="",t.append(s);else{const i=Array.from(t.children);for(const n of i)n!==s&&t.removeChild(n)}return s}cleanupTrack(t,e){if(!t.contains(e))return;const s=Array.from(t.children);for(const i of s)i!==e&&t.removeChild(i);e.classList.remove("zh__digit-face--next"),e.classList.add("zh__digit-face--current"),t.style.transition=this.mode==="scroll"?"":"none",t.style.transform="translateY(0)"}parseTransitionMs(t){const e=window.getComputedStyle(t),s=e.transitionDuration.split(",").map(a=>a.trim()),i=e.transitionDelay.split(",").map(a=>a.trim()),n=a=>a?a.endsWith("ms")?Number.parseFloat(a):a.endsWith("s")?Number.parseFloat(a)*1e3:Number.parseFloat(a)||0:0,r=s[0]?n(s[0]):0,l=i[0]?n(i[0]):0;return r+l}animateDigitChange(t,e,s){const i=this.createDigitFace(s);i.classList.add("zh__digit-face--next"),t.innerHTML="",t.append(i,e),t.style.transition="none",t.style.transform="translateY(-100%)",t.offsetHeight,t.style.transition="",t.style.transform="translateY(0)";const n=()=>{t.removeEventListener("transitionend",n),t.contains(i)&&this.cleanupTrack(t,i)};t.addEventListener("transitionend",n,{once:!0});const r=this.parseTransitionMs(t)+150;window.setTimeout(n,r||800)}syncDigitSlot(t,e,s){const i=this.ensureDigitTrack(t),n=this.getOrCreateCurrentFace(i,e),r=n.dataset.zhDigit??e;if(this.setFaceDigit(n,r),r===e||!s||this.mode!=="scroll"){r!==e&&this.setFaceDigit(n,e),this.cleanupTrack(i,n);return}this.animateDigitChange(i,n,e)}tick(){if(!this.digitsUrl)return;const t=d(this.durationMs);if(t===0){this.setDigits({d:0,h:0,m:0,s:0}),this.fireDoneOnce(),this.stop();return}const e=this.startEpochMs??Date.now(),s=d(Date.now()-e),i=d(t-s),{d:n,h:r,m:l,s:a,totalSec:h}=E(i);this.setDigits({d:n,h:r,m:l,s:a}),h===0&&(this.fireDoneOnce(),this.stop())}fireDoneOnce(){this.doneFired||(this.doneFired=!0,this.dispatchEvent(new CustomEvent("done")))}scheduleNextSecondBoundary(){const e=1e3-Date.now()%1e3;this.nextTickTimeout=window.setTimeout(()=>{this.tick(),this.isRunning()&&this.scheduleNextSecondBoundary()},e)}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}applyStyles(t){if(typeof t=="string"){if(f(this.shadow)){const e=z(t);if(e){this.shadow.adoptedStyleSheets=[e],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&f(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(m.defaultStylesheet&&f(this.shadow)){this.shadow.adoptedStyleSheets=[m.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=g}}customElements.get("countdown-timer")||customElements.define("countdown-timer",m);function L(o={}){const{selector:t="countdown-timer",onDone:e,stylesheet:s}=o,i=Array.from(document.querySelectorAll(t));if(e){const n=new WeakSet,r=l=>{n.has(l)||(n.add(l),e(l))};i.forEach(l=>{l.addEventListener("done",()=>r(l));const a=l;typeof a.isDone=="function"&&a.isDone()&&r(l)})}return s&&i.forEach(n=>{const r=n;typeof s=="string"?r.adoptStyles(s):r.adoptStylesheet(s)}),i}exports.initCountdownTimers=L;exports.zeroHourCssText=T;

package/dist/index.d.ts

@@ -26,6 +26,8 @@ declare class ZeroHour extends HTMLElement {
     private showHours;
     private showMinutes;
     private showSeconds;
+    private mode;
+    private hasDigitsRendered;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
@@ -33,6 +35,7 @@ declare class ZeroHour extends HTMLElement {
     stop(): void;
     reset(): void;
     isRunning(): boolean;
+    isDone(): boolean;
     private readAttributes;
     private renderStaticInitial;
     private render;
@@ -40,6 +43,15 @@ declare class ZeroHour extends HTMLElement {
     private applyUnitsVisibility;
     private setDigits;
     private syncDigitGroup;
+    private createDigitSlot;
+    private createDigitFace;
+    private setFaceDigit;
+    private ensureDigitTrack;
+    private getOrCreateCurrentFace;
+    private cleanupTrack;
+    private parseTransitionMs;
+    private animateDigitChange;
+    private syncDigitSlot;
     private tick;
     private fireDoneOnce;
     private scheduleNextSecondBoundary;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-const m = `:host {
+const g = `:host {
   display: block;
   width: 100%;
   container-type: inline-size;
@@ -35,6 +35,27 @@ const m = `:host {
 .zh__digit {
   aspect-ratio: var(--zh-digit-aspect, 9 / 12);
   width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.zh__digit-track {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(0);
+}
+
+.zh--mode-scroll .zh__digit-track {
+  transition: transform var(--zh-scroll-duration, 375ms)
+    var(--zh-scroll-timing, cubic-bezier(0.445, 0.05, 0.55, 0.95));
+}
+
+.zh__digit-face {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
   background-image: var(--zh-digits-url);
   background-repeat: no-repeat;
   /* Digits sprite is horizontal (frames left-to-right). */
@@ -51,113 +72,113 @@ const m = `:host {
   white-space: nowrap;
   clip-path: inset(50%);
 }
-`, C = m;
-function T(r) {
-  const t = r.charCodeAt(0) - 48;
+`, U = g;
+function F(o) {
+  const t = o.charCodeAt(0) - 48;
   return t >= 0 && t <= 9 ? t : 0;
 }
-function u(r) {
-  return r < 0 ? 0 : r;
+function d(o) {
+  return o < 0 ? 0 : o;
 }
-const d = {
+const p = {
   showDays: !0,
   showHours: !0,
   showMinutes: !0,
   showSeconds: !0
-}, f = { hours: 0, minutes: 0, seconds: 0 };
-function p(r) {
-  return "adoptedStyleSheets" in r;
+}, y = { hours: 0, minutes: 0, seconds: 0 };
+function f(o) {
+  return "adoptedStyleSheets" in o;
 }
-function b(r) {
+function z(o) {
   try {
     const t = new CSSStyleSheet();
-    return t.replaceSync(r), t;
+    return t.replaceSync(o), t;
   } catch {
     return null;
   }
 }
-const z = b(m);
-function y(r) {
-  const t = Math.floor(r / 1e3), s = t % 60, e = Math.floor(t / 60) % 60, n = Math.floor(t / 3600), i = Math.floor(n / 24), o = n % 24;
-  return { d: i, h: o, m: e, s, totalSec: t };
+const N = z(g);
+function E(o) {
+  const t = Math.floor(o / 1e3), e = t % 60, s = Math.floor(t / 60) % 60, i = Math.floor(t / 3600), n = Math.floor(i / 24), r = i % 24;
+  return { d: n, h: r, m: s, s: e, totalSec: t };
 }
-function E(r) {
-  return String(r).padStart(2, "0");
+function w(o) {
+  return String(o).padStart(2, "0");
 }
-function g(r, t) {
-  return [...String(r).padStart(t, "0")];
+function S(o, t) {
+  return [...String(o).padStart(t, "0")];
 }
-function x(r, t, s) {
-  if (!r.hasAttribute(t)) return s;
-  const e = r.getAttribute(t);
-  return e == null || e === "" ? !0 : e !== "false";
+function T(o, t, e) {
+  if (!o.hasAttribute(t)) return e;
+  const s = o.getAttribute(t);
+  return s == null || s === "" ? !0 : s !== "false";
 }
-function w(r) {
-  if (r == null) return null;
-  const t = r.trim();
+function D(o) {
+  if (o == null) return null;
+  const t = o.trim();
   if (!t) return null;
-  const s = t.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-  if (!s) return null;
-  const e = Number(s[1]), n = Number(s[2]), i = Number(s[3]);
-  return !Number.isFinite(e) || !Number.isFinite(n) || !Number.isFinite(i) ? null : { year: e, month: n, day: i };
+  const e = t.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (!e) return null;
+  const s = Number(e[1]), i = Number(e[2]), n = Number(e[3]);
+  return !Number.isFinite(s) || !Number.isFinite(i) || !Number.isFinite(n) ? null : { year: s, month: i, day: n };
 }
-function F(r) {
-  if (r == null) return { ...f };
-  const t = r.trim();
-  if (!t) return { ...f };
-  const s = t.split(":"), e = Number(s[0] ?? "0"), n = Number(s[1] ?? "0"), i = Number(s[2] ?? "0");
+function x(o) {
+  if (o == null) return { ...y };
+  const t = o.trim();
+  if (!t) return { ...y };
+  const e = t.split(":"), s = Number(e[0] ?? "0"), i = Number(e[1] ?? "0"), n = Number(e[2] ?? "0");
   return {
-    hours: Number.isFinite(e) ? e : 0,
-    minutes: Number.isFinite(n) ? n : 0,
-    seconds: Number.isFinite(i) ? i : 0
+    hours: Number.isFinite(s) ? s : 0,
+    minutes: Number.isFinite(i) ? i : 0,
+    seconds: Number.isFinite(n) ? n : 0
   };
 }
-function _(r) {
-  if (r == null) return null;
-  const t = r.trim();
+function C(o) {
+  if (o == null) return null;
+  const t = o.trim();
   if (!t) return null;
-  const s = t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
-  if (!s) return null;
-  const e = Number(s[1]), n = Number(s[2]), i = Number(s[3] ?? "0");
-  return !Number.isFinite(e) || !Number.isFinite(n) || !Number.isFinite(i) || e < 0 || e > 23 || n < 0 || n > 59 || i < 0 || i > 59 ? null : { hours: e, minutes: n, seconds: i };
+  const e = t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+  if (!e) return null;
+  const s = Number(e[1]), i = Number(e[2]), n = Number(e[3] ?? "0");
+  return !Number.isFinite(s) || !Number.isFinite(i) || !Number.isFinite(n) || s < 0 || s > 23 || i < 0 || i > 59 || n < 0 || n > 59 ? null : { hours: s, minutes: i, seconds: n };
 }
-function S(r) {
-  if (r == null) return null;
-  let t = r.trim();
+function b(o) {
+  if (o == null) return null;
+  let t = o.trim();
   if (!t) return null;
   /^utc/i.test(t) && (t = t.slice(3));
-  let s = 1;
-  if (t[0] === "+" ? t = t.slice(1) : t[0] === "-" && (s = -1, t = t.slice(1)), !t) return null;
-  const [e, n = "0"] = t.split(":"), i = Number(e), o = Number(n);
-  if (!Number.isFinite(i) || !Number.isFinite(o)) return null;
-  const l = i * 60 + o;
-  return s * l;
+  let e = 1;
+  if (t[0] === "+" ? t = t.slice(1) : t[0] === "-" && (e = -1, t = t.slice(1)), !t) return null;
+  const [s, i = "0"] = t.split(":"), n = Number(s), r = Number(i);
+  if (!Number.isFinite(n) || !Number.isFinite(r)) return null;
+  const l = n * 60 + r;
+  return e * l;
 }
 function v() {
   if (typeof window > "u" || !("location" in window)) return null;
-  const r = window.location?.search ?? "";
-  if (!r) return null;
-  const t = new URLSearchParams(r), s = {}, e = t.get("date")?.trim();
-  e && (s.date = e);
-  const n = t.get("time")?.trim();
-  n && (s.time = n);
-  const i = t.get("utc")?.trim();
-  i && (s.utc = i);
-  const o = t.get("units")?.trim();
-  return o && (s.units = o), Object.keys(s).length ? s : null;
+  const o = window.location?.search ?? "";
+  if (!o) return null;
+  const t = new URLSearchParams(o), e = {}, s = t.get("date")?.trim();
+  s && (e.date = s);
+  const i = t.get("time")?.trim();
+  i && (e.time = i);
+  const n = t.get("utc")?.trim();
+  n && (e.utc = n);
+  const r = t.get("units")?.trim();
+  return r && (e.units = r), Object.keys(e).length ? e : null;
 }
-function k(r) {
-  const t = (r ?? "").trim().toLowerCase();
+function A(o) {
+  const t = (o ?? "").trim().toLowerCase();
   if (!t)
-    return d;
-  const s = t.split(":").map((h) => h.trim()).filter(Boolean);
-  if (!s.length)
-    return d;
-  const e = new Set(s), n = e.has("d"), i = e.has("h"), o = e.has("m"), l = e.has("s");
-  return !n && !i && !o && !l ? d : { showDays: n, showHours: i, showMinutes: o, showSeconds: l };
+    return p;
+  const e = t.split(":").map((a) => a.trim()).filter(Boolean);
+  if (!e.length)
+    return p;
+  const s = new Set(e), i = s.has("d"), n = s.has("h"), r = s.has("m"), l = s.has("s");
+  return !i && !n && !r && !l ? p : { showDays: i, showHours: n, showMinutes: r, showSeconds: l };
 }
-class c extends HTMLElement {
-  static defaultStylesheet = z;
+class m extends HTMLElement {
+  static defaultStylesheet = N;
   static observedAttributes = [
     "digits-url",
     "separator-url",
@@ -165,7 +186,8 @@ class c extends HTMLElement {
     "date",
     "time",
     "utc",
-    "units"
+    "units",
+    "mode"
   ];
   shadow = this.attachShadow({ mode: "open" });
   digitsUrl = null;
@@ -190,16 +212,18 @@ class c extends HTMLElement {
   showHours = !0;
   showMinutes = !0;
   showSeconds = !0;
+  mode = "static";
+  hasDigitsRendered = !1;
   connectedCallback() {
     this.render(), this.readAttributes(), this.autostart ? this.start() : this.renderStaticInitial();
   }
   disconnectedCallback() {
     this.stop();
   }
-  attributeChangedCallback(t, s, e) {
+  attributeChangedCallback(t, e, s) {
     if (!this.isConnected) return;
-    const n = this.isRunning();
-    this.readAttributes(), this.doneFired = !1, n && this.autostart ? this.start() : this.renderStaticInitial();
+    const i = this.isRunning();
+    this.readAttributes(), this.doneFired = !1, i && this.autostart ? this.start() : this.renderStaticInitial();
   }
   start() {
     this.stop(), this.digitsUrl && (this.durationMs = this.targetEpochMs != null ? this.targetEpochMs - Date.now() : 0, this.startEpochMs = Date.now(), this.tick(), this.scheduleNextSecondBoundary());
@@ -213,38 +237,43 @@ class c extends HTMLElement {
   isRunning() {
     return this.startEpochMs != null && this.nextTickTimeout != null;
   }
+  isDone() {
+    return !this.digitsUrl || this.targetEpochMs == null ? !1 : Date.now() >= this.targetEpochMs;
+  }
   readAttributes() {
     this.rootEl || this.render();
     const t = v();
-    this.digitsUrl = this.getAttribute("digits-url"), this.separatorUrl = this.getAttribute("separator-url"), this.autostart = x(this, "autostart", !0);
-    const s = k(t?.units ?? this.getAttribute("units"));
+    this.digitsUrl = this.getAttribute("digits-url"), this.separatorUrl = this.getAttribute("separator-url"), this.autostart = T(this, "autostart", !0);
+    const e = (this.getAttribute("mode") ?? "").trim().toLowerCase();
+    this.mode = e === "scroll" ? "scroll" : "static";
+    const s = A(t?.units ?? this.getAttribute("units"));
     this.showDays = s.showDays, this.showHours = s.showHours, this.showMinutes = s.showMinutes, this.showSeconds = s.showSeconds;
-    const e = w(this.getAttribute("date")), i = w(t?.date ?? null) ?? e, o = F(this.getAttribute("time")), h = _(t?.time ?? null) ?? o, a = S(this.getAttribute("utc")), D = S(t?.utc ?? null) ?? a ?? 0;
-    if (!i)
+    const i = D(this.getAttribute("date")), r = D(t?.date ?? null) ?? i, l = x(this.getAttribute("time")), h = C(t?.time ?? null) ?? l, c = b(this.getAttribute("utc")), _ = b(t?.utc ?? null) ?? c ?? 0;
+    if (!r)
       this.targetEpochMs = null;
     else {
-      const N = Date.UTC(
-        i.year,
-        i.month - 1,
-        i.day,
+      const M = Date.UTC(
+        r.year,
+        r.month - 1,
+        r.day,
         h.hours,
         h.minutes,
         h.seconds
       );
-      this.targetEpochMs = N - D * 60 * 1e3;
+      this.targetEpochMs = M - _ * 60 * 1e3;
     }
     if (this.durationMs = 0, !this.digitsUrl) {
       this.setTextFallback("—:—:—:—");
       return;
     }
-    this.rootEl.style.setProperty("--zh-digits-url", `url("${this.digitsUrl}")`), this.separatorUrl ? this.rootEl.style.setProperty("--zh-sep-url", `url("${this.separatorUrl}")`) : this.rootEl.style.removeProperty("--zh-sep-url"), this.applyUnitsVisibility();
+    this.rootEl.style.setProperty("--zh-digits-url", `url("${this.digitsUrl}")`), this.separatorUrl ? this.rootEl.style.setProperty("--zh-sep-url", `url("${this.separatorUrl}")`) : this.rootEl.style.removeProperty("--zh-sep-url"), this.applyUnitsVisibility(), this.rootEl.classList.toggle("zh--mode-scroll", this.mode === "scroll");
   }
   renderStaticInitial() {
     if (this.targetEpochMs != null) {
-      const t = Date.now(), s = u(this.targetEpochMs - t), { d: e, h: n, m: i, s: o } = y(s);
-      this.setDigits({ d: e, h: n, m: i, s: o });
+      const t = Date.now(), e = d(this.targetEpochMs - t), { d: s, h: i, m: n, s: r } = E(e);
+      this.setDigits({ d: s, h: i, m: n, s: r }, !1);
     } else
-      this.setDigits({ d: 0, h: 0, m: 0, s: 0 });
+      this.setDigits({ d: 0, h: 0, m: 0, s: 0 }, !1);
   }
   render() {
     this.applyStyles(null), this.rootEl = document.createElement("div"), this.rootEl.className = "zh", this.daysEl = document.createElement("div"), this.daysEl.className = "zh__group", this.hoursEl = document.createElement("div"), this.hoursEl.className = "zh__group", this.minutesEl = document.createElement("div"), this.minutesEl.className = "zh__group", this.secondsEl = document.createElement("div"), this.secondsEl.className = "zh__group", this.sep0El = document.createElement("span"), this.sep0El.className = "zh__sep", this.sep1El = document.createElement("span"), this.sep1El.className = "zh__sep", this.sep2El = document.createElement("span"), this.sep2El.className = "zh__sep", this.a11yEl = document.createElement("span"), this.a11yEl.className = "zh__a11y", this.a11yEl.setAttribute("aria-live", "polite"), this.rootEl.append(
@@ -256,7 +285,7 @@ class c extends HTMLElement {
       this.sep2El,
       this.secondsEl,
       this.a11yEl
-    ), this.shadow.innerHTML = "", this.styleEl && this.shadow.append(this.styleEl), this.shadow.append(this.rootEl), this.setDigits({ d: 0, h: 0, m: 0, s: 0 });
+    ), this.shadow.innerHTML = "", this.styleEl && this.shadow.append(this.styleEl), this.shadow.append(this.rootEl), this.setDigits({ d: 0, h: 0, m: 0, s: 0 }, !1), this.hasDigitsRendered = !1;
   }
   setTextFallback(t) {
     this.a11yEl.textContent = t;
@@ -267,57 +296,120 @@ class c extends HTMLElement {
       this.sep0El.style.display = "none", this.sep1El.style.display = "none", this.sep2El.style.display = "none";
       return;
     }
-    const s = [this.showDays, this.showHours, this.showMinutes, this.showSeconds], e = [];
-    for (let i = 0; i < s.length; i++)
-      s[i] && e.push(i);
-    this.rootEl.style.setProperty("--zh-groups", String(e.length));
-    const n = [!1, !1, !1];
-    if (e.length >= 2)
-      for (let i = 0; i < e.length - 1; i++) {
-        const o = e[i + 1], l = Math.min(2, Math.max(0, o - 1));
-        n[l] = !0;
+    const e = [this.showDays, this.showHours, this.showMinutes, this.showSeconds], s = [];
+    for (let n = 0; n < e.length; n++)
+      e[n] && s.push(n);
+    this.rootEl.style.setProperty("--zh-groups", String(s.length));
+    const i = [!1, !1, !1];
+    if (s.length >= 2)
+      for (let n = 0; n < s.length - 1; n++) {
+        const r = s[n + 1], l = Math.min(2, Math.max(0, r - 1));
+        i[l] = !0;
       }
-    this.sep0El.style.display = n[0] ? "" : "none", this.sep1El.style.display = n[1] ? "" : "none", this.sep2El.style.display = n[2] ? "" : "none";
-  }
-  setDigits({ d: t, h: s, m: e, s: n }) {
-    const i = g(Math.min(t, 99), 2), o = g(s, 2), l = [...E(e)], h = [...E(n)];
-    this.syncDigitGroup(this.daysEl, i), this.syncDigitGroup(this.hoursEl, o), this.syncDigitGroup(this.minutesEl, l), this.syncDigitGroup(this.secondsEl, h);
-    const a = [];
-    this.showDays && a.push(i.join("")), this.showHours && a.push(o.join("")), this.showMinutes && a.push(l.join("")), this.showSeconds && a.push(h.join("")), this.a11yEl.textContent = a.length ? a.join(":") : "—";
-  }
-  syncDigitGroup(t, s) {
-    for (; t.children.length < s.length; ) {
-      const e = document.createElement("span");
-      e.className = "zh__digit", t.appendChild(e);
+    this.sep0El.style.display = i[0] ? "" : "none", this.sep1El.style.display = i[1] ? "" : "none", this.sep2El.style.display = i[2] ? "" : "none";
+  }
+  setDigits({ d: t, h: e, m: s, s: i }, n = !0) {
+    let r = n;
+    this.hasDigitsRendered || (r = !1);
+    const l = S(Math.min(t, 99), 2), a = S(e, 2), h = [...w(s)], c = [...w(i)];
+    this.syncDigitGroup(this.daysEl, l, r), this.syncDigitGroup(this.hoursEl, a, r), this.syncDigitGroup(this.minutesEl, h, r), this.syncDigitGroup(this.secondsEl, c, r);
+    const u = [];
+    this.showDays && u.push(l.join("")), this.showHours && u.push(a.join("")), this.showMinutes && u.push(h.join("")), this.showSeconds && u.push(c.join("")), this.a11yEl.textContent = u.length ? u.join(":") : "—", this.hasDigitsRendered = !0;
+  }
+  syncDigitGroup(t, e, s) {
+    for (; t.children.length < e.length; ) {
+      const i = t.children.length;
+      t.appendChild(this.createDigitSlot(e[i]));
     }
-    for (; t.children.length > s.length; ) {
-      const e = t.lastElementChild;
-      if (!e) break;
-      t.removeChild(e);
+    for (; t.children.length > e.length; ) {
+      const i = t.lastElementChild;
+      if (!i) break;
+      t.removeChild(i);
     }
-    for (let e = 0; e < s.length; e++) {
-      const n = t.children[e], i = T(s[e]);
-      n.style.setProperty("--zh-sheet-index", String(i));
+    for (let i = 0; i < e.length; i++) {
+      const n = t.children[i];
+      this.syncDigitSlot(n, e[i], s);
     }
   }
+  createDigitSlot(t) {
+    const e = document.createElement("span");
+    e.className = "zh__digit";
+    const s = document.createElement("span");
+    s.className = "zh__digit-track";
+    const i = this.createDigitFace(t);
+    return i.classList.add("zh__digit-face--current"), s.append(i), e.append(s), e;
+  }
+  createDigitFace(t) {
+    const e = document.createElement("span");
+    return e.className = "zh__digit-face", this.setFaceDigit(e, t), e;
+  }
+  setFaceDigit(t, e) {
+    t.dataset.zhDigit = e;
+    const s = F(e);
+    t.style.setProperty("--zh-sheet-index", String(s));
+  }
+  ensureDigitTrack(t) {
+    let e = t.querySelector(".zh__digit-track");
+    return e || (e = document.createElement("span"), e.className = "zh__digit-track", t.innerHTML = "", t.append(e)), e;
+  }
+  getOrCreateCurrentFace(t, e) {
+    let s = t.querySelector(".zh__digit-face--current");
+    if (!s)
+      s = t.querySelector(".zh__digit-face") ?? this.createDigitFace(e), s.classList.add("zh__digit-face--current"), this.setFaceDigit(s, s.dataset.zhDigit ?? e), t.innerHTML = "", t.append(s);
+    else {
+      const i = Array.from(t.children);
+      for (const n of i)
+        n !== s && t.removeChild(n);
+    }
+    return s;
+  }
+  cleanupTrack(t, e) {
+    if (!t.contains(e)) return;
+    const s = Array.from(t.children);
+    for (const i of s)
+      i !== e && t.removeChild(i);
+    e.classList.remove("zh__digit-face--next"), e.classList.add("zh__digit-face--current"), t.style.transition = this.mode === "scroll" ? "" : "none", t.style.transform = "translateY(0)";
+  }
+  parseTransitionMs(t) {
+    const e = window.getComputedStyle(t), s = e.transitionDuration.split(",").map((a) => a.trim()), i = e.transitionDelay.split(",").map((a) => a.trim()), n = (a) => a ? a.endsWith("ms") ? Number.parseFloat(a) : a.endsWith("s") ? Number.parseFloat(a) * 1e3 : Number.parseFloat(a) || 0 : 0, r = s[0] ? n(s[0]) : 0, l = i[0] ? n(i[0]) : 0;
+    return r + l;
+  }
+  animateDigitChange(t, e, s) {
+    const i = this.createDigitFace(s);
+    i.classList.add("zh__digit-face--next"), t.innerHTML = "", t.append(i, e), t.style.transition = "none", t.style.transform = "translateY(-100%)", t.offsetHeight, t.style.transition = "", t.style.transform = "translateY(0)";
+    const n = () => {
+      t.removeEventListener("transitionend", n), t.contains(i) && this.cleanupTrack(t, i);
+    };
+    t.addEventListener("transitionend", n, { once: !0 });
+    const r = this.parseTransitionMs(t) + 150;
+    window.setTimeout(n, r || 800);
+  }
+  syncDigitSlot(t, e, s) {
+    const i = this.ensureDigitTrack(t), n = this.getOrCreateCurrentFace(i, e), r = n.dataset.zhDigit ?? e;
+    if (this.setFaceDigit(n, r), r === e || !s || this.mode !== "scroll") {
+      r !== e && this.setFaceDigit(n, e), this.cleanupTrack(i, n);
+      return;
+    }
+    this.animateDigitChange(i, n, e);
+  }
   tick() {
     if (!this.digitsUrl) return;
-    const t = u(this.durationMs);
+    const t = d(this.durationMs);
     if (t === 0) {
       this.setDigits({ d: 0, h: 0, m: 0, s: 0 }), this.fireDoneOnce(), this.stop();
       return;
     }
-    const s = this.startEpochMs ?? Date.now(), e = u(Date.now() - s), n = u(t - e), { d: i, h: o, m: l, s: h, totalSec: a } = y(n);
-    this.setDigits({ d: i, h: o, m: l, s: h }), a === 0 && (this.fireDoneOnce(), this.stop());
+    const e = this.startEpochMs ?? Date.now(), s = d(Date.now() - e), i = d(t - s), { d: n, h: r, m: l, s: a, totalSec: h } = E(i);
+    this.setDigits({ d: n, h: r, m: l, s: a }), h === 0 && (this.fireDoneOnce(), this.stop());
   }
   fireDoneOnce() {
     this.doneFired || (this.doneFired = !0, this.dispatchEvent(new CustomEvent("done")));
   }
   scheduleNextSecondBoundary() {
-    const s = 1e3 - Date.now() % 1e3;
+    const e = 1e3 - Date.now() % 1e3;
     this.nextTickTimeout = window.setTimeout(() => {
       this.tick(), this.isRunning() && this.scheduleNextSecondBoundary();
-    }, s);
+    }, e);
   }
   adoptStylesheet(t) {
     this.applyStyles(t);
@@ -327,38 +419,46 @@ class c extends HTMLElement {
   }
   applyStyles(t) {
     if (typeof t == "string") {
-      if (p(this.shadow)) {
-        const s = b(t);
-        if (s) {
-          this.shadow.adoptedStyleSheets = [s], this.styleEl = null;
+      if (f(this.shadow)) {
+        const e = z(t);
+        if (e) {
+          this.shadow.adoptedStyleSheets = [e], this.styleEl = null;
           return;
         }
       }
       this.styleEl || (this.styleEl = document.createElement("style")), this.styleEl.textContent = t;
       return;
     }
-    if (t && p(this.shadow)) {
+    if (t && f(this.shadow)) {
       this.shadow.adoptedStyleSheets = [t], this.styleEl = null;
       return;
     }
-    if (c.defaultStylesheet && p(this.shadow)) {
-      this.shadow.adoptedStyleSheets = [c.defaultStylesheet], this.styleEl = null;
+    if (m.defaultStylesheet && f(this.shadow)) {
+      this.shadow.adoptedStyleSheets = [m.defaultStylesheet], this.styleEl = null;
       return;
     }
-    this.styleEl || (this.styleEl = document.createElement("style")), this.styleEl.textContent = m;
+    this.styleEl || (this.styleEl = document.createElement("style")), this.styleEl.textContent = g;
   }
 }
-customElements.get("countdown-timer") || customElements.define("countdown-timer", c);
-function A(r = {}) {
-  const { selector: t = "countdown-timer", onDone: s, stylesheet: e } = r, n = Array.from(document.querySelectorAll(t));
-  return s && n.forEach((i) => {
-    i.addEventListener("done", () => s(i));
-  }), e && n.forEach((i) => {
-    const o = i;
-    typeof e == "string" ? o.adoptStyles(e) : o.adoptStylesheet(e);
-  }), n;
+customElements.get("countdown-timer") || customElements.define("countdown-timer", m);
+function L(o = {}) {
+  const { selector: t = "countdown-timer", onDone: e, stylesheet: s } = o, i = Array.from(document.querySelectorAll(t));
+  if (e) {
+    const n = /* @__PURE__ */ new WeakSet(), r = (l) => {
+      n.has(l) || (n.add(l), e(l));
+    };
+    i.forEach((l) => {
+      l.addEventListener("done", () => r(l));
+      const a = l;
+      typeof a.isDone == "function" && a.isDone() && r(l);
+    });
+  }
+  return s && i.forEach((n) => {
+    const r = n;
+    typeof s == "string" ? r.adoptStyles(s) : r.adoptStylesheet(s);
+  }), i;
 }
 export {
-  A as initCountdownTimers,
-  C as zeroHourCssText
+  L as initCountdownTimers,
+  U as zeroHourCssText
 };

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(a,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(a=typeof globalThis<"u"?globalThis:a||self,c(a.ZeroHour={}))})(this,(function(a){"use strict";const c=`:host {
+(function(u,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(u=typeof globalThis<"u"?globalThis:u||self,c(u.ZeroHour={}))})(this,(function(u){"use strict";const c=`:host {
   display: block;
   width: 100%;
   container-type: inline-size;
@@ -35,6 +35,27 @@
 .zh__digit {
   aspect-ratio: var(--zh-digit-aspect, 9 / 12);
   width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.zh__digit-track {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(0);
+}
+
+.zh--mode-scroll .zh__digit-track {
+  transition: transform var(--zh-scroll-duration, 375ms)
+    var(--zh-scroll-timing, cubic-bezier(0.445, 0.05, 0.55, 0.95));
+}
+
+.zh__digit-face {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
   background-image: var(--zh-digits-url);
   background-repeat: no-repeat;
   /* Digits sprite is horizontal (frames left-to-right). */
@@ -51,4 +72,4 @@
   white-space: nowrap;
   clip-path: inset(50%);
 }
-`,T=c;function D(o){const t=o.charCodeAt(0)-48;return t>=0&&t<=9?t:0}function d(o){return o<0?0:o}const m={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},y={hours:0,minutes:0,seconds:0};function f(o){return"adoptedStyleSheets"in o}function E(o){try{const t=new CSSStyleSheet;return t.replaceSync(o),t}catch{return null}}const N=E(c);function g(o){const t=Math.floor(o/1e3),e=t%60,s=Math.floor(t/60)%60,n=Math.floor(t/3600),i=Math.floor(n/24),r=n%24;return{d:i,h:r,m:s,s:e,totalSec:t}}function w(o){return String(o).padStart(2,"0")}function S(o,t){return[...String(o).padStart(t,"0")]}function z(o,t,e){if(!o.hasAttribute(t))return e;const s=o.getAttribute(t);return s==null||s===""?!0:s!=="false"}function b(o){if(o==null)return null;const t=o.trim();if(!t)return null;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const s=Number(e[1]),n=Number(e[2]),i=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(n)||!Number.isFinite(i)?null:{year:s,month:n,day:i}}function x(o){if(o==null)return{...y};const t=o.trim();if(!t)return{...y};const e=t.split(":"),s=Number(e[0]??"0"),n=Number(e[1]??"0"),i=Number(e[2]??"0");return{hours:Number.isFinite(s)?s:0,minutes:Number.isFinite(n)?n:0,seconds:Number.isFinite(i)?i:0}}function F(o){if(o==null)return null;const t=o.trim();if(!t)return null;const e=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!e)return null;const s=Number(e[1]),n=Number(e[2]),i=Number(e[3]??"0");return!Number.isFinite(s)||!Number.isFinite(n)||!Number.isFinite(i)||s<0||s>23||n<0||n>59||i<0||i>59?null:{hours:s,minutes:n,seconds:i}}function M(o){if(o==null)return null;let t=o.trim();if(!t)return null;/^utc/i.test(t)&&(t=t.slice(3));let e=1;if(t[0]==="+"?t=t.slice(1):t[0]==="-"&&(e=-1,t=t.slice(1)),!t)return null;const[s,n="0"]=t.split(":"),i=Number(s),r=Number(n);if(!Number.isFinite(i)||!Number.isFinite(r))return null;const l=i*60+r;return e*l}function _(){if(typeof window>"u"||!("location"in window))return null;const o=window.location?.search??"";if(!o)return null;const t=new URLSearchParams(o),e={},s=t.get("date")?.trim();s&&(e.date=s);const n=t.get("time")?.trim();n&&(e.time=n);const i=t.get("utc")?.trim();i&&(e.utc=i);const r=t.get("units")?.trim();return r&&(e.units=r),Object.keys(e).length?e:null}function v(o){const t=(o??"").trim().toLowerCase();if(!t)return m;const e=t.split(":").map(h=>h.trim()).filter(Boolean);if(!e.length)return m;const s=new Set(e),n=s.has("d"),i=s.has("h"),r=s.has("m"),l=s.has("s");return!n&&!i&&!r&&!l?m:{showDays:n,showHours:i,showMinutes:r,showSeconds:l}}class p extends HTMLElement{static defaultStylesheet=N;static observedAttributes=["digits-url","separator-url","autostart","date","time","utc","units"];shadow=this.attachShadow({mode:"open"});digitsUrl=null;separatorUrl=null;autostart=!0;durationMs=0;targetEpochMs=null;startEpochMs=null;nextTickTimeout=null;doneFired=!1;rootEl;daysEl;hoursEl;minutesEl;secondsEl;a11yEl;sep0El;sep1El;sep2El;styleEl=null;showDays=!0;showHours=!0;showMinutes=!0;showSeconds=!0;connectedCallback(){this.render(),this.readAttributes(),this.autostart?this.start():this.renderStaticInitial()}disconnectedCallback(){this.stop()}attributeChangedCallback(t,e,s){if(!this.isConnected)return;const n=this.isRunning();this.readAttributes(),this.doneFired=!1,n&&this.autostart?this.start():this.renderStaticInitial()}start(){this.stop(),this.digitsUrl&&(this.durationMs=this.targetEpochMs!=null?this.targetEpochMs-Date.now():0,this.startEpochMs=Date.now(),this.tick(),this.scheduleNextSecondBoundary())}stop(){this.nextTickTimeout!=null&&(window.clearTimeout(this.nextTickTimeout),this.nextTickTimeout=null),this.startEpochMs=null}reset(){this.doneFired=!1,this.autostart?this.start():this.renderStaticInitial()}isRunning(){return this.startEpochMs!=null&&this.nextTickTimeout!=null}readAttributes(){this.rootEl||this.render();const t=_();this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=z(this,"autostart",!0);const e=v(t?.units??this.getAttribute("units"));this.showDays=e.showDays,this.showHours=e.showHours,this.showMinutes=e.showMinutes,this.showSeconds=e.showSeconds;const s=b(this.getAttribute("date")),i=b(t?.date??null)??s,r=x(this.getAttribute("time")),h=F(t?.time??null)??r,u=M(this.getAttribute("utc")),A=M(t?.utc??null)??u??0;if(!i)this.targetEpochMs=null;else{const U=Date.UTC(i.year,i.month-1,i.day,h.hours,h.minutes,h.seconds);this.targetEpochMs=U-A*60*1e3}if(this.durationMs=0,!this.digitsUrl){this.setTextFallback("—:—:—:—");return}this.rootEl.style.setProperty("--zh-digits-url",`url("${this.digitsUrl}")`),this.separatorUrl?this.rootEl.style.setProperty("--zh-sep-url",`url("${this.separatorUrl}")`):this.rootEl.style.removeProperty("--zh-sep-url"),this.applyUnitsVisibility()}renderStaticInitial(){if(this.targetEpochMs!=null){const t=Date.now(),e=d(this.targetEpochMs-t),{d:s,h:n,m:i,s:r}=g(e);this.setDigits({d:s,h:n,m:i,s:r})}else this.setDigits({d:0,h:0,m:0,s:0})}render(){this.applyStyles(null),this.rootEl=document.createElement("div"),this.rootEl.className="zh",this.daysEl=document.createElement("div"),this.daysEl.className="zh__group",this.hoursEl=document.createElement("div"),this.hoursEl.className="zh__group",this.minutesEl=document.createElement("div"),this.minutesEl.className="zh__group",this.secondsEl=document.createElement("div"),this.secondsEl.className="zh__group",this.sep0El=document.createElement("span"),this.sep0El.className="zh__sep",this.sep1El=document.createElement("span"),this.sep1El.className="zh__sep",this.sep2El=document.createElement("span"),this.sep2El.className="zh__sep",this.a11yEl=document.createElement("span"),this.a11yEl.className="zh__a11y",this.a11yEl.setAttribute("aria-live","polite"),this.rootEl.append(this.daysEl,this.sep0El,this.hoursEl,this.sep1El,this.minutesEl,this.sep2El,this.secondsEl,this.a11yEl),this.shadow.innerHTML="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.setDigits({d:0,h:0,m:0,s:0})}setTextFallback(t){this.a11yEl.textContent=t}applyUnitsVisibility(){if(!this.rootEl)return;if(this.daysEl.style.display=this.showDays?"":"none",this.hoursEl.style.display=this.showHours?"":"none",this.minutesEl.style.display=this.showMinutes?"":"none",this.secondsEl.style.display=this.showSeconds?"":"none",!!!this.separatorUrl){this.sep0El.style.display="none",this.sep1El.style.display="none",this.sep2El.style.display="none";return}const e=[this.showDays,this.showHours,this.showMinutes,this.showSeconds],s=[];for(let i=0;i<e.length;i++)e[i]&&s.push(i);this.rootEl.style.setProperty("--zh-groups",String(s.length));const n=[!1,!1,!1];if(s.length>=2)for(let i=0;i<s.length-1;i++){const r=s[i+1],l=Math.min(2,Math.max(0,r-1));n[l]=!0}this.sep0El.style.display=n[0]?"":"none",this.sep1El.style.display=n[1]?"":"none",this.sep2El.style.display=n[2]?"":"none"}setDigits({d:t,h:e,m:s,s:n}){const i=S(Math.min(t,99),2),r=S(e,2),l=[...w(s)],h=[...w(n)];this.syncDigitGroup(this.daysEl,i),this.syncDigitGroup(this.hoursEl,r),this.syncDigitGroup(this.minutesEl,l),this.syncDigitGroup(this.secondsEl,h);const u=[];this.showDays&&u.push(i.join("")),this.showHours&&u.push(r.join("")),this.showMinutes&&u.push(l.join("")),this.showSeconds&&u.push(h.join("")),this.a11yEl.textContent=u.length?u.join(":"):"—"}syncDigitGroup(t,e){for(;t.children.length<e.length;){const s=document.createElement("span");s.className="zh__digit",t.appendChild(s)}for(;t.children.length>e.length;){const s=t.lastElementChild;if(!s)break;t.removeChild(s)}for(let s=0;s<e.length;s++){const n=t.children[s],i=D(e[s]);n.style.setProperty("--zh-sheet-index",String(i))}}tick(){if(!this.digitsUrl)return;const t=d(this.durationMs);if(t===0){this.setDigits({d:0,h:0,m:0,s:0}),this.fireDoneOnce(),this.stop();return}const e=this.startEpochMs??Date.now(),s=d(Date.now()-e),n=d(t-s),{d:i,h:r,m:l,s:h,totalSec:u}=g(n);this.setDigits({d:i,h:r,m:l,s:h}),u===0&&(this.fireDoneOnce(),this.stop())}fireDoneOnce(){this.doneFired||(this.doneFired=!0,this.dispatchEvent(new CustomEvent("done")))}scheduleNextSecondBoundary(){const e=1e3-Date.now()%1e3;this.nextTickTimeout=window.setTimeout(()=>{this.tick(),this.isRunning()&&this.scheduleNextSecondBoundary()},e)}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}applyStyles(t){if(typeof t=="string"){if(f(this.shadow)){const e=E(t);if(e){this.shadow.adoptedStyleSheets=[e],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&f(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(p.defaultStylesheet&&f(this.shadow)){this.shadow.adoptedStyleSheets=[p.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=c}}customElements.get("countdown-timer")||customElements.define("countdown-timer",p);function C(o={}){const{selector:t="countdown-timer",onDone:e,stylesheet:s}=o,n=Array.from(document.querySelectorAll(t));return e&&n.forEach(i=>{i.addEventListener("done",()=>e(i))}),s&&n.forEach(i=>{const r=i;typeof s=="string"?r.adoptStyles(s):r.adoptStylesheet(s)}),n}a.initCountdownTimers=C,a.zeroHourCssText=T,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
+`,M=c;function T(o){const t=o.charCodeAt(0)-48;return t>=0&&t<=9?t:0}function f(o){return o<0?0:o}const g={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},E={hours:0,minutes:0,seconds:0};function y(o){return"adoptedStyleSheets"in o}function w(o){try{const t=new CSSStyleSheet;return t.replaceSync(o),t}catch{return null}}const F=w(c);function S(o){const t=Math.floor(o/1e3),e=t%60,s=Math.floor(t/60)%60,i=Math.floor(t/3600),n=Math.floor(i/24),r=i%24;return{d:n,h:r,m:s,s:e,totalSec:t}}function b(o){return String(o).padStart(2,"0")}function D(o,t){return[...String(o).padStart(t,"0")]}function N(o,t,e){if(!o.hasAttribute(t))return e;const s=o.getAttribute(t);return s==null||s===""?!0:s!=="false"}function z(o){if(o==null)return null;const t=o.trim();if(!t)return null;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const s=Number(e[1]),i=Number(e[2]),n=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(i)||!Number.isFinite(n)?null:{year:s,month:i,day:n}}function x(o){if(o==null)return{...E};const t=o.trim();if(!t)return{...E};const e=t.split(":"),s=Number(e[0]??"0"),i=Number(e[1]??"0"),n=Number(e[2]??"0");return{hours:Number.isFinite(s)?s:0,minutes:Number.isFinite(i)?i:0,seconds:Number.isFinite(n)?n:0}}function C(o){if(o==null)return null;const t=o.trim();if(!t)return null;const e=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!e)return null;const s=Number(e[1]),i=Number(e[2]),n=Number(e[3]??"0");return!Number.isFinite(s)||!Number.isFinite(i)||!Number.isFinite(n)||s<0||s>23||i<0||i>59||n<0||n>59?null:{hours:s,minutes:i,seconds:n}}function _(o){if(o==null)return null;let t=o.trim();if(!t)return null;/^utc/i.test(t)&&(t=t.slice(3));let e=1;if(t[0]==="+"?t=t.slice(1):t[0]==="-"&&(e=-1,t=t.slice(1)),!t)return null;const[s,i="0"]=t.split(":"),n=Number(s),r=Number(i);if(!Number.isFinite(n)||!Number.isFinite(r))return null;const l=n*60+r;return e*l}function v(){if(typeof window>"u"||!("location"in window))return null;const o=window.location?.search??"";if(!o)return null;const t=new URLSearchParams(o),e={},s=t.get("date")?.trim();s&&(e.date=s);const i=t.get("time")?.trim();i&&(e.time=i);const n=t.get("utc")?.trim();n&&(e.utc=n);const r=t.get("units")?.trim();return r&&(e.units=r),Object.keys(e).length?e:null}function A(o){const t=(o??"").trim().toLowerCase();if(!t)return g;const e=t.split(":").map(a=>a.trim()).filter(Boolean);if(!e.length)return g;const s=new Set(e),i=s.has("d"),n=s.has("h"),r=s.has("m"),l=s.has("s");return!i&&!n&&!r&&!l?g:{showDays:i,showHours:n,showMinutes:r,showSeconds:l}}class p extends HTMLElement{static defaultStylesheet=F;static observedAttributes=["digits-url","separator-url","autostart","date","time","utc","units","mode"];shadow=this.attachShadow({mode:"open"});digitsUrl=null;separatorUrl=null;autostart=!0;durationMs=0;targetEpochMs=null;startEpochMs=null;nextTickTimeout=null;doneFired=!1;rootEl;daysEl;hoursEl;minutesEl;secondsEl;a11yEl;sep0El;sep1El;sep2El;styleEl=null;showDays=!0;showHours=!0;showMinutes=!0;showSeconds=!0;mode="static";hasDigitsRendered=!1;connectedCallback(){this.render(),this.readAttributes(),this.autostart?this.start():this.renderStaticInitial()}disconnectedCallback(){this.stop()}attributeChangedCallback(t,e,s){if(!this.isConnected)return;const i=this.isRunning();this.readAttributes(),this.doneFired=!1,i&&this.autostart?this.start():this.renderStaticInitial()}start(){this.stop(),this.digitsUrl&&(this.durationMs=this.targetEpochMs!=null?this.targetEpochMs-Date.now():0,this.startEpochMs=Date.now(),this.tick(),this.scheduleNextSecondBoundary())}stop(){this.nextTickTimeout!=null&&(window.clearTimeout(this.nextTickTimeout),this.nextTickTimeout=null),this.startEpochMs=null}reset(){this.doneFired=!1,this.autostart?this.start():this.renderStaticInitial()}isRunning(){return this.startEpochMs!=null&&this.nextTickTimeout!=null}isDone(){return!this.digitsUrl||this.targetEpochMs==null?!1:Date.now()>=this.targetEpochMs}readAttributes(){this.rootEl||this.render();const t=v();this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=N(this,"autostart",!0);const e=(this.getAttribute("mode")??"").trim().toLowerCase();this.mode=e==="scroll"?"scroll":"static";const s=A(t?.units??this.getAttribute("units"));this.showDays=s.showDays,this.showHours=s.showHours,this.showMinutes=s.showMinutes,this.showSeconds=s.showSeconds;const i=z(this.getAttribute("date")),r=z(t?.date??null)??i,l=x(this.getAttribute("time")),h=C(t?.time??null)??l,m=_(this.getAttribute("utc")),L=_(t?.utc??null)??m??0;if(!r)this.targetEpochMs=null;else{const H=Date.UTC(r.year,r.month-1,r.day,h.hours,h.minutes,h.seconds);this.targetEpochMs=H-L*60*1e3}if(this.durationMs=0,!this.digitsUrl){this.setTextFallback("—:—:—:—");return}this.rootEl.style.setProperty("--zh-digits-url",`url("${this.digitsUrl}")`),this.separatorUrl?this.rootEl.style.setProperty("--zh-sep-url",`url("${this.separatorUrl}")`):this.rootEl.style.removeProperty("--zh-sep-url"),this.applyUnitsVisibility(),this.rootEl.classList.toggle("zh--mode-scroll",this.mode==="scroll")}renderStaticInitial(){if(this.targetEpochMs!=null){const t=Date.now(),e=f(this.targetEpochMs-t),{d:s,h:i,m:n,s:r}=S(e);this.setDigits({d:s,h:i,m:n,s:r},!1)}else this.setDigits({d:0,h:0,m:0,s:0},!1)}render(){this.applyStyles(null),this.rootEl=document.createElement("div"),this.rootEl.className="zh",this.daysEl=document.createElement("div"),this.daysEl.className="zh__group",this.hoursEl=document.createElement("div"),this.hoursEl.className="zh__group",this.minutesEl=document.createElement("div"),this.minutesEl.className="zh__group",this.secondsEl=document.createElement("div"),this.secondsEl.className="zh__group",this.sep0El=document.createElement("span"),this.sep0El.className="zh__sep",this.sep1El=document.createElement("span"),this.sep1El.className="zh__sep",this.sep2El=document.createElement("span"),this.sep2El.className="zh__sep",this.a11yEl=document.createElement("span"),this.a11yEl.className="zh__a11y",this.a11yEl.setAttribute("aria-live","polite"),this.rootEl.append(this.daysEl,this.sep0El,this.hoursEl,this.sep1El,this.minutesEl,this.sep2El,this.secondsEl,this.a11yEl),this.shadow.innerHTML="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.setDigits({d:0,h:0,m:0,s:0},!1),this.hasDigitsRendered=!1}setTextFallback(t){this.a11yEl.textContent=t}applyUnitsVisibility(){if(!this.rootEl)return;if(this.daysEl.style.display=this.showDays?"":"none",this.hoursEl.style.display=this.showHours?"":"none",this.minutesEl.style.display=this.showMinutes?"":"none",this.secondsEl.style.display=this.showSeconds?"":"none",!!!this.separatorUrl){this.sep0El.style.display="none",this.sep1El.style.display="none",this.sep2El.style.display="none";return}const e=[this.showDays,this.showHours,this.showMinutes,this.showSeconds],s=[];for(let n=0;n<e.length;n++)e[n]&&s.push(n);this.rootEl.style.setProperty("--zh-groups",String(s.length));const i=[!1,!1,!1];if(s.length>=2)for(let n=0;n<s.length-1;n++){const r=s[n+1],l=Math.min(2,Math.max(0,r-1));i[l]=!0}this.sep0El.style.display=i[0]?"":"none",this.sep1El.style.display=i[1]?"":"none",this.sep2El.style.display=i[2]?"":"none"}setDigits({d:t,h:e,m:s,s:i},n=!0){let r=n;this.hasDigitsRendered||(r=!1);const l=D(Math.min(t,99),2),a=D(e,2),h=[...b(s)],m=[...b(i)];this.syncDigitGroup(this.daysEl,l,r),this.syncDigitGroup(this.hoursEl,a,r),this.syncDigitGroup(this.minutesEl,h,r),this.syncDigitGroup(this.secondsEl,m,r);const d=[];this.showDays&&d.push(l.join("")),this.showHours&&d.push(a.join("")),this.showMinutes&&d.push(h.join("")),this.showSeconds&&d.push(m.join("")),this.a11yEl.textContent=d.length?d.join(":"):"—",this.hasDigitsRendered=!0}syncDigitGroup(t,e,s){for(;t.children.length<e.length;){const i=t.children.length;t.appendChild(this.createDigitSlot(e[i]))}for(;t.children.length>e.length;){const i=t.lastElementChild;if(!i)break;t.removeChild(i)}for(let i=0;i<e.length;i++){const n=t.children[i];this.syncDigitSlot(n,e[i],s)}}createDigitSlot(t){const e=document.createElement("span");e.className="zh__digit";const s=document.createElement("span");s.className="zh__digit-track";const i=this.createDigitFace(t);return i.classList.add("zh__digit-face--current"),s.append(i),e.append(s),e}createDigitFace(t){const e=document.createElement("span");return e.className="zh__digit-face",this.setFaceDigit(e,t),e}setFaceDigit(t,e){t.dataset.zhDigit=e;const s=T(e);t.style.setProperty("--zh-sheet-index",String(s))}ensureDigitTrack(t){let e=t.querySelector(".zh__digit-track");return e||(e=document.createElement("span"),e.className="zh__digit-track",t.innerHTML="",t.append(e)),e}getOrCreateCurrentFace(t,e){let s=t.querySelector(".zh__digit-face--current");if(!s)s=t.querySelector(".zh__digit-face")??this.createDigitFace(e),s.classList.add("zh__digit-face--current"),this.setFaceDigit(s,s.dataset.zhDigit??e),t.innerHTML="",t.append(s);else{const i=Array.from(t.children);for(const n of i)n!==s&&t.removeChild(n)}return s}cleanupTrack(t,e){if(!t.contains(e))return;const s=Array.from(t.children);for(const i of s)i!==e&&t.removeChild(i);e.classList.remove("zh__digit-face--next"),e.classList.add("zh__digit-face--current"),t.style.transition=this.mode==="scroll"?"":"none",t.style.transform="translateY(0)"}parseTransitionMs(t){const e=window.getComputedStyle(t),s=e.transitionDuration.split(",").map(a=>a.trim()),i=e.transitionDelay.split(",").map(a=>a.trim()),n=a=>a?a.endsWith("ms")?Number.parseFloat(a):a.endsWith("s")?Number.parseFloat(a)*1e3:Number.parseFloat(a)||0:0,r=s[0]?n(s[0]):0,l=i[0]?n(i[0]):0;return r+l}animateDigitChange(t,e,s){const i=this.createDigitFace(s);i.classList.add("zh__digit-face--next"),t.innerHTML="",t.append(i,e),t.style.transition="none",t.style.transform="translateY(-100%)",t.offsetHeight,t.style.transition="",t.style.transform="translateY(0)";const n=()=>{t.removeEventListener("transitionend",n),t.contains(i)&&this.cleanupTrack(t,i)};t.addEventListener("transitionend",n,{once:!0});const r=this.parseTransitionMs(t)+150;window.setTimeout(n,r||800)}syncDigitSlot(t,e,s){const i=this.ensureDigitTrack(t),n=this.getOrCreateCurrentFace(i,e),r=n.dataset.zhDigit??e;if(this.setFaceDigit(n,r),r===e||!s||this.mode!=="scroll"){r!==e&&this.setFaceDigit(n,e),this.cleanupTrack(i,n);return}this.animateDigitChange(i,n,e)}tick(){if(!this.digitsUrl)return;const t=f(this.durationMs);if(t===0){this.setDigits({d:0,h:0,m:0,s:0}),this.fireDoneOnce(),this.stop();return}const e=this.startEpochMs??Date.now(),s=f(Date.now()-e),i=f(t-s),{d:n,h:r,m:l,s:a,totalSec:h}=S(i);this.setDigits({d:n,h:r,m:l,s:a}),h===0&&(this.fireDoneOnce(),this.stop())}fireDoneOnce(){this.doneFired||(this.doneFired=!0,this.dispatchEvent(new CustomEvent("done")))}scheduleNextSecondBoundary(){const e=1e3-Date.now()%1e3;this.nextTickTimeout=window.setTimeout(()=>{this.tick(),this.isRunning()&&this.scheduleNextSecondBoundary()},e)}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}applyStyles(t){if(typeof t=="string"){if(y(this.shadow)){const e=w(t);if(e){this.shadow.adoptedStyleSheets=[e],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&y(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(p.defaultStylesheet&&y(this.shadow)){this.shadow.adoptedStyleSheets=[p.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=c}}customElements.get("countdown-timer")||customElements.define("countdown-timer",p);function U(o={}){const{selector:t="countdown-timer",onDone:e,stylesheet:s}=o,i=Array.from(document.querySelectorAll(t));if(e){const n=new WeakSet,r=l=>{n.has(l)||(n.add(l),e(l))};i.forEach(l=>{l.addEventListener("done",()=>r(l));const a=l;typeof a.isDone=="function"&&a.isDone()&&r(l)})}return s&&i.forEach(n=>{const r=n;typeof s=="string"?r.adoptStyles(s):r.adoptStylesheet(s)}),i}u.initCountdownTimers=U,u.zeroHourCssText=M,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));

package/dist/zero-hour.css

@@ -1 +1 @@
-:host{width:100%;display:block;overflow:hidden;container-type:inline-size}.zh{box-sizing:border-box;align-items:stretch;gap:0;display:flex;position:relative}.zh__group{flex:1 1 0;grid-template-rows:auto;grid-template-columns:1fr 1fr;gap:0;width:100%;min-width:0;display:grid}.zh__sep{flex:0 0 var(--zh-sep-width,4%);width:var(--zh-sep-width,4%);background-image:var(--zh-sep-url);background-position:50%;background-repeat:no-repeat;background-size:contain}.zh__digit{aspect-ratio:var(--zh-digit-aspect,9/12);background-image:var(--zh-digits-url);background-repeat:no-repeat;background-size:calc(var(--zh-digits-frames,10)*100%)100%;background-position:calc(var(--zh-sheet-index,0)*100%/(var(--zh-digits-frames,10) - 1))0;width:100%}.zh__a11y{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}
+:host{width:100%;display:block;overflow:hidden;container-type:inline-size}.zh{box-sizing:border-box;align-items:stretch;gap:0;display:flex;position:relative}.zh__group{flex:1 1 0;grid-template-rows:auto;grid-template-columns:1fr 1fr;gap:0;width:100%;min-width:0;display:grid}.zh__sep{flex:0 0 var(--zh-sep-width,4%);width:var(--zh-sep-width,4%);background-image:var(--zh-sep-url);background-position:50%;background-repeat:no-repeat;background-size:contain}.zh__digit{aspect-ratio:var(--zh-digit-aspect,9/12);width:100%;position:relative;overflow:hidden}.zh__digit-track{flex-direction:column;width:100%;height:100%;display:flex;transform:translateY(0)}.zh--mode-scroll .zh__digit-track{transition:transform var(--zh-scroll-duration,.375s)var(--zh-scroll-timing,cubic-bezier(.445,.05,.55,.95))}.zh__digit-face{background-image:var(--zh-digits-url);background-repeat:no-repeat;background-size:calc(var(--zh-digits-frames,10)*100%)100%;background-position:calc(var(--zh-sheet-index,0)*100%/(var(--zh-digits-frames,10) - 1))0;flex:0 0 100%;width:100%;height:100%}.zh__a11y{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zero-hour",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Tiny countdown Web Component. Registers <countdown-timer> that renders a configurable DD:HH:MM:SS countdown to a target date/time (optional UTC offset) and fires a done event at zero.",
   "author": "ux-ui.pro",
   "license": "MIT",
@@ -16,6 +16,7 @@
   "scripts": {
     "clean": "rimraf dist",
     "build": "vite build",
+    "dev": "vite",
     "verify": "yarn lint && yarn typecheck",
     "lint": "biome check src",
     "lint:fix": "biome check --write src",