@editora/ui-core 0.1.18 → 0.1.20

package/dist/animated-list.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-1b301e7f.js"),o="520ms",l="90ms",d="0ms",y=1400,p=.24,v=new Set(["none","sm","md","lg","full"]),A=new Set(["load","visible","manual"]),S=new Set(["calm","smooth","snappy","bouncy"]),T=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-EV6mVBUV.js"),o="520ms",l="90ms",d="0ms",x=1400,h=.24,y=new Set(["none","sm","md","lg","full"]),v=new Set(["load","visible","manual"]),A=new Set(["calm","smooth","snappy","bouncy"]),S=`
   :host {
     --ui-animated-list-duration: ${o};
     --ui-animated-list-stagger: ${l};
@@ -660,8 +660,8 @@
       forced-color-adjust: none;
     }
   }
-`;function n(s,t){if(s==null||s==="")return t;const e=s.trim();return e?/^-?\d+(\.\d+)?ms$/i.test(e)?Math.max(0,Number.parseFloat(e)):/^-?\d+(\.\d+)?s$/i.test(e)?Math.max(0,Number.parseFloat(e)*1e3):/^-?\d+(\.\d+)?$/i.test(e)?Math.max(0,Number.parseFloat(e)):t:t}function m(s,t){if(s==null||s==="")return t;const e=s.trim();return e?/^-?\d+(\.\d+)?(ms|s)$/i.test(e)?e:/^-?\d+(\.\d+)?$/i.test(e)?`${e}ms`:t:t}function u(s){if(s==null||s==="")return null;const t=s.trim();if(!t)return null;const e=t.split(/\s+/).filter(Boolean);return e.length?e.map(i=>/^-?\d+(\.\d+)?$/.test(i)?`${i}px`:i).join(" "):null}function g(s){if(s==null||s==="")return p;const t=Number.parseFloat(s);return Number.isFinite(t)?Math.min(1,Math.max(0,t)):p}class b extends x.ElementBase{constructor(){super(...arguments),this._slotEl=null,this._items=[],this._phase="idle",this._playToken=0,this._hasTriggeredOnce=!1,this._inView=!1,this._completionTimer=null,this._completionStartedAt=0,this._completionRemaining=0,this._loopTimer=null,this._loopStartedAt=0,this._loopRemaining=0,this._rafA=0,this._rafB=0,this._intersectionObserver=null,this._mediaQuery=null,this._animations=[],this._boundSlotChange=this._handleSlotChange.bind(this),this._boundReducedMotionChange=this._handleReducedMotionChange.bind(this)}static get observedAttributes(){return["effect","trigger","duration","stagger","delay","animation","loop","loop-delay","paused","threshold","variant","tone","size","radius","elevation","padding","gap"]}connectedCallback(){super.connectedCallback(),this._bindReducedMotionWatcher()}disconnectedCallback(){var t,e,i,a;this._clearTimers(),this._disconnectIntersectionObserver(),(e=(t=this._mediaQuery)==null?void 0:t.removeEventListener)==null||e.call(t,"change",this._boundReducedMotionChange),(a=(i=this._mediaQuery)==null?void 0:i.removeListener)==null||a.call(i,this._boundReducedMotionChange),this._mediaQuery=null,super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(!(e===i||!this.isConnected)){if(t==="paused"){this.hasAttribute("paused")?(this._pauseTimers(),this._pauseAnimations()):(this._resumeTimers(),this._resumeAnimations()),this._syncStateAttributes();return}if(this._syncRuntimeStyles(),t==="trigger"||t==="threshold"){this._syncTrigger(),this._autoStartIfNeeded();return}if(t==="duration"||t==="stagger"||t==="delay"||t==="loop"||t==="loop-delay"){this._phase==="running"&&!this.hasAttribute("paused")?this._scheduleCompletion(this._totalAnimationMs()):this._phase==="complete"&&this._hasLoop()&&!this.hasAttribute("paused")&&this._scheduleLoop(this._loopDelayMs());return}if(t==="effect"||t==="animation"){this._phase==="running"&&!this.hasAttribute("paused")&&this.replay();return}}}play(){if(this.hasAttribute("paused")&&this._phase==="running"){this.removeAttribute("paused");return}if(this.hasAttribute("paused")&&this.removeAttribute("paused"),this._hasTriggeredOnce=!0,this._clearTimers(),this._prefersReducedMotion()||this._items.length===0){this._setPhase("complete");return}const t=++this._playToken;this._setPhase("ready"),this._rafA=requestAnimationFrame(()=>{t!==this._playToken||!this.isConnected||(this._rafB=requestAnimationFrame(()=>{t!==this._playToken||!this.isConnected||(this._setPhase("running"),this._startAnimations(),this.hasAttribute("paused")||this._scheduleCompletion(this._totalAnimationMs()))}))})}pause(){this.hasAttribute("paused")||this.setAttribute("paused","")}replay(){this.play()}refresh(){this._syncItems(),this._syncRuntimeStyles(),this._syncTrigger(),this._phase==="complete"?this._setPhase("complete"):this._phase==="running"&&!this.hasAttribute("paused")&&this._scheduleCompletion(this._totalAnimationMs()),this._autoStartIfNeeded()}render(){var t;this.setContent(`
-      <style>${T}</style>
+`;function s(a,t){if(a==null||a==="")return t;const e=a.trim();return e?/^-?\d+(\.\d+)?ms$/i.test(e)?Math.max(0,Number.parseFloat(e)):/^-?\d+(\.\d+)?s$/i.test(e)?Math.max(0,Number.parseFloat(e)*1e3):/^-?\d+(\.\d+)?$/i.test(e)?Math.max(0,Number.parseFloat(e)):t:t}function m(a,t){if(a==null||a==="")return t;const e=a.trim();return e?/^-?\d+(\.\d+)?(ms|s)$/i.test(e)?e:/^-?\d+(\.\d+)?$/i.test(e)?`${e}ms`:t:t}function u(a){if(a==null||a==="")return null;const t=a.trim();if(!t)return null;const e=t.split(/\s+/).filter(Boolean);return e.length?e.map(i=>/^-?\d+(\.\d+)?$/.test(i)?`${i}px`:i).join(" "):null}function p(a){if(a==null||a==="")return h;const t=Number.parseFloat(a);return Number.isFinite(t)?Math.min(1,Math.max(0,t)):h}class g extends _.ElementBase{constructor(){super(...arguments),this._slotEl=null,this._items=[],this._phase="idle",this._playToken=0,this._hasTriggeredOnce=!1,this._inView=!1,this._completionTimer=null,this._completionStartedAt=0,this._completionRemaining=0,this._loopTimer=null,this._loopStartedAt=0,this._loopRemaining=0,this._rafA=0,this._rafB=0,this._intersectionObserver=null,this._mediaQuery=null,this._animations=[],this._boundSlotChange=this._handleSlotChange.bind(this),this._boundReducedMotionChange=this._handleReducedMotionChange.bind(this)}static get observedAttributes(){return["effect","trigger","duration","stagger","delay","animation","loop","loop-delay","paused","threshold","variant","tone","size","radius","elevation","padding","gap"]}connectedCallback(){super.connectedCallback(),this._bindReducedMotionWatcher()}disconnectedCallback(){this._clearTimers(),this._disconnectIntersectionObserver(),this._mediaQuery?.removeEventListener?.("change",this._boundReducedMotionChange),this._mediaQuery?.removeListener?.(this._boundReducedMotionChange),this._mediaQuery=null,super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(!(e===i||!this.isConnected)){if(t==="paused"){this.hasAttribute("paused")?(this._pauseTimers(),this._pauseAnimations()):(this._resumeTimers(),this._resumeAnimations()),this._syncStateAttributes();return}if(this._syncRuntimeStyles(),t==="trigger"||t==="threshold"){this._syncTrigger(),this._autoStartIfNeeded();return}if(t==="duration"||t==="stagger"||t==="delay"||t==="loop"||t==="loop-delay"){this._phase==="running"&&!this.hasAttribute("paused")?this._scheduleCompletion(this._totalAnimationMs()):this._phase==="complete"&&this._hasLoop()&&!this.hasAttribute("paused")&&this._scheduleLoop(this._loopDelayMs());return}if(t==="effect"||t==="animation"){this._phase==="running"&&!this.hasAttribute("paused")&&this.replay();return}}}play(){if(this.hasAttribute("paused")&&this._phase==="running"){this.removeAttribute("paused");return}if(this.hasAttribute("paused")&&this.removeAttribute("paused"),this._hasTriggeredOnce=!0,this._clearTimers(),this._prefersReducedMotion()||this._items.length===0){this._setPhase("complete");return}const t=++this._playToken;this._setPhase("ready"),this._rafA=requestAnimationFrame(()=>{t!==this._playToken||!this.isConnected||(this._rafB=requestAnimationFrame(()=>{t!==this._playToken||!this.isConnected||(this._setPhase("running"),this._startAnimations(),this.hasAttribute("paused")||this._scheduleCompletion(this._totalAnimationMs()))}))})}pause(){this.hasAttribute("paused")||this.setAttribute("paused","")}replay(){this.play()}refresh(){this._syncItems(),this._syncRuntimeStyles(),this._syncTrigger(),this._phase==="complete"?this._setPhase("complete"):this._phase==="running"&&!this.hasAttribute("paused")&&this._scheduleCompletion(this._totalAnimationMs()),this._autoStartIfNeeded()}render(){this.setContent(`
+      <style>${S}</style>
       <div class="root" part="root">
         <div class="surface" part="surface">
           <div class="list" part="list">
@@ -669,4 +669,4 @@
           </div>
         </div>
       </div>
-    `),this._slotEl=this.root.querySelector("slot"),(t=this._slotEl)==null||t.addEventListener("slotchange",this._boundSlotChange),this._syncRuntimeStyles(),this._syncItems(),this._syncTrigger(),this._autoStartIfNeeded()}shouldRenderOnAttributeChange(){return!1}_handleSlotChange(){this._syncItems(),this._phase==="complete"&&this._setPhase("complete"),this._autoStartIfNeeded()}_handleReducedMotionChange(){if(this._prefersReducedMotion()){this._clearTimers(),this._setPhase("complete");return}this._autoStartIfNeeded()}_bindReducedMotionWatcher(){var t,e,i,a;typeof window>"u"||typeof window.matchMedia!="function"||this._mediaQuery||(this._mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),(e=(t=this._mediaQuery).addEventListener)==null||e.call(t,"change",this._boundReducedMotionChange),(a=(i=this._mediaQuery).addListener)==null||a.call(i,this._boundReducedMotionChange))}_prefersReducedMotion(){var t;return!!((t=this._mediaQuery)!=null&&t.matches)}_itemsFromSlot(){return this._slotEl?this._slotEl.assignedElements({flatten:!0}).filter(t=>t instanceof HTMLElement):[]}_syncItems(){const t=this._itemsFromSlot(),e=new Set(t);for(const i of this._items)e.has(i)||(i.style.removeProperty("--ui-animated-list-index"),i.removeAttribute("data-ui-animated-list-managed"),i.hasAttribute("data-ui-animated-list-owned")&&(i.removeAttribute("data-ui-animated-list-item"),i.removeAttribute("data-ui-animated-list-owned")));t.forEach((i,a)=>{i.setAttribute("data-ui-animated-list-managed",""),i.hasAttribute("data-ui-animated-list-item")||(i.setAttribute("data-ui-animated-list-item",""),i.setAttribute("data-ui-animated-list-owned","")),i.style.setProperty("--ui-animated-list-index",String(a))}),this._items=t,this._items.length||this._setPhase("complete")}_syncRuntimeStyles(){this.style.setProperty("--ui-animated-list-duration",m(this.getAttribute("duration"),o)),this.style.setProperty("--ui-animated-list-stagger",m(this.getAttribute("stagger"),l)),this.style.setProperty("--ui-animated-list-delay",m(this.getAttribute("delay"),d));const t=u(this.getAttribute("padding"));t?this.style.setProperty("--ui-animated-list-padding",t):this.style.removeProperty("--ui-animated-list-padding");const e=u(this.getAttribute("gap"));e?this.style.setProperty("--ui-animated-list-gap",e):this.style.removeProperty("--ui-animated-list-gap");const i=this.getAttribute("radius");if(!i||v.has(i.trim())){this.style.removeProperty("--ui-animated-list-radius"),this.style.removeProperty("--ui-animated-list-item-radius");return}const a=u(i);a?(this.style.setProperty("--ui-animated-list-radius",a),this.style.setProperty("--ui-animated-list-item-radius",a)):(this.style.removeProperty("--ui-animated-list-radius"),this.style.removeProperty("--ui-animated-list-item-radius"))}_trigger(){const t=this.getAttribute("trigger");return t&&A.has(t)?t:"load"}_hasLoop(){return this.hasAttribute("loop")}_animationPreset(){const t=this.getAttribute("animation");return t&&S.has(t)?t:"smooth"}_motionProfile(){switch(this._animationPreset()){case"calm":return{durationScale:1.12,distanceScale:.78,blurScale:.75,rotateScale:.82,overshootY:-1,overshootScale:1.01,easing:"cubic-bezier(0.22, 1, 0.36, 1)"};case"snappy":return{durationScale:.88,distanceScale:1.12,blurScale:.92,rotateScale:1.08,overshootY:-2.5,overshootScale:1.028,easing:"cubic-bezier(0.16, 1, 0.3, 1)"};case"bouncy":return{durationScale:1.08,distanceScale:1.18,blurScale:1,rotateScale:1.18,overshootY:-4,overshootScale:1.05,easing:"cubic-bezier(0.2, 1.18, 0.28, 1)"};case"smooth":default:return{durationScale:1,distanceScale:1,blurScale:1,rotateScale:1,overshootY:-2,overshootScale:1.02,easing:"cubic-bezier(0.2, 0.9, 0.24, 1)"}}}_loopDelayMs(){return n(this.getAttribute("loop-delay"),y)}_totalAnimationMs(){const t=Math.max(this._items.length,1),e=n(this.getAttribute("duration"),n(o,520))*this._motionProfile().durationScale,i=n(this.getAttribute("stagger"),n(l,90)),a=n(this.getAttribute("delay"),n(d,0));return Math.max(0,a+e+i*Math.max(0,t-1))}_scheduleCompletion(t){if(this._clearCompletionTimer(),this.hasAttribute("paused")){this._completionRemaining=t;return}if(this._completionRemaining=t,t<=0){queueMicrotask(()=>this._completeRun());return}this._completionStartedAt=Date.now();const e=this._playToken;this._completionTimer=setTimeout(()=>{e===this._playToken&&(this._completionTimer=null,this._completionRemaining=0,this._completeRun())},t)}_scheduleLoop(t){if(this._clearLoopTimer(),!this._hasLoop()||this.hasAttribute("paused")){this._loopRemaining=t;return}if(this._loopRemaining=t,t<=0){queueMicrotask(()=>this.replay());return}this._loopStartedAt=Date.now();const e=this._playToken;this._loopTimer=setTimeout(()=>{e===this._playToken&&(this._loopTimer=null,this._loopRemaining=0,this.replay())},t)}_completeRun(){this._setPhase("complete"),this._hasLoop()&&!this._prefersReducedMotion()&&this._scheduleLoop(this._loopDelayMs())}_pauseTimers(){if(this._completionTimer){const t=Date.now()-this._completionStartedAt;this._completionRemaining=Math.max(0,this._completionRemaining-t),this._clearCompletionTimer()}if(this._loopTimer){const t=Date.now()-this._loopStartedAt;this._loopRemaining=Math.max(0,this._loopRemaining-t),this._clearLoopTimer()}}_resumeTimers(){if(this._phase==="running"){this._completionRemaining>0?this._scheduleCompletion(this._completionRemaining):this._scheduleCompletion(this._totalAnimationMs());return}this._phase==="complete"&&this._hasLoop()&&(this._loopRemaining>0?this._scheduleLoop(this._loopRemaining):this._scheduleLoop(this._loopDelayMs()))}_clearTimers(){this._playToken+=1,this._clearAnimations(),this._clearCompletionTimer(),this._clearLoopTimer(),this._rafA&&cancelAnimationFrame(this._rafA),this._rafB&&cancelAnimationFrame(this._rafB),this._rafA=0,this._rafB=0,this._completionRemaining=0,this._loopRemaining=0}_clearCompletionTimer(){this._completionTimer&&(clearTimeout(this._completionTimer),this._completionTimer=null)}_clearLoopTimer(){this._loopTimer&&(clearTimeout(this._loopTimer),this._loopTimer=null)}_setPhase(t){this._phase=t,this.setAttribute("data-phase",t),this._syncStateAttributes()}_syncStateAttributes(){const t=this.hasAttribute("paused")&&(this._phase==="running"||this._loopRemaining>0);this.setAttribute("data-state",t?"paused":this._phase)}_syncTrigger(){if(this._trigger()!=="visible"){this._disconnectIntersectionObserver(),this._inView=!0;return}if(typeof IntersectionObserver>"u"){this._inView=!0;return}this._disconnectIntersectionObserver(),this._intersectionObserver=new IntersectionObserver(t=>{const e=t[0];e&&(this._inView=e.isIntersecting&&e.intersectionRatio>=g(this.getAttribute("threshold")),this._inView&&this._autoStartIfNeeded())},{threshold:[0,g(this.getAttribute("threshold")),1]}),this._intersectionObserver.observe(this)}_disconnectIntersectionObserver(){var t;(t=this._intersectionObserver)==null||t.disconnect(),this._intersectionObserver=null}_autoStartIfNeeded(){if(!(!this.isConnected||this.hasAttribute("paused"))){if(this._prefersReducedMotion()){this._setPhase("complete");return}if(this._trigger()==="manual"){this._phase==="idle"&&this._setPhase("ready");return}if(this._trigger()==="visible"&&!this._inView){this._phase==="idle"&&this._setPhase("ready");return}this._hasTriggeredOnce||this.play()}}_pauseAnimations(){for(const t of this._animations)try{t.pause()}catch{}}_resumeAnimations(){for(const t of this._animations)try{t.play()}catch{}}_clearAnimations(){for(const t of this._animations)try{t.cancel()}catch{}this._animations=[]}_effectKeyframes(){const t=this.getAttribute("effect"),e=this._motionProfile(),i=e.distanceScale,a=12*e.blurScale,r=e.rotateScale;switch(t){case"fade-down":return[{opacity:0,transform:`translate3d(0, ${-18*i}px, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"slide-left":return[{opacity:0,transform:`translate3d(${28*i}px, 0, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"slide-right":return[{opacity:0,transform:`translate3d(${-28*i}px, 0, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"scale-in":return[{opacity:0,transform:`translate3d(0, ${10*i}px, 0) scale(${1-.06*i})`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none"}];case"blur-in":return[{opacity:0,transform:`translate3d(0, ${14*i}px, 0) scale(${1-.02*i})`,filter:`blur(${a}px)`},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"blur(0)"}];case"pop":return[{opacity:0,transform:`translate3d(0, ${8*i}px, 0) scale(${1-.12*i})`,filter:"none",offset:0},{opacity:1,transform:`translate3d(0, ${e.overshootY}px, 0) scale(${e.overshootScale})`,filter:"none",offset:.6},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none",offset:1}];case"flip-in":return[{opacity:0,transform:`perspective(900px) rotateX(${-18*r}deg) translate3d(0, ${14*i}px, 0)`,filter:"none"},{opacity:1,transform:"perspective(900px) rotateX(0deg) translate3d(0, 0, 0)",filter:"none"}];case"rotate-in":return[{opacity:0,transform:`translate3d(0, ${12*i}px, 0) rotate(${-10*r}deg) scale(${1-.03*i})`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0) rotate(0deg) scale(1)",filter:"none"}];case"tilt-in":return[{opacity:0,transform:`perspective(900px) rotateY(${-14*r}deg) translate3d(0, ${12*i}px, 0)`,filter:"none"},{opacity:1,transform:"perspective(900px) rotateY(0deg) translate3d(0, 0, 0)",filter:"none"}];case"float-up":return[{opacity:0,transform:`translate3d(0, ${26*i}px, 0) scale(${1-.015*i})`,filter:"none",offset:0},{opacity:1,transform:`translate3d(0, ${Math.min(e.overshootY,-1)}px, 0) scale(${Math.max(1.01,e.overshootScale-.005)})`,filter:"none",offset:.62},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none",offset:1}];case"swing-in":return[{opacity:0,transform:`translate3d(${-16*i}px, 0, 0) rotate(${-7*r}deg)`,filter:"none",offset:0},{opacity:1,transform:"translate3d(1px, 0, 0) rotate(1deg)",filter:"none",offset:.7},{opacity:1,transform:"translate3d(0, 0, 0) rotate(0deg)",filter:"none",offset:1}];case"fade-up":default:return[{opacity:0,transform:`translate3d(0, ${18*i}px, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}]}}_startAnimations(){var c;if(this._clearAnimations(),typeof((c=this._items[0])==null?void 0:c.animate)!="function")return;const t=this._motionProfile(),e=n(this.getAttribute("duration"),n(o,520))*t.durationScale,i=n(this.getAttribute("stagger"),n(l,90)),a=n(this.getAttribute("delay"),n(d,0)),r=this._effectKeyframes();this._animations=this._items.map((f,_)=>{f.style.animation="none";const h=f.animate(r,{duration:e,delay:a+_*i,fill:"both",easing:t.easing});if(this.hasAttribute("paused"))try{h.pause()}catch{}return h})}}typeof customElements<"u"&&!customElements.get("ui-animated-list")&&customElements.define("ui-animated-list",b);exports.UIAnimatedList=b;
+    `),this._slotEl=this.root.querySelector("slot"),this._slotEl?.addEventListener("slotchange",this._boundSlotChange),this._syncRuntimeStyles(),this._syncItems(),this._syncTrigger(),this._autoStartIfNeeded()}shouldRenderOnAttributeChange(){return!1}_handleSlotChange(){this._syncItems(),this._phase==="complete"&&this._setPhase("complete"),this._autoStartIfNeeded()}_handleReducedMotionChange(){if(this._prefersReducedMotion()){this._clearTimers(),this._setPhase("complete");return}this._autoStartIfNeeded()}_bindReducedMotionWatcher(){typeof window>"u"||typeof window.matchMedia!="function"||this._mediaQuery||(this._mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this._mediaQuery.addEventListener?.("change",this._boundReducedMotionChange),this._mediaQuery.addListener?.(this._boundReducedMotionChange))}_prefersReducedMotion(){return!!this._mediaQuery?.matches}_itemsFromSlot(){return this._slotEl?this._slotEl.assignedElements({flatten:!0}).filter(t=>t instanceof HTMLElement):[]}_syncItems(){const t=this._itemsFromSlot(),e=new Set(t);for(const i of this._items)e.has(i)||(i.style.removeProperty("--ui-animated-list-index"),i.removeAttribute("data-ui-animated-list-managed"),i.hasAttribute("data-ui-animated-list-owned")&&(i.removeAttribute("data-ui-animated-list-item"),i.removeAttribute("data-ui-animated-list-owned")));t.forEach((i,n)=>{i.setAttribute("data-ui-animated-list-managed",""),i.hasAttribute("data-ui-animated-list-item")||(i.setAttribute("data-ui-animated-list-item",""),i.setAttribute("data-ui-animated-list-owned","")),i.style.setProperty("--ui-animated-list-index",String(n))}),this._items=t,this._items.length||this._setPhase("complete")}_syncRuntimeStyles(){this.style.setProperty("--ui-animated-list-duration",m(this.getAttribute("duration"),o)),this.style.setProperty("--ui-animated-list-stagger",m(this.getAttribute("stagger"),l)),this.style.setProperty("--ui-animated-list-delay",m(this.getAttribute("delay"),d));const t=u(this.getAttribute("padding"));t?this.style.setProperty("--ui-animated-list-padding",t):this.style.removeProperty("--ui-animated-list-padding");const e=u(this.getAttribute("gap"));e?this.style.setProperty("--ui-animated-list-gap",e):this.style.removeProperty("--ui-animated-list-gap");const i=this.getAttribute("radius");if(!i||y.has(i.trim())){this.style.removeProperty("--ui-animated-list-radius"),this.style.removeProperty("--ui-animated-list-item-radius");return}const n=u(i);n?(this.style.setProperty("--ui-animated-list-radius",n),this.style.setProperty("--ui-animated-list-item-radius",n)):(this.style.removeProperty("--ui-animated-list-radius"),this.style.removeProperty("--ui-animated-list-item-radius"))}_trigger(){const t=this.getAttribute("trigger");return t&&v.has(t)?t:"load"}_hasLoop(){return this.hasAttribute("loop")}_animationPreset(){const t=this.getAttribute("animation");return t&&A.has(t)?t:"smooth"}_motionProfile(){switch(this._animationPreset()){case"calm":return{durationScale:1.12,distanceScale:.78,blurScale:.75,rotateScale:.82,overshootY:-1,overshootScale:1.01,easing:"cubic-bezier(0.22, 1, 0.36, 1)"};case"snappy":return{durationScale:.88,distanceScale:1.12,blurScale:.92,rotateScale:1.08,overshootY:-2.5,overshootScale:1.028,easing:"cubic-bezier(0.16, 1, 0.3, 1)"};case"bouncy":return{durationScale:1.08,distanceScale:1.18,blurScale:1,rotateScale:1.18,overshootY:-4,overshootScale:1.05,easing:"cubic-bezier(0.2, 1.18, 0.28, 1)"};default:return{durationScale:1,distanceScale:1,blurScale:1,rotateScale:1,overshootY:-2,overshootScale:1.02,easing:"cubic-bezier(0.2, 0.9, 0.24, 1)"}}}_loopDelayMs(){return s(this.getAttribute("loop-delay"),x)}_totalAnimationMs(){const t=Math.max(this._items.length,1),e=s(this.getAttribute("duration"),s(o,520))*this._motionProfile().durationScale,i=s(this.getAttribute("stagger"),s(l,90)),n=s(this.getAttribute("delay"),s(d,0));return Math.max(0,n+e+i*Math.max(0,t-1))}_scheduleCompletion(t){if(this._clearCompletionTimer(),this.hasAttribute("paused")){this._completionRemaining=t;return}if(this._completionRemaining=t,t<=0){queueMicrotask(()=>this._completeRun());return}this._completionStartedAt=Date.now();const e=this._playToken;this._completionTimer=setTimeout(()=>{e===this._playToken&&(this._completionTimer=null,this._completionRemaining=0,this._completeRun())},t)}_scheduleLoop(t){if(this._clearLoopTimer(),!this._hasLoop()||this.hasAttribute("paused")){this._loopRemaining=t;return}if(this._loopRemaining=t,t<=0){queueMicrotask(()=>this.replay());return}this._loopStartedAt=Date.now();const e=this._playToken;this._loopTimer=setTimeout(()=>{e===this._playToken&&(this._loopTimer=null,this._loopRemaining=0,this.replay())},t)}_completeRun(){this._setPhase("complete"),this._hasLoop()&&!this._prefersReducedMotion()&&this._scheduleLoop(this._loopDelayMs())}_pauseTimers(){if(this._completionTimer){const t=Date.now()-this._completionStartedAt;this._completionRemaining=Math.max(0,this._completionRemaining-t),this._clearCompletionTimer()}if(this._loopTimer){const t=Date.now()-this._loopStartedAt;this._loopRemaining=Math.max(0,this._loopRemaining-t),this._clearLoopTimer()}}_resumeTimers(){if(this._phase==="running"){this._completionRemaining>0?this._scheduleCompletion(this._completionRemaining):this._scheduleCompletion(this._totalAnimationMs());return}this._phase==="complete"&&this._hasLoop()&&(this._loopRemaining>0?this._scheduleLoop(this._loopRemaining):this._scheduleLoop(this._loopDelayMs()))}_clearTimers(){this._playToken+=1,this._clearAnimations(),this._clearCompletionTimer(),this._clearLoopTimer(),this._rafA&&cancelAnimationFrame(this._rafA),this._rafB&&cancelAnimationFrame(this._rafB),this._rafA=0,this._rafB=0,this._completionRemaining=0,this._loopRemaining=0}_clearCompletionTimer(){this._completionTimer&&(clearTimeout(this._completionTimer),this._completionTimer=null)}_clearLoopTimer(){this._loopTimer&&(clearTimeout(this._loopTimer),this._loopTimer=null)}_setPhase(t){this._phase=t,this.setAttribute("data-phase",t),this._syncStateAttributes()}_syncStateAttributes(){const t=this.hasAttribute("paused")&&(this._phase==="running"||this._loopRemaining>0);this.setAttribute("data-state",t?"paused":this._phase)}_syncTrigger(){if(this._trigger()!=="visible"){this._disconnectIntersectionObserver(),this._inView=!0;return}if(typeof IntersectionObserver>"u"){this._inView=!0;return}this._disconnectIntersectionObserver(),this._intersectionObserver=new IntersectionObserver(t=>{const e=t[0];e&&(this._inView=e.isIntersecting&&e.intersectionRatio>=p(this.getAttribute("threshold")),this._inView&&this._autoStartIfNeeded())},{threshold:[0,p(this.getAttribute("threshold")),1]}),this._intersectionObserver.observe(this)}_disconnectIntersectionObserver(){this._intersectionObserver?.disconnect(),this._intersectionObserver=null}_autoStartIfNeeded(){if(!(!this.isConnected||this.hasAttribute("paused"))){if(this._prefersReducedMotion()){this._setPhase("complete");return}if(this._trigger()==="manual"){this._phase==="idle"&&this._setPhase("ready");return}if(this._trigger()==="visible"&&!this._inView){this._phase==="idle"&&this._setPhase("ready");return}this._hasTriggeredOnce||this.play()}}_pauseAnimations(){for(const t of this._animations)try{t.pause()}catch{}}_resumeAnimations(){for(const t of this._animations)try{t.play()}catch{}}_clearAnimations(){for(const t of this._animations)try{t.cancel()}catch{}this._animations=[]}_effectKeyframes(){const t=this.getAttribute("effect"),e=this._motionProfile(),i=e.distanceScale,n=12*e.blurScale,r=e.rotateScale;switch(t){case"fade-down":return[{opacity:0,transform:`translate3d(0, ${-18*i}px, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"slide-left":return[{opacity:0,transform:`translate3d(${28*i}px, 0, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"slide-right":return[{opacity:0,transform:`translate3d(${-28*i}px, 0, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"scale-in":return[{opacity:0,transform:`translate3d(0, ${10*i}px, 0) scale(${1-.06*i})`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none"}];case"blur-in":return[{opacity:0,transform:`translate3d(0, ${14*i}px, 0) scale(${1-.02*i})`,filter:`blur(${n}px)`},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"blur(0)"}];case"pop":return[{opacity:0,transform:`translate3d(0, ${8*i}px, 0) scale(${1-.12*i})`,filter:"none",offset:0},{opacity:1,transform:`translate3d(0, ${e.overshootY}px, 0) scale(${e.overshootScale})`,filter:"none",offset:.6},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none",offset:1}];case"flip-in":return[{opacity:0,transform:`perspective(900px) rotateX(${-18*r}deg) translate3d(0, ${14*i}px, 0)`,filter:"none"},{opacity:1,transform:"perspective(900px) rotateX(0deg) translate3d(0, 0, 0)",filter:"none"}];case"rotate-in":return[{opacity:0,transform:`translate3d(0, ${12*i}px, 0) rotate(${-10*r}deg) scale(${1-.03*i})`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0) rotate(0deg) scale(1)",filter:"none"}];case"tilt-in":return[{opacity:0,transform:`perspective(900px) rotateY(${-14*r}deg) translate3d(0, ${12*i}px, 0)`,filter:"none"},{opacity:1,transform:"perspective(900px) rotateY(0deg) translate3d(0, 0, 0)",filter:"none"}];case"float-up":return[{opacity:0,transform:`translate3d(0, ${26*i}px, 0) scale(${1-.015*i})`,filter:"none",offset:0},{opacity:1,transform:`translate3d(0, ${Math.min(e.overshootY,-1)}px, 0) scale(${Math.max(1.01,e.overshootScale-.005)})`,filter:"none",offset:.62},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none",offset:1}];case"swing-in":return[{opacity:0,transform:`translate3d(${-16*i}px, 0, 0) rotate(${-7*r}deg)`,filter:"none",offset:0},{opacity:1,transform:"translate3d(1px, 0, 0) rotate(1deg)",filter:"none",offset:.7},{opacity:1,transform:"translate3d(0, 0, 0) rotate(0deg)",filter:"none",offset:1}];default:return[{opacity:0,transform:`translate3d(0, ${18*i}px, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}]}}_startAnimations(){if(this._clearAnimations(),typeof this._items[0]?.animate!="function")return;const t=this._motionProfile(),e=s(this.getAttribute("duration"),s(o,520))*t.durationScale,i=s(this.getAttribute("stagger"),s(l,90)),n=s(this.getAttribute("delay"),s(d,0)),r=this._effectKeyframes();this._animations=this._items.map((c,b)=>{c.style.animation="none";const f=c.animate(r,{duration:e,delay:n+b*i,fill:"both",easing:t.easing});if(this.hasAttribute("paused"))try{f.pause()}catch{}return f})}}typeof customElements<"u"&&!customElements.get("ui-animated-list")&&customElements.define("ui-animated-list",g);exports.UIAnimatedList=g;

package/dist/animated-list.esm.js

@@ -1,5 +1,5 @@
-import { E as _ } from "./ElementBase-909688f3.mjs";
-const o = "520ms", l = "90ms", d = "0ms", x = 1400, p = 0.24, y = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), v = /* @__PURE__ */ new Set(["load", "visible", "manual"]), A = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "bouncy"]), S = `
+import { E as b } from "./ElementBase-YlTLMsGk.mjs";
+const o = "520ms", l = "90ms", d = "0ms", _ = 1400, h = 0.24, x = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), y = /* @__PURE__ */ new Set(["load", "visible", "manual"]), v = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "bouncy"]), A = `
   :host {
     --ui-animated-list-duration: ${o};
     --ui-animated-list-stagger: ${l};
@@ -662,34 +662,29 @@ const o = "520ms", l = "90ms", d = "0ms", x = 1400, p = 0.24, y = /* @__PURE__ *
     }
   }
 `;
-function n(s, t) {
-  if (s == null || s === "")
-    return t;
-  const e = s.trim();
+function s(a, t) {
+  if (a == null || a === "") return t;
+  const e = a.trim();
   return e ? /^-?\d+(\.\d+)?ms$/i.test(e) ? Math.max(0, Number.parseFloat(e)) : /^-?\d+(\.\d+)?s$/i.test(e) ? Math.max(0, Number.parseFloat(e) * 1e3) : /^-?\d+(\.\d+)?$/i.test(e) ? Math.max(0, Number.parseFloat(e)) : t : t;
 }
-function m(s, t) {
-  if (s == null || s === "")
-    return t;
-  const e = s.trim();
+function m(a, t) {
+  if (a == null || a === "") return t;
+  const e = a.trim();
   return e ? /^-?\d+(\.\d+)?(ms|s)$/i.test(e) ? e : /^-?\d+(\.\d+)?$/i.test(e) ? `${e}ms` : t : t;
 }
-function u(s) {
-  if (s == null || s === "")
-    return null;
-  const t = s.trim();
-  if (!t)
-    return null;
+function u(a) {
+  if (a == null || a === "") return null;
+  const t = a.trim();
+  if (!t) return null;
   const e = t.split(/\s+/).filter(Boolean);
   return e.length ? e.map((i) => /^-?\d+(\.\d+)?$/.test(i) ? `${i}px` : i).join(" ") : null;
 }
-function g(s) {
-  if (s == null || s === "")
-    return p;
-  const t = Number.parseFloat(s);
-  return Number.isFinite(t) ? Math.min(1, Math.max(0, t)) : p;
+function p(a) {
+  if (a == null || a === "") return h;
+  const t = Number.parseFloat(a);
+  return Number.isFinite(t) ? Math.min(1, Math.max(0, t)) : h;
 }
-class T extends _ {
+class S extends b {
   constructor() {
     super(...arguments), this._slotEl = null, this._items = [], this._phase = "idle", this._playToken = 0, this._hasTriggeredOnce = !1, this._inView = !1, this._completionTimer = null, this._completionStartedAt = 0, this._completionRemaining = 0, this._loopTimer = null, this._loopStartedAt = 0, this._loopRemaining = 0, this._rafA = 0, this._rafB = 0, this._intersectionObserver = null, this._mediaQuery = null, this._animations = [], this._boundSlotChange = this._handleSlotChange.bind(this), this._boundReducedMotionChange = this._handleReducedMotionChange.bind(this);
   }
@@ -718,8 +713,7 @@ class T extends _ {
     super.connectedCallback(), this._bindReducedMotionWatcher();
   }
   disconnectedCallback() {
-    var t, e, i, a;
-    this._clearTimers(), this._disconnectIntersectionObserver(), (e = (t = this._mediaQuery) == null ? void 0 : t.removeEventListener) == null || e.call(t, "change", this._boundReducedMotionChange), (a = (i = this._mediaQuery) == null ? void 0 : i.removeListener) == null || a.call(i, this._boundReducedMotionChange), this._mediaQuery = null, super.disconnectedCallback();
+    this._clearTimers(), this._disconnectIntersectionObserver(), this._mediaQuery?.removeEventListener?.("change", this._boundReducedMotionChange), this._mediaQuery?.removeListener?.(this._boundReducedMotionChange), this._mediaQuery = null, super.disconnectedCallback();
   }
   attributeChangedCallback(t, e, i) {
     if (!(e === i || !this.isConnected)) {
@@ -767,9 +761,8 @@ class T extends _ {
     this._syncItems(), this._syncRuntimeStyles(), this._syncTrigger(), this._phase === "complete" ? this._setPhase("complete") : this._phase === "running" && !this.hasAttribute("paused") && this._scheduleCompletion(this._totalAnimationMs()), this._autoStartIfNeeded();
   }
   render() {
-    var t;
     this.setContent(`
-      <style>${S}</style>
+      <style>${A}</style>
       <div class="root" part="root">
         <div class="surface" part="surface">
           <div class="list" part="list">
@@ -777,7 +770,7 @@ class T extends _ {
           </div>
         </div>
       </div>
-    `), this._slotEl = this.root.querySelector("slot"), (t = this._slotEl) == null || t.addEventListener("slotchange", this._boundSlotChange), this._syncRuntimeStyles(), this._syncItems(), this._syncTrigger(), this._autoStartIfNeeded();
+    `), this._slotEl = this.root.querySelector("slot"), this._slotEl?.addEventListener("slotchange", this._boundSlotChange), this._syncRuntimeStyles(), this._syncItems(), this._syncTrigger(), this._autoStartIfNeeded();
   }
   shouldRenderOnAttributeChange() {
     return !1;
@@ -793,12 +786,10 @@ class T extends _ {
     this._autoStartIfNeeded();
   }
   _bindReducedMotionWatcher() {
-    var t, e, i, a;
-    typeof window > "u" || typeof window.matchMedia != "function" || this._mediaQuery || (this._mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"), (e = (t = this._mediaQuery).addEventListener) == null || e.call(t, "change", this._boundReducedMotionChange), (a = (i = this._mediaQuery).addListener) == null || a.call(i, this._boundReducedMotionChange));
+    typeof window > "u" || typeof window.matchMedia != "function" || this._mediaQuery || (this._mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"), this._mediaQuery.addEventListener?.("change", this._boundReducedMotionChange), this._mediaQuery.addListener?.(this._boundReducedMotionChange));
   }
   _prefersReducedMotion() {
-    var t;
-    return !!((t = this._mediaQuery) != null && t.matches);
+    return !!this._mediaQuery?.matches;
   }
   _itemsFromSlot() {
     return this._slotEl ? this._slotEl.assignedElements({ flatten: !0 }).filter((t) => t instanceof HTMLElement) : [];
@@ -807,8 +798,8 @@ class T extends _ {
     const t = this._itemsFromSlot(), e = new Set(t);
     for (const i of this._items)
       e.has(i) || (i.style.removeProperty("--ui-animated-list-index"), i.removeAttribute("data-ui-animated-list-managed"), i.hasAttribute("data-ui-animated-list-owned") && (i.removeAttribute("data-ui-animated-list-item"), i.removeAttribute("data-ui-animated-list-owned")));
-    t.forEach((i, a) => {
-      i.setAttribute("data-ui-animated-list-managed", ""), i.hasAttribute("data-ui-animated-list-item") || (i.setAttribute("data-ui-animated-list-item", ""), i.setAttribute("data-ui-animated-list-owned", "")), i.style.setProperty("--ui-animated-list-index", String(a));
+    t.forEach((i, n) => {
+      i.setAttribute("data-ui-animated-list-managed", ""), i.hasAttribute("data-ui-animated-list-item") || (i.setAttribute("data-ui-animated-list-item", ""), i.setAttribute("data-ui-animated-list-owned", "")), i.style.setProperty("--ui-animated-list-index", String(n));
     }), this._items = t, this._items.length || this._setPhase("complete");
   }
   _syncRuntimeStyles() {
@@ -818,23 +809,23 @@ class T extends _ {
     const e = u(this.getAttribute("gap"));
     e ? this.style.setProperty("--ui-animated-list-gap", e) : this.style.removeProperty("--ui-animated-list-gap");
     const i = this.getAttribute("radius");
-    if (!i || y.has(i.trim())) {
+    if (!i || x.has(i.trim())) {
       this.style.removeProperty("--ui-animated-list-radius"), this.style.removeProperty("--ui-animated-list-item-radius");
       return;
     }
-    const a = u(i);
-    a ? (this.style.setProperty("--ui-animated-list-radius", a), this.style.setProperty("--ui-animated-list-item-radius", a)) : (this.style.removeProperty("--ui-animated-list-radius"), this.style.removeProperty("--ui-animated-list-item-radius"));
+    const n = u(i);
+    n ? (this.style.setProperty("--ui-animated-list-radius", n), this.style.setProperty("--ui-animated-list-item-radius", n)) : (this.style.removeProperty("--ui-animated-list-radius"), this.style.removeProperty("--ui-animated-list-item-radius"));
   }
   _trigger() {
     const t = this.getAttribute("trigger");
-    return t && v.has(t) ? t : "load";
+    return t && y.has(t) ? t : "load";
   }
   _hasLoop() {
     return this.hasAttribute("loop");
   }
   _animationPreset() {
     const t = this.getAttribute("animation");
-    return t && A.has(t) ? t : "smooth";
+    return t && v.has(t) ? t : "smooth";
   }
   _motionProfile() {
     switch (this._animationPreset()) {
@@ -868,7 +859,6 @@ class T extends _ {
           overshootScale: 1.05,
           easing: "cubic-bezier(0.2, 1.18, 0.28, 1)"
         };
-      case "smooth":
       default:
         return {
           durationScale: 1,
@@ -882,11 +872,11 @@ class T extends _ {
     }
   }
   _loopDelayMs() {
-    return n(this.getAttribute("loop-delay"), x);
+    return s(this.getAttribute("loop-delay"), _);
   }
   _totalAnimationMs() {
-    const t = Math.max(this._items.length, 1), e = n(this.getAttribute("duration"), n(o, 520)) * this._motionProfile().durationScale, i = n(this.getAttribute("stagger"), n(l, 90)), a = n(this.getAttribute("delay"), n(d, 0));
-    return Math.max(0, a + e + i * Math.max(0, t - 1));
+    const t = Math.max(this._items.length, 1), e = s(this.getAttribute("duration"), s(o, 520)) * this._motionProfile().durationScale, i = s(this.getAttribute("stagger"), s(l, 90)), n = s(this.getAttribute("delay"), s(d, 0));
+    return Math.max(0, n + e + i * Math.max(0, t - 1));
   }
   _scheduleCompletion(t) {
     if (this._clearCompletionTimer(), this.hasAttribute("paused")) {
@@ -966,14 +956,13 @@ class T extends _ {
     this._disconnectIntersectionObserver(), this._intersectionObserver = new IntersectionObserver(
       (t) => {
         const e = t[0];
-        e && (this._inView = e.isIntersecting && e.intersectionRatio >= g(this.getAttribute("threshold")), this._inView && this._autoStartIfNeeded());
+        e && (this._inView = e.isIntersecting && e.intersectionRatio >= p(this.getAttribute("threshold")), this._inView && this._autoStartIfNeeded());
       },
-      { threshold: [0, g(this.getAttribute("threshold")), 1] }
+      { threshold: [0, p(this.getAttribute("threshold")), 1] }
     ), this._intersectionObserver.observe(this);
   }
   _disconnectIntersectionObserver() {
-    var t;
-    (t = this._intersectionObserver) == null || t.disconnect(), this._intersectionObserver = null;
+    this._intersectionObserver?.disconnect(), this._intersectionObserver = null;
   }
   _autoStartIfNeeded() {
     if (!(!this.isConnected || this.hasAttribute("paused"))) {
@@ -1015,7 +1004,7 @@ class T extends _ {
     this._animations = [];
   }
   _effectKeyframes() {
-    const t = this.getAttribute("effect"), e = this._motionProfile(), i = e.distanceScale, a = 12 * e.blurScale, r = e.rotateScale;
+    const t = this.getAttribute("effect"), e = this._motionProfile(), i = e.distanceScale, n = 12 * e.blurScale, r = e.rotateScale;
     switch (t) {
       case "fade-down":
         return [
@@ -1042,7 +1031,7 @@ class T extends _ {
           {
             opacity: 0,
             transform: `translate3d(0, ${14 * i}px, 0) scale(${1 - 0.02 * i})`,
-            filter: `blur(${a}px)`
+            filter: `blur(${n}px)`
           },
           { opacity: 1, transform: "translate3d(0, 0, 0) scale(1)", filter: "blur(0)" }
         ];
@@ -1101,7 +1090,6 @@ class T extends _ {
           { opacity: 1, transform: "translate3d(1px, 0, 0) rotate(1deg)", filter: "none", offset: 0.7 },
           { opacity: 1, transform: "translate3d(0, 0, 0) rotate(0deg)", filter: "none", offset: 1 }
         ];
-      case "fade-up":
       default:
         return [
           { opacity: 0, transform: `translate3d(0, ${18 * i}px, 0)`, filter: "none" },
@@ -1110,28 +1098,26 @@ class T extends _ {
     }
   }
   _startAnimations() {
-    var c;
-    if (this._clearAnimations(), typeof ((c = this._items[0]) == null ? void 0 : c.animate) != "function")
-      return;
-    const t = this._motionProfile(), e = n(this.getAttribute("duration"), n(o, 520)) * t.durationScale, i = n(this.getAttribute("stagger"), n(l, 90)), a = n(this.getAttribute("delay"), n(d, 0)), r = this._effectKeyframes();
-    this._animations = this._items.map((f, b) => {
-      f.style.animation = "none";
-      const h = f.animate(r, {
+    if (this._clearAnimations(), typeof this._items[0]?.animate != "function") return;
+    const t = this._motionProfile(), e = s(this.getAttribute("duration"), s(o, 520)) * t.durationScale, i = s(this.getAttribute("stagger"), s(l, 90)), n = s(this.getAttribute("delay"), s(d, 0)), r = this._effectKeyframes();
+    this._animations = this._items.map((c, g) => {
+      c.style.animation = "none";
+      const f = c.animate(r, {
         duration: e,
-        delay: a + b * i,
+        delay: n + g * i,
         fill: "both",
         easing: t.easing
       });
       if (this.hasAttribute("paused"))
         try {
-          h.pause();
+          f.pause();
         } catch {
         }
-      return h;
+      return f;
     });
   }
 }
-typeof customElements < "u" && !customElements.get("ui-animated-list") && customElements.define("ui-animated-list", T);
+typeof customElements < "u" && !customElements.get("ui-animated-list") && customElements.define("ui-animated-list", S);
 export {
-  T as UIAnimatedList
+  S as UIAnimatedList
 };

package/dist/animated-text.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-1b301e7f.js"),T="720ms",A="55ms",M="0ms",x=1400,S=new Set(["fade-up","fade-down","slide-left","slide-right","blur","blur-up","pop","wave","zoom-in","rotate-in","flip-up","skew-in","glow","typewriter"]),z=new Set(["chars","words","lines"]),C=new Set(["load","visible","manual"]),R=new Set(["none","sm","md","lg","full"]),L=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-EV6mVBUV.js"),T="720ms",A="55ms",M="0ms",x=1400,S=new Set(["fade-up","fade-down","slide-left","slide-right","blur","blur-up","pop","wave","zoom-in","rotate-in","flip-up","skew-in","glow","typewriter"]),z=new Set(["chars","words","lines"]),C=new Set(["load","visible","manual"]),R=new Set(["none","sm","md","lg","full"]),L=`
   :host {
     --ui-animated-text-duration: ${T};
     --ui-animated-text-stagger: ${A};
@@ -651,7 +651,7 @@
       background: CanvasText;
     }
   }
-`;function p(a){return a.split("&").join("&amp;").split("<").join("&lt;").split(">").join("&gt;").split('"').join("&quot;").split("'").join("&#39;")}function I(a){return/^\s+$/.test(a)}function h(a){if(!a)return null;const t=a.trim();return t?/^-?\d+(\.\d+)?$/.test(t)?`${t}ms`:/^-?\d+(\.\d+)?m?s$/.test(t)?t:null:null}function g(a){if(!a)return null;const t=a.trim();if(!t)return null;const e=t.split(/\s+/).filter(Boolean);return e.length?e.map(i=>/^-?\d+(\.\d+)?$/.test(i)?`${i}px`:i).join(" "):null}function f(a,t){const e=h(a);if(!e)return t;if(e.endsWith("ms")){const i=Number.parseFloat(e.slice(0,-2));return Number.isFinite(i)&&i>=0?i:t}if(e.endsWith("s")){const i=Number.parseFloat(e.slice(0,-1));return Number.isFinite(i)&&i>=0?i*1e3:t}return t}function P(a){const t=globalThis.Intl.Segmenter;if(typeof t=="function"){const e=new t(void 0,{granularity:"grapheme"});return Array.from(e.segment(a),i=>i.segment)}return Array.from(a)}function E(a){const t=globalThis.Intl.Segmenter;if(typeof t=="function"){const e=new t(void 0,{granularity:"word"});return Array.from(e.segment(a),i=>i.segment).filter(Boolean)}return a.split(/(\s+)/).filter(Boolean)}function b(a,t){return a?t==="lines"?a.split(/\r\n|\r|\n/).map(i=>({text:i||" ",animated:!!i.trim(),line:!0})):(t==="chars"?P(a):E(a)).map(i=>({text:i,animated:!I(i),line:!1})):[]}function $(a,t){const e=(t||"").trim();if(e)return{mode:"custom",value:e};const i=(a||"").trim();return i?S.has(i)?{mode:"builtin",value:i}:{mode:"custom",value:i}:{mode:"builtin",value:"fade-up"}}function O(a,t){if(t==="typewriter")return"chars";const e=(a||"").trim();return z.has(e)?e:"words"}function Q(a){const t=(a||"").trim();return C.has(t)?t:"load"}class v extends k.ElementBase{constructor(){super(),this._sourceObserver=null,this._intersectionObserver=null,this._mediaQuery=null,this._loopTimer=null,this._visible=!1,this._hasStarted=!1,this._runId=0,this._handleSourceMutation=this._handleSourceMutation.bind(this),this._handleIntersection=this._handleIntersection.bind(this),this._handleReducedMotionChange=this._handleReducedMotionChange.bind(this)}static get observedAttributes(){return["text","effect","split","trigger","duration","stagger","delay","loop-delay","paused","loop","custom-effect","effect-timing","effect-direction","effect-iteration-count","effect-fill-mode","variant","tone","size","radius","padding","elevation","align"]}connectedCallback(){super.connectedCallback(),this.setAttribute("role","text"),this._sourceObserver=new MutationObserver(this._handleSourceMutation),this._sourceObserver.observe(this,{childList:!0,subtree:!0,characterData:!0}),this._setupReducedMotionQuery(),this._updateVisibilityObservation(),this._syncHostStyles(),queueMicrotask(()=>{this._triggerMode()==="load"&&this._resolvedText().trim()?this._startIfNeeded():this._updateRuntimeState(),this._syncLoopTimer()})}disconnectedCallback(){var t,e;(t=this._sourceObserver)==null||t.disconnect(),this._sourceObserver=null,(e=this._intersectionObserver)==null||e.disconnect(),this._intersectionObserver=null,this._detachReducedMotionQuery(),this._clearLoopTimer(),super.disconnectedCallback()}get text(){return this.getAttribute("text")??this._sourceText()}set text(t){t?this.setAttribute("text",t):this.removeAttribute("text")}pause(){this.hasAttribute("paused")?(this._syncLoopTimer(),this._updateRuntimeState()):this.setAttribute("paused","")}play(){this.hasAttribute("paused")&&this.removeAttribute("paused"),this._startIfNeeded(),this._syncLoopTimer(),this._updateRuntimeState()}replay(){this._resolvedText().trim()&&(this._hasStarted=!0,this._runId+=1,this.invalidateContentCache(),this.requestRender(),this._syncLoopTimer(),this._updateRuntimeState())}refresh(){this.invalidateContentCache(),this.requestRender(),this._syncLoopTimer(),this._updateRuntimeState()}attributeChangedCallback(t,e,i){e!==i&&(t==="trigger"&&(this._updateVisibilityObservation(),this._triggerMode()==="load"&&this._resolvedText().trim()&&this._startIfNeeded()),t==="text"&&this._handleTextChange(),super.attributeChangedCallback(t,e,i),this._syncHostStyles(),this._syncLoopTimer(),this._updateRuntimeState())}_sourceText(){return this.textContent||""}_resolvedText(){return this.getAttribute("text")??this._sourceText()}_resolvedEffect(){return $(this.getAttribute("effect"),this.getAttribute("custom-effect"))}_effect(){const t=this._resolvedEffect();return t.mode==="builtin"?t.value:"fade-up"}_splitMode(){return O(this.getAttribute("split"),this._effect())}_triggerMode(){return Q(this.getAttribute("trigger"))}_durationMs(){return f(this.getAttribute("duration"),720)}_staggerMs(){return f(this.getAttribute("stagger"),55)}_delayMs(){return f(this.getAttribute("delay"),0)}_loopDelayMs(){const t=this.getAttribute("loop-delay");if(!t)return x;const e=f(t,x);return Math.max(0,e)}_shouldLoop(){return this.hasAttribute("loop")}_hiddenUntilStarted(){if(this._hasStarted)return!1;const t=this._triggerMode();return t==="manual"?!0:t==="visible"&&!this._visible}_shouldAnimate(){return this._hasStarted&&!this._isMotionReduced()&&!!this._resolvedText().trim()}_isMotionReduced(){var t;return!!((t=this._mediaQuery)!=null&&t.matches)}_isMotionPaused(){return this._hasStarted?!!(this.hasAttribute("paused")||this._isMotionReduced()||this._triggerMode()==="visible"&&!this._visible):!1}_currentAlignValue(){const t=(this.getAttribute("align")||"").trim().toLowerCase();return t==="center"?"center":t==="right"||t==="end"?"end":"start"}_countAnimatedSegments(t,e){return b(t,e).filter(i=>i.animated).length}_cycleDurationMs(t){const e=this._countAnimatedSegments(t,this._splitMode());return e<=0?this._durationMs()+this._delayMs():this._delayMs()+this._durationMs()+this._staggerMs()*Math.max(0,e-1)}_syncHostStyles(){const t=h(this.getAttribute("duration")),e=h(this.getAttribute("stagger")),i=h(this.getAttribute("delay")),n=this.getAttribute("radius"),o=g(this.getAttribute("padding")),d=(this.getAttribute("effect-timing")||"").trim(),u=(this.getAttribute("effect-direction")||"").trim(),m=(this.getAttribute("effect-iteration-count")||"").trim(),l=(this.getAttribute("effect-fill-mode")||"").trim(),s=this._resolvedEffect();if(t?this.style.setProperty("--ui-animated-text-duration",t):this.style.removeProperty("--ui-animated-text-duration"),e?this.style.setProperty("--ui-animated-text-stagger",e):this.style.removeProperty("--ui-animated-text-stagger"),i?this.style.setProperty("--ui-animated-text-delay",i):this.style.removeProperty("--ui-animated-text-delay"),n&&!R.has(n)){const c=g(n);c?this.style.setProperty("--ui-animated-text-radius",c):this.style.removeProperty("--ui-animated-text-radius")}else this.style.removeProperty("--ui-animated-text-radius");o?this.style.setProperty("--ui-animated-text-padding",o):this.style.removeProperty("--ui-animated-text-padding"),s.mode==="custom"&&s.value?this.style.setProperty("--ui-animated-text-custom-animation-name",s.value):this.style.removeProperty("--ui-animated-text-custom-animation-name"),d?this.style.setProperty("--ui-animated-text-animation-timing",d):this.style.removeProperty("--ui-animated-text-animation-timing"),u?this.style.setProperty("--ui-animated-text-animation-direction",u):this.style.removeProperty("--ui-animated-text-animation-direction"),m?this.style.setProperty("--ui-animated-text-animation-iteration-count",m):this.style.removeProperty("--ui-animated-text-animation-iteration-count"),l?this.style.setProperty("--ui-animated-text-animation-fill-mode",l):this.style.removeProperty("--ui-animated-text-animation-fill-mode")}_setupReducedMotionQuery(){if(!(typeof window>"u"||typeof window.matchMedia!="function")){if(this._mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),typeof this._mediaQuery.addEventListener=="function"){this._mediaQuery.addEventListener("change",this._handleReducedMotionChange);return}this._mediaQuery.addListener(this._handleReducedMotionChange)}}_detachReducedMotionQuery(){this._mediaQuery&&(typeof this._mediaQuery.removeEventListener=="function"?this._mediaQuery.removeEventListener("change",this._handleReducedMotionChange):this._mediaQuery.removeListener(this._handleReducedMotionChange),this._mediaQuery=null)}_handleReducedMotionChange(){this.invalidateContentCache(),this.requestRender(),this._syncLoopTimer(),this._updateRuntimeState()}_updateVisibilityObservation(){var t;if((t=this._intersectionObserver)==null||t.disconnect(),this._intersectionObserver=null,this._triggerMode()!=="visible"){this._visible=!0;return}if(typeof IntersectionObserver>"u"){this._visible=!0;return}this._visible=!1,this._intersectionObserver=new IntersectionObserver(this._handleIntersection,{threshold:.2}),this._intersectionObserver.observe(this)}_handleIntersection(t){const e=t[t.length-1],i=!!(e!=null&&e.isIntersecting);this._visible!==i&&(this._visible=i,this._visible?this._startIfNeeded():(this._syncLoopTimer(),this._updateRuntimeState(),this.requestRender()))}_handleSourceMutation(){this.hasAttribute("text")||this._handleTextChange()}_handleTextChange(){if(!this._resolvedText().trim()){this._hasStarted=!1,this._clearLoopTimer(),this._updateRuntimeState(),this.requestRender();return}if(this._triggerMode()==="manual"&&!this._hasStarted){this.invalidateContentCache(),this.requestRender(),this._updateRuntimeState();return}if(this._triggerMode()==="visible"&&!this._visible&&!this._hasStarted){this.invalidateContentCache(),this.requestRender(),this._updateRuntimeState();return}this._hasStarted=!0,this._runId+=1,this.invalidateContentCache(),this.requestRender(),this._syncLoopTimer(),this._updateRuntimeState()}_startIfNeeded(){if(!this._resolvedText().trim()){this._updateRuntimeState();return}if(this._triggerMode()==="visible"&&!this._visible){this._updateRuntimeState();return}this._hasStarted||(this._hasStarted=!0,this._runId+=1,this.invalidateContentCache(),this.requestRender()),this._syncLoopTimer(),this._updateRuntimeState()}_clearLoopTimer(){this._loopTimer!=null&&(window.clearTimeout(this._loopTimer),this._loopTimer=null)}_syncLoopTimer(){this._clearLoopTimer();const t=this._resolvedText();if(!this._shouldLoop()||!this._shouldAnimate()||this._isMotionPaused()||!t.trim())return;const e=this._cycleDurationMs(t)+this._loopDelayMs();this._loopTimer=window.setTimeout(()=>{this._loopTimer=null,this.replay()},Math.max(0,e))}_updateRuntimeState(){if(!this._resolvedText().trim()){this.setAttribute("data-state","idle");return}if(!this._hasStarted){this.setAttribute("data-state","idle");return}if(this._isMotionPaused()){this.setAttribute("data-state","paused");return}this.setAttribute("data-state","running")}render(){const t=this._resolvedText(),e=this._resolvedEffect(),i=e.mode==="builtin"?e.value:"custom",n=this._splitMode(),o=this._shouldAnimate(),d=this._hiddenUntilStarted(),u=this._isMotionPaused(),m=this._currentAlignValue(),l=(this.getAttribute("variant")||"default").trim(),s=b(t,n);let c=0;const y=s.map(r=>{const _=r.animated?c++:0,w=r.text===" "?"&nbsp;":p(r.text);return`
+`;function p(a){return a.split("&").join("&amp;").split("<").join("&lt;").split(">").join("&gt;").split('"').join("&quot;").split("'").join("&#39;")}function I(a){return/^\s+$/.test(a)}function h(a){if(!a)return null;const t=a.trim();return t?/^-?\d+(\.\d+)?$/.test(t)?`${t}ms`:/^-?\d+(\.\d+)?m?s$/.test(t)?t:null:null}function g(a){if(!a)return null;const t=a.trim();if(!t)return null;const e=t.split(/\s+/).filter(Boolean);return e.length?e.map(i=>/^-?\d+(\.\d+)?$/.test(i)?`${i}px`:i).join(" "):null}function f(a,t){const e=h(a);if(!e)return t;if(e.endsWith("ms")){const i=Number.parseFloat(e.slice(0,-2));return Number.isFinite(i)&&i>=0?i:t}if(e.endsWith("s")){const i=Number.parseFloat(e.slice(0,-1));return Number.isFinite(i)&&i>=0?i*1e3:t}return t}function P(a){const t=globalThis.Intl.Segmenter;if(typeof t=="function"){const e=new t(void 0,{granularity:"grapheme"});return Array.from(e.segment(a),i=>i.segment)}return Array.from(a)}function E(a){const t=globalThis.Intl.Segmenter;if(typeof t=="function"){const e=new t(void 0,{granularity:"word"});return Array.from(e.segment(a),i=>i.segment).filter(Boolean)}return a.split(/(\s+)/).filter(Boolean)}function b(a,t){return a?t==="lines"?a.split(/\r\n|\r|\n/).map(i=>({text:i||" ",animated:!!i.trim(),line:!0})):(t==="chars"?P(a):E(a)).map(i=>({text:i,animated:!I(i),line:!1})):[]}function $(a,t){const e=(t||"").trim();if(e)return{mode:"custom",value:e};const i=(a||"").trim();return i?S.has(i)?{mode:"builtin",value:i}:{mode:"custom",value:i}:{mode:"builtin",value:"fade-up"}}function O(a,t){if(t==="typewriter")return"chars";const e=(a||"").trim();return z.has(e)?e:"words"}function Q(a){const t=(a||"").trim();return C.has(t)?t:"load"}class v extends k.ElementBase{constructor(){super(),this._sourceObserver=null,this._intersectionObserver=null,this._mediaQuery=null,this._loopTimer=null,this._visible=!1,this._hasStarted=!1,this._runId=0,this._handleSourceMutation=this._handleSourceMutation.bind(this),this._handleIntersection=this._handleIntersection.bind(this),this._handleReducedMotionChange=this._handleReducedMotionChange.bind(this)}static get observedAttributes(){return["text","effect","split","trigger","duration","stagger","delay","loop-delay","paused","loop","custom-effect","effect-timing","effect-direction","effect-iteration-count","effect-fill-mode","variant","tone","size","radius","padding","elevation","align"]}connectedCallback(){super.connectedCallback(),this.setAttribute("role","text"),this._sourceObserver=new MutationObserver(this._handleSourceMutation),this._sourceObserver.observe(this,{childList:!0,subtree:!0,characterData:!0}),this._setupReducedMotionQuery(),this._updateVisibilityObservation(),this._syncHostStyles(),queueMicrotask(()=>{this._triggerMode()==="load"&&this._resolvedText().trim()?this._startIfNeeded():this._updateRuntimeState(),this._syncLoopTimer()})}disconnectedCallback(){this._sourceObserver?.disconnect(),this._sourceObserver=null,this._intersectionObserver?.disconnect(),this._intersectionObserver=null,this._detachReducedMotionQuery(),this._clearLoopTimer(),super.disconnectedCallback()}get text(){return this.getAttribute("text")??this._sourceText()}set text(t){t?this.setAttribute("text",t):this.removeAttribute("text")}pause(){this.hasAttribute("paused")?(this._syncLoopTimer(),this._updateRuntimeState()):this.setAttribute("paused","")}play(){this.hasAttribute("paused")&&this.removeAttribute("paused"),this._startIfNeeded(),this._syncLoopTimer(),this._updateRuntimeState()}replay(){this._resolvedText().trim()&&(this._hasStarted=!0,this._runId+=1,this.invalidateContentCache(),this.requestRender(),this._syncLoopTimer(),this._updateRuntimeState())}refresh(){this.invalidateContentCache(),this.requestRender(),this._syncLoopTimer(),this._updateRuntimeState()}attributeChangedCallback(t,e,i){e!==i&&(t==="trigger"&&(this._updateVisibilityObservation(),this._triggerMode()==="load"&&this._resolvedText().trim()&&this._startIfNeeded()),t==="text"&&this._handleTextChange(),super.attributeChangedCallback(t,e,i),this._syncHostStyles(),this._syncLoopTimer(),this._updateRuntimeState())}_sourceText(){return this.textContent||""}_resolvedText(){return this.getAttribute("text")??this._sourceText()}_resolvedEffect(){return $(this.getAttribute("effect"),this.getAttribute("custom-effect"))}_effect(){const t=this._resolvedEffect();return t.mode==="builtin"?t.value:"fade-up"}_splitMode(){return O(this.getAttribute("split"),this._effect())}_triggerMode(){return Q(this.getAttribute("trigger"))}_durationMs(){return f(this.getAttribute("duration"),720)}_staggerMs(){return f(this.getAttribute("stagger"),55)}_delayMs(){return f(this.getAttribute("delay"),0)}_loopDelayMs(){const t=this.getAttribute("loop-delay");if(!t)return x;const e=f(t,x);return Math.max(0,e)}_shouldLoop(){return this.hasAttribute("loop")}_hiddenUntilStarted(){if(this._hasStarted)return!1;const t=this._triggerMode();return t==="manual"?!0:t==="visible"&&!this._visible}_shouldAnimate(){return this._hasStarted&&!this._isMotionReduced()&&!!this._resolvedText().trim()}_isMotionReduced(){return!!this._mediaQuery?.matches}_isMotionPaused(){return this._hasStarted?!!(this.hasAttribute("paused")||this._isMotionReduced()||this._triggerMode()==="visible"&&!this._visible):!1}_currentAlignValue(){const t=(this.getAttribute("align")||"").trim().toLowerCase();return t==="center"?"center":t==="right"||t==="end"?"end":"start"}_countAnimatedSegments(t,e){return b(t,e).filter(i=>i.animated).length}_cycleDurationMs(t){const e=this._countAnimatedSegments(t,this._splitMode());return e<=0?this._durationMs()+this._delayMs():this._delayMs()+this._durationMs()+this._staggerMs()*Math.max(0,e-1)}_syncHostStyles(){const t=h(this.getAttribute("duration")),e=h(this.getAttribute("stagger")),i=h(this.getAttribute("delay")),n=this.getAttribute("radius"),o=g(this.getAttribute("padding")),d=(this.getAttribute("effect-timing")||"").trim(),u=(this.getAttribute("effect-direction")||"").trim(),m=(this.getAttribute("effect-iteration-count")||"").trim(),l=(this.getAttribute("effect-fill-mode")||"").trim(),s=this._resolvedEffect();if(t?this.style.setProperty("--ui-animated-text-duration",t):this.style.removeProperty("--ui-animated-text-duration"),e?this.style.setProperty("--ui-animated-text-stagger",e):this.style.removeProperty("--ui-animated-text-stagger"),i?this.style.setProperty("--ui-animated-text-delay",i):this.style.removeProperty("--ui-animated-text-delay"),n&&!R.has(n)){const c=g(n);c?this.style.setProperty("--ui-animated-text-radius",c):this.style.removeProperty("--ui-animated-text-radius")}else this.style.removeProperty("--ui-animated-text-radius");o?this.style.setProperty("--ui-animated-text-padding",o):this.style.removeProperty("--ui-animated-text-padding"),s.mode==="custom"&&s.value?this.style.setProperty("--ui-animated-text-custom-animation-name",s.value):this.style.removeProperty("--ui-animated-text-custom-animation-name"),d?this.style.setProperty("--ui-animated-text-animation-timing",d):this.style.removeProperty("--ui-animated-text-animation-timing"),u?this.style.setProperty("--ui-animated-text-animation-direction",u):this.style.removeProperty("--ui-animated-text-animation-direction"),m?this.style.setProperty("--ui-animated-text-animation-iteration-count",m):this.style.removeProperty("--ui-animated-text-animation-iteration-count"),l?this.style.setProperty("--ui-animated-text-animation-fill-mode",l):this.style.removeProperty("--ui-animated-text-animation-fill-mode")}_setupReducedMotionQuery(){if(!(typeof window>"u"||typeof window.matchMedia!="function")){if(this._mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),typeof this._mediaQuery.addEventListener=="function"){this._mediaQuery.addEventListener("change",this._handleReducedMotionChange);return}this._mediaQuery.addListener(this._handleReducedMotionChange)}}_detachReducedMotionQuery(){this._mediaQuery&&(typeof this._mediaQuery.removeEventListener=="function"?this._mediaQuery.removeEventListener("change",this._handleReducedMotionChange):this._mediaQuery.removeListener(this._handleReducedMotionChange),this._mediaQuery=null)}_handleReducedMotionChange(){this.invalidateContentCache(),this.requestRender(),this._syncLoopTimer(),this._updateRuntimeState()}_updateVisibilityObservation(){if(this._intersectionObserver?.disconnect(),this._intersectionObserver=null,this._triggerMode()!=="visible"){this._visible=!0;return}if(typeof IntersectionObserver>"u"){this._visible=!0;return}this._visible=!1,this._intersectionObserver=new IntersectionObserver(this._handleIntersection,{threshold:.2}),this._intersectionObserver.observe(this)}_handleIntersection(t){const i=!!t[t.length-1]?.isIntersecting;this._visible!==i&&(this._visible=i,this._visible?this._startIfNeeded():(this._syncLoopTimer(),this._updateRuntimeState(),this.requestRender()))}_handleSourceMutation(){this.hasAttribute("text")||this._handleTextChange()}_handleTextChange(){if(!this._resolvedText().trim()){this._hasStarted=!1,this._clearLoopTimer(),this._updateRuntimeState(),this.requestRender();return}if(this._triggerMode()==="manual"&&!this._hasStarted){this.invalidateContentCache(),this.requestRender(),this._updateRuntimeState();return}if(this._triggerMode()==="visible"&&!this._visible&&!this._hasStarted){this.invalidateContentCache(),this.requestRender(),this._updateRuntimeState();return}this._hasStarted=!0,this._runId+=1,this.invalidateContentCache(),this.requestRender(),this._syncLoopTimer(),this._updateRuntimeState()}_startIfNeeded(){if(!this._resolvedText().trim()){this._updateRuntimeState();return}if(this._triggerMode()==="visible"&&!this._visible){this._updateRuntimeState();return}this._hasStarted||(this._hasStarted=!0,this._runId+=1,this.invalidateContentCache(),this.requestRender()),this._syncLoopTimer(),this._updateRuntimeState()}_clearLoopTimer(){this._loopTimer!=null&&(window.clearTimeout(this._loopTimer),this._loopTimer=null)}_syncLoopTimer(){this._clearLoopTimer();const t=this._resolvedText();if(!this._shouldLoop()||!this._shouldAnimate()||this._isMotionPaused()||!t.trim())return;const e=this._cycleDurationMs(t)+this._loopDelayMs();this._loopTimer=window.setTimeout(()=>{this._loopTimer=null,this.replay()},Math.max(0,e))}_updateRuntimeState(){if(!this._resolvedText().trim()){this.setAttribute("data-state","idle");return}if(!this._hasStarted){this.setAttribute("data-state","idle");return}if(this._isMotionPaused()){this.setAttribute("data-state","paused");return}this.setAttribute("data-state","running")}render(){const t=this._resolvedText(),e=this._resolvedEffect(),i=e.mode==="builtin"?e.value:"custom",n=this._splitMode(),o=this._shouldAnimate(),d=this._hiddenUntilStarted(),u=this._isMotionPaused(),m=this._currentAlignValue(),l=(this.getAttribute("variant")||"default").trim(),s=b(t,n);let c=0;const y=s.map(r=>{const _=r.animated?c++:0,w=r.text===" "?"&nbsp;":p(r.text);return`
           <span
             class="segment"
             part="segment"

package/dist/animated-text.esm.js

@@ -1,4 +1,4 @@
-import { E as w } from "./ElementBase-909688f3.mjs";
+import { E as w } from "./ElementBase-YlTLMsGk.mjs";
 const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set([
   "fade-up",
   "fade-down",
@@ -675,24 +675,20 @@ function L(a) {
   return /^\s+$/.test(a);
 }
 function h(a) {
-  if (!a)
-    return null;
+  if (!a) return null;
   const t = a.trim();
   return t ? /^-?\d+(\.\d+)?$/.test(t) ? `${t}ms` : /^-?\d+(\.\d+)?m?s$/.test(t) ? t : null : null;
 }
 function g(a) {
-  if (!a)
-    return null;
+  if (!a) return null;
   const t = a.trim();
-  if (!t)
-    return null;
+  if (!t) return null;
   const e = t.split(/\s+/).filter(Boolean);
   return e.length ? e.map((i) => /^-?\d+(\.\d+)?$/.test(i) ? `${i}px` : i).join(" ") : null;
 }
 function f(a, t) {
   const e = h(a);
-  if (!e)
-    return t;
+  if (!e) return t;
   if (e.endsWith("ms")) {
     const i = Number.parseFloat(e.slice(0, -2));
     return Number.isFinite(i) && i >= 0 ? i : t;
@@ -732,14 +728,12 @@ function b(a, t) {
 }
 function E(a, t) {
   const e = (t || "").trim();
-  if (e)
-    return { mode: "custom", value: e };
+  if (e) return { mode: "custom", value: e };
   const i = (a || "").trim();
   return i ? M.has(i) ? { mode: "builtin", value: i } : { mode: "custom", value: i } : { mode: "builtin", value: "fade-up" };
 }
 function $(a, t) {
-  if (t === "typewriter")
-    return "chars";
+  if (t === "typewriter") return "chars";
   const e = (a || "").trim();
   return S.has(e) ? e : "words";
 }
@@ -787,8 +781,7 @@ class Q extends w {
     });
   }
   disconnectedCallback() {
-    var t, e;
-    (t = this._sourceObserver) == null || t.disconnect(), this._sourceObserver = null, (e = this._intersectionObserver) == null || e.disconnect(), this._intersectionObserver = null, this._detachReducedMotionQuery(), this._clearLoopTimer(), super.disconnectedCallback();
+    this._sourceObserver?.disconnect(), this._sourceObserver = null, this._intersectionObserver?.disconnect(), this._intersectionObserver = null, this._detachReducedMotionQuery(), this._clearLoopTimer(), super.disconnectedCallback();
   }
   get text() {
     return this.getAttribute("text") ?? this._sourceText();
@@ -841,8 +834,7 @@ class Q extends w {
   }
   _loopDelayMs() {
     const t = this.getAttribute("loop-delay");
-    if (!t)
-      return x;
+    if (!t) return x;
     const e = f(t, x);
     return Math.max(0, e);
   }
@@ -850,8 +842,7 @@ class Q extends w {
     return this.hasAttribute("loop");
   }
   _hiddenUntilStarted() {
-    if (this._hasStarted)
-      return !1;
+    if (this._hasStarted) return !1;
     const t = this._triggerMode();
     return t === "manual" ? !0 : t === "visible" && !this._visible;
   }
@@ -859,8 +850,7 @@ class Q extends w {
     return this._hasStarted && !this._isMotionReduced() && !!this._resolvedText().trim();
   }
   _isMotionReduced() {
-    var t;
-    return !!((t = this._mediaQuery) != null && t.matches);
+    return !!this._mediaQuery?.matches;
   }
   _isMotionPaused() {
     return this._hasStarted ? !!(this.hasAttribute("paused") || this._isMotionReduced() || this._triggerMode() === "visible" && !this._visible) : !1;
@@ -901,8 +891,7 @@ class Q extends w {
     this.invalidateContentCache(), this.requestRender(), this._syncLoopTimer(), this._updateRuntimeState();
   }
   _updateVisibilityObservation() {
-    var t;
-    if ((t = this._intersectionObserver) == null || t.disconnect(), this._intersectionObserver = null, this._triggerMode() !== "visible") {
+    if (this._intersectionObserver?.disconnect(), this._intersectionObserver = null, this._triggerMode() !== "visible") {
       this._visible = !0;
       return;
     }
@@ -915,7 +904,7 @@ class Q extends w {
     }), this._intersectionObserver.observe(this);
   }
   _handleIntersection(t) {
-    const e = t[t.length - 1], i = !!(e != null && e.isIntersecting);
+    const i = !!t[t.length - 1]?.isIntersecting;
     this._visible !== i && (this._visible = i, this._visible ? this._startIfNeeded() : (this._syncLoopTimer(), this._updateRuntimeState(), this.requestRender()));
   }
   _handleSourceMutation() {

package/dist/app-header.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./ElementBase-1b301e7f.js"),p=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./ElementBase-EV6mVBUV.js"),p=`
   :host {
     display: block;
     --ui-app-header-height: var(--base-app-header-height, 64px);
@@ -332,7 +332,7 @@
       --ui-app-header-muted: CanvasText;
     }
   }
-`;class i extends t.ElementBase{static get observedAttributes(){return["sticky","bordered","dense","headless","show-menu-button","variant","tone","size","radius","elevation"]}constructor(){super(),this._onRootClick=this._onRootClick.bind(this)}_normalizeRadius(a){if(a==null)return"var(--base-app-header-radius, var(--ui-radius, 4px))";const e=a.trim().toLowerCase();return e?e==="full"||e==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(e)?`${e}px`:a:"var(--base-app-header-radius, var(--ui-radius, 4px))"}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(this.getAttribute("radius")))}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),super.disconnectedCallback()}_onRootClick(a){const e=a.target;e!=null&&e.closest(".menu-btn")&&this.dispatchEvent(new CustomEvent("menu-trigger",{bubbles:!0}))}attributeChangedCallback(a,e,r){e!==r&&(a==="radius"&&this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(r)),super.attributeChangedCallback(a,e,r))}render(){this.setContent(`
+`;class i extends t.ElementBase{static get observedAttributes(){return["sticky","bordered","dense","headless","show-menu-button","variant","tone","size","radius","elevation"]}constructor(){super(),this._onRootClick=this._onRootClick.bind(this)}_normalizeRadius(e){if(e==null)return"var(--base-app-header-radius, var(--ui-radius, 4px))";const a=e.trim().toLowerCase();return a?a==="full"||a==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(a)?`${a}px`:e:"var(--base-app-header-radius, var(--ui-radius, 4px))"}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(this.getAttribute("radius")))}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),super.disconnectedCallback()}_onRootClick(e){e.target?.closest(".menu-btn")&&this.dispatchEvent(new CustomEvent("menu-trigger",{bubbles:!0}))}attributeChangedCallback(e,a,r){a!==r&&(e==="radius"&&this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(r)),super.attributeChangedCallback(e,a,r))}render(){this.setContent(`
       <style>${p}</style>
       <header role="banner">
         <div class="start">
@@ -362,4 +362,4 @@
           <slot name="end"></slot>
         </div>
       </header>
-    `)}shouldRenderOnAttributeChange(a,e,r){return a==="show-menu-button"}}typeof customElements<"u"&&!customElements.get("ui-app-header")&&customElements.define("ui-app-header",i);exports.UIAppHeader=i;
+    `)}shouldRenderOnAttributeChange(e,a,r){return e==="show-menu-button"}}typeof customElements<"u"&&!customElements.get("ui-app-header")&&customElements.define("ui-app-header",i);exports.UIAppHeader=i;

package/dist/app-header.esm.js

@@ -1,4 +1,4 @@
-import { E as i } from "./ElementBase-909688f3.mjs";
+import { E as i } from "./ElementBase-YlTLMsGk.mjs";
 const t = `
   :host {
     display: block;
@@ -352,11 +352,10 @@ class p extends i {
   constructor() {
     super(), this._onRootClick = this._onRootClick.bind(this);
   }
-  _normalizeRadius(a) {
-    if (a == null)
-      return "var(--base-app-header-radius, var(--ui-radius, 4px))";
-    const e = a.trim().toLowerCase();
-    return e ? e === "full" || e === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(e) ? `${e}px` : a : "var(--base-app-header-radius, var(--ui-radius, 4px))";
+  _normalizeRadius(e) {
+    if (e == null) return "var(--base-app-header-radius, var(--ui-radius, 4px))";
+    const a = e.trim().toLowerCase();
+    return a ? a === "full" || a === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(a) ? `${a}px` : e : "var(--base-app-header-radius, var(--ui-radius, 4px))";
   }
   connectedCallback() {
     super.connectedCallback(), this.root.addEventListener("click", this._onRootClick), this.style.setProperty("--ui-app-header-radius", this._normalizeRadius(this.getAttribute("radius")));
@@ -364,16 +363,15 @@ class p extends i {
   disconnectedCallback() {
     this.root.removeEventListener("click", this._onRootClick), super.disconnectedCallback();
   }
-  _onRootClick(a) {
-    const e = a.target;
-    e != null && e.closest(".menu-btn") && this.dispatchEvent(
+  _onRootClick(e) {
+    e.target?.closest(".menu-btn") && this.dispatchEvent(
       new CustomEvent("menu-trigger", {
         bubbles: !0
       })
     );
   }
-  attributeChangedCallback(a, e, r) {
-    e !== r && (a === "radius" && this.style.setProperty("--ui-app-header-radius", this._normalizeRadius(r)), super.attributeChangedCallback(a, e, r));
+  attributeChangedCallback(e, a, r) {
+    a !== r && (e === "radius" && this.style.setProperty("--ui-app-header-radius", this._normalizeRadius(r)), super.attributeChangedCallback(e, a, r));
   }
   render() {
     this.setContent(`
@@ -408,8 +406,8 @@ class p extends i {
       </header>
     `);
   }
-  shouldRenderOnAttributeChange(a, e, r) {
-    return a === "show-menu-button";
+  shouldRenderOnAttributeChange(e, a, r) {
+    return e === "show-menu-button";
   }
 }
 typeof customElements < "u" && !customElements.get("ui-app-header") && customElements.define("ui-app-header", p);

package/dist/aspect-ratio.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./ElementBase-1b301e7f.js"),p=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./ElementBase-EV6mVBUV.js"),p=`
   :host {
     display: block;
     width: 100%;