@viraui/react 2026.0.18 → 2026.0.20

package/dist/components/autocomplete/autocomplete.d.ts

@@ -1,5 +1,5 @@
-import { FieldRoot } from '@base-ui/react/field';
 import { AutocompleteRoot, Autocomplete as PrimitiveAutocomplete } from '@base-ui/react/autocomplete';
+import { FieldRoot } from '@base-ui/react/field';
 import { BasicInputProps } from '../basic-input';
 import { AutocompleteGroup } from './autocomplete-group';
 import { AutocompleteItemPart } from './autocomplete-item';

package/dist/components/autocomplete/autocomplete.js

@@ -13,8 +13,8 @@ import { AutocompleteItemPart } from "./autocomplete-item.js";
 import { Elevator } from "../elevator/elevator.js";
 import { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Field } from "@base-ui/react/field";
 import { Autocomplete } from "@base-ui/react/autocomplete";
+import { Field } from "@base-ui/react/field";
 import { useId } from "react";
 //#region src/components/autocomplete/autocomplete.tsx
 var AutocompletePrimitiveRoot = Autocomplete.Root;
@@ -76,7 +76,7 @@ function AutocompleteRootComponent({ children, className, container, description
 									border: "all",
 									className: autocomplete_module_default.PopupChrome,
 									color: 1,
-									"data-vibrant": "",
+									"data-vibrant": true,
 									hPadding: "x-small",
 									overflow: "auto",
 									radius: "medium",

package/dist/components/dialog/dialog-sheet.js

@@ -31,7 +31,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 						hAlign: "center"
 					}),
 					color: 1,
-					"data-vibrant": "",
+					"data-vibrant": true,
 					radius: "large",
 					vPadding: ["medium", 0]
 				}),

package/dist/components/glow/glow-tracker.d.ts

@@ -13,7 +13,7 @@ export declare const unwrapGlowAngle: (lastAngle: number | undefined, rawDegrees
 export declare const registerGlow: (entry: GlowTrackerEntry) => void;
 export declare const updateGlow: (entry: GlowTrackerEntry) => void;
 export declare const unregisterGlow: (el: HTMLElement) => void;
-/** Story / test helper: current document listener attach count (`0` or `1`). */
+/** Story / test helper: count of documents with an attached `pointermove` listener. */
 export declare const getGlowListenerCount: () => number;
 /** Story / test helper: registered glow root count. */
 export declare const getGlowRegistrySize: () => number;

package/dist/components/glow/glow-tracker.js

@@ -1,8 +1,9 @@
 //#region src/components/glow/glow-tracker.ts
 var entries = /* @__PURE__ */ new Map();
-var listenerCount = 0;
+var listeningDocs = /* @__PURE__ */ new Set();
+/** Latest pointer event per listening document (keyed at handler time — `currentTarget` is null after dispatch). */
+var pendingByDoc = /* @__PURE__ */ new Map();
 var rafId = null;
-var pendingEvent = null;
 var POINTER_QUERY = "(hover: hover) and (pointer: fine)";
 var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 var canTrackPointer = () => {
@@ -42,30 +43,40 @@ var paintEntry = (entry, event) => {
 };
 var flushPaint = () => {
 	rafId = null;
-	const event = pendingEvent;
-	pendingEvent = null;
-	if (!event) return;
-	for (const entry of entries.values()) paintEntry(entry, event);
+	const pending = [...pendingByDoc.entries()];
+	pendingByDoc.clear();
+	for (const [doc, event] of pending) for (const entry of entries.values()) if (entry.el.ownerDocument === doc) paintEntry(entry, event);
+};
+/** Cross-realm safe: iframe `Document` fails `instanceof Document` from the module window. */
+var asDocument = (value) => {
+	if (!value || !("nodeType" in value) || value.nodeType !== 9) return null;
+	return value;
 };
 var onPointerMove = (event) => {
-	pendingEvent = event;
+	const doc = asDocument(event.currentTarget);
+	if (!doc) return;
+	pendingByDoc.set(doc, event);
 	if (rafId !== null) return;
 	rafId = requestAnimationFrame(flushPaint);
 };
-var attachListener = () => {
-	if (listenerCount > 0 || !canTrackPointer()) return;
-	document.addEventListener("pointermove", onPointerMove);
-	listenerCount = 1;
+var attachListener = (doc) => {
+	if (listeningDocs.has(doc) || !canTrackPointer()) return;
+	doc.addEventListener("pointermove", onPointerMove);
+	listeningDocs.add(doc);
 };
-var detachListener = () => {
-	if (listenerCount === 0 || entries.size > 0) return;
-	document.removeEventListener("pointermove", onPointerMove);
-	listenerCount = 0;
-	if (rafId !== null) {
-		cancelAnimationFrame(rafId);
-		rafId = null;
+var detachListener = (doc) => {
+	if (!listeningDocs.has(doc)) return;
+	for (const entry of entries.values()) if (entry.el.ownerDocument === doc) return;
+	doc.removeEventListener("pointermove", onPointerMove);
+	listeningDocs.delete(doc);
+	pendingByDoc.delete(doc);
+	if (listeningDocs.size === 0) {
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+		pendingByDoc.clear();
 	}
-	pendingEvent = null;
 };
 var registerGlow = (entry) => {
 	const existing = entries.get(entry.el);
@@ -73,14 +84,15 @@ var registerGlow = (entry) => {
 		...entry,
 		...existing?.lastAngle !== void 0 && { lastAngle: existing.lastAngle }
 	});
-	attachListener();
+	attachListener(entry.el.ownerDocument);
 };
 var unregisterGlow = (el) => {
+	const doc = el.ownerDocument;
 	entries.delete(el);
-	detachListener();
+	detachListener(doc);
 };
-/** Story / test helper: current document listener attach count (`0` or `1`). */
-var getGlowListenerCount = () => listenerCount;
+/** Story / test helper: count of documents with an attached `pointermove` listener. */
+var getGlowListenerCount = () => listeningDocs.size;
 /** Story / test helper: registered glow root count. */
 var getGlowRegistrySize = () => entries.size;
 //#endregion

package/dist/components/linear-progress/linear-progress.d.ts

@@ -1,4 +1,4 @@
-import { ProgressRoot } from '@base-ui/react/progress';
+import { ProgressRoot, Progress as PrimitiveProgress } from '@base-ui/react/progress';
 import type * as React from 'react';
 /**
  * Public LinearProgress props.
@@ -22,10 +22,13 @@ export type LinearProgressProps = ProgressRoot.Props & {
      */
     description?: React.ReactNode;
     /**
-     * Renders the formatted current value via `Progress.Value` and `Text`.
+     * Shows the current value beside the label.
      *
-     * @default false
+     * Pass `true` for Base UI default formatting, or a function matching
+     * `Progress.Value` `children` to customize the printed label.
+     *
+     * @default Value UI is hidden.
      */
-    showValue?: boolean;
+    renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveProgress.Value>['children'], null | undefined>;
 };
 export declare const LinearProgress: React.FC<LinearProgressProps>;

package/dist/components/linear-progress/linear-progress.guide.json

@@ -34,8 +34,8 @@
       "label": {
         "description": "Visible label rendered through `Progress.Label` with shared internal `FieldLabel`."
       },
-      "showValue": {
-        "description": "Renders the formatted current value via `Progress.Value` and `Text`."
+      "renderValue": {
+        "description": "Shows the current value beside the label. Pass `true` for Base UI default formatting, or a function matching `Progress.Value` `children` to customize the printed label."
       }
     },
     "css": {

package/dist/components/linear-progress/linear-progress.js

@@ -7,46 +7,52 @@ import linear_progress_module_default from "./linear-progress.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Progress } from "@base-ui/react/progress";
 //#region src/components/linear-progress/linear-progress.tsx
-var LinearProgress = ({ className, description, label, showValue = false, value, ref, ...progressRootProps }) => /* @__PURE__ */ jsxs(Progress.Root, {
-	...progressRootProps,
-	ref,
-	className: clsx(linear_progress_module_default.LinearProgress, className),
-	value,
-	render: /* @__PURE__ */ jsx(Stack, {
-		direction: "column",
-		rowGap: "small",
-		columnGap: "x-small"
-	}),
-	children: [
-		(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
-			direction: "row",
-			columnGap: "small",
-			vAlign: "center",
-			hAlign: "space-between",
-			children: [label && /* @__PURE__ */ jsx(Progress.Label, {
-				render: /* @__PURE__ */ jsx(FieldLabel, {}),
-				children: label
-			}), showValue && /* @__PURE__ */ jsx(Text, {
+var LinearProgress = ({ className, description, label, renderValue, value, ref, ...progressRootProps }) => {
+	const showRenderedValue = renderValue === true || typeof renderValue === "function";
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		...progressRootProps,
+		ref,
+		className: clsx(linear_progress_module_default.LinearProgress, className),
+		value,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			rowGap: "medium",
+			columnGap: "x-small"
+		}),
+		children: [
+			(label || showRenderedValue) && /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				columnGap: "small",
+				vAlign: "center",
+				hAlign: "space-between",
+				children: [label && /* @__PURE__ */ jsx(Progress.Label, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}), showRenderedValue && /* @__PURE__ */ jsx(Text, {
+					size: "small",
+					tone: "muted",
+					family: "mono",
+					whiteSpace: "nowrap",
+					selection: false,
+					align: "center",
+					"data-shrink": "false",
+					render: /* @__PURE__ */ jsx(Progress.Value, {
+						render: /* @__PURE__ */ jsx("output", {}),
+						children: typeof renderValue === "function" ? renderValue : void 0
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(Progress.Track, {
+				className: linear_progress_module_default.Track,
+				children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
 				size: "small",
 				tone: "muted",
-				family: "mono",
-				whiteSpace: "nowrap",
-				selection: false,
-				align: "end",
-				"data-shrink": "false",
-				render: /* @__PURE__ */ jsx(Progress.Value, { render: /* @__PURE__ */ jsx("output", {}) })
-			})]
-		}),
-		/* @__PURE__ */ jsx(Progress.Track, {
-			className: linear_progress_module_default.Track,
-			children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
-		}),
-		description && /* @__PURE__ */ jsx(Text, {
-			size: "small",
-			tone: "muted",
-			children: description
-		})
-	]
-});
+				children: description
+			})
+		]
+	});
+};
 //#endregion
 export { LinearProgress };

package/dist/components/meter/meter.d.ts

@@ -1,4 +1,4 @@
-import { MeterRoot } from '@base-ui/react';
+import { Meter as PrimitiveMeter, MeterRoot } from '@base-ui/react';
 import type * as React from 'react';
 /**
  * Public Meter props.
@@ -22,10 +22,13 @@ export type MeterProps = MeterRoot.Props & {
      */
     description?: React.ReactNode;
     /**
-     * Renders the formatted current value via `Meter.Value` and `Text`.
+     * Shows the current value beside the label.
      *
-     * @default false
+     * Pass `true` for Base UI default formatting, or a function matching
+     * `Meter.Value` `children` to customize the printed label.
+     *
+     * @default Value UI is hidden.
      */
-    showValue?: boolean;
+    renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveMeter.Value>['children'], null | undefined>;
 };
 export declare const Meter: React.FC<MeterProps>;

package/dist/components/meter/meter.guide.json

@@ -6,7 +6,7 @@
   "whenToUse": [
     "Use for storage usage, battery level, capacity, or score within a known range.",
     "Use with a label when the metric needs a visible name.",
-    "Use with `showValue` when the formatted value should appear beside the label."
+    "Use with `renderValue` when the formatted value should appear beside the label."
   ],
   "whenNotToUse": [
     "Use LinearProgress for in-progress tasks or indeterminate work.",
@@ -33,8 +33,8 @@
       "label": {
         "description": "Visible label rendered through `Meter.Label` with shared internal `FieldLabel`."
       },
-      "showValue": {
-        "description": "Renders the formatted current value via `Meter.Value` and `Text`."
+      "renderValue": {
+        "description": "Shows the current value beside the label. Pass `true` for Base UI default formatting, or a function matching `Meter.Value` `children` to customize the printed label."
       }
     },
     "css": {

package/dist/components/meter/meter.js

@@ -7,45 +7,51 @@ import meter_module_default from "./meter.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Meter } from "@base-ui/react";
 //#region src/components/meter/meter.tsx
-var Meter$1 = ({ className, description, label, showValue = false, value, ...otherProps }) => /* @__PURE__ */ jsxs(Meter.Root, {
-	...otherProps,
-	className: clsx(meter_module_default.Meter, className),
-	value,
-	render: /* @__PURE__ */ jsx(Stack, {
-		direction: "column",
-		rowGap: "small",
-		columnGap: "x-small"
-	}),
-	children: [
-		(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
-			direction: "row",
-			columnGap: "small",
-			vAlign: "center",
-			hAlign: "space-between",
-			children: [label && /* @__PURE__ */ jsx(Meter.Label, {
-				render: /* @__PURE__ */ jsx(FieldLabel, {}),
-				children: label
-			}), showValue && /* @__PURE__ */ jsx(Text, {
+var Meter$1 = ({ className, description, label, renderValue, value, ...otherProps }) => {
+	const showRenderedValue = renderValue === true || typeof renderValue === "function";
+	return /* @__PURE__ */ jsxs(Meter.Root, {
+		...otherProps,
+		className: clsx(meter_module_default.Meter, className),
+		value,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			rowGap: "medium",
+			columnGap: "x-small"
+		}),
+		children: [
+			(label || showRenderedValue) && /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				columnGap: "small",
+				vAlign: "center",
+				hAlign: "space-between",
+				children: [label && /* @__PURE__ */ jsx(Meter.Label, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}), showRenderedValue && /* @__PURE__ */ jsx(Text, {
+					size: "small",
+					tone: "muted",
+					family: "mono",
+					whiteSpace: "nowrap",
+					selection: false,
+					align: "center",
+					"data-shrink": "false",
+					render: /* @__PURE__ */ jsx(Meter.Value, {
+						render: /* @__PURE__ */ jsx("output", {}),
+						children: typeof renderValue === "function" ? renderValue : void 0
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(Meter.Track, {
+				className: meter_module_default.Track,
+				children: /* @__PURE__ */ jsx(Meter.Indicator, { className: meter_module_default.Indicator })
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
 				size: "small",
 				tone: "muted",
-				family: "mono",
-				whiteSpace: "nowrap",
-				selection: false,
-				align: "end",
-				"data-shrink": "false",
-				render: /* @__PURE__ */ jsx(Meter.Value, { render: /* @__PURE__ */ jsx("output", {}) })
-			})]
-		}),
-		/* @__PURE__ */ jsx(Meter.Track, {
-			className: meter_module_default.Track,
-			children: /* @__PURE__ */ jsx(Meter.Indicator, { className: meter_module_default.Indicator })
-		}),
-		description && /* @__PURE__ */ jsx(Text, {
-			size: "small",
-			tone: "muted",
-			children: description
-		})
-	]
-});
+				children: description
+			})
+		]
+	});
+};
 //#endregion
 export { Meter$1 as Meter };

package/dist/components/popover/popover-sheet.js

@@ -27,7 +27,7 @@ var PopoverSheet = ({ unstyled, title, description, children, showCloseButton =
 				color: 1,
 				border: "all",
 				radius: "large",
-				"data-vibrant": "",
+				"data-vibrant": true,
 				render: /* @__PURE__ */ jsx(Stack, { rowGap: "medium" })
 			}),
 			children: /* @__PURE__ */ jsxs(Popover.Viewport, {

package/dist/components/select/select.js

@@ -91,7 +91,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 							children: [
 								/* @__PURE__ */ jsx(Select.ScrollUpArrow, {
 									className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowUp),
-									"data-vibrant": "",
+									"data-vibrant": true,
 									render: /* @__PURE__ */ jsx(Stack, {
 										hAlign: "center",
 										vAlign: "center"
@@ -117,14 +117,14 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 											overflow: "auto",
 											radius: "medium",
 											vPadding: "x-small",
-											"data-vibrant": ""
+											"data-vibrant": true
 										}),
 										children
 									})
 								}),
 								/* @__PURE__ */ jsx(Select.ScrollDownArrow, {
 									className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowDown),
-									"data-vibrant": "",
+									"data-vibrant": true,
 									render: /* @__PURE__ */ jsx(Stack, {
 										hAlign: "center",
 										vAlign: "center"

package/dist/components/slider/slider.d.ts

@@ -1,5 +1,5 @@
 import { FieldRoot } from '@base-ui/react/field';
-import { SliderRoot } from '@base-ui/react/slider';
+import { SliderRoot, Slider as PrimitiveSlider } from '@base-ui/react/slider';
 import type * as React from 'react';
 /**
  * Public Slider props.
@@ -35,11 +35,14 @@ export type SliderProps = SliderRoot.Props & FieldRoot.Props & {
      */
     required?: boolean;
     /**
-     * Renders the formatted current value via `Slider.Value` and `Text`.
+     * Shows the current value beside the label.
      *
-     * @default false
+     * Pass `true` for Base UI default formatting, or a function matching
+     * `Slider.Value` `children` to customize the printed label.
+     *
+     * @default Value UI is hidden.
      */
-    showValue?: boolean;
+    renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveSlider.Value>['children'], null | undefined>;
     /**
      * Accessible name for the thumb when `label` is omitted.
      *

package/dist/components/slider/slider.guide.json

@@ -36,8 +36,8 @@
       "required": {
         "description": "Marks the slider as required and shows a required indicator on the label."
       },
-      "showValue": {
-        "description": "Renders the formatted current value via `Slider.Value` and `Text`."
+      "renderValue": {
+        "description": "Shows the current value beside the label. Pass `true` for Base UI default formatting, or a function matching `Slider.Value` `children` to customize the printed label."
       },
       "thumbAriaLabel": {
         "description": "Accessible name for the thumb when `label` is omitted. Pass a string to name the first thumb (single-thumb slider, or the minimum thumb on a range). Pass a two-element tuple to name each range thumb in order; on a single-thumb slider only the first tuple value is applied."

package/dist/components/slider/slider.js

@@ -11,9 +11,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Slider } from "@base-ui/react/slider";
 //#region src/components/slider/slider.tsx
-var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = "horizontal", showValue = false, thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ref, ...sliderRootProps }) => {
+var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = "horizontal", renderValue, thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ref, ...sliderRootProps }) => {
 	const isRange = isRangeSlider(value, defaultValue);
 	const isVertical = orientation === "vertical";
+	const showRenderedValue = renderValue === true || typeof renderValue === "function";
 	return /* @__PURE__ */ jsxs(Field.Root, {
 		className: slider_module_default.Slider,
 		dirty,
@@ -44,17 +45,17 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 				vAlign: isVertical ? "stretch" : "center",
 				hAlign: isVertical ? "center" : "initial"
 			}),
-			children: [(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
+			children: [(label || showRenderedValue) && /* @__PURE__ */ jsxs(Stack, {
 				fillChildren: true,
 				className: slider_module_default.SliderHeader,
 				direction: isVertical ? "column" : "row",
 				columnGap: "small",
-				vAlign: "end",
+				vAlign: "center",
 				hAlign: isVertical ? "center" : "space-between",
 				children: [label && /* @__PURE__ */ jsx(Field.Label, {
 					className: slider_module_default.Label,
 					children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
-				}), showValue && /* @__PURE__ */ jsx(Text, {
+				}), showRenderedValue && /* @__PURE__ */ jsx(Text, {
 					className: slider_module_default.Value,
 					size: "small",
 					tone: "muted",
@@ -62,7 +63,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 					whiteSpace: "nowrap",
 					selection: false,
 					align: isVertical ? "center" : "end",
-					render: /* @__PURE__ */ jsx(Slider.Value, {})
+					render: /* @__PURE__ */ jsx(Slider.Value, { children: typeof renderValue === "function" ? renderValue : void 0 })
 				})]
 			}), /* @__PURE__ */ jsx(SliderControl, {
 				isRange,

package/dist/components/tooltip/tooltip-content.js

@@ -17,7 +17,7 @@ var TooltipContent = ({ children, sideOffset = 8, container, ...positionerProps
 				color: 1,
 				border: "all",
 				radius: "medium",
-				"data-vibrant": ""
+				"data-vibrant": true
 			}),
 			children: /* @__PURE__ */ jsx(Tooltip.Viewport, {
 				className: tooltip_module_default.Viewport,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.0.18",
+  "version": "2026.0.20",
   "private": false,
   "files": [
     "dist"
@@ -35,10 +35,10 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "2026.0.18",
-    "@viraui/icons": "2026.0.0",
+    "@viraui/foundation": "2026.0.20",
     "@viraui/postcss-config": "2026.0.0",
-    "@viraui/tsconfig": "2026.0.0"
+    "@viraui/tsconfig": "2026.0.0",
+    "@viraui/icons": "2026.0.0"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.6.0",