import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
import { PropertyValues, CSSResultGroup } from 'lit';
import { LuxenElement } from '../../shared/luxen-element.js';
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;
/** Fired when the active slide changes. Bubbles; not composed. */
export declare class CarouselSelectEvent extends Event {
    readonly index: number;
    constructor(index: number);
}
/** Fired when the set of slides in view changes. */
export declare class SlidesInViewEvent extends Event {
    readonly indexes: number[];
    constructor(indexes: number[]);
}
/** Fired when the fullscreen button is activated. */
export declare class FullscreenToggleEvent extends Event {
    constructor();
}
interface CarouselEventMap {
    select: CarouselSelectEvent;
}
declare global {
    interface GlobalEventHandlersEventMap {
        'slides-in-view': SlidesInViewEvent;
        fullscreen: FullscreenToggleEvent;
    }
}
/**
 * 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.
 * @cssproperty --dot-edge-scale - Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).
 *
 * @event select - Fired when the active slide changes. Bubbles. Properties: `index: number`.
 * @event slides-in-view - Fired when the set of slides in view changes. Properties: `indexes: number[]`.
 * @event fullscreen - Fired when the fullscreen button is activated.
 *
 * @customElement l-carousel
 */
export declare class Carousel extends LuxenElement {
    static styles: CSSResultGroup;
    private _localize;
    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';
    /**
     * 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.
     */
    accessor maxVisibleDots: number;
    accessor scrollButtonsPosition: 'inside' | 'outside';
    private accessor _selectedSnap;
    scrollButtons: HTMLElement;
    previousBtn: HTMLButtonElement;
    nextBtn: HTMLButtonElement;
    container: HTMLSlotElement;
    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>;
    private renderDots;
    render(): import('lit').TemplateResult<1>;
}
export interface Carousel {
    addEventListener<K extends keyof CarouselEventMap>(type: K, listener: (this: Carousel, ev: CarouselEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof CarouselEventMap>(type: K, listener: (this: Carousel, ev: CarouselEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
export {};
//# sourceMappingURL=carousel.d.ts.map