atomicuilibrary 0.0.1

package/dist/collection/components/carousel/carousel.js

@@ -0,0 +1,1512 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Carousel Component
+ * Features: responsive, auto/manual scroll, vertical/horizontal, infinite, touch, keyboard, indicators, arrows, slots
+ */
+export class Carousel {
+    el;
+    /** Slides to show at once (responsive) */
+    slidesToShow = 1;
+    /** Slides to scroll per action */
+    slidesToScroll = 1;
+    /** Enable infinite looping */
+    infinite = true;
+    /** Enable autoplay */
+    autoplay = false;
+    /** Autoplay interval (ms) */
+    autoplayInterval = 3000;
+    /** Show navigation arrows */
+    arrows = true;
+    /** Show indicators (dots) */
+    indicators = true;
+    /** Vertical mode */
+    vertical = false;
+    /** Responsive breakpoints */
+    responsive = '';
+    /** Enable swipe/touch */
+    swipe = true;
+    /** Enable keyboard navigation */
+    keyboard = true;
+    /** Pause autoplay on hover */
+    pauseOnHover = true;
+    /** Custom previous arrow template */
+    prevArrow = '<';
+    /** Custom next arrow template */
+    nextArrow = '>';
+    /** Disable infinite looping */
+    loop = true;
+    /** Animation duration (ms) */
+    animationDuration = 500;
+    /** Animation easing function */
+    animationEasing = 'cubic-bezier(0.4,0,0.2,1)';
+    /** Carousel width */
+    width = '100%';
+    /** Carousel height */
+    height = '400px';
+    /** Transition effect */
+    effect = 'slide';
+    /** Enable center mode */
+    centerMode = false;
+    /** Padding for center mode (e.g., '50px') */
+    centerPadding = '50px';
+    /** Enable mouse dragging */
+    enableDrag = true;
+    /** Enable variable width slides */
+    variableWidth = false;
+    /** Show autoplay progress bar */
+    showProgress = false;
+    /** Show slide counter (e.g. 1/10) */
+    showCounter = false;
+    /** Enable auto-height (adjusts to content) */
+    autoHeight = false;
+    /** Pause on interaction (clicks/drags) */
+    pauseOnInteract = true;
+    /** Selector of another carousel to sync with (e.g., '#thumbSlider') */
+    asNavFor = '';
+    /** Enable parallax effect for slide content */
+    parallax = false;
+    /** Enable lazy loading of images inside slides */
+    lazyLoad = false;
+    /** Zoom effect on the active slide (Center Mode recommended) */
+    zoomActive = false;
+    /** Type of navigation indicators: 'dots', 'segments' (stories-style), or 'pie' (circular) */
+    indicatorsType = 'dots';
+    /** Staggered animations for elements inside the active slide (e.g. titles, buttons) */
+    animateContent = false;
+    /** Use stories-style progress indicators (segments) - DEPRECATED: use indicatorsType='segments' instead */
+    useProgressSegments = false;
+    /** Enable mouse wheel navigation */
+    mouseWheel = false;
+    /** Enable continuous 'Ticker' mode (smooth scrolling without pauses) */
+    ticker = false;
+    /** Speed for ticker mode (pixels per frame, approx 1-3 for smooth motion) */
+    tickerSpeed = 1;
+    /** Position of navigation arrows */
+    arrowsPosition = 'sides';
+    current = 0;
+    slidesCount = 0;
+    isHovered = false;
+    containerWidth = 0;
+    containerHeight = 0;
+    isDragging = false;
+    dragOffset = 0;
+    autoplayProgress = 0;
+    isFullscreen = false;
+    trackTranslate = 'translateX(0px)';
+    tickerOffset = 0;
+    beforeChange;
+    afterChange;
+    intervalId = null;
+    progressInterval = null;
+    tickerRaf = 0;
+    animationTimer = null;
+    startX = 0;
+    startY = 0;
+    observer;
+    onCurrentChange() {
+        this.updateActiveSlides();
+    }
+    onSlidesToShowChange() {
+        this.updateSlidesCount();
+    }
+    updateSlidesCount = () => {
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        const slides = slot ? slot.assignedElements() : Array.from(this.el.children);
+        this.slidesCount = slides.length;
+        // For stack-based 3D effects, we want items to be full-size so CSS can scale them.
+        const isStackEffect = ['fade', 'flip', 'cube', 'coverflow', 'stack', 'depth', 'ken-burns', 'wheel'].includes(this.effect);
+        const effectiveSlidesToShow = isStackEffect ? 1 : Math.min(this.slidesToShow, this.slidesCount);
+        const slideWidth = `${100 / effectiveSlidesToShow}%`;
+        slides.forEach((slide) => {
+            const htmlSlide = slide;
+            if (!this.variableWidth) {
+                htmlSlide.style.width = slideWidth;
+            }
+            htmlSlide.style.flexShrink = '0';
+        });
+    };
+    updateActiveSlides = () => {
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        const slides = slot ? slot.assignedElements() : Array.from(this.el.children);
+        const isStackEffect = ['fade', 'flip', 'cube', 'coverflow', 'stack', 'depth', 'ken-burns', 'wheel'].includes(this.effect);
+        const effectiveSlidesToShow = isStackEffect ? 1 : Math.min(this.slidesToShow, this.slidesCount);
+        // Pixel-based offset for variable width to avoid blank spaces
+        if (this.variableWidth && this.effect === 'slide') {
+            let offsetPx = 0;
+            for (let i = 0; i < this.current; i++) {
+                offsetPx += slides[i].offsetWidth || 0;
+            }
+            this.trackTranslate = this.vertical ? `translateY(-${offsetPx}px)` : `translateX(-${offsetPx}px)`;
+        }
+        slides.forEach((slide, index) => {
+            const isActive = index === this.current;
+            const offset = index - this.current;
+            const isVisible = isStackEffect
+                ? (Math.abs(offset) <= 1)
+                : (index >= this.current && index < this.current + effectiveSlidesToShow);
+            slide.setAttribute('data-index', index.toString());
+            slide.setAttribute('data-offset', offset.toString());
+            if (isActive) {
+                slide.setAttribute('data-active', 'true');
+                slide.setAttribute('aria-hidden', 'false');
+            }
+            else {
+                slide.removeAttribute('data-active');
+                slide.setAttribute('aria-hidden', 'true');
+            }
+            if (isVisible) {
+                slide.setAttribute('data-visible', 'true');
+            }
+            else {
+                slide.removeAttribute('data-visible');
+            }
+        });
+        if (this.autoHeight) {
+            this.syncHeight();
+        }
+    };
+    syncHeight() {
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        const activeSlide = slot?.assignedElements()[this.current];
+        if (activeSlide) {
+            const h = activeSlide.offsetHeight;
+            if (h > 0)
+                this.height = `${h}px`;
+        }
+    }
+    componentWillLoad() {
+        this.updateSlidesCount();
+        this.updateResponsive();
+        this.updateActiveSlides();
+    }
+    componentDidLoad() {
+        if (this.ticker) {
+            this.startTicker();
+        }
+        else if (this.autoplay) {
+            this.startAutoplay();
+        }
+        window.addEventListener('resize', this.updateResponsive);
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+        if (this.lazyLoad) {
+            this.setupLazyLoading();
+        }
+    }
+    _ariaAnnouncement = '';
+    setupLazyLoading() {
+        if (this.observer)
+            this.observer.disconnect();
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    if (img.dataset.src) {
+                        img.src = img.dataset.src;
+                        img.removeAttribute('data-src');
+                    }
+                    this.observer.unobserve(entry.target);
+                }
+            });
+        }, { root: this.el, rootMargin: '400px' });
+        // Use querySelectorAll to find images in light DOM (slots)
+        const lazyImages = this.el.querySelectorAll('img[data-src]');
+        lazyImages.forEach(img => this.observer.observe(img));
+    }
+    handleVisibilityChange = () => {
+        if (document.hidden) {
+            this.stopAutoplay();
+            this.stopTicker();
+        }
+        else {
+            if (this.ticker)
+                this.startTicker();
+            else if (this.autoplay)
+                this.startAutoplay();
+        }
+    };
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateResponsive);
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+        // Clean up drag listeners in case the component is destroyed mid-drag.
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('mouseup', this.onMouseUp);
+        this.isDragging = false;
+        this.stopAutoplay();
+        this.stopTicker();
+        if (this.animationTimer)
+            clearTimeout(this.animationTimer);
+        if (this.observer)
+            this.observer.disconnect();
+    }
+    onMouseEnter() {
+        this.isHovered = true;
+        if (this.pauseOnHover) {
+            this.stopAutoplay();
+            this.stopTicker();
+        }
+    }
+    onMouseLeave() {
+        this.isHovered = false;
+        if (this.pauseOnHover) {
+            if (this.ticker)
+                this.startTicker();
+            else if (this.autoplay)
+                this.startAutoplay();
+        }
+    }
+    handleWheel(e) {
+        if (!this.mouseWheel)
+            return;
+        if (Math.abs(e.deltaX) > 10 || Math.abs(e.deltaY) > 10) {
+            e.preventDefault();
+            if (this.vertical) {
+                e.deltaY > 0 ? this.next() : this.prev();
+            }
+            else {
+                e.deltaX > 0 ? this.next() : this.prev();
+            }
+        }
+    }
+    async toggleFullscreen() {
+        this.isFullscreen = !this.isFullscreen;
+    }
+    async next() {
+        this.goTo(this.current + this.slidesToScroll);
+    }
+    async prev() {
+        this.goTo(this.current - this.slidesToScroll);
+    }
+    async refresh() {
+        this.updateSlidesCount();
+        this.updateActiveSlides();
+    }
+    async goTo(index) {
+        let next = index;
+        const from = this.current;
+        if (this.infinite && !this.variableWidth) {
+            if (next < 0)
+                next = this.slidesCount - 1;
+            if (next >= this.slidesCount)
+                next = 0;
+        }
+        else {
+            // In variable width or non-infinite, cap at the last feasible item
+            const limit = this.variableWidth ? this.slidesCount - 1 : this.slidesCount - this.slidesToShow;
+            next = Math.max(0, Math.min(next, limit));
+        }
+        if (from !== next) {
+            this.beforeChange.emit({ from, to: next });
+            this.current = next;
+            this.resetAutoplayProgress();
+            // Sync with other carousel if asNavFor is set
+            if (this.asNavFor) {
+                const other = document.querySelector(this.asNavFor);
+                if (other && typeof other.goTo === 'function') {
+                    other.goTo(next);
+                }
+            }
+            this.animationTimer = setTimeout(() => {
+                this._ariaAnnouncement = `Slide ${this.current + 1} of ${this.slidesCount}`;
+                this.afterChange.emit({ current: this.current });
+                this.animationTimer = null;
+            }, this.animationDuration);
+        }
+    }
+    updateResponsive = () => {
+        // Example: responsive='[{"breakpoint":600,"slidesToShow":1},{"breakpoint":900,"slidesToShow":2}]'
+        if (!this.responsive)
+            return;
+        try {
+            const breakpoints = JSON.parse(this.responsive);
+            const width = window.innerWidth;
+            let slides = this.slidesToShow;
+            breakpoints.forEach((bp) => {
+                if (width <= bp.breakpoint)
+                    slides = bp.slidesToShow;
+            });
+            this.slidesToShow = slides;
+        }
+        catch { }
+        this.updateSlidesCount();
+    };
+    startAutoplay = () => {
+        if (this.intervalId)
+            return;
+        const startTime = Date.now();
+        this.intervalId = setInterval(() => {
+            if (!this.isHovered && !this.isDragging) {
+                this.next();
+            }
+        }, this.autoplayInterval);
+        if (this.showProgress) {
+            this.progressInterval = setInterval(() => {
+                if (!this.isHovered && !this.isDragging) {
+                    const elapsed = Date.now() - startTime;
+                    this.autoplayProgress = (elapsed % this.autoplayInterval) / this.autoplayInterval * 100;
+                }
+            }, 16);
+        }
+    };
+    startTicker = () => {
+        if (this.tickerRaf)
+            return;
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        const slides = slot ? slot.assignedElements() : Array.from(this.el.children);
+        if (slides.length === 0)
+            return;
+        const animate = () => {
+            if (!this.isHovered && !this.isDragging) {
+                this.tickerOffset -= this.tickerSpeed;
+                // Loop back when we've moved a full slide set (simplification)
+                // For a true industrial ticker, we would clone slides, but here we can modulate.
+                const totalWidth = slides.reduce((acc, curr) => acc + curr.offsetWidth, 0);
+                if (Math.abs(this.tickerOffset) >= totalWidth && this.infinite) {
+                    this.tickerOffset = 0;
+                }
+                this.trackTranslate = this.vertical
+                    ? `translateY(${this.tickerOffset}px)`
+                    : `translateX(${this.tickerOffset}px)`;
+            }
+            this.tickerRaf = requestAnimationFrame(animate);
+        };
+        this.tickerRaf = requestAnimationFrame(animate);
+    };
+    stopTicker = () => {
+        if (this.tickerRaf)
+            cancelAnimationFrame(this.tickerRaf);
+        this.tickerRaf = 0;
+    };
+    resetAutoplayProgress = () => {
+        if (this.autoplay) {
+            this.stopAutoplay();
+            this.startAutoplay();
+        }
+    };
+    stopAutoplay = () => {
+        if (this.intervalId)
+            clearInterval(this.intervalId);
+        if (this.progressInterval)
+            clearInterval(this.progressInterval);
+        this.intervalId = null;
+        this.progressInterval = null;
+        this.autoplayProgress = 0;
+    };
+    onIndicatorClick = (idx) => {
+        this.goTo(idx);
+    };
+    onArrowClick = (dir) => {
+        dir === 'prev' ? this.prev() : this.next();
+    };
+    onKeyDown = (e) => {
+        if (!this.keyboard)
+            return;
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
+            this.prev();
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown')
+            this.next();
+    };
+    onTouchStartX = 0;
+    onTouchStartY = 0;
+    onTouchMove = (e) => {
+        if (!this.swipe)
+            return;
+        const touch = e.touches[0];
+        const dx = touch.clientX - this.onTouchStartX;
+        const dy = touch.clientY - this.onTouchStartY;
+        if (this.vertical && Math.abs(dy) > 30) {
+            if (dy > 0)
+                this.prev();
+            else
+                this.next();
+        }
+        else if (!this.vertical && Math.abs(dx) > 30) {
+            if (dx > 0)
+                this.prev();
+            else
+                this.next();
+        }
+    };
+    onTouchStart = (e) => {
+        if (!this.swipe)
+            return;
+        const touch = e.touches[0];
+        this.onTouchStartX = touch.clientX;
+        this.onTouchStartY = touch.clientY;
+        this.isDragging = true;
+        this.dragOffset = 0;
+    };
+    onTouchEnd = () => {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        if (Math.abs(this.dragOffset) > 50) {
+            if (this.dragOffset > 0)
+                this.prev();
+            else
+                this.next();
+        }
+        this.dragOffset = 0;
+    };
+    // Mouse drag support
+    handleMouseDown = (e) => {
+        if (!this.enableDrag)
+            return;
+        this.isDragging = true;
+        this.startX = e.clientX;
+        this.startY = e.clientY;
+        this.dragOffset = 0;
+        window.addEventListener('mousemove', this.onMouseMove);
+        window.addEventListener('mouseup', this.onMouseUp);
+    };
+    onMouseMove = (e) => {
+        if (!this.isDragging)
+            return;
+        const dx = e.clientX - this.startX;
+        const dy = e.clientY - this.startY;
+        this.dragOffset = this.vertical ? dy : dx;
+    };
+    onMouseUp = () => {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        if (Math.abs(this.dragOffset) > 50) {
+            if (this.dragOffset > 0)
+                this.prev();
+            else
+                this.next();
+            if (this.pauseOnInteract)
+                this.stopAutoplay();
+        }
+        this.dragOffset = 0;
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('mouseup', this.onMouseUp);
+    };
+    render() {
+        const isHorizontal = !this.vertical;
+        const style = isHorizontal ? { width: '100%', flexDirection: 'row' } : { height: '100%', flexDirection: 'column' };
+        const prevDisabled = !this.infinite && this.current === 0;
+        const nextDisabled = !this.infinite && this.current >= this.slidesCount - this.slidesToShow;
+        const renderArrow = (dir) => {
+            const isDisabled = dir === 'prev' ? prevDisabled : nextDisabled;
+            return (h("ui-button", { variant: "ghost", class: { [`carousel-arrow ${dir}`]: true, 'disabled': isDisabled }, onClick: () => !isDisabled && this.onArrowClick(dir), ariaLabel: `${dir === 'prev' ? 'Previous' : 'Next'} Slide`, disabled: isDisabled, icon: dir === 'prev' ? 'chevron-left' : 'chevron-right', iconLibrary: "lucide", iconSize: "24px" }));
+        };
+        return (h(Host, { class: {
+                'is-fullscreen': this.isFullscreen,
+                'auto-height': this.autoHeight,
+                'parallax-mode': this.parallax,
+                'zoom-active': this.zoomActive,
+                'legendary-animate': this.animateContent,
+                [`arrows-pos-${this.arrowsPosition}`]: true,
+                [`effect-${this.effect}`]: true
+            } }, h("div", { class: { 'carousel': true, 'vertical': !isHorizontal, 'dragging': this.isDragging }, style: { width: this.width, height: this.height }, tabindex: this.keyboard ? 0 : -1, onKeyDown: this.onKeyDown, role: "region", "aria-roledescription": "carousel", "aria-label": "Carousel" }, this.showProgress && this.indicatorsType === 'dots' && (h("div", { class: "autoplay-progress" }, h("div", { class: "progress-bar", style: { width: `${this.autoplayProgress}%` } }))), this.arrows && this.arrowsPosition === 'top-right' && (h("div", { class: "carousel-controls" }, renderArrow('prev'), renderArrow('next'))), this.arrows && this.arrowsPosition === 'sides' && renderArrow('prev'), h("div", { class: "carousel-track-wrapper", style: style, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd, onMouseDown: this.handleMouseDown }, h("div", { class: "carousel-track", style: {
+                transform: this.ticker
+                    ? this.trackTranslate
+                    : (this.variableWidth && this.effect === 'slide'
+                        ? this.trackTranslate
+                        : (this.effect === 'slide'
+                            ? (isHorizontal
+                                ? `translateX(calc(-${this.current * (100 / this.slidesToShow)}% + ${this.dragOffset}px))`
+                                : `translateY(calc(-${this.current * (100 / this.slidesToShow)}% + ${this.dragOffset}px))`)
+                            : 'none')),
+                transition: this.ticker ? 'none' : `transform ${this.animationDuration}ms ${this.animationEasing}`,
+                display: 'flex',
+                ...style,
+            } }, h("slot", { onSlotchange: () => {
+                this.updateSlidesCount();
+                if (this.lazyLoad)
+                    this.setupLazyLoading();
+            } }), this.ticker && h("slot", { name: "ticker-clone", onSlotchange: this.updateSlidesCount }))), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this._ariaAnnouncement), this.arrows && this.arrowsPosition === 'sides' && renderArrow('next'), this.showCounter && (h("div", { class: "carousel-counter" }, this.current + 1, " / ", this.slidesCount)), this.indicators && (h("div", { class: "carousel-indicators" }, Array.from({ length: this.slidesCount - this.slidesToShow + 1 }, (_, idx) => {
+            const active = idx === this.current;
+            const type = this.useProgressSegments ? 'segments' : this.indicatorsType;
+            if (type === 'segments') {
+                return (h("div", { class: { 'progress-segment': true, 'active': active } }, h("div", { class: "progress-fill", style: { width: active ? `${this.autoplayProgress}%` : (idx < this.current ? '100%' : '0%') } })));
+            }
+            if (type === 'pie') {
+                return (h("div", { class: { 'indicator-pie': true, 'active': active }, onClick: () => this.onIndicatorClick(idx) }, h("svg", { viewBox: "0 0 32 32" }, h("circle", { cx: "16", cy: "16", r: "14", fill: "none", stroke: "rgba(255,255,255,0.15)", "stroke-width": "2" }), active && (h("circle", { cx: "16", cy: "16", r: "14", fill: "none", stroke: "white", "stroke-width": "3", "stroke-dasharray": "88", "stroke-dashoffset": 88 - (88 * this.autoplayProgress / 100), style: { transition: 'stroke-dashoffset 0.05s linear' }, transform: "rotate(-90 16 16)" })))));
+            }
+            return (h("ui-button", { variant: "ghost", size: "xxs", class: { active }, onClick: () => this.onIndicatorClick(idx), ariaLabel: `Go to slide ${idx + 1}` }));
+        }))), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, class: "fullscreen-toggle", onClick: () => this.toggleFullscreen(), ariaLabel: "Toggle Fullscreen", icon: this.isFullscreen ? "minimize" : "maximize", iconLibrary: "lucide", iconSize: "18px" }))));
+    }
+    static get is() { return "ui-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["carousel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "slidesToShow": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slides to show at once (responsive)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slides-to-show",
+                "defaultValue": "1"
+            },
+            "slidesToScroll": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slides to scroll per action"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slides-to-scroll",
+                "defaultValue": "1"
+            },
+            "infinite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable infinite looping"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "infinite",
+                "defaultValue": "true"
+            },
+            "autoplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable autoplay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay",
+                "defaultValue": "false"
+            },
+            "autoplayInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autoplay interval (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay-interval",
+                "defaultValue": "3000"
+            },
+            "arrows": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show navigation arrows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrows",
+                "defaultValue": "true"
+            },
+            "indicators": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show indicators (dots)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicators",
+                "defaultValue": "true"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            },
+            "responsive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Responsive breakpoints"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "responsive",
+                "defaultValue": "''"
+            },
+            "swipe": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable swipe/touch"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swipe",
+                "defaultValue": "true"
+            },
+            "keyboard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable keyboard navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard",
+                "defaultValue": "true"
+            },
+            "pauseOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pause autoplay on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause-on-hover",
+                "defaultValue": "true"
+            },
+            "prevArrow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom previous arrow template"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prev-arrow",
+                "defaultValue": "'&lt;'"
+            },
+            "nextArrow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom next arrow template"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next-arrow",
+                "defaultValue": "'&gt;'"
+            },
+            "loop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable infinite looping"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loop",
+                "defaultValue": "true"
+            },
+            "animationDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation duration (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-duration",
+                "defaultValue": "500"
+            },
+            "animationEasing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation easing function"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-easing",
+                "defaultValue": "'cubic-bezier(0.4,0,0.2,1)'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Carousel width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Carousel height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'400px'"
+            },
+            "effect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CarouselEffect",
+                    "resolved": "\"coverflow\" | \"cube\" | \"depth\" | \"fade\" | \"flip\" | \"ken-burns\" | \"scale\" | \"slide\" | \"stack\" | \"wheel\"",
+                    "references": {
+                        "CarouselEffect": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/carousel/types.ts::CarouselEffect",
+                            "referenceLocation": "CarouselEffect"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Transition effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "effect",
+                "defaultValue": "'slide'"
+            },
+            "centerMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable center mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "center-mode",
+                "defaultValue": "false"
+            },
+            "centerPadding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding for center mode (e.g., '50px')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "center-padding",
+                "defaultValue": "'50px'"
+            },
+            "enableDrag": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable mouse dragging"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-drag",
+                "defaultValue": "true"
+            },
+            "variableWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable variable width slides"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variable-width",
+                "defaultValue": "false"
+            },
+            "showProgress": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show autoplay progress bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-progress",
+                "defaultValue": "false"
+            },
+            "showCounter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show slide counter (e.g. 1/10)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-counter",
+                "defaultValue": "false"
+            },
+            "autoHeight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable auto-height (adjusts to content)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-height",
+                "defaultValue": "false"
+            },
+            "pauseOnInteract": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pause on interaction (clicks/drags)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause-on-interact",
+                "defaultValue": "true"
+            },
+            "asNavFor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selector of another carousel to sync with (e.g., '#thumbSlider')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "as-nav-for",
+                "defaultValue": "''"
+            },
+            "parallax": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable parallax effect for slide content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "parallax",
+                "defaultValue": "false"
+            },
+            "lazyLoad": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable lazy loading of images inside slides"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy-load",
+                "defaultValue": "false"
+            },
+            "zoomActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Zoom effect on the active slide (Center Mode recommended)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "zoom-active",
+                "defaultValue": "false"
+            },
+            "indicatorsType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IndicatorType",
+                    "resolved": "\"default\" | \"dots\" | \"icon\" | \"line\" | \"pie\" | \"segments\"",
+                    "references": {
+                        "IndicatorType": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::IndicatorType",
+                            "referenceLocation": "IndicatorType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of navigation indicators: 'dots', 'segments' (stories-style), or 'pie' (circular)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicators-type",
+                "defaultValue": "'dots'"
+            },
+            "animateContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Staggered animations for elements inside the active slide (e.g. titles, buttons)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animate-content",
+                "defaultValue": "false"
+            },
+            "useProgressSegments": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use stories-style progress indicators (segments) - DEPRECATED: use indicatorsType='segments' instead"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-progress-segments",
+                "defaultValue": "false"
+            },
+            "mouseWheel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable mouse wheel navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mouse-wheel",
+                "defaultValue": "false"
+            },
+            "ticker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable continuous 'Ticker' mode (smooth scrolling without pauses)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ticker",
+                "defaultValue": "false"
+            },
+            "tickerSpeed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Speed for ticker mode (pixels per frame, approx 1-3 for smooth motion)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ticker-speed",
+                "defaultValue": "1"
+            },
+            "arrowsPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sides' | 'top-right'",
+                    "resolved": "\"sides\" | \"top-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of navigation arrows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrows-position",
+                "defaultValue": "'sides'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "current": {},
+            "slidesCount": {},
+            "isHovered": {},
+            "containerWidth": {},
+            "containerHeight": {},
+            "isDragging": {},
+            "dragOffset": {},
+            "autoplayProgress": {},
+            "isFullscreen": {},
+            "trackTranslate": {},
+            "tickerOffset": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "beforeChange",
+                "name": "beforeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ from: number, to: number }",
+                    "resolved": "{ from: number; to: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "afterChange",
+                "name": "afterChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ current: number }",
+                    "resolved": "{ current: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleFullscreen": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "next": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "prev": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "goTo": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "current",
+                "methodName": "onCurrentChange"
+            }, {
+                "propName": "slidesToShow",
+                "methodName": "onSlidesToShowChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mouseenter",
+                "method": "onMouseEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseleave",
+                "method": "onMouseLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "wheel",
+                "method": "handleWheel",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}