solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/lib/server/fieldset/index.js

@@ -1,8 +1,9 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { n as useFieldsetRootContext, t as FieldsetRootContext } from "../FieldsetRootContext-DyNqCjK6.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, createUniqueId, omit } from "solid-js";
 //#region src/fieldset/root/FieldsetRoot.tsx
 /**
@@ -12,23 +13,22 @@ import { createEffect, createMemo, createSignal, createUniqueId, omit } from "so
 function FieldsetRoot(props) {
 	const parentContext = useFieldsetRootContext(true);
 	const [legendId, setLegendId] = createSignal();
-	const others = omit(props, "as", "class", "disabled", "style");
+	const others = omit(props, "render", "class", "disabled", "style");
 	const disabled = createMemo(() => parentContext?.disabled() || (props.disabled ?? false));
 	const state = createMemo(() => ({ disabled: disabled() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const context = {
+		legendId,
+		setLegendId,
+		disabled
+	};
+	const Render = useRender(props, () => state(), (props) => ssrElement("fieldset", props, void 0, true));
 	return FieldsetRootContext({
-		value: {
-			legendId,
-			setLegendId,
-			disabled
-		},
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "fieldset";
-				},
+			return Render(mergeProps({
 				get ["class"]() {
 					return classValue();
 				},
@@ -54,7 +54,7 @@ function FieldsetRoot(props) {
 function FieldsetLegend(props) {
 	const context = useFieldsetRootContext();
 	const generatedId = `base-ui-${createUniqueId()}`;
-	const others = omit(props, "as", "class", "id", "style");
+	const others = omit(props, "render", "class", "id", "style");
 	const id = createMemo(() => props.id ?? generatedId);
 	const state = createMemo(() => ({ disabled: context.disabled() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
@@ -66,10 +66,7 @@ function FieldsetLegend(props) {
 			context.setLegendId((registeredId) => registeredId === currentId ? void 0 : registeredId);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		get id() {
 			return id();
 		},

package/dist/lib/server/form/index.js

@@ -1,10 +1,11 @@
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { w as none } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
 import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as FormContext } from "../FormContext-pvESt85v.js";
+import { t as FormContext } from "../FormContext-CYwo_ZnB.js";
 import { t as hasFormError } from "../form-types-P7-SCWyr.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, omit, untrack } from "solid-js";
 //#region src/form/Form.tsx
 var EMPTY_ERRORS = Object.freeze({});
@@ -14,14 +15,16 @@ function Form(props) {
 	let formElement = null;
 	let submitted = false;
 	let submitAttempted = false;
+	let submitCount = 0;
 	const fields = /* @__PURE__ */ new Map();
 	const formProps = props;
 	let previousExternalErrors = untrack(() => formProps.errors);
 	const internalProps = props;
-	const others = omit(props, "actionsRef", "as", "class", "errors", "onFormSubmit", "onSubmit", "ref", "style", "validationMode");
+	const others = omit(props, "actionsRef", "render", "class", "errors", "onFormSubmit", "onSubmit", "ref", "style", "validationMode");
 	const [errors, setErrors] = createSignal(untrack(() => formProps.errors) ?? EMPTY_ERRORS);
 	const validationMode = createMemo(() => formProps.validationMode ?? "onSubmit");
 	const classValue = createMemo(() => resolveClass(props.class, EMPTY_STATE));
+	const Render = useRender(props, () => EMPTY_STATE, (props) => ssrElement("form", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, EMPTY_STATE));
 	function registerField(field) {
 		fields.set(field.token, field);
@@ -52,11 +55,13 @@ function Form(props) {
 		return true;
 	}
 	function clearError(name) {
-		const currentErrors = untrack(errors);
-		if (!name || !Object.hasOwn(currentErrors, name)) return;
-		const nextErrors = { ...currentErrors };
-		delete nextErrors[name];
-		setErrors(nextErrors);
+		if (!name) return;
+		setErrors((currentErrors) => {
+			if (!Object.hasOwn(currentErrors, name)) return currentErrors;
+			const nextErrors = { ...currentErrors };
+			delete nextErrors[name];
+			return nextErrors;
+		});
 	}
 	const actions = { validate(fieldName) {
 		if (fieldName) {
@@ -71,6 +76,7 @@ function Form(props) {
 	const callExternalSubmit = composeEventHandlers(() => internalProps.onSubmit);
 	function handleSubmit(event) {
 		submitAttempted = true;
+		submitCount += 1;
 		for (const field of fields.values()) field.validate();
 		if (focusFirstInvalid()) {
 			event.preventDefault();
@@ -88,6 +94,7 @@ function Form(props) {
 		errors,
 		validationMode,
 		submitAttempted: () => submitAttempted,
+		submitCount: () => submitCount,
 		formElement: () => formElement,
 		clearError,
 		registerField,
@@ -109,10 +116,7 @@ function Form(props) {
 	return FormContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "form";
-				},
+			return Render(mergeProps({
 				ref: [((element) => {
 					formElement = element.tagName === "FORM" ? element : null;
 				}), internalProps.ref],

package/dist/lib/server/index.js

@@ -1,3 +1,4 @@
+import { t as useRender } from "./useRender-CryVdCjs.js";
 import { Accordion as index_parts_exports } from "./accordion/index.js";
 import { AlertDialog as index_parts_exports$1 } from "./alert-dialog/index.js";
 import { n as useDirection } from "./DirectionContext-YORWLF08.js";
@@ -7,8 +8,8 @@ import { Button } from "./button/index.js";
 import { Checkbox as index_parts_exports$4 } from "./checkbox/index.js";
 import { CheckboxGroup } from "./checkbox-group/index.js";
 import { Collapsible as index_parts_exports$5 } from "./collapsible/index.js";
-import { Combobox as index_parts_exports$6 } from "./combobox/index.js";
-import { t as Separator } from "./Separator-vhhYxWGr.js";
+import { Combobox as index_parts_exports$6, createComboboxItems } from "./combobox/index.js";
+import { t as Separator } from "./Separator-DTvtnxzP.js";
 import { ContextMenu as index_parts_exports$7 } from "./context-menu/index.js";
 import { CSPProvider } from "./csp-provider/index.js";
 import { DirectionProvider } from "./direction-provider/index.js";
@@ -40,4 +41,5 @@ import { Toolbar as index_parts_exports$27 } from "./toolbar/index.js";
 import { Tooltip as index_parts_exports$28 } from "./tooltip/index.js";
 import { Toggle } from "./toggle/index.js";
 import { ToggleGroup } from "./toggle-group/index.js";
-export { index_parts_exports as Accordion, index_parts_exports$1 as AlertDialog, index_parts_exports$2 as Autocomplete, index_parts_exports$3 as Avatar, Button, CSPProvider, index_parts_exports$4 as Checkbox, CheckboxGroup, index_parts_exports$5 as Collapsible, index_parts_exports$6 as Combobox, index_parts_exports$7 as ContextMenu, index_parts_exports$8 as Dialog, DirectionProvider, index_parts_exports$9 as Drawer, index_parts_exports$10 as Field, index_parts_exports$11 as Fieldset, Form, Input, index_parts_exports$12 as Menu, Menubar, index_parts_exports$13 as Meter, index_parts_exports$14 as NavigationMenu, index_parts_exports$15 as NumberField, index_parts_exports$16 as OTPField, index_parts_exports$17 as Popover, index_parts_exports$18 as PreviewCard, index_parts_exports$19 as Progress, index_parts_exports$20 as Radio, RadioGroup, index_parts_exports$21 as ScrollArea, index_parts_exports$22 as Select, Separator, index_parts_exports$23 as Slider, index_parts_exports$24 as Switch, index_parts_exports$25 as Tabs, index_parts_exports$26 as Toast, Toggle, ToggleGroup, index_parts_exports$27 as Toolbar, index_parts_exports$28 as Tooltip, createToastManager, useDirection, useToastManager };
+import "./use-render/index.js";
+export { index_parts_exports as Accordion, index_parts_exports$1 as AlertDialog, index_parts_exports$2 as Autocomplete, index_parts_exports$3 as Avatar, Button, CSPProvider, index_parts_exports$4 as Checkbox, CheckboxGroup, index_parts_exports$5 as Collapsible, index_parts_exports$6 as Combobox, index_parts_exports$7 as ContextMenu, index_parts_exports$8 as Dialog, DirectionProvider, index_parts_exports$9 as Drawer, index_parts_exports$10 as Field, index_parts_exports$11 as Fieldset, Form, Input, index_parts_exports$12 as Menu, Menubar, index_parts_exports$13 as Meter, index_parts_exports$14 as NavigationMenu, index_parts_exports$15 as NumberField, index_parts_exports$16 as OTPField, index_parts_exports$17 as Popover, index_parts_exports$18 as PreviewCard, index_parts_exports$19 as Progress, index_parts_exports$20 as Radio, RadioGroup, index_parts_exports$21 as ScrollArea, index_parts_exports$22 as Select, Separator, index_parts_exports$23 as Slider, index_parts_exports$24 as Switch, index_parts_exports$25 as Tabs, index_parts_exports$26 as Toast, Toggle, ToggleGroup, index_parts_exports$27 as Toolbar, index_parts_exports$28 as Tooltip, createComboboxItems, createToastManager, useDirection, useRender, useToastManager };

package/dist/lib/server/input/index.js

@@ -1,4 +1,4 @@
-import { t as FieldControl } from "../FieldControl-Y_kI7ARp.js";
+import { t as FieldControl } from "../FieldControl-BDeNR3ug.js";
 //#region src/input/Input.tsx
 /**
 * A native input element that automatically integrates with Field.

package/dist/lib/server/internals/form-context/index.js

@@ -1,2 +1,2 @@
-import { n as useFormContext, t as FormContext } from "../../FormContext-pvESt85v.js";
+import { n as useFormContext, t as FormContext } from "../../FormContext-CYwo_ZnB.js";
 export { FormContext, useFormContext };

package/dist/lib/server/internals/labelable-provider/index.js

@@ -1,4 +1,4 @@
-import { n as createLabelableContext, r as useLabelableContext, t as LabelableContext } from "../../LabelableContext-DZP3rgAY.js";
+import { n as createLabelableContext, r as useLabelableContext, t as LabelableContext } from "../../LabelableContext-BTeF0IWb.js";
 import { untrack } from "solid-js";
 //#region src/internals/labelable-provider/LabelableProvider.tsx
 /** Provides the internal accessible label and description graph. */

package/dist/lib/server/menu/index.js

@@ -1,21 +1,23 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
-import { N as triggerPress, j as triggerFocus, t as cancelOpen } from "../internals/reasons.js";
+import { N as triggerPress, j as triggerFocus, t as cancelOpen, u as focusOut } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as PopupViewport } from "../PopupViewport-3r_KTFwX.js";
-import { n as createTriggerRegistration } from "../PopupStore-DEs3FAEe.js";
-import { r as createHoverInteraction, t as safePolygon } from "../safePolygon-CAm5RJGv.js";
-import { i as pressableTriggerOpenStateMapping } from "../popupStateMapping-nKoUwoke.js";
-import { i as createPopupHandleStore, n as DetachedPopupStore, t as BasePopupHandle } from "../PopupHandle-DthPgNjy.js";
-import { t as TriggerFocusGuards } from "../TriggerFocusGuards-sbGwf45f.js";
+import { n as contains } from "../dom-Crg_2R-j.js";
+import { t as PopupViewport } from "../PopupViewport-DftN5VUp.js";
+import { n as createTriggerRegistration } from "../PopupStore-kHjFPiQ5.js";
+import { r as createHoverInteraction, t as safePolygon } from "../safePolygon-C1GNJbKR.js";
+import { i as pressableTriggerOpenStateMapping } from "../popupStateMapping-B2KsiiLb.js";
+import { i as createPopupHandleStore, n as DetachedPopupStore, t as BasePopupHandle } from "../PopupHandle-Ct6wywmP.js";
+import { t as TriggerFocusGuards } from "../TriggerFocusGuards-CvoGfft9.js";
 import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "../buttonSemantics-BSwDxJhh.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
-import { C as useMenuRootContext, _ as menuViewportStateMapping, a as MenuRadioGroup, c as MenuCheckboxItem, d as MenuGroupLabel, f as MenuGroup, g as useMenuPositionerContext, h as MenuPositioner, i as MenuRadioItem, l as MenuItem, m as MenuPopup, n as MenuSubmenuRoot, o as MenuLinkItem, p as MenuArrow, r as MenuRadioItemIndicator, s as MenuCheckboxItemIndicator, t as MenuSubmenuTrigger, u as dispatchClickWithModifiers, v as MenuPortal, w as MenuStore, x as MenuRoot, y as MenuBackdrop } from "../MenuSubmenuTrigger-DA4gsv6z.js";
+import { C as useMenuRootContext, _ as menuViewportStateMapping, a as MenuRadioGroup, c as MenuCheckboxItem, d as MenuGroupLabel, f as MenuGroup, g as useMenuPositionerContext, h as MenuPositioner, i as MenuRadioItem, l as MenuItem, m as MenuPopup, n as MenuSubmenuRoot, o as MenuLinkItem, p as MenuArrow, r as MenuRadioItemIndicator, s as MenuCheckboxItemIndicator, t as MenuSubmenuTrigger, u as dispatchClickWithModifiers, v as MenuPortal, w as MenuStore, x as MenuRoot, y as MenuBackdrop } from "../MenuSubmenuTrigger-rR8ZN7YR.js";
 import { n as useMenubarContext } from "../MenubarContext-C-62rMnO.js";
-import { t as Separator } from "../Separator-vhhYxWGr.js";
-import { Dynamic, memo, mergeProps } from "@solidjs/web";
+import { t as Separator } from "../Separator-DTvtnxzP.js";
+import { memo, mergeProps, ssrElement } from "@solidjs/web";
 import { Show, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack } from "solid-js";
 //#region src/menu/trigger/MenuTrigger.tsx
 /** A button that opens the menu. */
@@ -54,7 +56,7 @@ function MenuTrigger(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), pressableTriggerOpenStateMapping));
-	const others = omit(allProps, "as", "class", "closeDelay", "delay", "disabled", "handle", "id", "nativeButton", "onClick", "onBlur", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseMove", "onPointerDown", "openOnHover", "payload", "ref", "style");
+	const others = omit(allProps, "render", "class", "closeDelay", "delay", "disabled", "handle", "id", "nativeButton", "onClick", "onBlur", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseMove", "onPointerDown", "openOnHover", "payload", "ref", "style");
 	let pointerType = "";
 	let releaseTimer;
 	let patientTimer;
@@ -199,6 +201,11 @@ function MenuTrigger(props) {
 		if (menubarItem) menubar.setActiveTrigger(menubarItem);
 		const current = getLiveStore();
 		const trigger = element();
+		const previous = event.relatedTarget;
+		if (current?.open() && previous?.hasAttribute("data-base-ui-focus-guard") && contains(current.state.positionerElement, previous)) {
+			current.setOpen(false, createChangeEventDetails(focusOut, event));
+			return;
+		}
 		if (!menubar || !current || !trigger || disabled() || open() || !menubar.hasSubmenuOpen()) return;
 		prepareTrigger(current, trigger);
 		current.setOpenMethod("keyboard");
@@ -233,10 +240,7 @@ function MenuTrigger(props) {
 		});
 		return null;
 	}
-	const trigger = Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	const trigger = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -343,11 +347,8 @@ function MenuViewport(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), menuViewportStateMapping));
-	const others = omit(allProps, "as", "children", "class", "ref", "style");
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const others = omit(allProps, "render", "children", "class", "ref", "style");
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get ["class"]() {
 			return classValue();

package/dist/lib/server/menubar/index.js

@@ -1,3 +1,4 @@
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { composeEventHandlers } from "../internals/composeEventHandlers.js";
@@ -5,9 +6,8 @@ import { r as getNavigatedIndex } from "../compositeNavigation-BRVT1C38.js";
 import { i as createFloatingNode, r as FloatingTreeStore } from "../FloatingTree-z1JPD1dR.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { t as MenubarContext } from "../MenubarContext-C-62rMnO.js";
-import { t as withoutComponentBinding } from "../withoutComponentBinding-BHaWr5kU.js";
-import { Dynamic, mergeProps, ssrElement } from "@solidjs/web";
-import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack } from "solid-js";
+import { mergeProps, ssrElement } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup } from "solid-js";
 //#region src/menubar/Menubar.tsx
 var menubarStateMapping = { hasSubmenuOpen: (value) => value ? { "data-has-submenu-open": "" } : null };
 /** A menu bar providing commands and options for an application. */
@@ -45,7 +45,7 @@ function Menubar(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), menubarStateMapping));
-	const others = omit(allProps, "as", "class", "disabled", "id", "loopFocus", "modal", "onFocusIn", "onKeyDown", "orientation", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "id", "loopFocus", "modal", "onFocusIn", "onKeyDown", "orientation", "ref", "style");
 	function notifyItemChange() {
 		if (itemChangeQueued) return;
 		itemChangeQueued = true;
@@ -169,36 +169,11 @@ function Menubar(props) {
 		else if (details.reason !== "sibling-open" && details.reason !== "list-navigation") setHasSubmenuOpen(false);
 	});
 	onCleanup(unsubscribe);
-	const component = untrack(() => props.as);
-	if (!component) return MenubarContext({
-		value: context,
-		get children() {
-			return ssrElement("div", () => {
-				return mergeProps({
-					get id() {
-						return id();
-					},
-					role: "menubar",
-					get ["aria-orientation"]() {
-						return orientation();
-					},
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					}
-				}, stateAttributes, others);
-			}, void 0, true);
-		}
-	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return MenubarContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return withoutComponentBinding(component);
-				},
+			return Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get id() {
 					return id();

package/dist/lib/server/{mergeStyleValue-Db8bRCM4.js → mergeStyleValue-BwJ10_X2.js}

@@ -25,7 +25,12 @@ function findItemIndex(itemValues, selectedValue, comparer) {
 * array, because an array can itself be a valid single-selection value.
 */
 function findSelectionIndex(itemValues, selectedValue, comparer, multiple) {
-	const index = findItemIndex(itemValues, multiple && Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue, comparer);
+	let index;
+	if (multiple && Array.isArray(selectedValue)) {
+		const selected = comparer === defaultItemEquality ? new Set(selectedValue) : null;
+		selected?.delete(void 0);
+		index = itemValues?.findIndex((item) => selected ? selected.has(item) && (item !== 0 || selectedValue.some((value) => Object.is(item, value))) : selectedValueIncludes(selectedValue, item, comparer)) ?? -1;
+	} else index = findItemIndex(itemValues, selectedValue, comparer);
 	return index === -1 ? null : index;
 }
 function removeItem(selectedValues, itemValue, comparer) {

package/dist/lib/server/meter/index.js

@@ -1,7 +1,8 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { mergeStyles } from "../internals/mergeStyles.js";
-import { Dynamic, escape, memo, mergeProps, ssr, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { escape, memo, mergeProps, ssr, ssrElement, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, useContext } from "solid-js";
 //#region src/meter/root/MeterRootContext.ts
 var MISSING_CONTEXT = Symbol("MeterRootContext");
@@ -37,7 +38,7 @@ function MeterRoot(props) {
 	const rootProps = props;
 	const allProps = props;
 	const [labelId, setLabelId] = createSignal();
-	const others = omit(allProps, "as", "children", "class", "format", "getAriaValueText", "locale", "max", "min", "style", "value");
+	const others = omit(allProps, "render", "children", "class", "format", "getAriaValueText", "locale", "max", "min", "style", "value");
 	const min = createMemo(() => rootProps.min ?? 0);
 	const max = createMemo(() => rootProps.max ?? 100);
 	const percentageValue = createMemo(() => {
@@ -50,18 +51,17 @@ function MeterRoot(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const context = {
+		formattedValue,
+		percentageValue,
+		setLabelId,
+		value: () => rootProps.value
+	};
+	const Render = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true));
 	return MeterRootContext({
-		value: {
-			formattedValue,
-			percentageValue,
-			setLabelId,
-			value: () => rootProps.value
-		},
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				get ["class"]() {
 					return classValue();
 				},
@@ -99,14 +99,11 @@ function clamp(value, min, max) {
 //#region src/meter/track/MeterTrack.tsx
 /** Contains the indicator and represents the meter's complete range. */
 function MeterTrack(props) {
-	const others = omit(props, "as", "class", "style");
+	const others = omit(props, "render", "class", "style");
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},
@@ -120,7 +117,7 @@ function MeterTrack(props) {
 /** Visualizes the current value's position within the meter range. */
 function MeterIndicator(props) {
 	const context = useMeterRootContext();
-	const others = omit(props, "as", "class", "style");
+	const others = omit(props, "render", "class", "style");
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const internalStyle = createMemo(() => ({
@@ -133,10 +130,7 @@ function MeterIndicator(props) {
 		if (typeof externalStyle === "string") return `inset-inline-start:0;height:inherit;width:${context.percentageValue()}%;${externalStyle}`;
 		return mergeStyles(internalStyle(), externalStyle === false ? void 0 : externalStyle);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},
@@ -151,15 +145,12 @@ function MeterIndicator(props) {
 function MeterValue(props) {
 	const valueProps = props;
 	const context = useMeterRootContext();
-	const others = omit(props, "as", "children", "class", "style");
+	const others = omit(props, "render", "children", "class", "style");
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
 	const content = createMemo(() => typeof valueProps.children === "function" ? valueProps.children(context.formattedValue(), context.value()) : context.formattedValue());
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "span";
-		},
+	return useRender(props, () => state, (props) => ssrElement("span", props, void 0, true))(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},
@@ -177,7 +168,7 @@ function MeterValue(props) {
 function MeterLabel(props) {
 	const context = useMeterRootContext();
 	const generatedId = `base-ui-${createUniqueId()}`;
-	const others = omit(props, "as", "class", "id", "style");
+	const others = omit(props, "render", "class", "id", "style");
 	const id = createMemo(() => props.id ?? generatedId);
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
@@ -188,10 +179,7 @@ function MeterLabel(props) {
 			context.setLabelId((registeredId) => registeredId === currentId ? void 0 : registeredId);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "span";
-		},
+	return useRender(props, () => state, (props) => ssrElement("span", props, void 0, true))(mergeProps({
 		get id() {
 			return id();
 		},