zero-hour 1.1.1 → 1.2.1

package/README.md

@@ -117,7 +117,6 @@ el?.start();
 | Option (attribute) | Type | Default | Description |
 |:--------------------:|:-----------------------:|:------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `digits-url` | `string` | — | URL to the digits sprite sheet. **Required** for the graphical display (otherwise only a text fallback is updated in the a11y layer). |
-| `digits-layout` | `"vertical" \| "horizontal"` | `"vertical"` | Digits sprite layout. Default expects frames stacked vertically; set to `"horizontal"` for left-to-right sprites. |
 | `separator-url` | `string` | `null` | URL to the separator sprite (e.g. a colon). If omitted, separators are hidden. |
 | `autostart` | `boolean` | `true` | Auto-start on connect. Can be a boolean attribute (`autostart`) or a string (`autostart="false"`). |
 | `date` | `YYYY-MM-DD` | — | Target date. Without `date` the timer resolves to zero. |
@@ -146,6 +145,8 @@ el?.start();
 - 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.
 - The `done` event fires once per run (after `reset()` it can fire again).
+- Спрайт цифр должен быть горизонтальным, кадры слева направо: `0,1,2,3,4,5,6,7,8,9`. Индекс кадра соответствует самой цифре.
+- Если `digits-url` не задан, графические цифры не отображаются — обновляется только текст в скрытом a11y-элементе.
 
 <br>
 

package/dist/index.cjs.js

@@ -51,4 +51,4 @@
   white-space: nowrap;
   clip-path: inset(50%);
 }
-`,T=p;function z(r){if(r==="0")return 9;const t=r.charCodeAt(0)-48;return t>=1&&t<=9?t-1:9}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(){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=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(){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;

package/dist/index.es.js

@@ -53,9 +53,8 @@ const m = `:host {
 }
 `, C = m;
 function T(r) {
-  if (r === "0") return 9;
   const t = r.charCodeAt(0) - 48;
-  return t >= 1 && t <= 9 ? t - 1 : 9;
+  return t >= 0 && t <= 9 ? t : 0;
 }
 function u(r) {
   return r < 0 ? 0 : r;

package/dist/index.umd.js

@@ -51,4 +51,4 @@
   white-space: nowrap;
   clip-path: inset(50%);
 }
-`,T=c;function D(o){if(o==="0")return 9;const t=o.charCodeAt(0)-48;return t>=1&&t<=9?t-1:9}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(){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"})}));
+`,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(){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"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zero-hour",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "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",
@@ -39,8 +39,8 @@
     "dist/"
   ],
   "devDependencies": {
-    "@biomejs/biome": "2.3.9",
-    "@types/node": "25.0.2",
+    "@biomejs/biome": "2.3.10",
+    "@types/node": "25.0.3",
     "lightningcss": "1.30.2",
     "rimraf": "6.1.2",
     "typescript": "5.9.3",