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

package/dist/rating-group/rating-group.machine.js

@@ -0,0 +1,70 @@
+import { initial, isHovering, isInteractive, itemState, ratingValue, step } from "./rating-group.state.js";
+import { applyCount, applyValue, arrowLeft, arrowRight, clearHoveredValue, clearValue, endValue, homeValue, setHoveredValue, setValue } from "./rating-group.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/rating-group/rating-group.machine.ts
+function ratingGroup(args = {}, authored = () => false) {
+	return createMachine({
+		id: "rating-group",
+		initial: "idle",
+		fields: {
+			value: { event: "SET_VALUE" },
+			count: { event: "SET_COUNT" },
+			allowHalf: {},
+			disabled: {},
+			readOnly: {},
+			required: {},
+			name: {},
+			label: {}
+		},
+		context: initial(args, authored),
+		on: {
+			SET_VALUE: { assign: applyValue },
+			CLEAR_VALUE: { assign: clearValue },
+			SET_COUNT: { assign: applyCount }
+		},
+		states: {
+			idle: {
+				entry: [{ assign: clearHoveredValue }],
+				on: {
+					GROUP_POINTER_OVER: { target: "hover" },
+					POINTER_OVER: {
+						target: "hover",
+						assign: setHoveredValue
+					},
+					FOCUS: { target: "focus" },
+					CLICK: { assign: setValue }
+				}
+			},
+			focus: { on: {
+				POINTER_OVER: { assign: setHoveredValue },
+				GROUP_POINTER_LEAVE: { assign: clearHoveredValue },
+				BLUR: { target: "idle" },
+				SPACE: [{
+					cond: (ctx) => ctx.value <= 0,
+					assign: setValue
+				}],
+				CLICK: { assign: setValue },
+				ARROW_LEFT: { assign: arrowLeft },
+				ARROW_RIGHT: { assign: arrowRight },
+				HOME: { assign: homeValue },
+				END: { assign: endValue }
+			} },
+			hover: { on: {
+				POINTER_OVER: { assign: setHoveredValue },
+				FOCUS: { target: "focus" },
+				GROUP_POINTER_LEAVE: [{
+					cond: (_ctx, event) => event.radioFocused,
+					target: "focus",
+					assign: clearHoveredValue
+				}, {
+					target: "idle",
+					assign: clearHoveredValue
+				}],
+				CLICK: { assign: setValue }
+			} }
+		}
+	});
+}
+export { isHovering, isInteractive, itemState, ratingGroup, ratingValue, step };
+
+//# sourceMappingURL=rating-group.machine.js.map

package/dist/rating-group/rating-group.presentation.d.ts

@@ -0,0 +1,144 @@
+import { RatingGroupArgs, RatingGroupContext, RatingGroupState, RatingItemState } from "./rating-group.state.js";
+import { RatingGroupEvents, RatingGroupHoverChange, RatingGroupValueChange } from "./rating-group.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+type ScopeLike = ViewFor<RatingGroupContext, RatingGroupEvents, RatingGroupState>;
+type SlotLike = SlotViewFor<number, RatingGroupContext, RatingGroupEvents, RatingGroupState>;
+export declare const def: {
+  name: string;
+  machine: (args: RatingGroupArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<RatingGroupContext, RatingGroupEvents, RatingGroupState>;
+  start: "idle";
+  parts: {
+    root: {};
+    label: {
+      attrs: (scope: ScopeLike) => {
+        for: string;
+        "data-disabled": string | undefined;
+        "data-required": string | undefined;
+        onClick: (event: MouseEvent) => void;
+      };
+    };
+    control: {
+      attrs: (scope: ScopeLike) => {
+        onPointermove: (event: PointerEvent) => void;
+        onPointerleave: () => void;
+        role: string;
+        "data-disabled": string | undefined;
+        "data-readonly": string | undefined;
+      };
+    };
+    hiddenInput: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        id: string;
+        name: string | undefined;
+        form: undefined;
+        type: string;
+        hidden: boolean;
+        disabled: boolean | undefined;
+        readonly: boolean | undefined;
+        required: boolean | undefined;
+        value: string;
+      };
+    };
+  };
+  slots: {
+    item: {
+      indexes: (context: RatingGroupContext) => readonly number[];
+      attrs: (scope: SlotLike) => {
+        "data-checked": string | undefined;
+        "data-highlighted": string | undefined;
+        "data-half": string | undefined;
+        onPointerdown: (event: PointerEvent) => void;
+        onPointermove: (event: PointerEvent) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        onClick: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+        "aria-label": string;
+        id: string;
+        role: string;
+        "data-disabled": string | undefined;
+        "data-readonly": string | undefined;
+        tabindex: string | undefined;
+      };
+    };
+  };
+  commands: {
+    setValue: {
+      event: ([value]: [value: number]) => {
+        type: "SET_VALUE";
+        value: number;
+      };
+    };
+    clearValue: {
+      event: () => {
+        type: "CLEAR_VALUE";
+      };
+    };
+  };
+  readers: {
+    value: {
+      read: (context: RatingGroupContext) => number;
+    };
+    hoveredValue: {
+      read: (context: RatingGroupContext) => number;
+    };
+    hovering: {
+      read: (context: RatingGroupContext) => boolean;
+    };
+    count: {
+      read: (context: RatingGroupContext) => number;
+    };
+    disabled: {
+      read: (context: RatingGroupContext) => boolean;
+    };
+    readOnly: {
+      read: (context: RatingGroupContext) => boolean;
+    };
+  };
+  methods: {
+    getItems: {
+      call: (context: RatingGroupContext) => readonly number[];
+    };
+    getItemState: {
+      call: (context: RatingGroupContext, _state: RatingGroupState, [index]: [index: number]) => RatingItemState;
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: RatingGroupContext) => number[];
+      detail: (watched: readonly unknown[]) => {
+        value: number;
+      };
+    };
+    "hover-change": {
+      prop: string;
+      watch: (context: RatingGroupContext) => number[];
+      detail: (watched: readonly unknown[]) => {
+        hoveredValue: number;
+      };
+    };
+  };
+  settled: ({ event, after, focus }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: RatingGroupContext;
+      readonly state: RatingGroupState;
+    };
+    readonly after: {
+      readonly context: RatingGroupContext;
+      readonly state: RatingGroupState;
+    };
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+    readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+  }) => void;
+};
+export type RatingGroupApi = ApiOf<typeof def>;
+export declare const ratingGroup: import("@spinjs/runtime").DefinedComponent<RatingGroupApi, RatingGroupArgs>;
+export type { RatingGroupArgs, RatingGroupHoverChange, RatingGroupState, RatingGroupValueChange };
+//# sourceMappingURL=rating-group.presentation.d.ts.map

package/dist/rating-group/rating-group.presentation.js

@@ -0,0 +1,208 @@
+import { isHovering, isInteractive as isInteractive$1, itemState } from "./rating-group.state.js";
+import { ratingGroup as ratingGroup$1 } from "./rating-group.machine.js";
+import { ariaDisabled, ariaLabelledBy, ariaOrientation, ariaReadOnly, ariaRoleDescription, defineComponent, isComposing, optionRow } from "@spinjs/runtime";
+// src/rating-group/rating-group.presentation.ts
+const itemIndexCache = /* @__PURE__ */ new Map();
+const itemIndexes = (length) => {
+	const hit = itemIndexCache.get(length);
+	if (hit !== void 0) return hit;
+	const made = Array.from({ length }, (_, index) => index + 1);
+	itemIndexCache.set(length, made);
+	return made;
+};
+const def = {
+	name: "rating-group",
+	machine: (args, authored) => ratingGroup$1(args, authored),
+	start: "idle",
+	parts: {
+		root: {},
+		label: { attrs: (scope) => ({
+			"for": scope.id("hiddenInput"),
+			"data-disabled": scope.attr(scope.context.disabled),
+			"data-required": scope.attr(scope.context.required),
+			onClick: (event) => {
+				if (event.defaultPrevented) return;
+				if (!isInteractive$1(scope.context)) return;
+				event.preventDefault();
+			}
+		}) },
+		control: { attrs: (scope) => ({
+			role: "radiogroup",
+			"data-disabled": scope.attr(scope.context.disabled),
+			"data-readonly": scope.attr(scope.context.readOnly),
+			...ariaOrientation("horizontal"),
+			...ariaLabelledBy(scope, { part: "label" }),
+			...ariaReadOnly(scope.context.readOnly ? "true" : void 0),
+			onPointermove: (event) => {
+				if (!isInteractive$1(scope.context)) return;
+				if (event.pointerType === "touch") return;
+				scope.send({ type: "GROUP_POINTER_OVER" });
+			},
+			onPointerleave: () => {
+				if (!isInteractive$1(scope.context)) return;
+				const radioFocused = scope.state === "focus";
+				scope.send({
+					type: "GROUP_POINTER_LEAVE",
+					radioFocused
+				});
+			}
+		}) },
+		hiddenInput: {
+			id: "input",
+			attrs: (scope) => {
+				const name = scope.context.name;
+				return {
+					id: scope.id("hiddenInput"),
+					name: name.length > 0 ? name : void 0,
+					form: void 0,
+					type: "text",
+					hidden: true,
+					disabled: scope.context.disabled ? true : void 0,
+					readonly: scope.context.readOnly ? true : void 0,
+					required: scope.context.required ? true : void 0,
+					value: String(scope.context.value)
+				};
+			}
+		}
+	},
+	slots: { item: {
+		indexes: (context) => itemIndexes(context.count),
+		attrs: (scope) => {
+			const index = scope.slot;
+			const context = scope.context;
+			const state = itemState(context, index);
+			const interactive = isInteractive$1(context);
+			const rtl = (eventTarget) => eventTarget instanceof Element && eventTarget.ownerDocument?.defaultView?.getComputedStyle(eventTarget).direction === "rtl";
+			return {
+				id: scope.id("item", index),
+				role: "radio",
+				"data-disabled": scope.attr(scope.context.disabled),
+				"data-readonly": scope.attr(scope.context.readOnly),
+				tabindex: context.readOnly || context.disabled ? state.checked ? "0" : void 0 : state.checked ? "0" : "-1",
+				...ariaRoleDescription("rating"),
+				"aria-label": `${index} stars`,
+				...ariaDisabled(context.disabled ? "true" : void 0),
+				...optionRow({
+					setSize: String(context.count),
+					checked: state.checked ? "true" : "false",
+					posInSet: String(index)
+				}),
+				"data-checked": scope.attr(state.checked),
+				"data-highlighted": scope.attr(state.highlighted),
+				"data-half": scope.attr(state.half),
+				onPointerdown: (event) => {
+					if (!interactive) return;
+					if (event.pointerType === "mouse" && event.button !== 0) return;
+					event.preventDefault();
+				},
+				onPointermove: (event) => {
+					if (!isInteractive$1(scope.context)) return;
+					const rect = scope.measure("item", index);
+					if (rect === null) return;
+					const x = rtl(event.target) ? rect.right - event.clientX : event.clientX - rect.left;
+					const isMidway = rect.width > 0 && x / rect.width < .5;
+					scope.send({
+						type: "POINTER_OVER",
+						index,
+						isMidway
+					});
+				},
+				onKeydown: (event) => {
+					if (event.defaultPrevented) return;
+					if (!isInteractive$1(scope.context)) return;
+					if (isComposing(event)) return;
+					const isRtl = rtl(event.target);
+					const move = (type) => {
+						event.preventDefault();
+						scope.send({ type });
+						return true;
+					};
+					switch (event.key) {
+						case "ArrowLeft":
+						case "ArrowUp":
+							move(isRtl ? "ARROW_RIGHT" : "ARROW_LEFT");
+							break;
+						case "ArrowRight":
+						case "ArrowDown":
+							move(isRtl ? "ARROW_LEFT" : "ARROW_RIGHT");
+							break;
+						case " ":
+							event.preventDefault();
+							scope.send({
+								type: "SPACE",
+								value: index
+							});
+							break;
+						case "Home":
+							move("HOME");
+							break;
+						case "End": move("END");
+					}
+				},
+				onClick: () => {
+					if (!isInteractive$1(scope.context)) return;
+					scope.send({
+						type: "CLICK",
+						value: index
+					});
+				},
+				onFocus: () => {
+					if (!isInteractive$1(scope.context)) return;
+					scope.send({ type: "FOCUS" });
+				},
+				onBlur: () => {
+					if (!isInteractive$1(scope.context)) return;
+					scope.send({ type: "BLUR" });
+				}
+			};
+		}
+	} },
+	commands: {
+		setValue: { event: ([value]) => ({
+			type: "SET_VALUE",
+			value
+		}) },
+		clearValue: { event: () => ({ type: "CLEAR_VALUE" }) }
+	},
+	readers: {
+		value: { read: (context) => context.value },
+		hoveredValue: { read: (context) => context.hoveredValue },
+		hovering: { read: (context) => isHovering(context) },
+		count: { read: (context) => context.count },
+		disabled: { read: (context) => context.disabled },
+		readOnly: { read: (context) => context.readOnly }
+	},
+	methods: {
+		getItems: { call: (context) => itemIndexes(context.count) },
+		getItemState: { call: (context, _state, [index]) => itemState(context, index) }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [context.value],
+			detail: (watched) => ({ value: typeof watched[0] === "number" ? watched[0] : 0 })
+		},
+		"hover-change": {
+			prop: "onHoverChange",
+			watch: (context) => [context.hoveredValue],
+			detail: (watched) => ({ hoveredValue: typeof watched[0] === "number" ? watched[0] : 0 })
+		}
+	},
+	settled: ({ event, after, focus }) => {
+		if ({
+			ARROW_LEFT: true,
+			ARROW_RIGHT: true,
+			HOME: true,
+			END: true,
+			SPACE: true
+		}[event.type] !== true) return;
+		const ctx = (after && typeof after === "object" ? after : {})["context"];
+		if (!ctx || typeof ctx !== "object" || !("value" in ctx)) return;
+		const value = ctx.value;
+		if (typeof value === "number" && value > 0) focus("item", Math.max(1, Math.ceil(value)));
+	}
+};
+const ratingGroup = defineComponent(def);
+export { def, ratingGroup };
+
+//# sourceMappingURL=rating-group.presentation.js.map

package/dist/rating-group/rating-group.state.d.ts

@@ -0,0 +1,36 @@
+export type RatingGroupState = "idle" | "focus" | "hover";
+export interface RatingGroupContext {
+  value: number;
+  hoveredValue: number;
+  count: number;
+  allowHalf: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  required: boolean;
+  name: string;
+  label: string;
+}
+export interface RatingGroupArgs {
+  value?: string | number;
+  defaultValue?: string | number;
+  count?: number;
+  allowHalf?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  label?: string;
+  defaultReadOnly?: boolean;
+}
+export interface RatingItemState {
+  readonly highlighted: boolean;
+  readonly half: boolean;
+  readonly checked: boolean;
+}
+export declare function ratingValue(raw: unknown): number;
+export declare function isInteractive(ctx: RatingGroupContext): boolean;
+export declare function isHovering(ctx: RatingGroupContext): boolean;
+export declare function itemState(ctx: RatingGroupContext, index: number): RatingItemState;
+export declare function step(ctx: RatingGroupContext): number;
+export declare function initial(args?: RatingGroupArgs, authored?: (name: string) => boolean): RatingGroupContext;
+//# sourceMappingURL=rating-group.state.d.ts.map

package/dist/rating-group/rating-group.state.js

@@ -0,0 +1,41 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/rating-group/rating-group.state.ts
+function ratingValue(raw) {
+	const n = typeof raw === "number" ? raw : Number(raw);
+	return Number.isFinite(n) ? n : -1;
+}
+function isInteractive(ctx) {
+	return !ctx.disabled && !ctx.readOnly;
+}
+function isHovering(ctx) {
+	return ctx.hoveredValue > -1;
+}
+function itemState(ctx, index) {
+	const current = isHovering(ctx) ? ctx.hoveredValue : ctx.value;
+	const equal = Math.ceil(current) === index;
+	return {
+		highlighted: index <= current || equal,
+		half: equal && Math.abs(current - index) === .5,
+		checked: equal || ctx.value <= 0 && index === 1
+	};
+}
+function step(ctx) {
+	return ctx.allowHalf ? .5 : 1;
+}
+function initial(args = {}, authored = () => false) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[field] !== void 0 || args[defaultTwin(field)] !== void 0;
+	return {
+		value: written("value") ? ratingValue(args.value ?? args.defaultValue) : -1,
+		hoveredValue: -1,
+		count: Math.max(1, Math.floor(args.count ?? 5)),
+		allowHalf: args.allowHalf === true,
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		required: args.required === true,
+		name: args.name ?? "",
+		label: args.label ?? ""
+	};
+}
+export { initial, isHovering, isInteractive, itemState, ratingValue, step };
+
+//# sourceMappingURL=rating-group.state.js.map

package/dist/rating-group/rating-group.transitions.d.ts

@@ -0,0 +1,16 @@
+import { RatingGroupContext } from "./rating-group.state.js";
+import { RatingGroupEvents } from "./rating-group.events.js";
+import { AssignFor } from "@spinjs/runtime/fsm";
+type RatingAssign<K extends keyof RatingGroupEvents = keyof RatingGroupEvents> = AssignFor<RatingGroupContext, RatingGroupEvents, K>;
+export declare const clearHoveredValue: () => Partial<RatingGroupContext>;
+export declare const setValue: RatingAssign<"CLICK" | "SPACE">;
+export declare const setHoveredValue: RatingAssign<"POINTER_OVER">;
+export declare const applyValue: RatingAssign<"SET_VALUE">;
+export declare const clearValue: RatingAssign<"CLEAR_VALUE">;
+export declare const applyCount: RatingAssign<"SET_COUNT">;
+export declare const arrowLeft: (ctx: RatingGroupContext) => Partial<RatingGroupContext>;
+export declare const arrowRight: (ctx: RatingGroupContext) => Partial<RatingGroupContext>;
+export declare const homeValue: () => Partial<RatingGroupContext>;
+export declare const endValue: (ctx: RatingGroupContext) => Partial<RatingGroupContext>;
+export {};
+//# sourceMappingURL=rating-group.transitions.d.ts.map

package/dist/rating-group/rating-group.transitions.js

@@ -0,0 +1,15 @@
+import { ratingValue, step } from "./rating-group.state.js";
+// src/rating-group/rating-group.transitions.ts
+const clearHoveredValue = () => ({ hoveredValue: -1 });
+const setValue = (ctx, event) => ({ value: ctx.hoveredValue === -1 ? event.value : ctx.hoveredValue });
+const setHoveredValue = (ctx, event) => ({ hoveredValue: event.index - (ctx.allowHalf && event.isMidway ? .5 : 0) });
+const applyValue = (_ctx, event) => ({ value: ratingValue(event.value) });
+const clearValue = () => ({ value: -1 });
+const applyCount = (_ctx, event) => ({ count: Math.max(1, Math.floor(event.count)) });
+const arrowLeft = (ctx) => ({ value: Math.max(0, ctx.value - step(ctx)) });
+const arrowRight = (ctx) => ({ value: Math.min(ctx.count, (ctx.value === -1 ? 0 : ctx.value) + step(ctx)) });
+const homeValue = () => ({ value: 1 });
+const endValue = (ctx) => ({ value: ctx.count });
+export { applyCount, applyValue, arrowLeft, arrowRight, clearHoveredValue, clearValue, endValue, homeValue, setHoveredValue, setValue };
+
+//# sourceMappingURL=rating-group.transitions.js.map

package/dist/react/react.d.ts

@@ -0,0 +1,29 @@
+import { CtlFor, ElementTarget, spinComponentCtl } from "../controller.js";
+import { DefinedComponent } from "@spinjs/runtime";
+/**
+ * React adapter: `useSpinComponent(el)` is the app controller's instrument.
+ *
+ * The element is a locator — a ref, or a RefObject whose `.current` the hook
+ * reads. What this adds is the component's controller surface
+ * (`{ commands, state, bind }`), reached through the same context markup
+ * consumes. A machine-owned and a platform-owned component present the same
+ * surface; the host cannot tell which it holds.
+ *
+ * The ctl is never nullish and synchronous: React has no tracking scope, so
+ * `state` is read at render time — the reads are live, and the host
+ * re-renders on the component's events, which `bind` subscribes. `bind`
+ * works from the first render, so a React host that wants to seed a
+ * component writes the prop before it connects.
+ *
+ * ```tsx
+ * const el = useRef<HTMLElement>(null);
+ * const popover = useSpinComponent<PopoverCommands>(el);
+ * useEffect(() => popover.bind({ label: "Open" }, { "open-change": (e) => setOpen(e.detail.open) }), [open]);
+ * return <spin-popover ref={el} />;
+ * popover.commands.show();
+ * ```
+ */
+export declare function useSpinComponent<D extends DefinedComponent<any, any>>(def: D): CtlFor<D>;
+export declare function useSpinComponent<D extends DefinedComponent<any, any>>(target: ElementTarget, def: D): CtlFor<D>;
+export declare function useSpinComponent<TCommands extends object = object, TState extends object = Record<string, () => unknown>, TProps extends object = Record<string, unknown>>(el: ElementTarget, handle?: object): ReturnType<typeof spinComponentCtl<TCommands, TState, TProps>>;
+//# sourceMappingURL=react.d.ts.map

package/dist/react/react.js

@@ -0,0 +1,8 @@
+import { spinComponentCtl } from "../controller.js";
+// src/react/react.ts
+function useSpinComponent(target, handleOrDef) {
+	return spinComponentCtl(target, handleOrDef);
+}
+export { useSpinComponent };
+
+//# sourceMappingURL=react.js.map

package/dist/select/examples/basic.html

@@ -0,0 +1,72 @@
+<script lang="ts">
+import { select } from "../select.presentation.js";
+
+const machine = select({
+  items: [
+    { "value": "apple", "label": "Apple" },
+    { "value": "banana", "label": "Banana" },
+    { "value": "cherry", "label": "Cherry" },
+    { "value": "date", "label": "Date" },
+  ],
+});
+</script>
+<div class="relative w-64 max-w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    {...machine.getLabelProps()}>Fruit</label>
+
+  <div class="flex items-center gap-1" {...machine.getControlProps()}>
+    <button
+      class={["flex h-7 min-w-0 flex-1 items-center gap-2 secondary s-sm transition-colors duration-fast ease-decelerate hover:bg-surface", { "bg-surface": machine.open, "ring-2 ring-border-strong": machine.focused, "opacity-50 cursor-not-allowed": machine.disabled }]}
+      {...machine.getTriggerProps()}
+    >
+      <span class="min-w-0 flex-1 truncate text-left"
+        {...machine.getValueTextProps()}>
+        <template for={machine.getSelectedRows()} as={row} key={row.value}>
+          <span>{row.label}</span>
+        </template>
+      </span>
+      <span
+        aria-hidden="true"
+        class={["shrink-0 text-xs text-text-muted transition-transform duration-fast ease-decelerate", { "rotate-180": machine.open }]}
+        {...machine.getTriggerIndicatorProps()}
+      ><span class="i-lucide-chevron-down text-xs" aria-hidden="true"></span></span>
+    </button>
+    <button
+      aria-hidden="true"
+      tabindex="-1"
+      class="flex h-6 w-6 shrink-0 items-center justify-center ghost icon s-sm text-text-muted transition-colors duration-fast ease-decelerate hover:bg-surface hover:text-text"
+      {...machine.getClearTriggerProps()}
+    ><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+  </div>
+
+  <div
+    class={["absolute z-dropdown left-0 top-full mt-1 w-full origin-top-left transition duration-fast ease-decelerate min-w-[12rem]", { "pointer-events-none invisible scale-95 opacity-0": !machine.open }]}
+    {...machine.getPositionerProps()}
+  >
+    <panel
+      class="max-h-56 overflow-y-auto overscroll-contain"
+      {...machine.getContentProps()}
+    >
+      <panel-list role="group" {...machine.getListProps()}>
+        <template for={machine.getRows()} as={row} key={row.value}>
+          <div
+            class={["flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate", { "font-medium": machine.getItemState(row).selected }]}
+            {...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 opacity-0 transition-opacity duration-fast ease-decelerate", { "opacity-100": machine.getItemState(row).selected }]}
+              {...machine.getItemIndicatorProps(row)}
+            ><span class="i-lucide-check text-xs" aria-hidden="true"></span></span>
+          </div>
+        </template>
+      </panel-list>
+    </panel>
+  </div>
+
+  <select class="sr-only" {...machine.getHiddenSelectProps()}
+    aria-hidden="true"></select>
+</div>