fluid-primitives 0.19.1 → 1.0.0-beta.1

package/dist/number-input.js

@@ -1,58 +1,57 @@
-import { a as Machine, d as FieldAwareComponent, i as mergeProps, r as normalizeProps } from "./Client-C51NSHxg.js";
-import { a as getLabelId, t as getControlId } from "./field.dom-CJQXpQbZ.js";
+import { K as registerClientPropConverters, a as normalizeProps, at as Machine, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
 import * as numberInput from "@zag-js/number-input";
 
 //#region Resources/Private/Primitives/NumberInput/NumberInput.ts
+registerClientPropConverters("numberInput", { formatOptions: (formatOptions) => formatOptions });
 var NumberInput = class extends FieldAwareComponent {
-	static name = "number-input";
-	propsWithField(props, fieldMachine) {
+	static componentName = "numberInput";
+	propsWithField(props, field) {
 		return {
 			...props,
-			disabled: props.disabled ?? fieldMachine.context.get("disabled"),
-			readOnly: props.readOnly ?? fieldMachine.context.get("readOnly"),
-			required: props.required ?? fieldMachine.context.get("required"),
-			invalid: props.invalid ?? fieldMachine.context.get("invalid"),
-			name: props.name ?? fieldMachine.prop("name"),
-			ids: {
-				...props.ids,
-				label: getLabelId(fieldMachine.scope),
-				input: getControlId(fieldMachine.scope)
+			disabled: props.disabled ?? field.disabled,
+			readOnly: props.readOnly ?? field.readOnly,
+			required: props.required ?? field.required,
+			invalid: props.invalid ?? field.invalid,
+			name: props.name ?? field.name
+		};
+	}
+	transformProps(props) {
+		return {
+			...props,
+			onValueChange: (details) => {
+				this.hydrator.query("input")?.dispatchEvent(new Event("input", { bubbles: true }));
+				props?.onValueChange?.(details);
 			}
 		};
 	}
 	initMachine(props) {
 		props = this.withFieldProps(props);
-		return new Machine(numberInput.machine, props);
+		const [machineProps] = numberInput.splitProps(props);
+		return new Machine(numberInput.machine, machineProps);
 	}
 	initApi() {
 		return numberInput.connect(this.machine.service, normalizeProps);
 	}
 	render() {
 		this.subscribeToFieldService();
-		const rootEl = this.getElement("root");
+		const rootEl = this.hydrator.query("root");
 		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
-		const labelEl = this.getElement("label");
+		const labelEl = this.hydrator.query("label");
 		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
-		const controlEl = this.getElement("control");
+		const controlEl = this.hydrator.query("control");
 		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
-		const inputEl = this.getElement("input");
+		const inputEl = this.hydrator.query("input");
 		if (inputEl) {
-			const mergedProps = mergeProps(this.api.getInputProps(), { "aria-describedby": this.fieldMachine?.context.get("describeIds") || void 0 });
+			const mergedProps = mergeProps(this.api.getInputProps(), { "aria-describedby": this.field?.ariaDescribedby });
 			this.spreadProps(inputEl, mergedProps);
 		}
-		const incrementTriggerEl = this.getElement("increment-trigger");
-		if (incrementTriggerEl) {
-			const triggerProps = mergeProps(this.api.getIncrementTriggerProps(), { "aria-label": this.userProps?.translations?.incrementLabel || null });
-			this.spreadProps(incrementTriggerEl, triggerProps);
-		}
-		const decrementTriggerEl = this.getElement("decrement-trigger");
-		if (decrementTriggerEl) {
-			const triggerProps = mergeProps(this.api.getDecrementTriggerProps(), { "aria-label": this.userProps?.translations?.decrementLabel || null });
-			this.spreadProps(decrementTriggerEl, triggerProps);
-		}
-		const valueTextEl = this.getElement("value-text");
+		const incrementTriggerEl = this.hydrator.query("incrementTrigger");
+		if (incrementTriggerEl) this.spreadProps(incrementTriggerEl, this.api.getIncrementTriggerProps());
+		const decrementTriggerEl = this.hydrator.query("decrementTrigger");
+		if (decrementTriggerEl) this.spreadProps(decrementTriggerEl, this.api.getDecrementTriggerProps());
+		const valueTextEl = this.hydrator.query("valueText");
 		if (valueTextEl) this.spreadProps(valueTextEl, this.api.getValueTextProps());
-		const scrubberEl = this.getElement("scrubber");
+		const scrubberEl = this.hydrator.query("scrubber");
 		if (scrubberEl) this.spreadProps(scrubberEl, this.api.getScrubberProps());
 	}
 };

package/dist/popover.d.ts

@@ -1,10 +1,18 @@
-import { a as Machine, f as Component } from "./index-B8JCdyld.js";
-import * as popover from "@zag-js/popover";
+import { X as ConverterMachineProps, c as Machine, z as Component } from "./index-B06gIN_k.js";
 import * as _$_zag_js_types0 from "@zag-js/types";
+import * as popover from "@zag-js/popover";
 
 //#region Resources/Private/Primitives/Popover/Popover.d.ts
+declare const popoverPropConverters: {
+  positioning: (positioning: popover.Props["positioning"]) => popover.PositioningOptions | undefined;
+};
+declare module 'fluid-primitives' {
+  interface HydrationPropsOverrides {
+    popover: ConverterMachineProps<typeof popoverPropConverters>;
+  }
+}
 declare class Popover extends Component<popover.Props, popover.Api> {
-  static name: string;
+  static componentName: string;
   initMachine(props: popover.Props): Machine<any>;
   initApi(): popover.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;

package/dist/popover.js

@@ -1,15 +1,17 @@
-import { a as Machine, i as mergeProps, p as Component, r as normalizeProps } from "./Client-C51NSHxg.js";
+import { K as registerClientPropConverters, a as normalizeProps, at as Machine, rt as Component } from "./Client-HrMIqv7d.js";
 import * as popover from "@zag-js/popover";
 
 //#region Resources/Private/Primitives/Popover/Popover.ts
+registerClientPropConverters("popover", { positioning: (positioning) => positioning });
 var Popover = class extends Component {
-	static name = "popover";
+	static componentName = "popover";
 	initMachine(props) {
+		const [machineProps] = popover.splitProps(props);
 		return new Machine(popover.machine, {
-			...props,
+			...machineProps,
 			positioning: {
 				gutter: 6,
-				...props.positioning
+				...machineProps.positioning
 			}
 		});
 	}
@@ -17,26 +19,23 @@ var Popover = class extends Component {
 		return popover.connect(this.machine.service, normalizeProps);
 	}
 	render() {
-		const triggerEl = this.getElement("trigger");
-		if (triggerEl) this.spreadProps(triggerEl, this.api.getTriggerProps());
-		const positionerEl = this.getElement("positioner");
+		this.spreadPropsByOptionalValue("trigger", ({ value }) => this.api.getTriggerProps({ value }));
+		const positionerEl = this.hydrator.query("positioner");
 		if (positionerEl) this.spreadProps(positionerEl, this.api.getPositionerProps());
-		const arrowEl = this.getElement("arrow");
+		const arrowEl = this.hydrator.query("arrow");
 		if (arrowEl) this.spreadProps(arrowEl, this.api.getArrowProps());
-		const arrowTipEl = this.getElement("arrow-tip");
+		const arrowTipEl = this.hydrator.query("arrowTip");
 		if (arrowTipEl) this.spreadProps(arrowTipEl, this.api.getArrowTipProps());
-		const contentEl = this.getElement("content");
+		const contentEl = this.hydrator.query("content");
 		if (contentEl) this.spreadProps(contentEl, this.api.getContentProps());
-		const titleEl = this.getElement("title");
+		const titleEl = this.hydrator.query("title");
 		if (titleEl) this.spreadProps(titleEl, this.api.getTitleProps());
-		const descriptionEl = this.getElement("description");
+		const descriptionEl = this.hydrator.query("description");
 		if (descriptionEl) this.spreadProps(descriptionEl, this.api.getDescriptionProps());
-		const closeTriggerEl = this.getElement("close-trigger");
-		if (closeTriggerEl) {
-			const closeTriggerProps = mergeProps(this.api.getCloseTriggerProps(), { "aria-label": this.userProps?.translations?.closeTriggerLabel || null });
-			this.spreadProps(closeTriggerEl, closeTriggerProps);
-		}
-		const indicatorEl = this.getElement("indicator");
+		this.hydrator.queryAll("closeTrigger").forEach((closeTriggerEl) => {
+			this.spreadProps(closeTriggerEl, this.api.getCloseTriggerProps());
+		});
+		const indicatorEl = this.hydrator.query("indicator");
 		if (indicatorEl) this.spreadProps(indicatorEl, this.api.getIndicatorProps());
 	}
 };

package/dist/radio-group.d.ts

@@ -1,11 +1,11 @@
-import { a as Machine, d as FieldMachine, u as FieldAwareComponent } from "./index-B8JCdyld.js";
-import * as radioGroup from "@zag-js/radio-group";
+import { b as FieldClientApi, c as Machine, y as FieldAwareComponent } from "./index-B06gIN_k.js";
 import * as _$_zag_js_types0 from "@zag-js/types";
+import * as radioGroup from "@zag-js/radio-group";
 
 //#region Resources/Private/Primitives/RadioGroup/RadioGroup.d.ts
 declare class RadioGroup extends FieldAwareComponent<radioGroup.Props, radioGroup.Api> {
-  static name: string;
-  propsWithField(props: radioGroup.Props, fieldMachine: FieldMachine): radioGroup.Props;
+  static componentName: string;
+  propsWithField(props: radioGroup.Props, field: FieldClientApi): radioGroup.Props;
   initMachine(props: radioGroup.Props): Machine<any>;
   initApi(): radioGroup.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;

package/dist/radio-group.js

@@ -1,64 +1,57 @@
-import { a as Machine, d as FieldAwareComponent, i as mergeProps, r as normalizeProps } from "./Client-C51NSHxg.js";
+import { a as normalizeProps, at as Machine, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
 import * as radioGroup from "@zag-js/radio-group";
 
 //#region Resources/Private/Primitives/RadioGroup/RadioGroup.ts
 var RadioGroup = class extends FieldAwareComponent {
-	static name = "radio-group";
-	propsWithField(props, fieldMachine) {
+	static componentName = "radioGroup";
+	propsWithField(props, field) {
 		return {
 			...props,
-			disabled: props.disabled ?? fieldMachine.context.get("disabled"),
-			readOnly: props.readOnly ?? fieldMachine.context.get("readOnly"),
-			required: props.required ?? fieldMachine.context.get("required"),
-			invalid: props.invalid ?? fieldMachine.context.get("invalid"),
-			name: props.name ?? fieldMachine.prop("name")
+			disabled: props.disabled ?? field.disabled,
+			readOnly: props.readOnly ?? field.readOnly,
+			required: props.required ?? field.required,
+			invalid: props.invalid ?? field.invalid,
+			name: props.name ?? field.name
 		};
 	}
 	initMachine(props) {
 		props = this.withFieldProps(props);
-		return new Machine(radioGroup.machine, props);
+		const [machineProps] = radioGroup.splitProps(props);
+		return new Machine(radioGroup.machine, machineProps);
 	}
 	initApi() {
 		return radioGroup.connect(this.machine.service, normalizeProps);
 	}
 	render() {
 		this.subscribeToFieldService();
-		const rootEl = this.getElement("root");
+		const rootEl = this.hydrator.query("root");
 		if (rootEl) this.spreadProps(rootEl, mergeProps(this.api.getRootProps(), {
-			"aria-invalid": this.fieldMachine?.context.get("invalid") || void 0,
-			"aria-describedby": this.fieldMachine?.context.get("describeIds") || void 0
+			"aria-invalid": this.field?.invalid || void 0,
+			"aria-describedby": this.field?.ariaDescribedby
 		}));
-		const labelEl = this.getElement("label");
+		const labelEl = this.hydrator.query("label");
 		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
-		this.getElements("item").forEach((itemEl) => {
-			this.spreadProps(itemEl, this.api.getItemProps({
-				value: itemEl.dataset.value,
-				disabled: itemEl.getAttribute("data-disabled") === "true",
-				invalid: itemEl.getAttribute("data-invalid") === "true"
-			}));
-		});
-		this.getElements("item-text").forEach((itemTextEl) => {
-			this.spreadProps(itemTextEl, this.api.getItemTextProps({
-				value: itemTextEl.dataset.value,
-				disabled: itemTextEl.getAttribute("data-disabled") === "true",
-				invalid: itemTextEl.getAttribute("data-invalid") === "true"
-			}));
-		});
-		this.getElements("item-control").forEach((itemControlEl) => {
-			this.spreadProps(itemControlEl, this.api.getItemControlProps({
-				value: itemControlEl.dataset.value,
-				disabled: itemControlEl.getAttribute("data-disabled") === "true",
-				invalid: itemControlEl.getAttribute("data-invalid") === "true"
-			}));
-		});
-		this.getElements("item-hidden-input").forEach((itemHiddenInputEl) => {
-			this.spreadProps(itemHiddenInputEl, this.api.getItemHiddenInputProps({
-				value: itemHiddenInputEl.dataset.value,
-				disabled: itemHiddenInputEl.getAttribute("data-disabled") === "true",
-				invalid: itemHiddenInputEl.getAttribute("data-invalid") === "true"
-			}));
-		});
-		const indicatorEl = this.getElement("indicator");
+		this.spreadPropsByValue("item", ({ el, value }) => this.api.getItemProps({
+			value,
+			disabled: el.hasAttribute("data-disabled"),
+			invalid: el.hasAttribute("data-invalid")
+		}));
+		this.spreadPropsByValue("itemText", ({ el, value }) => this.api.getItemTextProps({
+			value,
+			disabled: el.hasAttribute("data-disabled"),
+			invalid: el.hasAttribute("data-invalid")
+		}));
+		this.spreadPropsByValue("itemControl", ({ el, value }) => this.api.getItemControlProps({
+			value,
+			disabled: el.hasAttribute("data-disabled"),
+			invalid: el.hasAttribute("data-invalid")
+		}));
+		this.spreadPropsByValue("itemHiddenInput", ({ el, value }) => this.api.getItemHiddenInputProps({
+			value,
+			disabled: el.hasAttribute("data-disabled"),
+			invalid: el.hasAttribute("data-invalid")
+		}));
+		const indicatorEl = this.hydrator.query("indicator");
 		if (indicatorEl) this.spreadProps(indicatorEl, this.api.getIndicatorProps());
 	}
 };

package/dist/scroll-area.d.ts

@@ -1,10 +1,10 @@
-import { a as Machine, f as Component } from "./index-B8JCdyld.js";
-import * as scrollArea from "@zag-js/scroll-area";
+import { c as Machine, z as Component } from "./index-B06gIN_k.js";
 import { PropTypes } from "@zag-js/types";
+import * as scrollArea from "@zag-js/scroll-area";
 
 //#region Resources/Private/Primitives/ScrollArea/ScrollArea.d.ts
 declare class ScrollArea extends Component<scrollArea.Props, scrollArea.Api<PropTypes>> {
-  static name: string;
+  static componentName: string;
   initMachine(props: scrollArea.Props): Machine<any>;
   initApi(): scrollArea.Api<PropTypes<{
     [x: string]: any;

package/dist/scroll-area.js

@@ -1,28 +1,29 @@
-import { a as Machine, p as Component, r as normalizeProps } from "./Client-C51NSHxg.js";
+import { a as normalizeProps, at as Machine, rt as Component } from "./Client-HrMIqv7d.js";
 import * as scrollArea from "@zag-js/scroll-area";
 
 //#region Resources/Private/Primitives/ScrollArea/ScrollArea.ts
 var ScrollArea = class extends Component {
-	static name = "scroll-area";
+	static componentName = "scrollArea";
 	initMachine(props) {
-		return new Machine(scrollArea.machine, props);
+		const [machineProps] = scrollArea.splitProps(props);
+		return new Machine(scrollArea.machine, machineProps);
 	}
 	initApi() {
 		return scrollArea.connect(this.machine.service, normalizeProps);
 	}
 	render() {
-		const rootEl = this.getElement("root");
+		const rootEl = this.hydrator.query("root");
 		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
-		const viewportEl = this.getElement("viewport");
+		const viewportEl = this.hydrator.query("viewport");
 		if (viewportEl) this.spreadProps(viewportEl, this.api.getViewportProps());
-		const contentEl = this.getElement("content");
+		const contentEl = this.hydrator.query("content");
 		if (contentEl) this.spreadProps(contentEl, this.api.getContentProps());
-		this.getElements("scrollbar").forEach((scrollbarEl) => {
+		this.hydrator.queryAll("scrollbar").forEach((scrollbarEl) => {
 			this.spreadProps(scrollbarEl, this.api.getScrollbarProps({ orientation: scrollbarEl.getAttribute("data-orientation") }));
 		});
-		const cornerEl = this.getElement("corner");
+		const cornerEl = this.hydrator.query("corner");
 		if (cornerEl) this.spreadProps(cornerEl, this.api.getCornerProps());
-		this.getElements("thumb").forEach((thumbEl) => {
+		this.hydrator.queryAll("thumb").forEach((thumbEl) => {
 			this.spreadProps(thumbEl, this.api.getThumbProps({ orientation: thumbEl.getAttribute("data-orientation") }));
 		});
 	}

package/dist/select.d.ts

@@ -1,59 +1,21 @@
-import { a as Machine, d as FieldMachine, u as FieldAwareComponent } from "./index-B8JCdyld.js";
+import { X as ConverterMachineProps, b as FieldClientApi, c as Machine, h as getListCollectionFromHydrationData, y as FieldAwareComponent } from "./index-B06gIN_k.js";
 import * as _$_zag_js_collection0 from "@zag-js/collection";
-import * as select from "@zag-js/select";
 import * as _$_zag_js_types0 from "@zag-js/types";
+import * as select from "@zag-js/select";
 
 //#region Resources/Private/Primitives/Select/Select.d.ts
+declare const selectPropConverters: {
+  collection: (collection: Parameters<typeof getListCollectionFromHydrationData>[0]) => _$_zag_js_collection0.ListCollection<unknown>;
+  positioning: (positioning: select.Props["positioning"]) => select.PositioningOptions | undefined;
+};
+declare module 'fluid-primitives' {
+  interface HydrationPropsOverrides {
+    select: ConverterMachineProps<typeof selectPropConverters>;
+  }
+}
 declare class Select extends FieldAwareComponent<select.Props, select.Api> {
-  static name: string;
-  propsWithField(props: select.Props, fieldMachine: FieldMachine): select.Props;
-  transformProps(props: select.Props): {
-    collection: _$_zag_js_collection0.ListCollection<any>;
-    translations?: select.IntlTranslations | undefined;
-    ids?: Partial<{
-      root: string;
-      content: string;
-      control: string;
-      trigger: string;
-      clearTrigger: string;
-      label: string;
-      hiddenSelect: string;
-      positioner: string;
-      item: (id: string | number) => string;
-      itemGroup: (id: string | number) => string;
-      itemGroupLabel: (id: string | number) => string;
-    }> | undefined;
-    name?: string | undefined;
-    form?: string | undefined;
-    autoComplete?: string | undefined;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    required?: boolean | undefined;
-    closeOnSelect?: boolean | undefined;
-    onSelect?: ((details: select.SelectionDetails) => void) | undefined;
-    onHighlightChange?: ((details: select.HighlightChangeDetails<any>) => void) | undefined;
-    onValueChange?: ((details: select.ValueChangeDetails<any>) => void) | undefined;
-    onOpenChange?: ((details: select.OpenChangeDetails) => void) | undefined;
-    positioning?: select.PositioningOptions | undefined;
-    value?: string[] | undefined;
-    defaultValue?: string[] | undefined;
-    highlightedValue?: string | null | undefined;
-    defaultHighlightedValue?: string | null | undefined;
-    loopFocus?: boolean | undefined;
-    multiple?: boolean | undefined;
-    open?: boolean | undefined;
-    defaultOpen?: boolean | undefined;
-    scrollToIndexFn?: ((details: select.ScrollToIndexDetails) => void) | undefined;
-    composite?: boolean | undefined;
-    deselectable?: boolean | undefined;
-    dir?: "ltr" | "rtl" | undefined;
-    id: string;
-    getRootNode?: (() => ShadowRoot | Document | Node) | undefined;
-    onPointerDownOutside?: ((event: select.PointerDownOutsideEvent) => void) | undefined;
-    onFocusOutside?: ((event: select.FocusOutsideEvent) => void) | undefined;
-    onInteractOutside?: ((event: select.InteractOutsideEvent) => void) | undefined;
-  };
+  static componentName: string;
+  propsWithField(props: select.Props, field: FieldClientApi): select.Props;
   initMachine(props: select.Props): Machine<any>;
   initApi(): select.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;

package/dist/select.js

@@ -1,84 +1,91 @@
-import { a as Machine, c as getListCollectionFromHydrationData, d as FieldAwareComponent, i as mergeProps, r as normalizeProps } from "./Client-C51NSHxg.js";
-import { a as getLabelId, t as getControlId } from "./field.dom-CJQXpQbZ.js";
+import { $ as getListCollectionFromHydrationData, K as registerClientPropConverters, a as normalizeProps, at as Machine, o as mergeProps, s as FieldAwareComponent } from "./Client-HrMIqv7d.js";
 import * as select from "@zag-js/select";
 
 //#region Resources/Private/Primitives/Select/Select.ts
+registerClientPropConverters("select", {
+	collection: (collection) => getListCollectionFromHydrationData(collection),
+	positioning: (positioning) => positioning
+});
 var Select = class extends FieldAwareComponent {
-	static name = "select";
-	propsWithField(props, fieldMachine) {
+	static componentName = "select";
+	propsWithField(props, field) {
 		return {
 			...props,
-			disabled: props.disabled ?? fieldMachine.context.get("disabled"),
-			readOnly: props.readOnly ?? fieldMachine.context.get("readOnly"),
-			required: props.required ?? fieldMachine.context.get("required"),
-			invalid: props.invalid ?? fieldMachine.context.get("invalid"),
-			name: props.name ?? fieldMachine.prop("name"),
-			ids: {
-				...props.ids,
-				label: getLabelId(fieldMachine.scope),
-				hiddenSelect: getControlId(fieldMachine.scope)
-			}
-		};
-	}
-	transformProps(props) {
-		return {
-			...props,
-			get collection() {
-				return getListCollectionFromHydrationData(props.collection);
-			}
+			disabled: props.disabled ?? field.disabled,
+			readOnly: props.readOnly ?? field.readOnly,
+			required: props.required ?? field.required,
+			invalid: props.invalid ?? field.invalid,
+			name: props.name ?? field.name
 		};
 	}
 	initMachine(props) {
-		props = this.withFieldProps(props);
-		return new Machine(select.machine, this.transformProps(props));
+		const [machineProps] = select.splitProps(this.withFieldProps(props));
+		return new Machine(select.machine, machineProps);
 	}
 	initApi() {
 		return select.connect(this.machine.service, normalizeProps);
 	}
 	render = () => {
 		this.subscribeToFieldService();
-		const rootEl = this.getElement("root");
+		const rootEl = this.hydrator.query("root");
 		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
-		const controlEl = this.getElement("control");
+		const controlEl = this.hydrator.query("control");
 		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
-		const hiddenSelectEl = this.getElement("hidden-select");
+		const hiddenSelectEl = this.hydrator.query("hiddenSelect");
 		if (hiddenSelectEl) {
-			const mergedProps = mergeProps(this.api.getHiddenSelectProps(), { "aria-describedby": this.fieldMachine?.context.get("describeIds") || void 0 });
-			this.spreadProps(hiddenSelectEl, mergedProps);
+			this.spreadProps(hiddenSelectEl, this.api.getHiddenSelectProps());
+			const isValueEmpty = this.api.value.length === 0;
+			const defaultOption = hiddenSelectEl.querySelector("option");
+			if (defaultOption) defaultOption.selected = isValueEmpty;
 		}
-		const labelEl = this.getElement("label");
+		const labelEl = this.hydrator.query("label");
 		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
-		const triggerEl = this.getElement("trigger");
-		if (triggerEl) this.spreadProps(triggerEl, this.api.getTriggerProps());
-		const positionerEl = this.getElement("positioner");
+		const triggerEl = this.hydrator.query("trigger");
+		if (triggerEl) {
+			const mergedProps = mergeProps(this.api.getTriggerProps(), { "aria-describedby": this.field?.ariaDescribedby });
+			this.spreadProps(triggerEl, mergedProps);
+		}
+		const positionerEl = this.hydrator.query("positioner");
 		if (positionerEl) this.spreadProps(positionerEl, this.api.getPositionerProps());
-		const contentEl = this.getElement("content");
+		const contentEl = this.hydrator.query("content");
 		if (contentEl) this.spreadProps(contentEl, this.api.getContentProps());
-		const valueTextEl = this.getElement("value-text");
-		if (valueTextEl) this.spreadProps(valueTextEl, mergeProps(this.api.getValueTextProps(), { children: this.api.valueAsString || valueTextEl.dataset.placeholder }));
-		this.getElements("item-group").forEach((itemGroupEl) => {
-			this.spreadProps(itemGroupEl, this.api.getItemGroupProps({ id: itemGroupEl.dataset.id }));
-			const itemGroupLabelEl = this.getElement("item-group-label", itemGroupEl);
-			if (itemGroupLabelEl) this.spreadProps(itemGroupLabelEl, this.api.getItemGroupLabelProps({ htmlFor: itemGroupEl.dataset.id }));
+		const listEl = this.hydrator.query("list");
+		if (listEl) this.spreadProps(listEl, this.api.getListProps());
+		const valueTextEl = this.hydrator.query("valueText");
+		if (valueTextEl) {
+			const currentText = valueTextEl.textContent || valueTextEl.dataset.placeholder || "";
+			const nextValue = this.api.valueAsString || valueTextEl.dataset.placeholder || "";
+			this.spreadProps(valueTextEl, mergeProps(this.api.getValueTextProps(), { children: nextValue }));
+			if (nextValue !== currentText) queueMicrotask(() => {
+				const el = this.hydrator.query("valueText");
+				if (el?.isConnected) {
+					const next = el.cloneNode(true);
+					el.replaceWith(next);
+					next.replaceWith(el);
+				}
+			});
+		}
+		this.spreadPropsByValue("itemGroup", ({ value }) => {
+			return this.api.getItemGroupProps({ id: value });
 		});
-		this.getElements("item").forEach((itemEl) => {
-			const item = this.api.collection.find(itemEl.dataset.value);
-			if (item) this.spreadProps(itemEl, this.api.getItemProps({ item }));
+		this.spreadPropsByValue("itemGroupLabel", ({ value }) => {
+			return this.api.getItemGroupLabelProps({ htmlFor: value });
 		});
-		this.getElements("item-text").forEach((itemTextEl) => {
-			const item = this.api.collection.find(itemTextEl.dataset.value);
-			if (item) this.spreadProps(itemTextEl, this.api.getItemTextProps({ item }));
+		this.spreadPropsByValue("item", ({ value }) => {
+			const item = this.api.collection.find(value);
+			return item ? this.api.getItemProps({ item }) : null;
 		});
-		this.getElements("item-indicator").forEach((itemIndicatorEl) => {
-			const item = this.api.collection.find(itemIndicatorEl.dataset.value);
-			if (item) this.spreadProps(itemIndicatorEl, this.api.getItemIndicatorProps({ item }));
+		this.spreadPropsByValue("itemText", ({ value }) => {
+			const item = this.api.collection.find(value);
+			return item ? this.api.getItemTextProps({ item }) : null;
 		});
-		const clearTriggerEl = this.getElement("clear-trigger");
-		if (clearTriggerEl) {
-			const clearTriggerProps = mergeProps(this.api.getClearTriggerProps(), { "aria-label": this.userProps?.translations?.clearTriggerLabel || null });
-			this.spreadProps(clearTriggerEl, clearTriggerProps);
-		}
-		const indicatorEl = this.getElement("indicator");
+		this.spreadPropsByValue("itemIndicator", ({ value }) => {
+			const item = this.api.collection.find(value);
+			return item ? this.api.getItemIndicatorProps({ item }) : null;
+		});
+		const clearTriggerEl = this.hydrator.query("clearTrigger");
+		if (clearTriggerEl) this.spreadProps(clearTriggerEl, this.api.getClearTriggerProps());
+		const indicatorEl = this.hydrator.query("indicator");
 		if (indicatorEl) this.spreadProps(indicatorEl, this.api.getIndicatorProps());
 	};
 };

package/dist/slider.d.ts

@@ -0,0 +1,27 @@
+import { X as ConverterMachineProps, b as FieldClientApi, c as Machine, y as FieldAwareComponent } from "./index-B06gIN_k.js";
+import * as _$_zag_js_types0 from "@zag-js/types";
+import * as slider from "@zag-js/slider";
+
+//#region Resources/Private/Primitives/Slider/Slider.d.ts
+declare const sliderPropConverters: {
+  thumbSize: (thumbSize: slider.Props["thumbSize"]) => {
+    width: number;
+    height: number;
+  } | undefined;
+};
+declare module 'fluid-primitives' {
+  interface HydrationPropsOverrides {
+    slider: ConverterMachineProps<typeof sliderPropConverters>;
+  }
+}
+declare class Slider extends FieldAwareComponent<slider.Props, slider.Api> {
+  static componentName: string;
+  propsWithField(props: slider.Props, field: FieldClientApi): slider.Props;
+  initMachine(props: slider.Props): Machine<any>;
+  initApi(): slider.Api<_$_zag_js_types0.PropTypes<{
+    [x: string]: any;
+  }>>;
+  render(): void;
+}
+//#endregion
+export { Slider };