@editora/ui-core 0.1.8 → 0.1.10

package/dist/odometer.cjs.js

@@ -0,0 +1,313 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("./ElementBase-1b301e7f.js"),D=`
+  :host {
+    --ui-odometer-font-family: var(--ui-font-family-mono, var(--font-mono, ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace));
+    --ui-odometer-font-size: var(--font-size-4, 1.25rem);
+    --ui-odometer-font-weight: 700;
+    --ui-odometer-line-height: 1.05;
+    --ui-odometer-letter-spacing: 0.03em;
+    --ui-odometer-color: var(--ui-color-text, #0f172a);
+    --ui-odometer-digit-width: 0.95ch;
+    --ui-odometer-digit-gap: 0.12em;
+    --ui-odometer-separator-gap: 0.12em;
+    --ui-odometer-container-gap: 0.14em;
+    --ui-odometer-window-height: calc(var(--ui-odometer-font-size) * var(--ui-odometer-line-height));
+    --ui-odometer-container-padding: 0;
+    --ui-odometer-container-bg: transparent;
+    --ui-odometer-container-border: none;
+    --ui-odometer-container-radius: 999px;
+    --ui-odometer-digit-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(226, 232, 240, 0.9));
+    --ui-odometer-digit-border: 1px solid rgba(148, 163, 184, 0.35);
+    --ui-odometer-digit-radius: 0.18em;
+    --ui-odometer-digit-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(15, 23, 42, 0.12);
+    --ui-odometer-separator-opacity: 0.7;
+    --ui-odometer-affix-opacity: 0.82;
+
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    font-family: var(--ui-odometer-font-family);
+    font-size: var(--ui-odometer-font-size);
+    font-weight: var(--ui-odometer-font-weight);
+    line-height: var(--ui-odometer-line-height);
+    letter-spacing: var(--ui-odometer-letter-spacing);
+    color: var(--ui-odometer-color);
+    font-variant-numeric: tabular-nums;
+    visibility: visible !important;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([size="sm"]) {
+    --ui-odometer-font-size: var(--font-size-2, 0.875rem);
+  }
+
+  :host([size="lg"]) {
+    --ui-odometer-font-size: var(--font-size-6, 1.5rem);
+  }
+
+  :host([size="xl"]) {
+    --ui-odometer-font-size: var(--font-size-8, 2rem);
+  }
+
+  :host([tone="brand"]) {
+    --ui-odometer-color: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone="success"]) {
+    --ui-odometer-color: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-odometer-color: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-odometer-color: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([theme="dark"]) {
+    --ui-odometer-color: #e2e8f0;
+    --ui-odometer-digit-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.98));
+    --ui-odometer-digit-border: 1px solid rgba(148, 163, 184, 0.24);
+    --ui-odometer-digit-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(15, 23, 42, 0.35);
+  }
+
+  :host([theme="brand"]) {
+    --ui-odometer-color: var(--ui-color-primary, #2563eb);
+    --ui-odometer-digit-bg: linear-gradient(180deg, rgba(219, 234, 254, 0.98), rgba(191, 219, 254, 0.94));
+    --ui-odometer-digit-border: 1px solid rgba(37, 99, 235, 0.22);
+  }
+
+  :host([variant="inline"]) {
+    --ui-odometer-digit-width: 0.78ch;
+    --ui-odometer-digit-gap: 0;
+    --ui-odometer-separator-gap: 0;
+    --ui-odometer-container-gap: 0;
+    --ui-odometer-digit-bg: transparent;
+    --ui-odometer-digit-border: none;
+    --ui-odometer-digit-radius: 0;
+    --ui-odometer-digit-shadow: none;
+    --ui-odometer-letter-spacing: 0.01em;
+    --ui-odometer-affix-opacity: 1;
+  }
+
+  :host([variant="digital"]) {
+    --ui-odometer-font-family: var(--ui-font-family-mono, var(--font-mono, 'SF Mono', Menlo, Monaco, Consolas, monospace));
+    --ui-odometer-color: #86efac;
+    --ui-odometer-digit-width: 0.88ch;
+    --ui-odometer-digit-gap: 0.08em;
+    --ui-odometer-container-gap: 0.12em;
+    --ui-odometer-letter-spacing: 0.05em;
+    --ui-odometer-container-padding: 0.22em 0.34em;
+    --ui-odometer-container-bg: linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.96));
+    --ui-odometer-container-border: 1px solid rgba(148, 163, 184, 0.12);
+    --ui-odometer-container-radius: 0.8em;
+    --ui-odometer-digit-bg: linear-gradient(180deg, rgba(2, 6, 23, 0.98), rgba(3, 18, 11, 0.98));
+    --ui-odometer-digit-border: 1px solid rgba(134, 239, 172, 0.18);
+    --ui-odometer-digit-radius: 0.16em;
+    --ui-odometer-digit-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.08), 0 0 14px rgba(34, 197, 94, 0.12);
+    --ui-odometer-separator-opacity: 0.9;
+    --ui-odometer-value-shadow: 0 0 10px rgba(74, 222, 128, 0.2), 0 0 22px rgba(34, 197, 94, 0.14);
+  }
+
+  :host([variant="analog"]) {
+    --ui-odometer-font-family: var(--ui-font-family-serif, Georgia, 'Times New Roman', serif);
+    --ui-odometer-color: #3f2f1e;
+    --ui-odometer-digit-width: 1.08ch;
+    --ui-odometer-digit-gap: 0.14em;
+    --ui-odometer-container-gap: 0.16em;
+    --ui-odometer-letter-spacing: 0.015em;
+    --ui-odometer-container-padding: 0.18em 0.26em;
+    --ui-odometer-container-bg: linear-gradient(180deg, rgba(248, 244, 232, 0.98), rgba(232, 223, 203, 0.98));
+    --ui-odometer-container-border: 1px solid rgba(120, 92, 55, 0.28);
+    --ui-odometer-container-radius: 999px;
+    --ui-odometer-digit-bg: radial-gradient(circle at 50% 38%, rgba(255, 251, 241, 0.98), rgba(223, 211, 188, 0.96));
+    --ui-odometer-digit-border: 1px solid rgba(120, 92, 55, 0.25);
+    --ui-odometer-digit-radius: 999px;
+    --ui-odometer-digit-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(120, 92, 55, 0.14), 0 2px 6px rgba(63, 47, 30, 0.12);
+    --ui-odometer-separator-opacity: 0.85;
+    --ui-odometer-affix-opacity: 0.92;
+    --ui-odometer-value-shadow: 0 1px 0 rgba(255, 251, 241, 0.7), 0 2px 3px rgba(120, 92, 55, 0.14);
+  }
+
+  .container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-odometer-container-gap);
+    padding: var(--ui-odometer-container-padding);
+    background: var(--ui-odometer-container-bg);
+    border: var(--ui-odometer-container-border);
+    border-radius: var(--ui-odometer-container-radius);
+  }
+
+  .container[data-variant="digital"] {
+    overflow: hidden;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 24px rgba(2, 6, 23, 0.28);
+  }
+
+  .container[data-variant="digital"]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 25%, transparent 75%, rgba(255, 255, 255, 0.03)),
+      repeating-linear-gradient(180deg, rgba(134, 239, 172, 0.06) 0, rgba(134, 239, 172, 0.06) 1px, transparent 1px, transparent 3px);
+    opacity: calc(0.52 + var(--ui-odometer-motion-intensity, 0) * 0.22);
+    pointer-events: none;
+  }
+
+  .container[data-variant="analog"] {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 251, 241, 0.9),
+      inset 0 -1px 0 rgba(120, 92, 55, 0.08),
+      0 10px 24px rgba(120, 92, 55, 0.12);
+  }
+
+  .container[data-variant="analog"]::before {
+    content: '';
+    position: absolute;
+    inset: 0.18em;
+    border-radius: inherit;
+    border: 1px solid rgba(120, 92, 55, 0.14);
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  .container[data-variant="analog"]::after {
+    content: '';
+    position: absolute;
+    left: 0.36em;
+    right: 0.36em;
+    top: 50%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(120, 92, 55, 0.18), transparent);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .digits {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-odometer-digit-gap);
+  }
+
+  .value-display {
+    display: inline-flex;
+    align-items: center;
+    white-space: pre;
+  }
+
+  .value-display.digital-display {
+    position: relative;
+    z-index: 1;
+    text-transform: uppercase;
+    text-shadow: var(--ui-odometer-value-shadow, none);
+    transform: translateY(var(--ui-odometer-digital-shift-y, 0)) scaleY(var(--ui-odometer-digital-scale-y, 1));
+    filter: brightness(calc(1 + var(--ui-odometer-motion-intensity, 0) * 0.22));
+  }
+
+  .value-display.analog-display {
+    position: relative;
+    z-index: 1;
+    text-shadow: var(--ui-odometer-value-shadow, none);
+    transform:
+      translateX(var(--ui-odometer-analog-shift-x, 0))
+      translateY(var(--ui-odometer-analog-shift-y, 0))
+      scale(var(--ui-odometer-analog-scale, 1));
+    filter: blur(var(--ui-odometer-analog-blur, 0));
+  }
+
+  .digit {
+    position: relative;
+    display: inline-flex;
+    width: var(--ui-odometer-digit-width);
+    height: var(--ui-odometer-window-height);
+    overflow: hidden;
+    align-items: stretch;
+    justify-content: stretch;
+    border-radius: var(--ui-odometer-digit-radius);
+    background: var(--ui-odometer-digit-bg);
+    border: var(--ui-odometer-digit-border);
+    box-shadow: var(--ui-odometer-digit-shadow);
+  }
+
+  .digit-track {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    transform: translateY(var(--ui-odometer-offset, 0));
+    will-change: transform;
+  }
+
+  .digit-value {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: var(--ui-odometer-digit-width);
+    height: var(--ui-odometer-window-height);
+  }
+
+  .text {
+    display: inline-flex;
+    align-items: center;
+    white-space: pre;
+  }
+
+  .separator {
+    opacity: var(--ui-odometer-separator-opacity);
+  }
+
+  .group {
+    margin: 0 var(--ui-odometer-separator-gap);
+  }
+
+  .prefix,
+  .suffix {
+    display: inline-flex;
+    align-items: center;
+    opacity: var(--ui-odometer-affix-opacity);
+    font-weight: 600;
+    white-space: pre;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .digit-track {
+      will-change: auto;
+    }
+  }
+`;function V(e){return e!==null&&e.toLowerCase()!=="false"&&e!=="0"}function n(e,t){const i=e.getAttribute(t);if(i!=null)return i;const r=e[t];return typeof r=="string"&&r.length>0?r:null}function l(e,t){const i=e.getAttribute(t);if(i!=null){const o=parseFloat(i);return Number.isNaN(o)?null:o}const r=e[t];if(typeof r=="number")return Number.isNaN(r)?null:r;if(typeof r=="string"){const o=parseFloat(r);return Number.isNaN(o)?null:o}return null}function w(e,t){const i=e.getAttribute(t);if(i!=null)return V(i);const r=e[t];return typeof r=="boolean"?r:typeof r=="string"?V(r):!1}function x(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function F(e,t,i){let r=e;return t!==null&&r<t&&(r=t),i!==null&&r>i&&(r=i),r}function k(e){return e==="inline"||e==="digital"||e==="odometer"||e==="analog"?e:"inline"}function C(e){return e==="currency"||e==="percent"||e==="number"||e==="decimal"?e:"decimal"}function N(e){return e==="compact"?"compact":"standard"}function A(e){return e==="up"||e==="down"||e==="auto"?e:"auto"}function S(e){const t=l(e,"decimals"),i=l(e,"minimum-fraction-digits"),r=l(e,"maximum-fraction-digits");return i!=null||r!=null?{minimumFractionDigits:i??void 0,maximumFractionDigits:r??void 0}:t!=null?{minimumFractionDigits:t,maximumFractionDigits:t}:{}}function P(e,t){const i=C(n(e,"format")),r=n(e,"locale")||void 0,o=n(e,"currency")||void 0,u=N(n(e,"notation")),m=n(e,"decimal-separator"),c=n(e,"group-separator"),s=S(e),y={style:i==="currency"&&o?"currency":i==="percent"?"percent":"decimal",currency:i==="currency"&&o?o:void 0,notation:u,useGrouping:!0,numberingSystem:"latn",minimumFractionDigits:s.minimumFractionDigits,maximumFractionDigits:s.maximumFractionDigits};let g;try{g=new Intl.NumberFormat(r,y).formatToParts(t)}catch{g=new Intl.NumberFormat(void 0,y).formatToParts(t)}const d=[];for(const a of g){const v=a.type==="decimal"&&m!=null?m:a.type==="group"&&c!=null?c:a.value;for(const f of v){if(/[0-9]/.test(f)){d.push({kind:"digit",value:f});continue}let p="literal";a.type==="group"?p="group":a.type==="decimal"?p="decimal":a.type==="currency"||a.type==="percentSign"||a.type==="unit"?p="symbol":(a.type==="minusSign"||a.type==="plusSign")&&(p="sign"),d.push({kind:"text",value:f,textType:p})}}return{tokens:d,text:d.map(a=>a.value).join("")}}function q(e){return e==="down"?["9","8","7","6","5","4","3","2","1","0"]:["0","1","2","3","4","5","6","7","8","9"]}function j(e,t){const i=parseInt(e,10);return Number.isNaN(i)?0:t==="down"?-(9-i)*100:-i*100}function R(e,t){return e==="linear"?t:e==="ease-in"?t*t*t:e==="ease-out"?1-Math.pow(1-t,3):e==="ease-in-out"?t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2:e==="spring"?t===0||t===1?t:Math.min(1,1-Math.cos(t*Math.PI*4)*Math.exp(-t*6)):t*t*(3-2*t)}class $ extends M.ElementBase{constructor(){super(...arguments),this._currentValue=0,this._targetValue=0,this._startValue=0,this._startTime=null,this._animationFrame=null,this._initialized=!1,this._animationProgress=1,this._motionDirection="none"}static get observedAttributes(){return["value","variant","size","tone","theme","format","locale","currency","notation","decimals","minimum-fraction-digits","maximum-fraction-digits","duration","animation","direction","prefix","suffix","decimal-separator","group-separator","separator","animate","animate-on-mount","count-up","min","max","auto-format","label"]}connectedCallback(){if(super.connectedCallback(),this._initialized)return;const t=this._readClampedValue();if(this._targetValue=t,this._shouldAnimateOnMount()&&t!==this._getMountStartValue()){this._currentValue=this._getMountStartValue(),this._initialized=!0,this.requestRender(),this._animateToValue(t);return}this._currentValue=t,this._initialized=!0,this.requestRender()}disconnectedCallback(){super.disconnectedCallback(),this._stopAnimation()}attributeChangedCallback(t,i,r){if(i!==r){if(t==="value"){const o=this._readClampedValue(r);if(!this.isConnected){this._currentValue=o,this._targetValue=o;return}if(!this._initialized){this._currentValue=o,this._targetValue=o,this._initialized=!0,this.requestRender();return}this._animateToValue(o);return}super.attributeChangedCallback(t,i,r)}}_readClampedValue(t){const i=t!=null?(()=>{const r=parseFloat(t);return Number.isNaN(r)?0:r})():l(this,"value")??0;return F(i,l(this,"min"),l(this,"max"))}_getMountStartValue(){return F(0,l(this,"min"),l(this,"max"))}_shouldAnimate(){return w(this,"animate")&&!this._isReducedMotion()}_shouldAnimateOnMount(){return(w(this,"animate-on-mount")||w(this,"count-up"))&&this._shouldAnimate()}_stopAnimation(){this._animationFrame!==null&&(cancelAnimationFrame(this._animationFrame),this._animationFrame=null),this._startTime=null,this._animationProgress=1}_animateToValue(t){if(!this._shouldAnimate()){const i=this._currentValue;this._stopAnimation(),this._currentValue=t,this._targetValue=t,this._motionDirection=t>i?"up":t<i?"down":"none",this.requestRender();return}this._stopAnimation(),this._startValue=this._currentValue,this._targetValue=t,this._startTime=null,this._animationProgress=0,this._motionDirection=t>this._startValue?"up":t<this._startValue?"down":"none",this._animationFrame=requestAnimationFrame(i=>this._animate(i))}_animate(t){this._startTime===null&&(this._startTime=t);const i=Math.max(1,l(this,"duration")??800),r=n(this,"animation")||"spring",o=t-this._startTime,u=Math.min(1,o/i),m=R(r,u);if(this._animationProgress=u,this._currentValue=this._startValue+(this._targetValue-this._startValue)*m,this.requestRender(),u<1){this._animationFrame=requestAnimationFrame(c=>this._animate(c));return}this._currentValue=this._targetValue,this._animationFrame=null,this._startTime=null,this._animationProgress=1,this.requestRender(),this._emitComplete()}_emitComplete(){this.dispatchEvent(new CustomEvent("complete",{detail:{value:this._currentValue},bubbles:!0,composed:!0}))}_isReducedMotion(){return typeof window<"u"&&window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1}render(){const t=k(n(this,"variant")),i=n(this,"prefix")||"",r=n(this,"suffix")||"",o=n(this,"label"),u=P(this,this._currentValue),m=o||`${i}${u.text}${r}`,c=this._animationFrame!==null,s=c?1-this._animationProgress:0,y=this._motionDirection==="down"?-1:this._motionDirection==="up"?1:0;let g="value-display",d="";t==="digital"?(g+=" digital-display",d=[`--ui-odometer-motion-intensity: ${s.toFixed(3)}`,`--ui-odometer-digital-shift-y: ${(y*s*.16).toFixed(3)}em`,`--ui-odometer-digital-scale-y: ${(1+s*.08).toFixed(3)}`].join("; ")):t==="analog"&&(g+=" analog-display",d=[`--ui-odometer-motion-intensity: ${s.toFixed(3)}`,`--ui-odometer-analog-shift-x: ${(y*s*.08).toFixed(3)}em`,`--ui-odometer-analog-shift-y: ${(-s*.05).toFixed(3)}em`,`--ui-odometer-analog-scale: ${(1+s*.03).toFixed(3)}`,`--ui-odometer-analog-blur: ${(s*.035).toFixed(3)}em`].join("; "));let a=`<span class="${g}" part="value" aria-hidden="true"${d?` style="${d}"`:""}>${x(u.text)}</span>`;if(t==="odometer"){const v=A(n(this,"direction")),f=v==="auto"?this._targetValue>=this._startValue?"up":"down":v,p=q(f);a=`
+        <span class="digits" part="digits" role="img" aria-label="${x(m)}">
+          ${u.tokens.map(_=>{if(_.kind==="digit"){const z=p.map(T=>`<span class="digit-value" aria-hidden="true">${T}</span>`).join("");return`
+                  <span class="digit" part="digit" aria-hidden="true">
+                    <span class="digit-track" style="--ui-odometer-offset: ${j(_.value,f)}%;">
+                      ${z}
+                    </span>
+                  </span>
+                `}const h=_,b=["text"];return(h.textType==="group"||h.textType==="decimal")&&b.push("separator"),h.textType==="group"&&b.push("group"),h.textType==="decimal"&&b.push("decimal"),h.textType==="symbol"&&b.push("symbol"),h.textType==="sign"&&b.push("sign"),`<span class="${b.join(" ")}" part="separator" aria-hidden="true">${x(h.value)}</span>`}).join("")}
+        </span>
+      `}this.setContent(`
+      <style>${D}</style>
+      <span class="container" part="container" data-variant="${t}" data-animating="${c?"true":"false"}" data-motion="${this._motionDirection}">
+        ${i?`<span class="prefix" part="prefix" aria-hidden="true">${x(i)}</span>`:""}
+        ${a}
+        ${r?`<span class="suffix" part="suffix" aria-hidden="true">${x(r)}</span>`:""}
+      </span>
+      <span class="sr-only" aria-live="polite" aria-atomic="true">${x(m)}</span>
+    `)}}typeof customElements<"u"&&!customElements.get("ui-odometer")&&customElements.define("ui-odometer",$);exports.UIOdometer=$;