coverflow-carousel 0.2.0-dev.0 → 0.2.0-dev.2

package/dist/element/CoverflowCarouselElement.d.ts

@@ -21,6 +21,10 @@ export declare class CoverflowCarouselElement extends HTMLElement {
     private pendingAnimToken;
     private animFallbackTimerId;
     private cleanup;
+    private readonly lightDomObserverOptions;
+    private lightDomObserver;
+    private refreshScheduled;
+    private suppressMutations;
     private reflectGuard;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -35,6 +39,8 @@ export declare class CoverflowCarouselElement extends HTMLElement {
     private readAttributes;
     private render;
     private bindEvents;
+    private setupLightDomObserver;
+    private scheduleRefreshFromMutations;
     private rebuildCardsFromLightDom;
     private getVisibleSet;
     private buildDots;

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=`:host {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=`:host {
   display: block;
   width: 100%;
   height: 100%;
@@ -164,4 +164,4 @@
   white-space: nowrap;
   border: 0;
 }
-`,A=b;function v(a){return"adoptedStyleSheets"in a}function S(a){try{const t=new CSSStyleSheet;return t.replaceSync(a),t}catch{return null}}const I=S(b),C=b;function x(a){return a.split(",").map(t=>t.trim()).filter(Boolean)}function g(a,t){const e=a.trim();if(!e)return t;if(e.endsWith("ms")){const n=Number(e.slice(0,-2).trim());return Number.isFinite(n)?n:t}if(e.endsWith("s")){const n=Number(e.slice(0,-1).trim());return Number.isFinite(n)?n*1e3:t}const i=Number(e);return Number.isFinite(i)?i:t}function _(a,t){const e=x(a.transitionProperty),i=x(a.transitionDuration),n=x(a.transitionDelay);if(!e.length)return 0;const r=(m=>{const d=e.indexOf(m);if(d>=0)return d;const E=e.indexOf("all");return E>=0?E:-1})(t);if(r<0)return 0;const c=i[Math.min(r,i.length-1)]??"0s",o=n[Math.min(r,n.length-1)]??"0s",l=g(c,0),y=g(o,0);return Math.max(0,l+y)}function k(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function u(a,t,e){if(!a.hasAttribute(t))return e;const i=a.getAttribute(t);return i==null||i===""?!0:i!=="false"}function L(a,t,e){const i=a.getAttribute(t);if(i==null)return e;const n=Number(i.trim());return Number.isFinite(n)?Math.trunc(n):e}function w(a,t){const e=a.getAttribute(t);if(e==null)return null;const i=e.trim();return i||null}function f(a,t){return t<=0?0:(a%t+t)%t}function T(a,t,e){const i=t-a,n=e/2;return i>n?i-e:i<-n?i+e:i}const p=1;let N=0;class h extends HTMLElement{static defaultStylesheet=I;static observedAttributes=["start-index","index","show-dots","show-arrows","announce-changes"];shadow=this.attachShadow({mode:"open"});instanceId=`cfc-${++N}`;rootEl;trackEl;dotsEl;prevBtn;nextBtn;liveRegion;styleEl=null;cards=[];dots=[];currentIndex=0;isAnimating=!1;hasAppliedInitialLayout=!1;lastLayoutIndex=null;lastVisibleSet=new Set;pendingAnimToken=0;animFallbackTimerId=null;cleanup=[];reflectGuard=!1;connectedCallback(){this.render(),this.readAttributes({isInit:!0}),this.refresh()}disconnectedCallback(){this.destroy()}attributeChangedCallback(t,e,i){if(!this.isConnected||this.reflectGuard)return;this.readAttributes({isInit:!1});const n=w(this,"index");if(n!=null){const s=f(Number(n),this.cards.length);if(Number.isFinite(s)&&s!==this.currentIndex){this.goTo(s);return}}this.applyLayoutAndA11y({announce:!0,emitChange:!1})}next(){this.goTo(this.currentIndex+1)}prev(){this.goTo(this.currentIndex-1)}goTo(t){if(this.isAnimating)return;const e=f(t,this.cards.length);e!==this.currentIndex&&(this.isAnimating=!0,this.currentIndex=e,this.reflectIndexAttr(),this.applyLayoutAndA11y({announce:!0,emitChange:!0}),this.lockUntilTransitionEnd())}refresh(){this.rebuildCardsFromLightDom();const t=L(this,"start-index",0),e=w(this,"index"),i=e!=null?Number(e):t,n=Number.isFinite(i)?i:0;this.currentIndex=f(n,this.cards.length),this.reflectIndexAttr(),this.buildDots(),this.hasAppliedInitialLayout=!1,this.lastLayoutIndex=null,this.lastVisibleSet=new Set,this.applyLayoutAndA11y({announce:!0,emitChange:!1}),this.dispatchReady()}destroy(){this.animFallbackTimerId!==null&&(window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=null),this.cleanup.forEach(t=>{t()}),this.cleanup=[],this.isAnimating=!1}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}readAttributes(t){this.rootEl||this.render();const e=u(this,"show-arrows",!1),i=u(this,"show-dots",!1);this.prevBtn.style.display=e?"":"none",this.nextBtn.style.display=e?"":"none",this.dotsEl.style.display=i?"":"none";const n=this.getAttribute("aria-label");n&&this.rootEl.setAttribute("aria-label",n),t.isInit&&this.setAttribute("aria-roledescription","carousel")}render(){this.applyStyles(null),this.rootEl=document.createElement("div"),this.rootEl.className="cfc",this.trackEl=document.createElement("div"),this.trackEl.className="cfc__track",this.prevBtn=document.createElement("button"),this.prevBtn.type="button",this.prevBtn.className="cfc__arrow cfc__arrow--left",this.prevBtn.setAttribute("aria-label","Previous"),this.prevBtn.textContent="‹",this.nextBtn=document.createElement("button"),this.nextBtn.type="button",this.nextBtn.className="cfc__arrow cfc__arrow--right",this.nextBtn.setAttribute("aria-label","Next"),this.nextBtn.textContent="›",this.dotsEl=document.createElement("div"),this.dotsEl.className="cfc__dots",this.liveRegion=document.createElement("div"),this.liveRegion.className="cfc__sr",this.liveRegion.setAttribute("aria-live","polite"),this.liveRegion.setAttribute("aria-atomic","true"),this.rootEl.append(this.trackEl,this.prevBtn,this.nextBtn,this.dotsEl,this.liveRegion),this.shadow.innerHTML="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.bindEvents()}bindEvents(){this.cleanup.forEach(s=>{s()}),this.cleanup=[];const t=()=>this.prev(),e=()=>this.next();this.prevBtn.addEventListener("click",t),this.nextBtn.addEventListener("click",e),this.cleanup.push(()=>this.prevBtn.removeEventListener("click",t)),this.cleanup.push(()=>this.nextBtn.removeEventListener("click",e));const i=s=>{if(!this.isAnimating||s.propertyName!=="transform"||!(s.target instanceof HTMLElement))return;const r=this.cards[this.currentIndex];r&&s.target===r&&this.unlockAnimation()};this.rootEl.addEventListener("transitionend",i),this.cleanup.push(()=>this.rootEl.removeEventListener("transitionend",i));const n=s=>{const r=s.target;if(!(r instanceof HTMLElement)||r.tagName!=="SCRATCH-REVEAL")return;const c=s.composedPath?.();if(!c?.length)return;const o=c.find(d=>d instanceof HTMLElement&&d.classList.contains("cfc__card")&&d.dataset.cfcIndex!=null);if(!o)return;const l=Number(o.dataset.cfcIndex);if(!Number.isFinite(l))return;const m=s.detail?.percent??100;this.dispatchEvent(new CustomEvent("coverflow-carousel:scratch-complete",{detail:{index:l,length:this.cards.length,percent:m},bubbles:!0,composed:!0}))};this.rootEl.addEventListener("complete",n),this.cleanup.push(()=>this.rootEl.removeEventListener("complete",n))}rebuildCardsFromLightDom(){const t=Array.from(this.trackEl.children).filter(r=>r instanceof HTMLElement&&r.classList.contains("cfc__card")),e=[];t.forEach(r=>{const c=r.firstElementChild;c instanceof HTMLElement&&e.push(c)});const i=Array.from(this.children).filter(r=>r instanceof HTMLElement),n=[...e,...i],s=[];for(let r=0;r<n.length;r++){const c=n[r],o=t[r]??document.createElement("div");t[r]||(o.className="cfc__card",this.trackEl.append(o)),o.firstElementChild!==c&&o.replaceChildren(c),s.push(o)}for(let r=n.length;r<t.length;r++)t[r]?.remove();this.cards=s,this.hasAppliedInitialLayout=!1,this.lastLayoutIndex=null,this.lastVisibleSet=new Set}getVisibleSet(){const t=this.cards.length,e=new Set;if(t<=0)return e;const i=Math.floor(t/2);if(p>=i){for(let n=0;n<t;n++)e.add(n);return e}for(let n=-p;n<=p;n++)e.add(f(this.currentIndex+n,t));return e}buildDots(){const t=Array.from(this.dotsEl.children).filter(s=>s instanceof HTMLElement&&s.classList.contains("cfc__dot"));if(!u(this,"show-dots",!1)){t.forEach(s=>{s.remove()}),this.dots=[];return}const i=[],n=this.cards.length;for(let s=0;s<n;s++){const r=t[s]??document.createElement("span");t[s]||this.dotsEl.append(r),r.className="cfc__dot",r.setAttribute("aria-hidden","true"),i.push(r)}for(let s=n;s<t.length;s++)t[s]?.remove();this.dots=i,this.updateDotsVisualState()}computeCardState(t){const e=this.cards.length,i=T(this.currentIndex,t,e),n=Math.abs(i);return{index:t,delta:i,abs:n,isVisible:n<=p,isActive:t===this.currentIndex}}applyCardState(t,e){t.setAttribute("aria-hidden",e.isVisible?"false":"true"),t.dataset.active=e.isActive?"true":"false",t.dataset.cfcIndex=String(e.index),t.setAttribute("role","group"),t.setAttribute("aria-roledescription","slide"),t.setAttribute("aria-setsize",String(this.cards.length)),t.setAttribute("aria-posinset",String(e.index+1));const i=`${this.instanceId}-slide-${e.index}`;t.id=i;const n=String(e.delta),s=String(e.abs),r=t.dataset.cfcDelta,c=t.dataset.cfcAbs;r!==n&&(t.style.setProperty("--cfc-delta",n),t.dataset.cfcDelta=n),c!==s&&(t.style.setProperty("--cfc-abs",s),t.dataset.cfcAbs=s)}applyLayoutAndA11y(t){if(this.cards.length){if(this.hasAppliedInitialLayout){const e=this.getVisibleSet(),i=new Set;this.lastVisibleSet.forEach(n=>{i.add(n)}),e.forEach(n=>{i.add(n)}),this.lastLayoutIndex!=null&&i.add(this.lastLayoutIndex),i.add(this.currentIndex),i.forEach(n=>{const s=this.cards[n];if(!s)return;const r=this.computeCardState(n);this.applyCardState(s,r)}),this.lastLayoutIndex=this.currentIndex,this.lastVisibleSet=e}else{for(let e=0;e<this.cards.length;e++){const i=this.cards[e];if(!i)continue;const n=this.computeCardState(e);this.applyCardState(i,n)}this.hasAppliedInitialLayout=!0,this.lastLayoutIndex=this.currentIndex,this.lastVisibleSet=this.getVisibleSet()}this.updateDotsVisualState(),t.announce&&u(this,"announce-changes",!0)&&this.announce(`Slide ${this.currentIndex+1} of ${this.cards.length}`),t.emitChange&&this.emitChange()}}updateDotsVisualState(){if(this.dots.length)for(let t=0;t<this.dots.length;t++){const e=this.dots[t],i=t===this.currentIndex;e.dataset.active=i?"true":"false"}}lockUntilTransitionEnd(){this.pendingAnimToken++;const t=this.pendingAnimToken;if(k()){this.unlockAnimation();return}const e=this.cards[this.currentIndex];if(!e){this.unlockAnimation();return}const i=getComputedStyle(e),n=_(i,"transform");if(n<=0){this.unlockAnimation();return}const s=g(i.getPropertyValue("--cfc-transition-ms").trim(),400),c=Math.max(n,s)+60;this.animFallbackTimerId!==null&&window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=window.setTimeout(()=>{this.pendingAnimToken===t&&this.unlockAnimation()},c)}unlockAnimation(){this.isAnimating=!1,this.animFallbackTimerId!==null&&(window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=null)}emitChange(){this.dispatchEvent(new CustomEvent("coverflow-carousel:change",{detail:{index:this.currentIndex,length:this.cards.length}}))}dispatchReady(){this.dispatchEvent(new CustomEvent("coverflow-carousel:ready",{detail:{index:this.currentIndex,length:this.cards.length}}))}announce(t){this.liveRegion.textContent="",queueMicrotask(()=>{this.liveRegion.textContent=t})}reflectIndexAttr(){this.reflectGuard=!0;try{this.setAttribute("index",String(this.currentIndex))}finally{this.reflectGuard=!1}}applyStyles(t){if(typeof t=="string"){if(v(this.shadow)){const e=S(t);if(e){this.shadow.adoptedStyleSheets=[e],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&v(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(h.defaultStylesheet&&v(this.shadow)){this.shadow.adoptedStyleSheets=[h.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=C}}function F(a={}){const{selector:t="coverflow-carousel",onReady:e,onChange:i,onScratchComplete:n,stylesheet:s}=a,r=Array.from(document.querySelectorAll(t));return(e||i||n)&&r.forEach(c=>{e&&c.addEventListener("coverflow-carousel:ready",o=>{e(c,o.detail)}),i&&c.addEventListener("coverflow-carousel:change",o=>{i(c,o.detail)}),n&&c.addEventListener("coverflow-carousel:scratch-complete",o=>{n(c,o.detail)})}),s&&r.forEach(c=>{const o=c;typeof s=="string"?o.adoptStyles(s):o.adoptStylesheet(s)}),r}function D(a="coverflow-carousel"){typeof window>"u"||!("customElements"in window)||customElements.get(a)||customElements.define(a,h)}exports.CoverflowCarouselElement=h;exports.coverflowCarouselCssText=A;exports.initCoverflowCarousels=F;exports.registerCoverflowCarouselElement=D;
+`,A=x;function v(a){return"adoptedStyleSheets"in a}function S(a){try{const t=new CSSStyleSheet;return t.replaceSync(a),t}catch{return null}}const I=S(x),_=x;function b(a){return a.split(",").map(t=>t.trim()).filter(Boolean)}function g(a,t){const n=a.trim();if(!n)return t;if(n.endsWith("ms")){const e=Number(n.slice(0,-2).trim());return Number.isFinite(e)?e:t}if(n.endsWith("s")){const e=Number(n.slice(0,-1).trim());return Number.isFinite(e)?e*1e3:t}const s=Number(n);return Number.isFinite(s)?s:t}function C(a,t){const n=b(a.transitionProperty),s=b(a.transitionDuration),e=b(a.transitionDelay);if(!n.length)return 0;const r=(m=>{const h=n.indexOf(m);if(h>=0)return h;const E=n.indexOf("all");return E>=0?E:-1})(t);if(r<0)return 0;const c=s[Math.min(r,s.length-1)]??"0s",o=e[Math.min(r,e.length-1)]??"0s",l=g(c,0),y=g(o,0);return Math.max(0,l+y)}function k(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function u(a,t,n){if(!a.hasAttribute(t))return n;const s=a.getAttribute(t);return s==null||s===""?!0:s!=="false"}function L(a,t,n){const s=a.getAttribute(t);if(s==null)return n;const e=Number(s.trim());return Number.isFinite(e)?Math.trunc(e):n}function w(a,t){const n=a.getAttribute(t);if(n==null)return null;const s=n.trim();return s||null}function f(a,t){return t<=0?0:(a%t+t)%t}function T(a,t,n){const s=t-a,e=n/2;return s>e?s-n:s<-e?s+n:s}const p=1;let D=0;class d extends HTMLElement{static defaultStylesheet=I;static observedAttributes=["start-index","index","show-dots","show-arrows","announce-changes"];shadow=this.attachShadow({mode:"open"});instanceId=`cfc-${++D}`;rootEl;trackEl;dotsEl;prevBtn;nextBtn;liveRegion;styleEl=null;cards=[];dots=[];currentIndex=0;isAnimating=!1;hasAppliedInitialLayout=!1;lastLayoutIndex=null;lastVisibleSet=new Set;pendingAnimToken=0;animFallbackTimerId=null;cleanup=[];lightDomObserverOptions={childList:!0,attributes:!0,subtree:!0};lightDomObserver=null;refreshScheduled=!1;suppressMutations=!1;reflectGuard=!1;connectedCallback(){this.render(),this.readAttributes({isInit:!0}),this.refresh(),this.setupLightDomObserver()}disconnectedCallback(){this.destroy()}attributeChangedCallback(t,n,s){if(!this.isConnected||this.reflectGuard)return;this.readAttributes({isInit:!1});const e=w(this,"index");if(e!=null){const i=f(Number(e),this.cards.length);if(Number.isFinite(i)&&i!==this.currentIndex){this.goTo(i);return}}this.applyLayoutAndA11y({announce:!0,emitChange:!1})}next(){this.goTo(this.currentIndex+1)}prev(){this.goTo(this.currentIndex-1)}goTo(t){if(this.isAnimating)return;const n=f(t,this.cards.length);n!==this.currentIndex&&(this.isAnimating=!0,this.currentIndex=n,this.reflectIndexAttr(),this.applyLayoutAndA11y({announce:!0,emitChange:!0}),this.lockUntilTransitionEnd())}refresh(){const t=this.lightDomObserver;t&&(this.suppressMutations=!0,t.disconnect(),t.takeRecords()),this.rebuildCardsFromLightDom();const n=L(this,"start-index",0),s=w(this,"index"),e=s!=null?Number(s):n,i=Number.isFinite(e)?e:0;this.currentIndex=f(i,this.cards.length),this.reflectIndexAttr(),this.buildDots(),this.hasAppliedInitialLayout=!1,this.lastLayoutIndex=null,this.lastVisibleSet=new Set,this.applyLayoutAndA11y({announce:!0,emitChange:!1}),this.dispatchReady(),t&&(t.observe(this,this.lightDomObserverOptions),t.takeRecords(),this.suppressMutations=!1)}destroy(){this.animFallbackTimerId!==null&&(window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=null),this.cleanup.forEach(t=>{t()}),this.cleanup=[],this.isAnimating=!1}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}readAttributes(t){this.rootEl||this.render();const n=u(this,"show-arrows",!1),s=u(this,"show-dots",!1);this.prevBtn.style.display=n?"":"none",this.nextBtn.style.display=n?"":"none",this.dotsEl.style.display=s?"":"none";const e=this.getAttribute("aria-label");e&&this.rootEl.setAttribute("aria-label",e),t.isInit&&this.setAttribute("aria-roledescription","carousel")}render(){this.applyStyles(null),this.rootEl=document.createElement("div"),this.rootEl.className="cfc",this.trackEl=document.createElement("div"),this.trackEl.className="cfc__track",this.prevBtn=document.createElement("button"),this.prevBtn.type="button",this.prevBtn.className="cfc__arrow cfc__arrow--left",this.prevBtn.setAttribute("aria-label","Previous"),this.prevBtn.textContent="‹",this.nextBtn=document.createElement("button"),this.nextBtn.type="button",this.nextBtn.className="cfc__arrow cfc__arrow--right",this.nextBtn.setAttribute("aria-label","Next"),this.nextBtn.textContent="›",this.dotsEl=document.createElement("div"),this.dotsEl.className="cfc__dots",this.liveRegion=document.createElement("div"),this.liveRegion.className="cfc__sr",this.liveRegion.setAttribute("aria-live","polite"),this.liveRegion.setAttribute("aria-atomic","true"),this.rootEl.append(this.trackEl,this.prevBtn,this.nextBtn,this.dotsEl,this.liveRegion),this.shadow.innerHTML="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.bindEvents()}bindEvents(){this.cleanup.forEach(i=>{i()}),this.cleanup=[];const t=()=>this.prev(),n=()=>this.next();this.prevBtn.addEventListener("click",t),this.nextBtn.addEventListener("click",n),this.cleanup.push(()=>this.prevBtn.removeEventListener("click",t)),this.cleanup.push(()=>this.nextBtn.removeEventListener("click",n));const s=i=>{if(!this.isAnimating||i.propertyName!=="transform"||!(i.target instanceof HTMLElement))return;const r=this.cards[this.currentIndex];r&&i.target===r&&this.unlockAnimation()};this.rootEl.addEventListener("transitionend",s),this.cleanup.push(()=>this.rootEl.removeEventListener("transitionend",s));const e=i=>{const r=i.target;if(!(r instanceof HTMLElement)||r.tagName!=="SCRATCH-REVEAL")return;const c=i.composedPath?.();if(!c?.length)return;const o=c.find(h=>h instanceof HTMLElement&&h.classList.contains("cfc__card")&&h.dataset.cfcIndex!=null);if(!o)return;const l=Number(o.dataset.cfcIndex);if(!Number.isFinite(l))return;const m=i.detail?.percent??100;this.dispatchEvent(new CustomEvent("coverflow-carousel:scratch-complete",{detail:{index:l,length:this.cards.length,percent:m},bubbles:!0,composed:!0}))};this.rootEl.addEventListener("complete",e),this.cleanup.push(()=>this.rootEl.removeEventListener("complete",e))}setupLightDomObserver(){this.lightDomObserver||(this.lightDomObserver=new MutationObserver(t=>{this.suppressMutations||!t.some(s=>!(s.type==="attributes"&&s.attributeName==="slot"))||this.scheduleRefreshFromMutations()}),this.lightDomObserver.observe(this,{...this.lightDomObserverOptions}),this.cleanup.push(()=>{this.lightDomObserver?.disconnect(),this.lightDomObserver=null}))}scheduleRefreshFromMutations(){this.refreshScheduled||(this.refreshScheduled=!0,queueMicrotask(()=>{this.refreshScheduled=!1,this.isConnected&&this.refresh()}))}rebuildCardsFromLightDom(){const t=Array.from(this.trackEl.children).filter(e=>e instanceof HTMLElement&&e.classList.contains("cfc__card")),n=[],s=Array.from(this.children).filter(e=>e instanceof HTMLElement);for(let e=0;e<s.length;e++){const i=s[e],r=t[e]??document.createElement("div"),c=`${this.instanceId}-slot-${e}`;t[e]||(r.className="cfc__card",this.trackEl.append(r)),i.getAttribute("slot")!==c&&i.setAttribute("slot",c);const o=r.querySelector("slot");let l;o instanceof HTMLSlotElement?l=o:(l=document.createElement("slot"),r.replaceChildren(l)),l.name!==c&&(l.name=c),n.push(r)}for(let e=s.length;e<t.length;e++)t[e]?.remove();this.cards=n,this.hasAppliedInitialLayout=!1,this.lastLayoutIndex=null,this.lastVisibleSet=new Set}getVisibleSet(){const t=this.cards.length,n=new Set;if(t<=0)return n;const s=Math.floor(t/2);if(p>=s){for(let e=0;e<t;e++)n.add(e);return n}for(let e=-p;e<=p;e++)n.add(f(this.currentIndex+e,t));return n}buildDots(){const t=Array.from(this.dotsEl.children).filter(i=>i instanceof HTMLElement&&i.classList.contains("cfc__dot"));if(!u(this,"show-dots",!1)){t.forEach(i=>{i.remove()}),this.dots=[];return}const s=[],e=this.cards.length;for(let i=0;i<e;i++){const r=t[i]??document.createElement("span");t[i]||this.dotsEl.append(r),r.className="cfc__dot",r.setAttribute("aria-hidden","true"),s.push(r)}for(let i=e;i<t.length;i++)t[i]?.remove();this.dots=s,this.updateDotsVisualState()}computeCardState(t){const n=this.cards.length,s=T(this.currentIndex,t,n),e=Math.abs(s);return{index:t,delta:s,abs:e,isVisible:e<=p,isActive:t===this.currentIndex}}applyCardState(t,n){t.setAttribute("aria-hidden",n.isVisible?"false":"true"),t.dataset.active=n.isActive?"true":"false",t.dataset.cfcIndex=String(n.index),t.setAttribute("role","group"),t.setAttribute("aria-roledescription","slide"),t.setAttribute("aria-setsize",String(this.cards.length)),t.setAttribute("aria-posinset",String(n.index+1));const s=`${this.instanceId}-slide-${n.index}`;t.id=s;const e=String(n.delta),i=String(n.abs),r=t.dataset.cfcDelta,c=t.dataset.cfcAbs;r!==e&&(t.style.setProperty("--cfc-delta",e),t.dataset.cfcDelta=e),c!==i&&(t.style.setProperty("--cfc-abs",i),t.dataset.cfcAbs=i)}applyLayoutAndA11y(t){if(this.cards.length){if(this.hasAppliedInitialLayout){const n=this.getVisibleSet(),s=new Set;this.lastVisibleSet.forEach(e=>{s.add(e)}),n.forEach(e=>{s.add(e)}),this.lastLayoutIndex!=null&&s.add(this.lastLayoutIndex),s.add(this.currentIndex),s.forEach(e=>{const i=this.cards[e];if(!i)return;const r=this.computeCardState(e);this.applyCardState(i,r)}),this.lastLayoutIndex=this.currentIndex,this.lastVisibleSet=n}else{for(let n=0;n<this.cards.length;n++){const s=this.cards[n];if(!s)continue;const e=this.computeCardState(n);this.applyCardState(s,e)}this.hasAppliedInitialLayout=!0,this.lastLayoutIndex=this.currentIndex,this.lastVisibleSet=this.getVisibleSet()}this.updateDotsVisualState(),t.announce&&u(this,"announce-changes",!0)&&this.announce(`Slide ${this.currentIndex+1} of ${this.cards.length}`),t.emitChange&&this.emitChange()}}updateDotsVisualState(){if(this.dots.length)for(let t=0;t<this.dots.length;t++){const n=this.dots[t],s=t===this.currentIndex;n.dataset.active=s?"true":"false"}}lockUntilTransitionEnd(){this.pendingAnimToken++;const t=this.pendingAnimToken;if(k()){this.unlockAnimation();return}const n=this.cards[this.currentIndex];if(!n){this.unlockAnimation();return}const s=getComputedStyle(n),e=C(s,"transform");if(e<=0){this.unlockAnimation();return}const i=g(s.getPropertyValue("--cfc-transition-ms").trim(),400),c=Math.max(e,i)+60;this.animFallbackTimerId!==null&&window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=window.setTimeout(()=>{this.pendingAnimToken===t&&this.unlockAnimation()},c)}unlockAnimation(){this.isAnimating=!1,this.animFallbackTimerId!==null&&(window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=null)}emitChange(){this.dispatchEvent(new CustomEvent("coverflow-carousel:change",{detail:{index:this.currentIndex,length:this.cards.length}}))}dispatchReady(){this.dispatchEvent(new CustomEvent("coverflow-carousel:ready",{detail:{index:this.currentIndex,length:this.cards.length}}))}announce(t){this.liveRegion.textContent="",queueMicrotask(()=>{this.liveRegion.textContent=t})}reflectIndexAttr(){this.reflectGuard=!0;try{this.setAttribute("index",String(this.currentIndex))}finally{this.reflectGuard=!1}}applyStyles(t){if(typeof t=="string"){if(v(this.shadow)){const n=S(t);if(n){this.shadow.adoptedStyleSheets=[n],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&v(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(d.defaultStylesheet&&v(this.shadow)){this.shadow.adoptedStyleSheets=[d.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=_}}function M(a={}){const{selector:t="coverflow-carousel",onReady:n,onChange:s,onScratchComplete:e,stylesheet:i}=a,r=Array.from(document.querySelectorAll(t));return(n||s||e)&&r.forEach(c=>{n&&c.addEventListener("coverflow-carousel:ready",o=>{n(c,o.detail)}),s&&c.addEventListener("coverflow-carousel:change",o=>{s(c,o.detail)}),e&&c.addEventListener("coverflow-carousel:scratch-complete",o=>{e(c,o.detail)})}),i&&r.forEach(c=>{const o=c;typeof i=="string"?o.adoptStyles(i):o.adoptStylesheet(i)}),r}function N(a="coverflow-carousel"){typeof window>"u"||!("customElements"in window)||customElements.get(a)||customElements.define(a,d)}exports.CoverflowCarouselElement=d;exports.coverflowCarouselCssText=A;exports.initCoverflowCarousels=M;exports.registerCoverflowCarouselElement=N;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-const b = `:host {
+const x = `:host {
   display: block;
   width: 100%;
   height: 100%;
@@ -164,7 +164,7 @@ const b = `:host {
   white-space: nowrap;
   border: 0;
 }
-`, N = b;
+`, D = x;
 function v(a) {
   return "adoptedStyleSheets" in a;
 }
@@ -176,63 +176,63 @@ function S(a) {
     return null;
   }
 }
-const A = S(b), I = b;
-function x(a) {
+const A = S(x), I = x;
+function b(a) {
   return a.split(",").map((t) => t.trim()).filter(Boolean);
 }
 function g(a, t) {
-  const e = a.trim();
-  if (!e) return t;
-  if (e.endsWith("ms")) {
-    const n = Number(e.slice(0, -2).trim());
-    return Number.isFinite(n) ? n : t;
-  }
-  if (e.endsWith("s")) {
-    const n = Number(e.slice(0, -1).trim());
-    return Number.isFinite(n) ? n * 1e3 : t;
-  }
-  const i = Number(e);
-  return Number.isFinite(i) ? i : t;
+  const n = a.trim();
+  if (!n) return t;
+  if (n.endsWith("ms")) {
+    const e = Number(n.slice(0, -2).trim());
+    return Number.isFinite(e) ? e : t;
+  }
+  if (n.endsWith("s")) {
+    const e = Number(n.slice(0, -1).trim());
+    return Number.isFinite(e) ? e * 1e3 : t;
+  }
+  const s = Number(n);
+  return Number.isFinite(s) ? s : t;
 }
 function _(a, t) {
-  const e = x(a.transitionProperty), i = x(a.transitionDuration), n = x(a.transitionDelay);
-  if (!e.length) return 0;
+  const n = b(a.transitionProperty), s = b(a.transitionDuration), e = b(a.transitionDelay);
+  if (!n.length) return 0;
   const r = ((m) => {
-    const d = e.indexOf(m);
-    if (d >= 0) return d;
-    const E = e.indexOf("all");
+    const h = n.indexOf(m);
+    if (h >= 0) return h;
+    const E = n.indexOf("all");
     return E >= 0 ? E : -1;
   })(t);
   if (r < 0) return 0;
-  const c = i[Math.min(r, i.length - 1)] ?? "0s", o = n[Math.min(r, n.length - 1)] ?? "0s", l = g(c, 0), y = g(o, 0);
+  const c = s[Math.min(r, s.length - 1)] ?? "0s", o = e[Math.min(r, e.length - 1)] ?? "0s", l = g(c, 0), y = g(o, 0);
   return Math.max(0, l + y);
 }
 function k() {
   return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? !1;
 }
-function h(a, t, e) {
-  if (!a.hasAttribute(t)) return e;
-  const i = a.getAttribute(t);
-  return i == null || i === "" ? !0 : i !== "false";
+function d(a, t, n) {
+  if (!a.hasAttribute(t)) return n;
+  const s = a.getAttribute(t);
+  return s == null || s === "" ? !0 : s !== "false";
 }
-function C(a, t, e) {
-  const i = a.getAttribute(t);
-  if (i == null) return e;
-  const n = Number(i.trim());
-  return Number.isFinite(n) ? Math.trunc(n) : e;
+function C(a, t, n) {
+  const s = a.getAttribute(t);
+  if (s == null) return n;
+  const e = Number(s.trim());
+  return Number.isFinite(e) ? Math.trunc(e) : n;
 }
 function w(a, t) {
-  const e = a.getAttribute(t);
-  if (e == null) return null;
-  const i = e.trim();
-  return i || null;
+  const n = a.getAttribute(t);
+  if (n == null) return null;
+  const s = n.trim();
+  return s || null;
 }
 function u(a, t) {
   return t <= 0 ? 0 : (a % t + t) % t;
 }
-function L(a, t, e) {
-  const i = t - a, n = e / 2;
-  return i > n ? i - e : i < -n ? i + e : i;
+function L(a, t, n) {
+  const s = t - a, e = n / 2;
+  return s > e ? s - n : s < -e ? s + n : s;
 }
 const f = 1;
 let T = 0;
@@ -264,21 +264,29 @@ class p extends HTMLElement {
   pendingAnimToken = 0;
   animFallbackTimerId = null;
   cleanup = [];
+  lightDomObserverOptions = {
+    childList: !0,
+    attributes: !0,
+    subtree: !0
+  };
+  lightDomObserver = null;
+  refreshScheduled = !1;
+  suppressMutations = !1;
   reflectGuard = !1;
   connectedCallback() {
-    this.render(), this.readAttributes({ isInit: !0 }), this.refresh();
+    this.render(), this.readAttributes({ isInit: !0 }), this.refresh(), this.setupLightDomObserver();
   }
   disconnectedCallback() {
     this.destroy();
   }
-  attributeChangedCallback(t, e, i) {
+  attributeChangedCallback(t, n, s) {
     if (!this.isConnected || this.reflectGuard) return;
     this.readAttributes({ isInit: !1 });
-    const n = w(this, "index");
-    if (n != null) {
-      const s = u(Number(n), this.cards.length);
-      if (Number.isFinite(s) && s !== this.currentIndex) {
-        this.goTo(s);
+    const e = w(this, "index");
+    if (e != null) {
+      const i = u(Number(e), this.cards.length);
+      if (Number.isFinite(i) && i !== this.currentIndex) {
+        this.goTo(i);
         return;
       }
     }
@@ -292,13 +300,14 @@ class p extends HTMLElement {
   }
   goTo(t) {
     if (this.isAnimating) return;
-    const e = u(t, this.cards.length);
-    e !== this.currentIndex && (this.isAnimating = !0, this.currentIndex = e, this.reflectIndexAttr(), this.applyLayoutAndA11y({ announce: !0, emitChange: !0 }), this.lockUntilTransitionEnd());
+    const n = u(t, this.cards.length);
+    n !== this.currentIndex && (this.isAnimating = !0, this.currentIndex = n, this.reflectIndexAttr(), this.applyLayoutAndA11y({ announce: !0, emitChange: !0 }), this.lockUntilTransitionEnd());
   }
   refresh() {
-    this.rebuildCardsFromLightDom();
-    const t = C(this, "start-index", 0), e = w(this, "index"), i = e != null ? Number(e) : t, n = Number.isFinite(i) ? i : 0;
-    this.currentIndex = u(n, this.cards.length), this.reflectIndexAttr(), this.buildDots(), this.hasAppliedInitialLayout = !1, this.lastLayoutIndex = null, this.lastVisibleSet = /* @__PURE__ */ new Set(), this.applyLayoutAndA11y({ announce: !0, emitChange: !1 }), this.dispatchReady();
+    const t = this.lightDomObserver;
+    t && (this.suppressMutations = !0, t.disconnect(), t.takeRecords()), this.rebuildCardsFromLightDom();
+    const n = C(this, "start-index", 0), s = w(this, "index"), e = s != null ? Number(s) : n, i = Number.isFinite(e) ? e : 0;
+    this.currentIndex = u(i, this.cards.length), this.reflectIndexAttr(), this.buildDots(), this.hasAppliedInitialLayout = !1, this.lastLayoutIndex = null, this.lastVisibleSet = /* @__PURE__ */ new Set(), this.applyLayoutAndA11y({ announce: !0, emitChange: !1 }), this.dispatchReady(), t && (t.observe(this, this.lightDomObserverOptions), t.takeRecords(), this.suppressMutations = !1);
   }
   destroy() {
     this.animFallbackTimerId !== null && (window.clearTimeout(this.animFallbackTimerId), this.animFallbackTimerId = null), this.cleanup.forEach((t) => {
@@ -313,38 +322,38 @@ class p extends HTMLElement {
   }
   readAttributes(t) {
     this.rootEl || this.render();
-    const e = h(this, "show-arrows", !1), i = h(this, "show-dots", !1);
-    this.prevBtn.style.display = e ? "" : "none", this.nextBtn.style.display = e ? "" : "none", this.dotsEl.style.display = i ? "" : "none";
-    const n = this.getAttribute("aria-label");
-    n && this.rootEl.setAttribute("aria-label", n), t.isInit && this.setAttribute("aria-roledescription", "carousel");
+    const n = d(this, "show-arrows", !1), s = d(this, "show-dots", !1);
+    this.prevBtn.style.display = n ? "" : "none", this.nextBtn.style.display = n ? "" : "none", this.dotsEl.style.display = s ? "" : "none";
+    const e = this.getAttribute("aria-label");
+    e && this.rootEl.setAttribute("aria-label", e), t.isInit && this.setAttribute("aria-roledescription", "carousel");
   }
   render() {
     this.applyStyles(null), this.rootEl = document.createElement("div"), this.rootEl.className = "cfc", this.trackEl = document.createElement("div"), this.trackEl.className = "cfc__track", this.prevBtn = document.createElement("button"), this.prevBtn.type = "button", this.prevBtn.className = "cfc__arrow cfc__arrow--left", this.prevBtn.setAttribute("aria-label", "Previous"), this.prevBtn.textContent = "‹", this.nextBtn = document.createElement("button"), this.nextBtn.type = "button", this.nextBtn.className = "cfc__arrow cfc__arrow--right", this.nextBtn.setAttribute("aria-label", "Next"), this.nextBtn.textContent = "›", this.dotsEl = document.createElement("div"), this.dotsEl.className = "cfc__dots", this.liveRegion = document.createElement("div"), this.liveRegion.className = "cfc__sr", this.liveRegion.setAttribute("aria-live", "polite"), this.liveRegion.setAttribute("aria-atomic", "true"), this.rootEl.append(this.trackEl, this.prevBtn, this.nextBtn, this.dotsEl, this.liveRegion), this.shadow.innerHTML = "", this.styleEl && this.shadow.append(this.styleEl), this.shadow.append(this.rootEl), this.bindEvents();
   }
   bindEvents() {
-    this.cleanup.forEach((s) => {
-      s();
+    this.cleanup.forEach((i) => {
+      i();
     }), this.cleanup = [];
-    const t = () => this.prev(), e = () => this.next();
-    this.prevBtn.addEventListener("click", t), this.nextBtn.addEventListener("click", e), this.cleanup.push(() => this.prevBtn.removeEventListener("click", t)), this.cleanup.push(() => this.nextBtn.removeEventListener("click", e));
-    const i = (s) => {
-      if (!this.isAnimating || s.propertyName !== "transform" || !(s.target instanceof HTMLElement)) return;
+    const t = () => this.prev(), n = () => this.next();
+    this.prevBtn.addEventListener("click", t), this.nextBtn.addEventListener("click", n), this.cleanup.push(() => this.prevBtn.removeEventListener("click", t)), this.cleanup.push(() => this.nextBtn.removeEventListener("click", n));
+    const s = (i) => {
+      if (!this.isAnimating || i.propertyName !== "transform" || !(i.target instanceof HTMLElement)) return;
       const r = this.cards[this.currentIndex];
-      r && s.target === r && this.unlockAnimation();
+      r && i.target === r && this.unlockAnimation();
     };
-    this.rootEl.addEventListener("transitionend", i), this.cleanup.push(() => this.rootEl.removeEventListener("transitionend", i));
-    const n = (s) => {
-      const r = s.target;
+    this.rootEl.addEventListener("transitionend", s), this.cleanup.push(() => this.rootEl.removeEventListener("transitionend", s));
+    const e = (i) => {
+      const r = i.target;
       if (!(r instanceof HTMLElement) || r.tagName !== "SCRATCH-REVEAL") return;
-      const c = s.composedPath?.();
+      const c = i.composedPath?.();
       if (!c?.length) return;
       const o = c.find(
-        (d) => d instanceof HTMLElement && d.classList.contains("cfc__card") && d.dataset.cfcIndex != null
+        (h) => h instanceof HTMLElement && h.classList.contains("cfc__card") && h.dataset.cfcIndex != null
       );
       if (!o) return;
       const l = Number(o.dataset.cfcIndex);
       if (!Number.isFinite(l)) return;
-      const m = s.detail?.percent ?? 100;
+      const m = i.detail?.percent ?? 100;
       this.dispatchEvent(
         new CustomEvent("coverflow-carousel:scratch-complete", {
           detail: { index: l, length: this.cards.length, percent: m },
@@ -353,108 +362,120 @@ class p extends HTMLElement {
         })
       );
     };
-    this.rootEl.addEventListener("complete", n), this.cleanup.push(
-      () => this.rootEl.removeEventListener("complete", n)
+    this.rootEl.addEventListener("complete", e), this.cleanup.push(
+      () => this.rootEl.removeEventListener("complete", e)
     );
   }
+  setupLightDomObserver() {
+    this.lightDomObserver || (this.lightDomObserver = new MutationObserver((t) => {
+      this.suppressMutations || !t.some((s) => !(s.type === "attributes" && s.attributeName === "slot")) || this.scheduleRefreshFromMutations();
+    }), this.lightDomObserver.observe(this, {
+      ...this.lightDomObserverOptions
+    }), this.cleanup.push(() => {
+      this.lightDomObserver?.disconnect(), this.lightDomObserver = null;
+    }));
+  }
+  scheduleRefreshFromMutations() {
+    this.refreshScheduled || (this.refreshScheduled = !0, queueMicrotask(() => {
+      this.refreshScheduled = !1, this.isConnected && this.refresh();
+    }));
+  }
   rebuildCardsFromLightDom() {
     const t = Array.from(this.trackEl.children).filter(
-      (r) => r instanceof HTMLElement && r.classList.contains("cfc__card")
-    ), e = [];
-    t.forEach((r) => {
-      const c = r.firstElementChild;
-      c instanceof HTMLElement && e.push(c);
-    });
-    const i = Array.from(this.children).filter(
-      (r) => r instanceof HTMLElement
-    ), n = [...e, ...i], s = [];
-    for (let r = 0; r < n.length; r++) {
-      const c = n[r], o = t[r] ?? document.createElement("div");
-      t[r] || (o.className = "cfc__card", this.trackEl.append(o)), o.firstElementChild !== c && o.replaceChildren(c), s.push(o);
+      (e) => e instanceof HTMLElement && e.classList.contains("cfc__card")
+    ), n = [], s = Array.from(this.children).filter(
+      (e) => e instanceof HTMLElement
+    );
+    for (let e = 0; e < s.length; e++) {
+      const i = s[e], r = t[e] ?? document.createElement("div"), c = `${this.instanceId}-slot-${e}`;
+      t[e] || (r.className = "cfc__card", this.trackEl.append(r)), i.getAttribute("slot") !== c && i.setAttribute("slot", c);
+      const o = r.querySelector("slot");
+      let l;
+      o instanceof HTMLSlotElement ? l = o : (l = document.createElement("slot"), r.replaceChildren(l)), l.name !== c && (l.name = c), n.push(r);
     }
-    for (let r = n.length; r < t.length; r++)
-      t[r]?.remove();
-    this.cards = s, this.hasAppliedInitialLayout = !1, this.lastLayoutIndex = null, this.lastVisibleSet = /* @__PURE__ */ new Set();
+    for (let e = s.length; e < t.length; e++)
+      t[e]?.remove();
+    this.cards = n, this.hasAppliedInitialLayout = !1, this.lastLayoutIndex = null, this.lastVisibleSet = /* @__PURE__ */ new Set();
   }
   getVisibleSet() {
-    const t = this.cards.length, e = /* @__PURE__ */ new Set();
-    if (t <= 0) return e;
-    const i = Math.floor(t / 2);
-    if (f >= i) {
-      for (let n = 0; n < t; n++) e.add(n);
-      return e;
+    const t = this.cards.length, n = /* @__PURE__ */ new Set();
+    if (t <= 0) return n;
+    const s = Math.floor(t / 2);
+    if (f >= s) {
+      for (let e = 0; e < t; e++) n.add(e);
+      return n;
     }
-    for (let n = -f; n <= f; n++)
-      e.add(u(this.currentIndex + n, t));
-    return e;
+    for (let e = -f; e <= f; e++)
+      n.add(u(this.currentIndex + e, t));
+    return n;
   }
   buildDots() {
     const t = Array.from(this.dotsEl.children).filter(
-      (s) => s instanceof HTMLElement && s.classList.contains("cfc__dot")
+      (i) => i instanceof HTMLElement && i.classList.contains("cfc__dot")
     );
-    if (!h(this, "show-dots", !1)) {
-      t.forEach((s) => {
-        s.remove();
+    if (!d(this, "show-dots", !1)) {
+      t.forEach((i) => {
+        i.remove();
       }), this.dots = [];
       return;
     }
-    const i = [], n = this.cards.length;
-    for (let s = 0; s < n; s++) {
-      const r = t[s] ?? document.createElement("span");
-      t[s] || this.dotsEl.append(r), r.className = "cfc__dot", r.setAttribute("aria-hidden", "true"), i.push(r);
+    const s = [], e = this.cards.length;
+    for (let i = 0; i < e; i++) {
+      const r = t[i] ?? document.createElement("span");
+      t[i] || this.dotsEl.append(r), r.className = "cfc__dot", r.setAttribute("aria-hidden", "true"), s.push(r);
     }
-    for (let s = n; s < t.length; s++)
-      t[s]?.remove();
-    this.dots = i, this.updateDotsVisualState();
+    for (let i = e; i < t.length; i++)
+      t[i]?.remove();
+    this.dots = s, this.updateDotsVisualState();
   }
   computeCardState(t) {
-    const e = this.cards.length, i = L(this.currentIndex, t, e), n = Math.abs(i);
+    const n = this.cards.length, s = L(this.currentIndex, t, n), e = Math.abs(s);
     return {
       index: t,
-      delta: i,
-      abs: n,
-      isVisible: n <= f,
+      delta: s,
+      abs: e,
+      isVisible: e <= f,
       isActive: t === this.currentIndex
     };
   }
-  applyCardState(t, e) {
-    t.setAttribute("aria-hidden", e.isVisible ? "false" : "true"), t.dataset.active = e.isActive ? "true" : "false", t.dataset.cfcIndex = String(e.index), t.setAttribute("role", "group"), t.setAttribute("aria-roledescription", "slide"), t.setAttribute("aria-setsize", String(this.cards.length)), t.setAttribute("aria-posinset", String(e.index + 1));
-    const i = `${this.instanceId}-slide-${e.index}`;
-    t.id = i;
-    const n = String(e.delta), s = String(e.abs), r = t.dataset.cfcDelta, c = t.dataset.cfcAbs;
-    r !== n && (t.style.setProperty("--cfc-delta", n), t.dataset.cfcDelta = n), c !== s && (t.style.setProperty("--cfc-abs", s), t.dataset.cfcAbs = s);
+  applyCardState(t, n) {
+    t.setAttribute("aria-hidden", n.isVisible ? "false" : "true"), t.dataset.active = n.isActive ? "true" : "false", t.dataset.cfcIndex = String(n.index), t.setAttribute("role", "group"), t.setAttribute("aria-roledescription", "slide"), t.setAttribute("aria-setsize", String(this.cards.length)), t.setAttribute("aria-posinset", String(n.index + 1));
+    const s = `${this.instanceId}-slide-${n.index}`;
+    t.id = s;
+    const e = String(n.delta), i = String(n.abs), r = t.dataset.cfcDelta, c = t.dataset.cfcAbs;
+    r !== e && (t.style.setProperty("--cfc-delta", e), t.dataset.cfcDelta = e), c !== i && (t.style.setProperty("--cfc-abs", i), t.dataset.cfcAbs = i);
   }
   applyLayoutAndA11y(t) {
     if (this.cards.length) {
       if (this.hasAppliedInitialLayout) {
-        const e = this.getVisibleSet(), i = /* @__PURE__ */ new Set();
-        this.lastVisibleSet.forEach((n) => {
-          i.add(n);
-        }), e.forEach((n) => {
-          i.add(n);
-        }), this.lastLayoutIndex != null && i.add(this.lastLayoutIndex), i.add(this.currentIndex), i.forEach((n) => {
-          const s = this.cards[n];
-          if (!s) return;
-          const r = this.computeCardState(n);
-          this.applyCardState(s, r);
-        }), this.lastLayoutIndex = this.currentIndex, this.lastVisibleSet = e;
-      } else {
-        for (let e = 0; e < this.cards.length; e++) {
+        const n = this.getVisibleSet(), s = /* @__PURE__ */ new Set();
+        this.lastVisibleSet.forEach((e) => {
+          s.add(e);
+        }), n.forEach((e) => {
+          s.add(e);
+        }), this.lastLayoutIndex != null && s.add(this.lastLayoutIndex), s.add(this.currentIndex), s.forEach((e) => {
           const i = this.cards[e];
-          if (!i) continue;
-          const n = this.computeCardState(e);
-          this.applyCardState(i, n);
+          if (!i) return;
+          const r = this.computeCardState(e);
+          this.applyCardState(i, r);
+        }), this.lastLayoutIndex = this.currentIndex, this.lastVisibleSet = n;
+      } else {
+        for (let n = 0; n < this.cards.length; n++) {
+          const s = this.cards[n];
+          if (!s) continue;
+          const e = this.computeCardState(n);
+          this.applyCardState(s, e);
         }
         this.hasAppliedInitialLayout = !0, this.lastLayoutIndex = this.currentIndex, this.lastVisibleSet = this.getVisibleSet();
       }
-      this.updateDotsVisualState(), t.announce && h(this, "announce-changes", !0) && this.announce(`Slide ${this.currentIndex + 1} of ${this.cards.length}`), t.emitChange && this.emitChange();
+      this.updateDotsVisualState(), t.announce && d(this, "announce-changes", !0) && this.announce(`Slide ${this.currentIndex + 1} of ${this.cards.length}`), t.emitChange && this.emitChange();
     }
   }
   updateDotsVisualState() {
     if (this.dots.length)
       for (let t = 0; t < this.dots.length; t++) {
-        const e = this.dots[t], i = t === this.currentIndex;
-        e.dataset.active = i ? "true" : "false";
+        const n = this.dots[t], s = t === this.currentIndex;
+        n.dataset.active = s ? "true" : "false";
       }
   }
   lockUntilTransitionEnd() {
@@ -464,17 +485,17 @@ class p extends HTMLElement {
       this.unlockAnimation();
       return;
     }
-    const e = this.cards[this.currentIndex];
-    if (!e) {
+    const n = this.cards[this.currentIndex];
+    if (!n) {
       this.unlockAnimation();
       return;
     }
-    const i = getComputedStyle(e), n = _(i, "transform");
-    if (n <= 0) {
+    const s = getComputedStyle(n), e = _(s, "transform");
+    if (e <= 0) {
       this.unlockAnimation();
       return;
     }
-    const s = g(i.getPropertyValue("--cfc-transition-ms").trim(), 400), c = Math.max(n, s) + 60;
+    const i = g(s.getPropertyValue("--cfc-transition-ms").trim(), 400), c = Math.max(e, i) + 60;
     this.animFallbackTimerId !== null && window.clearTimeout(this.animFallbackTimerId), this.animFallbackTimerId = window.setTimeout(() => {
       this.pendingAnimToken === t && this.unlockAnimation();
     }, c);
@@ -512,9 +533,9 @@ class p extends HTMLElement {
   applyStyles(t) {
     if (typeof t == "string") {
       if (v(this.shadow)) {
-        const e = S(t);
-        if (e) {
-          this.shadow.adoptedStyleSheets = [e], this.styleEl = null;
+        const n = S(t);
+        if (n) {
+          this.shadow.adoptedStyleSheets = [n], this.styleEl = null;
           return;
         }
       }
@@ -532,33 +553,33 @@ class p extends HTMLElement {
     this.styleEl || (this.styleEl = document.createElement("style")), this.styleEl.textContent = I;
   }
 }
-function F(a = {}) {
+function M(a = {}) {
   const {
     selector: t = "coverflow-carousel",
-    onReady: e,
-    onChange: i,
-    onScratchComplete: n,
-    stylesheet: s
+    onReady: n,
+    onChange: s,
+    onScratchComplete: e,
+    stylesheet: i
   } = a, r = Array.from(document.querySelectorAll(t));
-  return (e || i || n) && r.forEach((c) => {
-    e && c.addEventListener("coverflow-carousel:ready", (o) => {
-      e(c, o.detail);
-    }), i && c.addEventListener("coverflow-carousel:change", (o) => {
-      i(c, o.detail);
-    }), n && c.addEventListener("coverflow-carousel:scratch-complete", (o) => {
+  return (n || s || e) && r.forEach((c) => {
+    n && c.addEventListener("coverflow-carousel:ready", (o) => {
       n(c, o.detail);
+    }), s && c.addEventListener("coverflow-carousel:change", (o) => {
+      s(c, o.detail);
+    }), e && c.addEventListener("coverflow-carousel:scratch-complete", (o) => {
+      e(c, o.detail);
     });
-  }), s && r.forEach((c) => {
+  }), i && r.forEach((c) => {
     const o = c;
-    typeof s == "string" ? o.adoptStyles(s) : o.adoptStylesheet(s);
+    typeof i == "string" ? o.adoptStyles(i) : o.adoptStylesheet(i);
   }), r;
 }
-function D(a = "coverflow-carousel") {
+function N(a = "coverflow-carousel") {
   typeof window > "u" || !("customElements" in window) || customElements.get(a) || customElements.define(a, p);
 }
 export {
   p as CoverflowCarouselElement,
-  N as coverflowCarouselCssText,
-  F as initCoverflowCarousels,
-  D as registerCoverflowCarouselElement
+  D as coverflowCarouselCssText,
+  M as initCoverflowCarousels,
+  N as registerCoverflowCarouselElement
 };

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(l,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(l=typeof globalThis<"u"?globalThis:l||self,d(l.CoverflowCarousel={}))})(this,(function(l){"use strict";const d=`:host {
+(function(h,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(h=typeof globalThis<"u"?globalThis:h||self,d(h.CoverflowCarousel={}))})(this,(function(h){"use strict";const d=`:host {
   display: block;
   width: 100%;
   height: 100%;
@@ -164,4 +164,4 @@
   white-space: nowrap;
   border: 0;
 }
-`,I=d;function x(a){return"adoptedStyleSheets"in a}function E(a){try{const t=new CSSStyleSheet;return t.replaceSync(a),t}catch{return null}}const C=E(d),_=d;function g(a){return a.split(",").map(t=>t.trim()).filter(Boolean)}function b(a,t){const e=a.trim();if(!e)return t;if(e.endsWith("ms")){const n=Number(e.slice(0,-2).trim());return Number.isFinite(n)?n:t}if(e.endsWith("s")){const n=Number(e.slice(0,-1).trim());return Number.isFinite(n)?n*1e3:t}const i=Number(e);return Number.isFinite(i)?i:t}function k(a,t){const e=g(a.transitionProperty),i=g(a.transitionDuration),n=g(a.transitionDelay);if(!e.length)return 0;const r=(y=>{const u=e.indexOf(y);if(u>=0)return u;const A=e.indexOf("all");return A>=0?A:-1})(t);if(r<0)return 0;const c=i[Math.min(r,i.length-1)]??"0s",o=n[Math.min(r,n.length-1)]??"0s",h=b(c,0),S=b(o,0);return Math.max(0,h+S)}function T(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function p(a,t,e){if(!a.hasAttribute(t))return e;const i=a.getAttribute(t);return i==null||i===""?!0:i!=="false"}function L(a,t,e){const i=a.getAttribute(t);if(i==null)return e;const n=Number(i.trim());return Number.isFinite(n)?Math.trunc(n):e}function w(a,t){const e=a.getAttribute(t);if(e==null)return null;const i=e.trim();return i||null}function m(a,t){return t<=0?0:(a%t+t)%t}function N(a,t,e){const i=t-a,n=e/2;return i>n?i-e:i<-n?i+e:i}const v=1;let F=0;class f extends HTMLElement{static defaultStylesheet=C;static observedAttributes=["start-index","index","show-dots","show-arrows","announce-changes"];shadow=this.attachShadow({mode:"open"});instanceId=`cfc-${++F}`;rootEl;trackEl;dotsEl;prevBtn;nextBtn;liveRegion;styleEl=null;cards=[];dots=[];currentIndex=0;isAnimating=!1;hasAppliedInitialLayout=!1;lastLayoutIndex=null;lastVisibleSet=new Set;pendingAnimToken=0;animFallbackTimerId=null;cleanup=[];reflectGuard=!1;connectedCallback(){this.render(),this.readAttributes({isInit:!0}),this.refresh()}disconnectedCallback(){this.destroy()}attributeChangedCallback(t,e,i){if(!this.isConnected||this.reflectGuard)return;this.readAttributes({isInit:!1});const n=w(this,"index");if(n!=null){const s=m(Number(n),this.cards.length);if(Number.isFinite(s)&&s!==this.currentIndex){this.goTo(s);return}}this.applyLayoutAndA11y({announce:!0,emitChange:!1})}next(){this.goTo(this.currentIndex+1)}prev(){this.goTo(this.currentIndex-1)}goTo(t){if(this.isAnimating)return;const e=m(t,this.cards.length);e!==this.currentIndex&&(this.isAnimating=!0,this.currentIndex=e,this.reflectIndexAttr(),this.applyLayoutAndA11y({announce:!0,emitChange:!0}),this.lockUntilTransitionEnd())}refresh(){this.rebuildCardsFromLightDom();const t=L(this,"start-index",0),e=w(this,"index"),i=e!=null?Number(e):t,n=Number.isFinite(i)?i:0;this.currentIndex=m(n,this.cards.length),this.reflectIndexAttr(),this.buildDots(),this.hasAppliedInitialLayout=!1,this.lastLayoutIndex=null,this.lastVisibleSet=new Set,this.applyLayoutAndA11y({announce:!0,emitChange:!1}),this.dispatchReady()}destroy(){this.animFallbackTimerId!==null&&(window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=null),this.cleanup.forEach(t=>{t()}),this.cleanup=[],this.isAnimating=!1}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}readAttributes(t){this.rootEl||this.render();const e=p(this,"show-arrows",!1),i=p(this,"show-dots",!1);this.prevBtn.style.display=e?"":"none",this.nextBtn.style.display=e?"":"none",this.dotsEl.style.display=i?"":"none";const n=this.getAttribute("aria-label");n&&this.rootEl.setAttribute("aria-label",n),t.isInit&&this.setAttribute("aria-roledescription","carousel")}render(){this.applyStyles(null),this.rootEl=document.createElement("div"),this.rootEl.className="cfc",this.trackEl=document.createElement("div"),this.trackEl.className="cfc__track",this.prevBtn=document.createElement("button"),this.prevBtn.type="button",this.prevBtn.className="cfc__arrow cfc__arrow--left",this.prevBtn.setAttribute("aria-label","Previous"),this.prevBtn.textContent="‹",this.nextBtn=document.createElement("button"),this.nextBtn.type="button",this.nextBtn.className="cfc__arrow cfc__arrow--right",this.nextBtn.setAttribute("aria-label","Next"),this.nextBtn.textContent="›",this.dotsEl=document.createElement("div"),this.dotsEl.className="cfc__dots",this.liveRegion=document.createElement("div"),this.liveRegion.className="cfc__sr",this.liveRegion.setAttribute("aria-live","polite"),this.liveRegion.setAttribute("aria-atomic","true"),this.rootEl.append(this.trackEl,this.prevBtn,this.nextBtn,this.dotsEl,this.liveRegion),this.shadow.innerHTML="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.bindEvents()}bindEvents(){this.cleanup.forEach(s=>{s()}),this.cleanup=[];const t=()=>this.prev(),e=()=>this.next();this.prevBtn.addEventListener("click",t),this.nextBtn.addEventListener("click",e),this.cleanup.push(()=>this.prevBtn.removeEventListener("click",t)),this.cleanup.push(()=>this.nextBtn.removeEventListener("click",e));const i=s=>{if(!this.isAnimating||s.propertyName!=="transform"||!(s.target instanceof HTMLElement))return;const r=this.cards[this.currentIndex];r&&s.target===r&&this.unlockAnimation()};this.rootEl.addEventListener("transitionend",i),this.cleanup.push(()=>this.rootEl.removeEventListener("transitionend",i));const n=s=>{const r=s.target;if(!(r instanceof HTMLElement)||r.tagName!=="SCRATCH-REVEAL")return;const c=s.composedPath?.();if(!c?.length)return;const o=c.find(u=>u instanceof HTMLElement&&u.classList.contains("cfc__card")&&u.dataset.cfcIndex!=null);if(!o)return;const h=Number(o.dataset.cfcIndex);if(!Number.isFinite(h))return;const y=s.detail?.percent??100;this.dispatchEvent(new CustomEvent("coverflow-carousel:scratch-complete",{detail:{index:h,length:this.cards.length,percent:y},bubbles:!0,composed:!0}))};this.rootEl.addEventListener("complete",n),this.cleanup.push(()=>this.rootEl.removeEventListener("complete",n))}rebuildCardsFromLightDom(){const t=Array.from(this.trackEl.children).filter(r=>r instanceof HTMLElement&&r.classList.contains("cfc__card")),e=[];t.forEach(r=>{const c=r.firstElementChild;c instanceof HTMLElement&&e.push(c)});const i=Array.from(this.children).filter(r=>r instanceof HTMLElement),n=[...e,...i],s=[];for(let r=0;r<n.length;r++){const c=n[r],o=t[r]??document.createElement("div");t[r]||(o.className="cfc__card",this.trackEl.append(o)),o.firstElementChild!==c&&o.replaceChildren(c),s.push(o)}for(let r=n.length;r<t.length;r++)t[r]?.remove();this.cards=s,this.hasAppliedInitialLayout=!1,this.lastLayoutIndex=null,this.lastVisibleSet=new Set}getVisibleSet(){const t=this.cards.length,e=new Set;if(t<=0)return e;const i=Math.floor(t/2);if(v>=i){for(let n=0;n<t;n++)e.add(n);return e}for(let n=-v;n<=v;n++)e.add(m(this.currentIndex+n,t));return e}buildDots(){const t=Array.from(this.dotsEl.children).filter(s=>s instanceof HTMLElement&&s.classList.contains("cfc__dot"));if(!p(this,"show-dots",!1)){t.forEach(s=>{s.remove()}),this.dots=[];return}const i=[],n=this.cards.length;for(let s=0;s<n;s++){const r=t[s]??document.createElement("span");t[s]||this.dotsEl.append(r),r.className="cfc__dot",r.setAttribute("aria-hidden","true"),i.push(r)}for(let s=n;s<t.length;s++)t[s]?.remove();this.dots=i,this.updateDotsVisualState()}computeCardState(t){const e=this.cards.length,i=N(this.currentIndex,t,e),n=Math.abs(i);return{index:t,delta:i,abs:n,isVisible:n<=v,isActive:t===this.currentIndex}}applyCardState(t,e){t.setAttribute("aria-hidden",e.isVisible?"false":"true"),t.dataset.active=e.isActive?"true":"false",t.dataset.cfcIndex=String(e.index),t.setAttribute("role","group"),t.setAttribute("aria-roledescription","slide"),t.setAttribute("aria-setsize",String(this.cards.length)),t.setAttribute("aria-posinset",String(e.index+1));const i=`${this.instanceId}-slide-${e.index}`;t.id=i;const n=String(e.delta),s=String(e.abs),r=t.dataset.cfcDelta,c=t.dataset.cfcAbs;r!==n&&(t.style.setProperty("--cfc-delta",n),t.dataset.cfcDelta=n),c!==s&&(t.style.setProperty("--cfc-abs",s),t.dataset.cfcAbs=s)}applyLayoutAndA11y(t){if(this.cards.length){if(this.hasAppliedInitialLayout){const e=this.getVisibleSet(),i=new Set;this.lastVisibleSet.forEach(n=>{i.add(n)}),e.forEach(n=>{i.add(n)}),this.lastLayoutIndex!=null&&i.add(this.lastLayoutIndex),i.add(this.currentIndex),i.forEach(n=>{const s=this.cards[n];if(!s)return;const r=this.computeCardState(n);this.applyCardState(s,r)}),this.lastLayoutIndex=this.currentIndex,this.lastVisibleSet=e}else{for(let e=0;e<this.cards.length;e++){const i=this.cards[e];if(!i)continue;const n=this.computeCardState(e);this.applyCardState(i,n)}this.hasAppliedInitialLayout=!0,this.lastLayoutIndex=this.currentIndex,this.lastVisibleSet=this.getVisibleSet()}this.updateDotsVisualState(),t.announce&&p(this,"announce-changes",!0)&&this.announce(`Slide ${this.currentIndex+1} of ${this.cards.length}`),t.emitChange&&this.emitChange()}}updateDotsVisualState(){if(this.dots.length)for(let t=0;t<this.dots.length;t++){const e=this.dots[t],i=t===this.currentIndex;e.dataset.active=i?"true":"false"}}lockUntilTransitionEnd(){this.pendingAnimToken++;const t=this.pendingAnimToken;if(T()){this.unlockAnimation();return}const e=this.cards[this.currentIndex];if(!e){this.unlockAnimation();return}const i=getComputedStyle(e),n=k(i,"transform");if(n<=0){this.unlockAnimation();return}const s=b(i.getPropertyValue("--cfc-transition-ms").trim(),400),c=Math.max(n,s)+60;this.animFallbackTimerId!==null&&window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=window.setTimeout(()=>{this.pendingAnimToken===t&&this.unlockAnimation()},c)}unlockAnimation(){this.isAnimating=!1,this.animFallbackTimerId!==null&&(window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=null)}emitChange(){this.dispatchEvent(new CustomEvent("coverflow-carousel:change",{detail:{index:this.currentIndex,length:this.cards.length}}))}dispatchReady(){this.dispatchEvent(new CustomEvent("coverflow-carousel:ready",{detail:{index:this.currentIndex,length:this.cards.length}}))}announce(t){this.liveRegion.textContent="",queueMicrotask(()=>{this.liveRegion.textContent=t})}reflectIndexAttr(){this.reflectGuard=!0;try{this.setAttribute("index",String(this.currentIndex))}finally{this.reflectGuard=!1}}applyStyles(t){if(typeof t=="string"){if(x(this.shadow)){const e=E(t);if(e){this.shadow.adoptedStyleSheets=[e],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&x(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(f.defaultStylesheet&&x(this.shadow)){this.shadow.adoptedStyleSheets=[f.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=_}}function D(a={}){const{selector:t="coverflow-carousel",onReady:e,onChange:i,onScratchComplete:n,stylesheet:s}=a,r=Array.from(document.querySelectorAll(t));return(e||i||n)&&r.forEach(c=>{e&&c.addEventListener("coverflow-carousel:ready",o=>{e(c,o.detail)}),i&&c.addEventListener("coverflow-carousel:change",o=>{i(c,o.detail)}),n&&c.addEventListener("coverflow-carousel:scratch-complete",o=>{n(c,o.detail)})}),s&&r.forEach(c=>{const o=c;typeof s=="string"?o.adoptStyles(s):o.adoptStylesheet(s)}),r}function B(a="coverflow-carousel"){typeof window>"u"||!("customElements"in window)||customElements.get(a)||customElements.define(a,f)}l.CoverflowCarouselElement=f,l.coverflowCarouselCssText=I,l.initCoverflowCarousels=D,l.registerCoverflowCarouselElement=B,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+`,I=d;function b(a){return"adoptedStyleSheets"in a}function E(a){try{const t=new CSSStyleSheet;return t.replaceSync(a),t}catch{return null}}const C=E(d),_=d;function g(a){return a.split(",").map(t=>t.trim()).filter(Boolean)}function x(a,t){const n=a.trim();if(!n)return t;if(n.endsWith("ms")){const e=Number(n.slice(0,-2).trim());return Number.isFinite(e)?e:t}if(n.endsWith("s")){const e=Number(n.slice(0,-1).trim());return Number.isFinite(e)?e*1e3:t}const s=Number(n);return Number.isFinite(s)?s:t}function k(a,t){const n=g(a.transitionProperty),s=g(a.transitionDuration),e=g(a.transitionDelay);if(!n.length)return 0;const r=(y=>{const u=n.indexOf(y);if(u>=0)return u;const A=n.indexOf("all");return A>=0?A:-1})(t);if(r<0)return 0;const c=s[Math.min(r,s.length-1)]??"0s",o=e[Math.min(r,e.length-1)]??"0s",l=x(c,0),S=x(o,0);return Math.max(0,l+S)}function L(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function p(a,t,n){if(!a.hasAttribute(t))return n;const s=a.getAttribute(t);return s==null||s===""?!0:s!=="false"}function T(a,t,n){const s=a.getAttribute(t);if(s==null)return n;const e=Number(s.trim());return Number.isFinite(e)?Math.trunc(e):n}function w(a,t){const n=a.getAttribute(t);if(n==null)return null;const s=n.trim();return s||null}function m(a,t){return t<=0?0:(a%t+t)%t}function D(a,t,n){const s=t-a,e=n/2;return s>e?s-n:s<-e?s+n:s}const v=1;let M=0;class f extends HTMLElement{static defaultStylesheet=C;static observedAttributes=["start-index","index","show-dots","show-arrows","announce-changes"];shadow=this.attachShadow({mode:"open"});instanceId=`cfc-${++M}`;rootEl;trackEl;dotsEl;prevBtn;nextBtn;liveRegion;styleEl=null;cards=[];dots=[];currentIndex=0;isAnimating=!1;hasAppliedInitialLayout=!1;lastLayoutIndex=null;lastVisibleSet=new Set;pendingAnimToken=0;animFallbackTimerId=null;cleanup=[];lightDomObserverOptions={childList:!0,attributes:!0,subtree:!0};lightDomObserver=null;refreshScheduled=!1;suppressMutations=!1;reflectGuard=!1;connectedCallback(){this.render(),this.readAttributes({isInit:!0}),this.refresh(),this.setupLightDomObserver()}disconnectedCallback(){this.destroy()}attributeChangedCallback(t,n,s){if(!this.isConnected||this.reflectGuard)return;this.readAttributes({isInit:!1});const e=w(this,"index");if(e!=null){const i=m(Number(e),this.cards.length);if(Number.isFinite(i)&&i!==this.currentIndex){this.goTo(i);return}}this.applyLayoutAndA11y({announce:!0,emitChange:!1})}next(){this.goTo(this.currentIndex+1)}prev(){this.goTo(this.currentIndex-1)}goTo(t){if(this.isAnimating)return;const n=m(t,this.cards.length);n!==this.currentIndex&&(this.isAnimating=!0,this.currentIndex=n,this.reflectIndexAttr(),this.applyLayoutAndA11y({announce:!0,emitChange:!0}),this.lockUntilTransitionEnd())}refresh(){const t=this.lightDomObserver;t&&(this.suppressMutations=!0,t.disconnect(),t.takeRecords()),this.rebuildCardsFromLightDom();const n=T(this,"start-index",0),s=w(this,"index"),e=s!=null?Number(s):n,i=Number.isFinite(e)?e:0;this.currentIndex=m(i,this.cards.length),this.reflectIndexAttr(),this.buildDots(),this.hasAppliedInitialLayout=!1,this.lastLayoutIndex=null,this.lastVisibleSet=new Set,this.applyLayoutAndA11y({announce:!0,emitChange:!1}),this.dispatchReady(),t&&(t.observe(this,this.lightDomObserverOptions),t.takeRecords(),this.suppressMutations=!1)}destroy(){this.animFallbackTimerId!==null&&(window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=null),this.cleanup.forEach(t=>{t()}),this.cleanup=[],this.isAnimating=!1}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}readAttributes(t){this.rootEl||this.render();const n=p(this,"show-arrows",!1),s=p(this,"show-dots",!1);this.prevBtn.style.display=n?"":"none",this.nextBtn.style.display=n?"":"none",this.dotsEl.style.display=s?"":"none";const e=this.getAttribute("aria-label");e&&this.rootEl.setAttribute("aria-label",e),t.isInit&&this.setAttribute("aria-roledescription","carousel")}render(){this.applyStyles(null),this.rootEl=document.createElement("div"),this.rootEl.className="cfc",this.trackEl=document.createElement("div"),this.trackEl.className="cfc__track",this.prevBtn=document.createElement("button"),this.prevBtn.type="button",this.prevBtn.className="cfc__arrow cfc__arrow--left",this.prevBtn.setAttribute("aria-label","Previous"),this.prevBtn.textContent="‹",this.nextBtn=document.createElement("button"),this.nextBtn.type="button",this.nextBtn.className="cfc__arrow cfc__arrow--right",this.nextBtn.setAttribute("aria-label","Next"),this.nextBtn.textContent="›",this.dotsEl=document.createElement("div"),this.dotsEl.className="cfc__dots",this.liveRegion=document.createElement("div"),this.liveRegion.className="cfc__sr",this.liveRegion.setAttribute("aria-live","polite"),this.liveRegion.setAttribute("aria-atomic","true"),this.rootEl.append(this.trackEl,this.prevBtn,this.nextBtn,this.dotsEl,this.liveRegion),this.shadow.innerHTML="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.bindEvents()}bindEvents(){this.cleanup.forEach(i=>{i()}),this.cleanup=[];const t=()=>this.prev(),n=()=>this.next();this.prevBtn.addEventListener("click",t),this.nextBtn.addEventListener("click",n),this.cleanup.push(()=>this.prevBtn.removeEventListener("click",t)),this.cleanup.push(()=>this.nextBtn.removeEventListener("click",n));const s=i=>{if(!this.isAnimating||i.propertyName!=="transform"||!(i.target instanceof HTMLElement))return;const r=this.cards[this.currentIndex];r&&i.target===r&&this.unlockAnimation()};this.rootEl.addEventListener("transitionend",s),this.cleanup.push(()=>this.rootEl.removeEventListener("transitionend",s));const e=i=>{const r=i.target;if(!(r instanceof HTMLElement)||r.tagName!=="SCRATCH-REVEAL")return;const c=i.composedPath?.();if(!c?.length)return;const o=c.find(u=>u instanceof HTMLElement&&u.classList.contains("cfc__card")&&u.dataset.cfcIndex!=null);if(!o)return;const l=Number(o.dataset.cfcIndex);if(!Number.isFinite(l))return;const y=i.detail?.percent??100;this.dispatchEvent(new CustomEvent("coverflow-carousel:scratch-complete",{detail:{index:l,length:this.cards.length,percent:y},bubbles:!0,composed:!0}))};this.rootEl.addEventListener("complete",e),this.cleanup.push(()=>this.rootEl.removeEventListener("complete",e))}setupLightDomObserver(){this.lightDomObserver||(this.lightDomObserver=new MutationObserver(t=>{this.suppressMutations||!t.some(s=>!(s.type==="attributes"&&s.attributeName==="slot"))||this.scheduleRefreshFromMutations()}),this.lightDomObserver.observe(this,{...this.lightDomObserverOptions}),this.cleanup.push(()=>{this.lightDomObserver?.disconnect(),this.lightDomObserver=null}))}scheduleRefreshFromMutations(){this.refreshScheduled||(this.refreshScheduled=!0,queueMicrotask(()=>{this.refreshScheduled=!1,this.isConnected&&this.refresh()}))}rebuildCardsFromLightDom(){const t=Array.from(this.trackEl.children).filter(e=>e instanceof HTMLElement&&e.classList.contains("cfc__card")),n=[],s=Array.from(this.children).filter(e=>e instanceof HTMLElement);for(let e=0;e<s.length;e++){const i=s[e],r=t[e]??document.createElement("div"),c=`${this.instanceId}-slot-${e}`;t[e]||(r.className="cfc__card",this.trackEl.append(r)),i.getAttribute("slot")!==c&&i.setAttribute("slot",c);const o=r.querySelector("slot");let l;o instanceof HTMLSlotElement?l=o:(l=document.createElement("slot"),r.replaceChildren(l)),l.name!==c&&(l.name=c),n.push(r)}for(let e=s.length;e<t.length;e++)t[e]?.remove();this.cards=n,this.hasAppliedInitialLayout=!1,this.lastLayoutIndex=null,this.lastVisibleSet=new Set}getVisibleSet(){const t=this.cards.length,n=new Set;if(t<=0)return n;const s=Math.floor(t/2);if(v>=s){for(let e=0;e<t;e++)n.add(e);return n}for(let e=-v;e<=v;e++)n.add(m(this.currentIndex+e,t));return n}buildDots(){const t=Array.from(this.dotsEl.children).filter(i=>i instanceof HTMLElement&&i.classList.contains("cfc__dot"));if(!p(this,"show-dots",!1)){t.forEach(i=>{i.remove()}),this.dots=[];return}const s=[],e=this.cards.length;for(let i=0;i<e;i++){const r=t[i]??document.createElement("span");t[i]||this.dotsEl.append(r),r.className="cfc__dot",r.setAttribute("aria-hidden","true"),s.push(r)}for(let i=e;i<t.length;i++)t[i]?.remove();this.dots=s,this.updateDotsVisualState()}computeCardState(t){const n=this.cards.length,s=D(this.currentIndex,t,n),e=Math.abs(s);return{index:t,delta:s,abs:e,isVisible:e<=v,isActive:t===this.currentIndex}}applyCardState(t,n){t.setAttribute("aria-hidden",n.isVisible?"false":"true"),t.dataset.active=n.isActive?"true":"false",t.dataset.cfcIndex=String(n.index),t.setAttribute("role","group"),t.setAttribute("aria-roledescription","slide"),t.setAttribute("aria-setsize",String(this.cards.length)),t.setAttribute("aria-posinset",String(n.index+1));const s=`${this.instanceId}-slide-${n.index}`;t.id=s;const e=String(n.delta),i=String(n.abs),r=t.dataset.cfcDelta,c=t.dataset.cfcAbs;r!==e&&(t.style.setProperty("--cfc-delta",e),t.dataset.cfcDelta=e),c!==i&&(t.style.setProperty("--cfc-abs",i),t.dataset.cfcAbs=i)}applyLayoutAndA11y(t){if(this.cards.length){if(this.hasAppliedInitialLayout){const n=this.getVisibleSet(),s=new Set;this.lastVisibleSet.forEach(e=>{s.add(e)}),n.forEach(e=>{s.add(e)}),this.lastLayoutIndex!=null&&s.add(this.lastLayoutIndex),s.add(this.currentIndex),s.forEach(e=>{const i=this.cards[e];if(!i)return;const r=this.computeCardState(e);this.applyCardState(i,r)}),this.lastLayoutIndex=this.currentIndex,this.lastVisibleSet=n}else{for(let n=0;n<this.cards.length;n++){const s=this.cards[n];if(!s)continue;const e=this.computeCardState(n);this.applyCardState(s,e)}this.hasAppliedInitialLayout=!0,this.lastLayoutIndex=this.currentIndex,this.lastVisibleSet=this.getVisibleSet()}this.updateDotsVisualState(),t.announce&&p(this,"announce-changes",!0)&&this.announce(`Slide ${this.currentIndex+1} of ${this.cards.length}`),t.emitChange&&this.emitChange()}}updateDotsVisualState(){if(this.dots.length)for(let t=0;t<this.dots.length;t++){const n=this.dots[t],s=t===this.currentIndex;n.dataset.active=s?"true":"false"}}lockUntilTransitionEnd(){this.pendingAnimToken++;const t=this.pendingAnimToken;if(L()){this.unlockAnimation();return}const n=this.cards[this.currentIndex];if(!n){this.unlockAnimation();return}const s=getComputedStyle(n),e=k(s,"transform");if(e<=0){this.unlockAnimation();return}const i=x(s.getPropertyValue("--cfc-transition-ms").trim(),400),c=Math.max(e,i)+60;this.animFallbackTimerId!==null&&window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=window.setTimeout(()=>{this.pendingAnimToken===t&&this.unlockAnimation()},c)}unlockAnimation(){this.isAnimating=!1,this.animFallbackTimerId!==null&&(window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=null)}emitChange(){this.dispatchEvent(new CustomEvent("coverflow-carousel:change",{detail:{index:this.currentIndex,length:this.cards.length}}))}dispatchReady(){this.dispatchEvent(new CustomEvent("coverflow-carousel:ready",{detail:{index:this.currentIndex,length:this.cards.length}}))}announce(t){this.liveRegion.textContent="",queueMicrotask(()=>{this.liveRegion.textContent=t})}reflectIndexAttr(){this.reflectGuard=!0;try{this.setAttribute("index",String(this.currentIndex))}finally{this.reflectGuard=!1}}applyStyles(t){if(typeof t=="string"){if(b(this.shadow)){const n=E(t);if(n){this.shadow.adoptedStyleSheets=[n],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&b(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(f.defaultStylesheet&&b(this.shadow)){this.shadow.adoptedStyleSheets=[f.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=_}}function N(a={}){const{selector:t="coverflow-carousel",onReady:n,onChange:s,onScratchComplete:e,stylesheet:i}=a,r=Array.from(document.querySelectorAll(t));return(n||s||e)&&r.forEach(c=>{n&&c.addEventListener("coverflow-carousel:ready",o=>{n(c,o.detail)}),s&&c.addEventListener("coverflow-carousel:change",o=>{s(c,o.detail)}),e&&c.addEventListener("coverflow-carousel:scratch-complete",o=>{e(c,o.detail)})}),i&&r.forEach(c=>{const o=c;typeof i=="string"?o.adoptStyles(i):o.adoptStylesheet(i)}),r}function F(a="coverflow-carousel"){typeof window>"u"||!("customElements"in window)||customElements.get(a)||customElements.define(a,f)}h.CoverflowCarouselElement=f,h.coverflowCarouselCssText=I,h.initCoverflowCarousels=N,h.registerCoverflowCarouselElement=F,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coverflow-carousel",
-  "version": "0.2.0-dev.0",
+  "version": "0.2.0-dev.2",
   "description": "Tiny coverflow carousel Web Component. Exposes API via attributes + events (explicit element registration).",
   "author": "ux-ui.pro",
   "license": "MIT",