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

package/dist/carousel/carousel.state.js

@@ -0,0 +1,93 @@
+import { defaultTwin, isRecord } from "@spinjs/runtime";
+// src/carousel/carousel.state.ts
+const slidesOf = (raw) => {
+	if (!Array.isArray(raw)) return [];
+	const slides = [];
+	for (const entry of raw) {
+		if (!isRecord(entry)) continue;
+		const value = entry["value"];
+		if (typeof value !== "string") continue;
+		const label = entry["label"];
+		const content = entry["content"];
+		const image = entry["image"];
+		const avatar = entry["avatar"];
+		const tag = entry["tag"];
+		slides.push({
+			value,
+			label: typeof label === "string" ? label : "",
+			content: typeof content === "string" ? content : "",
+			...typeof image === "string" ? { image } : {},
+			...typeof avatar === "string" ? { avatar } : {},
+			...typeof tag === "string" ? { tag } : {}
+		});
+	}
+	return slides;
+};
+const lastPage = (pageCount) => Math.max(0, pageCount - 1);
+const clampIndex = (index, pageCount) => {
+	const last = lastPage(pageCount);
+	return index < 0 ? 0 : index > last ? last : Math.trunc(index);
+};
+const asInt = (value, fallback) => typeof value === "number" && Number.isFinite(value) ? Math.trunc(value) : fallback;
+const slidesPerPageOf = (raw) => Math.max(1, asInt(raw, 1));
+const slidesPerMoveOf = (raw, perPage) => {
+	const parsed = typeof raw === "string" ? Number.parseInt(raw, 10) : NaN;
+	return Number.isFinite(parsed) && parsed > 0 ? parsed : perPage;
+};
+function initial(args, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const slidesPerPage = slidesPerPageOf(args.slidesPerPage);
+	const perMove = slidesPerMoveOf(args.slidesPerMove, slidesPerPage);
+	const autoSize = args.autoSize === true;
+	const slideCount = slidesOf(args.items).length;
+	const pageCount = pageCountFor(slideCount, perMove, slidesPerPage, autoSize);
+	const last = Math.max(0, pageCount - 1);
+	const at = written("index") ? asInt(args.index, 0) : 0;
+	return {
+		index: Math.min(Math.max(0, at), last),
+		pageCount,
+		slidesInView: [],
+		focused: false,
+		focusedId: null,
+		dragStatus: "idle",
+		loop: written("loop") ? args.loop === true : false,
+		perMove,
+		slideParams: {
+			perMove,
+			slidesPerPage,
+			autoSize,
+			slideCount
+		},
+		slides: slidesOf(args.items),
+		orientation: args.orientation === "vertical" ? "vertical" : "horizontal",
+		allowMouseDrag: args.allowMouseDrag === true,
+		autoplayDelay: typeof args.autoplayDelay === "number" ? args.autoplayDelay : 4e3,
+		dir: typeof args.dir === "string" ? args.dir : "ltr",
+		inViewThreshold: typeof args.inViewThreshold === "number" ? args.inViewThreshold : 60,
+		autoSize,
+		slidesPerPage
+	};
+}
+function pageCountFor(slideCount, perMove, slidesPerPage, autoSize) {
+	const total = Math.max(0, Math.trunc(slideCount));
+	if (autoSize) return total;
+	const step = Math.max(1, Math.trunc(perMove));
+	const per = Math.max(1, Math.trunc(slidesPerPage));
+	let count = 0;
+	for (let i = 0; i < total; i += step) {
+		if (i + per > total) break;
+		count += 1;
+	}
+	return count;
+}
+function cycleCount(pageCount) {
+	return Math.max(1, pageCount);
+}
+const lastPageOf = (pageCount) => Math.max(0, pageCount - 1);
+const movesPer = (ctx) => Math.max(1, Math.trunc(ctx.perMove));
+const pageOf = (ctx, slide) => clampIndex(Math.floor(slide / movesPer(ctx)), ctx.pageCount);
+const restStatus = (ctx) => ctx.focused ? "focus" : "idle";
+const midGesture = (status) => status === "dragging" || status === "settling";
+export { clampIndex, cycleCount, initial, lastPageOf, midGesture, movesPer, pageCountFor, pageOf, restStatus, slidesOf, slidesPerMoveOf, slidesPerPageOf };
+
+//# sourceMappingURL=carousel.state.js.map

package/dist/carousel/carousel.transitions.d.ts

@@ -0,0 +1,20 @@
+import { CarouselEvents } from "./carousel.events.js";
+import { CarouselContext } from "./carousel.state.js";
+import { AssignFor } from "@spinjs/runtime/fsm";
+type CarouselAssign<K extends keyof CarouselEvents = keyof CarouselEvents> = AssignFor<CarouselContext, CarouselEvents, K>;
+export declare const advance: CarouselAssign<"NEXT" | "AUTOPLAY.TICK">;
+export declare const previous: CarouselAssign<"PREV">;
+export declare const goTo: CarouselAssign<"GO_TO">;
+export declare const pagesSet: CarouselAssign<"PAGES.SET">;
+export declare const slideView: CarouselAssign<"SLIDE.VIEW">;
+export declare const dragStart: CarouselAssign<"DRAG.START">;
+export declare const dragEnd: CarouselAssign<"DRAG.END">;
+export declare const scrollSettle: CarouselAssign<"SCROLL.SETTLE">;
+export declare const viewportFocus: CarouselAssign<"VIEWPORT.FOCUS">;
+export declare const viewportBlur: CarouselAssign<"VIEWPORT.BLUR">;
+export declare const partFocus: CarouselAssign<"PART.FOCUS">;
+export declare const partBlur: CarouselAssign<"PART.BLUR">;
+export declare const autoplayStart: CarouselAssign<"AUTOPLAY.START">;
+export declare const autoplayStop: CarouselAssign<"AUTOPLAY.STOP">;
+export {};
+//# sourceMappingURL=carousel.transitions.d.ts.map

package/dist/carousel/carousel.transitions.js

@@ -0,0 +1,49 @@
+import { clampIndex, cycleCount, lastPageOf, midGesture, pageOf, restStatus } from "./carousel.state.js";
+// src/carousel/carousel.transitions.ts
+const next = (ctx) => ({ index: ctx.loop ? (ctx.index + 1) % cycleCount(ctx.pageCount) : Math.min(ctx.index + 1, lastPageOf(ctx.pageCount)) });
+const advance = (ctx) => next(ctx);
+const previous = (ctx) => ({ index: ctx.loop ? (ctx.index - 1 + cycleCount(ctx.pageCount)) % cycleCount(ctx.pageCount) : Math.max(0, ctx.index - 1) });
+const goTo = (ctx, e) => {
+	if (typeof e.index !== "number" || !Number.isFinite(e.index)) return {};
+	return { index: clampIndex(e.index, ctx.pageCount) };
+};
+const pagesSet = (ctx, e) => {
+	const pageCount = Math.max(0, Math.trunc(e.count));
+	return {
+		pageCount,
+		index: clampIndex(ctx.index, pageCount)
+	};
+};
+const slideView = (ctx, e) => {
+	const inView = e.inView === true;
+	const slides = inView ? ctx.slidesInView.includes(e.index) ? ctx.slidesInView : [...ctx.slidesInView, e.index].sort((a, b) => a - b) : ctx.slidesInView.filter((slide) => slide !== e.index);
+	if (!inView || ctx.dragStatus !== "settling") return { slidesInView: slides };
+	return {
+		slidesInView: slides,
+		index: pageOf(ctx, e.index),
+		dragStatus: restStatus(ctx)
+	};
+};
+const dragStart = () => ({ dragStatus: "dragging" });
+const dragEnd = () => ({ dragStatus: "settling" });
+const scrollSettle = (ctx, e) => {
+	return {
+		index: clampIndex(e.index, ctx.pageCount),
+		...ctx.dragStatus === "settling" ? { dragStatus: restStatus(ctx) } : {}
+	};
+};
+const viewportFocus = (ctx) => ({
+	focused: true,
+	...midGesture(ctx.dragStatus) ? {} : { dragStatus: "focus" }
+});
+const viewportBlur = (ctx) => ({
+	focused: false,
+	...midGesture(ctx.dragStatus) ? {} : { dragStatus: "idle" }
+});
+const partFocus = (_ctx, e) => ({ focusedId: e.id });
+const partBlur = (ctx, e) => ctx.focusedId === e.id ? { focusedId: null } : {};
+const autoplayStart = () => ({});
+const autoplayStop = () => ({});
+export { advance, autoplayStart, autoplayStop, dragEnd, dragStart, goTo, pagesSet, partBlur, partFocus, previous, scrollSettle, slideView, viewportBlur, viewportFocus };
+
+//# sourceMappingURL=carousel.transitions.js.map

package/dist/carousel/examples/autoplay.html

@@ -0,0 +1,69 @@
+<script lang="ts">
+import { carousel } from "../carousel.presentation.js";
+
+const machine = carousel({
+  allowMouseDrag: true,
+  autoplay: true,
+  autoplayDelay: 2000,
+  items: [
+    { value: "a", tag: "01 · Peak", label: "Alpine", content: "Thin air, steep lines." },
+    { value: "b", tag: "02 · Coast", label: "Bay", content: "Salt, fog, gulls." },
+    { value: "c", tag: "03 · Mesa", label: "Canyon", content: "Red rock, deep time." },
+  ],
+});
+</script>
+
+<div
+  class="relative mx-auto w-full max-w-[32rem] rounded-lg border border-solid border-border bg-surface-raised p-4"
+  {...machine.getRootProps()}>
+  <div
+    class={["flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none", { "cursor-grabbing snap-none scroll-auto": machine.isDragging }]}
+    {...machine.getItemGroupProps()}
+  >
+    <template for={machine.getItemIndexes()} as={row} key={row.value}>
+      <div
+        class={["w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50", { "opacity-100": machine.isInView(row.index) }]}
+        {...machine.getItemProps(row)}
+      >
+        <div
+          class="flex min-h-[8rem] flex-col items-center justify-center rounded-md border border-solid border-border bg-surface p-6 text-center">
+          <span class="font-mono text-xs text-primary">{row.tag}</span>
+          <div class="mt-1 text-md font-semibold text-text">{row.label}</div>
+          <div class="mt-1 text-xs text-text-muted">{row.content}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <div
+    class={["mt-2 h-1 overflow-hidden rounded-full bg-border opacity-0 transition-opacity duration-fast ease-standard pointer-events-none", { "opacity-100": machine.isPlaying }]}
+    {...machine.getAutoplayProgressProps()}>
+    <div
+      class={["h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard", { "scale-x-100": machine.isPlaying }]}
+      {...machine.getAutoplayProgressFillProps()}></div>
+  </div>
+
+  <div class="flex items-center gap-2 pt-4" {...machine.getControlProps()}>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getPrevTriggerProps()}>‹</button>
+    <div class="flex flex-1 items-center justify-center gap-1"
+      {...machine.getIndicatorGroupProps()}>
+      <template for={machine.getItemIndexes()} as={row} key={row.value}>
+        <button
+          class={["bare h-2 w-2 rounded-full p-0 border-border bg-surface transition-all duration-base ease-standard", { "w-4 border-transparent": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
+          {...machine.getIndicatorProps(row)}></button>
+      </template>
+    </div>
+    <button
+      class={["ghost icon s-sm", { "text-primary": machine.isPlaying, "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getAutoplayTriggerProps()}>▶</button>
+    <template for={machine.getProgressRows()} as={row} key={row.value}>
+      <span class="text-xs text-text-muted"
+        {...machine.getProgressTextProps()}>{row.value}</span>
+    </template>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getNextTriggerProps()}>›</button>
+  </div>
+</div>

package/dist/carousel/examples/basic.html

@@ -0,0 +1,56 @@
+<script lang="ts">
+import { carousel } from "../carousel.presentation.js";
+
+const machine = carousel({
+  allowMouseDrag: true,
+  items: [
+    { value: "a", tag: "01 · Peak", label: "Alpine", content: "Thin air, steep lines." },
+    { value: "b", tag: "02 · Coast", label: "Bay", content: "Salt, fog, gulls." },
+    { value: "c", tag: "03 · Mesa", label: "Canyon", content: "Red rock, deep time." },
+  ],
+});
+</script>
+
+<div
+  class="relative mx-auto w-full max-w-[32rem] rounded-lg border border-solid border-border bg-surface-raised p-4"
+  {...machine.getRootProps()}>
+  <div
+    class={["flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none", { "cursor-grabbing snap-none scroll-auto": machine.isDragging }]}
+    {...machine.getItemGroupProps()}
+  >
+    <template for={machine.getItemIndexes()} as={row} key={row.value}>
+      <div
+        class={["w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50", { "opacity-100": machine.isInView(row.index) }]}
+        {...machine.getItemProps(row)}
+      >
+        <div
+          class="flex min-h-[8rem] flex-col items-center justify-center rounded-md border border-solid border-border bg-surface p-6 text-center">
+          <span class="font-mono text-xs text-primary">{row.tag}</span>
+          <div class="mt-1 text-md font-semibold text-text">{row.label}</div>
+          <div class="mt-1 text-xs text-text-muted">{row.content}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <div class="flex items-center gap-2 pt-4" {...machine.getControlProps()}>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getPrevTriggerProps()}>‹</button>
+    <div class="flex flex-1 items-center justify-center gap-1"
+      {...machine.getIndicatorGroupProps()}>
+      <template for={machine.getItemIndexes()} as={row} key={row.value}>
+        <button
+          class={["bare h-2 w-2 rounded-full p-0 border-border bg-surface transition-all duration-base ease-standard", { "w-4 border-transparent": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
+          {...machine.getIndicatorProps(row)}></button>
+      </template>
+    </div>
+    <template for={machine.getProgressRows()} as={row} key={row.value}>
+      <span class="text-xs text-text-muted"
+        {...machine.getProgressTextProps()}>{row.value}</span>
+    </template>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getNextTriggerProps()}>›</button>
+  </div>
+</div>

package/dist/carousel/examples/cards.html

@@ -0,0 +1,71 @@
+<script lang="ts">
+import { carousel } from "../carousel.presentation.js";
+
+const machine = carousel({
+  allowMouseDrag: true,
+  slidesPerPage: 2,
+  items: [
+    { value: "mtn", tag: "Elevation", label: "Mountain Adventure", content: "Thin air, steep lines." },
+    { value: "ocean", tag: "Pacific", label: "Ocean Views", content: "Salt, fog, gulls." },
+    { value: "forest", tag: "Redwoods", label: "Forest Escape", content: "Tall trees, soft light." },
+    { value: "urban", tag: "Downtown", label: "Urban Explorer", content: "Vibrant city culture." },
+  ],
+});
+</script>
+
+<div
+  class="relative mx-auto w-full max-w-sm rounded-lg border border-solid border-border bg-surface-raised p-4"
+  {...machine.getRootProps()}>
+  <div
+    class={["flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none", { "cursor-grabbing snap-none scroll-auto": machine.isDragging }]}
+    {...machine.getItemGroupProps()}
+  >
+    <template for={machine.getItemIndexes()} as={row} key={row.value}>
+      <div
+        class={["w-[calc((100%_-_0.5rem)/2)] shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50", { "opacity-100": machine.isInView(row.index) }]}
+        {...machine.getItemProps(row)}
+      >
+        <div
+          class="flex min-h-[8rem] flex-col justify-between rounded-md border border-solid border-border bg-surface p-4">
+          <span class="font-mono text-xs text-primary">{row.tag}</span>
+          <div class="mt-3">
+            <div class="text-sm font-medium text-text">{row.label}</div>
+            <div class="mt-1 text-xs text-text-muted">{row.content}</div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <div
+    class={["mt-2 h-1 overflow-hidden rounded-full bg-border opacity-0 transition-opacity duration-fast ease-standard pointer-events-none", { "opacity-100": machine.isPlaying }]}
+    {...machine.getAutoplayProgressProps()}>
+    <div
+      class={["h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard", { "scale-x-100": machine.isPlaying }]}
+      {...machine.getAutoplayProgressFillProps()}></div>
+  </div>
+
+  <div class="flex items-center gap-2 pt-4" {...machine.getControlProps()}>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getPrevTriggerProps()}>‹</button>
+    <div class="flex flex-1 items-center justify-center gap-1"
+      {...machine.getIndicatorGroupProps()}>
+      <template for={machine.getItemIndexes()} as={row} key={row.value}>
+        <button
+          class={["bare h-2 w-2 rounded-full p-0 border-border bg-surface transition-all duration-base ease-standard", { "w-4 border-transparent": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
+          {...machine.getIndicatorProps(row)}></button>
+      </template>
+    </div>
+    <button
+      class={["ghost icon s-sm", { "text-primary": machine.isPlaying, "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getAutoplayTriggerProps()}>▶</button>
+    <template for={machine.getProgressRows()} as={row} key={row.value}>
+      <span class="text-xs text-text-muted"
+        {...machine.getProgressTextProps()}>{row.value}</span>
+    </template>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getNextTriggerProps()}>›</button>
+  </div>
+</div>

package/dist/carousel/examples/hero.html

@@ -0,0 +1,54 @@
+<script lang="ts">
+import { carousel } from "../carousel.presentation.js";
+
+const machine = carousel({
+  allowMouseDrag: true,
+  items: [
+    { value: "h1", tag: "Featured Release", label: "Discover Amazing Places", content: "Explore the world's most beautiful destinations." },
+    { value: "h2", tag: "Expedition", label: "Adventure Awaits", content: "Peaks, trails, and thin air." },
+    { value: "h3", tag: "Deep Time", label: "Journey Beyond", content: "Red rock canyons and quiet horizons." },
+  ],
+});
+</script>
+
+<div
+  class="relative mx-auto w-full max-w-sm rounded-lg border border-solid border-border bg-surface-raised p-4"
+  {...machine.getRootProps()}>
+  <div
+    class={["flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none", { "cursor-grabbing snap-none scroll-auto": machine.isDragging }]}
+    {...machine.getItemGroupProps()}
+  >
+    <template for={machine.getItemIndexes()} as={row} key={row.value}>
+      <div
+        class={["w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50", { "opacity-100": machine.isInView(row.index) }]}
+        {...machine.getItemProps(row)}
+      >
+        <div
+          class="relative flex min-h-[10rem] flex-col justify-between rounded-md border border-solid border-border bg-surface p-6">
+          <span class="w-fit rounded-full bg-surface-sunken px-2 py-1 font-mono text-xs text-primary">{row.tag}</span>
+          <div class="mt-4">
+            <div class="text-lg font-semibold text-text">{row.label}</div>
+            <div class="mt-1 text-sm text-text-muted">{row.content}</div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <div class="flex items-center gap-2 pt-4" {...machine.getControlProps()}>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getPrevTriggerProps()}>‹</button>
+    <div class="flex flex-1 items-center justify-center gap-1"
+      {...machine.getIndicatorGroupProps()}>
+      <template for={machine.getItemIndexes()} as={row} key={row.value}>
+        <button
+          class={["bare h-2 w-2 rounded-full p-0 border-border bg-surface transition-all duration-base ease-standard", { "w-4 border-transparent": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
+          {...machine.getIndicatorProps(row)}></button>
+      </template>
+    </div>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getNextTriggerProps()}>›</button>
+  </div>
+</div>

package/dist/carousel/examples/infinite.html

@@ -0,0 +1,68 @@
+<script lang="ts">
+import { carousel } from "../carousel.presentation.js";
+
+const machine = carousel({
+  allowMouseDrag: true,
+  items: [
+    { "value": "apple", "label": "Apple", "content": "Fresh picks." },
+    { "value": "figma", "label": "Figma", "content": "Design together." },
+    { "value": "linear", "label": "Linear", "content": "Ship faster." },
+    { "value": "slack", "label": "Slack", "content": "Talk it over." },
+  ],
+  loop: true,
+});
+</script>
+
+<div
+  class="relative mx-auto w-full max-w-[32rem] rounded-lg border border-solid border-border bg-surface-raised p-4"
+  {...machine.getRootProps()}>
+  <div
+    class={["flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none", { "cursor-grabbing snap-none scroll-auto": machine.isDragging }]}
+    {...machine.getItemGroupProps()}
+  >
+    <template for={machine.getItemIndexes()} as={row} key={row.value}>
+      <div
+        class={["w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50", { "opacity-100": machine.isInView(row.index) }]}
+        {...machine.getItemProps(row)}
+      >
+        <div
+          class="flex min-h-[8rem] flex-col items-center justify-center rounded-md border border-solid border-border bg-surface p-4 text-center">
+          <div class="text-sm font-medium text-text">{row.label}</div>
+          <div class="text-xs text-text-muted mt-1">{row.content}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <div
+    class={["mt-2 h-1 overflow-hidden rounded-full bg-border opacity-0 transition-opacity duration-fast ease-standard pointer-events-none", { "opacity-100": machine.isPlaying }]}
+    {...machine.getAutoplayProgressProps()}>
+    <div
+      class={["h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard", { "scale-x-100": machine.isPlaying }]}
+      {...machine.getAutoplayProgressFillProps()}></div>
+  </div>
+
+  <div class="flex items-center gap-2 pt-4" {...machine.getControlProps()}>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getPrevTriggerProps()}>‹</button>
+    <div class="flex flex-1 items-center justify-center gap-1"
+      {...machine.getIndicatorGroupProps()}>
+      <template for={machine.getItemIndexes()} as={row} key={row.value}>
+        <button
+          class={["bare h-2 w-2 rounded-full p-0 border-border bg-surface transition-all duration-base ease-standard", { "w-4 border-transparent": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
+          {...machine.getIndicatorProps(row)}></button>
+      </template>
+    </div>
+    <button
+      class={["ghost icon s-sm", { "text-primary": machine.isPlaying, "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getAutoplayTriggerProps()}>▶</button>
+    <template for={machine.getProgressRows()} as={row} key={row.value}>
+      <span class="text-xs text-text-muted"
+        {...machine.getProgressTextProps()}>{row.value}</span>
+    </template>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getNextTriggerProps()}>›</button>
+  </div>
+</div>

package/dist/carousel/examples/minimal.html

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { carousel } from "../carousel.presentation.js";
+
+const machine = carousel({
+  allowMouseDrag: true,
+  items: [{ "value": "one", "label": "One", "content": "First." }, {
+    "value": "two",
+    "label": "Two",
+    "content": "Second.",
+  }],
+});
+</script>
+
+<div
+  class="relative mx-auto w-full max-w-[32rem] rounded-lg border border-solid border-border bg-surface-raised p-4"
+  {...machine.getRootProps()}>
+  <div
+    class={["flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none", { "cursor-grabbing snap-none scroll-auto": machine.isDragging }]}
+    {...machine.getItemGroupProps()}
+  >
+    <template for={machine.getItemIndexes()} as={row} key={row.value}>
+      <div
+        class={["w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50", { "opacity-100": machine.isInView(row.index) }]}
+        {...machine.getItemProps(row)}
+      >
+        <div
+          class="flex min-h-[6rem] flex-col items-center justify-center rounded-md border border-solid border-border bg-surface p-4 text-center">
+          <div class="text-sm font-medium text-text">{row.label}</div>
+          <div class="text-xs text-text-muted mt-1">{row.content}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <div class="flex items-center justify-between gap-2 pt-3" {...machine.getControlProps()}>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getPrevTriggerProps()}>‹</button>
+    <template for={machine.getProgressRows()} as={row} key={row.value}>
+      <span class="text-xs text-text-muted"
+        {...machine.getProgressTextProps()}>{row.value}</span>
+    </template>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getNextTriggerProps()}>›</button>
+  </div>
+</div>

package/dist/carousel/examples/testimonials.html

@@ -0,0 +1,78 @@
+<script lang="ts">
+import { carousel } from "../carousel.presentation.js";
+
+const machine = carousel({
+  allowMouseDrag: true,
+  items: [
+    { value: "sarah", initials: "SJ", role: "Marketing Director", label: "Sarah Johnson", content: "Ships on time with zero visual drift across themes." },
+    { value: "michael", initials: "MC", role: "Engineering Lead", label: "Michael Chen", content: "Deterministic state machines and zero flaky selectors." },
+    { value: "emily", initials: "ER", role: "Design Systems", label: "Emily Rodriguez", content: "Every token lands cleanly without one-off overrides." },
+  ],
+});
+</script>
+
+<div
+  class="relative mx-auto w-full max-w-[32rem] rounded-lg border border-solid border-border bg-surface-raised p-4"
+  {...machine.getRootProps()}>
+  <div
+    class={["flex gap-2 py-1 snap-x snap-mandatory overflow-x-auto scroll-smooth cursor-grab select-none", { "cursor-grabbing snap-none scroll-auto": machine.isDragging }]}
+    {...machine.getItemGroupProps()}
+  >
+    <template for={machine.getItemIndexes()} as={row} key={row.value}>
+      <div
+        class={["w-full shrink-0 min-w-0 snap-start transition-opacity duration-base ease-standard opacity-50", { "opacity-100": machine.isInView(row.index) }]}
+        {...machine.getItemProps(row)}
+      >
+        <div
+          class="flex min-h-[8rem] flex-col items-center justify-center rounded-md border border-solid border-border bg-surface p-6 text-center">
+          <span class="i-lucide-quote icon-lg text-primary"
+            aria-hidden="true"></span>
+          <p class="text-sm italic text-text">"{row.content}"</p>
+          <div class="mt-3 flex items-center justify-center gap-1"
+            aria-hidden="true">
+            <span class="i-lucide-star text-sm text-semantic-warning"></span><span class="i-lucide-star text-sm text-semantic-warning"></span><span class="i-lucide-star text-sm text-semantic-warning"></span><span class="i-lucide-star text-sm text-semantic-warning"></span><span class="i-lucide-star text-sm text-semantic-warning"></span>
+          </div>
+          <div class="mt-3 flex items-center gap-2">
+            <span class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-primary text-xs font-semibold text-on-primary">{row.initials}</span>
+            <div class="text-left">
+              <div class="text-sm font-medium text-text">{row.label}</div>
+              <div class="text-xs text-text-muted">{row.role}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <div
+    class={["mt-2 h-1 overflow-hidden rounded-full bg-border opacity-0 transition-opacity duration-fast ease-standard pointer-events-none", { "opacity-100": machine.isPlaying }]}
+    {...machine.getAutoplayProgressProps()}>
+    <div
+      class={["h-full w-full rounded-full bg-primary origin-left scale-x-0 transition-transform duration-fast ease-standard", { "scale-x-100": machine.isPlaying }]}
+      {...machine.getAutoplayProgressFillProps()}></div>
+  </div>
+
+  <div class="flex items-center gap-2 pt-4" {...machine.getControlProps()}>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getPrevTriggerProps()}>‹</button>
+    <div class="flex flex-1 items-center justify-center gap-1"
+      {...machine.getIndicatorGroupProps()}>
+      <template for={machine.getItemIndexes()} as={row} key={row.value}>
+        <button
+          class={["bare h-2 w-2 rounded-full p-0 border-border bg-surface transition-all duration-base ease-standard", { "w-4 border-transparent": machine.isInView(row.index), "ring-2 ring-border-strong": machine.focused }]}
+          {...machine.getIndicatorProps(row)}></button>
+      </template>
+    </div>
+    <button
+      class={["ghost icon s-sm", { "text-primary": machine.isPlaying, "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getAutoplayTriggerProps()}>▶</button>
+    <template for={machine.getProgressRows()} as={row} key={row.value}>
+      <span class="text-xs text-text-muted"
+        {...machine.getProgressTextProps()}>{row.value}</span>
+    </template>
+    <button
+      class={["ghost icon s-sm", { "ring-2 ring-border-strong": machine.focused }]}
+      {...machine.getNextTriggerProps()}>›</button>
+  </div>
+</div>