@sandlada/mdc/build/components/carousel/internal/base-carousel.d.ts

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

/**
 * @license
 * Copyright 2026 Kai-Orion & Sandlada
 * SPDX-License-Identifier: MIT
 *
 * @fileoverview
 * Internal base class for `mdc-carousel` — the horizontal scroll-snap
 * container that owns layout and focal tracking for its `mdc-carousel-item`
 * children.
 *
 * Item widths follow the Jetpack Compose Material 3 carousel formulas:
 * the large item targets `preferred-item-width`, the small item clamps to
 * roughly a third of it (40–56px, `CarouselDefaults.Min/MaxSmallItemSize`)
 * and the medium item is their average. Sizes are recomputed on container
 * resize and published as `--_carousel-computed-*` custom properties that the
 * items consume via `--_item-width-*`.
 *
 * The focal item is the cell resting at the leading keyline (inline-start
 * padding position); it is tracked across scroll and surfaced through the
 * `carousel-active-change` event and the reflected `active` attribute.
 */
import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
import { type CarouselVariant, type ICarousel } from '../carousel.interface';
export declare abstract class BaseCarousel extends LitElement implements ICarousel {
    static styles: import("lit").CSSResult;
    /**
     * Visual variant. `multi-browse` (default) mixes large / medium / small
     * items that snap to the leading keyline; `uncontained` keeps a single
     * fixed item width and scrolls freely.
     */
    variant: CarouselVariant;
    /** Target width of the `large` items in px; small / medium derive from it. */
    preferredItemWidth: number;
    private readonly assignedItems;
    private items;
    private resizeObserver;
    private scrollRafId;
    private activeIndexValue;
    /** Index of the current focal (leading) item, or `-1` when empty. */
    get activeIndex(): number;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Scrolls the item at `index` so its start edge rests on the leading
     * keyline. Resolves when the smooth scroll has been requested.
     */
    scrollToItem(index: number): void;
    protected render(): TemplateResult;
    protected updated(changedProperties: PropertyValues<this>): void;
    /**
     * Derives the large / medium / small item widths from
     * `preferred-item-width` and the current container width, then publishes
     * them as `--_carousel-computed-*` for the slotted items.
     */
    private computeSizes;
    private readonly handleSlotChange;
    private readonly handleScroll;
    /**
     * Finds the cell whose start edge is nearest the leading keyline and, if
     * it differs from the current focal item, commits it as active and
     * dispatches `carousel-active-change`.
     */
    private updateActiveItem;
    private readonly handleKeydown;
    /** Resolved inline-start padding, used as the leading keyline offset. */
    private get leadingPadding();
}
//# sourceMappingURL=base-carousel.d.ts.map