@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/carousel/carousel.presentation.js

@@ -0,0 +1,554 @@
+import { initial, pageCountFor, pageOf, slidesOf, slidesPerMoveOf, slidesPerPageOf } from "./carousel.state.js";
+import { carousel as carousel$1 } from "./carousel.machine.js";
+import { ariaControls, ariaCurrent, ariaHidden, ariaPressed, ariaRoleDescription, authoredProps, defineComponent, isRecord, liveRegion, resolveTwins } from "@spinjs/runtime";
+// src/carousel/carousel.presentation.ts
+/** The in-view threshold is a percentage; the observer wants a 0..1
+* fraction. Normalizing here keeps the prop's authored unit. */
+const intersectThreshold = (raw) => {
+	return Math.min(1, Math.max(0, (typeof raw === "number" && Number.isFinite(raw) ? raw : 60) / 100));
+};
+const derive = (parsed) => {
+	const slidesPerPage = slidesPerPageOf(parsed["slidesPerPage"]);
+	const perMove = slidesPerMoveOf(parsed["slidesPerMove"], slidesPerPage);
+	const autoSize = parsed["autoSize"] === true;
+	const slideCount = slidesOf(parsed["items"]).length;
+	return {
+		slidesPerPage,
+		perMove,
+		autoSize,
+		slideCount,
+		pageCount: pageCountFor(slideCount, perMove, slidesPerPage, autoSize)
+	};
+};
+const lastPageOf = (ctx) => Math.max(0, ctx.pageCount - 1);
+const movesOf = (ctx) => Math.max(1, Math.trunc(ctx.perMove));
+const viewByBridge = /* @__PURE__ */ new WeakMap();
+const viewOf = (id) => {
+	let view = viewByBridge.get(id);
+	if (view === void 0) {
+		view = {
+			appliedKey: "",
+			readout: { value: "" }
+		};
+		viewByBridge.set(id, view);
+	}
+	return view;
+};
+/** Whether the track holds a tabbable descendant: the track itself
+* leaves the tab order then. */
+const hasTabbable = (scope) => {
+	const host = scope.root();
+	if (typeof host.querySelector !== "function") return false;
+	const group = host.querySelector(`[id="${scope.id("itemGroup")}"]`);
+	if (group === null || typeof group.querySelector !== "function") return false;
+	return group.querySelector(TABBABLE) !== null;
+};
+const TABBABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled])";
+/**
+* Slides-per-page as presence attributes: a slide's width is `1/N` of the
+* track minus the gaps, and a runtime N can only be said in a class name by
+* enumerating it. Six is every real carousel; past that the element renders
+* full-width slides and says so.
+*/
+const MAX_SLIDES_PER_PAGE = 6;
+const snapOf = (arg) => {
+	if (!isRecord(arg)) return "start";
+	const snap = arg["snapAlign"];
+	return snap === "start" || snap === "end" || snap === "center" ? snap : "start";
+};
+const isIdFn = (id) => typeof id === "function";
+const fallbackId = () => "";
+const countOf = (raw) => {
+	if (typeof raw === "number") return Number.isFinite(raw) ? raw : null;
+	if (typeof raw === "string" && raw.trim().length > 0) {
+		const n = Number(raw.trim());
+		return Number.isFinite(n) ? n : null;
+	}
+	return null;
+};
+const perPageAttrs = (slidesPerPage) => {
+	const attrs = {};
+	for (let n = 2; n <= MAX_SLIDES_PER_PAGE; n += 1) if (slidesPerPage === n) attrs[`data-slides-${n}`] = "";
+	return attrs;
+};
+/**
+* In view is the current page first, the observer second. The page is what
+* the machine IS on, so its slides are in view the moment the index moves;
+* the observer still adds whatever a drag passes THROUGH.
+*/
+const slideInView = (scope, index) => {
+	const ctx = scope.context;
+	if (ctx.slidesInView.includes(index)) return true;
+	const slides = scope.context.slides;
+	const start = ctx.index * movesOf(ctx);
+	const perPage = scope.context.slidesPerPage;
+	const perMove = Math.max(1, Math.min(typeof perPage === "number" && perPage > 0 ? perPage : 1, slides.length - start || 1));
+	return index >= start && index < start + perMove;
+};
+/**
+* Position the container on a page. The target is the first slide of that
+* page, MEASURED rather than computed from a formula, so padding, gaps and
+* fractional widths are already accounted for. `behavior` is explicit
+* because the class supplies `scroll-smooth` and the very first
+* positioning must not glide into place while the observer is still
+* reporting the page the element rendered at.
+*/
+const queryChild = (root, selector) => {
+	if (root === null || typeof root.querySelector !== "function") return null;
+	return root.querySelector(selector);
+};
+const applyScroll = (id, root, horizontal, page, perMove, behavior) => {
+	const group = root().querySelector(`[id="${id("itemGroup")}"]`);
+	if (!(group instanceof HTMLElement)) return;
+	const target = queryChild(group, `[data-index="${page * perMove}"]`);
+	if (!(target instanceof HTMLElement)) return;
+	const axis = horizontal ? "left" : "top";
+	const from = group.getBoundingClientRect()[axis];
+	const to = target.getBoundingClientRect()[axis];
+	const at = axis === "left" ? group.scrollLeft : group.scrollTop;
+	group.scrollTo({
+		[axis]: to - from + at,
+		behavior
+	});
+};
+const syncView = (id, root, horizontal, index, pageCount, perMove) => {
+	const view = viewOf(id);
+	const key = `${index}:${pageCount}`;
+	if (key === view.appliedKey) return;
+	const first = view.appliedKey === "";
+	view.appliedKey = key;
+	(typeof requestAnimationFrame === "function" ? requestAnimationFrame : (fn) => {
+		fn();
+		return 0;
+	})(() => applyScroll(id, root, horizontal, index, perMove, first ? "auto" : "smooth"));
+};
+/**
+* The page the track is actually showing, measured from the DOM: the slide
+* whose start edge sits closest to the container's start edge. The view owns
+* the measurement; the machine never walks the DOM.
+*/
+const settlePage = (scope) => {
+	const ctx = scope.context;
+	const horizontal = scope.context.orientation !== "vertical";
+	const host = scope.root();
+	if (typeof host.querySelectorAll !== "function") return ctx.index;
+	const group = host.querySelector(`[id="${scope.id("itemGroup")}"]`);
+	if (!(group instanceof HTMLElement)) return ctx.index;
+	const axis = horizontal ? "left" : "top";
+	const start = group.getBoundingClientRect()[axis];
+	let best = ctx.index;
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (const slide of group.querySelectorAll("[data-index]")) {
+		if (!(slide instanceof HTMLElement)) continue;
+		const at = Number.parseInt(slide.getAttribute("data-index") ?? "", 10);
+		if (!Number.isFinite(at)) continue;
+		const distance = Math.abs(slide.getBoundingClientRect()[axis] - start);
+		if (distance < bestDistance) {
+			bestDistance = distance;
+			best = Math.min(Math.max(0, Math.floor(at / movesOf(ctx))), lastPageOf(ctx));
+		}
+	}
+	return best;
+};
+const onTrackKeydown = (scope, event) => {
+	if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return;
+	const horizontal = scope.context.orientation !== "vertical";
+	const rtl = scope.context.dir === "rtl";
+	const forward = horizontal ? event.key === (rtl ? "ArrowLeft" : "ArrowRight") : event.key === "ArrowDown";
+	const back = horizontal ? event.key === (rtl ? "ArrowRight" : "ArrowLeft") : event.key === "ArrowUp";
+	if (forward) scope.send({ type: "NEXT" });
+	else if (back) scope.send({ type: "PREV" });
+	else if (event.key === "Home") scope.send({
+		type: "GO_TO",
+		index: 0
+	});
+	else if (event.key === "End") scope.send({
+		type: "GO_TO",
+		index: lastPageOf(scope.context)
+	});
+	else return;
+	event.preventDefault();
+};
+/** Indexed rows, memoized on the slides' identity: the slot bag memo
+* keys on the row object, so a fresh copy per read would strand the cache
+* and re-attach every action on every tick. */
+const indexedRowsBySlides = /* @__PURE__ */ new WeakMap();
+const indexedRows = (slides) => {
+	const hit = indexedRowsBySlides.get(slides);
+	if (hit !== void 0) return hit;
+	const built = slides.map((slide, index) => ({
+		...slide,
+		index
+	}));
+	indexedRowsBySlides.set(slides, built);
+	return built;
+};
+const def = {
+	name: "carousel",
+	machine: (args, authored) => carousel$1(args, authored),
+	start: (raw) => raw["autoplay"] === true ? "autoplay" : "idle",
+	mounted: ({ props, id, root }) => {
+		const shaped = initial(resolveTwins(props, authoredProps(() => props)), authoredProps(() => props));
+		syncView(id, root, shaped.orientation !== "vertical", shaped.index, shaped.pageCount, shaped.perMove);
+	},
+	settled: ({ after, id, root }) => {
+		const ctx = after.context;
+		syncView(id, root, ctx.orientation !== "vertical", ctx.index, ctx.pageCount, ctx.perMove);
+	},
+	reconcile: ({ context, parsed, send }) => {
+		const ctx = context;
+		const d = derive(parsed);
+		ctx.slideParams = {
+			perMove: d.perMove,
+			slidesPerPage: d.slidesPerPage,
+			autoSize: d.autoSize,
+			slideCount: d.slideCount
+		};
+		ctx.slides = slidesOf(parsed["items"]);
+		ctx.orientation = parsed["orientation"] === "vertical" ? "vertical" : "horizontal";
+		ctx.allowMouseDrag = parsed["allowMouseDrag"] === true;
+		ctx.autoplayDelay = typeof parsed["autoplayDelay"] === "number" ? parsed["autoplayDelay"] : ctx.autoplayDelay;
+		ctx.dir = typeof parsed["dir"] === "string" ? parsed["dir"] : ctx.dir;
+		ctx.inViewThreshold = typeof parsed["inViewThreshold"] === "number" ? parsed["inViewThreshold"] : ctx.inViewThreshold;
+		ctx.autoSize = d.autoSize;
+		ctx.slidesPerPage = d.slidesPerPage;
+		let moved = false;
+		if (ctx.perMove !== d.perMove) {
+			ctx.perMove = d.perMove;
+			moved = true;
+		}
+		if (ctx.pageCount !== d.pageCount) {
+			send({
+				type: "PAGES.SET",
+				count: d.pageCount
+			});
+			moved = true;
+		}
+		return moved;
+	},
+	parts: {
+		root: { attrs: (scope) => ({
+			id: scope.id(""),
+			role: "region",
+			...ariaRoleDescription("carousel"),
+			"data-state": scope.state === "autoplay" ? "playing" : "idle",
+			onPointerdown: () => scope.send({ type: "POINTER.DOWN" }),
+			"use:autoplay": {
+				interval: scope.context.autoplayDelay,
+				enabled: scope.state === "autoplay",
+				onTick: () => scope.send({ type: "AUTOPLAY.TICK" })
+			}
+		}) },
+		control: { attrs: (_scope) => ({
+			role: "group",
+			"aria-label": "Carousel controls"
+		}) },
+		itemGroup: {
+			id: "item-group",
+			attrs: (scope) => {
+				const ctx = scope.context;
+				const horizontal = scope.context.orientation !== "vertical";
+				const playing = scope.state === "autoplay";
+				return {
+					id: scope.id("itemGroup"),
+					"data-orientation": scope.context.orientation,
+					"data-draggable": scope.attr(scope.context.allowMouseDrag),
+					"data-slides": String(scope.context.slidesPerPage),
+					...ctx.dragStatus === "dragging" ? { "data-dragging": "" } : {},
+					...liveRegion({ live: playing ? "off" : "polite" }),
+					tabindex: hasTabbable(scope) ? -1 : 0,
+					onFocusin: () => scope.send({ type: "VIEWPORT.FOCUS" }),
+					onFocusout: () => scope.send({ type: "VIEWPORT.BLUR" }),
+					onKeydown: (event) => onTrackKeydown(scope, event),
+					onScrollend: () => scope.send({
+						type: "SCROLL.SETTLE",
+						index: settlePage(scope)
+					}),
+					...scope.context.allowMouseDrag === true && horizontal ? { "use:drag-scroll": {
+						onDragStart: () => scope.send({ type: "DRAG.START" }),
+						onDragEnd: (velocity) => {
+							scope.send({ type: "DRAG.END" });
+							if (velocity === 0) scope.send({
+								type: "SCROLL.SETTLE",
+								index: settlePage(scope)
+							});
+						}
+					} } : {},
+					"use:resize-observer": { onResize: () => {
+						const ctx = scope.context;
+						if (ctx.dragStatus === "dragging") return;
+						viewOf(scope.id).appliedKey = "";
+						syncView(scope.id, scope.root, scope.context.orientation !== "vertical", ctx.index, ctx.pageCount, scope.context.perMove);
+					} }
+				};
+			}
+		},
+		prevTrigger: {
+			id: "prev-trigger",
+			attrs: (scope) => {
+				const ctx = scope.context;
+				const can = ctx.loop || ctx.index > 0;
+				return {
+					id: scope.id("prevTrigger"),
+					type: "button",
+					"aria-label": "Previous slide",
+					...ariaControls(scope, { part: "itemGroup" }),
+					"data-disabled": can ? void 0 : "",
+					"data-focus": scope.context.focusedId === scope.id("prevTrigger") ? "" : void 0,
+					disabled: !can,
+					onFocus: () => scope.send({
+						type: "PART.FOCUS",
+						id: scope.id("prevTrigger")
+					}),
+					onBlur: () => scope.send({
+						type: "PART.BLUR",
+						id: scope.id("prevTrigger")
+					}),
+					onClick: () => scope.send({ type: "PREV" })
+				};
+			}
+		},
+		nextTrigger: {
+			id: "next-trigger",
+			attrs: (scope) => {
+				const ctx = scope.context;
+				const can = ctx.loop || ctx.index < lastPageOf(ctx);
+				return {
+					id: scope.id("nextTrigger"),
+					type: "button",
+					"aria-label": "Next slide",
+					...ariaControls(scope, { part: "itemGroup" }),
+					"data-disabled": can ? void 0 : "",
+					"data-focus": scope.context.focusedId === scope.id("nextTrigger") ? "" : void 0,
+					disabled: !can,
+					onFocus: () => scope.send({
+						type: "PART.FOCUS",
+						id: scope.id("nextTrigger")
+					}),
+					onBlur: () => scope.send({
+						type: "PART.BLUR",
+						id: scope.id("nextTrigger")
+					}),
+					onClick: () => scope.send({ type: "NEXT" })
+				};
+			}
+		},
+		autoplayTrigger: {
+			id: "autoplay-trigger",
+			attrs: (scope) => {
+				const playing = scope.state === "autoplay";
+				return {
+					id: scope.id("autoplayTrigger"),
+					type: "button",
+					"aria-label": playing ? "Stop slide rotation" : "Start slide rotation",
+					...ariaPressed(playing),
+					"data-playing": playing ? "" : void 0,
+					"data-focus": scope.context.focusedId === scope.id("autoplayTrigger") ? "" : void 0,
+					onFocus: () => scope.send({
+						type: "PART.FOCUS",
+						id: scope.id("autoplayTrigger")
+					}),
+					onBlur: () => scope.send({
+						type: "PART.BLUR",
+						id: scope.id("autoplayTrigger")
+					}),
+					onClick: () => scope.send({ type: playing ? "AUTOPLAY.STOP" : "AUTOPLAY.START" })
+				};
+			}
+		},
+		indicatorGroup: {
+			id: "indicator-group",
+			attrs: (scope) => ({
+				id: scope.id("indicatorGroup"),
+				role: "group",
+				"aria-label": "Slides",
+				onKeydown: (event) => onTrackKeydown(scope, event)
+			})
+		},
+		progressText: {
+			id: "progress-text",
+			attrs: (scope) => ({
+				id: scope.id("progressText"),
+				"data-state": scope.state === "autoplay" ? "playing" : "paused"
+			})
+		},
+		autoplayProgress: {
+			id: "autoplay-progress",
+			attrs: (scope) => ({
+				id: scope.id("autoplayProgress"),
+				"data-state": scope.state === "autoplay" ? "playing" : "paused",
+				...ariaHidden(true)
+			})
+		},
+		autoplayProgressFill: {
+			id: "autoplay-progress-fill",
+			attrs: (scope) => ({ "data-state": scope.state === "autoplay" ? "playing" : "paused" })
+		}
+	},
+	slots: {
+		item: {
+			indexes: (context) => indexedRows(context.slides),
+			attrs: (scope, arg) => {
+				const item = scope.slot;
+				const snap = snapOf(arg);
+				const inView = slideInView(scope, item.index);
+				return {
+					id: scope.id("item", item.index),
+					role: "group",
+					"data-index": item.index,
+					"data-orientation": scope.context.orientation,
+					"data-inview": inView ? "" : void 0,
+					"data-snap": snap,
+					...scope.context.autoSize === true ? { "data-auto-size": "" } : { ...perPageAttrs(countOf(scope.context.slidesPerPage) ?? 1) },
+					...ariaRoleDescription("slide"),
+					"aria-label": `${item.index + 1} of ${scope.context.slides.length}`,
+					...ariaHidden(!inView),
+					"use:intersect": {
+						threshold: intersectThreshold(scope.context.inViewThreshold),
+						onVisibility: (visible) => {
+							scope.send({
+								type: "SLIDE.VIEW",
+								index: item.index,
+								inView: visible
+							});
+						}
+					}
+				};
+			}
+		},
+		indicator: {
+			indexes: (context) => indexedRows(context.slides),
+			attrs: (scope, arg) => {
+				const item = scope.slot;
+				const readOnly = isRecord(arg) && arg["readOnly"] === true;
+				const current = pageOf(scope.context, item.index) === scope.context.index;
+				return {
+					id: scope.id("indicator", item.index),
+					type: "button",
+					"data-index": item.index,
+					"data-orientation": scope.context.orientation,
+					"data-current": current ? "" : void 0,
+					...ariaCurrent(current),
+					"aria-label": `${item.index + 1} of ${scope.context.slides.length} — ${item.label}`,
+					"data-readonly": readOnly ? "" : void 0,
+					"data-focus": scope.context.focusedId === scope.id("indicator", item.index) ? "" : void 0,
+					onFocus: () => scope.send({
+						type: "PART.FOCUS",
+						id: scope.id("indicator", item.index)
+					}),
+					onBlur: () => scope.send({
+						type: "PART.BLUR",
+						id: scope.id("indicator", item.index)
+					}),
+					onClick: () => {
+						if (readOnly) return;
+						scope.send({
+							type: "GO_TO",
+							index: pageOf(scope.context, item.index)
+						});
+					}
+				};
+			}
+		}
+	},
+	commands: {
+		next: { event: () => ({ type: "NEXT" }) },
+		prev: { event: () => ({ type: "PREV" }) },
+		goTo: { event: ([index]) => ({
+			type: "GO_TO",
+			index: Math.trunc(index)
+		}) },
+		setAutoplay: { event: ([on]) => ({ type: on ? "AUTOPLAY.START" : "AUTOPLAY.STOP" }) },
+		scrollToIndex: { event: ([index], context) => ({
+			type: "GO_TO",
+			index: Math.floor(Math.trunc(index) / movesOf(context))
+		}) },
+		scrollTo: { event: ([page]) => ({
+			type: "GO_TO",
+			index: Math.trunc(page)
+		}) },
+		scrollNext: { event: () => ({ type: "NEXT" }) },
+		scrollPrev: { event: () => ({ type: "PREV" }) },
+		play: { event: () => ({ type: "AUTOPLAY.START" }) },
+		pause: { event: () => ({ type: "AUTOPLAY.STOP" }) },
+		refresh: { event: (_args, context) => {
+			const params = context.slideParams;
+			return {
+				type: "PAGES.SET",
+				count: pageCountFor(params.slideCount, params.perMove, params.slidesPerPage, params.autoSize)
+			};
+		} }
+	},
+	readers: {
+		slides: { read: (context) => [...context.slides] },
+		focused: { read: (context) => context.focused },
+		index: { read: (context) => context.index },
+		pageCount: { read: (context) => context.pageCount },
+		slidesInView: { read: (context) => [...context.slidesInView] },
+		isPlaying: { read: (_context, state) => state === "autoplay" },
+		isDragging: { read: (context) => context.dragStatus === "dragging" },
+		isSettling: { read: (context) => context.dragStatus === "settling" },
+		dragStatus: { read: (context) => context.dragStatus },
+		canScrollNext: { read: (context) => {
+			const ctx = context;
+			return ctx.loop || ctx.index < lastPageOf(ctx);
+		} },
+		canScrollPrev: { read: (context) => {
+			const ctx = context;
+			return ctx.loop || ctx.index > 0;
+		} }
+	},
+	methods: {
+		getProgress: { call: (context) => context.pageCount > 0 ? context.index / context.pageCount : 0 },
+		getProgressText: { call: (context) => `${context.index + 1} / ${context.pageCount}` },
+		getProgressRows: { call: (context, _state, _args, _props, id) => {
+			const ctx = context;
+			const view = viewOf(isIdFn(id) ? id : fallbackId);
+			view.readout.value = `${ctx.index + 1} / ${ctx.pageCount}`;
+			return [view.readout];
+		} },
+		isInView: { call: (context, _state, [index]) => {
+			const ctx = context;
+			if (!Number.isFinite(index)) return false;
+			if (ctx.slidesInView.includes(index)) return true;
+			const slides = ctx.slides;
+			const start = ctx.index * movesOf(ctx);
+			const perMove = Math.max(1, Math.min(countOf(ctx.slidesPerPage) ?? 1, slides.length - start || 1));
+			return index >= start && index < start + perMove;
+		} }
+	},
+	events: {
+		"index-change": {
+			prop: "onIndexChange",
+			watch: (context) => [context.index, context.pageCount],
+			detail: (watched) => ({
+				index: typeof watched[0] === "number" ? watched[0] : 0,
+				pageCount: typeof watched[1] === "number" ? watched[1] : 0
+			})
+		},
+		"drag-status-change": {
+			prop: "onDragStatusChange",
+			watch: (context) => [context.dragStatus, context.index],
+			detail: (watched) => {
+				const status = watched[0];
+				const index = watched[1];
+				return {
+					status: status === "focus" || status === "dragging" || status === "settling" ? status : "idle",
+					index: typeof index === "number" ? index : 0
+				};
+			}
+		},
+		"autoplay-status-change": {
+			prop: "onAutoplayStatusChange",
+			watch: (_context, state) => [state === "autoplay"],
+			detail: (watched, _event, _props, context) => ({
+				status: watched[0] === true ? "playing" : "stopped",
+				index: context.index
+			})
+		}
+	}
+};
+const carousel = defineComponent(def);
+export { carousel, def };
+
+//# sourceMappingURL=carousel.presentation.js.map

package/dist/carousel/carousel.state.d.ts

@@ -0,0 +1,61 @@
+export interface CarouselSlide {
+  readonly value: string;
+  readonly label: string;
+  readonly content: string;
+  readonly image?: string | undefined;
+  readonly avatar?: string | undefined;
+  readonly tag?: string | undefined;
+}
+export declare const slidesOf: (raw: unknown) => readonly CarouselSlide[];
+export type CarouselDragStatus = "idle" | "focus" | "dragging" | "settling";
+export type CarouselState = "idle" | "autoplay";
+export interface CarouselContext {
+  index: number;
+  pageCount: number;
+  slidesInView: number[];
+  focused: boolean;
+  focusedId: string | null;
+  dragStatus: CarouselDragStatus;
+  loop: boolean;
+  perMove: number;
+  slideParams: {
+    readonly perMove: number;
+    readonly slidesPerPage: number;
+    readonly autoSize: boolean;
+    readonly slideCount: number;
+  };
+  slides: readonly CarouselSlide[];
+  orientation: "horizontal" | "vertical";
+  allowMouseDrag: boolean;
+  autoplayDelay: number;
+  dir: string;
+  inViewThreshold: number;
+  autoSize: boolean;
+  slidesPerPage: number;
+}
+export declare const clampIndex: (index: number, pageCount: number) => number;
+export declare const slidesPerPageOf: (raw: unknown) => number;
+export declare const slidesPerMoveOf: (raw: unknown, perPage: number) => number;
+export interface CarouselArgs {
+  index?: number;
+  loop?: boolean;
+  items?: readonly unknown[];
+  slidesPerPage?: number;
+  slidesPerMove?: string;
+  autoSize?: boolean;
+  defaultLoop?: boolean;
+  orientation?: "horizontal" | "vertical";
+  allowMouseDrag?: boolean;
+  autoplayDelay?: number;
+  dir?: string;
+  inViewThreshold?: number;
+}
+export declare function initial(args: CarouselArgs, authored: (name: string) => boolean): CarouselContext;
+export declare function pageCountFor(slideCount: number, perMove: number, slidesPerPage: number, autoSize: boolean): number;
+export declare function cycleCount(pageCount: number): number;
+export declare const lastPageOf: (pageCount: number) => number;
+export declare const movesPer: (ctx: CarouselContext) => number;
+export declare const pageOf: (ctx: CarouselContext, slide: number) => number;
+export declare const restStatus: (ctx: CarouselContext) => CarouselDragStatus;
+export declare const midGesture: (status: CarouselDragStatus) => boolean;
+//# sourceMappingURL=carousel.state.d.ts.map