luxen-ui 0.1.0

package/dist/elements/carousel/carousel.d.ts

@@ -0,0 +1,148 @@
+import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
+type AxisOptionType = 'x' | 'y';
+type AlignmentOptionType = 'start' | 'center' | 'end' | ((viewSize: number, snapSize: number, index: number) => number);
+type SlidesToScrollOptionType = 'auto' | number;
+type ScrollContainOptionType = 'trimSnaps' | 'keepSnaps' | false;
+import { type PropertyValues, type CSSResultGroup } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * Carousel custom element based on Embla Carousel.
+ *
+ * @csspart viewport - The carousel viewport container.
+ * @csspart container - The slides container slot.
+ * @csspart scroll-buttons - The scroll buttons wrapper.
+ * @csspart button - Any navigation button.
+ * @csspart button-previous - The previous slide navigation button.
+ * @csspart button-next - The next slide navigation button.
+ * @csspart button-dot - Any dot navigation button.
+ * @csspart dots - The dots navigation wrapper.
+ * @csspart button-fullscreen - The fullscreen button.
+ * @csspart button-icon - Any button icon SVG.
+ *
+ * @cssproperty --slide-height - Height of slides in vertical axis mode.
+ * @cssproperty --slide-size - Width of each slide (e.g. `100%`, `calc(100% / 3)`).
+ * @cssproperty --slide-gap - Gap between slides.
+ * @cssproperty --button-size - Size of navigation buttons.
+ * @cssproperty --button-arrow-size - Size of arrow icons inside buttons.
+ * @cssproperty --button-arrow-color - Color of arrow icons.
+ * @cssproperty --button-offset - Offset of inside-positioned buttons from edges.
+ * @cssproperty --button-border-color - Border color of buttons.
+ * @cssproperty --button-border-radius - Border radius of buttons.
+ * @cssproperty --button-bg - Background color of buttons.
+ * @cssproperty --button-color - Text/icon color of buttons.
+ * @cssproperty --dot-color - Color of inactive dots.
+ * @cssproperty --dot-color-active - Color of active dot.
+ * @cssproperty --dot-margin - Margin around dots container.
+ */
+export declare class LuxenCarousel extends LuxenElement {
+    static styles: CSSResultGroup;
+    embla: EmblaCarouselType;
+    /**
+     * Choose a delay between transitions in milliseconds (default: 4000).
+     */
+    accessor autoplay: number;
+    /**
+     * Configure autoplay options.
+     *
+     * @link https://www.embla-carousel.com/plugins/autoplay/#options
+     */
+    accessor autoplayOptions: any;
+    /**
+     * Choose scroll axis between x and y.
+     *
+     * @link https://www.embla-carousel.com/api/options/#axis
+     */
+    accessor axis: AxisOptionType;
+    /**
+     * Align the slides relative to the carousel viewport.
+     *
+     * @link https://www.embla-carousel.com/api/options/#align
+     */
+    accessor align: AlignmentOptionType;
+    /**
+     * Breakpoint overrides for options.
+     */
+    accessor breakpoints: any;
+    /**
+     * Enables infinite looping.
+     *
+     * @link https://www.embla-carousel.com/api/options/#loop
+     */
+    accessor loop: boolean;
+    /**
+     * Enables momentum scrolling (drag free).
+     *
+     * @link https://www.embla-carousel.com/api/options/#dragfree
+     */
+    accessor dragFree: boolean;
+    /**
+     * Set scroll duration when triggered by API methods.
+     *
+     * @link https://www.embla-carousel.com/api/options/#duration
+     */
+    accessor duration: number;
+    /**
+     * Allow skipping scroll snaps on vigorous drag.
+     *
+     * @link https://www.embla-carousel.com/api/options/#skipsnaps
+     */
+    accessor skipSnaps: boolean;
+    /**
+     * Group slides together for navigation.
+     *
+     * @link https://www.embla-carousel.com/api/options/#slidestoscroll
+     */
+    accessor slidesToScroll: SlidesToScrollOptionType;
+    /**
+     * Set the initial scroll snap index.
+     *
+     * @link https://www.embla-carousel.com/api/options/#startindex
+     */
+    accessor startIndex: number;
+    /**
+     * Clear leading and trailing empty space.
+     *
+     * @link https://www.embla-carousel.com/api/options/#containscroll
+     */
+    accessor containScroll: ScrollContainOptionType;
+    accessor single: boolean;
+    accessor withDots: boolean;
+    accessor withScrollbar: boolean;
+    accessor withFullscreen: boolean;
+    accessor dotAppearance: 'circle' | 'bar';
+    accessor scrollButtonsPosition: 'inside' | 'outside';
+    scrollButtons: HTMLElement;
+    previousBtn: HTMLButtonElement;
+    nextBtn: HTMLButtonElement;
+    container: HTMLSlotElement;
+    dotNodes: HTMLButtonElement[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected createEmbla(): void;
+    protected onSlidesInView(): void;
+    protected onInit(): void;
+    protected onReInit(): void;
+    protected onSelect(): void;
+    protected onResize(): void;
+    protected attachEventListeners(): void;
+    protected detachEventListeners(): void;
+    protected updateNavigation(): void;
+    updated(changedProperties: PropertyValues<this>): Promise<void>;
+    private initAutoplay;
+    private handleSlotChange;
+    private handleDotClick;
+    options(): EmblaOptionsType;
+    next(): void;
+    previous(): void;
+    goToSlide(index: number, jump?: boolean): void;
+    slideNodes(): void;
+    slidesInView(): void;
+    isActive(): boolean;
+    renderFullscreenButton(): import("lit").TemplateResult<1>;
+    renderNextPreviousButtons(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=carousel.d.ts.map

package/dist/elements/carousel/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel/carousel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAG1E,KAAK,cAAc,GAAG,GAAG,GAAG,GAAG,CAAC;AAChC,KAAK,mBAAmB,GACpB,OAAO,GACP,QAAQ,GACR,KAAK,GACL,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AACpE,KAAK,wBAAwB,GAAG,MAAM,GAAG,MAAM,CAAC;AAChD,KAAK,uBAAuB,GAAG,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC;AAEjE,OAAO,EAAmB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,KAAK,EAAG,iBAAiB,CAAC;IAE1B;;OAEG;IAEH,QAAQ,CAAC,QAAQ,SAAK;IAEtB;;;;OAIG;IAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC;IAE9B;;;;OAIG;IAEH,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAO;IAEpC;;;;OAIG;IAEH,QAAQ,CAAC,KAAK,EAAE,mBAAmB,CAAW;IAE9C;;OAEG;IAEH,QAAQ,CAAC,WAAW,EAAE,GAAG,CAAM;IAE/B;;;;OAIG;IAEH,QAAQ,CAAC,IAAI,UAAS;IAEtB;;;;OAIG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;;;OAIG;IAEH,QAAQ,CAAC,QAAQ,SAAM;IAEvB;;;;OAIG;IAEH,QAAQ,CAAC,SAAS,UAAS;IAE3B;;;;OAIG;IAEH,QAAQ,CAAC,cAAc,EAAE,wBAAwB,CAAK;IAEtD;;;;OAIG;IAEH,QAAQ,CAAC,UAAU,SAAK;IAExB;;;;OAIG;IAEH,QAAQ,CAAC,aAAa,EAAE,uBAAuB,CAAe;IAG9D,QAAQ,CAAC,MAAM,UAAS;IAGxB,QAAQ,CAAC,QAAQ,UAAS;IAG1B,QAAQ,CAAC,aAAa,UAAS;IAG/B,QAAQ,CAAC,cAAc,UAAS;IAGhC,QAAQ,CAAC,aAAa,EAAE,QAAQ,GAAG,KAAK,CAAS;IAGjD,QAAQ,CAAC,qBAAqB,EAAE,QAAQ,GAAG,SAAS,CAAY;IAEtC,aAAa,EAAG,WAAW,CAAC;IAC3B,WAAW,EAAG,iBAAiB,CAAC;IACpC,OAAO,EAAG,iBAAiB,CAAC;IAC9B,SAAS,EAAG,eAAe,CAAC;IAC/B,QAAQ,EAAG,iBAAiB,EAAE,CAAC;;IAcxC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB;cAOV,YAAY,IAAI,IAAI;IAIvC,SAAS,CAAC,WAAW;IAWrB,SAAS,CAAC,cAAc;IAMxB,SAAS,CAAC,MAAM;IAIhB,SAAS,CAAC,QAAQ;IAKlB,SAAS,CAAC,QAAQ;IAOlB,SAAS,CAAC,QAAQ;IAIlB,SAAS,CAAC,oBAAoB;IAK9B,SAAS,CAAC,oBAAoB;IAK9B,SAAS,CAAC,gBAAgB;IAiBX,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAM9D,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc;IAKtB,OAAO,IAAI,gBAAgB;IA0B3B,IAAI;IAIJ,QAAQ;IAIR,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO;IAIvC,UAAU;IAIV,YAAY;IAIZ,QAAQ;IAIR,sBAAsB;IAoBtB,yBAAyB;IAyChB,MAAM;CAuChB"}

package/dist/elements/carousel/carousel.js

@@ -0,0 +1,473 @@
+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;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _LuxenCarousel_autoplay_accessor_storage, _LuxenCarousel_autoplayOptions_accessor_storage, _LuxenCarousel_axis_accessor_storage, _LuxenCarousel_align_accessor_storage, _LuxenCarousel_breakpoints_accessor_storage, _LuxenCarousel_loop_accessor_storage, _LuxenCarousel_dragFree_accessor_storage, _LuxenCarousel_duration_accessor_storage, _LuxenCarousel_skipSnaps_accessor_storage, _LuxenCarousel_slidesToScroll_accessor_storage, _LuxenCarousel_startIndex_accessor_storage, _LuxenCarousel_containScroll_accessor_storage, _LuxenCarousel_single_accessor_storage, _LuxenCarousel_withDots_accessor_storage, _LuxenCarousel_withScrollbar_accessor_storage, _LuxenCarousel_withFullscreen_accessor_storage, _LuxenCarousel_dotAppearance_accessor_storage, _LuxenCarousel_scrollButtonsPosition_accessor_storage;
+import EmblaCarousel from 'embla-carousel';
+import Autoplay from 'embla-carousel-autoplay';
+import { html, unsafeCSS } from 'lit';
+import { property, query, queryAll } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { LuxenElement } from '../../shared/luxen-element';
+import hostStyles from '../../shared/styles/host.styles';
+import rawStyles from './carousel.css?inline';
+const styles = unsafeCSS(rawStyles);
+/**
+ * Carousel custom element based on Embla Carousel.
+ *
+ * @csspart viewport - The carousel viewport container.
+ * @csspart container - The slides container slot.
+ * @csspart scroll-buttons - The scroll buttons wrapper.
+ * @csspart button - Any navigation button.
+ * @csspart button-previous - The previous slide navigation button.
+ * @csspart button-next - The next slide navigation button.
+ * @csspart button-dot - Any dot navigation button.
+ * @csspart dots - The dots navigation wrapper.
+ * @csspart button-fullscreen - The fullscreen button.
+ * @csspart button-icon - Any button icon SVG.
+ *
+ * @cssproperty --slide-height - Height of slides in vertical axis mode.
+ * @cssproperty --slide-size - Width of each slide (e.g. `100%`, `calc(100% / 3)`).
+ * @cssproperty --slide-gap - Gap between slides.
+ * @cssproperty --button-size - Size of navigation buttons.
+ * @cssproperty --button-arrow-size - Size of arrow icons inside buttons.
+ * @cssproperty --button-arrow-color - Color of arrow icons.
+ * @cssproperty --button-offset - Offset of inside-positioned buttons from edges.
+ * @cssproperty --button-border-color - Border color of buttons.
+ * @cssproperty --button-border-radius - Border radius of buttons.
+ * @cssproperty --button-bg - Background color of buttons.
+ * @cssproperty --button-color - Text/icon color of buttons.
+ * @cssproperty --dot-color - Color of inactive dots.
+ * @cssproperty --dot-color-active - Color of active dot.
+ * @cssproperty --dot-margin - Margin around dots container.
+ */
+export class LuxenCarousel extends LuxenElement {
+    /**
+     * Choose a delay between transitions in milliseconds (default: 4000).
+     */
+    get autoplay() { return __classPrivateFieldGet(this, _LuxenCarousel_autoplay_accessor_storage, "f"); }
+    set autoplay(value) { __classPrivateFieldSet(this, _LuxenCarousel_autoplay_accessor_storage, value, "f"); }
+    /**
+     * Configure autoplay options.
+     *
+     * @link https://www.embla-carousel.com/plugins/autoplay/#options
+     */
+    get autoplayOptions() { return __classPrivateFieldGet(this, _LuxenCarousel_autoplayOptions_accessor_storage, "f"); }
+    set autoplayOptions(value) { __classPrivateFieldSet(this, _LuxenCarousel_autoplayOptions_accessor_storage, value, "f"); }
+    /**
+     * Choose scroll axis between x and y.
+     *
+     * @link https://www.embla-carousel.com/api/options/#axis
+     */
+    get axis() { return __classPrivateFieldGet(this, _LuxenCarousel_axis_accessor_storage, "f"); }
+    set axis(value) { __classPrivateFieldSet(this, _LuxenCarousel_axis_accessor_storage, value, "f"); }
+    /**
+     * Align the slides relative to the carousel viewport.
+     *
+     * @link https://www.embla-carousel.com/api/options/#align
+     */
+    get align() { return __classPrivateFieldGet(this, _LuxenCarousel_align_accessor_storage, "f"); }
+    set align(value) { __classPrivateFieldSet(this, _LuxenCarousel_align_accessor_storage, value, "f"); }
+    /**
+     * Breakpoint overrides for options.
+     */
+    get breakpoints() { return __classPrivateFieldGet(this, _LuxenCarousel_breakpoints_accessor_storage, "f"); }
+    set breakpoints(value) { __classPrivateFieldSet(this, _LuxenCarousel_breakpoints_accessor_storage, value, "f"); }
+    /**
+     * Enables infinite looping.
+     *
+     * @link https://www.embla-carousel.com/api/options/#loop
+     */
+    get loop() { return __classPrivateFieldGet(this, _LuxenCarousel_loop_accessor_storage, "f"); }
+    set loop(value) { __classPrivateFieldSet(this, _LuxenCarousel_loop_accessor_storage, value, "f"); }
+    /**
+     * Enables momentum scrolling (drag free).
+     *
+     * @link https://www.embla-carousel.com/api/options/#dragfree
+     */
+    get dragFree() { return __classPrivateFieldGet(this, _LuxenCarousel_dragFree_accessor_storage, "f"); }
+    set dragFree(value) { __classPrivateFieldSet(this, _LuxenCarousel_dragFree_accessor_storage, value, "f"); }
+    /**
+     * Set scroll duration when triggered by API methods.
+     *
+     * @link https://www.embla-carousel.com/api/options/#duration
+     */
+    get duration() { return __classPrivateFieldGet(this, _LuxenCarousel_duration_accessor_storage, "f"); }
+    set duration(value) { __classPrivateFieldSet(this, _LuxenCarousel_duration_accessor_storage, value, "f"); }
+    /**
+     * Allow skipping scroll snaps on vigorous drag.
+     *
+     * @link https://www.embla-carousel.com/api/options/#skipsnaps
+     */
+    get skipSnaps() { return __classPrivateFieldGet(this, _LuxenCarousel_skipSnaps_accessor_storage, "f"); }
+    set skipSnaps(value) { __classPrivateFieldSet(this, _LuxenCarousel_skipSnaps_accessor_storage, value, "f"); }
+    /**
+     * Group slides together for navigation.
+     *
+     * @link https://www.embla-carousel.com/api/options/#slidestoscroll
+     */
+    get slidesToScroll() { return __classPrivateFieldGet(this, _LuxenCarousel_slidesToScroll_accessor_storage, "f"); }
+    set slidesToScroll(value) { __classPrivateFieldSet(this, _LuxenCarousel_slidesToScroll_accessor_storage, value, "f"); }
+    /**
+     * Set the initial scroll snap index.
+     *
+     * @link https://www.embla-carousel.com/api/options/#startindex
+     */
+    get startIndex() { return __classPrivateFieldGet(this, _LuxenCarousel_startIndex_accessor_storage, "f"); }
+    set startIndex(value) { __classPrivateFieldSet(this, _LuxenCarousel_startIndex_accessor_storage, value, "f"); }
+    /**
+     * Clear leading and trailing empty space.
+     *
+     * @link https://www.embla-carousel.com/api/options/#containscroll
+     */
+    get containScroll() { return __classPrivateFieldGet(this, _LuxenCarousel_containScroll_accessor_storage, "f"); }
+    set containScroll(value) { __classPrivateFieldSet(this, _LuxenCarousel_containScroll_accessor_storage, value, "f"); }
+    get single() { return __classPrivateFieldGet(this, _LuxenCarousel_single_accessor_storage, "f"); }
+    set single(value) { __classPrivateFieldSet(this, _LuxenCarousel_single_accessor_storage, value, "f"); }
+    get withDots() { return __classPrivateFieldGet(this, _LuxenCarousel_withDots_accessor_storage, "f"); }
+    set withDots(value) { __classPrivateFieldSet(this, _LuxenCarousel_withDots_accessor_storage, value, "f"); }
+    get withScrollbar() { return __classPrivateFieldGet(this, _LuxenCarousel_withScrollbar_accessor_storage, "f"); }
+    set withScrollbar(value) { __classPrivateFieldSet(this, _LuxenCarousel_withScrollbar_accessor_storage, value, "f"); }
+    get withFullscreen() { return __classPrivateFieldGet(this, _LuxenCarousel_withFullscreen_accessor_storage, "f"); }
+    set withFullscreen(value) { __classPrivateFieldSet(this, _LuxenCarousel_withFullscreen_accessor_storage, value, "f"); }
+    get dotAppearance() { return __classPrivateFieldGet(this, _LuxenCarousel_dotAppearance_accessor_storage, "f"); }
+    set dotAppearance(value) { __classPrivateFieldSet(this, _LuxenCarousel_dotAppearance_accessor_storage, value, "f"); }
+    get scrollButtonsPosition() { return __classPrivateFieldGet(this, _LuxenCarousel_scrollButtonsPosition_accessor_storage, "f"); }
+    set scrollButtonsPosition(value) { __classPrivateFieldSet(this, _LuxenCarousel_scrollButtonsPosition_accessor_storage, value, "f"); }
+    constructor() {
+        super();
+        _LuxenCarousel_autoplay_accessor_storage.set(this, 0);
+        _LuxenCarousel_autoplayOptions_accessor_storage.set(this, void 0);
+        _LuxenCarousel_axis_accessor_storage.set(this, 'x');
+        _LuxenCarousel_align_accessor_storage.set(this, 'start');
+        _LuxenCarousel_breakpoints_accessor_storage.set(this, {});
+        _LuxenCarousel_loop_accessor_storage.set(this, false);
+        _LuxenCarousel_dragFree_accessor_storage.set(this, false);
+        _LuxenCarousel_duration_accessor_storage.set(this, 20);
+        _LuxenCarousel_skipSnaps_accessor_storage.set(this, false);
+        _LuxenCarousel_slidesToScroll_accessor_storage.set(this, 1);
+        _LuxenCarousel_startIndex_accessor_storage.set(this, 0);
+        _LuxenCarousel_containScroll_accessor_storage.set(this, 'trimSnaps');
+        _LuxenCarousel_single_accessor_storage.set(this, false);
+        _LuxenCarousel_withDots_accessor_storage.set(this, false);
+        _LuxenCarousel_withScrollbar_accessor_storage.set(this, false);
+        _LuxenCarousel_withFullscreen_accessor_storage.set(this, false);
+        _LuxenCarousel_dotAppearance_accessor_storage.set(this, 'bar');
+        _LuxenCarousel_scrollButtonsPosition_accessor_storage.set(this, 'inside');
+        this.next = this.next.bind(this);
+        this.previous = this.previous.bind(this);
+        this.onInit = this.onInit.bind(this);
+        this.onReInit = this.onReInit.bind(this);
+        this.onResize = this.onResize.bind(this);
+        this.onSelect = this.onSelect.bind(this);
+        this.onSlidesInView = this.onSlidesInView.bind(this);
+        this.detachEventListeners = this.detachEventListeners.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.createEmbla();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.embla) {
+            this.embla.destroy();
+        }
+    }
+    firstUpdated() {
+        this.attachEventListeners();
+    }
+    createEmbla() {
+        this.embla = EmblaCarousel(this, this.options());
+        this.embla
+            .on('init', this.onInit)
+            .on('reInit', this.onReInit)
+            .on('resize', this.onResize)
+            .on('slidesInView', this.onSlidesInView)
+            .on('select', this.onSelect)
+            .on('destroy', this.detachEventListeners);
+    }
+    onSlidesInView() {
+        this.emit('slides-in-view', {
+            detail: { indexes: this.embla.slidesInView() },
+        });
+    }
+    onInit() {
+        this.updateNavigation();
+    }
+    onReInit() {
+        this.updateNavigation();
+        this.requestUpdate();
+    }
+    onSelect() {
+        this.emit('select', {
+            detail: { index: this.embla.selectedScrollSnap() },
+        });
+        this.updateNavigation();
+    }
+    onResize() {
+        this.requestUpdate();
+    }
+    attachEventListeners() {
+        this.previousBtn.addEventListener('click', this.previous);
+        this.nextBtn.addEventListener('click', this.next);
+    }
+    detachEventListeners() {
+        this.previousBtn.removeEventListener('click', this.previous);
+        this.nextBtn.removeEventListener('click', this.next);
+    }
+    updateNavigation() {
+        const canScroll = this.embla.canScrollPrev() || this.embla.canScrollNext();
+        this.previousBtn.toggleAttribute('disabled', !this.embla.canScrollPrev());
+        this.nextBtn.toggleAttribute('disabled', !this.embla.canScrollNext());
+        this.scrollButtons.classList.toggle('scroll-buttons--disabled', !canScroll);
+        if (this.withDots) {
+            const previous = this.embla.previousScrollSnap();
+            const selected = this.embla.selectedScrollSnap();
+            this.dotNodes[previous]?.classList.remove('dot--selected');
+            this.dotNodes[previous]?.removeAttribute('aria-selected');
+            this.dotNodes[selected]?.classList.add('dot--selected');
+            this.dotNodes[selected]?.setAttribute('aria-selected', 'true');
+        }
+    }
+    async updated(changedProperties) {
+        if (changedProperties.has('autoplay') && this.autoplay) {
+            this.initAutoplay();
+        }
+    }
+    initAutoplay() {
+        this.embla.reInit(this.options(), [Autoplay(this.autoplayOptions || { delay: this.autoplay })]);
+    }
+    handleSlotChange(event) {
+        const slot = event.target;
+        if (slot.assignedElements().length > 0) {
+            this.embla.reInit(this.options());
+        }
+    }
+    handleDotClick(event) {
+        const button = event.currentTarget;
+        this.goToSlide(Number(button.dataset.index));
+    }
+    options() {
+        const container = this.shadowRoot.querySelector('slot');
+        if (!container) {
+            return {
+                container: this,
+                slides: [],
+            };
+        }
+        return {
+            container: container,
+            slides: container.assignedElements(),
+            containScroll: this.containScroll,
+            breakpoints: this.breakpoints,
+            axis: this.axis,
+            align: this.align,
+            dragFree: this.dragFree,
+            duration: this.duration,
+            loop: this.loop,
+            slidesToScroll: this.slidesToScroll,
+            skipSnaps: this.skipSnaps,
+            startIndex: this.startIndex,
+        };
+    }
+    next() {
+        this.embla.scrollNext();
+    }
+    previous() {
+        this.embla.scrollPrev();
+    }
+    goToSlide(index, jump) {
+        this.embla.scrollTo(index, jump);
+    }
+    slideNodes() {
+        this.embla.slideNodes();
+    }
+    slidesInView() {
+        this.embla.slidesInView();
+    }
+    isActive() {
+        return this.embla?.internalEngine().options.active;
+    }
+    renderFullscreenButton() {
+        return html `<button
+      type="button"
+      part="button button-fullscreen"
+      class="button button-fullscreen"
+      @click=${() => this.emit('fullscreen')}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        fill="currentColor"
+        part="button-icon button-icon-fullscreen"
+      >
+        <path
+          d="M295 183c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135 0 86.1c0 13.3 10.7 24 24 24s24-10.7 24-24l0-144c0-13.3-10.7-24-24-24L344 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l86.1 0-135 135zM217 329c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L48 430.1 48 344c0-13.3-10.7-24-24-24S0 330.7 0 344L0 488c0 13.3 10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-86.1 0 135-135z"
+        />
+      </svg>
+    </button>`;
+    }
+    renderNextPreviousButtons() {
+        return html `<div
+      class="scroll-buttons scroll-buttons--${this.scrollButtonsPosition}"
+      part="scroll-buttons"
+    >
+      <button
+        part="button button-previous"
+        class="button button-previous"
+        type="button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          fill="currentColor"
+          part="button-icon button-icon-previous"
+        >
+          <path
+            d="M7 239c-9.4 9.4-9.4 24.6 0 33.9L175 441c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L81.9 280 488 280c13.3 0 24-10.7 24-24s-10.7-24-24-24L81.9 232 209 105c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239z"
+          />
+        </svg>
+      </button>
+
+      <button
+        part="button button-next"
+        class="button button-next"
+        type="button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          fill="currentColor"
+          part="button-icon button-icon-next"
+        >
+          <path
+            d="M505 273c9.4-9.4 9.4-24.6 0-33.9L337 71c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l127 127-406.1 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l406.1 0-127 127c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0L505 273z"
+          />
+        </svg>
+      </button>
+    </div>`;
+    }
+    render() {
+        return html `
+      <div class="wrapper ${this.isActive() ? '' : 'inactive'}">
+        <div
+          part="viewport"
+          class="viewport"
+        >
+          <slot
+            part="container"
+            class="container"
+            @slotchange=${this.handleSlotChange}
+          ></slot>
+        </div>
+        ${this.withFullscreen ? this.renderFullscreenButton() : ''}
+        ${this.renderNextPreviousButtons()}
+        ${this.withDots
+            ? html `<div
+              class="dots"
+              part="dots"
+              role="tablist"
+            >
+              ${map(this.embla.scrollSnapList(), (_, index) => {
+                return html `<button
+                  part="button-dot"
+                  type="button"
+                  role="tab"
+                  class="dot dot--${this.dotAppearance}"
+                  aria-label="Go to slide ${index + 1}"
+                  data-index="${index}"
+                  @click=${this.handleDotClick}
+                >
+                  <i></i>
+                </button>`;
+            })}
+            </div> `
+            : ''}
+      </div>
+    `;
+    }
+}
+_LuxenCarousel_autoplay_accessor_storage = new WeakMap(), _LuxenCarousel_autoplayOptions_accessor_storage = new WeakMap(), _LuxenCarousel_axis_accessor_storage = new WeakMap(), _LuxenCarousel_align_accessor_storage = new WeakMap(), _LuxenCarousel_breakpoints_accessor_storage = new WeakMap(), _LuxenCarousel_loop_accessor_storage = new WeakMap(), _LuxenCarousel_dragFree_accessor_storage = new WeakMap(), _LuxenCarousel_duration_accessor_storage = new WeakMap(), _LuxenCarousel_skipSnaps_accessor_storage = new WeakMap(), _LuxenCarousel_slidesToScroll_accessor_storage = new WeakMap(), _LuxenCarousel_startIndex_accessor_storage = new WeakMap(), _LuxenCarousel_containScroll_accessor_storage = new WeakMap(), _LuxenCarousel_single_accessor_storage = new WeakMap(), _LuxenCarousel_withDots_accessor_storage = new WeakMap(), _LuxenCarousel_withScrollbar_accessor_storage = new WeakMap(), _LuxenCarousel_withFullscreen_accessor_storage = new WeakMap(), _LuxenCarousel_dotAppearance_accessor_storage = new WeakMap(), _LuxenCarousel_scrollButtonsPosition_accessor_storage = new WeakMap();
+LuxenCarousel.styles = [hostStyles, styles];
+__decorate([
+    property({ type: Number, reflect: true })
+], LuxenCarousel.prototype, "autoplay", null);
+__decorate([
+    property({ type: Object, attribute: 'autoplay-options' })
+], LuxenCarousel.prototype, "autoplayOptions", null);
+__decorate([
+    property()
+], LuxenCarousel.prototype, "axis", null);
+__decorate([
+    property()
+], LuxenCarousel.prototype, "align", null);
+__decorate([
+    property({ type: Object, reflect: true })
+], LuxenCarousel.prototype, "breakpoints", null);
+__decorate([
+    property({ type: Boolean })
+], LuxenCarousel.prototype, "loop", null);
+__decorate([
+    property({ type: Boolean, attribute: 'drag-free' })
+], LuxenCarousel.prototype, "dragFree", null);
+__decorate([
+    property({ type: Number })
+], LuxenCarousel.prototype, "duration", null);
+__decorate([
+    property({ type: Boolean, attribute: 'skip-snaps' })
+], LuxenCarousel.prototype, "skipSnaps", null);
+__decorate([
+    property({ attribute: 'slides-to-scroll' })
+], LuxenCarousel.prototype, "slidesToScroll", null);
+__decorate([
+    property({ type: Number, attribute: 'start-index' })
+], LuxenCarousel.prototype, "startIndex", null);
+__decorate([
+    property({ attribute: 'contain-scroll' })
+], LuxenCarousel.prototype, "containScroll", null);
+__decorate([
+    property({ type: Boolean })
+], LuxenCarousel.prototype, "single", null);
+__decorate([
+    property({ type: Boolean, attribute: 'with-dots' })
+], LuxenCarousel.prototype, "withDots", null);
+__decorate([
+    property({ type: Boolean, attribute: 'with-scrollbar' })
+], LuxenCarousel.prototype, "withScrollbar", null);
+__decorate([
+    property({ type: Boolean, attribute: 'with-fullscreen' })
+], LuxenCarousel.prototype, "withFullscreen", null);
+__decorate([
+    property({ type: String, attribute: 'dot-appearance' })
+], LuxenCarousel.prototype, "dotAppearance", null);
+__decorate([
+    property({ type: String, attribute: 'scroll-buttons-position' })
+], LuxenCarousel.prototype, "scrollButtonsPosition", null);
+__decorate([
+    query('.scroll-buttons')
+], LuxenCarousel.prototype, "scrollButtons", void 0);
+__decorate([
+    query('.button-previous')
+], LuxenCarousel.prototype, "previousBtn", void 0);
+__decorate([
+    query('.button-next')
+], LuxenCarousel.prototype, "nextBtn", void 0);
+__decorate([
+    query('.container')
+], LuxenCarousel.prototype, "container", void 0);
+__decorate([
+    queryAll('.dot')
+], LuxenCarousel.prototype, "dotNodes", void 0);

package/dist/elements/carousel/index.d.ts

@@ -0,0 +1,8 @@
+import { LuxenCarousel } from './carousel';
+export * from './carousel';
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-carousel': LuxenCarousel;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,cAAc,YAAY,CAAC;AAG3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,aAAa,CAAC;KAC7B;CACF"}

package/dist/elements/carousel/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { LuxenCarousel } from './carousel';
+export * from './carousel';
+define('carousel', LuxenCarousel);

package/dist/elements/carousel-item/carousel-item.css

@@ -0,0 +1,11 @@
+:host {
+  --aspect-ratio: inherit;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+  width: 100%;
+  max-height: 100%;
+  aspect-ratio: var(--aspect-ratio);
+}

package/dist/elements/carousel-item/carousel-item.d.ts

@@ -0,0 +1,13 @@
+import { type CSSResultGroup } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * A single slide inside an `<l-carousel>`.
+ *
+ * @cssproperty --aspect-ratio - Aspect ratio of the slide.
+ */
+export declare class LuxenCarouselItem extends LuxenElement {
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=carousel-item.d.ts.map

package/dist/elements/carousel-item/carousel-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel-item/carousel-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D;;;;GAIG;AACH,qBAAa,iBAAkB,SAAQ,YAAY;IACjD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAErD,iBAAiB;IAKjB,MAAM;CAGhB"}