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

package/dist/image-cropper/image-cropper.state.js

@@ -0,0 +1,134 @@
+import { centerRect, clampPoint, computeDefaultCropDimensions, computeResizeCrop, getMaxBounds, isVisibleRect, resolveCropAspectRatio } from "./crop-geometry.js";
+import { defaultTwin, isRecord } from "@spinjs/runtime";
+// src/image-cropper/image-cropper.state.ts
+const asCount = (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;
+};
+function flipOf(raw) {
+	if (!isRecord(raw)) return null;
+	const horizontal = raw["horizontal"];
+	const vertical = raw["vertical"];
+	if (typeof horizontal !== "boolean" && typeof vertical !== "boolean") return null;
+	return {
+		horizontal: horizontal === true,
+		vertical: vertical === true
+	};
+}
+const zoomOf = (raw) => {
+	const zoom = asCount(raw);
+	return zoom === null ? null : Math.min(8, Math.max(.1, zoom));
+};
+const rotationOf = (raw) => {
+	const rotation = asCount(raw);
+	return rotation === null ? null : Math.min(360, Math.max(0, rotation));
+};
+function initial(args = {}, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const flip = flipOf(args.flip) ?? {
+		horizontal: false,
+		vertical: false
+	};
+	return {
+		crop: {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		},
+		viewportRect: {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		},
+		naturalSize: {
+			width: 0,
+			height: 0
+		},
+		offset: {
+			x: 0,
+			y: 0
+		},
+		zoom: written("zoom") ? zoomOf(args.zoom) ?? 1 : 1,
+		rotation: written("rotation") ? rotationOf(args.rotation) ?? 0 : 0,
+		flipHorizontal: written("flip") && flip.horizontal,
+		flipVertical: written("flip") && flip.vertical,
+		pointerStart: null,
+		cropStart: null,
+		offsetStart: null,
+		handlePosition: null,
+		cropShape: written("cropShape") && args.cropShape === "circle" ? "circle" : "rect",
+		aspectRatio: written("aspectRatio") ? asCount(args.aspectRatio) : null,
+		minWidth: written("minWidth") ? asCount(args.minWidth) : null,
+		minHeight: written("minHeight") ? asCount(args.minHeight) : null,
+		maxWidth: written("maxWidth") ? asCount(args.maxWidth) : null,
+		maxHeight: written("maxHeight") ? asCount(args.maxHeight) : null,
+		fixedCropArea: written("fixedCropArea") ? args.fixedCropArea === true : false,
+		disabled: args.disabled === true,
+		dir: args.dir ?? "ltr",
+		zoomStep: asCount(args.zoomStep) ?? .1,
+		src: args.src ?? "",
+		alt: args.alt ?? ""
+	};
+}
+const isGesturing = (phase) => phase === "dragging" || phase === "panning";
+const roundedCrop = (ctx) => ({
+	x: Math.round(ctx.crop.x),
+	y: Math.round(ctx.crop.y),
+	width: Math.round(ctx.crop.width),
+	height: Math.round(ctx.crop.height)
+});
+function limitsOf(ctx, viewportRect) {
+	return {
+		minSize: {
+			width: ctx.minWidth ?? 0,
+			height: ctx.minHeight ?? 0
+		},
+		maxSize: {
+			width: ctx.maxWidth !== null && ctx.maxWidth > 0 ? ctx.maxWidth : viewportRect.width,
+			height: ctx.maxHeight !== null && ctx.maxHeight > 0 ? ctx.maxHeight : viewportRect.height
+		}
+	};
+}
+const ratioOf = (ctx) => resolveCropAspectRatio(ctx.cropShape, ctx.aspectRatio);
+const defaultCropPatch = (ctx, viewportRect) => {
+	if (!isVisibleRect(viewportRect)) return {};
+	const aspectRatio = ratioOf(ctx);
+	const { minSize, maxSize } = limitsOf(ctx, viewportRect);
+	const defaultSize = computeDefaultCropDimensions(viewportRect, aspectRatio, ctx.fixedCropArea);
+	const clamped = computeResizeCrop({
+		cropStart: {
+			x: 0,
+			y: 0,
+			width: defaultSize.width,
+			height: defaultSize.height
+		},
+		handlePosition: "se",
+		delta: {
+			x: 0,
+			y: 0
+		},
+		viewportRect,
+		minSize,
+		maxSize,
+		aspectRatio
+	});
+	const at = centerRect({
+		width: clamped.width,
+		height: clamped.height
+	}, viewportRect);
+	return { crop: {
+		x: at.x,
+		y: at.y,
+		width: clamped.width,
+		height: clamped.height
+	} };
+};
+export { asCount, clampPoint, defaultCropPatch, flipOf, getMaxBounds, initial, isGesturing, limitsOf, ratioOf, rotationOf, roundedCrop, zoomOf };
+
+//# sourceMappingURL=image-cropper.state.js.map

package/dist/image-cropper/image-cropper.transitions.d.ts

@@ -0,0 +1,13 @@
+import { ImageCropperEvents } from "./image-cropper.events.js";
+import { ImageCropperContext } from "./image-cropper.state.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type ICtx = ImageCropperContext;
+type IEv = ImageCropperEvents;
+export type ImageCropperAssign<K extends keyof IEv = keyof IEv> = AssignFor<ICtx, ImageCropperEvents, K>;
+export type ImageCropperGuard = GuardFor<ICtx, IEv>;
+export declare const setPointerStart: ImageCropperAssign<"POINTER_DOWN" | "PAN_POINTER_DOWN">;
+export declare const clearPointerStart: () => Partial<ICtx>;
+export declare const clearOffsetStart: () => Partial<ICtx>;
+export declare const hasViewport: ImageCropperGuard;
+export type { ImageCropperContext, ImageCropperEvents };
+//# sourceMappingURL=image-cropper.transitions.d.ts.map

package/dist/image-cropper/image-cropper.transitions.js

@@ -0,0 +1,11 @@
+import { isVisibleRect } from "./crop-geometry.js";
+// src/image-cropper/image-cropper.transitions.ts
+const setPointerStart = (ctx, event) => {
+	return { pointerStart: { ...event.point } };
+};
+const clearPointerStart = () => ({ pointerStart: null });
+const clearOffsetStart = () => ({ offsetStart: null });
+const hasViewport = (ctx) => isVisibleRect(ctx.viewportRect);
+export { clearOffsetStart, clearPointerStart, hasViewport, setPointerStart };
+
+//# sourceMappingURL=image-cropper.transitions.js.map

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+import { angleSlider } from "./angle-slider/angle-slider.presentation.js";
+import { asyncList } from "./async-list/async-list.presentation.js";
+import { avatar } from "./avatar/avatar.presentation.js";
+import { colorPicker } from "./color-picker/color-picker.presentation.js";
+import { combobox } from "./combobox/combobox.presentation.js";
+import { dateInput } from "./date-input/date-input.presentation.js";
+import { datePicker } from "./date-picker/date-picker.presentation.js";
+import { editable } from "./editable/editable.presentation.js";
+import { fileUpload } from "./file-upload/file-upload.presentation.js";
+import { floatingPanel } from "./floating-panel/floating-panel.presentation.js";
+import { hoverCard, hoverCardManifest } from "./hover-card/hover-card.controller-def.js";
+import { imageCropper } from "./image-cropper/image-cropper.presentation.js";
+import { modePicker } from "./mode-picker/mode-picker.presentation.js";
+import { themePicker } from "./theme-picker/theme-picker.presentation.js";
+import { listbox } from "./listbox/listbox.presentation.js";
+import { signaturePad } from "./signature-pad/signature-pad.presentation.js";
+import { ratingGroup } from "./rating-group/rating-group.presentation.js";
+import { slider } from "./slider/slider.presentation.js";
+import { splitter } from "./splitter/splitter.presentation.js";
+import { steps } from "./steps/steps.presentation.js";
+import { pagination } from "./pagination/pagination.presentation.js";
+import { toggleGroup } from "./toggle-group/toggle-group.presentation.js";
+import { tour } from "./tour/tour.presentation.js";
+import { navigationMenu } from "./navigation-menu/navigation-menu.presentation.js";
+import { menu } from "./menu/menu.presentation.js";
+import { numberInput } from "./number-input/number-input.presentation.js";
+import { pinInput } from "./pin-input/pin-input.presentation.js";
+import { PopoverApi, attachPopover, popover, popoverManifest } from "./popover/popover.controller-def.js";
+import { select } from "./select/select.presentation.js";
+import { tags } from "./tags-input/tags.presentation.js";
+import { timer } from "./timer/timer.presentation.js";
+import { tabs } from "./tabs/tabs.presentation.js";
+import { toast } from "./toast/toast.presentation.js";
+import { tooltip, tooltipManifest } from "./tooltip/tooltip.controller-def.js";
+import { treeView } from "./tree-view/tree-view.presentation.js";
+/** A purpose group for the machine rail: the shape every gallery reuses. */
+export interface ComponentCategory {
+  readonly id: string;
+  readonly label: string;
+  readonly members: readonly string[];
+}
+/**
+ * The purpose groups for the machines, the same shape as the primitives'
+ * CATEGORIES: a reader looks for the thing it does, not its name.
+ */
+export declare const COMPONENT_GROUPS: readonly ComponentCategory[];
+/** A purpose group filing both tiers side by side: primitives beside the
+ * machines that serve the same purpose, in the order a reader arrives in.
+ * Anything the taxonomy does not name lands in "Other" rather than
+ * vanishing: a rail that drops a component it was given is a rail lying
+ * about the library. */
+export declare const UNIFIED_COMPONENT_GROUPS: readonly ComponentCategory[];
+/**
+/**
+* One glyph per machine, beside the groups that list them. Controllers
+* (tooltip, popover, hover-card) share the mapping — the rail looks
+* up by machine id, not by tier.
+*/
+export declare const COMPONENT_ICONS: Readonly<Record<string, string>>;
+/**
+ * Controllers: platform-backed glue, no machine. Everything else on the
+ * rail runs a statechart and needs the runtime.
+ */
+export declare const CONTROLLERS: readonly string[];
+export { type PopoverApi, angleSlider, asyncList, attachPopover, avatar, colorPicker, combobox, dateInput, datePicker, editable, fileUpload, floatingPanel, hoverCard, hoverCardManifest, imageCropper, listbox, menu, modePicker, navigationMenu, numberInput, pagination, pinInput, popover, popoverManifest, ratingGroup, select, signaturePad, slider, splitter, steps, tabs, tags, themePicker, timer, toast, toggleGroup, tooltip, tooltipManifest, tour, treeView };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,279 @@
+import { angleSlider } from "./angle-slider/angle-slider.presentation.js";
+import { asyncList } from "./async-list/async-list.presentation.js";
+import { avatar } from "./avatar/avatar.presentation.js";
+import { colorPicker } from "./color-picker/color-picker.presentation.js";
+import { combobox } from "./combobox/combobox.presentation.js";
+import { dateInput } from "./date-input/date-input.presentation.js";
+import { datePicker } from "./date-picker/date-picker.presentation.js";
+import { editable } from "./editable/editable.presentation.js";
+import { fileUpload } from "./file-upload/file-upload.presentation.js";
+import { floatingPanel } from "./floating-panel/floating-panel.presentation.js";
+import { hoverCard, hoverCardManifest } from "./hover-card/hover-card.controller-def.js";
+import { imageCropper } from "./image-cropper/image-cropper.presentation.js";
+import { modePicker } from "./mode-picker/mode-picker.presentation.js";
+import { themePicker } from "./theme-picker/theme-picker.presentation.js";
+import { listbox } from "./listbox/listbox.presentation.js";
+import { signaturePad } from "./signature-pad/signature-pad.presentation.js";
+import { ratingGroup } from "./rating-group/rating-group.presentation.js";
+import { slider } from "./slider/slider.presentation.js";
+import { splitter } from "./splitter/splitter.presentation.js";
+import { steps } from "./steps/steps.presentation.js";
+import { pagination } from "./pagination/pagination.presentation.js";
+import { toggleGroup } from "./toggle-group/toggle-group.presentation.js";
+import { tour } from "./tour/tour.presentation.js";
+import { navigationMenu } from "./navigation-menu/navigation-menu.presentation.js";
+import { menu } from "./menu/menu.presentation.js";
+import { numberInput } from "./number-input/number-input.presentation.js";
+import { pinInput } from "./pin-input/pin-input.presentation.js";
+import { attachPopover, popover, popoverManifest } from "./popover/popover.controller-def.js";
+import { select } from "./select/select.presentation.js";
+import { tags } from "./tags-input/tags.presentation.js";
+import { timer } from "./timer/timer.presentation.js";
+import { tabs } from "./tabs/tabs.presentation.js";
+import { toast } from "./toast/toast.presentation.js";
+import { tooltip, tooltipManifest } from "./tooltip/tooltip.controller-def.js";
+import { treeView } from "./tree-view/tree-view.presentation.js";
+// src/index.ts
+/**
+* The purpose groups for the machines, the same shape as the primitives'
+* CATEGORIES: a reader looks for the thing it does, not its name.
+*/
+const COMPONENT_GROUPS = [
+	{
+		id: "inputs",
+		label: "Inputs",
+		members: [
+			"angle-slider",
+			"color-picker",
+			"date-input",
+			"date-picker",
+			"editable",
+			"file-upload",
+			"number-input",
+			"pin-input",
+			"rating-group",
+			"slider",
+			"tags-input",
+			"toggle-group"
+		]
+	},
+	{
+		id: "selectors",
+		label: "Selection",
+		members: [
+			"cascade-select",
+			"combobox",
+			"listbox",
+			"menu",
+			"navigation-menu",
+			"select",
+			"tree-view"
+		]
+	},
+	{
+		id: "navigation",
+		label: "Navigation",
+		members: ["mode-picker", "theme-picker"]
+	},
+	{
+		id: "display",
+		label: "Display",
+		members: [
+			"async-list",
+			"avatar",
+			"carousel",
+			"pagination",
+			"steps",
+			"tabs",
+			"timer",
+			"tour"
+		]
+	},
+	{
+		id: "overlays",
+		label: "Overlays",
+		members: [
+			"floating-panel",
+			"hover-card",
+			"popover",
+			"toast",
+			"tooltip"
+		]
+	},
+	{
+		id: "layout",
+		label: "Layout",
+		members: ["splitter"]
+	},
+	{
+		id: "media",
+		label: "Media",
+		members: ["image-cropper", "signature-pad"]
+	}
+];
+/** A purpose group filing both tiers side by side: primitives beside the
+* machines that serve the same purpose, in the order a reader arrives in.
+* Anything the taxonomy does not name lands in "Other" rather than
+* vanishing: a rail that drops a component it was given is a rail lying
+* about the library. */
+const UNIFIED_COMPONENT_GROUPS = [
+	{
+		id: "actions-navigation",
+		label: "Actions & Navigation",
+		members: [
+			"button",
+			"breadcrumbs",
+			"join",
+			"kbd",
+			"component-mode-picker",
+			"component-theme-picker",
+			"component-navigation-menu",
+			"component-menu",
+			"component-pagination",
+			"component-steps",
+			"component-tabs"
+		]
+	},
+	{
+		id: "inputs",
+		label: "Inputs",
+		members: [
+			"checkbox",
+			"radio",
+			"switch",
+			"meter",
+			"label",
+			"field",
+			"component-angle-slider",
+			"component-color-picker",
+			"component-date-input",
+			"component-date-picker",
+			"component-editable",
+			"component-file-upload",
+			"component-number-input",
+			"component-pin-input",
+			"component-rating-group",
+			"component-slider",
+			"component-tags-input",
+			"component-toggle-group"
+		]
+	},
+	{
+		id: "selection",
+		label: "Selection",
+		members: [
+			"component-cascade-select",
+			"component-combobox",
+			"component-listbox",
+			"component-select",
+			"component-tree-view"
+		]
+	},
+	{
+		id: "overlays",
+		label: "Overlays",
+		members: [
+			"dialog",
+			"details",
+			"tooltip",
+			"component-floating-panel",
+			"component-hover-card",
+			"component-popover",
+			"component-toast",
+			"component-tooltip",
+			"component-tour"
+		]
+	},
+	{
+		id: "containers-layout",
+		label: "Containers & Layout",
+		members: [
+			"card",
+			"fieldset",
+			"hr",
+			"panel",
+			"component-splitter"
+		]
+	},
+	{
+		id: "display-media",
+		label: "Display & Media",
+		members: [
+			"table",
+			"stat",
+			"alert",
+			"badge",
+			"progress",
+			"skeleton",
+			"swatch",
+			"component-async-list",
+			"component-avatar",
+			"component-carousel",
+			"component-timer",
+			"component-image-cropper",
+			"component-signature-pad"
+		]
+	},
+	{
+		id: "typography-icons",
+		label: "Typography & Icons",
+		members: ["prose", "icon"]
+	}
+];
+/**
+/**
+* One glyph per machine, beside the groups that list them. Controllers
+* (tooltip, popover, hover-card) share the mapping — the rail looks
+* up by machine id, not by tier.
+*/
+const COMPONENT_ICONS = {
+	"angle-slider": "i-lucide-compass",
+	"async-list": "i-lucide-list-filter",
+	avatar: "i-lucide-circle-user",
+	carousel: "i-lucide-gallery-horizontal",
+	"cascade-select": "i-lucide-list-tree",
+	"color-picker": "i-lucide-palette",
+	combobox: "i-lucide-chevrons-up-down",
+	"date-input": "i-lucide-calendar-days",
+	"date-picker": "i-lucide-calendar",
+	editable: "i-lucide-pencil",
+	"file-upload": "i-lucide-upload",
+	"floating-panel": "i-lucide-panel-top",
+	"hover-card": "i-lucide-square-mouse-pointer",
+	"image-cropper": "i-lucide-crop",
+	listbox: "i-lucide-list",
+	menu: "i-lucide-menu",
+	"navigation-menu": "i-lucide-navigation",
+	"number-input": "i-lucide-hash",
+	"mode-picker": "i-lucide-sun-moon",
+	"theme-picker": "i-lucide-palette",
+	pagination: "i-lucide-chevrons-left-right",
+	"pin-input": "i-lucide-key-round",
+	popover: "i-lucide-message-circle",
+	"rating-group": "i-lucide-star",
+	select: "i-lucide-chevron-down",
+	"signature-pad": "i-lucide-pen-line",
+	slider: "i-lucide-sliders-horizontal",
+	splitter: "i-lucide-columns-2",
+	steps: "i-lucide-list-ordered",
+	tabs: "i-lucide-layout-list",
+	"tags-input": "i-lucide-tags",
+	timer: "i-lucide-timer",
+	toast: "i-lucide-bell",
+	"toggle-group": "i-lucide-toggle-left",
+	tooltip: "i-lucide-message-circle-off",
+	tour: "i-lucide-route",
+	"tree-view": "i-lucide-folder-tree"
+};
+/**
+* Controllers: platform-backed glue, no machine. Everything else on the
+* rail runs a statechart and needs the runtime.
+*/
+const CONTROLLERS = [
+	"tooltip",
+	"popover",
+	"hover-card"
+];
+export { COMPONENT_GROUPS, COMPONENT_ICONS, CONTROLLERS, UNIFIED_COMPONENT_GROUPS, angleSlider, asyncList, attachPopover, avatar, colorPicker, combobox, dateInput, datePicker, editable, fileUpload, floatingPanel, hoverCard, hoverCardManifest, imageCropper, listbox, menu, modePicker, navigationMenu, numberInput, pagination, pinInput, popover, popoverManifest, ratingGroup, select, signaturePad, slider, splitter, steps, tabs, tags, themePicker, timer, toast, toggleGroup, tooltip, tooltipManifest, tour, treeView };
+
+//# sourceMappingURL=index.js.map

package/dist/listbox/examples/basic.html

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { listbox } from "../listbox.presentation.js";
+
+const machine = listbox({
+  items: [
+    { "value": "cal", "label": "Calendar", "group": "Apps" },
+    { "value": "mail", "label": "Mail", "group": "Apps" },
+    { "value": "photos", "label": "Photos", "group": "Media" },
+    { "value": "music", "label": "Music", "group": "Media" },
+  ],
+});
+</script>
+
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    {...machine.getLabelProps()}
+  >Launcher</label>
+
+  <span
+    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    {...machine.getValueTextProps()}
+  >{machine.valueAsString}</span>
+
+  <div
+    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+    {...machine.getContentProps()}
+  >
+    <template for={machine.getBlocks()} as={block} key={block.id}>
+      <div class="py-1" {...machine.getItemGroupProps(block)}>
+        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+        <template for={machine.getRows(block)} as={row} key={row.value}>
+          <div
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            {...machine.getItemProps(row)}
+          >
+            <span class="min-w-0 flex-1 truncate"
+              {...machine.getItemTextProps(row)}>{row.label}</span>
+            <span
+              aria-hidden="true"
+              class="shrink-0 text-xs text-primary"
+              {...machine.getItemIndicatorProps(row)}
+            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/listbox/examples/controlled.html

@@ -0,0 +1,54 @@
+<script lang="ts">
+import { listbox } from "../listbox.presentation.js";
+
+const machine = listbox({
+  items: [
+    { "value": "react", "label": "React" },
+    { "value": "vue", "label": "Vue" },
+    { "value": "angular", "label": "Angular" },
+    { "value": "svelte", "label": "Svelte" },
+    { "value": "solid", "label": "Solid" },
+    { "value": "qwik", "label": "Qwik" },
+  ],
+  multiple: true,
+  value: ["vue","svelte"],
+});
+</script>
+
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    {...machine.getLabelProps()}
+  >Frameworks</label>
+
+  <span
+    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    {...machine.getValueTextProps()}
+  >{machine.valueAsString}</span>
+
+  <div
+    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+    {...machine.getContentProps()}
+  >
+    <template for={machine.getBlocks()} as={block} key={block.id}>
+      <div class="py-1" {...machine.getItemGroupProps(block)}>
+        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+        <template for={machine.getRows(block)} as={row} key={row.value}>
+          <div
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            {...machine.getItemProps(row)}
+          >
+            <span class="min-w-0 flex-1 truncate"
+              {...machine.getItemTextProps(row)}>{row.label}</span>
+            <span
+              aria-hidden="true"
+              class="shrink-0 text-xs text-primary"
+              {...machine.getItemIndicatorProps(row)}
+            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/listbox/examples/countries.html

@@ -0,0 +1,61 @@
+<script lang="ts">
+import { listbox } from "../listbox.presentation.js";
+
+const machine = listbox({
+  items: [
+    { "value": "US", "label": "United States" },
+    { "value": "GB", "label": "United Kingdom" },
+    { "value": "CA", "label": "Canada" },
+    { "value": "DE", "label": "Germany" },
+    { "value": "FR", "label": "France" },
+    { "value": "JP", "label": "Japan" },
+    { "value": "AU", "label": "Australia" },
+    { "value": "BR", "label": "Brazil" },
+    { "value": "IN", "label": "India" },
+    { "value": "CN", "label": "China" },
+    { "value": "KR", "label": "South Korea" },
+    { "value": "NL", "label": "Netherlands" },
+    { "value": "ES", "label": "Spain" },
+    { "value": "IT", "label": "Italy" },
+    { "value": "MX", "label": "Mexico" },
+  ],
+});
+</script>
+
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-colors duration-fast ease-decelerate", { "opacity-50 cursor-not-allowed": machine.disabled, "text-primary": machine.focused }]}
+    {...machine.getLabelProps()}
+  >Country</label>
+
+  <span
+    class={["block text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "hidden": machine.empty }]}
+    {...machine.getValueTextProps()}
+  >{machine.valueAsString}</span>
+
+  <div
+    class={["max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised p-1 transition-colors duration-fast ease-decelerate", { "opacity-60": machine.disabled, "hidden": machine.empty }]}
+    {...machine.getContentProps()}
+  >
+    <template for={machine.getBlocks()} as={block} key={block.id}>
+      <div class="py-1" {...machine.getItemGroupProps(block)}>
+        <span class="block px-2 py-1 text-xs font-medium text-text-muted"
+          {...machine.getItemGroupLabelProps(block)}>{block.label}</span>
+        <template for={machine.getRows(block)} as={row} key={row.value}>
+          <div
+            class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate data-[highlighted]:bg-surface aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected", { "cursor-not-allowed opacity-50": machine.disabled }]}
+            {...machine.getItemProps(row)}
+          >
+            <span class="min-w-0 flex-1 truncate"
+              {...machine.getItemTextProps(row)}>{row.label}</span>
+            <span
+              aria-hidden="true"
+              class="shrink-0 text-xs text-primary"
+              {...machine.getItemIndicatorProps(row)}
+            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</div>