luxen-ui 0.3.0 → 0.5.0

package/dist/elements/carousel/carousel.js

@@ -15,11 +15,11 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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;
+var _Carousel_autoplay_accessor_storage, _Carousel_autoplayOptions_accessor_storage, _Carousel_axis_accessor_storage, _Carousel_align_accessor_storage, _Carousel_breakpoints_accessor_storage, _Carousel_loop_accessor_storage, _Carousel_dragFree_accessor_storage, _Carousel_duration_accessor_storage, _Carousel_skipSnaps_accessor_storage, _Carousel_slidesToScroll_accessor_storage, _Carousel_startIndex_accessor_storage, _Carousel_containScroll_accessor_storage, _Carousel_single_accessor_storage, _Carousel_withDots_accessor_storage, _Carousel_withScrollbar_accessor_storage, _Carousel_withFullscreen_accessor_storage, _Carousel_dotAppearance_accessor_storage, _Carousel_maxVisibleDots_accessor_storage, _Carousel_scrollButtonsPosition_accessor_storage, _Carousel__selectedSnap_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 { html, nothing, unsafeCSS } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { LuxenElement } from '../../shared/luxen-element';
 import hostStyles from '../../shared/styles/host.styles';
@@ -53,129 +53,174 @@ const styles = unsafeCSS(rawStyles);
  * @cssproperty --dot-color - Color of inactive dots.
  * @cssproperty --dot-color-active - Color of active dot.
  * @cssproperty --dot-margin - Margin around dots container.
+ * @cssproperty --dot-edge-scale - Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).
  */
-export class LuxenCarousel extends LuxenElement {
+export class Carousel extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        _Carousel_autoplay_accessor_storage.set(this, 0);
+        _Carousel_autoplayOptions_accessor_storage.set(this, void 0);
+        _Carousel_axis_accessor_storage.set(this, 'x');
+        _Carousel_align_accessor_storage.set(this, 'start');
+        _Carousel_breakpoints_accessor_storage.set(this, {});
+        _Carousel_loop_accessor_storage.set(this, false);
+        _Carousel_dragFree_accessor_storage.set(this, false);
+        _Carousel_duration_accessor_storage.set(this, 20);
+        _Carousel_skipSnaps_accessor_storage.set(this, false);
+        _Carousel_slidesToScroll_accessor_storage.set(this, 1);
+        _Carousel_startIndex_accessor_storage.set(this, 0);
+        _Carousel_containScroll_accessor_storage.set(this, 'trimSnaps');
+        _Carousel_single_accessor_storage.set(this, false);
+        _Carousel_withDots_accessor_storage.set(this, false);
+        _Carousel_withScrollbar_accessor_storage.set(this, false);
+        _Carousel_withFullscreen_accessor_storage.set(this, false);
+        _Carousel_dotAppearance_accessor_storage.set(this, 'bar');
+        _Carousel_maxVisibleDots_accessor_storage.set(this, 0);
+        _Carousel_scrollButtonsPosition_accessor_storage.set(this, 'inside');
+        _Carousel__selectedSnap_accessor_storage.set(this, 0);
+        this.onSlidesInView = () => {
+            this.emit('slides-in-view', {
+                detail: { indexes: this.embla.slidesInView() },
+            });
+        };
+        this.onInit = () => {
+            this.updateNavigation();
+        };
+        this.onReInit = () => {
+            this.updateNavigation();
+            this.requestUpdate();
+        };
+        this.onSelect = () => {
+            this.emit('select', {
+                detail: { index: this.embla.selectedScrollSnap() },
+            });
+            this.updateNavigation();
+        };
+        this.onResize = () => {
+            this.requestUpdate();
+        };
+        this.detachEventListeners = () => {
+            this.previousBtn.removeEventListener('click', this.previous);
+            this.nextBtn.removeEventListener('click', this.next);
+        };
+        this.handleSlotChange = (event) => {
+            const slot = event.target;
+            if (slot.assignedElements().length > 0) {
+                this.embla.reInit(this.options());
+            }
+        };
+        this.handleDotClick = (event) => {
+            const button = event.currentTarget;
+            this.goToSlide(Number(button.dataset.index));
+        };
+        this.next = () => {
+            this.embla.scrollNext();
+        };
+        this.previous = () => {
+            this.embla.scrollPrev();
+        };
+    }
     /**
      * 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"); }
+    get autoplay() { return __classPrivateFieldGet(this, _Carousel_autoplay_accessor_storage, "f"); }
+    set autoplay(value) { __classPrivateFieldSet(this, _Carousel_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"); }
+    get autoplayOptions() { return __classPrivateFieldGet(this, _Carousel_autoplayOptions_accessor_storage, "f"); }
+    set autoplayOptions(value) { __classPrivateFieldSet(this, _Carousel_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"); }
+    get axis() { return __classPrivateFieldGet(this, _Carousel_axis_accessor_storage, "f"); }
+    set axis(value) { __classPrivateFieldSet(this, _Carousel_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"); }
+    get align() { return __classPrivateFieldGet(this, _Carousel_align_accessor_storage, "f"); }
+    set align(value) { __classPrivateFieldSet(this, _Carousel_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"); }
+    get breakpoints() { return __classPrivateFieldGet(this, _Carousel_breakpoints_accessor_storage, "f"); }
+    set breakpoints(value) { __classPrivateFieldSet(this, _Carousel_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"); }
+    get loop() { return __classPrivateFieldGet(this, _Carousel_loop_accessor_storage, "f"); }
+    set loop(value) { __classPrivateFieldSet(this, _Carousel_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"); }
+    get dragFree() { return __classPrivateFieldGet(this, _Carousel_dragFree_accessor_storage, "f"); }
+    set dragFree(value) { __classPrivateFieldSet(this, _Carousel_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"); }
+    get duration() { return __classPrivateFieldGet(this, _Carousel_duration_accessor_storage, "f"); }
+    set duration(value) { __classPrivateFieldSet(this, _Carousel_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"); }
+    get skipSnaps() { return __classPrivateFieldGet(this, _Carousel_skipSnaps_accessor_storage, "f"); }
+    set skipSnaps(value) { __classPrivateFieldSet(this, _Carousel_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"); }
+    get slidesToScroll() { return __classPrivateFieldGet(this, _Carousel_slidesToScroll_accessor_storage, "f"); }
+    set slidesToScroll(value) { __classPrivateFieldSet(this, _Carousel_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"); }
+    get startIndex() { return __classPrivateFieldGet(this, _Carousel_startIndex_accessor_storage, "f"); }
+    set startIndex(value) { __classPrivateFieldSet(this, _Carousel_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);
-    }
+    get containScroll() { return __classPrivateFieldGet(this, _Carousel_containScroll_accessor_storage, "f"); }
+    set containScroll(value) { __classPrivateFieldSet(this, _Carousel_containScroll_accessor_storage, value, "f"); }
+    get single() { return __classPrivateFieldGet(this, _Carousel_single_accessor_storage, "f"); }
+    set single(value) { __classPrivateFieldSet(this, _Carousel_single_accessor_storage, value, "f"); }
+    get withDots() { return __classPrivateFieldGet(this, _Carousel_withDots_accessor_storage, "f"); }
+    set withDots(value) { __classPrivateFieldSet(this, _Carousel_withDots_accessor_storage, value, "f"); }
+    get withScrollbar() { return __classPrivateFieldGet(this, _Carousel_withScrollbar_accessor_storage, "f"); }
+    set withScrollbar(value) { __classPrivateFieldSet(this, _Carousel_withScrollbar_accessor_storage, value, "f"); }
+    get withFullscreen() { return __classPrivateFieldGet(this, _Carousel_withFullscreen_accessor_storage, "f"); }
+    set withFullscreen(value) { __classPrivateFieldSet(this, _Carousel_withFullscreen_accessor_storage, value, "f"); }
+    get dotAppearance() { return __classPrivateFieldGet(this, _Carousel_dotAppearance_accessor_storage, "f"); }
+    set dotAppearance(value) { __classPrivateFieldSet(this, _Carousel_dotAppearance_accessor_storage, value, "f"); }
+    /**
+     * Maximum number of dots rendered at once. When the snap count exceeds this,
+     * a sliding window keeps the active dot in view and shrinks the edge dot(s)
+     * on the side where dots are hidden. `0` (default) renders all dots.
+     */
+    get maxVisibleDots() { return __classPrivateFieldGet(this, _Carousel_maxVisibleDots_accessor_storage, "f"); }
+    set maxVisibleDots(value) { __classPrivateFieldSet(this, _Carousel_maxVisibleDots_accessor_storage, value, "f"); }
+    get scrollButtonsPosition() { return __classPrivateFieldGet(this, _Carousel_scrollButtonsPosition_accessor_storage, "f"); }
+    set scrollButtonsPosition(value) { __classPrivateFieldSet(this, _Carousel_scrollButtonsPosition_accessor_storage, value, "f"); }
+    get _selectedSnap() { return __classPrivateFieldGet(this, _Carousel__selectedSnap_accessor_storage, "f"); }
+    set _selectedSnap(value) { __classPrivateFieldSet(this, _Carousel__selectedSnap_accessor_storage, value, "f"); }
     connectedCallback() {
         super.connectedCallback();
         this.createEmbla();
@@ -199,48 +244,16 @@ export class LuxenCarousel extends LuxenElement {
             .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');
-        }
+        this._selectedSnap = this.embla.selectedScrollSnap();
     }
     async updated(changedProperties) {
         if (changedProperties.has('autoplay') && this.autoplay) {
@@ -250,16 +263,6 @@ export class LuxenCarousel extends LuxenElement {
     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) {
@@ -283,12 +286,6 @@ export class LuxenCarousel extends LuxenElement {
             startIndex: this.startIndex,
         };
     }
-    next() {
-        this.embla.scrollNext();
-    }
-    previous() {
-        this.embla.scrollPrev();
-    }
     goToSlide(index, jump) {
         this.embla.scrollTo(index, jump);
     }
@@ -360,6 +357,53 @@ export class LuxenCarousel extends LuxenElement {
       </button>
     </div>`;
     }
+    renderDots() {
+        if (!this.embla)
+            return nothing;
+        const snaps = this.embla.scrollSnapList();
+        const total = snaps.length;
+        if (total === 0)
+            return nothing;
+        const selected = this._selectedSnap;
+        const max = this.maxVisibleDots;
+        let start = 0;
+        let end = total;
+        if (max > 0 && max < total) {
+            const half = Math.floor((max - 1) / 2);
+            start = Math.max(0, selected - half);
+            end = Math.min(total, start + max);
+            if (end - start < max)
+                start = Math.max(0, end - max);
+        }
+        const edgeStart = start > 0;
+        const edgeEnd = end < total;
+        return html `<div
+      class="dots"
+      part="dots"
+      role="tablist"
+    >
+      ${map(snaps.slice(start, end), (_, i) => {
+            const index = start + i;
+            const isFirst = i === 0;
+            const isLast = i === end - start - 1;
+            const isSelected = index === selected;
+            const isEdge = !isSelected && ((isFirst && edgeStart) || (isLast && edgeEnd));
+            return html `<button
+          part="button-dot"
+          type="button"
+          role="tab"
+          class="dot dot--${this.dotAppearance} ${isSelected ? 'dot--selected' : ''}"
+          aria-label="Go to slide ${index + 1}"
+          aria-selected=${isSelected ? 'true' : nothing}
+          data-index="${index}"
+          data-edge=${isEdge ? '' : nothing}
+          @click=${this.handleDotClick}
+        >
+          <i></i>
+        </button>`;
+        })}
+    </div>`;
+    }
     render() {
         return html `
       <div class="wrapper ${this.isActive() ? '' : 'inactive'}">
@@ -374,100 +418,82 @@ export class LuxenCarousel extends LuxenElement {
           ></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> `
-            : ''}
+        ${this.renderNextPreviousButtons()} ${this.withDots ? this.renderDots() : ''}
       </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];
+_Carousel_autoplay_accessor_storage = new WeakMap(), _Carousel_autoplayOptions_accessor_storage = new WeakMap(), _Carousel_axis_accessor_storage = new WeakMap(), _Carousel_align_accessor_storage = new WeakMap(), _Carousel_breakpoints_accessor_storage = new WeakMap(), _Carousel_loop_accessor_storage = new WeakMap(), _Carousel_dragFree_accessor_storage = new WeakMap(), _Carousel_duration_accessor_storage = new WeakMap(), _Carousel_skipSnaps_accessor_storage = new WeakMap(), _Carousel_slidesToScroll_accessor_storage = new WeakMap(), _Carousel_startIndex_accessor_storage = new WeakMap(), _Carousel_containScroll_accessor_storage = new WeakMap(), _Carousel_single_accessor_storage = new WeakMap(), _Carousel_withDots_accessor_storage = new WeakMap(), _Carousel_withScrollbar_accessor_storage = new WeakMap(), _Carousel_withFullscreen_accessor_storage = new WeakMap(), _Carousel_dotAppearance_accessor_storage = new WeakMap(), _Carousel_maxVisibleDots_accessor_storage = new WeakMap(), _Carousel_scrollButtonsPosition_accessor_storage = new WeakMap(), _Carousel__selectedSnap_accessor_storage = new WeakMap();
+Carousel.styles = [hostStyles, styles];
 __decorate([
     property({ type: Number, reflect: true })
-], LuxenCarousel.prototype, "autoplay", null);
+], Carousel.prototype, "autoplay", null);
 __decorate([
     property({ type: Object, attribute: 'autoplay-options' })
-], LuxenCarousel.prototype, "autoplayOptions", null);
+], Carousel.prototype, "autoplayOptions", null);
 __decorate([
     property()
-], LuxenCarousel.prototype, "axis", null);
+], Carousel.prototype, "axis", null);
 __decorate([
     property()
-], LuxenCarousel.prototype, "align", null);
+], Carousel.prototype, "align", null);
 __decorate([
     property({ type: Object, reflect: true })
-], LuxenCarousel.prototype, "breakpoints", null);
+], Carousel.prototype, "breakpoints", null);
 __decorate([
     property({ type: Boolean })
-], LuxenCarousel.prototype, "loop", null);
+], Carousel.prototype, "loop", null);
 __decorate([
     property({ type: Boolean, attribute: 'drag-free' })
-], LuxenCarousel.prototype, "dragFree", null);
+], Carousel.prototype, "dragFree", null);
 __decorate([
     property({ type: Number })
-], LuxenCarousel.prototype, "duration", null);
+], Carousel.prototype, "duration", null);
 __decorate([
     property({ type: Boolean, attribute: 'skip-snaps' })
-], LuxenCarousel.prototype, "skipSnaps", null);
+], Carousel.prototype, "skipSnaps", null);
 __decorate([
     property({ attribute: 'slides-to-scroll' })
-], LuxenCarousel.prototype, "slidesToScroll", null);
+], Carousel.prototype, "slidesToScroll", null);
 __decorate([
     property({ type: Number, attribute: 'start-index' })
-], LuxenCarousel.prototype, "startIndex", null);
+], Carousel.prototype, "startIndex", null);
 __decorate([
     property({ attribute: 'contain-scroll' })
-], LuxenCarousel.prototype, "containScroll", null);
+], Carousel.prototype, "containScroll", null);
 __decorate([
     property({ type: Boolean })
-], LuxenCarousel.prototype, "single", null);
+], Carousel.prototype, "single", null);
 __decorate([
     property({ type: Boolean, attribute: 'with-dots' })
-], LuxenCarousel.prototype, "withDots", null);
+], Carousel.prototype, "withDots", null);
 __decorate([
     property({ type: Boolean, attribute: 'with-scrollbar' })
-], LuxenCarousel.prototype, "withScrollbar", null);
+], Carousel.prototype, "withScrollbar", null);
 __decorate([
     property({ type: Boolean, attribute: 'with-fullscreen' })
-], LuxenCarousel.prototype, "withFullscreen", null);
+], Carousel.prototype, "withFullscreen", null);
 __decorate([
     property({ type: String, attribute: 'dot-appearance' })
-], LuxenCarousel.prototype, "dotAppearance", null);
+], Carousel.prototype, "dotAppearance", null);
+__decorate([
+    property({ type: Number, attribute: 'max-visible-dots' })
+], Carousel.prototype, "maxVisibleDots", null);
 __decorate([
     property({ type: String, attribute: 'scroll-buttons-position' })
-], LuxenCarousel.prototype, "scrollButtonsPosition", null);
+], Carousel.prototype, "scrollButtonsPosition", null);
+__decorate([
+    state()
+], Carousel.prototype, "_selectedSnap", null);
 __decorate([
     query('.scroll-buttons')
-], LuxenCarousel.prototype, "scrollButtons", void 0);
+], Carousel.prototype, "scrollButtons", void 0);
 __decorate([
     query('.button-previous')
-], LuxenCarousel.prototype, "previousBtn", void 0);
+], Carousel.prototype, "previousBtn", void 0);
 __decorate([
     query('.button-next')
-], LuxenCarousel.prototype, "nextBtn", void 0);
+], Carousel.prototype, "nextBtn", void 0);
 __decorate([
     query('.container')
-], LuxenCarousel.prototype, "container", void 0);
-__decorate([
-    queryAll('.dot')
-], LuxenCarousel.prototype, "dotNodes", void 0);
+], Carousel.prototype, "container", void 0);

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,cAAc,YAAY,CAAC;AAG3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,QAAQ,CAAC;KACxB;CACF"}

package/dist/elements/carousel/index.js

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

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

@@ -5,7 +5,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  *
  * @cssproperty --aspect-ratio - Aspect ratio of the slide.
  */
-export declare class LuxenCarouselItem extends LuxenElement {
+export declare class CarouselItem extends LuxenElement {
     static styles: CSSResultGroup;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;

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

@@ -1 +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"}
+{"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,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAErD,iBAAiB;IAKjB,MAAM;CAGhB"}

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

@@ -8,7 +8,7 @@ const styles = unsafeCSS(rawStyles);
  *
  * @cssproperty --aspect-ratio - Aspect ratio of the slide.
  */
-export class LuxenCarouselItem extends LuxenElement {
+export class CarouselItem extends LuxenElement {
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'group');
@@ -17,4 +17,4 @@ export class LuxenCarouselItem extends LuxenElement {
         return html ` <slot></slot> `;
     }
 }
-LuxenCarouselItem.styles = [hostStyles, styles];
+CarouselItem.styles = [hostStyles, styles];

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,cAAc,iBAAiB,CAAC;AAGhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,iBAAiB,CAAC;KACtC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,cAAc,iBAAiB,CAAC;AAGhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,YAAY,CAAC;KACjC;CACF"}

package/dist/elements/carousel-item/index.js

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

package/dist/elements/dialog/dialog.d.ts

@@ -30,7 +30,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @event hide - Fired when the dialog is about to close. Cancelable — call `event.preventDefault()` to keep it open.
  * @event after-hide - Fired after the close animation completes.
  */
-export declare class LuxenDialog extends LuxenElement {
+export declare class Dialog extends LuxenElement {
     static styles: import("lit").CSSResult[];
     /** Dialog title rendered in the header. */
     title: string;

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAwB1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,MAAM,CAAC,MAAM,4BAAwB;IAErC,2CAA2C;IAE3C,KAAK,SAAM;IAEX,kCAAkC;IAElC,IAAI,UAAS;IAEb,0CAA0C;IAE1C,YAAY,UAAS;IAErB,uDAAuD;IAEvD,aAAa,UAAS;IAGtB,MAAM,EAAG,iBAAiB,CAAC;IAE3B,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,gBAAgB,CAEtB;IAIF,iBAAiB;IAKjB,oBAAoB;IAKpB,YAAY;IASZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IA0BrC,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,eAAe,CAAC,CAAY;IAEpC,OAAO,CAAC,aAAa;YAcP,UAAU;IAUxB,OAAO,CAAC,qBAAqB;IAK7B,MAAM;CA0BP"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAwB1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,2CAA2C;IAE3C,KAAK,SAAM;IAEX,kCAAkC;IAElC,IAAI,UAAS;IAEb,0CAA0C;IAE1C,YAAY,UAAS;IAErB,uDAAuD;IAEvD,aAAa,UAAS;IAGtB,MAAM,EAAG,iBAAiB,CAAC;IAE3B,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,gBAAgB,CAEtB;IAIF,iBAAiB;IAKjB,oBAAoB;IAKpB,YAAY;IASZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IA0BrC,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,eAAe,CAAC,CAAY;IAEpC,OAAO,CAAC,aAAa;YAcP,UAAU;IAUxB,OAAO,CAAC,qBAAqB;IAK7B,MAAM;CA0BP"}