@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/carousel/index.jsx

@@ -0,0 +1,469 @@
+// Rivet Carousel parts (no RAC component): an embla-carousel engine (`./engine/`, port of embla-carousel 8.6.0, MIT,
+// © David Jerleke) under RAC-style parts, with W3C APG carousel semantics (basic + tabbed variants, rotation control).
+// `<Carousel><CarouselViewport><CarouselContainer><CarouselSlide/>…</CarouselContainer></CarouselViewport>
+//  <CarouselPrevious/><CarouselNext/><CarouselDots/><CarouselRotationControl/></Carousel>`.
+// - Carousel = APG carousel container (`role="region"`, `aria-roledescription="carousel"`, label from
+//   `aria-label` / `aria-labelledby`); embla options are its props (`align`, `axis`, `loop`, …), plus `autoplay`,
+//   `autoScroll`, `plugins`, `onApi`, `onSelect`, `onSettle`. State = `createCarouselState` (`./state.ts`);
+//   behaviour = `./behaviour.tsx` (engine lifecycle, handlers bound from inline arrows here → resumable, no code before
+//   the first interaction unless autoplay / auto scroll, `plugins` or `onApi` is set: then it starts when visible).
+// - CarouselViewport = embla root (`overflow: hidden`, `touch-action` per axis: behaviour styles, inline);
+//   CarouselContainer = embla container (`display: flex`, column on `axis="y"`; before the engine runs, a
+//   `startIndex` > 0 is shown with a CSS transform from `--rv-carousel-slide-size` — exact for uniform slides);
+//   CarouselSlide = APG slide (`role="group"`, `aria-roledescription="slide"`, "N of M" label; `role="tabpanel"`
+//   labelled by its tab when the carousel has `CarouselDots`, i.e. `tabs`), `flex: 0 0 var(--rv-carousel-slide-size, 100%)`.
+// - embla ClassNames plugin → headless `data-*`: slides `data-snapped`, `data-in-view`; root `data-draggable`,
+//   `data-dragging`, `data-loop`; plus `data-orientation`, `data-playing`, `data-ready`.
+// - CarouselPrevious / CarouselNext = cdk `Button` (disabled per `canScrollPrev` / `canScrollNext`); CarouselDots =
+//   APG tab list (`role="tablist"`, automatic activation, roving tabindex) of CarouselDot (`role="tab"`);
+//   CarouselRotationControl = APG rotation control (cdk `Button`, label "Stop / Start automatic slide show").
+// - Render props are accessors (`selectedIndex()`, `canScrollNext()`, `isPlaying()`, …); `render` (RAC DOMRenderProps)
+//   on every part: `if (render) return render(attrs, renderProps)` before the compiled element.
+// - Parts forward `data-*` (globalDOMProps): a styled layer adds `data-slot` per part.
+import { createContext, untrack, useContext } from "@rivetjs/reactivity";
+import { For, Provider as ContextProvider, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { renderSlot } from "@rivetjs/runtime/slot";
+import { useLocale } from "../i18n/index.js";
+import { Button } from "../button/index.jsx";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { dataBool } from "../utils/data-attrs.jsx";
+import { useId } from "../utils/id.js";
+import { read } from "../interactions/utils.js";
+import { Provider, contextProps, mergeRefValues, resumableContext, } from "../slots/index.jsx";
+import { createCarouselState, estimateRegistry, hasRotation, isRotating, isSlideInView, isSlideSnapped, } from "./state.js";
+import { carouselDragStart, carouselEffect, carouselFocusIn, carouselKeyDown, carouselKeys, carouselPointerDown, carouselScrollNext, carouselScrollPrev, carouselScrollTo, carouselSlideId, carouselTabId, carouselTabsKeyDown, carouselTabsKeys, carouselViewportId, toggleRotation, } from "./behaviour.jsx";
+import { renderPropsOf } from "../slots/index.jsx";
+export * from "./state.js";
+export * from "./behaviour.jsx";
+/** Props for the Carousel from a parent (slots). */
+export const CarouselContext = resumableContext(createContext(null, { id: "rv-carousel" }));
+/** The carousel state (`createCarouselState`). */
+export const CarouselStateContext = resumableContext(createContext(null, { id: "rv-carousel-state" }));
+/** Viewport ref + tabbed flag for the parts. */
+export const CarouselPartsContext = resumableContext(createContext(null, { id: "rv-carousel-parts" }));
+/** Index of the slide rendered inside (`CarouselContainer items`). */
+export const CarouselSlideIndexContext = resumableContext(createContext(null, { id: "rv-carousel-slide-index" }));
+const ENGINE_KEYS = [
+    "align",
+    "axis",
+    "direction",
+    "loop",
+    "slidesToScroll",
+    "containScroll",
+    "dragFree",
+    "dragThreshold",
+    "duration",
+    "startIndex",
+    "skipSnaps",
+    "inViewThreshold",
+    "watchDrag",
+    "watchResize",
+    "watchSlides",
+    "watchFocus",
+    "breakpoints",
+    "active",
+];
+const ROOT_OWNED = ["style", "render", "dir"];
+function renderValues(state) {
+    return {
+        selectedIndex: () => state.selectedIndex(),
+        snapCount: () => state.snapCount(),
+        canScrollPrev: () => state.canScrollPrev(),
+        canScrollNext: () => state.canScrollNext(),
+        isPlaying: () => state.isPlaying(),
+        isRotating: () => isRotating(state),
+        isDragging: () => state.isDragging(),
+        orientation: () => (state.options.axis === "y" ? "vertical" : "horizontal"),
+        state,
+    };
+}
+/**
+ * A carousel presents a set of slides one (group) at a time, with drag / swipe, previous / next buttons, optional
+ * tab picker and rotation (embla-carousel engine, W3C APG carousel pattern).
+ */
+export function Carousel(inProps) {
+    const [props, ref] = contextProps(inProps, inProps.ref, CarouselContext);
+    const { direction: localeDirection } = useLocale();
+    const engine = {};
+    for (const key of ENGINE_KEYS)
+        if (props[key] !== undefined)
+            engine[key] = props[key];
+    if (engine.direction === undefined)
+        engine.direction = localeDirection;
+    const state = createCarouselState({
+        ...engine,
+        id: useId(props.id),
+        slideCount: props.slideCount,
+        autoplay: props.autoplay,
+        autoScroll: props.autoScroll,
+        plugins: props.plugins,
+        onApi: props.onApi,
+        onSelect: props.onSelect,
+        onSettle: props.onSettle,
+    });
+    const viewport = createRef();
+    // Client render: start after mount. Resumed page: with rotation, `plugins` or `onApi` (embla inits them on mount:
+    // Fade / AutoHeight / tweens must run before the first interaction) the engine starts when the viewport is
+    // visible; otherwise the first interaction starts it (`ensureCarousel` in the handlers).
+    if (typeof document !== "undefined" || hasRotation(state) || state.plugins || state.onApi)
+        clientEffect(() => carouselEffect(state, viewport()), { when: "visible" });
+    const values = renderValues(state);
+    const rp = renderPropsOf(props, { values, defaultClassName: "rv-Carousel" });
+    const dom = globalDOMProps(props, ROOT_OWNED);
+    const slot = props.slot || undefined;
+    const id = state.id;
+    const label = props["aria-label"];
+    const labelledBy = props["aria-labelledby"];
+    const describedBy = props["aria-describedby"];
+    const roleDescription = props["aria-roledescription"] ?? "carousel";
+    const orientation = state.options.axis === "y" ? "vertical" : "horizontal";
+    const keys = carouselKeys(state);
+    const loop = state.options.loop ? "true" : undefined;
+    const draggable = state.options.watchDrag !== false ? "true" : undefined;
+    const parts = { viewport, tabs: !!props.tabs };
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref: ref,
+            id,
+            role: "region",
+            "aria-roledescription": roleDescription,
+            "aria-label": label,
+            "aria-labelledby": labelledBy,
+            "aria-describedby": describedBy,
+            slot,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-orientation": orientation,
+            "data-loop": loop,
+            "data-draggable": draggable,
+            "data-dragging": () => dataBool(state.isDragging()),
+            "data-playing": () => dataBool(state.isPlaying()),
+            "data-ready": () => dataBool(state.isReady()),
+            "data-rk": keys,
+            onKeyDown: (event) => carouselKeyDown(event, state),
+            onFocusIn: (event) => carouselFocusIn(event, state),
+            children: () => (<Provider values={[
+                    [CarouselStateContext, state],
+                    [CarouselPartsContext, parts],
+                ]}>
+            {rp.children()}
+          </Provider>),
+        }, values);
+    return (<div {...dom} ref={ref} id={id} role="region" aria-roledescription={roleDescription} aria-label={label} aria-labelledby={labelledBy} aria-describedby={describedBy} slot={slot} class={rp.class()} style={rp.style()} data-orientation={orientation} data-loop={loop} data-draggable={draggable} data-dragging={dataBool(state.isDragging())} data-playing={dataBool(state.isPlaying())} data-ready={dataBool(state.isReady())} data-rk={keys} preload="visible" onKeyDown={(event) => carouselKeyDown(event, state)} onFocusIn={(event) => carouselFocusIn(event, state)}>
+      <Provider values={[
+            [CarouselStateContext, state],
+            [CarouselPartsContext, parts],
+        ]}>
+        {rp.children()}
+      </Provider>
+    </div>);
+}
+function useCarousel(part) {
+    const state = useContext(CarouselStateContext);
+    const parts = useContext(CarouselPartsContext);
+    if (!state || !parts)
+        throw new Error(`<${part}> must be rendered inside a <Carousel>.`);
+    return { state, parts };
+}
+const VIEWPORT_OWNED = ["style", "render", "onPointerDown", "onMouseDown", "onTouchStart"];
+/** The clipping viewport (embla root node): drag / swipe surface. */
+export function CarouselViewport(props) {
+    const { state, parts } = useCarousel("CarouselViewport");
+    const values = renderValues(state);
+    const rp = renderPropsOf(props, {
+        values,
+        defaultClassName: "rv-CarouselViewport",
+        // Behaviour styles: clip the track; let the browser keep the cross-axis pan (embla docs `touch-action`).
+        defaultStyle: { overflow: "hidden", touchAction: state.options.axis === "y" ? "pan-x pinch-zoom" : "pan-y pinch-zoom" },
+    });
+    const dom = globalDOMProps(props, VIEWPORT_OWNED);
+    const userPointerDown = props.onPointerDown;
+    const userMouseDown = props.onMouseDown;
+    const userTouchStart = props.onTouchStart;
+    const userRef = props.ref;
+    const ref = mergeRefValues(userRef, parts.viewport);
+    const id = carouselViewportId(state);
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref,
+            id,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            onPointerDown: (event) => {
+                carouselPointerDown(event, state);
+                userPointerDown?.(event);
+            },
+            onMouseDown: (event) => {
+                carouselDragStart(event, state);
+                userMouseDown?.(event);
+            },
+            onTouchStart: (event) => {
+                carouselDragStart(event, state);
+                userTouchStart?.(event);
+            },
+            children: () => rp.children(),
+        }, values);
+    return (<div {...dom} ref={ref} id={id} class={rp.class()} style={rp.style()} preload="visible" onPointerDown={(event) => {
+            carouselPointerDown(event, state);
+            userPointerDown?.(event);
+        }} onMouseDown={(event) => {
+            carouselDragStart(event, state);
+            userMouseDown?.(event);
+        }} onTouchStart={(event) => {
+            carouselDragStart(event, state);
+            userTouchStart?.(event);
+        }}>
+      {rp.children()}
+    </div>);
+}
+/**
+ * Server / pre-engine offset of the `startIndex` snap (uniform slides of `--rv-carousel-slide-size`, no gaps), as a CSS
+ * `translate` value: a property of its own, so it never fights embla's `transform`; removed when the engine runs.
+ */
+function startOffset(state) {
+    const start = untrack(state.selectedIndex);
+    if (!start)
+        return undefined;
+    const { align = "center", axis, direction, slidesToScroll } = state.options;
+    const group = typeof slidesToScroll === "number" && slidesToScroll > 1 ? slidesToScroll : 1;
+    const size = "var(--rv-carousel-slide-size, 100%)";
+    const groupSize = `(${group} * ${size})`;
+    const alignOffset = align === "start" ? "0px" : align === "end" ? `(100% - ${groupSize})` : align === "center" ? `((100% - ${groupSize}) / 2)` : "0px";
+    const sign = axis !== "y" && direction === "rtl" ? -1 : 1;
+    const offset = `calc(${sign} * (${alignOffset} - ${start * group} * ${size}))`;
+    return axis === "y" ? `0px ${offset}` : `${offset} 0px`;
+}
+/** The slide track (embla container node): translated by the engine. */
+export function CarouselContainer(props) {
+    const { state } = useCarousel("CarouselContainer");
+    const values = renderValues(state);
+    const { items, by, children } = props;
+    // Slide indexes follow render order (static children).
+    state.refs.count = 0;
+    const list = items === undefined ? undefined : typeof items === "function" ? items : () => items;
+    if (list) {
+        const count = untrack(list).length;
+        if (count && !untrack(state.isReady)) {
+            const registry = estimateRegistry(count, state.options.slidesToScroll);
+            state.slideCount.set(count);
+            state.snapCount.set(Math.max(registry.length, 1));
+            state.slideRegistry.set(registry);
+            state.canScrollPrev.set(registry.length > 1 && (!!state.options.loop || untrack(state.selectedIndex) > 0));
+            state.canScrollNext.set(registry.length > 1 && (!!state.options.loop || untrack(state.selectedIndex) < registry.length - 1));
+        }
+    }
+    const offset = startOffset(state);
+    const rp = renderPropsOf(props, {
+        values,
+        defaultClassName: "rv-CarouselContainer",
+        // Behaviour styles: the flex track embla measures.
+        defaultStyle: { display: "flex", ...(state.options.axis === "y" ? { flexDirection: "column" } : {}) },
+    }, ["class", "style"]);
+    // The server offset of `startIndex` until the engine translates (`startCarousel` clears it before measuring).
+    const style = () => (offset && !state.isReady() ? { ...rp.style(), translate: offset } : rp.style());
+    const dom = globalDOMProps(props, ["style", "render"]);
+    const ref = props.ref;
+    // APG: the slides container is a live region while not rotating.
+    const content = () => list
+        ? (<For each={list} by={(by ?? ((item) => item))}>
+            {(item, index) => (<ContextProvider token={CarouselSlideIndexContext} value={index}>
+                {children(untrack(item), index)}
+              </ContextProvider>)}
+          </For>)
+        : renderSlot(children);
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => style(),
+            "aria-live": () => (isRotating(state) ? "off" : "polite"),
+            children: () => content(),
+        }, values);
+    return (<div {...dom} ref={ref} class={rp.class()} style={style()} aria-live={isRotating(state) ? "off" : "polite"}>
+      {content()}
+    </div>);
+}
+/** A slide (APG `role="group"` + `aria-roledescription="slide"`; tab panel in a tabbed carousel). */
+export function CarouselSlide(props) {
+    const { state, parts } = useCarousel("CarouselSlide");
+    const fromItems = useContext(CarouselSlideIndexContext);
+    const fixed = props.index ?? (fromItems ? undefined : state.refs.count);
+    if (props.index === undefined && !fromItems)
+        state.refs.count++;
+    const slide = { index: () => (fixed !== undefined ? fixed : fromItems()) };
+    const values = {
+        ...renderValues(state),
+        index: slide.index,
+        isSnapped: () => isSlideSnapped(state, slide.index()),
+        isInView: () => isSlideInView(state, slide.index()),
+    };
+    const rp = renderPropsOf(props, {
+        values,
+        defaultClassName: "rv-CarouselSlide",
+        // Behaviour style: the slide size embla measures (set `--rv-carousel-slide-size` on the carousel or a slide).
+        defaultStyle: { flex: "0 0 var(--rv-carousel-slide-size, 100%)", minWidth: "0", minHeight: "0" },
+    });
+    const dom = globalDOMProps(props, ["style", "render"]);
+    const tabs = parts.tabs;
+    const ownLabel = props["aria-label"];
+    const labelledBy = props["aria-labelledby"];
+    const roleDescription = props["aria-roledescription"] ?? "slide";
+    const ref = props.ref;
+    const label = {
+        text: () => {
+            if (ownLabel !== undefined)
+                return read(ownLabel);
+            if (tabs && !labelledBy)
+                return undefined;
+            const count = state.slideCount();
+            return count ? `${slide.index() + 1} of ${count}` : undefined;
+        },
+        labelledBy: () => labelledBy ?? (tabs ? carouselTabId(state, snapOfIndex(state, slide.index())) : undefined),
+    };
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref: ref,
+            id: () => carouselSlideId(state, slide.index()),
+            role: tabs ? "tabpanel" : "group",
+            "aria-roledescription": roleDescription,
+            "aria-label": () => label.text(),
+            "aria-labelledby": () => label.labelledBy(),
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-index": () => slide.index(),
+            "data-snapped": () => dataBool(values.isSnapped()),
+            "data-in-view": () => dataBool(values.isInView()),
+            children: () => rp.children(),
+        }, values);
+    return (<div {...dom} ref={ref} id={carouselSlideId(state, slide.index())} role={tabs ? "tabpanel" : "group"} aria-roledescription={roleDescription} aria-label={label.text()} aria-labelledby={label.labelledBy()} class={rp.class()} style={rp.style()} data-index={slide.index()} data-snapped={dataBool(values.isSnapped())} data-in-view={dataBool(values.isInView())}>
+      {rp.children()}
+    </div>);
+}
+function snapOfIndex(state, index) {
+    const registry = state.slideRegistry();
+    const snap = registry.findIndex((group) => group.includes(index));
+    if (snap >= 0)
+        return snap;
+    const n = state.options.slidesToScroll;
+    return Math.floor(index / (typeof n === "number" && n > 0 ? n : 1));
+}
+/** Scrolls to the previous snap (cdk `Button`; disabled without a previous snap). Default label "Previous slide". */
+export function CarouselPrevious(props) {
+    const { state } = useCarousel("CarouselPrevious");
+    const { isDisabled, onPress, ...rest } = props;
+    const label = props["aria-label"] ?? (props["aria-labelledby"] ? undefined : "Previous slide");
+    return (<Button class="rv-CarouselPrevious" {...rest} aria-label={label} aria-controls={props["aria-controls"] ?? carouselViewportId(state)} isDisabled={() => (isDisabled !== undefined ? !!read(isDisabled) : !state.canScrollPrev())} onPress={(event) => {
+            carouselScrollPrev(state);
+            onPress?.(event);
+        }}/>);
+}
+/** Scrolls to the next snap (cdk `Button`; disabled without a next snap). Default label "Next slide". */
+export function CarouselNext(props) {
+    const { state } = useCarousel("CarouselNext");
+    const { isDisabled, onPress, ...rest } = props;
+    const label = props["aria-label"] ?? (props["aria-labelledby"] ? undefined : "Next slide");
+    return (<Button class="rv-CarouselNext" {...rest} aria-label={label} aria-controls={props["aria-controls"] ?? carouselViewportId(state)} isDisabled={() => (isDisabled !== undefined ? !!read(isDisabled) : !state.canScrollNext())} onPress={(event) => {
+            carouselScrollNext(state);
+            onPress?.(event);
+        }}/>);
+}
+/** APG rotation control: stops / starts autoplay or auto scroll; its label says what a press does. */
+export function CarouselRotationControl(props) {
+    const { state } = useCarousel("CarouselRotationControl");
+    const { stopLabel = "Stop automatic slide show", startLabel = "Start automatic slide show", onPress, ...rest } = props;
+    return (<Button class="rv-CarouselRotationControl" {...rest} aria-label={() => (isRotating(state) ? stopLabel : startLabel)} aria-controls={props["aria-controls"] ?? carouselViewportId(state)} data-rotating={dataBool(isRotating(state))} onPress={(event) => {
+            toggleRotation(state);
+            onPress?.(event);
+        }}/>);
+}
+/** Slide picker: an APG tab list, one tab per snap (arrows / Home / End move and select). */
+export function CarouselDots(props) {
+    const { state } = useCarousel("CarouselDots");
+    // Static slides rendered before the dots: their count is known now (server render order).
+    if (!untrack(state.isReady) && !untrack(state.slideCount) && state.refs.count) {
+        const registry = estimateRegistry(state.refs.count, state.options.slidesToScroll);
+        state.slideCount.set(state.refs.count);
+        state.slideRegistry.set(registry);
+        state.snapCount.set(Math.max(registry.length, 1));
+        state.canScrollNext.set(registry.length > 1 && (!!state.options.loop || untrack(state.selectedIndex) < registry.length - 1));
+    }
+    const values = renderValues(state);
+    const rp = renderPropsOf(props, { values, defaultClassName: "rv-CarouselDots" }, ["class", "style"]);
+    const dom = globalDOMProps(props, ["style", "render"]);
+    const children = props.children;
+    const label = props["aria-label"] ?? (props["aria-labelledby"] ? undefined : "Choose slide to display");
+    const labelledBy = props["aria-labelledby"];
+    const orientation = state.options.axis === "y" ? "vertical" : "horizontal";
+    const keys = carouselTabsKeys(state);
+    const ref = props.ref;
+    const snaps = { list: () => Array.from({ length: state.snapCount() }, (_, i) => i) };
+    const content = () => (<For each={snaps.list} by={(i) => i}>
+        {(index) => (children ? children(untrack(index)) : <CarouselDot index={untrack(index)}/>)}
+      </For>);
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref: ref,
+            role: "tablist",
+            "aria-label": label,
+            "aria-labelledby": labelledBy,
+            "aria-orientation": orientation,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-orientation": orientation,
+            "data-rk": keys,
+            onKeyDown: (event) => carouselTabsKeyDown(event, state),
+            children: () => content(),
+        }, values);
+    return (<div {...dom} ref={ref} role="tablist" aria-label={label} aria-labelledby={labelledBy} aria-orientation={orientation} class={rp.class()} style={rp.style()} data-orientation={orientation} data-rk={keys} onKeyDown={(event) => carouselTabsKeyDown(event, state)}>
+      {content()}
+    </div>);
+}
+const DOT_OWNED = ["style", "render", "onClick"];
+/** One tab of `CarouselDots`: selects its snap (`aria-selected`, roving `tabindex`, `aria-controls` = its slides). */
+export function CarouselDot(props) {
+    const { state } = useCarousel("CarouselDot");
+    const index = props.index;
+    const values = { ...renderValues(state), index: () => index, isSelected: () => state.selectedIndex() === index };
+    const rp = renderPropsOf(props, { values, defaultClassName: "rv-CarouselDot" });
+    const dom = globalDOMProps(props, DOT_OWNED);
+    const userClick = props.onClick;
+    const label = props["aria-label"] ?? `Slide ${index + 1}`;
+    const ref = props.ref;
+    const controls = {
+        ids: () => (state.slideRegistry()[index] ?? estimateRegistry(state.slideCount(), state.options.slidesToScroll)[index] ?? [])
+            .map((slide) => carouselSlideId(state, slide))
+            .join(" ") || undefined,
+    };
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref: ref,
+            type: "button",
+            id: carouselTabId(state, index),
+            role: "tab",
+            "aria-label": label,
+            "aria-selected": () => (state.selectedIndex() === index ? "true" : "false"),
+            "aria-controls": () => controls.ids(),
+            tabindex: () => (state.selectedIndex() === index ? 0 : -1),
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-selected": () => dataBool(state.selectedIndex() === index),
+            onClick: (event) => {
+                carouselScrollTo(state, index);
+                userClick?.(event);
+            },
+            children: () => rp.children(),
+        }, values);
+    return (<button {...dom} ref={ref} type="button" id={carouselTabId(state, index)} role="tab" aria-label={label} aria-selected={state.selectedIndex() === index ? "true" : "false"} aria-controls={controls.ids()} tabIndex={state.selectedIndex() === index ? 0 : -1} class={rp.class()} style={rp.style()} data-selected={dataBool(state.selectedIndex() === index)} onClick={(event) => {
+            carouselScrollTo(state, index);
+            userClick?.(event);
+        }}>
+      {rp.children()}
+    </button>);
+}

package/carousel/plugins/auto-height/AutoHeight.d.ts

@@ -0,0 +1,14 @@
+import type { OptionsType } from "./Options.js";
+import type { CreatePluginType } from "../../engine/index.js";
+declare module "../../engine/Plugins.ts" {
+    interface EmblaPluginsType {
+        autoHeight: AutoHeightType;
+    }
+}
+export type AutoHeightType = CreatePluginType<{}, OptionsType>;
+export type AutoHeightOptionsType = AutoHeightType["options"];
+declare function AutoHeight(userOptions?: AutoHeightOptionsType): AutoHeightType;
+declare namespace AutoHeight {
+    let globalOptions: AutoHeightOptionsType | undefined;
+}
+export default AutoHeight;

package/carousel/plugins/auto-height/AutoHeight.js

@@ -0,0 +1,43 @@
+function AutoHeight(userOptions = {}) {
+    let emblaApi;
+    let slideHeights = [];
+    const heightEvents = ["select", "slideFocus"];
+    function init(emblaApiInstance) {
+        emblaApi = emblaApiInstance;
+        const { options: { axis }, slideRects, } = emblaApi.internalEngine();
+        if (axis === "y")
+            return;
+        slideHeights = slideRects.map((slideRect) => slideRect.height);
+        heightEvents.forEach((evt) => emblaApi.on(evt, setContainerHeight));
+        setContainerHeight();
+    }
+    function destroy() {
+        heightEvents.forEach((evt) => emblaApi.off(evt, setContainerHeight));
+        const container = emblaApi.containerNode();
+        container.style.height = "";
+        if (!container.getAttribute("style"))
+            container.removeAttribute("style");
+    }
+    function highestInView() {
+        const { slideRegistry } = emblaApi.internalEngine();
+        const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
+        if (!selectedIndexes)
+            return null;
+        return selectedIndexes.map((index) => slideHeights[index]).reduce((a, b) => Math.max(a, b), 0);
+    }
+    function setContainerHeight() {
+        const height = highestInView();
+        if (height === null)
+            return;
+        emblaApi.containerNode().style.height = `${highestInView()}px`;
+    }
+    const self = {
+        name: "autoHeight",
+        options: userOptions,
+        init,
+        destroy,
+    };
+    return self;
+}
+AutoHeight.globalOptions = undefined;
+export default AutoHeight;

package/carousel/plugins/auto-height/Options.d.ts

@@ -0,0 +1,2 @@
+import type { CreateOptionsType } from "../../engine/index.js";
+export type OptionsType = CreateOptionsType<{}>;

package/carousel/plugins/auto-height/Options.js

@@ -0,0 +1 @@
+export {};

package/carousel/plugins/auto-height/index.d.ts

@@ -0,0 +1,2 @@
+export type { AutoHeightType, AutoHeightOptionsType } from "./AutoHeight.js";
+export { default, default as AutoHeight } from "./AutoHeight.js";

package/carousel/plugins/auto-height/index.js

@@ -0,0 +1 @@
+export { default, default as AutoHeight } from "./AutoHeight.js";

package/carousel/plugins/auto-scroll/AutoScroll.d.ts

@@ -0,0 +1,25 @@
+import { type OptionsType } from "./Options.js";
+import type { CreatePluginType } from "../../engine/index.js";
+declare module "../../engine/Plugins.ts" {
+    interface EmblaPluginsType {
+        autoScroll: AutoScrollType;
+    }
+}
+declare module "../../engine/EventHandler.ts" {
+    interface EmblaEventListType {
+        autoScrollPlay: "autoScroll:play";
+        autoScrollStop: "autoScroll:stop";
+    }
+}
+export type AutoScrollType = CreatePluginType<{
+    play: (delay?: number) => void;
+    stop: () => void;
+    reset: () => void;
+    isPlaying: () => boolean;
+}, OptionsType>;
+export type AutoScrollOptionsType = AutoScrollType["options"];
+declare function AutoScroll(userOptions?: AutoScrollOptionsType): AutoScrollType;
+declare namespace AutoScroll {
+    let globalOptions: AutoScrollOptionsType | undefined;
+}
+export default AutoScroll;