@viraui/react 2026.11.0-next.1 → 2026.11.0-next.2

package/dist/components/gauge/demos/tooltip-portal.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type TooltipPortalDemoProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+};
+/** Forced-open tooltip portalled into a custom host (iframe / sandbox body). */
+export declare function TooltipPortalDemo({ value, min, max, label }: TooltipPortalDemoProps): React.JSX.Element;
+export {};

package/dist/components/gauge/gauge.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-gauge-aspect-ratio{syntax:"*";inherits:false;initial-value:1}.viraui__gauge-module__Gauge_XrCKK{overflow:visible;color:var(--global-foreground);&[data-fit=square]{inline-size:100%;block-size:100%}&[data-fit=content]{inline-size:100%;max-block-size:100%;aspect-ratio:var(--vui-gauge-aspect-ratio)}}.viraui__gauge-module__Control_33uqc{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;outline:none;cursor:grab;aspect-ratio:1;border-radius:var(--radius-full);&[data-disabled=true]{cursor:default}&:not([data-disabled=true]):active{cursor:grabbing}&:focus-visible,&:has(:focus-visible:not([data-pointer])){outline:var(--outline);outline-offset:var(--outline-offset)}}.viraui__gauge-module__VisuallyHidden_LUbhj{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;&:focus-visible{outline:none}}.viraui__gauge-module__TooltipPositioner_5wZsF{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:50;pointer-events:none}.viraui__gauge-module__Tooltip_BRUR6{box-sizing:border-box;inline-size:max-content;max-inline-size:20rem;padding-block:var(--space-2xs);padding-inline:var(--space-s);border-radius:var(--radius-m);background:var(--global-foreground);color:var(--global-background);font-size:var(--font-scale-body-s);animation:viraui__gauge-module__gauge-tooltip-in_5JTLs var(--duration-fast) var(--easing-entrance);@media (prefers-reduced-motion:reduce){animation:none}}.viraui__gauge-module__TooltipBody_44-M9{display:flex;flex-direction:column;align-items:center;line-height:1.15}.viraui__gauge-module__TooltipLabel_T-Hp5{opacity:.7}.viraui__gauge-module__TooltipValue_gAqRL{font-size:var(--font-scale-body-m);font-weight:600;font-variation-settings:"wght" 600;font-variant-numeric:tabular-nums}.viraui__gauge-module__TooltipUnit_iIW0i{margin-inline-start:var(--space-2xs);font-size:var(--font-scale-body-s);font-weight:500;font-variation-settings:"wght" 500;opacity:.7}@keyframes viraui__gauge-module__gauge-tooltip-in_5JTLs{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-gauge-aspect-ratio{syntax:"*";inherits:false;initial-value:1}.viraui__gauge-module__Gauge_XrCKK{overflow:visible;color:var(--global-foreground);&[data-fit=square]{inline-size:100%;block-size:100%}&[data-fit=content]{inline-size:100%;max-block-size:100%;aspect-ratio:var(--vui-gauge-aspect-ratio)}}.viraui__gauge-module__Control_33uqc{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;outline:none;cursor:grab;aspect-ratio:1;border-radius:var(--radius-full);&[data-disabled=true]{cursor:default}&:not([data-disabled=true]):active{cursor:grabbing}&:focus-visible,&:has(:focus-visible:not([data-pointer])){outline:var(--outline);outline-offset:var(--outline-offset)}}.viraui__gauge-module__VisuallyHidden_LUbhj{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;&:focus-visible{outline:none}}.viraui__gauge-module__TooltipPositioner_5wZsF{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:50;pointer-events:none}.viraui__gauge-module__Tooltip_BRUR6{box-sizing:border-box;inline-size:max-content;max-inline-size:20rem;padding-block:var(--space-2xs);padding-inline:var(--space-s);border-radius:var(--radius-s);background:var(--global-foreground);color:var(--global-background);font-size:var(--font-scale-body-s);animation:viraui__gauge-module__gauge-tooltip-in_5JTLs var(--duration-fast) var(--easing-entrance);@media (prefers-reduced-motion:reduce){animation:none}}.viraui__gauge-module__TooltipBody_44-M9{display:flex;flex-direction:column;align-items:center;line-height:1.15}.viraui__gauge-module__TooltipLabel_T-Hp5{opacity:.7}.viraui__gauge-module__TooltipValue_gAqRL{font-size:var(--font-scale-body-m);font-weight:600;font-variation-settings:"wght" 600;font-variant-numeric:tabular-nums}.viraui__gauge-module__TooltipUnit_iIW0i{margin-inline-start:var(--space-2xs);font-size:var(--font-scale-body-s);font-weight:500;font-variation-settings:"wght" 500;opacity:.7}@keyframes viraui__gauge-module__gauge-tooltip-in_5JTLs{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}}

package/dist/components/gauge/tooltip.d.ts

@@ -61,6 +61,13 @@ export type GaugeTooltipProps = {
      * @defaultValue undefined
      */
     open?: boolean;
+    /**
+     * DOM node the bubble portals into. Defaults to `document.body`. Pass the
+     * sandbox / iframe body (or another host) when the dial is not in the same
+     * document as the page shell — otherwise the bubble paints off-canvas.
+     * @defaultValue `document.body`
+     */
+    container?: HTMLElement | null;
     /**
      * Small line above the value. Leave out for the value on its own.
      * @defaultValue undefined

package/dist/components/gauge/tooltip.js

@@ -110,7 +110,7 @@ var DefaultContent = ({ text, label, unit }) => /* @__PURE__ */ jsxs("div", {
 * transform, so it is never clipped by the gauge and keeps its own CSS size
 * however the gauge, or an inset it sits in, is scaled.
 */
-var GaugeTooltip = ({ position = "value", side = "auto", at, offset = 24, gap = 8, avoidCollisions = true, collisionPadding = 8, open, label, unit, decimals = 0, format, separator = "–", className, style, children }) => {
+var GaugeTooltip = ({ position = "value", side = "auto", at, offset = 24, gap = 8, avoidCollisions = true, collisionPadding = 8, open, container = null, label, unit, decimals = 0, format, separator = "–", className, style, children }) => {
 	const gauge = useGauge();
 	const isClient = useIsClient();
 	const anchor = React.useRef(null);
@@ -181,6 +181,8 @@ var GaugeTooltip = ({ position = "value", side = "auto", at, offset = 24, gap =
 			el.style.visibility = "hidden";
 			return;
 		}
+		const doc = el.ownerDocument;
+		const win = doc.defaultView ?? window;
 		const size = {
 			width: el.offsetWidth,
 			height: el.offsetHeight
@@ -189,8 +191,8 @@ var GaugeTooltip = ({ position = "value", side = "auto", at, offset = 24, gap =
 		let atPoint = corner(p, d, size, gap);
 		if (avoidCollisions) {
 			const view = {
-				width: document.documentElement.clientWidth,
-				height: document.documentElement.clientHeight
+				width: doc.documentElement.clientWidth,
+				height: doc.documentElement.clientHeight
 			};
 			const pad = collisionPadding;
 			const spill = (spot, axis) => {
@@ -223,8 +225,8 @@ var GaugeTooltip = ({ position = "value", side = "auto", at, offset = 24, gap =
 			}
 		}
 		el.style.visibility = "";
-		el.style.left = `${atPoint.x + window.scrollX}px`;
-		el.style.top = `${atPoint.y + window.scrollY}px`;
+		el.style.left = `${atPoint.x + win.scrollX}px`;
+		el.style.top = `${atPoint.y + win.scrollY}px`;
 	});
 	React.useEffect(() => {
 		const svg = anchor.current?.ownerSVGElement;
@@ -319,7 +321,8 @@ var GaugeTooltip = ({ position = "value", side = "auto", at, offset = 24, gap =
 		label,
 		unit
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("g", { ref: anchor }), shown && isClient && createPortal(/* @__PURE__ */ jsx("div", {
+	const portalRoot = container ?? (typeof document !== "undefined" ? document.body : null);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("g", { ref: anchor }), shown && isClient && portalRoot && createPortal(/* @__PURE__ */ jsx("div", {
 		ref: box,
 		className: gauge_module_default.TooltipPositioner,
 		children: /* @__PURE__ */ jsx("div", {
@@ -330,7 +333,7 @@ var GaugeTooltip = ({ position = "value", side = "auto", at, offset = 24, gap =
 			className: clsx(gauge_module_default.Tooltip, className),
 			children: content
 		})
-	}), document.body)] });
+	}), portalRoot)] });
 };
 //#endregion
 export { GaugeTooltip };

package/dist/specs/components/gauge/props.xml

@@ -417,6 +417,9 @@
   <prop name="GaugeTooltip.open" kind="react">
     <description>Force open or shut instead of hover/press/focus.</description>
   </prop>
+  <prop name="GaugeTooltip.container" kind="react">
+    <description>Portal host for the bubble. Default `document.body`. Pass an iframe/sandbox body when the dial is not in the page document.</description>
+  </prop>
   <prop name="GaugeTooltip.label" kind="react">
     <description>Small line above the value.</description>
   </prop>

package/dist/specs/components/gauge/usage.xml

@@ -6,6 +6,7 @@
   <do>When you need paint, pass theme CSS vars as strings on `color` (and Needle `tailColor`, TickFill `dimColor`, Dot `haloColor`, Zones `zones[].color`): `--global-*` for chrome/labels (`foreground`, `background`, `primary`, `contrast`, `muted`), `--highlight-*` for status/decorative bands (`red`, `green`, `yellow`, `cyan`, `acid`, `blue`, `purple`, …)</do>
   <do>Zone-driven readings: put token colors on `zones[].color`, then reuse with `zoneColor(zones, value)` (or `zoneCutoffs`) on Arc / Marks so the live fill matches the active band</do>
   <do>Pass `label` on read-only roots (or `aria-label`) and always pass `label` on `GaugeControl`</do>
+  <do>When the dial lives in an iframe or docs sandbox, pass `GaugeTooltip` `container` to that document's `body` so the bubble portals with the dial</do>
   <do>Prefer `Meter` for compact horizontal capacity chrome; prefer `Slider` for linear interactive ranges; prefer Gauge when polar composition or dial Control is needed</do>
   <do>Needle visual style prop is `kind` (not upstream `style`) to avoid clashing with React `style`</do>
   <dont>Using Gauge / GaugeControl as a linear bar — use Slider (or Meter / LinearProgress for non-interactive)</dont>

package/dist/specs/index.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<index package="@viraui/react" version="2026.11.0-next.1" generated="2026-10-28T10:01:21.307Z">
+<index package="@viraui/react" version="2026.11.0-next.2" generated="2026-10-28T10:39:16.158Z">
   <categories>
     <category id="layout" />
     <category id="action" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.11.0-next.1",
+  "version": "2026.11.0-next.2",
   "private": false,
   "files": [
     "dist"
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@base-ui/react": ">=1.8.0",
-    "@viraui/foundation": "2026.11.0-next.1",
+    "@viraui/foundation": "2026.11.0-next.2",
     "@viraui/icons": "2026.1.0",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0",