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

package/dist/lib/server/progress/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 { 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/progress/root/ProgressRootContext.ts
 var MISSING_CONTEXT = Symbol("ProgressRootContext");
@@ -43,7 +44,7 @@ function ProgressRoot(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(() => {
@@ -70,19 +71,18 @@ function ProgressRoot(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), progressStateAttributesMapping));
+	const context = {
+		formattedValue,
+		percentageValue,
+		setLabelId,
+		state,
+		value: () => rootProps.value
+	};
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ProgressRootContext({
-		value: {
-			formattedValue,
-			percentageValue,
-			setLabelId,
-			state,
-			value: () => rootProps.value
-		},
+		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				get ["class"]() {
 					return classValue();
 				},
@@ -121,15 +121,12 @@ function clamp(value, min, max) {
 /** Contains the progress indicator. */
 function ProgressTrack(props) {
 	const context = useProgressRootContext();
-	const others = omit(props, "as", "class", "style");
+	const others = omit(props, "render", "class", "style");
 	const state = createMemo(() => context.state());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), progressStateAttributesMapping));
-	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();
 		},
@@ -143,7 +140,7 @@ function ProgressTrack(props) {
 /** Visualizes the task's completion status. */
 function ProgressIndicator(props) {
 	const context = useProgressRootContext();
-	const others = omit(props, "as", "class", "style");
+	const others = omit(props, "render", "class", "style");
 	const state = createMemo(() => context.state());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const internalStyle = createMemo(() => {
@@ -162,10 +159,7 @@ function ProgressIndicator(props) {
 		return mergeStyles(internal, external === false ? void 0 : external);
 	});
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), progressStateAttributesMapping));
-	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();
 		},
@@ -180,7 +174,7 @@ function ProgressIndicator(props) {
 function ProgressValue(props) {
 	const valueProps = props;
 	const context = useProgressRootContext();
-	const others = omit(props, "as", "children", "class", "style");
+	const others = omit(props, "render", "children", "class", "style");
 	const state = createMemo(() => context.state());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
@@ -190,10 +184,7 @@ function ProgressValue(props) {
 		if (typeof valueProps.children === "function") return valueProps.children(indeterminate ? "indeterminate" : context.formattedValue(), context.value());
 		return indeterminate ? null : 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();
 		},
@@ -211,7 +202,7 @@ function ProgressValue(props) {
 function ProgressLabel(props) {
 	const context = useProgressRootContext();
 	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(() => context.state());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
@@ -223,10 +214,7 @@ function ProgressLabel(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();
 		},

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

@@ -1,16 +1,17 @@
 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 { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
 import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
-import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.js";
 import { fieldStateAttributesMapping } from "../internals/field-constants.js";
 import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
-import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
 import { n as useFieldItemContext } from "../FieldItemContext-x-C7ZlmX.js";
 import { n as useRadioGroupContext } from "../RadioGroupContext-D5xmTkDz.js";
-import { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 //#region src/radio/root/RadioRootContext.ts
 var MISSING_CONTEXT = Symbol("RadioRootContext");
@@ -77,7 +78,7 @@ function RadioRoot(props) {
 	const [rootElement, setRootElement] = createSignal();
 	const [inputElement, setInputElement] = createSignal();
 	const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = createSignal();
-	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "class", "disabled", "id", "inputRef", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "readOnly", "ref", "required", "style", "value");
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "render", "class", "disabled", "id", "inputRef", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "readOnly", "ref", "required", "style", "value");
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? false);
 	const disabled = createMemo(() => field.disabled() || item.disabled() || (group?.disabled() ?? false) || (internalProps.disabled ?? false));
 	const readOnly = createMemo(() => (group?.readOnly() ?? false) || (internalProps.readOnly ?? false));
@@ -93,6 +94,7 @@ function RadioRoot(props) {
 		checked: checked()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), radioStateAttributesMapping));
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? fallbackAriaLabelledBy());
@@ -186,10 +188,7 @@ function RadioRoot(props) {
 	return RadioRootContext({
 		value: state,
 		get children() {
-			return [Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "span";
-				},
+			return [Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get id() {
 					return rootId();
@@ -286,14 +285,13 @@ var indicatorStateAttributesMapping = {
 		return value ? { "data-checked": "" } : { "data-unchecked": "" };
 	}
 };
-var IndicatorDynamic = Dynamic;
 /** Indicates whether the enclosing radio is selected. */
 function RadioIndicator(props) {
 	let indicatorElement;
 	let latestChecked = false;
 	const rootState = useRadioRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "keepMounted", "ref", "style");
+	const others = omit(props, "render", "class", "keepMounted", "ref", "style");
 	const checked = createMemo(() => rootState().checked);
 	const transition = createTransitionStatus(() => checked());
 	const shouldRender = createMemo(() => (internalProps.keepMounted ?? false) || transition.mounted());
@@ -301,6 +299,7 @@ function RadioIndicator(props) {
 		...rootState(),
 		transitionStatus: transition.transitionStatus()
 	}));
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	const classValue = createMemo(() => shouldRender() ? resolveClass(props.class, state()) : void 0);
 	const styleValue = createMemo(() => shouldRender() ? resolveStyle(props.style, state()) : void 0);
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), indicatorStateAttributesMapping));
@@ -322,35 +321,15 @@ function RadioIndicator(props) {
 			return shouldRender();
 		},
 		get children() {
-			return Show({
-				get when() {
-					return props.as;
-				},
-				get fallback() {
-					return ssrElement("span", () => {
-						return mergeProps({
-							get ["class"]() {
-								return classValue();
-							},
-							get style() {
-								return styleValue();
-							}
-						}, stateAttributes, others);
-					}, void 0, true);
+			return Render(mergeProps({
+				ref: [internalProps.ref, ((element) => indicatorElement = element)],
+				get ["class"]() {
+					return classValue();
 				},
-				children: (component) => IndicatorDynamic(mergeProps({
-					get component() {
-						return component();
-					},
-					ref: [internalProps.ref, ((element) => indicatorElement = element)],
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					}
-				}, stateAttributes, others))
-			});
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others));
 		}
 	});
 }

package/dist/lib/server/radio-group/index.js

@@ -1,14 +1,15 @@
+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";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { fieldStateAttributesMapping } from "../internals/field-constants.js";
 import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
-import { n as useFormContext } from "../FormContext-pvESt85v.js";
-import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
+import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
 import { n as useFieldsetRootContext } from "../FieldsetRootContext-DyNqCjK6.js";
 import { t as RadioGroupContext } from "../RadioGroupContext-D5xmTkDz.js";
-import { Dynamic, mergeProps } from "@solidjs/web";
+import { mergeProps, ssrElement } from "@solidjs/web";
 import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack } from "solid-js";
 //#region src/radio-group/RadioGroup.tsx
 /** Provides shared selection, form, and keyboard state to a series of radios. */
@@ -33,7 +34,7 @@ function RadioGroup(props) {
 	let previousValue = untrack(() => controlled ? internalProps.value : uncontrolledValue());
 	let lastRepresentative;
 	let lastInputRef;
-	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "class", "defaultValue", "disabled", "form", "inputRef", "name", "onBlur", "onFocus", "onKeyDown", "onValueChange", "readOnly", "ref", "required", "style", "value");
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "render", "class", "defaultValue", "disabled", "form", "inputRef", "name", "onBlur", "onFocus", "onKeyDown", "onValueChange", "readOnly", "ref", "required", "style", "value");
 	const checkedValue = createMemo(() => controlled ? internalProps.value : uncontrolledValue());
 	const disabled = createMemo(() => field.disabled() || (internalProps.disabled ?? false));
 	const readOnly = createMemo(() => internalProps.readOnly ?? false);
@@ -47,6 +48,7 @@ function RadioGroup(props) {
 		required: required()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? fieldset?.legendId());
@@ -216,10 +218,7 @@ function RadioGroup(props) {
 	return RadioGroupContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get ["class"]() {
 					return classValue();

package/dist/lib/server/{runOnceAnimationsFinish-DCHzXWZU.js → runOnceAnimationsFinish-CYq38H8J.js}

@@ -1,3 +1,4 @@
+import { flush } from "solid-js";
 //#region src/internals/runOnceAnimationsFinish.ts
 /** Runs a callback after current or replacement animations on an element finish. */
 function runOnceAnimationsFinish(element, callback, signal, options = {}) {
@@ -7,7 +8,7 @@ function runOnceAnimationsFinish(element, callback, signal, options = {}) {
 		if (!signal?.aborted) callback();
 		return;
 	}
-	const execute = () => waitForAnimations(element, callback, signal);
+	const execute = () => waitForAnimations(element, () => flush(callback), signal);
 	if (options.waitForStartingStyleRemoved) {
 		const attribute = "data-starting-style";
 		if (element.hasAttribute(attribute)) {

package/dist/lib/server/{safePolygon-CAm5RJGv.js → safePolygon-C1GNJbKR.js}

@@ -195,6 +195,11 @@ function createHoverInteraction(options) {
 			restTimer = setTimeout(() => openPopup(event, state.reference, true), restMs);
 		};
 		const onLeave = (event) => {
+			clearOpenTimers();
+			if (!open()) {
+				clearClose();
+				return;
+			}
 			const relatedTarget = event.relatedTarget;
 			const triggers = options.context.context.triggerElements;
 			if (contains(options.floating(), relatedTarget) || relatedTarget && (triggers.hasElement(relatedTarget) && !relatedTarget.hasAttribute("data-trigger-disabled") || triggers.hasMatchingElement((trigger) => !trigger.hasAttribute("data-trigger-disabled") && contains(trigger, relatedTarget)))) {

package/dist/lib/server/scroll-area/index.js

@@ -1,11 +1,12 @@
 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 { composeEventHandlers } from "../internals/composeEventHandlers.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { n as useCSPContext } from "../CSPContext-DOxR0PO7.js";
 import { mergeStyles } from "../internals/mergeStyles.js";
-import { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrHydrationKey } from "@solidjs/web";
+import { escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrHydrationKey } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createRoot, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 import { makeResizeObserver } from "@solid-primitives/resize-observer";
 import { makeEventListener } from "@solid-primitives/event-listener";
@@ -115,7 +116,7 @@ function ScrollAreaRoot(props) {
 	let savedSnapType = null;
 	let scrollXTimer;
 	let scrollYTimer;
-	const others = omit(allProps, "as", "children", "class", "onPointerDown", "onPointerEnter", "onPointerLeave", "onPointerMove", "overflowEdgeThreshold", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "onPointerDown", "onPointerEnter", "onPointerLeave", "onPointerMove", "overflowEdgeThreshold", "ref", "style");
 	const overflowEdgeThreshold = createMemo(() => normalizeOverflowEdgeThreshold(internalProps.overflowEdgeThreshold));
 	const state = createMemo(() => {
 		const hidden = hiddenState();
@@ -294,6 +295,7 @@ function ScrollAreaRoot(props) {
 			if (thumb?.hasPointerCapture?.(activePointerId)) thumb.releasePointerCapture(activePointerId);
 		}
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ScrollAreaRootContext({
 		value: context,
 		get children() {
@@ -304,10 +306,7 @@ function ScrollAreaRoot(props) {
 				})() && (_v$ = ssrHydrationKey(), _v$2 = () => {
 					return ssrAttribute("nonce", escape(csp.nonce(), true));
 				}, ssr(_tmpl$, _v$, _v$2)));
-			}), Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			}), Render(mergeProps({
 				ref: [((element) => {
 					rootElement = element;
 				}), internalProps.ref],
@@ -389,7 +388,7 @@ function ScrollAreaViewport(props) {
 	const root = useScrollAreaRootContext();
 	const direction = useDirection();
 	const internalProps = props;
-	const others = omit(props, "as", "children", "class", "onKeyDown", "onPointerEnter", "onPointerMove", "onScroll", "onWheel", "ref", "style");
+	const others = omit(props, "render", "children", "class", "onKeyDown", "onPointerEnter", "onPointerMove", "onScroll", "onWheel", "ref", "style");
 	const state = createMemo(() => root.state());
 	const classValue = createMemo(() => ["base-ui-disable-scrollbar", resolveClass(props.class, state())]);
 	const styleValue = createMemo(() => {
@@ -565,13 +564,11 @@ function ScrollAreaViewport(props) {
 		if (animationTimer !== void 0) clearTimeout(animationTimer);
 		if (root.viewportElement() === ownElement) root.setViewportElement(void 0);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ScrollAreaViewportContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => {
 					ownElement = element;
 					root.setViewportElement(element);
@@ -649,7 +646,7 @@ function ScrollAreaScrollbar(props) {
 	const internalProps = props;
 	const allProps = props;
 	const [element, setElement] = createSignal();
-	const others = omit(allProps, "as", "children", "class", "keepMounted", "onPointerCancel", "onPointerDown", "onPointerUp", "orientation", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "keepMounted", "onMouseDown", "onPointerCancel", "onPointerDown", "onPointerUp", "orientation", "ref", "style");
 	const orientation = createMemo(() => internalProps.orientation ?? "vertical");
 	const vertical = createMemo(() => orientation() === "vertical");
 	const isHidden = createMemo(() => vertical() ? root.hiddenState().y : root.hiddenState().x);
@@ -766,9 +763,11 @@ function ScrollAreaScrollbar(props) {
 		});
 		root.handlePointerDown(event, orientation());
 	}
+	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => event.preventDefault());
 	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
 	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => root.handlePointerUp);
 	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => root.handlePointerUp);
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return Show({
 		get when() {
 			return shouldRender();
@@ -777,10 +776,7 @@ function ScrollAreaScrollbar(props) {
 			return ScrollAreaScrollbarContext({
 				value: orientation,
 				get children() {
-					return Dynamic(mergeProps({
-						get component() {
-							return props.as ?? "div";
-						},
+					return Render(mergeProps({
 						ref: [((current) => setElement(current)), internalProps.ref],
 						get ["class"]() {
 							return classValue();
@@ -791,6 +787,8 @@ function ScrollAreaScrollbar(props) {
 						get ["data-id"]() {
 							return `${root.rootId}-scrollbar`;
 						},
+						"aria-hidden": "true",
+						onMouseDown,
 						onPointerDown,
 						onPointerUp,
 						onPointerCancel
@@ -809,7 +807,7 @@ function ScrollAreaContent(props) {
 	const viewport = useScrollAreaViewportContext();
 	const root = useScrollAreaRootContext();
 	const internalProps = props;
-	const others = omit(props, "as", "children", "class", "ref", "style");
+	const others = omit(props, "render", "children", "class", "ref", "style");
 	const state = createMemo(() => root.state());
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => {
@@ -840,10 +838,7 @@ function ScrollAreaContent(props) {
 			if (observedElement === element) observedElement = void 0;
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => setContentElement(element)), internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -865,7 +860,7 @@ function ScrollAreaThumb(props) {
 	const internalProps = props;
 	const allProps = props;
 	const [element, setElement] = createSignal();
-	const others = omit(allProps, "as", "children", "class", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "ref", "style");
 	const vertical = createMemo(() => orientation() === "vertical");
 	const state = createMemo(() => ({
 		scrolling: vertical() ? root.scrollingY() : root.scrollingX(),
@@ -898,10 +893,7 @@ function ScrollAreaThumb(props) {
 	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => root.handlePointerMove);
 	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => root.handlePointerUp);
 	const onPointerCancel = composeEventHandlers(() => internalProps.onPointerCancel, () => root.handlePointerUp);
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((current) => setElement(current)), internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -925,7 +917,7 @@ function ScrollAreaCorner(props) {
 	const internalProps = props;
 	const allProps = props;
 	const [element, setElement] = createSignal();
-	const others = omit(allProps, "as", "children", "class", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "ref", "style");
 	const state = {};
 	const shouldRender = createMemo(() => !root.hiddenState().corner);
 	const classValue = createMemo(() => resolveClass(props.class, state));
@@ -957,22 +949,21 @@ function ScrollAreaCorner(props) {
 			if (untrack(root.cornerElement) === current.element) root.setCornerElement(void 0);
 		};
 	});
+	const Render = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true));
 	return Show({
 		get when() {
 			return shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((current) => setElement(current)), internalProps.ref],
 				get ["class"]() {
 					return classValue();
 				},
 				get style() {
 					return styleValue();
-				}
+				},
+				"aria-hidden": "true"
 			}, others, { get children() {
 				return internalProps.children;
 			} }));