coverflow-carousel 0.1.0-dev.0 → 0.1.1-dev.0

package/README.md

@@ -11,28 +11,22 @@
 </div>
 <br>
 
-➠ **Install**
-
+# Install
 ```console
 yarn add coverflow-carousel
 ```
 <br>
 
-➠ **Import**
-
+# Import
 ```javascript
-// Registers <coverflow-carousel> via customElements.define(...)
-import 'coverflow-carousel';
-
-// Optional helper: subscribe to events + apply styles
-import { initCoverflowCarousels } from 'coverflow-carousel';
+import { registerCoverflowCarouselElement, initCoverflowCarousels } from 'coverflow-carousel';
+registerCoverflowCarouselElement();
 ```
 <br>
 
-➠ **Usage**
-
+# Usage
 ```javascript
-// After import 'coverflow-carousel', the element is registered.
+// After registerCoverflowCarouselElement(), the element is registered.
 // Then just use <coverflow-carousel> in your HTML (see below).
 ```
 
@@ -52,7 +46,13 @@ import { initCoverflowCarousels } from 'coverflow-carousel';
 
 <sub>JS: subscribe to events + optional styles</sub>
 ```javascript
-import { initCoverflowCarousels, coverflowCarouselCssText } from 'coverflow-carousel';
+import {
+  registerCoverflowCarouselElement,
+  initCoverflowCarousels,
+  coverflowCarouselCssText,
+} from 'coverflow-carousel';
+
+registerCoverflowCarouselElement();
 
 initCoverflowCarousels({
   selector: 'coverflow-carousel',
@@ -82,9 +82,11 @@ initCoverflowCarousels({
 
 <sub>JS: custom styles from `?raw` (CSS/SCSS)</sub>
 ```javascript
-import { initCoverflowCarousels } from 'coverflow-carousel';
+import { registerCoverflowCarouselElement, initCoverflowCarousels } from 'coverflow-carousel';
 import MyCfcCss from './assets/cfc.custom.css?raw';
 
+registerCoverflowCarouselElement();
+
 initCoverflowCarousels({
   stylesheet: MyCfcCss,
 });
@@ -92,7 +94,13 @@ initCoverflowCarousels({
 
 <sub>JS: default styles shipped with the package</sub>
 ```javascript
-import { initCoverflowCarousels, coverflowCarouselCssText } from 'coverflow-carousel';
+import {
+  registerCoverflowCarouselElement,
+  initCoverflowCarousels,
+  coverflowCarouselCssText,
+} from 'coverflow-carousel';
+
+registerCoverflowCarouselElement();
 
 initCoverflowCarousels({
   stylesheet: coverflowCarouselCssText,
@@ -101,6 +109,10 @@ initCoverflowCarousels({
 
 <sub>JS: manual control (prev/next/goTo/refresh)</sub>
 ```javascript
+import { registerCoverflowCarouselElement } from 'coverflow-carousel';
+
+registerCoverflowCarouselElement();
+
 const el = document.querySelector('coverflow-carousel');
 // @ts-expect-error: methods exist on the custom element instance after import
 el?.prev();
@@ -113,8 +125,7 @@ el?.refresh();
 ```
 <br>
 
-➠ **Options**
-
+# Options
 | Option (attribute) | Type | Default | Description |
 |:--------------------:|:-----------------------:|:------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `start-index` | `number` | `0` | Start index if `index` is not set. |
@@ -125,8 +136,7 @@ el?.refresh();
 
 <br>
 
-➠ **Events**
-
+# Events
 | Event | Detail | Description |
 |-------------------|------------------------------|--------------------------------------------------------------------------------------------------|
 | `coverflow-carousel:ready` | `{ index: number, length: number }` | Fired after the first `refresh()` (when slides are built and layout/a11y is applied). |
@@ -135,8 +145,7 @@ el?.refresh();
 
 <br>
 
-➠ **API Methods**
-
+# API Methods
 | Method | Description |
 |-------------------|--------------------------------------------------------------------------------------------------|
 | `initCoverflowCarousels({ selector?, onReady?, onChange?, onScratchComplete?, stylesheet? }): HTMLElement[]` | Finds elements by `selector` (default: `coverflow-carousel`), optionally subscribes to `ready/change/scratch-complete` events, and optionally applies styles to each element (`stylesheet?: CSSStyleSheet \| string \| null`). |
@@ -150,8 +159,7 @@ el?.refresh();
 
 <br>
 
-➠ **Notes**
-
+# Notes
 - Slides come from *light DOM*: all children are moved into cards inside the shadow DOM (nodes are moved — this is expected).
 - For the coverflow effect, it’s recommended to have **at least 3** slides.
 - While a transition is running, new transitions are ignored (anti-spam guard).
@@ -162,6 +170,5 @@ el?.refresh();
 
 <br>
 
-➠ **License**
-
-coverflow-carousel is released under MIT license
+# License
+MIT

package/dist/dev.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=`:host {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=`:host {
   display: block;
   width: 100%;
   height: 100%;
@@ -164,4 +164,4 @@
   white-space: nowrap;
   border: 0;
 }
-`,S=v;function f(a){return"adoptedStyleSheets"in a}function b(a){try{const t=new CSSStyleSheet;return t.replaceSync(a),t}catch{return null}}const I=b(v),_=v;function p(a){return a.split(",").map(t=>t.trim()).filter(Boolean)}function m(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=p(a.transitionProperty),i=p(a.transitionDuration),n=p(a.transitionDelay);if(!e.length)return 0;const r=(A=>{const x=e.indexOf(A);if(x>=0)return x;const g=e.indexOf("all");return g>=0?g:-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",w=m(c,0),E=m(o,0);return Math.max(0,w+E)}function C(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function l(a,t,e){if(!a.hasAttribute(t))return e;const i=a.getAttribute(t);return i==null||i===""?!0:i!=="false"}function T(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 y(a,t){const e=a.getAttribute(t);if(e==null)return null;const i=e.trim();return i||null}function d(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}const h=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;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=y(this,"index");if(n!=null){const s=d(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=d(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=T(this,"start-index",0),e=y(this,"index"),i=e!=null?Number(e):t,n=Number.isFinite(i)?i:0;this.currentIndex=d(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=l(this,"show-arrows",!1),i=l(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(n=>{n()}),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=n=>{if(!this.isAnimating||n.propertyName!=="transform"||!(n.target instanceof HTMLElement))return;const s=this.cards[this.currentIndex];s&&n.target===s&&this.unlockAnimation()};this.rootEl.addEventListener("transitionend",i),this.cleanup.push(()=>this.rootEl.removeEventListener("transitionend",i))}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(h>=i){for(let n=0;n<t;n++)e.add(n);return e}for(let n=-h;n<=h;n++)e.add(d(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(!l(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=L(this.currentIndex,t,e),n=Math.abs(i);return{index:t,delta:i,abs:n,isVisible:n<=h,isActive:t===this.currentIndex}}applyCardState(t,e){t.setAttribute("aria-hidden",e.isVisible?"false":"true"),t.dataset.active=e.isActive?"true":"false",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&&l(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(C()){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=m(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(f(this.shadow)){const e=b(t);if(e){this.shadow.adoptedStyleSheets=[e],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&f(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(u.defaultStylesheet&&f(this.shadow)){this.shadow.adoptedStyleSheets=[u.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=_}}function N(a={}){const{selector:t="coverflow-carousel",onReady:e,onChange:i,stylesheet:n}=a,s=Array.from(document.querySelectorAll(t));return(e||i)&&s.forEach(r=>{e&&r.addEventListener("coverflow-carousel:ready",c=>{e(r,c.detail)}),i&&r.addEventListener("coverflow-carousel:change",c=>{i(r,c.detail)})}),n&&s.forEach(r=>{const c=r;typeof n=="string"?c.adoptStyles(n):c.adoptStylesheet(n)}),s}customElements.get("coverflow-carousel")||customElements.define("coverflow-carousel",u);exports.coverflowCarouselCssText=S;exports.initCoverflowCarousels=N;
+`,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;

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { CoverflowCarouselElement } from './element/CoverflowCarouselElement';
 import { initCoverflowCarousels } from './init';
 import { coverflowCarouselCssText } from './styles';
+export declare function registerCoverflowCarouselElement(tagName?: string): void;
 declare global {
     interface HTMLElementTagNameMap {
         'coverflow-carousel': CoverflowCarouselElement;
     }
 }
-export { coverflowCarouselCssText, initCoverflowCarousels };
+export { coverflowCarouselCssText, initCoverflowCarousels, CoverflowCarouselElement };

package/dist/index.es.js

@@ -1,4 +1,4 @@
-const v = `:host {
+const b = `:host {
   display: block;
   width: 100%;
   height: 100%;
@@ -164,11 +164,11 @@ const v = `:host {
   white-space: nowrap;
   border: 0;
 }
-`, D = v;
-function f(a) {
+`, N = b;
+function v(a) {
   return "adoptedStyleSheets" in a;
 }
-function b(a) {
+function S(a) {
   try {
     const t = new CSSStyleSheet();
     return t.replaceSync(a), t;
@@ -176,11 +176,11 @@ function b(a) {
     return null;
   }
 }
-const S = b(v), I = v;
-function p(a) {
+const A = S(b), I = b;
+function x(a) {
   return a.split(",").map((t) => t.trim()).filter(Boolean);
 }
-function m(a, t) {
+function g(a, t) {
   const e = a.trim();
   if (!e) return t;
   if (e.endsWith("ms")) {
@@ -195,22 +195,22 @@ function m(a, t) {
   return Number.isFinite(i) ? i : t;
 }
 function _(a, t) {
-  const e = p(a.transitionProperty), i = p(a.transitionDuration), n = p(a.transitionDelay);
+  const e = x(a.transitionProperty), i = x(a.transitionDuration), n = x(a.transitionDelay);
   if (!e.length) return 0;
-  const r = ((A) => {
-    const x = e.indexOf(A);
-    if (x >= 0) return x;
-    const g = e.indexOf("all");
-    return g >= 0 ? g : -1;
+  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", w = m(c, 0), E = m(o, 0);
-  return Math.max(0, w + E);
+  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 l(a, t, e) {
+function h(a, t, e) {
   if (!a.hasAttribute(t)) return e;
   const i = a.getAttribute(t);
   return i == null || i === "" ? !0 : i !== "false";
@@ -221,23 +221,23 @@ function C(a, t, e) {
   const n = Number(i.trim());
   return Number.isFinite(n) ? Math.trunc(n) : e;
 }
-function y(a, t) {
+function w(a, t) {
   const e = a.getAttribute(t);
   if (e == null) return null;
   const i = e.trim();
   return i || null;
 }
-function d(a, t) {
+function u(a, t) {
   return t <= 0 ? 0 : (a % t + t) % t;
 }
-function T(a, t, e) {
+function L(a, t, e) {
   const i = t - a, n = e / 2;
   return i > n ? i - e : i < -n ? i + e : i;
 }
-const h = 1;
-let L = 0;
-class u extends HTMLElement {
-  static defaultStylesheet = S;
+const f = 1;
+let T = 0;
+class p extends HTMLElement {
+  static defaultStylesheet = A;
   static observedAttributes = [
     "start-index",
     "index",
@@ -246,7 +246,7 @@ class u extends HTMLElement {
     "announce-changes"
   ];
   shadow = this.attachShadow({ mode: "open" });
-  instanceId = `cfc-${++L}`;
+  instanceId = `cfc-${++T}`;
   rootEl;
   trackEl;
   dotsEl;
@@ -274,9 +274,9 @@ class u extends HTMLElement {
   attributeChangedCallback(t, e, i) {
     if (!this.isConnected || this.reflectGuard) return;
     this.readAttributes({ isInit: !1 });
-    const n = y(this, "index");
+    const n = w(this, "index");
     if (n != null) {
-      const s = d(Number(n), this.cards.length);
+      const s = u(Number(n), this.cards.length);
       if (Number.isFinite(s) && s !== this.currentIndex) {
         this.goTo(s);
         return;
@@ -292,13 +292,13 @@ class u extends HTMLElement {
   }
   goTo(t) {
     if (this.isAnimating) return;
-    const e = d(t, this.cards.length);
+    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());
   }
   refresh() {
     this.rebuildCardsFromLightDom();
-    const t = C(this, "start-index", 0), e = y(this, "index"), i = e != null ? Number(e) : t, n = Number.isFinite(i) ? i : 0;
-    this.currentIndex = d(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 = 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();
   }
   destroy() {
     this.animFallbackTimerId !== null && (window.clearTimeout(this.animFallbackTimerId), this.animFallbackTimerId = null), this.cleanup.forEach((t) => {
@@ -313,7 +313,7 @@ class u extends HTMLElement {
   }
   readAttributes(t) {
     this.rootEl || this.render();
-    const e = l(this, "show-arrows", !1), i = l(this, "show-dots", !1);
+    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");
@@ -322,17 +322,40 @@ class u extends HTMLElement {
     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((n) => {
-      n();
+    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 = (n) => {
-      if (!this.isAnimating || n.propertyName !== "transform" || !(n.target instanceof HTMLElement)) return;
-      const s = this.cards[this.currentIndex];
-      s && n.target === s && this.unlockAnimation();
+    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(
@@ -357,19 +380,19 @@ class u extends HTMLElement {
     const t = this.cards.length, e = /* @__PURE__ */ new Set();
     if (t <= 0) return e;
     const i = Math.floor(t / 2);
-    if (h >= i) {
+    if (f >= i) {
       for (let n = 0; n < t; n++) e.add(n);
       return e;
     }
-    for (let n = -h; n <= h; n++)
-      e.add(d(this.currentIndex + n, t));
+    for (let n = -f; n <= f; n++)
+      e.add(u(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 (!l(this, "show-dots", !1)) {
+    if (!h(this, "show-dots", !1)) {
       t.forEach((s) => {
         s.remove();
       }), this.dots = [];
@@ -385,17 +408,17 @@ class u extends HTMLElement {
     this.dots = i, this.updateDotsVisualState();
   }
   computeCardState(t) {
-    const e = this.cards.length, i = T(this.currentIndex, t, e), n = Math.abs(i);
+    const e = this.cards.length, i = L(this.currentIndex, t, e), n = Math.abs(i);
     return {
       index: t,
       delta: i,
       abs: n,
-      isVisible: n <= h,
+      isVisible: n <= f,
       isActive: t === this.currentIndex
     };
   }
   applyCardState(t, e) {
-    t.setAttribute("aria-hidden", e.isVisible ? "false" : "true"), t.dataset.active = e.isActive ? "true" : "false", 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));
+    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;
@@ -424,7 +447,7 @@ class u extends HTMLElement {
         }
         this.hasAppliedInitialLayout = !0, this.lastLayoutIndex = this.currentIndex, this.lastVisibleSet = this.getVisibleSet();
       }
-      this.updateDotsVisualState(), t.announce && l(this, "announce-changes", !0) && this.announce(`Slide ${this.currentIndex + 1} of ${this.cards.length}`), t.emitChange && this.emitChange();
+      this.updateDotsVisualState(), t.announce && h(this, "announce-changes", !0) && this.announce(`Slide ${this.currentIndex + 1} of ${this.cards.length}`), t.emitChange && this.emitChange();
     }
   }
   updateDotsVisualState() {
@@ -451,7 +474,7 @@ class u extends HTMLElement {
       this.unlockAnimation();
       return;
     }
-    const s = m(i.getPropertyValue("--cfc-transition-ms").trim(), 400), c = Math.max(n, s) + 60;
+    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);
@@ -488,8 +511,8 @@ class u extends HTMLElement {
   }
   applyStyles(t) {
     if (typeof t == "string") {
-      if (f(this.shadow)) {
-        const e = b(t);
+      if (v(this.shadow)) {
+        const e = S(t);
         if (e) {
           this.shadow.adoptedStyleSheets = [e], this.styleEl = null;
           return;
@@ -498,32 +521,44 @@ class u extends HTMLElement {
       this.styleEl || (this.styleEl = document.createElement("style")), this.styleEl.textContent = t;
       return;
     }
-    if (t && f(this.shadow)) {
+    if (t && v(this.shadow)) {
       this.shadow.adoptedStyleSheets = [t], this.styleEl = null;
       return;
     }
-    if (u.defaultStylesheet && f(this.shadow)) {
-      this.shadow.adoptedStyleSheets = [u.defaultStylesheet], this.styleEl = null;
+    if (p.defaultStylesheet && v(this.shadow)) {
+      this.shadow.adoptedStyleSheets = [p.defaultStylesheet], this.styleEl = null;
       return;
     }
     this.styleEl || (this.styleEl = document.createElement("style")), this.styleEl.textContent = I;
   }
 }
-function N(a = {}) {
-  const { selector: t = "coverflow-carousel", onReady: e, onChange: i, stylesheet: n } = a, s = Array.from(document.querySelectorAll(t));
-  return (e || i) && s.forEach((r) => {
-    e && r.addEventListener("coverflow-carousel:ready", (c) => {
-      e(r, c.detail);
-    }), i && r.addEventListener("coverflow-carousel:change", (c) => {
-      i(r, c.detail);
+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);
     });
-  }), n && s.forEach((r) => {
-    const c = r;
-    typeof n == "string" ? c.adoptStyles(n) : c.adoptStylesheet(n);
-  }), s;
+  }), 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, p);
 }
-customElements.get("coverflow-carousel") || customElements.define("coverflow-carousel", u);
 export {
-  D as coverflowCarouselCssText,
-  N as initCoverflowCarousels
+  p as CoverflowCarouselElement,
+  N as coverflowCarouselCssText,
+  F as initCoverflowCarousels,
+  D as registerCoverflowCarouselElement
 };

package/dist/index.umd.js

@@ -164,4 +164,4 @@
   white-space: nowrap;
   border: 0;
 }
-`,E=d;function m(a){return"adoptedStyleSheets"in a}function g(a){try{const t=new CSSStyleSheet;return t.replaceSync(a),t}catch{return null}}const A=g(d),S=d;function v(a){return a.split(",").map(t=>t.trim()).filter(Boolean)}function x(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 I(a,t){const e=v(a.transitionProperty),i=v(a.transitionDuration),n=v(a.transitionDelay);if(!e.length)return 0;const r=(F=>{const b=e.indexOf(F);if(b>=0)return b;const w=e.indexOf("all");return w>=0?w:-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",D=x(c,0),N=x(o,0);return Math.max(0,D+N)}function _(){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 k(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 y(a,t){const e=a.getAttribute(t);if(e==null)return null;const i=e.trim();return i||null}function u(a,t){return t<=0?0:(a%t+t)%t}function C(a,t,e){const i=t-a,n=e/2;return i>n?i-e:i<-n?i+e:i}const f=1;let T=0;class p extends HTMLElement{static defaultStylesheet=A;static observedAttributes=["start-index","index","show-dots","show-arrows","announce-changes"];shadow=this.attachShadow({mode:"open"});instanceId=`cfc-${++T}`;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=y(this,"index");if(n!=null){const s=u(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=u(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=k(this,"start-index",0),e=y(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=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=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")}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(n=>{n()}),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=n=>{if(!this.isAnimating||n.propertyName!=="transform"||!(n.target instanceof HTMLElement))return;const s=this.cards[this.currentIndex];s&&n.target===s&&this.unlockAnimation()};this.rootEl.addEventListener("transitionend",i),this.cleanup.push(()=>this.rootEl.removeEventListener("transitionend",i))}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(f>=i){for(let n=0;n<t;n++)e.add(n);return e}for(let n=-f;n<=f;n++)e.add(u(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(!h(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=C(this.currentIndex,t,e),n=Math.abs(i);return{index:t,delta:i,abs:n,isVisible:n<=f,isActive:t===this.currentIndex}}applyCardState(t,e){t.setAttribute("aria-hidden",e.isVisible?"false":"true"),t.dataset.active=e.isActive?"true":"false",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&&h(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(_()){this.unlockAnimation();return}const e=this.cards[this.currentIndex];if(!e){this.unlockAnimation();return}const i=getComputedStyle(e),n=I(i,"transform");if(n<=0){this.unlockAnimation();return}const s=x(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(m(this.shadow)){const e=g(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&&m(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(p.defaultStylesheet&&m(this.shadow)){this.shadow.adoptedStyleSheets=[p.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=S}}function L(a={}){const{selector:t="coverflow-carousel",onReady:e,onChange:i,stylesheet:n}=a,s=Array.from(document.querySelectorAll(t));return(e||i)&&s.forEach(r=>{e&&r.addEventListener("coverflow-carousel:ready",c=>{e(r,c.detail)}),i&&r.addEventListener("coverflow-carousel:change",c=>{i(r,c.detail)})}),n&&s.forEach(r=>{const c=r;typeof n=="string"?c.adoptStyles(n):c.adoptStylesheet(n)}),s}customElements.get("coverflow-carousel")||customElements.define("coverflow-carousel",p),l.coverflowCarouselCssText=E,l.initCoverflowCarousels=L,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+`,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"})}));

package/dist/init.d.ts

@@ -8,6 +8,11 @@ export type InitCoverflowCarouselsOptions = {
         index: number;
         length: number;
     }) => void;
+    onScratchComplete?: (el: HTMLElement, detail: {
+        index: number;
+        length: number;
+        percent: number;
+    }) => void;
     stylesheet?: CSSStyleSheet | string | null;
 };
 export declare function initCoverflowCarousels(options?: InitCoverflowCarouselsOptions): HTMLElement[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "coverflow-carousel",
-  "version": "0.1.0-dev.0",
-  "description": "Tiny coverflow carousel Web Component. Registers <coverflow-carousel> and exposes API via attributes + events.",
+  "version": "0.1.1-dev.0",
+  "description": "Tiny coverflow carousel Web Component. Exposes API via attributes + events (explicit element registration).",
   "author": "ux-ui.pro",
   "license": "MIT",
   "repository": {
@@ -12,7 +12,7 @@
     "url": "https://github.com/ux-ui-pro/coverflow-carousel/issues"
   },
   "homepage": "https://github.com/ux-ui-pro/coverflow-carousel",
-  "sideEffects": true,
+  "sideEffects": false,
   "scripts": {
     "clean": "rimraf dist",
     "build": "vite build",