material 1.0.4 → 3.0.0-next.1

package/dist/components/carousel/features/scroll.js

@@ -0,0 +1,464 @@
+import { CAROUSEL_DEFAULTS, CAROUSEL_EVENTS, CAROUSEL_VARIANTS } from "../constants.js";
+import { resolveLayoutDefaults } from "../config.js";
+import { cornerToken } from "../../../core/theme/shape.js";
+import { multiBrowseKeylines, heroKeylines, uncontainedKeylines, fullScreenKeylines, } from "../keylines.js";
+import { createStrategy, keylinesForScrollOffset, snapPositionOffset, maxScrollOffset, placeItem, } from "../strategy.js";
+const FLING_VELOCITY = 0.4;
+const DRAG_THRESHOLD = 4;
+const WHEEL_QUIET = 120;
+export const withScroll = (config) => (component) => {
+    const { variant, gap, padding, snap } = resolveLayoutDefaults(config);
+    const vertical = variant === CAROUSEL_VARIANTS.FULL_SCREEN;
+    const rules = {
+        minSmallSize: config.minSmallItemWidth ?? CAROUSEL_DEFAULTS.MIN_SMALL_ITEM_WIDTH,
+        maxSmallSize: config.maxSmallItemWidth ?? CAROUSEL_DEFAULTS.MAX_SMALL_ITEM_WIDTH,
+        anchorSize: CAROUSEL_DEFAULTS.ANCHOR_SIZE,
+        mediumLargeThreshold: CAROUSEL_DEFAULTS.MEDIUM_LARGE_THRESHOLD,
+    };
+    const cornerRadius = config.cornerRadius ?? CAROUSEL_DEFAULTS.CORNER_RADIUS;
+    const corner = cornerRadius === CAROUSEL_DEFAULTS.CORNER_RADIUS
+        ? cornerToken("extra-large", cornerRadius, config.prefix)
+        : `${cornerRadius}px`;
+    const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? window.matchMedia("(prefers-reduced-motion: reduce)")
+        : null;
+    const { element, scroller, track, slideElements } = component;
+    const prefix = component.getClass("carousel");
+    const snapClass = `${prefix}__snap`;
+    element.classList.toggle(`${prefix}--snap`, snap);
+    let lastWheel = -Infinity;
+    let strategy = null;
+    let count = 0;
+    let containerSize = 0;
+    let scrollOffsetAtStart = 0;
+    let snapPositions = [];
+    let currentIndex = Math.max(0, config.initialSlide ?? CAROUSEL_DEFAULTS.INITIAL_SLIDE);
+    const lastStyles = new WeakMap();
+    let pending = null;
+    let pendingTimer = 0;
+    const clearPending = () => {
+        pending = null;
+        window.clearTimeout(pendingTimer);
+    };
+    const expect = (index) => {
+        pending = index;
+        window.clearTimeout(pendingTimer);
+        pendingTimer = window.setTimeout(clearPending, 1000);
+    };
+    const scrollPosition = () => (vertical ? scroller.scrollTop : scroller.scrollLeft);
+    const setScrollPosition = (value, smooth) => {
+        const behavior = smooth && !reduceMotion?.matches ? "smooth" : "auto";
+        if (typeof scroller.scrollTo === "function") {
+            scroller.scrollTo(vertical ? { top: value, behavior } : { left: value, behavior });
+        }
+        else if (vertical) {
+            scroller.scrollTop = value;
+        }
+        else {
+            scroller.scrollLeft = value;
+        }
+    };
+    const emitChange = () => {
+        component.emit?.(CAROUSEL_EVENTS.CHANGE, { value: currentIndex });
+    };
+    const nearestIndex = (position) => {
+        let best = 0;
+        let bestDistance = Number.MAX_VALUE;
+        snapPositions.forEach((snapPosition, i) => {
+            const distance = Math.abs(position - snapPosition);
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                best = i;
+            }
+        });
+        return best;
+    };
+    const buildKeylines = (size) => {
+        const uniform = reduceMotion?.matches === true;
+        const preferred = config.itemWidth ?? CAROUSEL_DEFAULTS.ITEM_WIDTH;
+        switch (variant) {
+            case CAROUSEL_VARIANTS.HERO:
+            case CAROUSEL_VARIANTS.HERO_CENTER: {
+                const max = config.itemWidth ?? null;
+                return uniform
+                    ? uncontainedKeylines(size, Math.min(max ?? size, size), gap, rules)
+                    : heroKeylines(size, max, gap, count, variant === CAROUSEL_VARIANTS.HERO_CENTER, rules);
+            }
+            case CAROUSEL_VARIANTS.UNCONTAINED:
+                return uncontainedKeylines(size, preferred, gap, rules);
+            case CAROUSEL_VARIANTS.FULL_SCREEN:
+                return fullScreenKeylines(size, gap, rules);
+            default:
+                return uniform
+                    ? uncontainedKeylines(size, preferred, gap, rules)
+                    : multiBrowseKeylines(size, preferred, gap, count, rules);
+        }
+    };
+    const build = () => {
+        count = slideElements.length;
+        containerSize = vertical ? scroller.clientHeight : scroller.clientWidth;
+        currentIndex = count ? Math.min(currentIndex, count - 1) : 0;
+        if (containerSize <= 0 || count === 0) {
+            strategy = null;
+            return;
+        }
+        const afterPadding = variant === CAROUSEL_VARIANTS.UNCONTAINED ? 0 : padding;
+        strategy = createStrategy(buildKeylines(containerSize), containerSize, gap, padding, afterPadding);
+        if (!strategy.valid) {
+            strategy = null;
+            return;
+        }
+        const unit = strategy.itemSize + strategy.gap;
+        scrollOffsetAtStart = -snapPositionOffset(strategy, 0, count);
+        snapPositions = slideElements.map((_, i) => i * unit - snapPositionOffset(strategy, i, count) - scrollOffsetAtStart);
+        const scrollRange = Math.max(0, snapPositions[count - 1] ?? 0);
+        track.style[vertical ? "height" : "width"] = `${containerSize + scrollRange}px`;
+        track.style[vertical ? "width" : "height"] = "";
+        track.querySelectorAll(`.${snapClass}`).forEach((el) => el.remove());
+        const fragment = document.createDocumentFragment();
+        snapPositions.forEach((snapPosition) => {
+            const point = document.createElement("div");
+            point.className = snapClass;
+            point.style[vertical ? "top" : "left"] = `${snapPosition}px`;
+            fragment.appendChild(point);
+        });
+        track.appendChild(fragment);
+        slideElements.forEach((el) => {
+            el.style[vertical ? "height" : "width"] = `${strategy.itemSize}px`;
+            el.style[vertical ? "width" : "height"] = "";
+        });
+        element.style.setProperty(`--${config.prefix}-carousel-corner`, corner);
+    };
+    const layout = () => {
+        if (!strategy)
+            return;
+        const position = scrollPosition();
+        const scrollOffset = position + scrollOffsetAtStart;
+        const keylines = keylinesForScrollOffset(strategy, scrollOffset, maxScrollOffset(strategy, count));
+        const itemSize = strategy.itemSize;
+        const fadeRange = strategy.maxItemSize - strategy.minItemSize;
+        for (let i = 0; i < count; i++) {
+            const el = slideElements[i];
+            const placement = placeItem(strategy, keylines, i, scrollOffset);
+            const visible = Math.max(0, Math.min(itemSize, placement.size));
+            const start = placement.center - itemSize / 2 + position;
+            const offscreen = placement.center + visible / 2 < -itemSize || placement.center - visible / 2 > containerSize + itemSize;
+            const inset = Math.max(0, (itemSize - visible) / 2);
+            const fade = fadeRange > 0 ? Math.min(1, Math.max(0, (visible - strategy.minItemSize) / fadeRange)) : 1;
+            const style = offscreen
+                ? "hidden"
+                : `${Math.round(start * 100) / 100}|${Math.round(inset * 100) / 100}|${fade.toFixed(3)}`;
+            if (lastStyles.get(el) === style)
+                continue;
+            lastStyles.set(el, style);
+            if (offscreen) {
+                el.style.visibility = "hidden";
+                continue;
+            }
+            el.style.visibility = "";
+            el.style.transform = vertical ? `translate3d(0, ${start}px, 0)` : `translate3d(${start}px, 0, 0)`;
+            el.style.clipPath = vertical
+                ? `inset(${inset}px 0 round ${corner})`
+                : `inset(0 ${inset}px round ${corner})`;
+            el.style.setProperty(`--${config.prefix}-carousel-fade`, fade.toFixed(3));
+        }
+        if (pending !== null) {
+            if (Math.abs(scrollPosition() - (snapPositions[pending] ?? 0)) < 1)
+                clearPending();
+            return;
+        }
+        const index = nearestIndex(scrollPosition());
+        if (index !== currentIndex) {
+            currentIndex = index;
+            emitChange();
+        }
+    };
+    const rebuild = () => {
+        stopWheel();
+        build();
+        if (strategy) {
+            expect(currentIndex);
+            setScrollPosition(snapPositions[currentIndex] ?? 0, false);
+        }
+        layout();
+    };
+    const goTo = (index) => {
+        stopWheel();
+        if (!count)
+            return;
+        const target = Math.min(Math.max(index, 0), count - 1);
+        if (strategy) {
+            expect(target);
+            setScrollPosition(snapPositions[target] ?? 0, true);
+        }
+        if (target !== currentIndex) {
+            currentIndex = target;
+            emitChange();
+        }
+    };
+    const next = () => goTo(currentIndex + 1);
+    const prev = () => goTo(currentIndex - 1);
+    const indexOf = (target) => {
+        const item = target?.closest?.(`.${prefix}__item`);
+        return item ? slideElements.indexOf(item) : -1;
+    };
+    const handleKeyDown = (e) => {
+        stopWheel();
+        const from = indexOf(e.target);
+        if (from < 0)
+            return;
+        const forward = vertical ? "ArrowDown" : "ArrowRight";
+        const backward = vertical ? "ArrowUp" : "ArrowLeft";
+        let target = -1;
+        if (e.key === forward)
+            target = from + 1;
+        else if (e.key === backward)
+            target = from - 1;
+        else if (e.key === "Home")
+            target = 0;
+        else if (e.key === "End")
+            target = count - 1;
+        if (target < 0 || target >= count)
+            return;
+        e.preventDefault();
+        slideElements[target].focus({ preventScroll: true });
+        goTo(target);
+    };
+    const handleFocusIn = (e) => {
+        const index = indexOf(e.target);
+        if (index >= 0 && index !== currentIndex)
+            goTo(index);
+    };
+    let dragging = false;
+    let dragged = false;
+    let dragStart = 0;
+    let dragScrollStart = 0;
+    let dragLast = 0;
+    let dragLastTime = 0;
+    let dragVelocity = 0;
+    let settleTimer = 0;
+    const restoreSnap = () => {
+        window.clearTimeout(settleTimer);
+        scroller.removeEventListener("scrollend", restoreSnap);
+        delete element.dataset.settling;
+    };
+    const handlePointerDown = (e) => {
+        stopWheel();
+        clearPending();
+        if (e.pointerType !== "mouse" || e.button !== 0 || !strategy)
+            return;
+        dragging = true;
+        lastWheel = -Infinity;
+        dragged = false;
+        dragStart = vertical ? e.clientY : e.clientX;
+        dragLast = dragStart;
+        dragLastTime = e.timeStamp;
+        dragVelocity = 0;
+        dragScrollStart = scrollPosition();
+        restoreSnap();
+        element.dataset.settling = "true";
+        scroller.setPointerCapture(e.pointerId);
+    };
+    const handlePointerMove = (e) => {
+        if (!dragging)
+            return;
+        const position = vertical ? e.clientY : e.clientX;
+        const delta = position - dragStart;
+        if (!dragged && Math.abs(delta) < DRAG_THRESHOLD)
+            return;
+        dragged = true;
+        element.dataset.dragging = "true";
+        const dt = e.timeStamp - dragLastTime;
+        if (dt > 0)
+            dragVelocity = (position - dragLast) / dt;
+        dragLast = position;
+        dragLastTime = e.timeStamp;
+        if (vertical)
+            scroller.scrollTop = dragScrollStart - delta;
+        else
+            scroller.scrollLeft = dragScrollStart - delta;
+        e.preventDefault();
+    };
+    const handlePointerUp = (e) => {
+        if (!dragging)
+            return;
+        dragging = false;
+        if (scroller.hasPointerCapture(e.pointerId))
+            scroller.releasePointerCapture(e.pointerId);
+        delete element.dataset.dragging;
+        if (!dragged) {
+            restoreSnap();
+            return;
+        }
+        if (snap) {
+            let target = nearestIndex(scrollPosition());
+            if (dragVelocity < -FLING_VELOCITY)
+                target = Math.min(count - 1, target + 1);
+            else if (dragVelocity > FLING_VELOCITY)
+                target = Math.max(0, target - 1);
+            goTo(target);
+            scroller.addEventListener("scrollend", restoreSnap, { once: true });
+            settleTimer = window.setTimeout(restoreSnap, 600);
+        }
+        else {
+            restoreSnap();
+        }
+    };
+    const handleClick = (e) => {
+        if (dragged) {
+            dragged = false;
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    let wheelDirection = 0;
+    let wheelStart = 0;
+    let wheelDelta = 0;
+    let wheelTarget = 0;
+    let wheelFrame = 0;
+    let wheelPosition = 0;
+    let wheelVelocity = 0;
+    let wheelTime = 0;
+    let wheelSnap = null;
+    let wheelSnapPriority = "";
+    const stopWheel = (resetGesture = true) => {
+        if (wheelFrame)
+            window.cancelAnimationFrame(wheelFrame);
+        wheelFrame = 0;
+        wheelVelocity = 0;
+        if (resetGesture)
+            lastWheel = -Infinity;
+        if (wheelSnap !== null) {
+            scroller.style.setProperty("scroll-snap-type", wheelSnap, wheelSnapPriority);
+            wheelSnap = null;
+            clearPending();
+        }
+    };
+    const glide = (now) => {
+        const dt = (now - wheelTime) / 1000;
+        wheelTime = now;
+        const offset = wheelPosition - wheelTarget;
+        const decay = Math.exp(-12 * dt);
+        const carry = wheelVelocity + 12 * offset;
+        wheelPosition = wheelTarget + (offset + carry * dt) * decay;
+        wheelVelocity = (wheelVelocity - 12 * carry * dt) * decay;
+        const resting = wheelDirection * (wheelPosition - wheelTarget) >= 0 ||
+            (Math.abs(wheelPosition - wheelTarget) < 0.5 && Math.abs(wheelVelocity) < 5);
+        scroller.scrollLeft = resting ? wheelTarget : wheelPosition;
+        if (resting)
+            stopWheel(false);
+        else
+            wheelFrame = window.requestAnimationFrame(glide);
+    };
+    const handleTouchStart = () => {
+        stopWheel();
+        clearPending();
+    };
+    const handleWheel = (e) => {
+        if (e.ctrlKey || dragging || Math.abs(e.deltaX) >= Math.abs(e.deltaY) || !strategy)
+            return;
+        const position = scrollPosition();
+        const end = snapPositions[count - 1] ?? 0;
+        const direction = Math.sign(e.deltaY);
+        if (direction < 0 ? position <= 1 : position >= end - 1)
+            return;
+        e.preventDefault();
+        if (direction !== wheelDirection)
+            stopWheel();
+        if (e.timeStamp - lastWheel >= WHEEL_QUIET || direction !== wheelDirection) {
+            wheelStart = position;
+            wheelDelta = 0;
+            wheelTarget = position;
+        }
+        lastWheel = e.timeStamp;
+        wheelDirection = direction;
+        const unit = e.deltaMode === 1
+            ? parseFloat(window.getComputedStyle(scroller).lineHeight) || 16
+            : e.deltaMode === 2 ? containerSize : 1;
+        wheelDelta += e.deltaY * unit;
+        const destination = Math.max(0, Math.min(end, wheelStart + wheelDelta));
+        let index = direction > 0 ? count - 1 : 0;
+        for (let i = direction > 0 ? 0 : count - 1; i >= 0 && i < count; i += direction) {
+            if (direction * (snapPositions[i] - destination) >= 0 &&
+                direction * (snapPositions[i] - wheelStart) > 0) {
+                index = i;
+                break;
+            }
+        }
+        const target = snapPositions[index];
+        if (direction * (target - wheelTarget) > 0) {
+            wheelTarget = target;
+            expect(index);
+            if (reduceMotion?.matches) {
+                setScrollPosition(target, false);
+            }
+            else if (!wheelFrame) {
+                wheelSnap = scroller.style.getPropertyValue("scroll-snap-type");
+                wheelSnapPriority = scroller.style.getPropertyPriority("scroll-snap-type");
+                scroller.style.setProperty("scroll-snap-type", "none");
+                scroller.scrollLeft = position;
+                wheelPosition = position;
+                wheelTime = performance.now();
+                wheelFrame = window.requestAnimationFrame(glide);
+            }
+            if (index !== currentIndex) {
+                currentIndex = index;
+                emitChange();
+            }
+        }
+        else {
+            expect(currentIndex);
+        }
+    };
+    const setWheel = (on) => {
+        scroller.removeEventListener("wheel", handleWheel);
+        stopWheel();
+        if (on && !vertical)
+            scroller.addEventListener("wheel", handleWheel, { passive: false });
+    };
+    scroller.addEventListener("scroll", layout, { passive: true });
+    scroller.addEventListener("wheel", clearPending, { passive: true });
+    setWheel(!!config.wheel);
+    scroller.addEventListener("touchstart", handleTouchStart, { passive: true });
+    scroller.addEventListener("keydown", handleKeyDown);
+    scroller.addEventListener("focusin", handleFocusIn);
+    scroller.addEventListener("pointerdown", handlePointerDown);
+    scroller.addEventListener("pointermove", handlePointerMove);
+    scroller.addEventListener("pointerup", handlePointerUp);
+    scroller.addEventListener("pointercancel", handlePointerUp);
+    scroller.addEventListener("click", handleClick, true);
+    reduceMotion?.addEventListener?.("change", rebuild);
+    const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(rebuild) : null;
+    resizeObserver?.observe(scroller);
+    component.onSlidesChanged(rebuild);
+    rebuild();
+    const destroy = component.lifecycle?.destroy;
+    const enhanced = component;
+    enhanced.getCurrentSlide = () => currentIndex;
+    enhanced.getVariant = () => variant;
+    enhanced.next = next;
+    enhanced.prev = prev;
+    enhanced.goTo = goTo;
+    enhanced.setWheel = setWheel;
+    enhanced.lifecycle = {
+        destroy: () => {
+            setWheel(false);
+            restoreSnap();
+            resizeObserver?.disconnect();
+            reduceMotion?.removeEventListener?.("change", rebuild);
+            clearPending();
+            scroller.removeEventListener("scroll", layout);
+            scroller.removeEventListener("wheel", clearPending);
+            scroller.removeEventListener("touchstart", handleTouchStart);
+            scroller.removeEventListener("keydown", handleKeyDown);
+            scroller.removeEventListener("focusin", handleFocusIn);
+            scroller.removeEventListener("pointerdown", handlePointerDown);
+            scroller.removeEventListener("pointermove", handlePointerMove);
+            scroller.removeEventListener("pointerup", handlePointerUp);
+            scroller.removeEventListener("pointercancel", handlePointerUp);
+            scroller.removeEventListener("click", handleClick, true);
+            destroy?.();
+        },
+    };
+    return enhanced;
+};

package/dist/components/carousel/features/slides.d.ts

@@ -0,0 +1,18 @@
+import { CarouselConfig, SlidesAPI } from "../types.js";
+export interface SlidesComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    /** Scroll container holding the track */
+    scroller: HTMLElement;
+    /** Positioned parent of the items */
+    track: HTMLElement;
+    slides: SlidesAPI;
+    slideElements: HTMLElement[];
+    /** Registers the callback run when items are added or removed (the scroll feature rebuilds) */
+    onSlidesChanged: (handler: () => void) => void;
+    [key: string]: unknown;
+}
+export declare const withSlides: (config: CarouselConfig) => <C extends {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+}>(component: C) => C & SlidesComponent;

package/dist/components/carousel/features/slides.js

@@ -0,0 +1,129 @@
+import { safeUrl } from "../../../core/utils/url.js";
+import { setHTML } from "../../../core/dom/html.js";
+export const withSlides = (config) => (component) => {
+    const prefix = component.getClass("carousel");
+    const scroller = document.createElement("div");
+    scroller.className = `${prefix}__scroller`;
+    const track = document.createElement("div");
+    track.className = `${prefix}__track`;
+    scroller.appendChild(track);
+    component.element.appendChild(scroller);
+    const slideData = [];
+    const slideElements = [];
+    const enhanced = component;
+    let slidesChanged;
+    const relabel = () => {
+        const total = slideElements.length;
+        slideElements.forEach((el, i) => {
+            el.dataset.index = String(i);
+            el.setAttribute("aria-label", `${i + 1} of ${total}`);
+        });
+    };
+    const fill = (el, slide) => {
+        el.replaceChildren();
+        if (slide.content !== undefined) {
+            if (typeof slide.content === "string")
+                setHTML(el, slide.content);
+            else
+                el.appendChild(slide.content);
+            return;
+        }
+        if (slide.image) {
+            const img = document.createElement("img");
+            img.className = `${prefix}__image`;
+            img.src = safeUrl(slide.image);
+            img.alt = slide.alt ?? slide.title ?? "";
+            img.draggable = false;
+            el.appendChild(img);
+        }
+        if (slide.title || slide.description || slide.buttonText) {
+            const content = document.createElement("div");
+            content.className = `${prefix}__content`;
+            if (slide.title) {
+                const title = document.createElement("div");
+                title.className = `${prefix}__title`;
+                title.textContent = slide.title;
+                content.appendChild(title);
+            }
+            if (slide.description) {
+                const description = document.createElement("div");
+                description.className = `${prefix}__description`;
+                description.textContent = slide.description;
+                content.appendChild(description);
+            }
+            if (slide.buttonText) {
+                const button = document.createElement("a");
+                button.className = `${prefix}__button`;
+                button.textContent = slide.buttonText;
+                if (slide.buttonUrl)
+                    button.href = safeUrl(slide.buttonUrl);
+                content.appendChild(button);
+            }
+            el.appendChild(content);
+        }
+    };
+    const createSlideElement = (slide) => {
+        const el = document.createElement("div");
+        el.className = `${prefix}__item`;
+        el.setAttribute("role", "group");
+        el.setAttribute("aria-roledescription", "slide");
+        el.tabIndex = 0;
+        fill(el, slide);
+        return el;
+    };
+    const changed = () => {
+        relabel();
+        slidesChanged?.();
+    };
+    const slides = {
+        addSlide(slide, index) {
+            const at = index !== undefined && index >= 0 && index <= slideData.length ? index : slideData.length;
+            const el = createSlideElement(slide);
+            slideData.splice(at, 0, slide);
+            if (at < slideElements.length) {
+                track.insertBefore(el, slideElements[at]);
+                slideElements.splice(at, 0, el);
+            }
+            else {
+                track.appendChild(el);
+                slideElements.push(el);
+            }
+            changed();
+            return slides;
+        },
+        removeSlide(index) {
+            if (index < 0 || index >= slideElements.length)
+                return slides;
+            track.removeChild(slideElements[index]);
+            slideElements.splice(index, 1);
+            slideData.splice(index, 1);
+            changed();
+            return slides;
+        },
+        updateSlide(index, slide) {
+            if (index < 0 || index >= slideElements.length)
+                return slides;
+            slideData[index] = slide;
+            fill(slideElements[index], slide);
+            return slides;
+        },
+        getSlide: (index) => slideData[index] ?? null,
+        getCount: () => slideData.length,
+        getElements: () => slideElements.slice(),
+    };
+    enhanced.scroller = scroller;
+    enhanced.track = track;
+    enhanced.slides = slides;
+    enhanced.slideElements = slideElements;
+    enhanced.onSlidesChanged = (handler) => {
+        slidesChanged = handler;
+    };
+    (config.slides ?? []).forEach((slide) => {
+        const el = createSlideElement(slide);
+        slideData.push(slide);
+        slideElements.push(el);
+        track.appendChild(el);
+    });
+    relabel();
+    return enhanced;
+};

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

@@ -0,0 +1,3 @@
+export { default, createCarousel } from "./carousel.js";
+export { CAROUSEL_VARIANTS, CAROUSEL_EVENTS, CAROUSEL_DEFAULTS, } from "./constants.js";
+export type { CarouselConfig, CarouselComponent, CarouselEvents, CarouselChangePayload, CarouselSlide, CarouselVariant, SlidesAPI, } from "./types.js";

package/dist/components/carousel/index.js

@@ -0,0 +1,2 @@
+export { default, createCarousel } from "./carousel.js";
+export { CAROUSEL_VARIANTS, CAROUSEL_EVENTS, CAROUSEL_DEFAULTS, } from "./constants.js";

package/dist/components/carousel/keylines.d.ts

@@ -0,0 +1,65 @@
+export interface Keyline {
+    size: number;
+    /** Centre of the item along the axis, in container coordinates */
+    offset: number;
+    /** Centre the item would have if every item were large */
+    unadjustedOffset: number;
+    isFocal: boolean;
+    isAnchor: boolean;
+    isPivot: boolean;
+    /** How much of the item hangs outside the container */
+    cutoff: number;
+}
+export type KeylineList = Keyline[];
+interface TmpKeyline {
+    size: number;
+    isAnchor: boolean;
+}
+export interface KeylineRules {
+    minSmallSize: number;
+    maxSmallSize: number;
+    anchorSize: number;
+    /** A medium item wider than this share of a large one is cut differently in uncontained layouts */
+    mediumLargeThreshold: number;
+}
+export declare const firstFocalIndex: (list: KeylineList) => number;
+export declare const lastFocalIndex: (list: KeylineList) => number;
+export declare const firstNonAnchorIndex: (list: KeylineList) => number;
+export declare const lastNonAnchorIndex: (list: KeylineList) => number;
+export declare const pivotIndex: (list: KeylineList) => number;
+export declare const focalCount: (list: KeylineList) => number;
+export declare const minSize: (list: KeylineList) => number;
+export declare const maxSize: (list: KeylineList) => number;
+export declare const isFirstFocalItemAtStartOfContainer: (list: KeylineList) => boolean;
+export declare const isLastFocalItemAtEndOfContainer: (list: KeylineList, containerSize: number) => boolean;
+export declare const firstIndexAfterFocalRangeWithSize: (list: KeylineList, size: number) => number;
+export declare const lastIndexBeforeFocalRangeWithSize: (list: KeylineList, size: number) => number;
+export declare const keylineBefore: (list: KeylineList, unadjustedOffset: number) => Keyline;
+export declare const keylineAfter: (list: KeylineList, unadjustedOffset: number) => Keyline;
+export declare const lerpKeyline: (a: Keyline, b: Keyline, t: number) => Keyline;
+export declare const lerpKeylineList: (from: KeylineList, to: KeylineList, t: number) => KeylineList;
+/** Builds a keyline list with an explicit pivot (used for the shifted start and end steps) */
+export declare const keylineListWithPivot: (containerSize: number, gap: number, pivotIdx: number, pivotOffset: number, tmp: TmpKeyline[]) => KeylineList;
+/** Builds a keyline list aligned to the start or centre of the container */
+export declare const keylineListAligned: (containerSize: number, gap: number, alignment: "start" | "center", tmp: TmpKeyline[]) => KeylineList;
+/**
+ * Multi-browse: at least one large, one medium and one small item; a small
+ * item aims for a third of a large one within the 40–56dp range and the
+ * medium item sits halfway. More large items appear as the container grows.
+ */
+export declare const multiBrowseKeylines: (containerSize: number, preferredItemSize: number, gap: number, count: number, rules: KeylineRules) => KeylineList;
+/**
+ * Hero: one large item (or more on wide containers) and one small item; the
+ * centred variant places the large item between two small ones.
+ */
+export declare const heroKeylines: (containerSize: number, maxItemSize: number | null, gap: number, count: number, centered: boolean, rules: KeylineRules) => KeylineList;
+/**
+ * Uncontained: every item keeps its width and the last visible one is cut
+ * off at the trailing edge, about a third of it hidden. Compose folds the
+ * spacing into the item size; here the gaps stay between the items so the
+ * spec's 8dp holds and the cut-off item keeps two thirds visible.
+ */
+export declare const uncontainedKeylines: (containerSize: number, itemSize: number, gap: number, rules: KeylineRules) => KeylineList;
+/** Full-screen: one item fills the container edge to edge */
+export declare const fullScreenKeylines: (containerSize: number, gap: number, rules: KeylineRules) => KeylineList;
+export {};