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

package/calendar/index.jsx

@@ -0,0 +1,484 @@
+// Ported from react-aria-components (react-spectrum) src/Calendar.tsx, Apache-2.0, © Adobe.
+// Rivet:
+// - RAC parts 1:1: Calendar / RangeCalendar provide `ButtonContext` (slots `previous` / `next`),
+//   `HeadingContext` (`children: () => title`), `TextContext` (slot `errorMessage`) and the state
+//   contexts; CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell,
+//   CalendarHeading, CalendarMonthPicker, CalendarYearPicker read them.
+// - Preset: a Calendar without children renders RAC's documented anatomy (header with the previous
+//   button, heading and next button, then one CalendarGrid per visible month). The buttons have no
+//   icon (headless: pass `<Button slot="previous"><ChevronLeft /></Button>` children for icons).
+// - Dates live in signals as strings; cells capture date keys only (resumable). Each grid body
+//   re-renders when its first date moves (a computed key), cells patch attributes otherwise.
+// - Grid interaction is delegated: one keydown / focus / pointer handler per `<table>` finds the
+//   cell from `data-date`; RAC's per-cell useHover / usePress / useFocusRing states are signals of
+//   the hovered / pressed / focus-visible cell key in the state.
+// - Render props are accessors (`class={({ isSelected }) => isSelected() ? … }`); CalendarCell's
+//   `date` render prop is an accessor too (date objects are not serializable).
+// `render` (RAC DOMRenderProps): given, the attributes object (reactive entries are accessors) goes to `render(attrs, renderProps)` instead of the default element. Parts: Calendar, RangeCalendar, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell
+// (the `<td>` stays; `render` replaces its inner `<div>`).
+// Deviations: CalendarCell takes no HoverEvents (`isHovered` render prop only);
+// no `locale` prop (I18nProvider); CalendarContext provides `{ firstDayOfWeek }` only (RAC: all props).
+import { computed, createContext, untrack, useContext } from "@rivetjs/reactivity";
+import { clientEffect } from "@rivetjs/runtime/dom";
+import { isSlot } from "@rivetjs/runtime/slot";
+import { visuallyHidden } from "@rivetjs/cdk/a11y";
+import { globalDOMProps } from "@rivetjs/cdk/dom-props";
+import {} from "../utils/render.js";
+import { ButtonContext, Button } from "../button/index.jsx";
+import { Heading, HeadingContext } from "../heading/index.jsx";
+import { TextContext } from "../text/index.jsx";
+import { Provider, contextProps, renderProps, renderPropsOf, resumableContext, } from "../slots/index.jsx";
+import { createCalendarState, createRangeCalendarState, getDatesInWeek, isCalendarDisabled, isValueInvalid, message, readDate, visibleRange, } from "../state/calendar.js";
+import { GRID_KEYS, calendarCellProps, calendarGridClick, calendarGridContextMenu, calendarGridFocusIn, calendarGridFocusOut, calendarGridKeyDown, calendarGridMouseDown, calendarGridPointerDown, calendarGridPointerOut, calendarGridPointerOver, calendarGridPointerUp, calendarGridProps, calendarHeadingProps, calendarMonthPickerProps, calendarNextPress, calendarPreviousPress, calendarProps, calendarYearPickerProps, calendarFlagAttr, cellKey, focusCell, isOutsideMonthOf, promptId, rangeCalendarFocusOut, rangeCalendarProps, visibleStartKey, } from "./behaviour.jsx";
+import { liveDateProps } from "../date-field/live-value.jsx";
+import { hasLive, isLive, liveOptions } from "../utils/live.jsx";
+export const CalendarContext = resumableContext(createContext({}, { id: "rv-calendar" }));
+export const RangeCalendarContext = resumableContext(createContext({}, { id: "rv-range-calendar" }));
+export const CalendarStateContext = resumableContext(createContext(null, { id: "rv-calendar-state" }));
+export const RangeCalendarStateContext = resumableContext(createContext(null, { id: "rv-range-calendar-state" }));
+/** Handlers the Calendar root / CalendarGrid own (the user's run after them). */
+const ROOT_OWNED = ["onFocusOut", "style", "render"];
+const GRID_OWNED = [
+    "onKeyDown",
+    "onFocusIn",
+    "onFocusOut",
+    "onMouseDown",
+    "onPointerDown",
+    "onPointerUp",
+    "onPointerOver",
+    "onPointerOut",
+    "onClick",
+    "onContextMenu",
+    "style",
+    "render",
+];
+/** Number of month grids of a visible duration (preset). */
+const monthCount = (duration) => (duration.months && !duration.days && !duration.weeks && !duration.years ? duration.months : 1);
+/** The preset anatomy (no children): header (previous, heading, next) + one grid per visible month. */
+function defaultChildren(state) {
+    const months = [...Array(monthCount(state.visibleDuration)).keys()];
+    return (<>
+      <header>
+        <Button slot="previous"/>
+        <Heading />
+        <Button slot="next"/>
+      </header>
+      {months.map((offset) => (<CalendarGrid offset={offset ? { months: offset } : undefined}>{(date) => <CalendarCell date={date}/>}</CalendarGrid>))}
+    </>);
+}
+/** Shared Calendar / RangeCalendar root (RAC: two copies of the same markup). */
+function calendarRoot(props, ref, state) {
+    const isRange = state.mode === "range";
+    const aria = isRange ? rangeCalendarProps(props, state) : calendarProps(props, state);
+    const values = {
+        state,
+        isDisabled: () => isCalendarDisabled(state),
+        isInvalid: () => isValueInvalid(state),
+    };
+    // Lazy: the preset renders inside the Provider; an object-literal
+    // function value (resumable wherever the children accessor is encoded).
+    const preset = { content: () => defaultChildren(state) };
+    const childrenUnset = untrack(() => props.children) === undefined;
+    // Options hoisted: no function in the `rp` initializer (spread sites capture `rp.class` / `rp.style`, not the
+    // children accessor: per-key live views).
+    const rpOptions = {
+        values,
+        defaultClassName: isRange ? "rv-RangeCalendar" : "rv-Calendar",
+        defaultChildren: childrenUnset ? preset.content : undefined,
+    };
+    const rp = renderPropsOf(props, rpOptions);
+    // Live props (P5): a live `isDisabled` is an accessor in the spread bag `dom` (default element and
+    // `render` attrs); a static one is the plain value.
+    const isDisabled = calendarFlagAttr(state, 0);
+    const dom = globalDOMProps(props, ROOT_OWNED);
+    // Only in the spread bag (a plain JSX attribute after a spread takes the key out of it).
+    dom["data-disabled"] = isDisabled;
+    const userFocusOut = props.onFocusOut;
+    const commitBehavior = isRange ? (props.commitBehavior ?? "select") : undefined;
+    const slot = props.slot || undefined;
+    const { calendarProps: rootProps, prevButtonProps, nextButtonProps, errorMessageProps, title } = aria;
+    const ariaLabel = rootProps["aria-label"];
+    const firstDayOfWeek = props.firstDayOfWeek;
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ...rootProps,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "data-rv-calendar": state.id,
+            "data-commit-behavior": commitBehavior,
+            "data-invalid": () => (isValueInvalid(state) ? "true" : undefined),
+            onFocusOut: (event) => {
+                rangeCalendarFocusOut(event, state);
+                userFocusOut?.(event);
+            },
+            children: () => (<Provider values={[
+                    [
+                        ButtonContext,
+                        {
+                            slots: {
+                                previous: {
+                                    "aria-label": prevButtonProps["aria-label"](),
+                                    isDisabled: prevButtonProps.isDisabled,
+                                    onPress: (event) => calendarPreviousPress(event, state),
+                                },
+                                next: {
+                                    "aria-label": nextButtonProps["aria-label"](),
+                                    isDisabled: nextButtonProps.isDisabled,
+                                    onPress: (event) => calendarNextPress(event, state),
+                                },
+                            },
+                        },
+                    ],
+                    [HeadingContext, { "aria-hidden": "true", level: 2, children: title }],
+                    isRange ? [RangeCalendarStateContext, state] : [CalendarStateContext, state],
+                    isRange ? [RangeCalendarContext, { firstDayOfWeek }] : [CalendarContext, { firstDayOfWeek }],
+                    [TextContext, { slots: { errorMessage: errorMessageProps } }],
+                ]}>
+          <div style={visuallyHidden}>
+            <h2>{ariaLabel()}</h2>
+          </div>
+          {rp.children()}
+          {isRange ? (<>
+              <span id={promptId(state, "start")} hidden>
+                {message(state, "startRangeSelectionPrompt")}
+              </span>
+              <span id={promptId(state, "finish")} hidden>
+                {message(state, "finishRangeSelectionPrompt")}
+              </span>
+            </>) : null}
+          <div style={visuallyHidden}>
+            <button type="button" aria-label={nextButtonProps["aria-label"]()} disabled={nextButtonProps.isDisabled()} onClick={() => calendarNextPress(null, state)} tabIndex={-1}></button>
+          </div>
+        </Provider>),
+        };
+        return props.render(attrs, values);
+    }
+    return (<div {...dom} {...rootProps} ref={ref} class={rp.class()} style={rp.style()} slot={slot} data-rv-calendar={state.id} data-commit-behavior={commitBehavior} data-invalid={isValueInvalid(state) ? "true" : undefined} onFocusOut={(event) => {
+            rangeCalendarFocusOut(event, state);
+            userFocusOut?.(event);
+        }}>
+      <Provider values={[
+            [
+                ButtonContext,
+                {
+                    slots: {
+                        previous: {
+                            "aria-label": prevButtonProps["aria-label"](),
+                            isDisabled: prevButtonProps.isDisabled,
+                            onPress: (event) => calendarPreviousPress(event, state),
+                        },
+                        next: {
+                            "aria-label": nextButtonProps["aria-label"](),
+                            isDisabled: nextButtonProps.isDisabled,
+                            onPress: (event) => calendarNextPress(event, state),
+                        },
+                    },
+                },
+            ],
+            [HeadingContext, { "aria-hidden": "true", level: 2, children: title }],
+            isRange ? [RangeCalendarStateContext, state] : [CalendarStateContext, state],
+            isRange ? [RangeCalendarContext, { firstDayOfWeek }] : [CalendarContext, { firstDayOfWeek }],
+            [TextContext, { slots: { errorMessage: errorMessageProps } }],
+        ]}>
+        {/* A screen reader only description of the entire visible range rather than a separate heading above each grid. */}
+        <div style={visuallyHidden}>
+          <h2>{ariaLabel()}</h2>
+        </div>
+        {rp.children()}
+        {isRange ? (<>
+            <span id={promptId(state, "start")} hidden>
+              {message(state, "startRangeSelectionPrompt")}
+            </span>
+            <span id={promptId(state, "finish")} hidden>
+              {message(state, "finishRangeSelectionPrompt")}
+            </span>
+          </>) : null}
+        {/* For touch screen readers, a visually hidden next button after the month grid so it's easy to navigate after reaching the end without going all the way to the top. */}
+        <div style={visuallyHidden}>
+          <button type="button" aria-label={nextButtonProps["aria-label"]()} disabled={nextButtonProps.isDisabled()} onClick={() => calendarNextPress(null, state)} tabIndex={-1}></button>
+        </div>
+      </Provider>
+    </div>);
+}
+/**
+ * Rivet: a picker provides `defaultValue` / `defaultFocusedValue` / `isInvalid` as accessors through
+ * CalendarContext (read when the popover creates the calendar, ACCESSOR RULE); resolve them once.
+ */
+function resolveAccessors(props, liveInvalid) {
+    // Live props: a controlled `value={date()}` stays live (string-form accessor; read, never written); so does a live
+    // `isInvalid={x()}` (an accessor from `liveOptions`).
+    const out = { ...liveDateProps(props) };
+    for (const key of liveInvalid ? ["defaultValue", "defaultFocusedValue"] : ["defaultValue", "defaultFocusedValue", "isInvalid"]) {
+        const value = out[key];
+        // These options are never signals, so any function is an accessor.
+        if (typeof value === "function")
+            out[key] = untrack(value);
+    }
+    return out;
+}
+/** Shared state setup: `autoFocus` focuses the focused cell once mounted (RAC useCalendarCell `autoFocus`). */
+function autoFocusCell(props, state) {
+    if (props.autoFocus)
+        clientEffect(() => focusCell(state, document.querySelector(`[data-rv-calendar="${state.id}"]`)), { when: "load" });
+}
+/** A calendar displays one or more date grids and allows users to select a single date. */
+export function Calendar(inProps) {
+    // Live props (P5): `isDisabled` / `isReadOnly` / `isInvalid` and a controlled `value` stay live (accessors into the
+    // state); the rest of the body is read once (untracked: a prop change never re-creates the calendar).
+    return untrack(() => calendarPart(inProps));
+}
+/** Calendar flags that stay live (accessors the state reads at use). */
+const CALENDAR_LIVE = ["isDisabled", "isReadOnly", "isInvalid"];
+function calendarPart(inProps) {
+    const [ctxProps, ref] = contextProps(inProps, inProps.ref, CalendarContext);
+    const props = hasLive(ctxProps) ? liveOptions(ctxProps, CALENDAR_LIVE) : ctxProps;
+    const state = createCalendarState(resolveAccessors(props, isLive(ctxProps, "isInvalid")));
+    autoFocusCell(props, state);
+    return calendarRoot(props, ref, state);
+}
+/** A range calendar displays one or more date grids and allows users to select a contiguous range of dates. */
+export function RangeCalendar(inProps) {
+    // Live props (P5): as Calendar.
+    return untrack(() => rangeCalendarPart(inProps));
+}
+function rangeCalendarPart(inProps) {
+    const [ctxProps, ref] = contextProps(inProps, inProps.ref, RangeCalendarContext);
+    const props = hasLive(ctxProps) ? liveOptions(ctxProps, CALENDAR_LIVE) : ctxProps;
+    const state = createRangeCalendarState(resolveAccessors(props, isLive(ctxProps, "isInvalid")));
+    autoFocusCell(props, state);
+    return calendarRoot(props, ref, state);
+}
+/** The calendar state of the enclosing Calendar / RangeCalendar. */
+const calendarStateOf = () => (useContext(CalendarStateContext) ?? useContext(RangeCalendarStateContext));
+const InternalCalendarGridContext = resumableContext(createContext(null, { id: "rv-calendar-grid" }));
+/** A render function (not lazy JSX children, which are functions too). */
+const isRenderFunction = (children) => typeof children === "function" && !isSlot(children);
+/** A calendar grid displays a single grid of days within a calendar or range calendar (a month by default). */
+export function CalendarGrid(props) {
+    const state = calendarStateOf();
+    const offset = props.offset;
+    // The first date: re-renders the body only when it moves (an outside `focusedValue` write included).
+    const startDate = computed(() => (offset ? cellKey(visibleRange(state).start.add(offset)) : visibleStartKey(state)));
+    const grid = calendarGridProps({ startDate, weekdayStyle: props.weekdayStyle }, state);
+    const dom = globalDOMProps(props, GRID_OWNED);
+    // Locals: a resumable closure reading `props.x` would capture the whole props object.
+    const { onKeyDown: userKeyDown, onFocusIn: userFocusIn, onFocusOut: userFocusOut, onMouseDown: userMouseDown, onPointerDown: userPointerDown, onPointerUp: userPointerUp, onPointerOver: userPointerOver, onPointerOut: userPointerOut, onClick: userClick, onContextMenu: userContextMenu, } = props;
+    const children = props.children;
+    const className = props.class ?? "rv-CalendarGrid";
+    const style = props.style;
+    const ref = props.ref;
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ...grid.gridProps,
+            ref: ref,
+            style,
+            class: className,
+            "data-rk": GRID_KEYS,
+            onKeyDown: (event) => {
+                calendarGridKeyDown(event, state);
+                userKeyDown?.(event);
+            },
+            onFocusIn: (event) => {
+                calendarGridFocusIn(event, state);
+                userFocusIn?.(event);
+            },
+            onFocusOut: (event) => {
+                calendarGridFocusOut(event, state);
+                userFocusOut?.(event);
+            },
+            onMouseDown: (event) => {
+                calendarGridMouseDown(event);
+                userMouseDown?.(event);
+            },
+            onPointerDown: (event) => {
+                calendarGridPointerDown(event, state);
+                userPointerDown?.(event);
+            },
+            onPointerUp: (event) => {
+                calendarGridPointerUp(event);
+                userPointerUp?.(event);
+            },
+            onPointerOver: (event) => {
+                calendarGridPointerOver(event, state);
+                userPointerOver?.(event);
+            },
+            onPointerOut: (event) => {
+                calendarGridPointerOut(event, state);
+                userPointerOut?.(event);
+            },
+            onClick: (event) => {
+                calendarGridClick(event, state);
+                userClick?.(event);
+            },
+            onContextMenu: (event) => {
+                calendarGridContextMenu(event);
+                userContextMenu?.(event);
+            },
+            children: () => isRenderFunction(children) ? (<>
+            <CalendarGridHeader>{(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>
+            <CalendarGridBody>{children}</CalendarGridBody>
+          </>) : (children),
+        };
+        return (<Provider values={[[InternalCalendarGridContext, { headerProps: grid.headerProps, weekDays: grid.weekDays, startDate, weeksInMonth: grid.weeksInMonth }]]}>
+        {props.render(attrs, {})}
+      </Provider>);
+    }
+    return (<Provider values={[[InternalCalendarGridContext, { headerProps: grid.headerProps, weekDays: grid.weekDays, startDate, weeksInMonth: grid.weeksInMonth }]]}>
+      <table {...dom} {...grid.gridProps} ref={ref} style={style} class={className} data-rk={GRID_KEYS} onKeyDown={(event) => {
+            calendarGridKeyDown(event, state);
+            userKeyDown?.(event);
+        }} onFocusIn={(event) => {
+            calendarGridFocusIn(event, state);
+            userFocusIn?.(event);
+        }} onFocusOut={(event) => {
+            calendarGridFocusOut(event, state);
+            userFocusOut?.(event);
+        }} onMouseDown={(event) => {
+            calendarGridMouseDown(event);
+            userMouseDown?.(event);
+        }} onPointerDown={(event) => {
+            calendarGridPointerDown(event, state);
+            userPointerDown?.(event);
+        }} onPointerUp={(event) => {
+            calendarGridPointerUp(event);
+            userPointerUp?.(event);
+        }} onPointerOver={(event) => {
+            calendarGridPointerOver(event, state);
+            userPointerOver?.(event);
+        }} onPointerOut={(event) => {
+            calendarGridPointerOut(event, state);
+            userPointerOut?.(event);
+        }} onClick={(event) => {
+            calendarGridClick(event, state);
+            userClick?.(event);
+        }} onContextMenu={(event) => {
+            calendarGridContextMenu(event);
+            userContextMenu?.(event);
+        }}>
+        {isRenderFunction(children) ? (<>
+            <CalendarGridHeader>{(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>
+            <CalendarGridBody>{children}</CalendarGridBody>
+          </>) : (children)}
+      </table>
+    </Provider>);
+}
+/** A calendar grid header displays a row of week day names at the top of a month. */
+export function CalendarGridHeader(props) {
+    const { headerProps, weekDays } = useContext(InternalCalendarGridContext);
+    const dom = globalDOMProps(props, ["style", "render"]);
+    const render = props.children;
+    const { ref, style } = props;
+    const className = props.class ?? "rv-CalendarGridHeader";
+    if (props.render) {
+        const attrs = { ...dom, ...headerProps, ref: ref, style, class: className, children: () => <tr>{weekDays().map((day) => render(day))}</tr> };
+        return props.render(attrs, undefined);
+    }
+    return (<thead {...dom} {...headerProps} ref={ref} style={style} class={className}>
+      <tr>{weekDays().map((day) => render(day))}</tr>
+    </thead>);
+}
+/** A calendar header cell displays a week day name at the top of a column within a calendar. */
+export function CalendarHeaderCell(props) {
+    const dom = globalDOMProps(props, ["style", "render"]);
+    const { id, ref, style, children } = props;
+    const className = props.class || "rv-CalendarHeaderCell";
+    if (props.render)
+        return props.render({ ...dom, id, ref: ref, style, class: className, children }, undefined);
+    return (<th {...dom} id={id} ref={ref} style={style} class={className}>
+      {children}
+    </th>);
+}
+/** The body rows of the grid starting at `key` (re-rendered only when it moves: reads `start` only, see `visibleStart`). */
+function gridRows(state, key, weeksInMonth, render) {
+    return untrack(() => {
+        const start = readDate(state, key);
+        return [...new Array(weeksInMonth()).keys()].map((weekIndex) => (<tr>{getDatesInWeek(state, weekIndex, start).map((date) => (date ? render(date) : <td></td>))}</tr>));
+    });
+}
+/** A calendar grid body displays a grid of calendar cells within a month. */
+export function CalendarGridBody(props) {
+    const state = calendarStateOf();
+    const { startDate, weeksInMonth } = useContext(InternalCalendarGridContext);
+    const dom = globalDOMProps(props, ["style", "render"]);
+    const render = props.children;
+    const { ref, style } = props;
+    const className = props.class ?? "rv-CalendarGridBody";
+    if (props.render) {
+        return props.render({ ...dom, ref: ref, style, class: className, children: () => gridRows(state, startDate(), weeksInMonth, render) }, undefined);
+    }
+    return (<tbody {...dom} ref={ref} style={style} class={className}>
+      {gridRows(state, startDate(), weeksInMonth, render)}
+    </tbody>);
+}
+/** A calendar cell displays a date cell within a calendar grid which can be selected by the user. */
+export function CalendarCell(props) {
+    const state = calendarStateOf();
+    const grid = useContext(InternalCalendarGridContext);
+    const date = props.date;
+    const cellRef = props.ref;
+    const key = cellKey(date);
+    // The cell is re-created when its grid's first date moves: the month is read once.
+    const monthStart = untrack(() => readDate(state, grid ? grid.startDate() : visibleStartKey(state)));
+    const isOutsideMonth = isOutsideMonthOf(state, date, monthStart);
+    const cell = calendarCellProps({ date: key, isOutsideMonth }, state);
+    const formattedDate = untrack(cell.formattedDate);
+    const values = {
+        date: () => readDate(state, key),
+        formattedDate,
+        isHovered: cell.isHovered,
+        isPressed: cell.isPressed,
+        isSelected: cell.isSelected,
+        isSelectionStart: cell.isSelectionStart,
+        isSelectionEnd: cell.isSelectionEnd,
+        isFocused: cell.isFocused,
+        isFocusVisible: cell.isFocusVisible,
+        isDisabled: cell.isDisabled,
+        isOutsideVisibleRange: cell.isOutsideVisibleRange,
+        isOutsideMonth: () => isOutsideMonth,
+        isUnavailable: cell.isUnavailable,
+        isInvalid: cell.isInvalid,
+        isToday: cell.isToday,
+    };
+    // Live props (P5): class / style / children through a live view when one is live (`renderPropsOf`). On a resumed page
+    // the view's forwards narrow to those keys when the cell's props do not serialize (its `date`, a CalendarDate).
+    const rp = renderPropsOf(props, { values, defaultChildren: formattedDate, defaultClassName: "rv-CalendarCell" });
+    const dom = globalDOMProps(props, ["style", "render"]);
+    // `tabindex` keyed as rendered: on a resumed page the spread binding diffs the server's attribute
+    // names against the object's keys, so a `tabIndex` key drops `tabindex` for a moment on activation —
+    // Chrome then blurs the focused cell (a range calendar commits on that blur).
+    const { tabIndex: tabindex, ...buttonAttrs } = cell.buttonProps;
+    const button = { ...buttonAttrs, tabindex };
+    const { cellProps } = cell;
+    if (props.render) {
+        const attrs = { ...dom, ...button, class: () => rp.class(), style: () => rp.style(), children: () => rp.children() };
+        return (<td {...cellProps} ref={cellRef}>
+        {props.render(attrs, values)}
+      </td>);
+    }
+    return (<td {...cellProps} ref={cellRef}>
+      <div {...dom} {...button} class={rp.class()} style={rp.style()}>
+        {rp.children()}
+      </div>
+    </td>);
+}
+/** The heading of a calendar month (RAC CalendarHeading: the visible month at `offset`). */
+export function CalendarHeading(props) {
+    const { offset, format, class: className = "rv-CalendarHeading", ...headingProps } = props;
+    const state = calendarStateOf();
+    const options = { offset, format };
+    return <Heading {...headingProps} class={className} children={() => calendarHeadingProps(options, state)}/>;
+}
+/** Provides the months of the focused year to a picker (e.g. a Select). */
+export function CalendarMonthPicker(props) {
+    const { children, ...options } = props;
+    return children(calendarMonthPickerProps(options, calendarStateOf()));
+}
+/** Provides the years around the focused date to a picker (e.g. a Select). */
+export function CalendarYearPicker(props) {
+    const { children, ...options } = props;
+    return children(calendarYearPickerProps(options, calendarStateOf()));
+}

package/calendar/intl.d.ts

@@ -0,0 +1,3 @@
+import type { LocalizedStrings } from "@rivetjs/cdk/i18n";
+export type CalendarMessageKey = "previous" | "next" | "selectedDateDescription" | "selectedRangeDescription" | "todayDate" | "todayDateSelected" | "dateSelected" | "startRangeSelectionPrompt" | "finishRangeSelectionPrompt" | "minimumDate" | "maximumDate" | "dateRange";
+export declare const calendarMessages: LocalizedStrings<CalendarMessageKey>;

package/calendar/intl.js

@@ -0,0 +1,36 @@
+export const calendarMessages = {
+    "ar-AE": { "dateRange": "{startDate} إلى {endDate}", "dateSelected": "{date} المحدد", "finishRangeSelectionPrompt": "انقر لإنهاء عملية تحديد نطاق التاريخ", "maximumDate": "آخر تاريخ متاح", "minimumDate": "أول تاريخ متاح", "next": "التالي", "previous": "السابق", "selectedDateDescription": "تاريخ محدد: {date}", "selectedRangeDescription": "المدى الزمني المحدد: {dateRange}", "startRangeSelectionPrompt": "انقر لبدء عملية تحديد نطاق التاريخ", "todayDate": "اليوم، {date}", "todayDateSelected": "اليوم، {date} محدد" },
+    "bg-BG": { "dateRange": "{startDate} до {endDate}", "dateSelected": "Избрано е {date}", "finishRangeSelectionPrompt": "Натиснете, за да довършите избора на времеви интервал", "maximumDate": "Последна налична дата", "minimumDate": "Първа налична дата", "next": "Напред", "previous": "Назад", "selectedDateDescription": "Избрана дата: {date}", "selectedRangeDescription": "Избран диапазон: {dateRange}", "startRangeSelectionPrompt": "Натиснете, за да пристъпите към избора на времеви интервал", "todayDate": "Днес, {date}", "todayDateSelected": "Днес, {date} са избрани" },
+    "cs-CZ": { "dateRange": "{startDate} až {endDate}", "dateSelected": "Vybráno {date}", "finishRangeSelectionPrompt": "Kliknutím dokončíte výběr rozsahu dat", "maximumDate": "Poslední dostupné datum", "minimumDate": "První dostupné datum", "next": "Další", "previous": "Předchozí", "selectedDateDescription": "Vybrané datum: {date}", "selectedRangeDescription": "Vybrané období: {dateRange}", "startRangeSelectionPrompt": "Kliknutím zahájíte výběr rozsahu dat", "todayDate": "Dnes, {date}", "todayDateSelected": "Dnes, vybráno {date}" },
+    "da-DK": { "dateRange": "{startDate} til {endDate}", "dateSelected": "{date} valgt", "finishRangeSelectionPrompt": "Klik for at fuldføre valg af datoområde", "maximumDate": "Sidste ledige dato", "minimumDate": "Første ledige dato", "next": "Næste", "previous": "Forrige", "selectedDateDescription": "Valgt dato: {date}", "selectedRangeDescription": "Valgt interval: {dateRange}", "startRangeSelectionPrompt": "Klik for at starte valg af datoområde", "todayDate": "I dag, {date}", "todayDateSelected": "I dag, {date} valgt" },
+    "de-DE": { "dateRange": "{startDate} bis {endDate}", "dateSelected": "{date} ausgewählt", "finishRangeSelectionPrompt": "Klicken, um die Auswahl des Datumsbereichs zu beenden", "maximumDate": "Letztes verfügbares Datum", "minimumDate": "Erstes verfügbares Datum", "next": "Weiter", "previous": "Zurück", "selectedDateDescription": "Ausgewähltes Datum: {date}", "selectedRangeDescription": "Ausgewählter Bereich: {dateRange}", "startRangeSelectionPrompt": "Klicken, um die Auswahl des Datumsbereichs zu beginnen", "todayDate": "Heute, {date}", "todayDateSelected": "Heute, {date} ausgewählt" },
+    "el-GR": { "dateRange": "{startDate} έως {endDate}", "dateSelected": "Επιλέχθηκε {date}", "finishRangeSelectionPrompt": "Κάντε κλικ για να ολοκληρώσετε την επιλογή εύρους ημερομηνιών", "maximumDate": "Τελευταία διαθέσιμη ημερομηνία", "minimumDate": "Πρώτη διαθέσιμη ημερομηνία", "next": "Επόμενο", "previous": "Προηγούμενο", "selectedDateDescription": "Επιλεγμένη ημερομηνία: {date}", "selectedRangeDescription": "Επιλεγμένο εύρος: {dateRange}", "startRangeSelectionPrompt": "Κάντε κλικ για να ξεκινήσετε την επιλογή εύρους ημερομηνιών", "todayDate": "Σήμερα, {date}", "todayDateSelected": "Σήμερα, επιλέχτηκε {date}" },
+    "en-US": { "previous": "Previous", "next": "Next", "selectedDateDescription": "Selected Date: {date}", "selectedRangeDescription": "Selected Range: {dateRange}", "todayDate": "Today, {date}", "todayDateSelected": "Today, {date} selected", "dateSelected": "{date} selected", "startRangeSelectionPrompt": "Click to start selecting date range", "finishRangeSelectionPrompt": "Click to finish selecting date range", "minimumDate": "First available date", "maximumDate": "Last available date", "dateRange": "{startDate} to {endDate}" },
+    "es-ES": { "dateRange": "{startDate} a {endDate}", "dateSelected": "{date} seleccionado", "finishRangeSelectionPrompt": "Haga clic para terminar de seleccionar rango de fechas", "maximumDate": "Última fecha disponible", "minimumDate": "Primera fecha disponible", "next": "Siguiente", "previous": "Anterior", "selectedDateDescription": "Fecha seleccionada: {date}", "selectedRangeDescription": "Intervalo seleccionado: {dateRange}", "startRangeSelectionPrompt": "Haga clic para comenzar a seleccionar un rango de fechas", "todayDate": "Hoy, {date}", "todayDateSelected": "Hoy, {date} seleccionado" },
+    "et-EE": { "dateRange": "{startDate} kuni {endDate}", "dateSelected": "{date} valitud", "finishRangeSelectionPrompt": "Klõpsake kuupäevavahemiku valimise lõpetamiseks", "maximumDate": "Viimane saadaolev kuupäev", "minimumDate": "Esimene saadaolev kuupäev", "next": "Järgmine", "previous": "Eelmine", "selectedDateDescription": "Valitud kuupäev: {date}", "selectedRangeDescription": "Valitud vahemik: {dateRange}", "startRangeSelectionPrompt": "Klõpsake kuupäevavahemiku valimiseks", "todayDate": "Täna, {date}", "todayDateSelected": "Täna, {date} valitud" },
+    "fi-FI": { "dateRange": "{startDate} – {endDate}", "dateSelected": "{date} valittu", "finishRangeSelectionPrompt": "Lopeta päivämääräalueen valinta napsauttamalla tätä.", "maximumDate": "Viimeinen varattavissa oleva päivämäärä", "minimumDate": "Ensimmäinen varattavissa oleva päivämäärä", "next": "Seuraava", "previous": "Edellinen", "selectedDateDescription": "Valittu päivämäärä: {date}", "selectedRangeDescription": "Valittu aikaväli: {dateRange}", "startRangeSelectionPrompt": "Aloita päivämääräalueen valinta napsauttamalla tätä.", "todayDate": "Tänään, {date}", "todayDateSelected": "Tänään, {date} valittu" },
+    "fr-FR": { "dateRange": "{startDate} à {endDate}", "dateSelected": "{date} sélectionné", "finishRangeSelectionPrompt": "Cliquer pour finir de sélectionner la plage de dates", "maximumDate": "Dernière date disponible", "minimumDate": "Première date disponible", "next": "Suivant", "previous": "Précédent", "selectedDateDescription": "Date sélectionnée : {date}", "selectedRangeDescription": "Plage sélectionnée : {dateRange}", "startRangeSelectionPrompt": "Cliquer pour commencer à sélectionner la plage de dates", "todayDate": "Aujourd'hui, {date}", "todayDateSelected": "Aujourd’hui, {date} sélectionné" },
+    "he-IL": { "dateRange": "{startDate} עד {endDate}", "dateSelected": "{date} נבחר", "finishRangeSelectionPrompt": "חץ כדי לסיים את בחירת טווח התאריכים", "maximumDate": "תאריך פנוי אחרון", "minimumDate": "תאריך פנוי ראשון", "next": "הבא", "previous": "הקודם", "selectedDateDescription": "תאריך נבחר: {date}", "selectedRangeDescription": "טווח נבחר: {dateRange}", "startRangeSelectionPrompt": "לחץ כדי להתחיל בבחירת טווח התאריכים", "todayDate": "היום, {date}", "todayDateSelected": "היום, {date} נבחר" },
+    "hr-HR": { "dateRange": "{startDate} do {endDate}", "dateSelected": "{date} odabran", "finishRangeSelectionPrompt": "Kliknite da dovršite raspon odabranih datuma", "maximumDate": "Posljednji raspoloživi datum", "minimumDate": "Prvi raspoloživi datum", "next": "Sljedeći", "previous": "Prethodni", "selectedDateDescription": "Odabrani datum: {date}", "selectedRangeDescription": "Odabrani raspon: {dateRange}", "startRangeSelectionPrompt": "Kliknite da započnete raspon odabranih datuma", "todayDate": "Danas, {date}", "todayDateSelected": "Danas, odabran {date}" },
+    "hu-HU": { "dateRange": "{startDate}–{endDate}", "dateSelected": "{date} kiválasztva", "finishRangeSelectionPrompt": "Kattintson a dátumtartomány kijelölésének befejezéséhez", "maximumDate": "Utolsó elérhető dátum", "minimumDate": "Az első elérhető dátum", "next": "Következő", "previous": "Előző", "selectedDateDescription": "Kijelölt dátum: {date}", "selectedRangeDescription": "Kijelölt tartomány: {dateRange}", "startRangeSelectionPrompt": "Kattintson a dátumtartomány kijelölésének indításához", "todayDate": "Ma, {date}", "todayDateSelected": "Ma, {date} kijelölve" },
+    "it-IT": { "dateRange": "Da {startDate} a {endDate}", "dateSelected": "{date} selezionata", "finishRangeSelectionPrompt": "Fai clic per completare la selezione dell’intervallo di date", "maximumDate": "Ultima data disponibile", "minimumDate": "Prima data disponibile", "next": "Successivo", "previous": "Precedente", "selectedDateDescription": "Data selezionata: {date}", "selectedRangeDescription": "Intervallo selezionato: {dateRange}", "startRangeSelectionPrompt": "Fai clic per selezionare l’intervallo di date", "todayDate": "Oggi, {date}", "todayDateSelected": "Oggi, {date} selezionata" },
+    "ja-JP": { "dateRange": "{startDate} から {endDate}", "dateSelected": "{date} を選択", "finishRangeSelectionPrompt": "クリックして日付範囲の選択を終了", "maximumDate": "最終利用可能日", "minimumDate": "最初の利用可能日", "next": "次へ", "previous": "前へ", "selectedDateDescription": "選択した日付 : {date}", "selectedRangeDescription": "選択範囲 : {dateRange}", "startRangeSelectionPrompt": "クリックして日付範囲の選択を開始", "todayDate": "本日、{date}", "todayDateSelected": "本日、{date} を選択" },
+    "ko-KR": { "dateRange": "{startDate} ~ {endDate}", "dateSelected": "{date} 선택됨", "finishRangeSelectionPrompt": "날짜 범위 선택을 완료하려면 클릭하십시오.", "maximumDate": "마지막으로 사용 가능한 일자", "minimumDate": "처음으로 사용 가능한 일자", "next": "다음", "previous": "이전", "selectedDateDescription": "선택 일자: {date}", "selectedRangeDescription": "선택 범위: {dateRange}", "startRangeSelectionPrompt": "날짜 범위 선택을 시작하려면 클릭하십시오.", "todayDate": "오늘, {date}", "todayDateSelected": "오늘, {date} 선택됨" },
+    "lt-LT": { "dateRange": "Nuo {startDate} iki {endDate}", "dateSelected": "Pasirinkta {date}", "finishRangeSelectionPrompt": "Spustelėkite, kad baigtumėte pasirinkti datų intervalą", "maximumDate": "Paskutinė galima data", "minimumDate": "Pirmoji galima data", "next": "Paskesnis", "previous": "Ankstesnis", "selectedDateDescription": "Pasirinkta data: {date}", "selectedRangeDescription": "Pasirinktas intervalas: {dateRange}", "startRangeSelectionPrompt": "Spustelėkite, kad pradėtumėte pasirinkti datų intervalą", "todayDate": "Šiandien, {date}", "todayDateSelected": "Šiandien, pasirinkta {date}" },
+    "lv-LV": { "dateRange": "No {startDate} līdz {endDate}", "dateSelected": "Atlasīts: {date}", "finishRangeSelectionPrompt": "Noklikšķiniet, lai pabeigtu datumu diapazona atlasi", "maximumDate": "Pēdējais pieejamais datums", "minimumDate": "Pirmais pieejamais datums", "next": "Tālāk", "previous": "Atpakaļ", "selectedDateDescription": "Atlasītais datums: {date}", "selectedRangeDescription": "Atlasītais diapazons: {dateRange}", "startRangeSelectionPrompt": "Noklikšķiniet, lai sāktu datumu diapazona atlasi", "todayDate": "Šodien, {date}", "todayDateSelected": "Atlasīta šodiena, {date}" },
+    "nb-NO": { "dateRange": "{startDate} til {endDate}", "dateSelected": "{date} valgt", "finishRangeSelectionPrompt": "Klikk for å fullføre valg av datoområde", "maximumDate": "Siste tilgjengelige dato", "minimumDate": "Første tilgjengelige dato", "next": "Neste", "previous": "Forrige", "selectedDateDescription": "Valgt dato: {date}", "selectedRangeDescription": "Valgt område: {dateRange}", "startRangeSelectionPrompt": "Klikk for å starte valg av datoområde", "todayDate": "I dag, {date}", "todayDateSelected": "I dag, {date} valgt" },
+    "nl-NL": { "dateRange": "{startDate} tot {endDate}", "dateSelected": "{date} geselecteerd", "finishRangeSelectionPrompt": "Klik om de selectie van het datumbereik te voltooien", "maximumDate": "Laatste beschikbare datum", "minimumDate": "Eerste beschikbare datum", "next": "Volgende", "previous": "Vorige", "selectedDateDescription": "Geselecteerde datum: {date}", "selectedRangeDescription": "Geselecteerd bereik: {dateRange}", "startRangeSelectionPrompt": "Klik om het datumbereik te selecteren", "todayDate": "Vandaag, {date}", "todayDateSelected": "Vandaag, {date} geselecteerd" },
+    "pl-PL": { "dateRange": "{startDate} do {endDate}", "dateSelected": "Wybrano {date}", "finishRangeSelectionPrompt": "Kliknij, aby zakończyć wybór zakresu dat", "maximumDate": "Ostatnia dostępna data", "minimumDate": "Pierwsza dostępna data", "next": "Dalej", "previous": "Wstecz", "selectedDateDescription": "Wybrana data: {date}", "selectedRangeDescription": "Wybrany zakres: {dateRange}", "startRangeSelectionPrompt": "Kliknij, aby rozpocząć wybór zakresu dat", "todayDate": "Dzisiaj, {date}", "todayDateSelected": "Dzisiaj wybrano {date}" },
+    "pt-BR": { "dateRange": "{startDate} a {endDate}", "dateSelected": "{date} selecionado", "finishRangeSelectionPrompt": "Clique para concluir a seleção do intervalo de datas", "maximumDate": "Última data disponível", "minimumDate": "Primeira data disponível", "next": "Próximo", "previous": "Anterior", "selectedDateDescription": "Data selecionada: {date}", "selectedRangeDescription": "Intervalo selecionado: {dateRange}", "startRangeSelectionPrompt": "Clique para iniciar a seleção do intervalo de datas", "todayDate": "Hoje, {date}", "todayDateSelected": "Hoje, {date} selecionado" },
+    "pt-PT": { "dateRange": "{startDate} a {endDate}", "dateSelected": "{date} selecionado", "finishRangeSelectionPrompt": "Clique para terminar de selecionar o intervalo de datas", "maximumDate": "Última data disponível", "minimumDate": "Primeira data disponível", "next": "Próximo", "previous": "Anterior", "selectedDateDescription": "Data selecionada: {date}", "selectedRangeDescription": "Intervalo selecionado: {dateRange}", "startRangeSelectionPrompt": "Clique para começar a selecionar o intervalo de datas", "todayDate": "Hoje, {date}", "todayDateSelected": "Hoje, {date} selecionado" },
+    "ro-RO": { "dateRange": "De la {startDate} până la {endDate}", "dateSelected": "{date} selectată", "finishRangeSelectionPrompt": "Apăsaţi pentru a finaliza selecţia razei pentru dată", "maximumDate": "Ultima dată disponibilă", "minimumDate": "Prima dată disponibilă", "next": "Următorul", "previous": "Înainte", "selectedDateDescription": "Dată selectată: {date}", "selectedRangeDescription": "Interval selectat: {dateRange}", "startRangeSelectionPrompt": "Apăsaţi pentru a începe selecţia razei pentru dată", "todayDate": "Astăzi, {date}", "todayDateSelected": "Azi, {date} selectată" },
+    "ru-RU": { "dateRange": "С {startDate} по {endDate}", "dateSelected": "Выбрано {date}", "finishRangeSelectionPrompt": "Щелкните, чтобы завершить выбор диапазона дат", "maximumDate": "Последняя доступная дата", "minimumDate": "Первая доступная дата", "next": "Далее", "previous": "Назад", "selectedDateDescription": "Выбранная дата: {date}", "selectedRangeDescription": "Выбранный диапазон: {dateRange}", "startRangeSelectionPrompt": "Щелкните, чтобы начать выбор диапазона дат", "todayDate": "Сегодня, {date}", "todayDateSelected": "Сегодня, выбрано {date}" },
+    "sk-SK": { "dateRange": "Od {startDate} do {endDate}", "dateSelected": "Vybratý dátum {date}", "finishRangeSelectionPrompt": "Kliknutím dokončíte výber rozsahu dátumov", "maximumDate": "Posledný dostupný dátum", "minimumDate": "Prvý dostupný dátum", "next": "Nasledujúce", "previous": "Predchádzajúce", "selectedDateDescription": "Vybratý dátum: {date}", "selectedRangeDescription": "Vybratý rozsah: {dateRange}", "startRangeSelectionPrompt": "Kliknutím spustíte výber rozsahu dátumov", "todayDate": "Dnes {date}", "todayDateSelected": "Vybratý dnešný dátum {date}" },
+    "sl-SI": { "dateRange": "{startDate} do {endDate}", "dateSelected": "{date} izbrano", "finishRangeSelectionPrompt": "Kliknite za dokončanje izbire datumskega obsega", "maximumDate": "Zadnji razpoložljivi datum", "minimumDate": "Prvi razpoložljivi datum", "next": "Naprej", "previous": "Nazaj", "selectedDateDescription": "Izbrani datum: {date}", "selectedRangeDescription": "Izbrano območje: {dateRange}", "startRangeSelectionPrompt": "Kliknite za začetek izbire datumskega obsega", "todayDate": "Danes, {date}", "todayDateSelected": "Danes, {date} izbrano" },
+    "sr-SP": { "dateRange": "{startDate} do {endDate}", "dateSelected": "{date} izabran", "finishRangeSelectionPrompt": "Kliknite da dovršite opseg izabranih datuma", "maximumDate": "Zadnji raspoloživi datum", "minimumDate": "Prvi raspoloživi datum", "next": "Sledeći", "previous": "Prethodni", "selectedDateDescription": "Izabrani datum: {date}", "selectedRangeDescription": "Izabrani period: {dateRange}", "startRangeSelectionPrompt": "Kliknite da započnete opseg izabranih datuma", "todayDate": "Danas, {date}", "todayDateSelected": "Danas, izabran {date}" },
+    "sv-SE": { "dateRange": "{startDate} till {endDate}", "dateSelected": "{date} har valts", "finishRangeSelectionPrompt": "Klicka för att avsluta val av datumintervall", "maximumDate": "Sista tillgängliga datum", "minimumDate": "Första tillgängliga datum", "next": "Nästa", "previous": "Föregående", "selectedDateDescription": "Valt datum: {date}", "selectedRangeDescription": "Valt intervall: {dateRange}", "startRangeSelectionPrompt": "Klicka för att välja datumintervall", "todayDate": "Idag, {date}", "todayDateSelected": "Idag, {date} har valts" },
+    "tr-TR": { "dateRange": "{startDate} - {endDate}", "dateSelected": "{date} seçildi", "finishRangeSelectionPrompt": "Tarih aralığı seçimini tamamlamak için tıklayın", "maximumDate": "Son müsait tarih", "minimumDate": "İlk müsait tarih", "next": "Sonraki", "previous": "Önceki", "selectedDateDescription": "Seçilen Tarih: {date}", "selectedRangeDescription": "Seçilen Aralık: {dateRange}", "startRangeSelectionPrompt": "Tarih aralığı seçimini başlatmak için tıklayın", "todayDate": "Bugün, {date}", "todayDateSelected": "Bugün, {date} seçildi" },
+    "uk-UA": { "dateRange": "{startDate} — {endDate}", "dateSelected": "Вибрано {date}", "finishRangeSelectionPrompt": "Натисніть, щоб завершити вибір діапазону дат", "maximumDate": "Остання доступна дата", "minimumDate": "Перша доступна дата", "next": "Наступний", "previous": "Попередній", "selectedDateDescription": "Вибрана дата: {date}", "selectedRangeDescription": "Вибраний діапазон: {dateRange}", "startRangeSelectionPrompt": "Натисніть, щоб почати вибір діапазону дат", "todayDate": "Сьогодні, {date}", "todayDateSelected": "Сьогодні, вибрано {date}" },
+    "zh-CN": { "dateRange": "{startDate} 至 {endDate}", "dateSelected": "已选择 {date}", "finishRangeSelectionPrompt": "单击以完成选择日期范围", "maximumDate": "最后一个可用日期", "minimumDate": "第一个可用日期", "next": "下一页", "previous": "上一页", "selectedDateDescription": "选定的日期：{date}", "selectedRangeDescription": "选定的范围：{dateRange}", "startRangeSelectionPrompt": "单击以开始选择日期范围", "todayDate": "今天，即 {date}", "todayDateSelected": "已选择今天，即 {date}" },
+    "zh-TW": { "dateRange": "{startDate} 至 {endDate}", "dateSelected": "已選取 {date}", "finishRangeSelectionPrompt": "按一下以完成選取日期範圍", "maximumDate": "最後一個可用日期", "minimumDate": "第一個可用日期", "next": "下一頁", "previous": "上一頁", "selectedDateDescription": "選定的日期：{date}", "selectedRangeDescription": "選定的範圍：{dateRange}", "startRangeSelectionPrompt": "按一下以開始選取日期範圍", "todayDate": "今天，{date}", "todayDateSelected": "已選取今天，{date}" },
+};

package/carousel/behaviour.d.ts

@@ -0,0 +1,50 @@
+import { type EmblaCarouselType } from "./engine/EmblaCarousel.js";
+import { type CarouselState } from "./state.js";
+/** Id of the viewport element (embla root). */
+export declare const carouselViewportId: (state: CarouselState) => string;
+/** Id of slide `index`. */
+export declare const carouselSlideId: (state: CarouselState, index: number) => string;
+/** Id of the tab (dot) of snap `index`. */
+export declare const carouselTabId: (state: CarouselState, index: number) => string;
+/** The running engine of the carousel, if started. */
+export declare function carouselApi(state: CarouselState): EmblaCarouselType | undefined;
+/** Starts the engine on `viewport` (no-op when it runs). Rotation plugins join once their modules loaded. */
+export declare function startCarousel(state: CarouselState, viewport: HTMLElement): EmblaCarouselType;
+/** Destroys the engine on `viewport` (embla `destroy`: transforms cleared, listeners removed). */
+export declare function stopCarousel(viewport: HTMLElement): void;
+/** The running engine, started now when it was not (handlers on a resumed page). Undefined on the server / without a viewport. */
+export declare function ensureCarousel(state: CarouselState): EmblaCarouselType | undefined;
+/** Effect body of the Carousel's `clientEffect`: start on the viewport, destroy on cleanup. */
+export declare function carouselEffect(state: CarouselState, viewport: HTMLElement | undefined): (() => void) | undefined;
+/** embla `scrollPrev(jump)`. */
+export declare function carouselScrollPrev(state: CarouselState, jump?: boolean): void;
+/** embla `scrollNext(jump)`. */
+export declare function carouselScrollNext(state: CarouselState, jump?: boolean): void;
+/** embla `scrollTo(index, jump)`. */
+export declare function carouselScrollTo(state: CarouselState, index: number, jump?: boolean): void;
+/** Stops rotation (rotation control, keyboard focus): plugins stopped and removed until `startRotation`. */
+export declare function stopRotation(state: CarouselState): void;
+/** Starts rotation again (rotation control): rotation plugins added back and played. */
+export declare function startRotation(state: CarouselState): void;
+/** Rotation control press: stop when rotation is on (also while a hover pauses it), else start. */
+export declare function toggleRotation(state: CarouselState): void;
+/** Keys of the carousel root, `data-rk` (held while a cold handler loads). */
+export declare function carouselKeys(state: CarouselState): string;
+/** Root keydown: arrows scroll to the previous / next snap (RTL mirrored; vertical: up / down). Not in editable fields / the tab list. */
+export declare function carouselKeyDown(event: KeyboardEvent, state: CarouselState): void;
+/**
+ * Root focusin: keyboard focus stops rotation (W3C APG); starts the engine; when it starts here and the focus
+ * landed in a slide, scrolls to that slide's snap at once (embla SlideFocus, whose listener could not see this focus).
+ */
+export declare function carouselFocusIn(event: FocusEvent, state: CarouselState): void;
+/** Viewport pointerdown: starts the engine before the `mousedown` / `touchstart` embla listens to. */
+export declare function carouselPointerDown(_event: PointerEvent, state: CarouselState): void;
+/**
+ * Viewport mousedown / touchstart: when the event's dispatch is over (`eventPhase` 0 — a cold page replays it after
+ * its chunk loaded), the engine's own listener missed it: hand it over (embla `downIfAllowed`).
+ */
+export declare function carouselDragStart(event: MouseEvent | TouchEvent, state: CarouselState): void;
+/** Tab list keydown (W3C APG tabs, automatic activation): arrows / Home / End move focus between tabs and select. */
+export declare function carouselTabsKeyDown(event: KeyboardEvent, state: CarouselState): void;
+/** Keys of the tab list, `data-rk`. */
+export declare function carouselTabsKeys(state: CarouselState): string;