import "./icon-CTW4Gr4z.js"; import "./carousel-item-8Am7bwl9.js"; import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/carousel/carousel.d.ts /** * * * @summary Displays content in a scrollable horizontal slider with navigation controls. * @tag sigvelo-carousel * @documentation https://design-system.sigvelo.com/docs/components/carousel * @status stable * @since 1.0 * * @dependency sigvelo-carousel-item * @dependency sigvelo-sigvelo-icon * * @slot - The default slot for carousel items. * * @csspart items - The scrollable container that holds the carousel items. * @csspart controls - The container that surrounds nav buttons and pagination. * @csspart previous-button - The previous button. * @csspart next-button - The next button. * @csspart pagination - The container for the pagination dots. * @csspart pagination-dot - Each individual pagination dot. * @csspart pagination-dot-active - The active pagination dot. * * @event sigvelo-item-change - Emitted when the active item changes and the slide has been fully scrolled into view. * * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of the carousel. By default, carousels render 100% wide, so * this helps retain proportions across various devices. Gets applied to the `items` part. * @cssproperty [--item-gap=2rem] - The gap between items in the carousel. * @cssproperty [--dot-size=0.875em] - The size of each pagination dot. * @cssproperty [--dot-gap=0.5em] - The size of the gap between pagination dots. * @cssproperty [--dot-color=var(--sigvelo-color-neutral-bg-muted)] - The color of inactive pagination dots. * @cssproperty [--dot-active-color=var(--sigvelo-color-neutral-bg-strong)] - The color of active pagination dots. * * @cssstate scrolling - Applied when the carousel is scrolling. * * @example Default * ```html * * Slide 1 * Slide 2 * Slide 3 * Slide 4 * Slide 5 * * * * * * ``` * * @example Providing content * Slot in `` items with the content you'd like to show in each slide. Images work well, but you can add just about any content, including interactive elements such as links and buttons. * * By default, the carousel spans 100% of the width and uses a 16/9 aspect ratio. You can adjust this using the `--aspect-ratio` custom property as shown below. For full control over the width and height, you can target the `items` part using CSS. * * ```html * * * * A gray and white cat sleeps on a blanket with evening lights in the background *

Kittens dream of chasing moonbeams across the sky.

* Learn more * * * * * * A kitten sleeps peacefully on the floor *

Kittens nap to plot their next playful adventure.

* Learn more * * * * * * An orange cat sleeps peacefully at the edge of a bed *

Kittens snooze, dreaming of fluffy clouds to leap.

* Learn more * * * * * * A sleepy cat looks up in dim, hazy purple lighting *

Kittens yawn, scheming to pounce on twilight stars.

* Learn more * * * * * * A gray cat curled up but keeping an eye out *

Kittens curl up, plotting to unravel yarn mysteries.

* Learn more * * * * * * ``` * * @example Setting items by index * Use the `active-index` attribute to set the item that should show initially. The index is zero-based, so the first slide has an index of 0, the second slide has an index of 1, etc. * * ```html * * Slide 1 * Slide 2 * Slide 3 * Slide 4 * Slide 5 * * * * ``` * * @example Setting items by name * You can assign names to carousel items using the `name` attribute. When a carousel item is named, you can use the `active-name` attribute on the carousel to point to the respective item. This is a convenient way to reference specific slides without having to track index numbers. * * ```html * * Slide 1 * Slide 2 * Slide 3 * Slide 4 * Slide 5 * * * * * * ``` * * @example Looping navigation * Add the `loop` attribute to enable looping when using navigation buttons and arrow keys. This will not cause slides to loop when scrolling. * * ```html * * Slide 1 * Slide 2 * Slide 3 * Slide 4 * Slide 5 * * * * ``` * * @example Hiding navigation * You can hide the previous/next buttons by adding the `without-nav` attribute. To hide the pagination dots, use the `without-pagination` attribute. * * ```html *
*
*
* *
* * * Slide 1 * Slide 2 * Slide 3 * Slide 4 * Slide 5 * *
* * * * * ``` * * @example Varying widths * You can create carousel items with various widths and max widths by applying the appropriate styles to each item. * * ```html * * Slide 1 * Slide 2 * Slide 3 * Slide 4 * Slide 5 * * * * ``` * * @example Styling carousels * Carousels come with a simple, minimal appearance. Feel free to customize them with your own styles. * * ```html * * * A gray and white cat sleeps on a blanket with evening lights in the background * * * A kitten sleeps peacefully on the floor * * * An orange cat sleeps peacefully at the edge of a bed * * * A sleepy cat looks up in dim, hazy purple lighting * * * A gray cat curled up but keeping an eye out * * * * * ``` */ declare class SigveloCarousel extends SigveloElement { static styles: CSSResultGroup; private hasInitialized; private isUserInitiated; private localize; private pendingEventDispatch; private resizeObserver; items: HTMLElement; isScrolling: boolean; itemCount: number; /** A custom label for the carousel. This won't be visible, but it will be read to assistive devices. */ label: string; /** The current active item's index. */ activeIndex: number; /** The current active item's name. */ activeName: string; /** Enables looping navigation. When true, prev/next buttons wrap around to the opposite end. */ loop: boolean; /** Hides navigation buttons. */ withoutNav: boolean; /** Hides pagination dots. */ withoutPagination: boolean; connectedCallback(): void; disconnectedCallback(): void; firstUpdated(): void; updated(changedProperties: PropertyValues): void; /** Get the items from the default slot */ private getItems; private handleSlotChange; /** * Navigate to the selected dot's index */ private handleDotClick; /** * Handle keyboard navigation for the pagination dots */ private handleDotKeyDown; private handleScrollSnapChanging; private handleScrollSnapChange; private handleScroll; private handleScrollEnd; private handleWheel; /** Sets the active item and scrolls to it */ private setActiveItem; private setupResizeObserver; /** Navigate to the specified item. */ scrollToIndex(index: number, scrollBehavior?: ScrollBehavior): void; /** Navigate to the next item */ scrollToNext(scrollBehavior?: ScrollBehavior): void; /** Navigate to the previous item */ scrollToPrevious(scrollBehavior?: ScrollBehavior): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-carousel": SigveloCarousel; } } //#endregion export { SigveloCarousel as t };