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

package/dist/splitter/splitter.state.js

@@ -0,0 +1,225 @@
+import { coerceJsonArray, defaultTwin } from "@spinjs/runtime";
+// src/splitter/splitter.state.ts
+const PRECISION = 10;
+function fuzzyCompare(actual, expected) {
+	if (actual.toFixed(PRECISION) === expected.toFixed(PRECISION)) return 0;
+	return actual > expected ? 1 : -1;
+}
+function fuzzyEqual(actual, expected) {
+	if (actual === void 0 || expected === void 0) return false;
+	return fuzzyCompare(actual, expected) === 0;
+}
+function fuzzySizeEqual(a, b) {
+	if (a.length !== b.length) return false;
+	return a.every((size, index) => fuzzyEqual(size, b[index]));
+}
+function clampPanel(panels, index, size) {
+	const panel = panels[index];
+	if (panel === void 0) return size;
+	const collapsedSize = panel.collapsedSize ?? 0;
+	const minSize = panel.minSize ?? 0;
+	const maxSize = panel.maxSize ?? 100;
+	if (fuzzyCompare(size, minSize) < 0) {
+		if (panel.collapsible === true) {
+			const halfway = (collapsedSize + minSize) / 2;
+			size = fuzzyCompare(size, halfway) < 0 ? collapsedSize : minSize;
+		} else size = minSize;
+	}
+	size = Math.min(maxSize, size);
+	return parseFloat(size.toFixed(PRECISION));
+}
+function validateSizes(panels, size) {
+	if (size.length !== panels.length) throw new Error(`Invalid ${panels.length} panel size: ${size.map((s) => `${s}%`).join(", ")}`);
+	const next = [...size];
+	const total = next.reduce((sum, value) => sum + value, 0);
+	if (!fuzzyEqual(total, 100) && next.length > 0) for (let index = 0; index < panels.length; index += 1) next[index] = 100 / total * (next[index] ?? 0);
+	let remaining = 0;
+	for (let index = 0; index < panels.length; index += 1) {
+		const safe = clampPanel(panels, index, next[index] ?? 0);
+		if ((next[index] ?? 0) !== safe) {
+			remaining += (next[index] ?? 0) - safe;
+			next[index] = safe;
+		}
+	}
+	if (!fuzzyEqual(remaining, 0)) for (let index = 0; index < panels.length; index += 1) {
+		const prev = next[index] ?? 0;
+		const safe = clampPanel(panels, index, prev + remaining);
+		if (prev !== safe) {
+			remaining -= safe - prev;
+			next[index] = safe;
+			if (fuzzyEqual(remaining, 0)) break;
+		}
+	}
+	return next;
+}
+function resizeByDelta(panels, delta, initialSize, pivotIndices, prevSize, trigger) {
+	if (fuzzyEqual(delta, 0)) return [...initialSize];
+	const first = pivotIndices[0] ?? -1;
+	const second = pivotIndices[1] ?? -1;
+	if (first < 0 || second < 0) return [...prevSize];
+	const next = [...initialSize];
+	if (trigger === "keyboard") {
+		const expandIndex = delta < 0 ? second : first;
+		const expandPanel = panels[expandIndex];
+		if (expandPanel?.collapsible === true) {
+			const prev = initialSize[expandIndex] ?? 0;
+			if (fuzzyEqual(prev, expandPanel.collapsedSize ?? 0)) {
+				const local = (expandPanel.minSize ?? 0) - prev;
+				if (fuzzyCompare(local, Math.abs(delta)) > 0) delta = delta < 0 ? -local : local;
+			}
+		}
+		const collapseIndex = delta < 0 ? first : second;
+		const collapsePanel = panels[collapseIndex];
+		if (collapsePanel?.collapsible === true) {
+			const prev = initialSize[collapseIndex] ?? 0;
+			if (fuzzyEqual(prev, collapsePanel.minSize ?? 0)) {
+				const local = prev - (collapsePanel.collapsedSize ?? 0);
+				if (fuzzyCompare(local, Math.abs(delta)) > 0) delta = delta < 0 ? -local : local;
+			}
+		}
+	}
+	const increment = delta < 0 ? 1 : -1;
+	let cursor = delta < 0 ? second : first;
+	let absorbable = 0;
+	while (true) {
+		const prev = initialSize[cursor] ?? 0;
+		const room = clampPanel(panels, cursor, 100) - prev;
+		absorbable += room;
+		cursor += increment;
+		if (cursor < 0 || cursor >= panels.length) break;
+	}
+	const clamped = Math.min(Math.abs(delta), Math.abs(absorbable));
+	delta = delta < 0 ? -clamped : clamped;
+	let applied = 0;
+	let index = delta < 0 ? first : second;
+	while (index >= 0 && index < panels.length) {
+		const remaining = Math.abs(delta) - Math.abs(applied);
+		const prev = initialSize[index] ?? 0;
+		const safe = clampPanel(panels, index, prev - remaining);
+		if (!fuzzyEqual(prev, safe)) {
+			applied += prev - safe;
+			next[index] = safe;
+			if (applied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), void 0, { numeric: true }) >= 0) break;
+		}
+		index += delta < 0 ? -1 : 1;
+	}
+	const grow = delta < 0 ? second : first;
+	const unsafe = (initialSize[grow] ?? 0) + applied;
+	const safe = clampPanel(panels, grow, unsafe);
+	next[grow] = safe;
+	if (!fuzzyEqual(safe, unsafe)) {
+		let remaining = unsafe - safe;
+		let spill = grow;
+		while (spill >= 0 && spill < panels.length) {
+			const spillPrev = next[spill] ?? 0;
+			const spillSafe = clampPanel(panels, spill, spillPrev + remaining);
+			if (!fuzzyEqual(spillPrev, spillSafe)) {
+				remaining -= spillSafe - spillPrev;
+				next[spill] = spillSafe;
+			}
+			if (fuzzyEqual(remaining, 0)) break;
+			spill += delta > 0 ? -1 : 1;
+		}
+	}
+	if (fuzzySizeEqual(prevSize, next)) return [...prevSize];
+	if (!fuzzyEqual(next.reduce((sum, value) => sum + value, 0), 100)) return [...prevSize];
+	return next;
+}
+function pivotOf(panels, index) {
+	return index === panels.length - 1 ? [index - 1, index] : [index, index + 1];
+}
+function defaultSizes(count, spec) {
+	const next = new Array(count).fill(0);
+	let remaining = 100;
+	let unsized = 0;
+	for (let index = 0; index < count; index += 1) {
+		const given = spec[index];
+		if (given !== void 0) {
+			next[index] = given;
+			remaining -= given;
+		} else unsized += 1;
+	}
+	for (let index = 0; index < count; index += 1) if (spec[index] === void 0) {
+		next[index] = unsized > 0 ? remaining / unsized : 0;
+		remaining -= next[index] ?? 0;
+		unsized -= 1;
+	}
+	return next;
+}
+function handleId(beforeId, afterId) {
+	return `${beforeId}:${afterId}`;
+}
+function splitHandle(id) {
+	const pivot = id.indexOf(":");
+	return [id.slice(0, pivot), id.slice(pivot + 1)];
+}
+function isInteractive(ctx) {
+	return !ctx.disabled;
+}
+function panelCollapsed(panels, size, id) {
+	const panel = panels.find((candidate) => candidate.id === id);
+	if (panel?.collapsible !== true) return false;
+	return fuzzyEqual(size[panels.findIndex((candidate) => candidate.id === id)], panel.collapsedSize ?? 0);
+}
+function isPanelEntry(raw) {
+	if (typeof raw !== "object" || raw === null || !("id" in raw)) return false;
+	const id = raw.id;
+	return typeof id === "string" && id.length > 0;
+}
+function parsePanels(raw) {
+	const list = Array.isArray(raw) ? raw : typeof raw === "string" ? coerceJsonArray(raw, []) : [];
+	const out = [];
+	for (const item of list) {
+		if (!isPanelEntry(item)) continue;
+		const num = (name) => {
+			const v = item[name];
+			return typeof v === "number" && Number.isFinite(v) ? v : void 0;
+		};
+		const bool = (name) => {
+			const v = item[name];
+			return typeof v === "boolean" ? v : void 0;
+		};
+		const minSize = num("minSize");
+		const maxSize = num("maxSize");
+		const collapsible = bool("collapsible");
+		const collapsedSize = num("collapsedSize");
+		out.push({
+			id: item.id,
+			...minSize === void 0 ? {} : { minSize },
+			...maxSize === void 0 ? {} : { maxSize },
+			...collapsible === void 0 ? {} : { collapsible },
+			...collapsedSize === void 0 ? {} : { collapsedSize }
+		});
+	}
+	return out;
+}
+const sizesOf = (raw) => {
+	const list = Array.isArray(raw) ? raw : coerceJsonArray(typeof raw === "string" ? raw : null, []);
+	if (list.length === 0) return null;
+	if (!list.every((item) => typeof item === "number" && Number.isFinite(item))) return null;
+	return [...list];
+};
+function initial(args = {}, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[field] !== void 0 || args[defaultTwin(field)] !== void 0;
+	const panels = written("panels") ? parsePanels(args.panels) : [];
+	const spec = written("size") ? sizesOf(args.size) ?? [] : [];
+	let size;
+	try {
+		size = validateSizes(panels, defaultSizes(panels.length, spec));
+	} catch {
+		size = defaultSizes(panels.length, spec);
+	}
+	return {
+		panels: [...panels],
+		size,
+		drag: null,
+		focusedHandle: null,
+		keyboardResizeBy: 1,
+		orientation: args.orientation === "vertical" ? "vertical" : "horizontal",
+		disabled: args.disabled === true,
+		beforeCollapse: {}
+	};
+}
+export { defaultSizes, fuzzyEqual, fuzzySizeEqual, handleId, initial, isInteractive, panelCollapsed, parsePanels, pivotOf, resizeByDelta, sizesOf, splitHandle, validateSizes };
+
+//# sourceMappingURL=splitter.state.js.map

package/dist/splitter/splitter.transitions.d.ts

@@ -0,0 +1,20 @@
+import { SplitterContext } from "./splitter.state.js";
+import { SplitterEvents } from "./splitter.events.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type SplitterAssign<K extends keyof SplitterEvents = keyof SplitterEvents> = AssignFor<SplitterContext, SplitterEvents, K>;
+export declare const setFocusedHandle: SplitterAssign<"POINTER_OVER" | "FOCUS">;
+export declare const startDrag: SplitterAssign<"POINTER_DOWN">;
+export declare const clearFocus: () => Partial<SplitterContext>;
+export declare const clearDrag: () => Partial<SplitterContext>;
+export declare const setSize: SplitterAssign<"SET_SIZE">;
+export declare const resetSize: SplitterAssign<"RESET_SIZE">;
+export declare const collapsePanel: SplitterAssign<"COLLAPSE_PANEL">;
+export declare const expandPanel: SplitterAssign<"EXPAND_PANEL">;
+export declare const resizePanel: SplitterAssign<"RESIZE_PANEL">;
+export declare const setPanels: SplitterAssign<"SET_PANELS">;
+export declare const toggleCollapseOnEnter: SplitterAssign<"ENTER">;
+export declare const keyboardMove: SplitterAssign<"KEYBOARD_MOVE">;
+export declare const pointerMove: SplitterAssign<"POINTER_MOVE">;
+export declare const isHandleFocused: GuardFor<SplitterContext, SplitterEvents>;
+export {};
+//# sourceMappingURL=splitter.transitions.d.ts.map

package/dist/splitter/splitter.transitions.js

@@ -0,0 +1,132 @@
+import { defaultSizes, fuzzyEqual, fuzzySizeEqual, parsePanels, pivotOf, resizeByDelta, validateSizes } from "./splitter.state.js";
+// src/splitter/splitter.transitions.ts
+const setFocusedHandle = (_ctx, event) => ({ focusedHandle: event.id });
+const startDrag = (ctx, event) => {
+	const [beforeId, afterId] = event.id.split(":", 2);
+	const before = ctx.panels.findIndex((panel) => panel.id === beforeId);
+	const after = ctx.panels.findIndex((panel) => panel.id === afterId);
+	if (before < 0 || after < 0) return {};
+	return {
+		focusedHandle: event.id,
+		drag: {
+			handleId: event.id,
+			beforeId,
+			afterId,
+			startPercent: event.startPercent,
+			startSizes: [...ctx.size]
+		}
+	};
+};
+const clearFocus = () => ({ focusedHandle: null });
+const clearDrag = () => ({ drag: null });
+const setSize = (ctx, event) => {
+	const raw = event.size;
+	const parsed = typeof raw === "string" ? (() => {
+		try {
+			return JSON.parse(raw);
+		} catch {
+			return [];
+		}
+	})() : raw;
+	const written = Array.isArray(parsed) && parsed.every((n) => typeof n === "number" && Number.isFinite(n)) ? [...parsed] : null;
+	if (written === null) return {};
+	try {
+		const safe = validateSizes(ctx.panels, written);
+		return fuzzySizeEqual(ctx.size, safe) ? {} : { size: safe };
+	} catch {
+		return {};
+	}
+};
+const resetSize = (ctx) => {
+	return { size: validateSizes(ctx.panels, defaultSizes(ctx.panels.length, [])) };
+};
+const collapsePanel = (ctx, event) => {
+	const index = ctx.panels.findIndex((panel) => panel.id === event.id);
+	const panel = ctx.panels[index];
+	if (panel?.collapsible !== true) return {};
+	const current = ctx.size[index] ?? 0;
+	const collapsedSize = panel.collapsedSize ?? 0;
+	if (fuzzyEqual(current, collapsedSize)) return {};
+	const pivots = pivotOf(ctx.panels, index);
+	const delta = index === ctx.panels.length - 1 ? current - collapsedSize : collapsedSize - current;
+	const next = resizeByDelta(ctx.panels, delta, ctx.size, pivots, ctx.size, "imperative-api");
+	if (fuzzySizeEqual(ctx.size, next)) return {};
+	return {
+		size: next,
+		beforeCollapse: {
+			...ctx.beforeCollapse,
+			[panel.id]: current
+		}
+	};
+};
+const expandPanel = (ctx, event) => {
+	const index = ctx.panels.findIndex((panel) => panel.id === event.id);
+	const panel = ctx.panels[index];
+	if (panel?.collapsible !== true) return {};
+	const current = ctx.size[index] ?? 0;
+	const collapsedSize = panel.collapsedSize ?? 0;
+	if (!fuzzyEqual(current, collapsedSize)) return {};
+	const minSize = event.minSize ?? panel.minSize ?? 0;
+	const remembered = ctx.beforeCollapse[panel.id];
+	const base = remembered !== void 0 && remembered >= minSize ? remembered : minSize;
+	const delta = index === ctx.panels.length - 1 ? current - base : base - current;
+	const pivots = pivotOf(ctx.panels, index);
+	const next = resizeByDelta(ctx.panels, delta, ctx.size, pivots, ctx.size, "imperative-api");
+	return fuzzySizeEqual(ctx.size, next) ? {} : { size: next };
+};
+const resizePanel = (ctx, event) => {
+	const index = ctx.panels.findIndex((panel) => panel.id === event.id);
+	if (ctx.panels[index] === void 0) return {};
+	const current = ctx.size[index] ?? 0;
+	const delta = index === ctx.panels.length - 1 ? current - event.size : event.size - current;
+	const next = resizeByDelta(ctx.panels, delta, ctx.size, pivotOf(ctx.panels, index), ctx.size, "imperative-api");
+	return fuzzySizeEqual(ctx.size, next) ? {} : { size: next };
+};
+const setPanels = (_ctx, event) => ({ panels: parsePanels(event.panels) });
+const toggleCollapseOnEnter = (ctx, event) => {
+	const [beforeId] = event.id.split(":", 2);
+	const index = ctx.panels.findIndex((panel) => panel.id === beforeId);
+	const panel = ctx.panels[index];
+	if (panel?.collapsible !== true) return {};
+	const collapsedSize = panel.collapsedSize ?? 0;
+	const current = ctx.size[index] ?? 0;
+	const pivots = pivotOf(ctx.panels, index);
+	if (fuzzyEqual(current, collapsedSize)) {
+		const minSize = panel.minSize ?? 0;
+		const remembered = ctx.beforeCollapse[panel.id];
+		const base = remembered !== void 0 && remembered >= minSize ? remembered : minSize;
+		const delta = index === ctx.panels.length - 1 ? current - base : base - current;
+		const next = resizeByDelta(ctx.panels, delta, ctx.size, pivots, ctx.size, "keyboard");
+		return fuzzySizeEqual(ctx.size, next) ? {} : { size: next };
+	}
+	const next = resizeByDelta(ctx.panels, index === ctx.panels.length - 1 ? current - collapsedSize : collapsedSize - current, ctx.size, pivots, ctx.size, "keyboard");
+	if (fuzzySizeEqual(ctx.size, next)) return {};
+	return {
+		size: next,
+		beforeCollapse: {
+			...ctx.beforeCollapse,
+			[panel.id]: current
+		}
+	};
+};
+const keyboardMove = (ctx, event) => {
+	const [beforeId, afterId] = event.id.split(":", 2);
+	const before = ctx.panels.findIndex((panel) => panel.id === beforeId);
+	const after = ctx.panels.findIndex((panel) => panel.id === afterId);
+	if (before < 0 || after < 0) return {};
+	const next = resizeByDelta(ctx.panels, event.delta, ctx.size, [before, after], ctx.size, "keyboard");
+	return fuzzySizeEqual(ctx.size, next) ? {} : { size: next };
+};
+const pointerMove = (ctx, event) => {
+	if (ctx.drag === null) return {};
+	const before = ctx.panels.findIndex((panel) => panel.id === ctx.drag?.beforeId);
+	const after = ctx.panels.findIndex((panel) => panel.id === ctx.drag?.afterId);
+	if (before < 0 || after < 0) return {};
+	const delta = event.percent - (ctx.drag?.startPercent ?? 0);
+	const next = resizeByDelta(ctx.panels, delta, ctx.drag?.startSizes ?? ctx.size, [before, after], ctx.size, "mouse-or-touch");
+	return fuzzySizeEqual(ctx.size, next) ? {} : { size: next };
+};
+const isHandleFocused = (_ctx, event) => event.type === "POINTER_UP" ? event.handleFocused : false;
+export { clearDrag, clearFocus, collapsePanel, expandPanel, isHandleFocused, keyboardMove, pointerMove, resetSize, resizePanel, setFocusedHandle, setPanels, setSize, startDrag, toggleCollapseOnEnter };
+
+//# sourceMappingURL=splitter.transitions.js.map

package/dist/steps/examples/basic.html

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Cart", "Shipping", "Payment", "Review"],
+ step: 1,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <div class="mb-3 flex items-center justify-between gap-2">
+  <span class="text-sm font-medium text-text">Checkout</span>
+  <span
+   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+ </div>
+
+ <ol class="row-list items-start gap-1" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 items-center not-last:flex-1"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span aria-hidden="true" class={["mx-3 h-1 flex-1 bg-border", { "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+
+ <div
+  class="mt-3 h-2 w-full overflow-hidden rounded-full bg-surface-sunken"
+  {...machine.getProgressProps()}
+ >
+  <div
+   class="h-full rounded-full bg-primary transition-all duration-fast ease-decelerate"
+   {...machine.getProgressFillProps()}></div>
+ </div>
+
+ <div class="mt-3 hidden" {...machine.getContentProps(machine.value)}>
+  <p
+   class="rounded-md border border-solid border-border bg-surface-raised p-3 text-sm text-text">{machine.getItemTitle(machine.value)}</p>
+ </div>
+
+ <div class="mt-3 flex items-center gap-2">
+  <button
+   class="secondary s-sm disabled:opacity-50"
+   {...machine.getPrevTriggerProps()}
+  >Back</button>
+  <button
+   class="s-sm disabled:opacity-50"
+   {...machine.getNextTriggerProps()}
+  >Next</button>
+ </div>
+</div>

package/dist/steps/examples/checkmarks.html

@@ -0,0 +1,32 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Build", "Test", "Rollout", "Verify"],
+ step: 2,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <div class="mb-3 flex items-center justify-between gap-2">
+  <span class="text-sm font-medium text-text">Deploy #4821</span>
+  <span
+   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+ </div>
+
+ <ol class="row-list items-start gap-1" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 items-center not-last:flex-1"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+</div>

package/dist/steps/examples/content.html

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 3,
+ titles: ["Image", "Rollout", "Health checks"],
+ step: 1,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <div class="mb-3 flex items-center justify-between gap-2">
+  <span class="text-sm font-medium text-text">Deploy #4821</span>
+  <span
+   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+ </div>
+
+ <ol class="row-list items-start gap-1" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 items-center not-last:flex-1"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+
+ <div
+  class="mt-3 rounded-md border border-solid border-border bg-surface-raised p-3 text-sm text-text"
+  {...machine.getContentProps(machine.value)}>{machine.getItemTitle(machine.value)}</div>
+
+ <div class="mt-3 flex items-center gap-2">
+  <button
+   class="secondary s-sm disabled:opacity-50"
+   {...machine.getPrevTriggerProps()}>Back</button>
+  <button
+   class="s-sm disabled:opacity-50"
+   {...machine.getNextTriggerProps()}>Next</button>
+ </div>
+</div>

package/dist/steps/examples/descriptions.html

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 3,
+ titles: ["Build", "Rollout", "Verify"],
+ step: 1,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <ol class="row-list items-start gap-1" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 items-center not-last:flex-1"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="flex flex-col"><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span><span class="text-xs text-text-muted" show={row === 0}>Image &amp; tags</span><span class="text-xs text-text-muted" show={row === 1}>Canary &amp; regions</span><span class="text-xs text-text-muted" show={row === 2}>Health &amp; rollback</span></span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+</div>

package/dist/steps/examples/icons.html

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Profile", "Settings", "Sync", "Complete"],
+ step: 1,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <ol class="row-list items-start gap-1" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 items-center not-last:flex-1"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span class="i-lucide-user text-sm" aria-hidden="true" show={row === 0}></span><span class="i-lucide-settings text-sm" aria-hidden="true" show={row === 1}></span><span class="i-lucide-refresh-cw text-sm" aria-hidden="true" show={row === 2}></span><span class="i-lucide-check text-sm" aria-hidden="true" show={row === 3}></span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+</div>

package/dist/steps/examples/lines.html

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Step One", "Step Two", "Step Three", "Step Four"],
+ step: 1,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <ol class="row-list items-start gap-4" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 items-center not-last:flex-1"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+</div>

package/dist/steps/examples/navigation.html

@@ -0,0 +1,41 @@
+<script lang="ts">
+import { steps } from "../steps.presentation.js";
+
+const machine = steps({
+ count: 4,
+ titles: ["Build", "Test", "Rollout", "Verify"],
+ step: 2,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+ <div class="mb-3 flex items-center justify-between gap-2">
+  <span class="text-sm font-medium text-text">Deploy #4821</span>
+  <span
+   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+ </div>
+
+ <ol class="row-list items-start gap-1" {...machine.getListProps()}>
+  <template for={machine.getItems()} as={row} key={row}>
+   <li class="relative flex min-w-0 items-center not-last:flex-1"
+    {...machine.getItemProps(row)}>
+    <button
+     class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
+     {...machine.getTriggerProps(row)}
+    ><span
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      {...machine.getIndicatorProps(row)}
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   </li>
+  </template>
+ </ol>
+
+ <div class="mt-3 flex items-center justify-center gap-2">
+  <button
+   class="secondary s-sm disabled:opacity-50"
+   {...machine.getPrevTriggerProps()}>Prev step</button>
+  <button
+   class="secondary s-sm disabled:opacity-50"
+   {...machine.getNextTriggerProps()}>Next step</button>
+ </div>
+</div>