coverflow-carousel 0.2.0 → 0.3.0

package/README.md

@@ -49,7 +49,6 @@ registerCoverflowCarouselElement();
 import {
   registerCoverflowCarouselElement,
   initCoverflowCarousels,
-  coverflowCarouselCssText,
 } from 'coverflow-carousel';
 
 registerCoverflowCarouselElement();
@@ -73,34 +72,38 @@ initCoverflowCarousels({
     else if (detail.index === 1) (el as any).goTo?.(2);
     else if (detail.index === 2) console.log('final');
   },
-  // Optional styles:
-  // - CSSStyleSheet (constructable stylesheet)
-  // - string (e.g. imported via ?raw)
-  // stylesheet: coverflowCarouselCssText,
-  //
-  // Optional overrides (applied on top of the base stylesheet):
-  // styleOverrides: `
-  //   .cfc { --cfc-card-ar-num: 1.6; }
-  //   .cfc__arrow { background: Black; }
-  // `,
 });
 ```
 
-<sub>JS: custom styles from `?raw` (CSS/SCSS)</sub>
+<sub>Recommended: single overrides file (`?raw`) — variables + rules in one place</sub>
 ```javascript
 import { registerCoverflowCarouselElement, initCoverflowCarousels } from 'coverflow-carousel';
-import MyCfcCss from './assets/cfc.custom.css?raw';
-import MyCfcOverrides from './assets/cfc.overrides.css?raw';
+import CfcOverrides from './assets/cfc.overrides.css?raw';
 
 registerCoverflowCarouselElement();
 
 initCoverflowCarousels({
-  stylesheet: MyCfcCss,
-  styleOverrides: MyCfcOverrides,
+  styleOverrides: CfcOverrides,
 });
 ```
 
-<sub>JS: default styles shipped with the package</sub>
+<sub>`cfc.overrides.css` example</sub>
+```css
+:host {
+  /* CSS variables (override defaults) */
+  --cfc-card-ar-num: 1.6;
+}
+
+/* Example rule: only active slide is interactive */
+.cfc__card slot::slotted(*) {
+  pointer-events: none;
+}
+.cfc__card[data-active="true"] slot::slotted(*) {
+  pointer-events: auto;
+}
+```
+
+<sub>Advanced: replace base styles completely</sub>
 ```javascript
 import {
   registerCoverflowCarouselElement,
@@ -115,13 +118,6 @@ initCoverflowCarousels({
 });
 ```
 
-<sub>CSS: override CSS variables (recommended for simple tweaks)</sub>
-```css
-coverflow-carousel {
-  --cfc-card-ar-num: 1.6;
-}
-```
-
 <sub>JS: manual control (prev/next/goTo/refresh)</sub>
 ```javascript
 import { registerCoverflowCarouselElement } from 'coverflow-carousel';
@@ -147,7 +143,6 @@ el?.refresh();
 |      `index`       | `number`  |    —    | Current index. If you update it externally, the carousel will animate to it. The component also reflects the current value back into `index`.  |
 |    `show-dots`     | `boolean` | `false` | Shows pagination dots (decorative, non-interactive).                                                                                           |
 |   `show-arrows`    | `boolean` | `false` | Shows Prev/Next arrows.                                                                                                                        |
-| `announce-changes` | `boolean` | `true`  | Enables slide-change announcements via live-region (a11y).                                                                                     |
 
 <br>
 

package/dist/coverflow-carousel.css

@@ -1 +1 @@
-:host{--cfc-card-ar-num:1.25;--cfc-card-w:clamp(160px,100vw - 120px,380px);--cfc-card-ar:1/var(--cfc-card-ar-num);--cfc-step-x:min(22vw,250px);--cfc-step-z:calc(var(--cfc-card-w)*.5);--cfc-scale-step:.1;--cfc-transition-ms:.55s;--cfc-easing:cubic-bezier(.785,.135,.15,.86);--cfc-arrow-size:50px;--cfc-park-x:0px;--cfc-park-z:calc(var(--cfc-step-z)*-6);--cfc-park-scale:.1;width:100%;height:100%;display:block;overflow:hidden;container-type:inline-size}.cfc{perspective:1000px;width:min(900px,100%);height:100%;margin:auto;position:relative}.cfc__track{width:100%;height:calc(var(--cfc-card-w)*var(--cfc-card-ar-num));transform-style:preserve-3d;position:relative}.cfc__card{--cfc-delta:0;--cfc-abs:0;--cfc-scale:clamp(.1,calc(1 - (var(--cfc-abs)*var(--cfc-scale-step))),1);--cfc-x:calc(var(--cfc-step-x)*var(--cfc-delta));--cfc-z:calc(var(--cfc-step-z)*-1*var(--cfc-abs));--cfc-zIndex:calc(100 - var(--cfc-abs));--cfc-scale-effective:var(--cfc-scale);--cfc-x-effective:var(--cfc-x);--cfc-z-effective:var(--cfc-z);pointer-events:auto;width:var(--cfc-card-w);aspect-ratio:var(--cfc-card-ar);z-index:var(--cfc-zIndex);transform-style:preserve-3d;transform:translate(-50%,-50%)translate3d(var(--cfc-x-effective),0px,var(--cfc-z-effective))scale(var(--cfc-scale-effective));transition:transform var(--cfc-transition-ms)var(--cfc-easing);position:absolute;inset:50% 0 0 50%;overflow:hidden}.cfc__card[aria-hidden=false]{will-change:transform}.cfc__card[aria-hidden=true]{--cfc-x-effective:var(--cfc-park-x);--cfc-z-effective:var(--cfc-park-z);--cfc-scale-effective:var(--cfc-park-scale);pointer-events:none}.cfc__card[data-active=true]{--cfc-scale-effective:1}.cfc__card ::slotted(img),.cfc__card img{object-fit:cover;object-position:center;width:100%;height:100%;display:block}.cfc__arrow{top:calc(50% - var(--cfc-arrow-size));width:var(--cfc-arrow-size);height:var(--cfc-arrow-size);cursor:pointer;z-index:50;background:#dc143c;border:none;transition:background .25s;position:absolute}.cfc__arrow:hover{background:#d3d3d3}.cfc__arrow--left{left:20px}.cfc__arrow--right{right:20px}.cfc__dots{justify-content:center;align-items:center;gap:10px;height:50px;display:flex}.cfc__dot{cursor:default;background:#d3d3d3;border-radius:50%;width:10px;height:10px;transition:transform .25s,background .25s}.cfc__dot[data-active=true]{background:#dc143c;transform:scale(1.2)}.cfc__sr{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
+:host{--cfc-card-ar-num:1.25;--cfc-card-w:clamp(160px,100vw - 120px,380px);--cfc-card-ar:1/var(--cfc-card-ar-num);--cfc-step-x:min(22vw,250px);--cfc-step-z:calc(var(--cfc-card-w)*.5);--cfc-scale-step:.1;--cfc-transition-ms:.55s;--cfc-easing:cubic-bezier(.785,.135,.15,.86);--cfc-arrow-size:50px;--cfc-park-x:0px;--cfc-park-z:calc(var(--cfc-step-z)*-6);--cfc-park-scale:.1;width:100%;height:100%;display:block;overflow:hidden;container-type:inline-size}.cfc{perspective:1000px;width:min(900px,100%);height:100%;margin:auto;position:relative}.cfc__track{width:100%;height:calc(var(--cfc-card-w)*var(--cfc-card-ar-num));transform-style:preserve-3d;position:relative}.cfc__card{--cfc-delta:0;--cfc-abs:0;--cfc-scale:clamp(.1,calc(1 - (var(--cfc-abs)*var(--cfc-scale-step))),1);--cfc-x:calc(var(--cfc-step-x)*var(--cfc-delta));--cfc-z:calc(var(--cfc-step-z)*-1*var(--cfc-abs));--cfc-zIndex:calc(100 - var(--cfc-abs));--cfc-scale-effective:var(--cfc-scale);--cfc-x-effective:var(--cfc-x);--cfc-z-effective:var(--cfc-z);pointer-events:auto;width:var(--cfc-card-w);aspect-ratio:var(--cfc-card-ar);z-index:var(--cfc-zIndex);transform-style:preserve-3d;transform:translate(-50%,-50%)translate3d(var(--cfc-x-effective),0px,var(--cfc-z-effective))scale(var(--cfc-scale-effective));transition:transform var(--cfc-transition-ms)var(--cfc-easing);position:absolute;inset:50% 0 0 50%;overflow:hidden}.cfc__card[aria-hidden=false]{will-change:transform}.cfc__card[aria-hidden=true]{--cfc-x-effective:var(--cfc-park-x);--cfc-z-effective:var(--cfc-park-z);--cfc-scale-effective:var(--cfc-park-scale);pointer-events:none}.cfc__card[data-active=true]{--cfc-scale-effective:1}.cfc__card ::slotted(img),.cfc__card img{object-fit:cover;object-position:center;width:100%;height:100%;display:block}.cfc__arrow{top:calc(50% - var(--cfc-arrow-size));width:var(--cfc-arrow-size);height:var(--cfc-arrow-size);cursor:pointer;z-index:50;background:#dc143c;border:none;transition:background .25s;position:absolute}.cfc__arrow:hover{background:#d3d3d3}.cfc__arrow--left{left:20px}.cfc__arrow--right{right:20px}.cfc__dots{justify-content:center;align-items:center;gap:10px;height:50px;display:flex}.cfc__dot{cursor:default;background:#d3d3d3;border-radius:50%;width:10px;height:10px;transition:transform .25s,background .25s}.cfc__dot[data-active=true]{background:#dc143c;transform:scale(1.2)}

package/dist/element/CoverflowCarouselElement.d.ts

@@ -9,7 +9,6 @@ export declare class CoverflowCarouselElement extends HTMLElement {
     private dotsEl;
     private prevBtn;
     private nextBtn;
-    private liveRegion;
     private baseStyles;
     private overrideStyles;
     private baseStyleEl;
@@ -56,7 +55,6 @@ export declare class CoverflowCarouselElement extends HTMLElement {
     private unlockAnimation;
     private emitChange;
     private dispatchReady;
-    private announce;
     private reflectIndexAttr;
     private setBaseStyles;
     private setOverrideStyles;

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=`:host {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=`:host {
   display: block;
   width: 100%;
   height: 100%;
@@ -151,17 +151,4 @@
   background: Crimson;
   transform: scale(1.2);
 }
-
-/* SR-only */
-.cfc__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-`,A=x;function E(a){return"adoptedStyleSheets"in a}function y(a){try{const t=new CSSStyleSheet;return t.replaceSync(a),t}catch{return null}}const I=y(x),k=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=(v=>{const h=n.indexOf(v);if(h>=0)return h;const S=n.indexOf("all");return S>=0?S:-1})(t);if(r<0)return 0;const o=s[Math.min(r,s.length-1)]??"0s",l=e[Math.min(r,e.length-1)]??"0s",c=g(o,0),d=g(l,0);return Math.max(0,c+d)}function _(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function f(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 p(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 m=1;let D=0;class u 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;baseStyles=null;overrideStyles=null;baseStyleEl=null;overrideStyleEl=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=p(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=p(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=p(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.setBaseStyles(t)}adoptStyles(t){this.setBaseStyles(t)}adoptStyleOverrides(t){this.setOverrideStyles(t)}readAttributes(t){this.rootEl||this.render();const n=f(this,"show-arrows",!1),s=f(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.applyAllStyles(),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.baseStyleEl&&this.shadow.append(this.baseStyleEl),this.overrideStyleEl&&this.shadow.append(this.overrideStyleEl),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 o=i.composedPath?.();if(!o?.length)return;const l=o.find(h=>h instanceof HTMLElement&&h.classList.contains("cfc__card")&&h.dataset.cfcIndex!=null);if(!l)return;const c=Number(l.dataset.cfcIndex);if(!Number.isFinite(c))return;const v=i.detail?.percent??100;this.dispatchEvent(new CustomEvent("coverflow-carousel:scratch-complete",{detail:{index:c,length:this.cards.length,percent:v},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"),o=`${this.instanceId}-slot-${e}`;t[e]||(r.className="cfc__card",this.trackEl.append(r)),i.getAttribute("slot")!==o&&i.setAttribute("slot",o);const l=r.querySelector("slot");let c;l instanceof HTMLSlotElement?c=l:(c=document.createElement("slot"),r.replaceChildren(c)),c.name!==o&&(c.name=o),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(m>=s){for(let e=0;e<t;e++)n.add(e);return n}for(let e=-m;e<=m;e++)n.add(p(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(!f(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<=m,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,o=t.dataset.cfcAbs;r!==e&&(t.style.setProperty("--cfc-delta",e),t.dataset.cfcDelta=e),o!==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&&f(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(_()){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),o=Math.max(e,i)+60;this.animFallbackTimerId!==null&&window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=window.setTimeout(()=>{this.pendingAnimToken===t&&this.unlockAnimation()},o)}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}}setBaseStyles(t){this.baseStyles=t??null,this.applyAllStyles()}setOverrideStyles(t){this.overrideStyles=t??null,this.applyAllStyles()}applyAllStyles(){const t=this.baseStyles,n=this.overrideStyles;if(E(this.shadow)){const e=[];if(typeof t=="string"){const i=y(t);if(!i){this.applyAllStylesFallback();return}e.push(i)}else if(t)e.push(t);else if(u.defaultStylesheet)e.push(u.defaultStylesheet);else{this.applyAllStylesFallback();return}if(typeof n=="string"){const i=y(n);if(!i){this.applyAllStylesFallback();return}e.push(i)}else n&&e.push(n);this.shadow.adoptedStyleSheets=e,this.baseStyleEl?.remove(),this.overrideStyleEl?.remove(),this.baseStyleEl=null,this.overrideStyleEl=null;return}this.applyAllStylesFallback()}applyAllStylesFallback(){const t=this.baseStyles,n=this.overrideStyles;E(this.shadow)&&(this.shadow.adoptedStyleSheets=[]);const s=typeof t=="string"?t:k,e=typeof n=="string"?n:"";this.baseStyleEl||(this.baseStyleEl=document.createElement("style")),this.baseStyleEl.textContent=s,e?(this.overrideStyleEl||(this.overrideStyleEl=document.createElement("style")),this.overrideStyleEl.textContent=e):(this.overrideStyleEl?.remove(),this.overrideStyleEl=null)}}function F(a={}){const{selector:t="coverflow-carousel",onReady:n,onChange:s,onScratchComplete:e,stylesheet:i,styleOverrides:r}=a,o=Array.from(document.querySelectorAll(t));return(n||s||e)&&o.forEach(l=>{n&&l.addEventListener("coverflow-carousel:ready",c=>{n(l,c.detail)}),s&&l.addEventListener("coverflow-carousel:change",c=>{s(l,c.detail)}),e&&l.addEventListener("coverflow-carousel:scratch-complete",c=>{e(l,c.detail)})}),i&&o.forEach(l=>{const c=l;typeof i=="string"?c.adoptStyles(i):c.adoptStylesheet(i)}),r&&o.forEach(l=>{l.adoptStyleOverrides(r)}),o}function M(a="coverflow-carousel"){typeof window>"u"||!("customElements"in window)||customElements.get(a)||customElements.define(a,u)}exports.CoverflowCarouselElement=u;exports.coverflowCarouselCssText=A;exports.initCoverflowCarousels=F;exports.registerCoverflowCarouselElement=M;
+`,A=S;function E(a){return"adoptedStyleSheets"in a}function y(a){try{const t=new CSSStyleSheet;return t.replaceSync(a),t}catch{return null}}const I=y(S),k=S;function v(a){return a.split(",").map(t=>t.trim()).filter(Boolean)}function g(a,t){const s=a.trim();if(!s)return t;if(s.endsWith("ms")){const e=Number(s.slice(0,-2).trim());return Number.isFinite(e)?e:t}if(s.endsWith("s")){const e=Number(s.slice(0,-1).trim());return Number.isFinite(e)?e*1e3:t}const n=Number(s);return Number.isFinite(n)?n:t}function C(a,t){const s=v(a.transitionProperty),n=v(a.transitionDuration),e=v(a.transitionDelay);if(!s.length)return 0;const r=(m=>{const h=s.indexOf(m);if(h>=0)return h;const x=s.indexOf("all");return x>=0?x:-1})(t);if(r<0)return 0;const o=n[Math.min(r,n.length-1)]??"0s",l=e[Math.min(r,e.length-1)]??"0s",c=g(o,0),d=g(l,0);return Math.max(0,c+d)}function _(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function b(a,t,s){if(!a.hasAttribute(t))return s;const n=a.getAttribute(t);return n==null||n===""?!0:n!=="false"}function L(a,t,s){const n=a.getAttribute(t);if(n==null)return s;const e=Number(n.trim());return Number.isFinite(e)?Math.trunc(e):s}function w(a,t){const s=a.getAttribute(t);if(s==null)return null;const n=s.trim();return n||null}function f(a,t){return t<=0?0:(a%t+t)%t}function T(a,t,s){const n=t-a,e=s/2;return n>e?n-s:n<-e?n+s:n}const p=1;let D=0;class u extends HTMLElement{static defaultStylesheet=I;static observedAttributes=["start-index","index","show-dots","show-arrows"];shadow=this.attachShadow({mode:"open"});instanceId=`cfc-${++D}`;rootEl;trackEl;dotsEl;prevBtn;nextBtn;baseStyles=null;overrideStyles=null;baseStyleEl=null;overrideStyleEl=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,s,n){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({emitChange:!1})}next(){this.goTo(this.currentIndex+1)}prev(){this.goTo(this.currentIndex-1)}goTo(t){if(this.isAnimating)return;const s=f(t,this.cards.length);s!==this.currentIndex&&(this.isAnimating=!0,this.currentIndex=s,this.reflectIndexAttr(),this.applyLayoutAndA11y({emitChange:!0}),this.lockUntilTransitionEnd())}refresh(){const t=this.lightDomObserver;t&&(this.suppressMutations=!0,t.disconnect(),t.takeRecords()),this.rebuildCardsFromLightDom();const s=L(this,"start-index",0),n=w(this,"index"),e=n!=null?Number(n):s,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({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.setBaseStyles(t)}adoptStyles(t){this.setBaseStyles(t)}adoptStyleOverrides(t){this.setOverrideStyles(t)}readAttributes(t){this.rootEl||this.render();const s=b(this,"show-arrows",!1),n=b(this,"show-dots",!1);this.prevBtn.style.display=s?"":"none",this.nextBtn.style.display=s?"":"none",this.dotsEl.style.display=n?"":"none";const e=this.getAttribute("aria-label");e&&this.rootEl.setAttribute("aria-label",e),t.isInit&&this.setAttribute("aria-roledescription","carousel")}render(){this.applyAllStyles(),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.rootEl.append(this.trackEl,this.prevBtn,this.nextBtn,this.dotsEl),this.shadow.innerHTML="",this.baseStyleEl&&this.shadow.append(this.baseStyleEl),this.overrideStyleEl&&this.shadow.append(this.overrideStyleEl),this.shadow.append(this.rootEl),this.bindEvents()}bindEvents(){this.cleanup.forEach(i=>{i()}),this.cleanup=[];const t=()=>this.prev(),s=()=>this.next();this.prevBtn.addEventListener("click",t),this.nextBtn.addEventListener("click",s),this.cleanup.push(()=>this.prevBtn.removeEventListener("click",t)),this.cleanup.push(()=>this.nextBtn.removeEventListener("click",s));const n=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",n),this.cleanup.push(()=>this.rootEl.removeEventListener("transitionend",n));const e=i=>{const r=i.target;if(!(r instanceof HTMLElement)||r.tagName!=="SCRATCH-REVEAL")return;const o=i.composedPath?.();if(!o?.length)return;const l=o.find(h=>h instanceof HTMLElement&&h.classList.contains("cfc__card")&&h.dataset.cfcIndex!=null);if(!l)return;const c=Number(l.dataset.cfcIndex);if(!Number.isFinite(c))return;const m=i.detail?.percent??100;this.dispatchEvent(new CustomEvent("coverflow-carousel:scratch-complete",{detail:{index:c,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(n=>!(n.type==="attributes"&&n.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")),s=[],n=Array.from(this.children).filter(e=>e instanceof HTMLElement);for(let e=0;e<n.length;e++){const i=n[e],r=t[e]??document.createElement("div"),o=`${this.instanceId}-slot-${e}`;t[e]||(r.className="cfc__card",this.trackEl.append(r)),i.getAttribute("slot")!==o&&i.setAttribute("slot",o);const l=r.querySelector("slot");let c;l instanceof HTMLSlotElement?c=l:(c=document.createElement("slot"),r.replaceChildren(c)),c.name!==o&&(c.name=o),s.push(r)}for(let e=n.length;e<t.length;e++)t[e]?.remove();this.cards=s,this.hasAppliedInitialLayout=!1,this.lastLayoutIndex=null,this.lastVisibleSet=new Set}getVisibleSet(){const t=this.cards.length,s=new Set;if(t<=0)return s;const n=Math.floor(t/2);if(p>=n){for(let e=0;e<t;e++)s.add(e);return s}for(let e=-p;e<=p;e++)s.add(f(this.currentIndex+e,t));return s}buildDots(){const t=Array.from(this.dotsEl.children).filter(i=>i instanceof HTMLElement&&i.classList.contains("cfc__dot"));if(!b(this,"show-dots",!1)){t.forEach(i=>{i.remove()}),this.dots=[];return}const n=[],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"),n.push(r)}for(let i=e;i<t.length;i++)t[i]?.remove();this.dots=n,this.updateDotsVisualState()}computeCardState(t){const s=this.cards.length,n=T(this.currentIndex,t,s),e=Math.abs(n);return{index:t,delta:n,abs:e,isVisible:e<=p,isActive:t===this.currentIndex}}applyCardState(t,s){t.setAttribute("aria-hidden",s.isVisible?"false":"true"),t.dataset.active=s.isActive?"true":"false",t.dataset.cfcIndex=String(s.index),t.setAttribute("role","group"),t.setAttribute("aria-roledescription","slide"),t.setAttribute("aria-setsize",String(this.cards.length)),t.setAttribute("aria-posinset",String(s.index+1));const n=`${this.instanceId}-slide-${s.index}`;t.id=n;const e=String(s.delta),i=String(s.abs),r=t.dataset.cfcDelta,o=t.dataset.cfcAbs;r!==e&&(t.style.setProperty("--cfc-delta",e),t.dataset.cfcDelta=e),o!==i&&(t.style.setProperty("--cfc-abs",i),t.dataset.cfcAbs=i)}applyLayoutAndA11y(t){if(this.cards.length){if(this.hasAppliedInitialLayout){const s=this.getVisibleSet(),n=new Set;this.lastVisibleSet.forEach(e=>{n.add(e)}),s.forEach(e=>{n.add(e)}),this.lastLayoutIndex!=null&&n.add(this.lastLayoutIndex),n.add(this.currentIndex),n.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=s}else{for(let s=0;s<this.cards.length;s++){const n=this.cards[s];if(!n)continue;const e=this.computeCardState(s);this.applyCardState(n,e)}this.hasAppliedInitialLayout=!0,this.lastLayoutIndex=this.currentIndex,this.lastVisibleSet=this.getVisibleSet()}this.updateDotsVisualState(),t.emitChange&&this.emitChange()}}updateDotsVisualState(){if(this.dots.length)for(let t=0;t<this.dots.length;t++){const s=this.dots[t],n=t===this.currentIndex;s.dataset.active=n?"true":"false"}}lockUntilTransitionEnd(){this.pendingAnimToken++;const t=this.pendingAnimToken;if(_()){this.unlockAnimation();return}const s=this.cards[this.currentIndex];if(!s){this.unlockAnimation();return}const n=getComputedStyle(s),e=C(n,"transform");if(e<=0){this.unlockAnimation();return}const i=g(n.getPropertyValue("--cfc-transition-ms").trim(),400),o=Math.max(e,i)+60;this.animFallbackTimerId!==null&&window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=window.setTimeout(()=>{this.pendingAnimToken===t&&this.unlockAnimation()},o)}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}}))}reflectIndexAttr(){this.reflectGuard=!0;try{this.setAttribute("index",String(this.currentIndex))}finally{this.reflectGuard=!1}}setBaseStyles(t){this.baseStyles=t??null,this.applyAllStyles()}setOverrideStyles(t){this.overrideStyles=t??null,this.applyAllStyles()}applyAllStyles(){const t=this.baseStyles,s=this.overrideStyles;if(E(this.shadow)){const e=[];if(typeof t=="string"){const i=y(t);if(!i){this.applyAllStylesFallback();return}e.push(i)}else if(t)e.push(t);else if(u.defaultStylesheet)e.push(u.defaultStylesheet);else{this.applyAllStylesFallback();return}if(typeof s=="string"){const i=y(s);if(!i){this.applyAllStylesFallback();return}e.push(i)}else s&&e.push(s);this.shadow.adoptedStyleSheets=e,this.baseStyleEl?.remove(),this.overrideStyleEl?.remove(),this.baseStyleEl=null,this.overrideStyleEl=null;return}this.applyAllStylesFallback()}applyAllStylesFallback(){const t=this.baseStyles,s=this.overrideStyles;E(this.shadow)&&(this.shadow.adoptedStyleSheets=[]);const n=typeof t=="string"?t:k,e=typeof s=="string"?s:"";this.baseStyleEl||(this.baseStyleEl=document.createElement("style")),this.baseStyleEl.textContent=n,e?(this.overrideStyleEl||(this.overrideStyleEl=document.createElement("style")),this.overrideStyleEl.textContent=e):(this.overrideStyleEl?.remove(),this.overrideStyleEl=null)}}function F(a={}){const{selector:t="coverflow-carousel",onReady:s,onChange:n,onScratchComplete:e,stylesheet:i,styleOverrides:r}=a,o=Array.from(document.querySelectorAll(t));return(s||n||e)&&o.forEach(l=>{s&&l.addEventListener("coverflow-carousel:ready",c=>{s(l,c.detail)}),n&&l.addEventListener("coverflow-carousel:change",c=>{n(l,c.detail)}),e&&l.addEventListener("coverflow-carousel:scratch-complete",c=>{e(l,c.detail)})}),i&&o.forEach(l=>{const c=l;typeof i=="string"?c.adoptStyles(i):c.adoptStylesheet(i)}),r&&o.forEach(l=>{l.adoptStyleOverrides(r)}),o}function M(a="coverflow-carousel"){typeof window>"u"||!("customElements"in window)||customElements.get(a)||customElements.define(a,u)}exports.CoverflowCarouselElement=u;exports.coverflowCarouselCssText=A;exports.initCoverflowCarousels=F;exports.registerCoverflowCarouselElement=M;

package/dist/index.es.js

@@ -151,19 +151,6 @@ const x = `:host {
   background: Crimson;
   transform: scale(1.2);
 }
-
-/* SR-only */
-.cfc__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
 `, D = x;
 function E(a) {
   return "adoptedStyleSheets" in a;
@@ -176,75 +163,69 @@ function y(a) {
     return null;
   }
 }
-const A = y(x), I = x;
-function b(a) {
+const w = y(x), I = x;
+function v(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());
+  const s = a.trim();
+  if (!s) return t;
+  if (s.endsWith("ms")) {
+    const e = Number(s.slice(0, -2).trim());
     return Number.isFinite(e) ? e : t;
   }
-  if (n.endsWith("s")) {
-    const e = Number(n.slice(0, -1).trim());
+  if (s.endsWith("s")) {
+    const e = Number(s.slice(0, -1).trim());
     return Number.isFinite(e) ? e * 1e3 : t;
   }
-  const s = Number(n);
-  return Number.isFinite(s) ? s : t;
+  const n = Number(s);
+  return Number.isFinite(n) ? n : t;
 }
 function k(a, t) {
-  const n = b(a.transitionProperty), s = b(a.transitionDuration), e = b(a.transitionDelay);
-  if (!n.length) return 0;
-  const r = ((v) => {
-    const h = n.indexOf(v);
+  const s = v(a.transitionProperty), n = v(a.transitionDuration), e = v(a.transitionDelay);
+  if (!s.length) return 0;
+  const r = ((m) => {
+    const h = s.indexOf(m);
     if (h >= 0) return h;
-    const S = n.indexOf("all");
+    const S = s.indexOf("all");
     return S >= 0 ? S : -1;
   })(t);
   if (r < 0) return 0;
-  const o = s[Math.min(r, s.length - 1)] ?? "0s", l = e[Math.min(r, e.length - 1)] ?? "0s", c = g(o, 0), d = g(l, 0);
+  const o = n[Math.min(r, n.length - 1)] ?? "0s", l = e[Math.min(r, e.length - 1)] ?? "0s", c = g(o, 0), d = g(l, 0);
   return Math.max(0, c + d);
 }
 function _() {
   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 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 b(a, t, s) {
+  if (!a.hasAttribute(t)) return s;
+  const n = a.getAttribute(t);
+  return n == null || n === "" ? !0 : n !== "false";
 }
-function w(a, t) {
+function C(a, t, s) {
   const n = a.getAttribute(t);
-  if (n == null) return null;
-  const s = n.trim();
-  return s || null;
+  if (n == null) return s;
+  const e = Number(n.trim());
+  return Number.isFinite(e) ? Math.trunc(e) : s;
+}
+function A(a, t) {
+  const s = a.getAttribute(t);
+  if (s == null) return null;
+  const n = s.trim();
+  return n || null;
 }
-function f(a, t) {
+function u(a, t) {
   return t <= 0 ? 0 : (a % t + t) % t;
 }
-function L(a, t, n) {
-  const s = t - a, e = n / 2;
-  return s > e ? s - n : s < -e ? s + n : s;
+function L(a, t, s) {
+  const n = t - a, e = s / 2;
+  return n > e ? n - s : n < -e ? n + s : n;
 }
-const p = 1;
+const f = 1;
 let T = 0;
-class m extends HTMLElement {
-  static defaultStylesheet = A;
-  static observedAttributes = [
-    "start-index",
-    "index",
-    "show-dots",
-    "show-arrows",
-    "announce-changes"
-  ];
+class p extends HTMLElement {
+  static defaultStylesheet = w;
+  static observedAttributes = ["start-index", "index", "show-dots", "show-arrows"];
   shadow = this.attachShadow({ mode: "open" });
   instanceId = `cfc-${++T}`;
   rootEl;
@@ -252,7 +233,6 @@ class m extends HTMLElement {
   dotsEl;
   prevBtn;
   nextBtn;
-  liveRegion;
   baseStyles = null;
   overrideStyles = null;
   baseStyleEl = null;
@@ -282,18 +262,18 @@ class m extends HTMLElement {
   disconnectedCallback() {
     this.destroy();
   }
-  attributeChangedCallback(t, n, s) {
+  attributeChangedCallback(t, s, n) {
     if (!this.isConnected || this.reflectGuard) return;
     this.readAttributes({ isInit: !1 });
-    const e = w(this, "index");
+    const e = A(this, "index");
     if (e != null) {
-      const i = f(Number(e), this.cards.length);
+      const i = u(Number(e), this.cards.length);
       if (Number.isFinite(i) && i !== this.currentIndex) {
         this.goTo(i);
         return;
       }
     }
-    this.applyLayoutAndA11y({ announce: !0, emitChange: !1 });
+    this.applyLayoutAndA11y({ emitChange: !1 });
   }
   next() {
     this.goTo(this.currentIndex + 1);
@@ -303,14 +283,14 @@ class m extends HTMLElement {
   }
   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());
+    const s = u(t, this.cards.length);
+    s !== this.currentIndex && (this.isAnimating = !0, this.currentIndex = s, this.reflectIndexAttr(), this.applyLayoutAndA11y({ emitChange: !0 }), this.lockUntilTransitionEnd());
   }
   refresh() {
     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 = f(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);
+    const s = C(this, "start-index", 0), n = A(this, "index"), e = n != null ? Number(n) : s, 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({ 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) => {
@@ -328,26 +308,26 @@ class m extends HTMLElement {
   }
   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 s = b(this, "show-arrows", !1), n = b(this, "show-dots", !1);
+    this.prevBtn.style.display = s ? "" : "none", this.nextBtn.style.display = s ? "" : "none", this.dotsEl.style.display = n ? "" : "none";
     const e = this.getAttribute("aria-label");
     e && this.rootEl.setAttribute("aria-label", e), t.isInit && this.setAttribute("aria-roledescription", "carousel");
   }
   render() {
-    this.applyAllStyles(), 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.baseStyleEl && this.shadow.append(this.baseStyleEl), this.overrideStyleEl && this.shadow.append(this.overrideStyleEl), this.shadow.append(this.rootEl), this.bindEvents();
+    this.applyAllStyles(), 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.rootEl.append(this.trackEl, this.prevBtn, this.nextBtn, this.dotsEl), this.shadow.innerHTML = "", this.baseStyleEl && this.shadow.append(this.baseStyleEl), this.overrideStyleEl && this.shadow.append(this.overrideStyleEl), 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) => {
+    const t = () => this.prev(), s = () => this.next();
+    this.prevBtn.addEventListener("click", t), this.nextBtn.addEventListener("click", s), this.cleanup.push(() => this.prevBtn.removeEventListener("click", t)), this.cleanup.push(() => this.nextBtn.removeEventListener("click", s));
+    const n = (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));
+    this.rootEl.addEventListener("transitionend", n), this.cleanup.push(() => this.rootEl.removeEventListener("transitionend", n));
     const e = (i) => {
       const r = i.target;
       if (!(r instanceof HTMLElement) || r.tagName !== "SCRATCH-REVEAL") return;
@@ -359,10 +339,10 @@ class m extends HTMLElement {
       if (!l) return;
       const c = Number(l.dataset.cfcIndex);
       if (!Number.isFinite(c)) return;
-      const v = i.detail?.percent ?? 100;
+      const m = i.detail?.percent ?? 100;
       this.dispatchEvent(
         new CustomEvent("coverflow-carousel:scratch-complete", {
-          detail: { index: c, length: this.cards.length, percent: v },
+          detail: { index: c, length: this.cards.length, percent: m },
           bubbles: !0,
           composed: !0
         })
@@ -374,7 +354,7 @@ class m extends HTMLElement {
   }
   setupLightDomObserver() {
     this.lightDomObserver || (this.lightDomObserver = new MutationObserver((t) => {
-      this.suppressMutations || !t.some((s) => !(s.type === "attributes" && s.attributeName === "slot")) || this.scheduleRefreshFromMutations();
+      this.suppressMutations || !t.some((n) => !(n.type === "attributes" && n.attributeName === "slot")) || this.scheduleRefreshFromMutations();
     }), this.lightDomObserver.observe(this, {
       ...this.lightDomObserverOptions
     }), this.cleanup.push(() => {
@@ -389,99 +369,99 @@ class m extends HTMLElement {
   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(
+    ), s = [], n = 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"), o = `${this.instanceId}-slot-${e}`;
+    for (let e = 0; e < n.length; e++) {
+      const i = n[e], r = t[e] ?? document.createElement("div"), o = `${this.instanceId}-slot-${e}`;
       t[e] || (r.className = "cfc__card", this.trackEl.append(r)), i.getAttribute("slot") !== o && i.setAttribute("slot", o);
       const l = r.querySelector("slot");
       let c;
-      l instanceof HTMLSlotElement ? c = l : (c = document.createElement("slot"), r.replaceChildren(c)), c.name !== o && (c.name = o), n.push(r);
+      l instanceof HTMLSlotElement ? c = l : (c = document.createElement("slot"), r.replaceChildren(c)), c.name !== o && (c.name = o), s.push(r);
     }
-    for (let e = s.length; e < t.length; e++)
+    for (let e = n.length; e < t.length; e++)
       t[e]?.remove();
-    this.cards = n, this.hasAppliedInitialLayout = !1, this.lastLayoutIndex = null, this.lastVisibleSet = /* @__PURE__ */ new Set();
+    this.cards = s, this.hasAppliedInitialLayout = !1, this.lastLayoutIndex = null, this.lastVisibleSet = /* @__PURE__ */ new Set();
   }
   getVisibleSet() {
-    const t = this.cards.length, n = /* @__PURE__ */ 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;
+    const t = this.cards.length, s = /* @__PURE__ */ new Set();
+    if (t <= 0) return s;
+    const n = Math.floor(t / 2);
+    if (f >= n) {
+      for (let e = 0; e < t; e++) s.add(e);
+      return s;
     }
-    for (let e = -p; e <= p; e++)
-      n.add(f(this.currentIndex + e, t));
-    return n;
+    for (let e = -f; e <= f; e++)
+      s.add(u(this.currentIndex + e, t));
+    return s;
   }
   buildDots() {
     const t = Array.from(this.dotsEl.children).filter(
       (i) => i instanceof HTMLElement && i.classList.contains("cfc__dot")
     );
-    if (!u(this, "show-dots", !1)) {
+    if (!b(this, "show-dots", !1)) {
       t.forEach((i) => {
         i.remove();
       }), this.dots = [];
       return;
     }
-    const s = [], e = this.cards.length;
+    const n = [], 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);
+      t[i] || this.dotsEl.append(r), r.className = "cfc__dot", r.setAttribute("aria-hidden", "true"), n.push(r);
     }
     for (let i = e; i < t.length; i++)
       t[i]?.remove();
-    this.dots = s, this.updateDotsVisualState();
+    this.dots = n, this.updateDotsVisualState();
   }
   computeCardState(t) {
-    const n = this.cards.length, s = L(this.currentIndex, t, n), e = Math.abs(s);
+    const s = this.cards.length, n = L(this.currentIndex, t, s), e = Math.abs(n);
     return {
       index: t,
-      delta: s,
+      delta: n,
       abs: e,
-      isVisible: e <= p,
+      isVisible: e <= f,
       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, o = t.dataset.cfcAbs;
+  applyCardState(t, s) {
+    t.setAttribute("aria-hidden", s.isVisible ? "false" : "true"), t.dataset.active = s.isActive ? "true" : "false", t.dataset.cfcIndex = String(s.index), t.setAttribute("role", "group"), t.setAttribute("aria-roledescription", "slide"), t.setAttribute("aria-setsize", String(this.cards.length)), t.setAttribute("aria-posinset", String(s.index + 1));
+    const n = `${this.instanceId}-slide-${s.index}`;
+    t.id = n;
+    const e = String(s.delta), i = String(s.abs), r = t.dataset.cfcDelta, o = t.dataset.cfcAbs;
     r !== e && (t.style.setProperty("--cfc-delta", e), t.dataset.cfcDelta = e), o !== 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 = /* @__PURE__ */ new Set();
+        const s = this.getVisibleSet(), n = /* @__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) => {
+          n.add(e);
+        }), s.forEach((e) => {
+          n.add(e);
+        }), this.lastLayoutIndex != null && n.add(this.lastLayoutIndex), n.add(this.currentIndex), n.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;
+        }), this.lastLayoutIndex = this.currentIndex, this.lastVisibleSet = s;
       } 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);
+        for (let s = 0; s < this.cards.length; s++) {
+          const n = this.cards[s];
+          if (!n) continue;
+          const e = this.computeCardState(s);
+          this.applyCardState(n, 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();
+      this.updateDotsVisualState(), 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";
+        const s = this.dots[t], n = t === this.currentIndex;
+        s.dataset.active = n ? "true" : "false";
       }
   }
   lockUntilTransitionEnd() {
@@ -491,17 +471,17 @@ class m extends HTMLElement {
       this.unlockAnimation();
       return;
     }
-    const n = this.cards[this.currentIndex];
-    if (!n) {
+    const s = this.cards[this.currentIndex];
+    if (!s) {
       this.unlockAnimation();
       return;
     }
-    const s = getComputedStyle(n), e = k(s, "transform");
+    const n = getComputedStyle(s), e = k(n, "transform");
     if (e <= 0) {
       this.unlockAnimation();
       return;
     }
-    const i = g(s.getPropertyValue("--cfc-transition-ms").trim(), 400), o = Math.max(e, i) + 60;
+    const i = g(n.getPropertyValue("--cfc-transition-ms").trim(), 400), o = Math.max(e, i) + 60;
     this.animFallbackTimerId !== null && window.clearTimeout(this.animFallbackTimerId), this.animFallbackTimerId = window.setTimeout(() => {
       this.pendingAnimToken === t && this.unlockAnimation();
     }, o);
@@ -523,11 +503,6 @@ class m extends HTMLElement {
       })
     );
   }
-  announce(t) {
-    this.liveRegion.textContent = "", queueMicrotask(() => {
-      this.liveRegion.textContent = t;
-    });
-  }
   reflectIndexAttr() {
     this.reflectGuard = !0;
     try {
@@ -543,7 +518,7 @@ class m extends HTMLElement {
     this.overrideStyles = t ?? null, this.applyAllStyles();
   }
   applyAllStyles() {
-    const t = this.baseStyles, n = this.overrideStyles;
+    const t = this.baseStyles, s = this.overrideStyles;
     if (E(this.shadow)) {
       const e = [];
       if (typeof t == "string") {
@@ -555,46 +530,46 @@ class m extends HTMLElement {
         e.push(i);
       } else if (t)
         e.push(t);
-      else if (m.defaultStylesheet)
-        e.push(m.defaultStylesheet);
+      else if (p.defaultStylesheet)
+        e.push(p.defaultStylesheet);
       else {
         this.applyAllStylesFallback();
         return;
       }
-      if (typeof n == "string") {
-        const i = y(n);
+      if (typeof s == "string") {
+        const i = y(s);
         if (!i) {
           this.applyAllStylesFallback();
           return;
         }
         e.push(i);
-      } else n && e.push(n);
+      } else s && e.push(s);
       this.shadow.adoptedStyleSheets = e, this.baseStyleEl?.remove(), this.overrideStyleEl?.remove(), this.baseStyleEl = null, this.overrideStyleEl = null;
       return;
     }
     this.applyAllStylesFallback();
   }
   applyAllStylesFallback() {
-    const t = this.baseStyles, n = this.overrideStyles;
+    const t = this.baseStyles, s = this.overrideStyles;
     E(this.shadow) && (this.shadow.adoptedStyleSheets = []);
-    const s = typeof t == "string" ? t : I, e = typeof n == "string" ? n : "";
-    this.baseStyleEl || (this.baseStyleEl = document.createElement("style")), this.baseStyleEl.textContent = s, e ? (this.overrideStyleEl || (this.overrideStyleEl = document.createElement("style")), this.overrideStyleEl.textContent = e) : (this.overrideStyleEl?.remove(), this.overrideStyleEl = null);
+    const n = typeof t == "string" ? t : I, e = typeof s == "string" ? s : "";
+    this.baseStyleEl || (this.baseStyleEl = document.createElement("style")), this.baseStyleEl.textContent = n, e ? (this.overrideStyleEl || (this.overrideStyleEl = document.createElement("style")), this.overrideStyleEl.textContent = e) : (this.overrideStyleEl?.remove(), this.overrideStyleEl = null);
   }
 }
 function F(a = {}) {
   const {
     selector: t = "coverflow-carousel",
-    onReady: n,
-    onChange: s,
+    onReady: s,
+    onChange: n,
     onScratchComplete: e,
     stylesheet: i,
     styleOverrides: r
   } = a, o = Array.from(document.querySelectorAll(t));
-  return (n || s || e) && o.forEach((l) => {
-    n && l.addEventListener("coverflow-carousel:ready", (c) => {
-      n(l, c.detail);
-    }), s && l.addEventListener("coverflow-carousel:change", (c) => {
+  return (s || n || e) && o.forEach((l) => {
+    s && l.addEventListener("coverflow-carousel:ready", (c) => {
       s(l, c.detail);
+    }), n && l.addEventListener("coverflow-carousel:change", (c) => {
+      n(l, c.detail);
     }), e && l.addEventListener("coverflow-carousel:scratch-complete", (c) => {
       e(l, c.detail);
     });
@@ -606,10 +581,10 @@ function F(a = {}) {
   }), o;
 }
 function M(a = "coverflow-carousel") {
-  typeof window > "u" || !("customElements" in window) || customElements.get(a) || customElements.define(a, m);
+  typeof window > "u" || !("customElements" in window) || customElements.get(a) || customElements.define(a, p);
 }
 export {
-  m as CoverflowCarouselElement,
+  p as CoverflowCarouselElement,
   D as coverflowCarouselCssText,
   F as initCoverflowCarousels,
   M as registerCoverflowCarouselElement

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(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 {
+(function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.CoverflowCarousel={}))})(this,(function(d){"use strict";const h=`:host {
   display: block;
   width: 100%;
   height: 100%;
@@ -151,17 +151,4 @@
   background: Crimson;
   transform: scale(1.2);
 }
-
-/* SR-only */
-.cfc__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-`,I=d;function E(a){return"adoptedStyleSheets"in a}function y(a){try{const t=new CSSStyleSheet;return t.replaceSync(a),t}catch{return null}}const C=y(d),k=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 _(a,t){const n=g(a.transitionProperty),s=g(a.transitionDuration),e=g(a.transitionDelay);if(!n.length)return 0;const r=(S=>{const u=n.indexOf(S);if(u>=0)return u;const A=n.indexOf("all");return A>=0?A:-1})(t);if(r<0)return 0;const o=s[Math.min(r,s.length-1)]??"0s",l=e[Math.min(r,e.length-1)]??"0s",c=x(o,0),p=x(l,0);return Math.max(0,c+p)}function T(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function m(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 v(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 b=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;baseStyles=null;overrideStyles=null;baseStyleEl=null;overrideStyleEl=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=v(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=v(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=v(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.setBaseStyles(t)}adoptStyles(t){this.setBaseStyles(t)}adoptStyleOverrides(t){this.setOverrideStyles(t)}readAttributes(t){this.rootEl||this.render();const n=m(this,"show-arrows",!1),s=m(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.applyAllStyles(),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.baseStyleEl&&this.shadow.append(this.baseStyleEl),this.overrideStyleEl&&this.shadow.append(this.overrideStyleEl),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 o=i.composedPath?.();if(!o?.length)return;const l=o.find(u=>u instanceof HTMLElement&&u.classList.contains("cfc__card")&&u.dataset.cfcIndex!=null);if(!l)return;const c=Number(l.dataset.cfcIndex);if(!Number.isFinite(c))return;const S=i.detail?.percent??100;this.dispatchEvent(new CustomEvent("coverflow-carousel:scratch-complete",{detail:{index:c,length:this.cards.length,percent:S},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"),o=`${this.instanceId}-slot-${e}`;t[e]||(r.className="cfc__card",this.trackEl.append(r)),i.getAttribute("slot")!==o&&i.setAttribute("slot",o);const l=r.querySelector("slot");let c;l instanceof HTMLSlotElement?c=l:(c=document.createElement("slot"),r.replaceChildren(c)),c.name!==o&&(c.name=o),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(b>=s){for(let e=0;e<t;e++)n.add(e);return n}for(let e=-b;e<=b;e++)n.add(v(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(!m(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<=b,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,o=t.dataset.cfcAbs;r!==e&&(t.style.setProperty("--cfc-delta",e),t.dataset.cfcDelta=e),o!==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&&m(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(T()){this.unlockAnimation();return}const n=this.cards[this.currentIndex];if(!n){this.unlockAnimation();return}const s=getComputedStyle(n),e=_(s,"transform");if(e<=0){this.unlockAnimation();return}const i=x(s.getPropertyValue("--cfc-transition-ms").trim(),400),o=Math.max(e,i)+60;this.animFallbackTimerId!==null&&window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=window.setTimeout(()=>{this.pendingAnimToken===t&&this.unlockAnimation()},o)}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}}setBaseStyles(t){this.baseStyles=t??null,this.applyAllStyles()}setOverrideStyles(t){this.overrideStyles=t??null,this.applyAllStyles()}applyAllStyles(){const t=this.baseStyles,n=this.overrideStyles;if(E(this.shadow)){const e=[];if(typeof t=="string"){const i=y(t);if(!i){this.applyAllStylesFallback();return}e.push(i)}else if(t)e.push(t);else if(f.defaultStylesheet)e.push(f.defaultStylesheet);else{this.applyAllStylesFallback();return}if(typeof n=="string"){const i=y(n);if(!i){this.applyAllStylesFallback();return}e.push(i)}else n&&e.push(n);this.shadow.adoptedStyleSheets=e,this.baseStyleEl?.remove(),this.overrideStyleEl?.remove(),this.baseStyleEl=null,this.overrideStyleEl=null;return}this.applyAllStylesFallback()}applyAllStylesFallback(){const t=this.baseStyles,n=this.overrideStyles;E(this.shadow)&&(this.shadow.adoptedStyleSheets=[]);const s=typeof t=="string"?t:k,e=typeof n=="string"?n:"";this.baseStyleEl||(this.baseStyleEl=document.createElement("style")),this.baseStyleEl.textContent=s,e?(this.overrideStyleEl||(this.overrideStyleEl=document.createElement("style")),this.overrideStyleEl.textContent=e):(this.overrideStyleEl?.remove(),this.overrideStyleEl=null)}}function M(a={}){const{selector:t="coverflow-carousel",onReady:n,onChange:s,onScratchComplete:e,stylesheet:i,styleOverrides:r}=a,o=Array.from(document.querySelectorAll(t));return(n||s||e)&&o.forEach(l=>{n&&l.addEventListener("coverflow-carousel:ready",c=>{n(l,c.detail)}),s&&l.addEventListener("coverflow-carousel:change",c=>{s(l,c.detail)}),e&&l.addEventListener("coverflow-carousel:scratch-complete",c=>{e(l,c.detail)})}),i&&o.forEach(l=>{const c=l;typeof i=="string"?c.adoptStyles(i):c.adoptStylesheet(i)}),r&&o.forEach(l=>{l.adoptStyleOverrides(r)}),o}function N(a="coverflow-carousel"){typeof window>"u"||!("customElements"in window)||customElements.get(a)||customElements.define(a,f)}h.CoverflowCarouselElement=f,h.coverflowCarouselCssText=I,h.initCoverflowCarousels=M,h.registerCoverflowCarouselElement=N,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));
+`,I=h;function E(a){return"adoptedStyleSheets"in a}function b(a){try{const t=new CSSStyleSheet;return t.replaceSync(a),t}catch{return null}}const C=b(h),k=h;function y(a){return a.split(",").map(t=>t.trim()).filter(Boolean)}function g(a,t){const s=a.trim();if(!s)return t;if(s.endsWith("ms")){const e=Number(s.slice(0,-2).trim());return Number.isFinite(e)?e:t}if(s.endsWith("s")){const e=Number(s.slice(0,-1).trim());return Number.isFinite(e)?e*1e3:t}const n=Number(s);return Number.isFinite(n)?n:t}function _(a,t){const s=y(a.transitionProperty),n=y(a.transitionDuration),e=y(a.transitionDelay);if(!s.length)return 0;const r=(x=>{const u=s.indexOf(x);if(u>=0)return u;const A=s.indexOf("all");return A>=0?A:-1})(t);if(r<0)return 0;const o=n[Math.min(r,n.length-1)]??"0s",l=e[Math.min(r,e.length-1)]??"0s",c=g(o,0),p=g(l,0);return Math.max(0,c+p)}function T(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function S(a,t,s){if(!a.hasAttribute(t))return s;const n=a.getAttribute(t);return n==null||n===""?!0:n!=="false"}function L(a,t,s){const n=a.getAttribute(t);if(n==null)return s;const e=Number(n.trim());return Number.isFinite(e)?Math.trunc(e):s}function w(a,t){const s=a.getAttribute(t);if(s==null)return null;const n=s.trim();return n||null}function m(a,t){return t<=0?0:(a%t+t)%t}function D(a,t,s){const n=t-a,e=s/2;return n>e?n-s:n<-e?n+s:n}const v=1;let F=0;class f extends HTMLElement{static defaultStylesheet=C;static observedAttributes=["start-index","index","show-dots","show-arrows"];shadow=this.attachShadow({mode:"open"});instanceId=`cfc-${++F}`;rootEl;trackEl;dotsEl;prevBtn;nextBtn;baseStyles=null;overrideStyles=null;baseStyleEl=null;overrideStyleEl=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,s,n){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({emitChange:!1})}next(){this.goTo(this.currentIndex+1)}prev(){this.goTo(this.currentIndex-1)}goTo(t){if(this.isAnimating)return;const s=m(t,this.cards.length);s!==this.currentIndex&&(this.isAnimating=!0,this.currentIndex=s,this.reflectIndexAttr(),this.applyLayoutAndA11y({emitChange:!0}),this.lockUntilTransitionEnd())}refresh(){const t=this.lightDomObserver;t&&(this.suppressMutations=!0,t.disconnect(),t.takeRecords()),this.rebuildCardsFromLightDom();const s=L(this,"start-index",0),n=w(this,"index"),e=n!=null?Number(n):s,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({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.setBaseStyles(t)}adoptStyles(t){this.setBaseStyles(t)}adoptStyleOverrides(t){this.setOverrideStyles(t)}readAttributes(t){this.rootEl||this.render();const s=S(this,"show-arrows",!1),n=S(this,"show-dots",!1);this.prevBtn.style.display=s?"":"none",this.nextBtn.style.display=s?"":"none",this.dotsEl.style.display=n?"":"none";const e=this.getAttribute("aria-label");e&&this.rootEl.setAttribute("aria-label",e),t.isInit&&this.setAttribute("aria-roledescription","carousel")}render(){this.applyAllStyles(),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.rootEl.append(this.trackEl,this.prevBtn,this.nextBtn,this.dotsEl),this.shadow.innerHTML="",this.baseStyleEl&&this.shadow.append(this.baseStyleEl),this.overrideStyleEl&&this.shadow.append(this.overrideStyleEl),this.shadow.append(this.rootEl),this.bindEvents()}bindEvents(){this.cleanup.forEach(i=>{i()}),this.cleanup=[];const t=()=>this.prev(),s=()=>this.next();this.prevBtn.addEventListener("click",t),this.nextBtn.addEventListener("click",s),this.cleanup.push(()=>this.prevBtn.removeEventListener("click",t)),this.cleanup.push(()=>this.nextBtn.removeEventListener("click",s));const n=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",n),this.cleanup.push(()=>this.rootEl.removeEventListener("transitionend",n));const e=i=>{const r=i.target;if(!(r instanceof HTMLElement)||r.tagName!=="SCRATCH-REVEAL")return;const o=i.composedPath?.();if(!o?.length)return;const l=o.find(u=>u instanceof HTMLElement&&u.classList.contains("cfc__card")&&u.dataset.cfcIndex!=null);if(!l)return;const c=Number(l.dataset.cfcIndex);if(!Number.isFinite(c))return;const x=i.detail?.percent??100;this.dispatchEvent(new CustomEvent("coverflow-carousel:scratch-complete",{detail:{index:c,length:this.cards.length,percent:x},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(n=>!(n.type==="attributes"&&n.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")),s=[],n=Array.from(this.children).filter(e=>e instanceof HTMLElement);for(let e=0;e<n.length;e++){const i=n[e],r=t[e]??document.createElement("div"),o=`${this.instanceId}-slot-${e}`;t[e]||(r.className="cfc__card",this.trackEl.append(r)),i.getAttribute("slot")!==o&&i.setAttribute("slot",o);const l=r.querySelector("slot");let c;l instanceof HTMLSlotElement?c=l:(c=document.createElement("slot"),r.replaceChildren(c)),c.name!==o&&(c.name=o),s.push(r)}for(let e=n.length;e<t.length;e++)t[e]?.remove();this.cards=s,this.hasAppliedInitialLayout=!1,this.lastLayoutIndex=null,this.lastVisibleSet=new Set}getVisibleSet(){const t=this.cards.length,s=new Set;if(t<=0)return s;const n=Math.floor(t/2);if(v>=n){for(let e=0;e<t;e++)s.add(e);return s}for(let e=-v;e<=v;e++)s.add(m(this.currentIndex+e,t));return s}buildDots(){const t=Array.from(this.dotsEl.children).filter(i=>i instanceof HTMLElement&&i.classList.contains("cfc__dot"));if(!S(this,"show-dots",!1)){t.forEach(i=>{i.remove()}),this.dots=[];return}const n=[],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"),n.push(r)}for(let i=e;i<t.length;i++)t[i]?.remove();this.dots=n,this.updateDotsVisualState()}computeCardState(t){const s=this.cards.length,n=D(this.currentIndex,t,s),e=Math.abs(n);return{index:t,delta:n,abs:e,isVisible:e<=v,isActive:t===this.currentIndex}}applyCardState(t,s){t.setAttribute("aria-hidden",s.isVisible?"false":"true"),t.dataset.active=s.isActive?"true":"false",t.dataset.cfcIndex=String(s.index),t.setAttribute("role","group"),t.setAttribute("aria-roledescription","slide"),t.setAttribute("aria-setsize",String(this.cards.length)),t.setAttribute("aria-posinset",String(s.index+1));const n=`${this.instanceId}-slide-${s.index}`;t.id=n;const e=String(s.delta),i=String(s.abs),r=t.dataset.cfcDelta,o=t.dataset.cfcAbs;r!==e&&(t.style.setProperty("--cfc-delta",e),t.dataset.cfcDelta=e),o!==i&&(t.style.setProperty("--cfc-abs",i),t.dataset.cfcAbs=i)}applyLayoutAndA11y(t){if(this.cards.length){if(this.hasAppliedInitialLayout){const s=this.getVisibleSet(),n=new Set;this.lastVisibleSet.forEach(e=>{n.add(e)}),s.forEach(e=>{n.add(e)}),this.lastLayoutIndex!=null&&n.add(this.lastLayoutIndex),n.add(this.currentIndex),n.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=s}else{for(let s=0;s<this.cards.length;s++){const n=this.cards[s];if(!n)continue;const e=this.computeCardState(s);this.applyCardState(n,e)}this.hasAppliedInitialLayout=!0,this.lastLayoutIndex=this.currentIndex,this.lastVisibleSet=this.getVisibleSet()}this.updateDotsVisualState(),t.emitChange&&this.emitChange()}}updateDotsVisualState(){if(this.dots.length)for(let t=0;t<this.dots.length;t++){const s=this.dots[t],n=t===this.currentIndex;s.dataset.active=n?"true":"false"}}lockUntilTransitionEnd(){this.pendingAnimToken++;const t=this.pendingAnimToken;if(T()){this.unlockAnimation();return}const s=this.cards[this.currentIndex];if(!s){this.unlockAnimation();return}const n=getComputedStyle(s),e=_(n,"transform");if(e<=0){this.unlockAnimation();return}const i=g(n.getPropertyValue("--cfc-transition-ms").trim(),400),o=Math.max(e,i)+60;this.animFallbackTimerId!==null&&window.clearTimeout(this.animFallbackTimerId),this.animFallbackTimerId=window.setTimeout(()=>{this.pendingAnimToken===t&&this.unlockAnimation()},o)}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}}))}reflectIndexAttr(){this.reflectGuard=!0;try{this.setAttribute("index",String(this.currentIndex))}finally{this.reflectGuard=!1}}setBaseStyles(t){this.baseStyles=t??null,this.applyAllStyles()}setOverrideStyles(t){this.overrideStyles=t??null,this.applyAllStyles()}applyAllStyles(){const t=this.baseStyles,s=this.overrideStyles;if(E(this.shadow)){const e=[];if(typeof t=="string"){const i=b(t);if(!i){this.applyAllStylesFallback();return}e.push(i)}else if(t)e.push(t);else if(f.defaultStylesheet)e.push(f.defaultStylesheet);else{this.applyAllStylesFallback();return}if(typeof s=="string"){const i=b(s);if(!i){this.applyAllStylesFallback();return}e.push(i)}else s&&e.push(s);this.shadow.adoptedStyleSheets=e,this.baseStyleEl?.remove(),this.overrideStyleEl?.remove(),this.baseStyleEl=null,this.overrideStyleEl=null;return}this.applyAllStylesFallback()}applyAllStylesFallback(){const t=this.baseStyles,s=this.overrideStyles;E(this.shadow)&&(this.shadow.adoptedStyleSheets=[]);const n=typeof t=="string"?t:k,e=typeof s=="string"?s:"";this.baseStyleEl||(this.baseStyleEl=document.createElement("style")),this.baseStyleEl.textContent=n,e?(this.overrideStyleEl||(this.overrideStyleEl=document.createElement("style")),this.overrideStyleEl.textContent=e):(this.overrideStyleEl?.remove(),this.overrideStyleEl=null)}}function M(a={}){const{selector:t="coverflow-carousel",onReady:s,onChange:n,onScratchComplete:e,stylesheet:i,styleOverrides:r}=a,o=Array.from(document.querySelectorAll(t));return(s||n||e)&&o.forEach(l=>{s&&l.addEventListener("coverflow-carousel:ready",c=>{s(l,c.detail)}),n&&l.addEventListener("coverflow-carousel:change",c=>{n(l,c.detail)}),e&&l.addEventListener("coverflow-carousel:scratch-complete",c=>{e(l,c.detail)})}),i&&o.forEach(l=>{const c=l;typeof i=="string"?c.adoptStyles(i):c.adoptStylesheet(i)}),r&&o.forEach(l=>{l.adoptStyleOverrides(r)}),o}function N(a="coverflow-carousel"){typeof window>"u"||!("customElements"in window)||customElements.get(a)||customElements.define(a,f)}d.CoverflowCarouselElement=f,d.coverflowCarouselCssText=I,d.initCoverflowCarousels=M,d.registerCoverflowCarouselElement=N,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));

package/package.json

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