coverflow-carousel 0.1.0-dev.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ux-ui.pro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,167 @@
+<p align="center"><strong>coverflow-carousel</strong></p>
+
+<div align="center">
+<p align="center">CoverflowCarousel is a tiny “coverflow”-style Web Component carousel. It registers <code>&lt;coverflow-carousel&gt;</code>, renders its children as a 3D card stack, is controlled via attributes, and dispatches events on ready and slide change.</p>
+
+[![npm](https://img.shields.io/npm/v/coverflow-carousel.svg?colorB=brightgreen)](https://www.npmjs.com/package/coverflow-carousel)
+[![GitHub package version](https://img.shields.io/github/package-json/v/ux-ui-pro/coverflow-carousel.svg)](https://github.com/ux-ui-pro/coverflow-carousel)
+[![NPM Downloads](https://img.shields.io/npm/dm/coverflow-carousel.svg?style=flat)](https://www.npmjs.org/package/coverflow-carousel)
+
+<a href="https://codepen.io/ux-ui/pen/qENrydj">Demo</a>
+</div>
+<br>
+
+➠ **Install**
+
+```console
+yarn add coverflow-carousel
+```
+<br>
+
+➠ **Import**
+
+```javascript
+// Registers <coverflow-carousel> via customElements.define(...)
+import 'coverflow-carousel';
+
+// Optional helper: subscribe to events + apply styles
+import { initCoverflowCarousels } from 'coverflow-carousel';
+```
+<br>
+
+➠ **Usage**
+
+```javascript
+// After import 'coverflow-carousel', the element is registered.
+// Then just use <coverflow-carousel> in your HTML (see below).
+```
+
+<sub>HTML: basic example</sub>
+```html
+<coverflow-carousel
+  start-index="0"
+  aria-label="Coverflow carousel"
+>
+  <img src="/images/1.jpg" alt="" />
+  <img src="/images/2.jpg" alt="" />
+  <img src="/images/3.jpg" alt="" />
+  <img src="/images/4.jpg" alt="" />
+  <img src="/images/5.jpg" alt="" />
+</coverflow-carousel>
+```
+
+<sub>JS: subscribe to events + optional styles</sub>
+```javascript
+import { initCoverflowCarousels, coverflowCarouselCssText } from 'coverflow-carousel';
+
+initCoverflowCarousels({
+  selector: 'coverflow-carousel',
+  onReady: (el, detail) => {
+    // detail: { index, length }
+    el.classList.add('is-ready');
+    console.log('ready', detail);
+  },
+  onChange: (_el, detail) => {
+    console.log('change', detail);
+  },
+  onScratchComplete: (el, detail) => {
+    // detail: { index, length, percent }
+    console.log('scratch complete', detail);
+
+    // Example sequence: auto-advance first 2, then finish on 3rd.
+    if (detail.index === 0) (el as any).goTo?.(1);
+    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,
+});
+```
+
+<sub>JS: custom styles from `?raw` (CSS/SCSS)</sub>
+```javascript
+import { initCoverflowCarousels } from 'coverflow-carousel';
+import MyCfcCss from './assets/cfc.custom.css?raw';
+
+initCoverflowCarousels({
+  stylesheet: MyCfcCss,
+});
+```
+
+<sub>JS: default styles shipped with the package</sub>
+```javascript
+import { initCoverflowCarousels, coverflowCarouselCssText } from 'coverflow-carousel';
+
+initCoverflowCarousels({
+  stylesheet: coverflowCarouselCssText,
+});
+```
+
+<sub>JS: manual control (prev/next/goTo/refresh)</sub>
+```javascript
+const el = document.querySelector('coverflow-carousel');
+// @ts-expect-error: methods exist on the custom element instance after import
+el?.prev();
+// @ts-expect-error
+el?.next();
+// @ts-expect-error
+el?.goTo(2);
+// @ts-expect-error: if you added/removed slides dynamically — call refresh()
+el?.refresh();
+```
+<br>
+
+➠ **Options**
+
+| Option (attribute) | Type | Default | Description |
+|:--------------------:|:-----------------------:|:------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `start-index` | `number` | `0` | Start index if `index` is not set. |
+| `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>
+
+➠ **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). |
+| `coverflow-carousel:change` | `{ index: number, length: number }` | Fired on active slide change via `prev/next/goTo` (and when `index` is updated externally). |
+| `coverflow-carousel:scratch-complete` | `{ index: number, length: number, percent: number }` | Fired when a descendant `<scratch-reveal>` dispatches `complete` for a slide. |
+
+<br>
+
+➠ **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`). |
+| `prev(): void` | Go to the previous slide (circular). |
+| `next(): void` | Go to the next slide (circular). |
+| `goTo(index: number): void` | Go to the given index (circular normalization). While animating, repeated transitions are ignored. |
+| `refresh(): void` | Rebuilds cards from current `children` (useful after dynamic changes) and dispatches `coverflow-carousel:ready`. |
+| `destroy(): void` | Removes event handlers and cancels animation-related timers. |
+| `adoptStylesheet(sheet: CSSStyleSheet): void` | Applies a stylesheet via `adoptedStyleSheets` (when supported). |
+| `adoptStyles(styles: CSSStyleSheet \| string \| null): void` | Applies styles: string via `adoptedStyleSheets` (when possible) or `<style>` fallback in the shadow root; `null` restores the package default styles. |
+
+<br>
+
+➠ **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).
+- `prefers-reduced-motion` is respected: when enabled, the animation lock is released without waiting for `transitionend`.
+- The carousel always shows **3 visible cards** (center + neighbors).
+- By default, arrows and dots are hidden. Add `show-arrows` / `show-dots` attributes to show them.
+- Transition speed and easing are controlled via CSS variables `--cfc-transition-ms` and `--cfc-easing`.
+
+<br>
+
+➠ **License**
+
+coverflow-carousel is released under MIT license

package/dist/coverflow-carousel.css

@@ -0,0 +1 @@
+:host{width:100%;height:100%;display:block;overflow:hidden;container-type:inline-size}.cfc{--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;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}

package/dist/element/CoverflowCarouselElement.d.ts

@@ -0,0 +1,52 @@
+import { StylesInput } from '../styles';
+export declare class CoverflowCarouselElement extends HTMLElement {
+    static defaultStylesheet: CSSStyleSheet | null;
+    static observedAttributes: string[];
+    private readonly shadow;
+    private readonly instanceId;
+    private rootEl;
+    private trackEl;
+    private dotsEl;
+    private prevBtn;
+    private nextBtn;
+    private liveRegion;
+    private styleEl;
+    private cards;
+    private dots;
+    private currentIndex;
+    private isAnimating;
+    private hasAppliedInitialLayout;
+    private lastLayoutIndex;
+    private lastVisibleSet;
+    private pendingAnimToken;
+    private animFallbackTimerId;
+    private cleanup;
+    private reflectGuard;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void;
+    next(): void;
+    prev(): void;
+    goTo(index: number): void;
+    refresh(): void;
+    destroy(): void;
+    adoptStylesheet(sheet: CSSStyleSheet): void;
+    adoptStyles(styles: StylesInput): void;
+    private readAttributes;
+    private render;
+    private bindEvents;
+    private rebuildCardsFromLightDom;
+    private getVisibleSet;
+    private buildDots;
+    private computeCardState;
+    private applyCardState;
+    private applyLayoutAndA11y;
+    private updateDotsVisualState;
+    private lockUntilTransitionEnd;
+    private unlockAnimation;
+    private emitChange;
+    private dispatchReady;
+    private announce;
+    private reflectIndexAttr;
+    private applyStyles;
+}

package/dist/index.cjs.js

@@ -0,0 +1,167 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=`:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  container-type: inline-size;
+  overflow: hidden;
+}
+
+.cfc {
+  /* Layout */
+  --cfc-card-ar-num: 1.25;
+  --cfc-card-w: clamp(160px, 100vw - 120px, 380px);
+  --cfc-card-ar: 1 / var(--cfc-card-ar-num);
+
+  /* Motion / depth */
+  --cfc-step-x: min(22vw, 250px);
+  --cfc-step-z: calc(var(--cfc-card-w) * 0.5);
+
+  /* Visual falloff */
+  --cfc-scale-step: 0.1;
+
+  /* Transitions */
+  --cfc-transition-ms: 550ms;
+  --cfc-easing: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+  /* Controls */
+  --cfc-arrow-size: 50px;
+
+  /* CSS-only "parking strategy" for hidden cards */
+  --cfc-park-x: 0px;
+  --cfc-park-z: calc(var(--cfc-step-z) * -6);
+  --cfc-park-scale: 0.1;
+
+  margin: auto;
+  width: min(900px, 100%);
+  height: 100%;
+  position: relative;
+  perspective: 1000px;
+}
+
+.cfc__track {
+  width: 100%;
+  height: calc(var(--cfc-card-w) * var(--cfc-card-ar-num));
+  position: relative;
+  transform-style: preserve-3d;
+}
+
+.cfc__card {
+  /* Inputs from JS */
+  --cfc-delta: 0;
+  --cfc-abs: 0;
+
+  /* Derived values */
+  --cfc-scale: clamp(0.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));
+
+  /* Effective values (can be overridden when hidden/active) */
+  --cfc-scale-effective: var(--cfc-scale);
+  --cfc-x-effective: var(--cfc-x);
+  --cfc-z-effective: var(--cfc-z);
+
+  pointer-events: auto;
+
+  position: absolute;
+  inset: 50% 0 0 50%;
+  width: var(--cfc-card-w);
+  aspect-ratio: var(--cfc-card-ar);
+  overflow: hidden;
+
+  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);
+}
+
+.cfc__card[aria-hidden="false"] {
+  will-change: transform;
+}
+
+.cfc__card[aria-hidden="true"] {
+  /* CSS-only parking strategy */
+  --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 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: center;
+}
+
+.cfc__arrow {
+  position: absolute;
+  top: calc(50% - var(--cfc-arrow-size));
+  width: var(--cfc-arrow-size);
+  height: var(--cfc-arrow-size);
+  border: none;
+  background: Crimson;
+  cursor: pointer;
+  z-index: 50;
+  transition: background 0.25s ease;
+}
+
+.cfc__arrow:hover {
+  background: LightGray;
+}
+
+.cfc__arrow--left {
+  left: 20px;
+}
+
+.cfc__arrow--right {
+  right: 20px;
+}
+
+.cfc__dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 50px;
+}
+
+.cfc__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: LightGray;
+  cursor: default;
+  transition:
+    transform 0.25s ease,
+    background 0.25s ease;
+}
+
+.cfc__dot[data-active="true"] {
+  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;
+}
+`,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;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { CoverflowCarouselElement } from './element/CoverflowCarouselElement';
+import { initCoverflowCarousels } from './init';
+import { coverflowCarouselCssText } from './styles';
+declare global {
+    interface HTMLElementTagNameMap {
+        'coverflow-carousel': CoverflowCarouselElement;
+    }
+}
+export { coverflowCarouselCssText, initCoverflowCarousels };

package/dist/index.es.js

@@ -0,0 +1,529 @@
+const v = `:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  container-type: inline-size;
+  overflow: hidden;
+}
+
+.cfc {
+  /* Layout */
+  --cfc-card-ar-num: 1.25;
+  --cfc-card-w: clamp(160px, 100vw - 120px, 380px);
+  --cfc-card-ar: 1 / var(--cfc-card-ar-num);
+
+  /* Motion / depth */
+  --cfc-step-x: min(22vw, 250px);
+  --cfc-step-z: calc(var(--cfc-card-w) * 0.5);
+
+  /* Visual falloff */
+  --cfc-scale-step: 0.1;
+
+  /* Transitions */
+  --cfc-transition-ms: 550ms;
+  --cfc-easing: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+  /* Controls */
+  --cfc-arrow-size: 50px;
+
+  /* CSS-only "parking strategy" for hidden cards */
+  --cfc-park-x: 0px;
+  --cfc-park-z: calc(var(--cfc-step-z) * -6);
+  --cfc-park-scale: 0.1;
+
+  margin: auto;
+  width: min(900px, 100%);
+  height: 100%;
+  position: relative;
+  perspective: 1000px;
+}
+
+.cfc__track {
+  width: 100%;
+  height: calc(var(--cfc-card-w) * var(--cfc-card-ar-num));
+  position: relative;
+  transform-style: preserve-3d;
+}
+
+.cfc__card {
+  /* Inputs from JS */
+  --cfc-delta: 0;
+  --cfc-abs: 0;
+
+  /* Derived values */
+  --cfc-scale: clamp(0.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));
+
+  /* Effective values (can be overridden when hidden/active) */
+  --cfc-scale-effective: var(--cfc-scale);
+  --cfc-x-effective: var(--cfc-x);
+  --cfc-z-effective: var(--cfc-z);
+
+  pointer-events: auto;
+
+  position: absolute;
+  inset: 50% 0 0 50%;
+  width: var(--cfc-card-w);
+  aspect-ratio: var(--cfc-card-ar);
+  overflow: hidden;
+
+  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);
+}
+
+.cfc__card[aria-hidden="false"] {
+  will-change: transform;
+}
+
+.cfc__card[aria-hidden="true"] {
+  /* CSS-only parking strategy */
+  --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 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: center;
+}
+
+.cfc__arrow {
+  position: absolute;
+  top: calc(50% - var(--cfc-arrow-size));
+  width: var(--cfc-arrow-size);
+  height: var(--cfc-arrow-size);
+  border: none;
+  background: Crimson;
+  cursor: pointer;
+  z-index: 50;
+  transition: background 0.25s ease;
+}
+
+.cfc__arrow:hover {
+  background: LightGray;
+}
+
+.cfc__arrow--left {
+  left: 20px;
+}
+
+.cfc__arrow--right {
+  right: 20px;
+}
+
+.cfc__dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 50px;
+}
+
+.cfc__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: LightGray;
+  cursor: default;
+  transition:
+    transform 0.25s ease,
+    background 0.25s ease;
+}
+
+.cfc__dot[data-active="true"] {
+  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 = 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 S = b(v), I = 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 _(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 k() {
+  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 C(a, t, e) {
+  const i = a.getAttribute(t);
+  if (i == null) return e;
+  const n = Number(i.trim());
+  return Number.isFinite(n) ? Math.trunc(n) : e;
+}
+function 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 T(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;
+  static observedAttributes = [
+    "start-index",
+    "index",
+    "show-dots",
+    "show-arrows",
+    "announce-changes"
+  ];
+  shadow = this.attachShadow({ mode: "open" });
+  instanceId = `cfc-${++L}`;
+  rootEl;
+  trackEl;
+  dotsEl;
+  prevBtn;
+  nextBtn;
+  liveRegion;
+  styleEl = null;
+  cards = [];
+  dots = [];
+  currentIndex = 0;
+  isAnimating = !1;
+  hasAppliedInitialLayout = !1;
+  lastLayoutIndex = null;
+  lastVisibleSet = /* @__PURE__ */ 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 = 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();
+  }
+  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 = /* @__PURE__ */ new Set();
+  }
+  getVisibleSet() {
+    const t = this.cards.length, e = /* @__PURE__ */ new Set();
+    if (t <= 0) return e;
+    const i = Math.floor(t / 2);
+    if (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 = T(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 = /* @__PURE__ */ new Set();
+        this.lastVisibleSet.forEach((n) => {
+          i.add(n);
+        }), e.forEach((n) => {
+          i.add(n);
+        }), this.lastLayoutIndex != null && i.add(this.lastLayoutIndex), i.add(this.currentIndex), i.forEach((n) => {
+          const s = this.cards[n];
+          if (!s) return;
+          const r = this.computeCardState(n);
+          this.applyCardState(s, r);
+        }), this.lastLayoutIndex = this.currentIndex, this.lastVisibleSet = e;
+      } else {
+        for (let e = 0; e < this.cards.length; e++) {
+          const 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 (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 = 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 = 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);
+    });
+  }), 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);
+export {
+  D as coverflowCarouselCssText,
+  N as initCoverflowCarousels
+};

package/dist/index.umd.js

@@ -0,0 +1,167 @@
+(function(l,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(l=typeof globalThis<"u"?globalThis:l||self,d(l.CoverflowCarousel={}))})(this,(function(l){"use strict";const d=`:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  container-type: inline-size;
+  overflow: hidden;
+}
+
+.cfc {
+  /* Layout */
+  --cfc-card-ar-num: 1.25;
+  --cfc-card-w: clamp(160px, 100vw - 120px, 380px);
+  --cfc-card-ar: 1 / var(--cfc-card-ar-num);
+
+  /* Motion / depth */
+  --cfc-step-x: min(22vw, 250px);
+  --cfc-step-z: calc(var(--cfc-card-w) * 0.5);
+
+  /* Visual falloff */
+  --cfc-scale-step: 0.1;
+
+  /* Transitions */
+  --cfc-transition-ms: 550ms;
+  --cfc-easing: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+  /* Controls */
+  --cfc-arrow-size: 50px;
+
+  /* CSS-only "parking strategy" for hidden cards */
+  --cfc-park-x: 0px;
+  --cfc-park-z: calc(var(--cfc-step-z) * -6);
+  --cfc-park-scale: 0.1;
+
+  margin: auto;
+  width: min(900px, 100%);
+  height: 100%;
+  position: relative;
+  perspective: 1000px;
+}
+
+.cfc__track {
+  width: 100%;
+  height: calc(var(--cfc-card-w) * var(--cfc-card-ar-num));
+  position: relative;
+  transform-style: preserve-3d;
+}
+
+.cfc__card {
+  /* Inputs from JS */
+  --cfc-delta: 0;
+  --cfc-abs: 0;
+
+  /* Derived values */
+  --cfc-scale: clamp(0.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));
+
+  /* Effective values (can be overridden when hidden/active) */
+  --cfc-scale-effective: var(--cfc-scale);
+  --cfc-x-effective: var(--cfc-x);
+  --cfc-z-effective: var(--cfc-z);
+
+  pointer-events: auto;
+
+  position: absolute;
+  inset: 50% 0 0 50%;
+  width: var(--cfc-card-w);
+  aspect-ratio: var(--cfc-card-ar);
+  overflow: hidden;
+
+  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);
+}
+
+.cfc__card[aria-hidden="false"] {
+  will-change: transform;
+}
+
+.cfc__card[aria-hidden="true"] {
+  /* CSS-only parking strategy */
+  --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 {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: center;
+}
+
+.cfc__arrow {
+  position: absolute;
+  top: calc(50% - var(--cfc-arrow-size));
+  width: var(--cfc-arrow-size);
+  height: var(--cfc-arrow-size);
+  border: none;
+  background: Crimson;
+  cursor: pointer;
+  z-index: 50;
+  transition: background 0.25s ease;
+}
+
+.cfc__arrow:hover {
+  background: LightGray;
+}
+
+.cfc__arrow--left {
+  left: 20px;
+}
+
+.cfc__arrow--right {
+  right: 20px;
+}
+
+.cfc__dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 50px;
+}
+
+.cfc__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: LightGray;
+  cursor: default;
+  transition:
+    transform 0.25s ease,
+    background 0.25s ease;
+}
+
+.cfc__dot[data-active="true"] {
+  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;
+}
+`,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"})}));

package/dist/init.d.ts

@@ -0,0 +1,13 @@
+export type InitCoverflowCarouselsOptions = {
+    selector?: string;
+    onReady?: (el: HTMLElement, detail: {
+        index: number;
+        length: number;
+    }) => void;
+    onChange?: (el: HTMLElement, detail: {
+        index: number;
+        length: number;
+    }) => void;
+    stylesheet?: CSSStyleSheet | string | null;
+};
+export declare function initCoverflowCarousels(options?: InitCoverflowCarouselsOptions): HTMLElement[];

package/dist/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const coverflowCarouselCssText: string;
+export type StylesInput = CSSStyleSheet | string | null | undefined;
+export declare function supportsAdoptedStyleSheets(root: ShadowRoot): boolean;
+export declare function makeConstructableSheet(cssText: string): CSSStyleSheet | null;
+export declare const DEFAULT_STYLESHEET: CSSStyleSheet | null;
+export declare const DEFAULT_CSS_TEXT_RAW: string;

package/dist/utils/css.d.ts

@@ -0,0 +1,3 @@
+export declare function parseDurationToMs(raw: string, fallbackMs: number): number;
+export declare function getTransitionMsForPropertyFromComputedStyle(cs: CSSStyleDeclaration, prop: string): number;
+export declare function getTransitionMsForProperty(el: HTMLElement, prop: string): number;

package/dist/utils/dom.d.ts

@@ -0,0 +1,4 @@
+export declare function prefersReducedMotion(): boolean;
+export declare function hasBoolAttr(el: HTMLElement, name: string, defaultValue: boolean): boolean;
+export declare function readIntAttr(el: HTMLElement, name: string, fallback: number): number;
+export declare function readStringAttr(el: HTMLElement, name: string): string | null;

package/dist/utils/math.d.ts

@@ -0,0 +1,2 @@
+export declare function normalizeIndex(index: number, length: number): number;
+export declare function circularDelta(from: number, to: number, n: number): number;

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "coverflow-carousel",
+  "version": "0.1.0-dev.0",
+  "description": "Tiny coverflow carousel Web Component. Registers <coverflow-carousel> and exposes API via attributes + events.",
+  "author": "ux-ui.pro",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ux-ui-pro/coverflow-carousel.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ux-ui-pro/coverflow-carousel/issues"
+  },
+  "homepage": "https://github.com/ux-ui-pro/coverflow-carousel",
+  "sideEffects": true,
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "vite build",
+    "dev": "vite",
+    "verify": "yarn lint && yarn typecheck",
+    "lint": "biome check src",
+    "lint:fix": "biome check --write src",
+    "format": "biome format --write src",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "source": "src/index.ts",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./coverflow-carousel.css": "./dist/coverflow-carousel.css",
+    "./dist/*": "./dist/*"
+  },
+  "files": [
+    "dist/"
+  ],
+  "devDependencies": {
+    "@biomejs/biome": "2.3.10",
+    "@types/node": "25.0.3",
+    "lightningcss": "1.30.2",
+    "rimraf": "6.1.2",
+    "typescript": "5.9.3",
+    "vite": "7.3.0",
+    "vite-plugin-dts": "4.5.4"
+  },
+  "keywords": [
+    "typescript",
+    "frontend",
+    "library",
+    "carousel",
+    "coverflow",
+    "web component",
+    "web-component",
+    "custom elements",
+    "custom-elements",
+    "shadow dom",
+    "shadow-dom",
+    "ui",
+    "component",
+    "accessibility",
+    "a11y",
+    "coverflow-carousel"
+  ]
+}