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

package/dist/steps/steps.presentation.js

@@ -0,0 +1,248 @@
+import { hasNextStep, hasPrevStep, isCompleted, itemState, percent } from "./steps.state.js";
+import { steps as steps$1 } from "./steps.machine.js";
+import { ariaControls, ariaCurrent, ariaHidden, ariaLabelledBy, ariaOrientation, ariaOwns, defineComponent, optionRow, sliderThumb } from "@spinjs/runtime";
+// src/steps/steps.presentation.ts
+const parseTitles = (raw) => {
+	if (Array.isArray(raw)) return raw.filter((item) => typeof item === "string");
+	return [];
+};
+const indexCache = /* @__PURE__ */ new Map();
+const stepIndexes = (count) => {
+	const hit = indexCache.get(count);
+	if (hit !== void 0) return hit;
+	const made = Array.from({ length: count }, (_, index) => index);
+	indexCache.set(count, made);
+	return made;
+};
+const onTriggerKeydown = (scope, event) => {
+	if (event.defaultPrevented) return;
+	const order = stepIndexes(scope.context.count);
+	const at = order.indexOf(scope.context.step);
+	const move = (delta) => {
+		const next = order[(at + delta + order.length) % order.length];
+		if (next !== void 0) scope.send({
+			type: "STEP.SET",
+			value: next
+		});
+	};
+	switch (event.key) {
+		case "ArrowRight":
+		case "ArrowDown":
+			event.preventDefault();
+			move(1);
+			break;
+		case "ArrowLeft":
+		case "ArrowUp":
+			event.preventDefault();
+			move(-1);
+			break;
+		case "Home":
+			event.preventDefault();
+			if (order[0] !== void 0) scope.send({
+				type: "STEP.SET",
+				value: order[0]
+			});
+			break;
+		case "End": {
+			event.preventDefault();
+			const last = order[order.length - 1];
+			if (last !== void 0) scope.send({
+				type: "STEP.SET",
+				value: last
+			});
+			break;
+		}
+	}
+};
+const def = {
+	name: "steps",
+	machine: (args, authored) => steps$1(args, authored),
+	start: "idle",
+	parts: {
+		root: { attrs: () => ({}) },
+		list: { attrs: (scope) => {
+			const items = stepIndexes(scope.context.count);
+			return {
+				role: "tablist",
+				...ariaOwns(scope, { parts: items.map((index) => ({
+					part: "trigger",
+					slot: index
+				})) }),
+				...ariaOrientation(scope.context.orientation === "horizontal" || scope.context.orientation === "vertical" ? scope.context.orientation : void 0)
+			};
+		} },
+		nextTrigger: {
+			id: "next-trigger",
+			attrs: (scope) => ({
+				type: "button",
+				disabled: hasNextStep(scope.context) ? void 0 : true,
+				onClick: (event) => {
+					if (event.defaultPrevented) return;
+					scope.send({ type: "STEP.NEXT" });
+				}
+			})
+		},
+		prevTrigger: {
+			id: "prev-trigger",
+			attrs: (scope) => ({
+				type: "button",
+				disabled: hasPrevStep(scope.context) ? void 0 : true,
+				onClick: (event) => {
+					if (event.defaultPrevented) return;
+					scope.send({ type: "STEP.PREV" });
+				}
+			})
+		},
+		progress: { attrs: (scope) => {
+			const value = percent(scope.context);
+			return {
+				role: "progressbar",
+				...sliderThumb({
+					now: String(Math.round(value)),
+					min: "0",
+					max: "100",
+					text: `${Math.round(value)}% complete`
+				})
+			};
+		} },
+		progressFill: { attrs: (scope) => ({ style: { width: `${percent(scope.context).toFixed(3)}%` } }) }
+	},
+	slots: {
+		item: {
+			indexes: (context) => stepIndexes(context.count),
+			attrs: (scope) => {
+				const index = scope.slot;
+				const state = itemState(scope.context, index);
+				return {
+					...ariaCurrent(state.current ? "step" : void 0),
+					"data-state": state.completed ? "complete" : state.current ? "current" : "upcoming"
+				};
+			}
+		},
+		trigger: {
+			indexes: (context) => stepIndexes(context.count),
+			attrs: (scope) => {
+				const index = scope.slot;
+				const state = itemState(scope.context, index);
+				return {
+					id: scope.id("trigger", index),
+					role: "tab",
+					type: "button",
+					tabindex: scope.context.linear !== true || state.current ? "0" : "-1",
+					"data-state": state.completed ? "complete" : state.current ? "current" : "upcoming",
+					...optionRow({ selected: state.current ? "true" : "false" }),
+					...ariaControls(scope, {
+						part: "content",
+						slot: index
+					}),
+					onClick: (event) => {
+						if (event.defaultPrevented) return;
+						if (scope.context.linear === true) return;
+						scope.send({
+							type: "STEP.SET",
+							value: index
+						});
+					},
+					onKeydown: (event) => onTriggerKeydown(scope, event)
+				};
+			}
+		},
+		content: {
+			indexes: (context) => stepIndexes(context.count),
+			attrs: (scope) => {
+				const index = scope.slot;
+				const state = itemState(scope.context, index);
+				return {
+					id: scope.id("content", index),
+					role: "tabpanel",
+					tabindex: "0",
+					hidden: state.current ? void 0 : true,
+					...ariaLabelledBy(scope, {
+						part: "trigger",
+						slot: index
+					})
+				};
+			}
+		},
+		indicator: {
+			indexes: (context) => stepIndexes(context.count),
+			attrs: (scope) => {
+				const index = scope.slot;
+				const state = itemState(scope.context, index);
+				return {
+					...ariaHidden(true),
+					"data-state": state.completed ? "complete" : state.current ? "current" : "upcoming"
+				};
+			}
+		},
+		separator: {
+			indexes: (context) => stepIndexes(context.count),
+			attrs: (scope) => {
+				const index = scope.slot;
+				const state = itemState(scope.context, index);
+				return { "data-state": state.completed ? "complete" : state.current ? "current" : "upcoming" };
+			}
+		}
+	},
+	commands: {
+		goToNextStep: { event: () => ({ type: "STEP.NEXT" }) },
+		goToPrevStep: { event: () => ({ type: "STEP.PREV" }) },
+		resetStep: { event: () => ({ type: "STEP.RESET" }) },
+		setStep: { event: ([value]) => ({
+			type: "STEP.SET",
+			value: Math.trunc(value)
+		}) }
+	},
+	readers: {
+		value: { read: (context) => context.step },
+		count: { read: (context) => context.count },
+		percent: { read: (context) => percent(context) },
+		hasNextStep: { read: (context) => hasNextStep(context) },
+		hasPrevStep: { read: (context) => hasPrevStep(context) },
+		completed: { read: (context) => isCompleted(context) }
+	},
+	methods: {
+		getItems: { call: (context) => stepIndexes(context.count) },
+		getItemTitle: { call: (context, _state, [index]) => {
+			const rows = parseTitles(context.titles);
+			const i = Math.trunc(index);
+			return rows[i] ?? `Step ${i + 1}`;
+		} },
+		getItemState: { call: (context, _state, [index]) => {
+			return itemState(context, Math.trunc(index));
+		} }
+	},
+	events: {
+		"step-change": {
+			prop: "onStepChange",
+			watch: (context) => [context.step],
+			detail: (watched) => ({ step: watched[0] })
+		},
+		"step-complete": {
+			prop: "onStepComplete",
+			watch: (context) => [isCompleted(context), context.step],
+			detail: (watched) => ({ step: watched[1] })
+		},
+		"step-invalid": {
+			prop: "onStepInvalid",
+			watch: (context) => [context.invalidAttempts],
+			detail: (_watched, _event, _props, context) => {
+				if (context === void 0) return {
+					step: 0,
+					action: "next",
+					targetStep: 0
+				};
+				const ctx = context;
+				return {
+					step: ctx.step,
+					action: ctx.lastInvalid?.action ?? "next",
+					targetStep: ctx.lastInvalid?.targetStep ?? 0
+				};
+			}
+		}
+	}
+};
+const steps = defineComponent(def);
+export { def, steps };
+
+//# sourceMappingURL=steps.presentation.js.map

package/dist/steps/steps.state.d.ts

@@ -0,0 +1,39 @@
+export type StepsState = "idle";
+export interface StepsContext {
+  step: number;
+  count: number;
+  invalidAttempts: number;
+  lastInvalid: {
+    readonly action: "next" | "set";
+    readonly targetStep: number;
+  } | null;
+  titles: unknown;
+  orientation: string | undefined;
+  linear: boolean | undefined;
+  isStepValid: ((index: number) => boolean) | undefined;
+  isStepSkippable: ((index: number) => boolean) | undefined;
+}
+export interface StepsArgs {
+  count?: number;
+  step?: string | number;
+  defaultCount?: number;
+  titles?: unknown;
+  orientation?: string;
+  linear?: boolean;
+  isStepValid?: (index: number) => boolean;
+  isStepSkippable?: (index: number) => boolean;
+}
+export declare function hasNextStep(ctx: StepsContext): boolean;
+export declare function hasPrevStep(ctx: StepsContext): boolean;
+export declare function isCompleted(ctx: StepsContext): boolean;
+export declare function percent(ctx: StepsContext): number;
+export interface StepsItemState {
+  readonly current: boolean;
+  readonly completed: boolean;
+  readonly incomplete: boolean;
+  readonly first: boolean;
+  readonly last: boolean;
+}
+export declare function itemState(ctx: StepsContext, index: number): StepsItemState;
+export declare function initial(args: StepsArgs | undefined, authored: (name: string) => boolean): StepsContext;
+//# sourceMappingURL=steps.state.d.ts.map

package/dist/steps/steps.state.js

@@ -0,0 +1,47 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/steps/steps.state.ts
+const asCount = (raw, fallback) => {
+	const n = typeof raw === "number" ? raw : typeof raw === "string" && raw.trim() !== "" ? Number(raw.trim()) : NaN;
+	return Number.isFinite(n) ? Math.max(0, Math.trunc(n)) : fallback;
+};
+function hasNextStep(ctx) {
+	return ctx.step < ctx.count;
+}
+function hasPrevStep(ctx) {
+	return ctx.step > 0;
+}
+function isCompleted(ctx) {
+	return ctx.step === ctx.count;
+}
+function percent(ctx) {
+	return ctx.count <= 0 ? 0 : ctx.step / ctx.count * 100;
+}
+function itemState(ctx, index) {
+	return {
+		current: index === ctx.step,
+		completed: index < ctx.step,
+		incomplete: index > ctx.step,
+		first: index === 0,
+		last: index === ctx.count - 1
+	};
+}
+function initial(args = {}, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const count = Math.max(1, Math.floor(asCount(args.count, 1)));
+	const seed = args.step;
+	const seeded = written("step") ? typeof seed === "number" && Number.isFinite(seed) ? Math.trunc(seed) : 0 : 0;
+	return {
+		count,
+		step: Math.min(count, Math.max(0, seeded)),
+		invalidAttempts: 0,
+		lastInvalid: null,
+		titles: args.titles,
+		orientation: args.orientation,
+		linear: args.linear,
+		isStepValid: args.isStepValid,
+		isStepSkippable: args.isStepSkippable
+	};
+}
+export { hasNextStep, hasPrevStep, initial, isCompleted, itemState, percent };
+
+//# sourceMappingURL=steps.state.js.map

package/dist/steps/steps.transitions.d.ts

@@ -0,0 +1,15 @@
+import { StepsContext } from "./steps.state.js";
+import { StepsEvents } from "./steps.events.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type StepsAssign<K extends keyof StepsEvents = keyof StepsEvents> = AssignFor<StepsContext, StepsEvents, K>;
+export declare const setCount: StepsAssign<"SET_COUNT">;
+export declare const canSetStep: GuardFor<StepsContext, StepsEvents, "STEP.SET">;
+export declare const applySetStep: StepsAssign<"STEP.SET">;
+export declare const recordInvalidSet: StepsAssign<"STEP.SET">;
+export declare const canNextStep: GuardFor<StepsContext, StepsEvents, "STEP.NEXT">;
+export declare const applyNextStep: StepsAssign<"STEP.NEXT">;
+export declare const recordInvalidNext: StepsAssign<"STEP.NEXT">;
+export declare const prevStep: StepsAssign<"STEP.PREV">;
+export declare const resetStep: StepsAssign<"STEP.RESET">;
+export {};
+//# sourceMappingURL=steps.transitions.d.ts.map

package/dist/steps/steps.transitions.js

@@ -0,0 +1,39 @@
+// src/steps/steps.transitions.ts
+const setCount = (_ctx, event) => ({ count: Math.max(1, Math.floor(event.count)) });
+const canSetStep = (ctx, event) => {
+	const current = ctx.step;
+	if (event.value <= current) return true;
+	if (ctx.isStepSkippable?.(current) === true) return true;
+	const valid = ctx.isStepValid;
+	return valid === void 0 ? true : valid(current);
+};
+const applySetStep = (ctx, event) => {
+	const clamped = Math.min(ctx.count, Math.max(0, event.value));
+	return clamped === ctx.step ? {} : { step: clamped };
+};
+const recordInvalidSet = (ctx, event) => ({
+	invalidAttempts: ctx.invalidAttempts + 1,
+	lastInvalid: {
+		action: "set",
+		targetStep: event.value
+	}
+});
+const canNextStep = (ctx, _event) => {
+	const current = ctx.step;
+	if (ctx.isStepSkippable?.(current) === true) return true;
+	const valid = ctx.isStepValid;
+	return valid === void 0 ? true : valid(current);
+};
+const applyNextStep = (ctx) => ({ step: Math.min(ctx.step + 1, ctx.count) });
+const recordInvalidNext = (ctx) => ({
+	invalidAttempts: ctx.invalidAttempts + 1,
+	lastInvalid: {
+		action: "next",
+		targetStep: Math.min(ctx.step + 1, ctx.count)
+	}
+});
+const prevStep = (ctx) => ({ step: Math.max(ctx.step - 1, 0) });
+const resetStep = () => ({ step: 0 });
+export { applyNextStep, applySetStep, canNextStep, canSetStep, prevStep, recordInvalidNext, recordInvalidSet, resetStep, setCount };
+
+//# sourceMappingURL=steps.transitions.js.map

package/dist/tabs/examples/basic.html

@@ -0,0 +1,41 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "tab1",
+   label: "Overview",
+   content: "Fleet health at a glance.",
+  },
+  {
+   value: "tab2",
+   label: "Deployments",
+   content: "Deploy #4821 is live on checkout-api.",
+  },
+  {
+   value: "tab3",
+   label: "Settings",
+   content: "Workspace preferences and API tokens.",
+  },
+ ],
+ defaultValue: "tab1",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md flex-col items-center"
+ {...machine.getRootProps()}>
+ <div class="mb-4 flex gap-1 rounded-lg bg-surface-raised p-1"
+  {...machine.getListProps()}>
+  <template for={machine.items} as={row} key={row.value}>
+   <button
+    class="bare rounded-md px-4 py-2 text-sm font-medium transition-all aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=true]:shadow-sm aria-[selected=false]:text-text-muted"
+    {...machine.getTriggerProps(row)}
+   >{row.label}</button>
+  </template>
+ </div>
+ <template for={machine.items} as={row} key={row.value}>
+  <p class=" text-center text-sm text-text-muted"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>

package/dist/tabs/examples/dashboard.html

@@ -0,0 +1,116 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  { value: "overview", label: "Overview", content: "Fleet health at a glance." },
+  { value: "analytics", label: "Analytics", content: "Traffic and conversion." },
+  { value: "reports", label: "Reports", content: "Scheduled exports." },
+  { value: "team", label: "Team", content: "Members and roles." },
+ ],
+ defaultValue: "overview",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-xl flex-col gap-6" {...machine.getRootProps()}>
+ <div class="flex gap-2" {...machine.getListProps()}>
+  <template for={machine.items} as={row} key={row.value}>
+   <button
+    class="bare rounded-md px-4 py-2 text-md font-medium transition-colors aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=true]:shadow-sm aria-[selected=false]:text-text-muted"
+    {...machine.getTriggerProps(row)}
+   >{row.label}</button>
+  </template>
+ </div>
+ <template for={machine.items} as={row} key={row.value}>
+  <div class="grid gap-6" {...machine.getContentProps(row)}>
+   <div class="grid gap-4" show={row.value === "overview"}>
+    <div class="grid grid-cols-3 gap-4">
+     <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
+      <span class="text-sm text-text-muted">Active users</span>
+      <p class="text-2xl font-semibold text-text">12,480</p>
+     </div>
+     <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
+      <span class="text-sm text-text-muted">Conversion</span>
+      <p class="text-2xl font-semibold text-text">3.2%</p>
+     </div>
+     <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
+      <span class="text-sm text-text-muted">Revenue</span>
+      <p class="text-2xl font-semibold text-text">$48.2k</p>
+     </div>
+    </div>
+    <div class="rounded-md border border-solid border-border bg-surface-raised p-6">
+     <span class="text-md font-medium text-text">Traffic over 7 days</span>
+     <div class="mt-4 flex items-end gap-2" style="height: 8rem;">
+      <div class="w-full rounded-md bg-primary" style="height: 60%;"></div>
+      <div class="w-full rounded-md bg-primary" style="height: 75%;"></div>
+      <div class="w-full rounded-md bg-primary" style="height: 50%;"></div>
+      <div class="w-full rounded-md bg-primary" style="height: 90%;"></div>
+      <div class="w-full rounded-md bg-primary" style="height: 65%;"></div>
+      <div class="w-full rounded-md bg-primary" style="height: 80%;"></div>
+      <div class="w-full rounded-md bg-primary" style="height: 70%;"></div>
+     </div>
+    </div>
+   </div>
+   <div class="grid gap-4" show={row.value === "analytics"}>
+    <div class="rounded-md border border-solid border-border bg-surface-raised p-6">
+     <span class="text-md font-medium text-text">Top pages</span>
+     <ul class="mt-3 grid gap-2">
+      <li class="flex items-center justify-between text-sm text-text"><span>/pricing</span><span class="text-text-muted">4,210</span></li>
+      <li class="flex items-center justify-between text-sm text-text"><span>/docs</span><span class="text-text-muted">3,880</span></li>
+      <li class="flex items-center justify-between text-sm text-text"><span>/blog</span><span class="text-text-muted">2,104</span></li>
+     </ul>
+    </div>
+    <div class="rounded-md border border-solid border-border bg-surface-raised p-6">
+     <span class="text-md font-medium text-text">Devices</span>
+     <div class="mt-3 grid gap-2">
+      <div class="flex items-center justify-between text-sm text-text"><span>Desktop</span><span class="text-text-muted">62%</span></div>
+      <div class="flex items-center justify-between text-sm text-text"><span>Mobile</span><span class="text-text-muted">31%</span></div>
+      <div class="flex items-center justify-between text-sm text-text"><span>Tablet</span><span class="text-text-muted">7%</span></div>
+     </div>
+    </div>
+   </div>
+   <div class="grid gap-4" show={row.value === "reports"}>
+    <div class="rounded-md border border-solid border-border bg-surface-raised p-6">
+     <span class="text-md font-medium text-text">Scheduled reports</span>
+     <ul class="mt-3 grid gap-3">
+      <li class="flex items-center justify-between">
+       <div class="grid gap-1">
+        <span class="text-sm font-medium text-text">Weekly revenue</span>
+        <span class="text-xs text-text-muted">Every Monday, 09:00</span>
+       </div>
+       <button class="rounded-md border border-solid border-border px-3 py-1 text-sm font-medium text-text">Edit</button>
+      </li>
+      <li class="flex items-center justify-between">
+       <div class="grid gap-1">
+        <span class="text-sm font-medium text-text">Monthly active users</span>
+        <span class="text-xs text-text-muted">First of month</span>
+       </div>
+       <button class="rounded-md border border-solid border-border px-3 py-1 text-sm font-medium text-text">Edit</button>
+      </li>
+     </ul>
+    </div>
+   </div>
+   <div class="grid gap-4" show={row.value === "team"}>
+    <div class="rounded-md border border-solid border-border bg-surface-raised p-6">
+     <span class="text-md font-medium text-text">Members</span>
+     <ul class="mt-3 grid gap-3">
+      <li class="flex items-center gap-3">
+       <span class="grid h-8 w-8 place-items-center rounded-full bg-selected text-sm font-semibold text-on-selected">AL</span>
+       <div class="grid gap-0">
+        <span class="text-sm font-medium text-text">Ada Lovelace</span>
+        <span class="text-xs text-text-muted">Owner</span>
+       </div>
+      </li>
+      <li class="flex items-center gap-3">
+       <span class="grid h-8 w-8 place-items-center rounded-full bg-surface-sunken text-sm font-semibold text-text">TG</span>
+       <div class="grid gap-0">
+        <span class="text-sm font-medium text-text">Tomas G.</span>
+        <span class="text-xs text-text-muted">Editor</span>
+       </div>
+      </li>
+     </ul>
+    </div>
+   </div>
+  </div>
+ </template>
+</div>

package/dist/tabs/examples/ghost.html

@@ -0,0 +1,28 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  { value: "tab1", label: "Files", content: "The checkout-api release bundle." },
+  { value: "tab2", label: "History", content: "Every deploy, rollback, and flag flip." },
+  { value: "tab3", label: "Security", content: "API tokens, members, and audit log." },
+ ],
+ defaultValue: "tab1",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md flex-col items-center"
+ {...machine.getRootProps()}>
+ <div class="mb-4 flex gap-1" {...machine.getListProps()}>
+  <template for={machine.items} as={row} key={row.value}>
+   <button
+    class="bare rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-surface hover:text-text aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=false]:text-text-muted"
+    {...machine.getTriggerProps(row)}
+   >{row.label}</button>
+  </template>
+ </div>
+ <template for={machine.items} as={row} key={row.value}>
+  <p class=" text-center text-sm text-text-muted"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>

package/dist/tabs/examples/icon-above.html

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "overview",
+   label: "Overview",
+   content: "Fleet health at a glance.",
+  },
+  {
+   value: "projects",
+   label: "Projects",
+   content: "checkout-api and its preview deploys.",
+  },
+  {
+   value: "packages",
+   label: "Packages",
+   content: "Canary channel and pinned versions.",
+  },
+ ],
+ defaultValue: "overview",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md flex-col items-center"
+ {...machine.getRootProps()}>
+ <div
+  class="relative mb-4 flex w-fit gap-6 border-b border-solid border-border"
+  {...machine.getListProps()}>
+  <template for={machine.items} as={row} key={row.value}>
+   <button
+    class="bare flex flex-col items-center gap-2 border-b-2 border-solid px-3 py-2 text-xs font-medium transition-colors aria-[selected=true]:border-primary aria-[selected=true]:text-text aria-[selected=false]:border-transparent aria-[selected=false]:text-text-muted"
+    {...machine.getTriggerProps(row)}
+   >
+    <span class="i-lucide-house text-md" aria-hidden="true"
+     show={row.value === "overview"}></span>
+    <span class="i-lucide-folder-open text-md" aria-hidden="true"
+     show={row.value === "projects"}></span>
+    <span class="i-lucide-package text-md" aria-hidden="true"
+     show={row.value === "packages"}></span>
+    <span>{row.label}</span>
+   </button>
+  </template>
+ </div>
+ <template for={machine.items} as={row} key={row.value}>
+  <p class=" text-center text-sm text-text-muted"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>

package/dist/tabs/examples/icon-only.html

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "tab1",
+   label: "Charts",
+   content: "Latency and error budgets for Deploy #4821.",
+  },
+  { value: "tab2", label: "Team", content: "Priya, Tomas, and the on-call rotation." },
+  {
+   value: "tab3",
+   label: "Settings",
+   content: "Workspace preferences and API tokens.",
+  },
+ ],
+ defaultValue: "tab1",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md flex-col items-center"
+ {...machine.getRootProps()}>
+ <div class="mb-4 flex w-fit gap-1 rounded-lg bg-surface-raised p-1"
+  {...machine.getListProps()}>
+  <template for={machine.items} as={row} key={row.value}>
+   <button
+    class="bare grid h-10 w-10 place-items-center rounded-md transition-all aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=true]:shadow-sm aria-[selected=false]:text-text-muted"
+    {...machine.getTriggerProps(row)}
+   ><span class="i-lucide-chart-bar text-sm" aria-hidden="true" show={row.value === "tab1"}></span><span class="i-lucide-users text-sm" aria-hidden="true" show={row.value === "tab2"}></span><span class="i-lucide-settings text-sm" aria-hidden="true" show={row.value === "tab3"}></span><span class="sr-only">{row.label}</span></button>
+  </template>
+ </div>
+ <template for={machine.items} as={row} key={row.value}>
+  <p class=" text-center text-sm text-text-muted"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>