@bysages/solid 0.3.1 → 0.4.1

package/dist/components/checkbox-group/index.mjs

@@ -1,29 +1,24 @@
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, spread, template } from "@solidjs/web";
-import { For, createUniqueId, splitProps } from "solid-js";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, splitProps } from "solid-js";
 import { useFieldContext } from "@ark-ui/solid/field";
 import { Checkbox } from "@ark-ui/solid/checkbox";
 //#region src/components/checkbox-group/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
-function checkGlyph() {
-	return _tmpl$();
+function checkIcon() {
+	return iconNode("check");
 }
-/**
-* One question, many answers: a labelled stack (or row) of the seal-cut
-* checkboxes bound to a single array. Toggling a box adds or removes its
-* value; the group itself is semantics (`role="group"`), the boxes stay
-* the machine-driven originals. Inside a `Field.Root` the group picks up
-* the field context, so the invalid and disabled states a Form routes to
-* its name dress every box at once.
-*/
-function CheckboxGroup(props) {
+function CheckboxGroupImpl(props) {
 	injectComponentStyle("checkbox-group");
 	injectComponentStyle("checkbox");
 	const field = useFieldContext();
-	const uid = createUniqueId();
 	const [own, rest] = splitProps(props, [
+		"id",
 		"value",
+		"defaultValue",
 		"options",
 		"layout",
 		"size",
@@ -31,67 +26,69 @@ function CheckboxGroup(props) {
 		"disabled",
 		"onValueChange"
 	]);
-	const selected = () => new Set(own.value ?? []);
+	const id = useElementId("checkbox-group", () => own.id);
+	const selectedValue = own.value === void 0 ? void 0 : () => own.value;
 	const isInvalid = () => own.invalid || field?.().invalid === true;
 	const isDisabled = () => own.disabled || field?.().disabled === true;
-	function toggle(value) {
-		const next = new Set(selected());
-		if (next.has(value)) next.delete(value);
-		else next.add(value);
-		own.onValueChange?.([...next]);
-	}
-	var _el$2 = _tmpl$2();
-	spread(_el$2, [rest, {
-		role: "group",
-		"data-scope": "checkbox-group",
-		"data-part": "root",
+	return createComponent(Checkbox.Group, mergeProps(rest, { get id() {
+		return id();
+	} }, selectedValue === void 0 ? {} : { value: selectedValue }, () => {
+		return own.defaultValue === void 0 ? {} : { defaultValue: own.defaultValue };
+	}, {
+		get disabled() {
+			return isDisabled();
+		},
+		get invalid() {
+			return isInvalid();
+		},
+		get onValueChange() {
+			return own.onValueChange;
+		},
 		get "data-layout"() {
 			return own.layout ?? "vertical";
 		},
 		get "data-invalid"() {
 			return isInvalid() ? "" : void 0;
-		}
-	}], true);
-	insert(_el$2, createComponent(For, {
-		get each() {
-			return own.options;
 		},
-		children: (option) => createComponent(Checkbox.Root, {
-			get ids() {
-				return {
-					label: `${uid}:${option.value}:label`,
-					hiddenInput: `${uid}:${option.value}:input`
-				};
-			},
-			get checked() {
-				return selected().has(option.value);
-			},
-			get "data-size"() {
-				return own.size ?? "md";
-			},
-			get invalid() {
-				return isInvalid();
-			},
-			get disabled() {
-				return isDisabled() || option.disabled === true;
-			},
-			onCheckedChange: () => toggle(option.value),
-			get children() {
-				return [
-					createComponent(Checkbox.Control, { get children() {
-						return createComponent(Checkbox.Indicator, { get children() {
-							return checkGlyph();
-						} });
-					} }),
-					createComponent(Checkbox.Label, { get children() {
-						return option.label;
-					} }),
-					createComponent(Checkbox.HiddenInput, {})
-				];
-			}
-		})
+		get children() {
+			return createComponent(For, {
+				get each() {
+					return own.options;
+				},
+				children: (option) => createComponent(Checkbox.Root, {
+					get value() {
+						return option.value;
+					},
+					get ids() {
+						return {
+							label: `${id()}:${option.value}:label`,
+							hiddenInput: `${id()}:${option.value}:input`
+						};
+					},
+					get "data-size"() {
+						return own.size ?? "md";
+					},
+					get disabled() {
+						return option.disabled === true;
+					},
+					get children() {
+						return [
+							createComponent(Checkbox.Control, { get children() {
+								return createComponent(Checkbox.Indicator, { get children() {
+									return checkIcon();
+								} });
+							} }),
+							createComponent(Checkbox.Label, { get children() {
+								return option.label;
+							} }),
+							createComponent(Checkbox.HiddenInput, {})
+						];
+					}
+				})
+			});
+		}
 	}));
-	return _el$2;
 }
+const CheckboxGroup = defineFamily(CheckboxGroupImpl, Checkbox$1);
 //#endregion
 export { CheckboxGroup };

package/dist/components/chip/index.d.mts

@@ -8,5 +8,7 @@ export interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   tone?: "ink" | "info" | "success" | "warning" | "danger";
   variant?: "solid" | "subtle" | "outline";
 }
-export declare function Chip(props: ChipProps): JSX.Element;
+export declare const Chip: ((props: ChipProps) => JSX.Element) & {
+  Root: (props: ChipProps) => JSX.Element;
+};
 //#endregion

package/dist/components/chip/index.mjs

@@ -1,9 +1,10 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { insert, memo, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/chip/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);
-function Chip(props) {
+const Chip = withSelfRoot(function Chip(props) {
 	injectComponentStyle("chip");
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -31,6 +32,6 @@ function Chip(props) {
 		};
 	})());
 	return _el$;
-}
+});
 //#endregion
 export { Chip };

package/dist/components/client-only/index.d.mts

@@ -1,2 +1,7 @@
-import { ClientOnly, ClientOnlyProps } from "@ark-ui/solid/client-only";
-export { ClientOnly, type ClientOnlyProps };
+import { ClientOnly as ClientOnly$1, ClientOnlyProps } from "@ark-ui/solid/client-only";
+//#region src/components/client-only/index.d.ts
+export declare const ClientOnly: typeof ClientOnly$1 & {
+  Root: typeof ClientOnly$1;
+};
+//#endregion
+export type { ClientOnlyProps };

package/dist/components/client-only/index.mjs

@@ -1,2 +1,9 @@
-import { ClientOnly } from "@ark-ui/solid/client-only";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { ClientOnly as ClientOnly$1 } from "@ark-ui/solid/client-only";
+//#region src/components/client-only/index.ts
+/** Render children on the client only, after hydration — the escape
+* hatch for browser-only widgets inside server-rendered pages. Headless,
+* like the rest of Ark's utilities: no visual layer of our own. */
+const ClientOnly = withSelfRoot(ClientOnly$1);
+//#endregion
 export { ClientOnly };

package/dist/components/clipboard/index.d.mts

@@ -10,7 +10,7 @@ type ClipboardOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ClipboardRoot(props: ClipboardRootProps & ClipboardOwnProps): import("solid-js").JSX.Element;
-export declare const Clipboard: Omit<typeof Clipboard$1, "Root"> & {
+export declare const Clipboard: typeof ClipboardRoot & Omit<typeof Clipboard$1, "Root"> & {
   Root: typeof ClipboardRoot;
 };
 //#endregion

package/dist/components/clipboard/index.mjs

@@ -1,19 +1,27 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 import { Clipboard as Clipboard$1 } from "@ark-ui/solid/clipboard";
 //#region src/components/clipboard/index.tsx
 const ArkRoot = Clipboard$1.Root;
 function ClipboardRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(ArkRoot, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("clipboard", () => rest.id);
+	return createComponent(ArkRoot, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Clipboard = {
+const Clipboard = defineFamily(ClipboardRoot, {
 	...Clipboard$1,
 	Root: ClipboardRoot
-};
+});
 injectComponentStyle("clipboard");
 //#endregion
 export { Clipboard };

package/dist/components/collapsible/index.d.mts

@@ -1,7 +1,21 @@
+import { ComponentProps, JSX } from "solid-js";
 import { Collapsible as Collapsible$1 } from "@ark-ui/solid/collapsible";
 //#region src/components/collapsible/index.d.ts
 /** Ark's Collapsible, dressed in the paper-and-ink system: one control on
  * the paper, its panel dissolving open to the machine's measured height.
  * The API is Ark's own — Root, Trigger, Content, Indicator. */
-export declare const Collapsible: typeof Collapsible$1;
+declare function CollapsibleRoot(props: ComponentProps<typeof Collapsible$1.Root>): JSX.Element;
+export interface CollapsibleFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  label: string;
+  disabled?: boolean;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function CollapsibleFacade(props: CollapsibleFacadeProps): JSX.Element;
+type CollapsibleParts = Omit<typeof Collapsible$1, "Root"> & {
+  Root: typeof CollapsibleRoot;
+};
+export declare const Collapsible: typeof CollapsibleFacade & CollapsibleParts;
 //#endregion

package/dist/components/collapsible/index.mjs

@@ -1,10 +1,47 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Collapsible as Collapsible$1 } from "@ark-ui/solid/collapsible";
-//#region src/components/collapsible/index.ts
+//#region src/components/collapsible/index.tsx
 /** Ark's Collapsible, dressed in the paper-and-ink system: one control on
 * the paper, its panel dissolving open to the machine's measured height.
 * The API is Ark's own — Root, Trigger, Content, Indicator. */
-const Collapsible = Collapsible$1;
+function CollapsibleRoot(props) {
+	const id = useElementId("collapsible", () => props.id);
+	return createComponent$1(Collapsible$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+function CollapsibleFacade(props) {
+	injectComponentStyle("collapsible");
+	return createComponent(CollapsibleRoot, mergeProps({ get disabled() {
+		return props.disabled;
+	} }, () => {
+		return props.open === void 0 ? {} : { open: props.open };
+	}, () => {
+		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
+	}, {
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [createComponent(Collapsible$1.Trigger, { get children() {
+				return [memo(() => {
+					return props.label;
+				}), createComponent(Collapsible$1.Indicator, { get children() {
+					return iconNode("chevron-right");
+				} })];
+			} }), createComponent(Collapsible$1.Content, { get children() {
+				return props.children;
+			} })];
+		}
+	}));
+}
+const Collapsible = defineFamily(CollapsibleFacade, {
+	...Collapsible$1,
+	Root: CollapsibleRoot
+});
 injectComponentStyle("collapsible");
 //#endregion
 export { Collapsible };

package/dist/components/color-picker/index.d.mts

@@ -1,4 +1,5 @@
-import { ColorPicker as ColorPicker$1, ColorPickerRootProps } from "@ark-ui/solid/color-picker";
+import { ComponentProps } from "solid-js";
+import { Color, ColorPicker as ColorPicker$1, ColorPickerRootProps } from "@ark-ui/solid/color-picker";
 //#region src/components/color-picker/index.d.ts
 /** Ark's ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch
  * on the paper, opening into an area and channel sliders where pigment is
@@ -13,7 +14,17 @@ type ColorPickerOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ColorPickerRoot(props: ColorPickerRootProps & ColorPickerOwnProps): import("solid-js").JSX.Element;
-export declare const ColorPicker: Omit<typeof ColorPicker$1, "Root"> & {
+type ColorPickerFacadeProps = Omit<ComponentProps<typeof ColorPickerRoot>, "children" | "defaultValue" | "disabled" | "invalid" | "label" | "onValueChange" | "required" | "value"> & {
+  value?: string | Color;
+  defaultValue?: string | Color;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  label?: string;
+  onValueChange?: (value: unknown) => void;
+};
+declare function ColorPickerFacade(props: ColorPickerFacadeProps): import("solid-js").JSX.Element;
+export declare const ColorPicker: typeof ColorPickerFacade & Omit<typeof ColorPicker$1, "Root"> & {
   Root: typeof ColorPickerRoot;
 };
 //#endregion

package/dist/components/color-picker/index.mjs

@@ -1,18 +1,105 @@
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
-import { ColorPicker as ColorPicker$1 } from "@ark-ui/solid/color-picker";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent, insert, mergeProps, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, splitProps } from "solid-js";
+import { ColorPicker as ColorPicker$1, parseColor } from "@ark-ui/solid/color-picker";
 //#region src/components/color-picker/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=color-picker data-part=channel-controls><div data-scope=color-picker data-part=channel-sliders><!><!>`);
 function ColorPickerRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(ColorPicker$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("color-picker", () => rest.id);
+	return createComponent(ColorPicker$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const ColorPicker = {
+function ColorPickerFacade(props) {
+	injectComponentStyle("color-picker");
+	const toColor = (color) => typeof color === "string" ? parseColor(color) : color;
+	return createComponent(ColorPickerRoot, mergeProps(props, {
+		get value() {
+			return toColor(props.value);
+		},
+		get defaultValue() {
+			return toColor(props.defaultValue);
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(ColorPicker$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(ColorPicker$1.Control, { get children() {
+					return [createComponent(ColorPicker$1.ChannelInput, { channel: "hex" }), createComponent(ColorPicker$1.Trigger, { get children() {
+						return [createComponent(ColorPicker$1.TransparencyGrid, {}), createComponent(ColorPicker$1.ValueSwatch, {})];
+					} })];
+				} }),
+				createComponent(ColorPicker$1.Positioner, { get children() {
+					return createComponent(ColorPicker$1.Content, { get children() {
+						return [createComponent(ColorPicker$1.Area, { get children() {
+							return [createComponent(ColorPicker$1.AreaBackground, {}), createComponent(ColorPicker$1.AreaThumb, {})];
+						} }), (() => {
+							var _el$ = _tmpl$();
+							var _el$2 = _el$.firstChild;
+							var _el$3 = _el$2.firstChild;
+							var _el$4 = _el$3.nextSibling;
+							insert(_el$, createComponent(ColorPicker$1.EyeDropperTrigger, { get children() {
+								return iconNode("pipette", {
+									width: 14,
+									height: 14
+								});
+							} }), _el$2);
+							insert(_el$2, createComponent(ColorPicker$1.ChannelSlider, {
+								channel: "hue",
+								get children() {
+									return [createComponent(ColorPicker$1.ChannelSliderTrack, {}), createComponent(ColorPicker$1.ChannelSliderThumb, {})];
+								}
+							}), _el$3);
+							insert(_el$2, createComponent(ColorPicker$1.ChannelSlider, {
+								channel: "alpha",
+								get children() {
+									return [
+										createComponent(ColorPicker$1.TransparencyGrid, {}),
+										createComponent(ColorPicker$1.ChannelSliderTrack, {}),
+										createComponent(ColorPicker$1.ChannelSliderThumb, {})
+									];
+								}
+							}), _el$4);
+							return _el$;
+						})()];
+					} });
+				} }),
+				createComponent(ColorPicker$1.HiddenInput, {})
+			];
+		}
+	}));
+}
+const ColorPicker = defineFamily(ColorPickerFacade, {
 	...ColorPicker$1,
 	Root: ColorPickerRoot
-};
+});
 injectComponentStyle("color-picker");
 //#endregion
 export { ColorPicker };

package/dist/components/combobox/index.d.mts

@@ -11,7 +11,30 @@ type ComboboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ComboboxRoot<T extends CollectionItem>(props: ComboboxRootProps<T> & ComboboxOwnProps): import("solid-js").JSX.Element;
-export declare const Combobox: Omit<typeof Combobox$1, "Root"> & {
+type ComboboxOption = {
+  label: string;
+  value: string;
+};
+type ComboboxFacadeValue = string | string[];
+type ComboboxParts = Omit<typeof Combobox$1, "Root"> & {
   Root: typeof ComboboxRoot;
 };
+export interface ComboboxFacadeProps {
+  value?: ComboboxFacadeValue;
+  defaultValue?: ComboboxFacadeValue;
+  options: ComboboxOption[];
+  multiple?: boolean;
+  /** Show the clear-value control when the machine allows it. */
+  clearable?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  /** One rung of the control-height ladder for the field row. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value?: ComboboxFacadeValue) => void;
+}
+declare function ComboboxFacade(props: ComboboxFacadeProps): import("solid-js").JSX.Element;
+export declare const Combobox: typeof ComboboxFacade & ComboboxParts;
 //#endregion

package/dist/components/combobox/index.mjs

@@ -1,18 +1,139 @@
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
-import { Combobox as Combobox$1 } from "@ark-ui/solid/combobox";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, Show, splitProps } from "solid-js";
+import { Combobox as Combobox$1, createListCollection } from "@ark-ui/solid/combobox";
 //#region src/components/combobox/index.tsx
 function ComboboxRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Combobox$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("combobox", () => rest.id);
+	return createComponent(Combobox$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Combobox = {
+function toComboboxValue(value) {
+	if (value === void 0) return void 0;
+	return Array.isArray(value) ? value : [value];
+}
+function fromComboboxValue(value, multiple) {
+	return multiple ? value : value.at(0);
+}
+function ComboboxFacade(props) {
+	injectComponentStyle("combobox");
+	const collection = createListCollection({ items: props.options });
+	return createComponent(ComboboxRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		collection,
+		get defaultValue() {
+			return toComboboxValue(props.defaultValue);
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get multiple() {
+			return props.multiple;
+		},
+		get placeholder() {
+			return props.placeholder;
+		},
+		get required() {
+			return props.required;
+		},
+		lazyMount: true,
+		unmountOnExit: true
+	}, () => {
+		return props.value === void 0 ? {} : { value: toComboboxValue(props.value) };
+	}, {
+		onValueChange: (event) => props.onValueChange?.(fromComboboxValue(event.value, props.multiple)),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Combobox$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Combobox$1.Control, { get children() {
+					return [
+						createComponent(Combobox$1.Input, {
+							get "aria-label"() {
+								return memo(() => {
+									return !!props.label;
+								})() ? void 0 : props.placeholder;
+							},
+							get placeholder() {
+								return props.placeholder;
+							}
+						}),
+						createComponent(Show, {
+							get when() {
+								return props.clearable !== false;
+							},
+							get children() {
+								return createComponent(Combobox$1.ClearTrigger, { get children() {
+									return iconNode("x", {
+										width: "14",
+										height: "14"
+									});
+								} });
+							}
+						}),
+						createComponent(Combobox$1.Trigger, { get children() {
+							return iconNode("chevron-down", {
+								width: "16",
+								height: "16"
+							});
+						} })
+					];
+				} }),
+				createComponent(Combobox$1.Positioner, { get children() {
+					return createComponent(Combobox$1.Content, { get children() {
+						return [createComponent(Combobox$1.Empty, { children: "No results found" }), createComponent(Combobox$1.List, { get children() {
+							return createComponent(For, {
+								get each() {
+									return collection.items;
+								},
+								children: (item) => createComponent(Combobox$1.Item, {
+									item,
+									get children() {
+										return [createComponent(Combobox$1.ItemText, { get children() {
+											return item.label;
+										} }), createComponent(Combobox$1.ItemIndicator, { get children() {
+											return iconNode("check", {
+												width: "14",
+												height: "14"
+											});
+										} })];
+									}
+								})
+							});
+						} })];
+					} });
+				} })
+			];
+		}
+	}));
+}
+const Combobox = defineFamily(ComboboxFacade, {
 	...Combobox$1,
 	Root: ComboboxRoot
-};
+});
 injectComponentStyle("combobox");
 //#endregion
 export { Combobox };