@uibit/carousel 0.1.0

package/dist/carousel.js

@@ -0,0 +1,430 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { customElement, fromLucide, getIcon, msg, str, UIBitElement } from '@uibit/core';
+import { ChevronLeft, ChevronRight } from 'lucide';
+import { property, query, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * Accessible, scroll-driven carousel with keyboard navigation, auto-play,
+ * and configurable items-per-view via CSS custom properties.
+ *
+ * @fires {{ index: number, totalSlides: number }} slide-change - Fired when the active slide changes
+ *
+ * @slot item - One or more slide elements (add `slot="item"` to each child)
+ *
+ * @cssprop [--uibit-carousel-gap=1rem] - Gap between slides
+ * @cssprop [--uibit-carousel-padding=0] - Padding inside the viewport around slides
+ * @cssprop [--uibit-carousel-duration=300ms] - Scroll animation duration
+ * @cssprop [--uibit-carousel-items-per-view=1] - Number of slides visible at once
+ * @cssprop [--uibit-carousel-border-color=#e5e7eb] - Border color of the viewport
+ * @cssprop [--uibit-carousel-button-bg=#f9fafb] - Background of prev/next buttons
+ * @cssprop [--uibit-carousel-button-bg-hover=#f3f4f6] - Hover background of prev/next buttons
+ * @cssprop [--uibit-carousel-button-color-hover=#ffffff] - Hover text/icon color of prev/next buttons
+ * @cssprop [--uibit-carousel-indicator-bg=#e5e7eb] - Background of inactive indicator dots
+ * @cssprop [--uibit-carousel-indicator-active-bg=#000000] - Background of the active indicator dot
+ * @cssprop [--uibit-carousel-focus-color=#000000] - Color of the focus outline on buttons
+ *
+ * @csspart carousel - The root carousel container
+ * @csspart viewport - The overflow-hidden viewport
+ * @csspart content - The scrollable slides row
+ * @csspart controls - The control bar below the viewport
+ * @csspart buttons - The prev/next button group
+ * @csspart button - Each navigation button
+ * @csspart button-prev - The previous slide button
+ * @csspart button-next - The next slide button
+ * @csspart indicators - The indicator dot group
+ * @csspart indicator - Each indicator dot
+ * @csspart indicator-active - Added to the active indicator dot
+ */
+let UIBitCarousel = class UIBitCarousel extends UIBitElement {
+    static { this.styles = styles; }
+    get itemsPerView() {
+        if (typeof window === 'undefined')
+            return 1;
+        const val = this.getCssPropertyValue('--uibit-carousel-items-per-view');
+        return val ? parseFloat(val) || 1 : 1;
+    }
+    get gap() {
+        if (typeof window === 'undefined')
+            return 16;
+        const val = this.getCssPropertyValue('--uibit-carousel-gap');
+        return val ? parseFloat(val) ?? 16 : 16;
+    }
+    get duration() {
+        if (typeof window === 'undefined')
+            return 300;
+        const val = this.getCssPropertyValue('--uibit-carousel-duration');
+        if (!val)
+            return 300;
+        if (val.endsWith('ms'))
+            return parseFloat(val) || 300;
+        if (val.endsWith('s'))
+            return (parseFloat(val) * 1000) || 300;
+        return parseFloat(val) || 300;
+    }
+    constructor(config) {
+        super();
+        /** Automatically advance slides on a timer. */
+        this.autoPlay = false;
+        /** Milliseconds between auto-play advances. */
+        this.autoPlayInterval = 5000;
+        /** When `true`, the carousel wraps from the last slide back to the first. */
+        this.loop = true;
+        this.currentIndex = 0;
+        this.totalSlides = 0;
+        this.canPrev = false;
+        this.canNext = true;
+        this.slideIntersectionRatios = new Map();
+        this.isProgrammaticScroll = false;
+        this.isPausedByInteraction = false;
+        this.handlePointerEnter = () => {
+            this.isPausedByInteraction = true;
+            this.stopAutoPlay();
+        };
+        this.handlePointerLeave = () => {
+            this.isPausedByInteraction = false;
+            if (this.autoPlay) {
+                this.setupAutoPlay();
+            }
+        };
+        this.handleFocusIn = () => {
+            this.isPausedByInteraction = true;
+            this.stopAutoPlay();
+        };
+        this.handleFocusOut = () => {
+            this.isPausedByInteraction = false;
+            if (this.autoPlay) {
+                this.setupAutoPlay();
+            }
+        };
+        if (config) {
+            this.autoPlay = config.autoPlay ?? this.autoPlay;
+            this.autoPlayInterval = config.autoPlayInterval ?? this.autoPlayInterval;
+            this.loop = config.loop ?? this.loop;
+            if (config.itemsPerView !== undefined) {
+                this.style.setProperty('--uibit-carousel-items-per-view', String(config.itemsPerView));
+            }
+            if (config.gap !== undefined) {
+                this.style.setProperty('--uibit-carousel-gap', typeof config.gap === 'number' ? `${config.gap}px` : config.gap);
+            }
+            if (config.duration !== undefined) {
+                this.style.setProperty('--uibit-carousel-duration', typeof config.duration === 'number' ? `${config.duration}ms` : config.duration);
+            }
+        }
+    }
+    firstUpdated() {
+        this.setupCarousel();
+        this.setupAutoPlay();
+        this.setupKeyboardNavigation();
+        this.listen(this, 'pointerenter', this.handlePointerEnter);
+        this.listen(this, 'pointerleave', this.handlePointerLeave);
+        this.listen(this, 'focusin', this.handleFocusIn);
+        this.listen(this, 'focusout', this.handleFocusOut);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('autoPlay') ||
+            changedProperties.has('autoPlayInterval')) {
+            if (this.autoPlay) {
+                this.setupAutoPlay();
+            }
+            else {
+                this.stopAutoPlay();
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopAutoPlay();
+        if (this.programmaticScrollTimeout) {
+            clearTimeout(this.programmaticScrollTimeout);
+        }
+    }
+    setupCarousel() {
+        if (!this.content)
+            return;
+        const items = this.getSlides();
+        this.totalSlides = items.length;
+        // Decorate slotted elements with accessibility attributes
+        items.forEach((item, index) => {
+            if (!item.id) {
+                item.id = `uibit-carousel-slide-${index}`;
+            }
+            item.setAttribute('role', 'group');
+            item.setAttribute('aria-roledescription', 'slide');
+            item.setAttribute('aria-label', msg(str `Slide ${index + 1} of ${this.totalSlides}`));
+        });
+        this.updateNavigationState();
+        this.setupResizeObserver();
+        this.setupSlideObserver();
+    }
+    setupSlideObserver() {
+        if (!this.content)
+            return;
+        this.slideObserver?.disconnect();
+        this.slideIntersectionRatios.clear();
+        const slides = this.getSlides();
+        if (!slides.length)
+            return;
+        this.slideObserver = new IntersectionObserver((entries) => {
+            entries.forEach(e => this.slideIntersectionRatios.set(e.target, e.intersectionRatio));
+            if (this.isProgrammaticScroll)
+                return;
+            let maxRatio = -1;
+            let closestIndex = this.currentIndex;
+            slides.forEach((slide, index) => {
+                const ratio = this.slideIntersectionRatios.get(slide) ?? 0;
+                if (ratio > maxRatio) {
+                    maxRatio = ratio;
+                    closestIndex = index;
+                }
+            });
+            if (closestIndex !== this.currentIndex) {
+                this.currentIndex = closestIndex;
+                this.updateNavigationState();
+                this.emitSlideChange();
+            }
+            else {
+                this.updateNavigationState();
+            }
+        }, {
+            root: this.content,
+            threshold: [0, 0.25, 0.5, 0.75, 1.0],
+        });
+        slides.forEach(s => this.slideObserver.observe(s));
+        this.registerDisposable(() => this.slideObserver?.disconnect());
+    }
+    setupResizeObserver() {
+        if (!this.content || this.resizeObserver)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateNavigationState();
+        });
+        this.resizeObserver.observe(this.content);
+        this.registerDisposable(() => this.resizeObserver?.disconnect());
+    }
+    setupKeyboardNavigation() {
+        this.listen(this, 'keydown', (e) => {
+            if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                this.prev();
+            }
+            else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                this.next();
+            }
+        });
+    }
+    setupAutoPlay() {
+        this.stopAutoPlay();
+        if (!this.autoPlay || this.isPausedByInteraction)
+            return;
+        this.autoPlayTimer = window.setInterval(() => {
+            if (this.currentIndex < this.totalSlides - 1) {
+                this.next();
+            }
+            else if (this.loop) {
+                this.scrollToSlide(0);
+            }
+        }, this.autoPlayInterval);
+    }
+    stopAutoPlay() {
+        if (this.autoPlayTimer) {
+            clearInterval(this.autoPlayTimer);
+            this.autoPlayTimer = undefined;
+        }
+    }
+    getSlides() {
+        const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];
+        const slides = [];
+        slots.forEach(slot => {
+            const name = slot.getAttribute('name');
+            if (name === 'item' || !name) {
+                const assigned = slot.assignedElements();
+                slides.push(...assigned.filter(el => {
+                    const s = el.getAttribute('slot');
+                    return s === 'item' || !s;
+                }));
+            }
+        });
+        return slides;
+    }
+    updateNavigationState() {
+        this.canPrev = this.currentIndex > 0 || this.loop;
+        this.canNext = this.currentIndex < this.totalSlides - 1 || this.loop;
+    }
+    prev() {
+        if (this.currentIndex > 0) {
+            this.scrollToSlide(this.currentIndex - 1);
+        }
+        else if (this.loop) {
+            this.scrollToSlide(this.totalSlides - 1);
+        }
+    }
+    next() {
+        if (this.currentIndex < this.totalSlides - 1) {
+            this.scrollToSlide(this.currentIndex + 1);
+        }
+        else if (this.loop) {
+            this.scrollToSlide(0);
+        }
+    }
+    goToSlide(index) {
+        if (index >= 0 && index < this.totalSlides) {
+            this.scrollToSlide(index);
+        }
+    }
+    scrollToSlide(index) {
+        if (!this.content)
+            return;
+        const items = this.getSlides();
+        const item = items[index];
+        if (item) {
+            this.isProgrammaticScroll = true;
+            if (this.programmaticScrollTimeout) {
+                clearTimeout(this.programmaticScrollTimeout);
+            }
+            const containerRect = this.content.getBoundingClientRect();
+            const itemRect = item.getBoundingClientRect();
+            const style = window.getComputedStyle(this.content);
+            const paddingLeft = parseFloat(style.paddingLeft) || 0;
+            const targetScrollLeft = this.content.scrollLeft + (itemRect.left - containerRect.left) - paddingLeft;
+            this.content.scrollTo({
+                left: targetScrollLeft,
+                behavior: 'smooth'
+            });
+            this.currentIndex = index;
+            this.updateNavigationState();
+            this.emitSlideChange();
+            const onScrollEnd = () => {
+                this.isProgrammaticScroll = false;
+                this.content?.removeEventListener('scrollend', onScrollEnd);
+            };
+            if ('onscrollend' in window) {
+                this.content.addEventListener('scrollend', onScrollEnd);
+            }
+            this.programmaticScrollTimeout = window.setTimeout(() => {
+                this.isProgrammaticScroll = false;
+                if (this.content && 'onscrollend' in window) {
+                    this.content.removeEventListener('scrollend', onScrollEnd);
+                }
+            }, this.duration + 100);
+        }
+    }
+    emitSlideChange() {
+        this.dispatchCustomEvent('slide-change', {
+            index: this.currentIndex,
+            totalSlides: this.totalSlides
+        });
+    }
+    handleSlotChange() {
+        this.setupCarousel();
+    }
+    render() {
+        const isAutoplayPlaying = this.autoPlay && !this.isPausedByInteraction;
+        return html `
+      <div 
+        part="carousel" 
+        class="carousel" 
+        role="region" 
+        aria-roledescription="carousel" 
+        aria-label=${msg('Content Carousel')}
+      >
+        <div
+          part="viewport"
+          class="carousel-viewport"
+          aria-live="${isAutoplayPlaying ? 'off' : 'polite'}"
+        >
+          <div
+            part="content"
+            class="carousel-content"
+          >
+            <slot name="item" @slotchange=${this.handleSlotChange}></slot>
+            <slot @slotchange=${this.handleSlotChange}></slot>
+          </div>
+        </div>
+
+        <div part="controls" class="carousel-controls">
+          <div part="buttons" class="carousel-buttons">
+            <slot name="prev" @click=${() => this.prev()}>
+              <button
+                part="button button-prev"
+                class="carousel-button"
+                aria-label=${msg('Previous slide')}
+                ?disabled=${!this.canPrev}
+              >
+                ${getIcon('chevron-left', 16, fromLucide(ChevronLeft))}
+              </button>
+            </slot>
+            <slot name="next" @click=${() => this.next()}>
+              <button
+                part="button button-next"
+                class="carousel-button"
+                aria-label=${msg('Next slide')}
+                ?disabled=${!this.canNext}
+              >
+                ${getIcon('chevron-right', 16, fromLucide(ChevronRight))}
+              </button>
+            </slot>
+          </div>
+
+          <slot name="indicators">
+            <div part="indicators" class="carousel-indicators" role="tablist" aria-label=${msg('Slides')}>
+              ${Array.from({ length: this.totalSlides }).map((_, index) => html `
+                  <button
+                    role="tab"
+                    part="indicator ${index === this.currentIndex ? 'indicator-active' : ''}"
+                    class="carousel-indicator ${index === this.currentIndex ? 'active' : ''}"
+                    aria-label=${msg(str `Go to slide ${index + 1}`)}
+                    aria-selected=${index === this.currentIndex}
+                    aria-controls="uibit-carousel-slide-${index}"
+                    @click=${() => this.goToSlide(index)}
+                  ></button>
+                `)}
+            </div>
+          </slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'auto-play' })
+], UIBitCarousel.prototype, "autoPlay", void 0);
+__decorate([
+    property({ type: Number, attribute: 'auto-play-interval' })
+], UIBitCarousel.prototype, "autoPlayInterval", void 0);
+__decorate([
+    property({ type: Boolean })
+], UIBitCarousel.prototype, "loop", void 0);
+__decorate([
+    query('.carousel-content')
+], UIBitCarousel.prototype, "content", void 0);
+__decorate([
+    query('.carousel-viewport')
+], UIBitCarousel.prototype, "viewport", void 0);
+__decorate([
+    query('slot[name="item"]')
+], UIBitCarousel.prototype, "slotElement", void 0);
+__decorate([
+    state()
+], UIBitCarousel.prototype, "currentIndex", void 0);
+__decorate([
+    state()
+], UIBitCarousel.prototype, "totalSlides", void 0);
+__decorate([
+    state()
+], UIBitCarousel.prototype, "canPrev", void 0);
+__decorate([
+    state()
+], UIBitCarousel.prototype, "canNext", void 0);
+UIBitCarousel = __decorate([
+    customElement('uibit-carousel')
+], UIBitCarousel);
+export { UIBitCarousel };
+export default UIBitCarousel;
+//# sourceMappingURL=carousel.js.map

package/dist/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../src/carousel.ts"],"names":[],"mappings":"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"}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,80 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
+import '@uibit/carousel';
+import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
+
+@Component({
+  selector: 'uibit-carousel',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: {
+    '(slide-change)': 'slideChange.emit($event)'
+  }
+})
+export class NgxUIBitCarousel {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.autoPlay = this.autoPlay();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.autoPlayInterval = this.autoPlayInterval();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.loop = this.loop();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.content = this.content();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.viewport = this.viewport();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.slotElement = this.slotElement();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.currentIndex = this.currentIndex();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.totalSlides = this.totalSlides();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.canPrev = this.canPrev();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.canNext = this.canNext();
+      }
+    });
+  }
+
+  readonly autoPlay = input<boolean, any>(false, { transform: booleanAttribute });
+  readonly autoPlayInterval = input<number, any>(5000, { transform: numberAttribute });
+  readonly loop = input<boolean, any>(true, { transform: booleanAttribute });
+  readonly content = input<HTMLElement | undefined, any>(undefined);
+  readonly viewport = input<HTMLElement | undefined, any>(undefined);
+  readonly slotElement = input<HTMLSlotElement | undefined, any>(undefined);
+  readonly currentIndex = input<number, any>(0, { transform: numberAttribute });
+  readonly totalSlides = input<number, any>(0, { transform: numberAttribute });
+  readonly canPrev = input<boolean, any>(false, { transform: booleanAttribute });
+  readonly canNext = input<boolean, any>(true, { transform: booleanAttribute });
+
+  readonly slideChange = output<CustomEvent<{ index: number, totalSlides: number }>>();
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
+import '@uibit/carousel';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-carousel': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/carousel');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,22 @@
+import type { JSX } from 'preact';
+import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
+import '@uibit/carousel';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-carousel': JSX.HTMLAttributes<HTMLElementClass> & {
+      autoPlay?: boolean;
+      autoPlayInterval?: number;
+      loop?: boolean;
+      content?: HTMLElement | undefined;
+      viewport?: HTMLElement | undefined;
+      slotElement?: HTMLSlotElement | undefined;
+      currentIndex?: number;
+      totalSlides?: number;
+      canPrev?: boolean;
+      canNext?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/carousel';
+
+export const UIBitCarousel = component$<any>((props) => {
+  return (
+    <uibit-carousel {...props}>
+      <Slot />
+    </uibit-carousel>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
+import '@uibit/carousel';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-carousel': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      autoPlay?: boolean;
+      autoPlayInterval?: number;
+      loop?: boolean;
+      content?: HTMLElement | undefined;
+      viewport?: HTMLElement | undefined;
+      slotElement?: HTMLSlotElement | undefined;
+      currentIndex?: number;
+      totalSlides?: number;
+      canPrev?: boolean;
+      canNext?: boolean;
+      onSlideChange?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,23 @@
+import type { JSX } from 'solid-js';
+import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
+import '@uibit/carousel';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-carousel': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              autoPlay?: boolean;
+      autoPlayInterval?: number;
+      loop?: boolean;
+      content?: HTMLElement | undefined;
+      viewport?: HTMLElement | undefined;
+      slotElement?: HTMLSlotElement | undefined;
+      currentIndex?: number;
+      totalSlides?: number;
+      canPrev?: boolean;
+      canNext?: boolean;
+      "on:slide-change"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,21 @@
+import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
+import '@uibit/carousel';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-carousel': HTMLElementClass & {
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    loop?: boolean;
+    content?: HTMLElement | undefined;
+    viewport?: HTMLElement | undefined;
+    slotElement?: HTMLSlotElement | undefined;
+    currentIndex?: number;
+    totalSlides?: number;
+    canPrev?: boolean;
+    canNext?: boolean;
+      };
+    }
+  }
+}