@base-ui/react 1.6.0 → 1.7.0

package/preview-card/trigger/PreviewCardTrigger.js

@@ -10,7 +10,6 @@ exports.PreviewCardTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _fastHooks = require("@base-ui/utils/fastHooks");
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _PreviewCardContext = require("../root/PreviewCardContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../internals/useRenderElement");
@@ -37,7 +36,8 @@ const PreviewCardTrigger = exports.PreviewCardTrigger = (0, _fastHooks.fastCompo
     ...elementProps
   } = componentProps;
   const rootContext = (0, _PreviewCardContext.usePreviewCardRootContext)(true);
-  const store = handle?.store ?? rootContext;
+  const handleStore = (0, _popups.usePopupHandleStore)(handle);
+  const store = handleStore ?? rootContext;
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <PreviewCard.Trigger> must be either used within a <PreviewCard.Root> component or provided with a handle.' : (0, _formatErrorMessage2.default)(89));
   }
@@ -53,13 +53,9 @@ const PreviewCardTrigger = exports.PreviewCardTrigger = (0, _fastHooks.fastCompo
     registerTrigger,
     isMountedByThisTrigger
   } = (0, _popups.useTriggerDataForwarding)(thisTriggerId, triggerElementRef, store, {
-    payload
+    payload,
+    closeDelay: closeDelayWithDefault
   });
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (isMountedByThisTrigger) {
-      store.context.closeDelayRef.current = closeDelayWithDefault;
-    }
-  }, [store, isMountedByThisTrigger, closeDelayWithDefault]);
   const hoverProps = (0, _floatingUiReact.useHoverReferenceInteraction)(floatingRootContext, {
     mouseOnly: true,
     move: false,

package/preview-card/trigger/PreviewCardTrigger.mjs

@@ -3,12 +3,11 @@
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 import { fastComponentRef } from '@base-ui/utils/fastHooks';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.mjs";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
-import { getInlineRectTriggerProps, useTriggerDataForwarding } from "../../utils/popups/index.mjs";
+import { getInlineRectTriggerProps, usePopupHandleStore, useTriggerDataForwarding } from "../../utils/popups/index.mjs";
 import { CLOSE_DELAY, OPEN_DELAY } from "../utils/constants.mjs";
 import { safePolygon, useFocus, useHoverReferenceInteraction } from "../../floating-ui-react/index.mjs";
 
@@ -31,7 +30,8 @@ export const PreviewCardTrigger = fastComponentRef(function PreviewCardTrigger(c
     ...elementProps
   } = componentProps;
   const rootContext = usePreviewCardRootContext(true);
-  const store = handle?.store ?? rootContext;
+  const handleStore = usePopupHandleStore(handle);
+  const store = handleStore ?? rootContext;
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <PreviewCard.Trigger> must be either used within a <PreviewCard.Root> component or provided with a handle.' : _formatErrorMessage(89));
   }
@@ -47,13 +47,9 @@ export const PreviewCardTrigger = fastComponentRef(function PreviewCardTrigger(c
     registerTrigger,
     isMountedByThisTrigger
   } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
-    payload
+    payload,
+    closeDelay: closeDelayWithDefault
   });
-  useIsoLayoutEffect(() => {
-    if (isMountedByThisTrigger) {
-      store.context.closeDelayRef.current = closeDelayWithDefault;
-    }
-  }, [store, isMountedByThisTrigger, closeDelayWithDefault]);
   const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
     mouseOnly: true,
     move: false,

package/preview-card/viewport/PreviewCardViewport.js

@@ -10,14 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _PreviewCardContext = require("../root/PreviewCardContext");
 var _PreviewCardPositionerContext = require("../positioner/PreviewCardPositionerContext");
 var _useRenderElement = require("../../internals/useRenderElement");
-var _PreviewCardViewportCssVars = require("./PreviewCardViewportCssVars");
 var _usePopupViewport = require("../../utils/usePopupViewport");
-const stateAttributesMapping = {
-  activationDirection: value => value ? {
-    'data-activation-direction': value
-  } : null
-};
-
 /**
  * A viewport for displaying content transitions.
  * This component is only required if one popup can be opened by multiple triggers, its content
@@ -43,7 +36,6 @@ const PreviewCardViewport = exports.PreviewCardViewport = /*#__PURE__*/React.for
   } = (0, _usePopupViewport.usePopupViewport)({
     store,
     side: positioner.side,
-    cssVars: _PreviewCardViewportCssVars.PreviewCardViewportCssVars,
     children
   });
   const state = {
@@ -57,7 +49,7 @@ const PreviewCardViewport = exports.PreviewCardViewport = /*#__PURE__*/React.for
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping
+    stateAttributesMapping: _usePopupViewport.popupViewportStateMapping
   });
 });
 if (process.env.NODE_ENV !== "production") PreviewCardViewport.displayName = "PreviewCardViewport";

package/preview-card/viewport/PreviewCardViewport.mjs

@@ -4,13 +4,7 @@ import * as React from 'react';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.mjs";
 import { usePreviewCardPositionerContext } from "../positioner/PreviewCardPositionerContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { PreviewCardViewportCssVars } from "./PreviewCardViewportCssVars.mjs";
-import { usePopupViewport } from "../../utils/usePopupViewport.mjs";
-const stateAttributesMapping = {
-  activationDirection: value => value ? {
-    'data-activation-direction': value
-  } : null
-};
+import { popupViewportStateMapping, usePopupViewport } from "../../utils/usePopupViewport.mjs";
 
 /**
  * A viewport for displaying content transitions.
@@ -37,7 +31,6 @@ export const PreviewCardViewport = /*#__PURE__*/React.forwardRef(function Previe
   } = usePopupViewport({
     store,
     side: positioner.side,
-    cssVars: PreviewCardViewportCssVars,
     children
   });
   const state = {
@@ -51,7 +44,7 @@ export const PreviewCardViewport = /*#__PURE__*/React.forwardRef(function Previe
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping
+    stateAttributesMapping: popupViewportStateMapping
   });
 });
 if (process.env.NODE_ENV !== "production") PreviewCardViewport.displayName = "PreviewCardViewport";

package/progress/indicator/ProgressIndicator.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ProgressIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useRenderElement = require("../../internals/useRenderElement");
-var _valueToPercent = require("../../utils/valueToPercent");
 var _ProgressRootContext = require("../root/ProgressRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 /**
@@ -25,12 +24,9 @@ const ProgressIndicator = exports.ProgressIndicator = /*#__PURE__*/React.forward
     ...elementProps
   } = componentProps;
   const {
-    max,
-    min,
-    value,
+    percentageValue,
     state
   } = (0, _ProgressRootContext.useProgressRootContext)();
-  const percentageValue = Number.isFinite(value) && value !== null ? (0, _valueToPercent.valueToPercent)(value, min, max) : null;
   const indicatorStyle = percentageValue == null ? {} : {
     insetInlineStart: 0,
     height: 'inherit',

package/progress/indicator/ProgressIndicator.mjs

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { valueToPercent } from "../../utils/valueToPercent.mjs";
 import { useProgressRootContext } from "../root/ProgressRootContext.mjs";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
 /**
@@ -19,12 +18,9 @@ export const ProgressIndicator = /*#__PURE__*/React.forwardRef(function Progress
     ...elementProps
   } = componentProps;
   const {
-    max,
-    min,
-    value,
+    percentageValue,
     state
   } = useProgressRootContext();
-  const percentageValue = Number.isFinite(value) && value !== null ? valueToPercent(value, min, max) : null;
   const indicatorStyle = percentageValue == null ? {} : {
     insetInlineStart: 0,
     height: 'inherit',

package/progress/root/ProgressRoot.d.mts

@@ -26,7 +26,7 @@ export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressR
   /**
    * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
    */
-  getAriaValueText?: ((formattedValue: string | null, value: number | null) => string) | undefined;
+  getAriaValueText?: ((formattedValue: string, value: number | null) => string) | undefined;
   /**
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
@@ -44,7 +44,6 @@ export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressR
   min?: number | undefined;
   /**
    * The current value. The component is indeterminate when value is `null`.
-   * @default null
    */
   value: number | null;
 }

package/progress/root/ProgressRoot.d.ts

@@ -26,7 +26,7 @@ export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressR
   /**
    * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
    */
-  getAriaValueText?: ((formattedValue: string | null, value: number | null) => string) | undefined;
+  getAriaValueText?: ((formattedValue: string, value: number | null) => string) | undefined;
   /**
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
@@ -44,7 +44,6 @@ export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressR
   min?: number | undefined;
   /**
    * The current value. The component is indeterminate when value is `null`.
-   * @default null
    */
   value: number | null;
 }

package/progress/root/ProgressRoot.js

@@ -7,20 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProgressRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _formatNumber = require("../../utils/formatNumber");
+var _valueToPercent = require("../../utils/valueToPercent");
+var _clamp = require("../../internals/clamp");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _ProgressRootContext = require("./ProgressRootContext");
 var _stateAttributesMapping = require("./stateAttributesMapping");
 var _jsxRuntime = require("react/jsx-runtime");
-function getDefaultAriaValueText(formattedValue, value) {
-  if (value == null) {
-    return 'indeterminate progress';
-  }
-  return formattedValue || `${value}%`;
-}
-
 /**
  * Groups all parts of the progress bar and provides the task completion status to screen readers.
  * Renders a `<div>` element.
@@ -30,7 +24,7 @@ function getDefaultAriaValueText(formattedValue, value) {
 const ProgressRoot = exports.ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(componentProps, forwardedRef) {
   const {
     format,
-    getAriaValueText = getDefaultAriaValueText,
+    getAriaValueText,
     locale,
     max = 100,
     min = 0,
@@ -42,12 +36,29 @@ const ProgressRoot = exports.ProgressRoot = /*#__PURE__*/React.forwardRef(functi
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
-  const formatOptionsRef = (0, _useValueAsRef.useValueAsRef)(format);
+
+  // `value === null` (or any non-finite value) keeps Progress indeterminate. Otherwise compute a
+  // single clamped value and normalized percentage so completion status, `aria-valuenow`, the
+  // formatted text, the default `aria-valuetext`, and the indicator width all stay in sync for any
+  // `min`/`max` (not just the default 0–100).
   let status = 'indeterminate';
-  if (Number.isFinite(value)) {
-    status = value === max ? 'complete' : 'progressing';
+  let percentageValue = null;
+  let clampedValue = null;
+  let formattedValue = '';
+  // Derived alongside `status` so the indeterminate condition is not restated anywhere else.
+  let defaultAriaValueText = 'indeterminate progress';
+  if (value != null && Number.isFinite(value)) {
+    const rawPercentage = (0, _valueToPercent.valueToPercent)(value, min, max);
+    percentageValue = (0, _clamp.clamp)(Number.isNaN(rawPercentage) ? 0 : rawPercentage, 0, 100);
+    clampedValue = (0, _clamp.clamp)(value, min, max);
+    status = clampedValue === max ? 'complete' : 'progressing';
+    // Format the clamped value so visible and accessible text stay in sync with `aria-valuenow` and
+    // the indicator fill. The raw value remains available as the second `getAriaValueText` argument.
+    formattedValue = format ? (0, _formatNumber.formatNumber)(clampedValue, locale, format) : (0, _formatNumber.formatNumber)(percentageValue / 100, locale, {
+      style: 'percent'
+    });
+    defaultAriaValueText = formattedValue;
   }
-  const formattedValue = (0, _formatNumber.formatNumberValue)(value, locale, formatOptionsRef.current);
   const state = React.useMemo(() => ({
     status
   }), [status]);
@@ -55,8 +66,8 @@ const ProgressRoot = exports.ProgressRoot = /*#__PURE__*/React.forwardRef(functi
     'aria-labelledby': labelId,
     'aria-valuemax': max,
     'aria-valuemin': min,
-    'aria-valuenow': value ?? undefined,
-    'aria-valuetext': getAriaValueText(formattedValue, value),
+    'aria-valuenow': clampedValue ?? undefined,
+    'aria-valuetext': getAriaValueText ? getAriaValueText(formattedValue, value) : defaultAriaValueText,
     role: 'progressbar',
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -68,13 +79,11 @@ const ProgressRoot = exports.ProgressRoot = /*#__PURE__*/React.forwardRef(functi
   };
   const contextValue = React.useMemo(() => ({
     formattedValue,
-    max,
-    min,
+    percentageValue,
     setLabelId,
     state,
-    status,
     value
-  }), [formattedValue, max, min, setLabelId, state, status, value]);
+  }), [formattedValue, percentageValue, setLabelId, state, value]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

package/progress/root/ProgressRoot.mjs

@@ -1,20 +1,14 @@
 'use client';
 
 import * as React from 'react';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
-import { formatNumberValue } from "../../utils/formatNumber.mjs";
+import { formatNumber } from "../../utils/formatNumber.mjs";
+import { valueToPercent } from "../../utils/valueToPercent.mjs";
+import { clamp } from "../../internals/clamp.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { ProgressRootContext } from "./ProgressRootContext.mjs";
 import { progressStateAttributesMapping } from "./stateAttributesMapping.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getDefaultAriaValueText(formattedValue, value) {
-  if (value == null) {
-    return 'indeterminate progress';
-  }
-  return formattedValue || `${value}%`;
-}
-
 /**
  * Groups all parts of the progress bar and provides the task completion status to screen readers.
  * Renders a `<div>` element.
@@ -24,7 +18,7 @@ function getDefaultAriaValueText(formattedValue, value) {
 export const ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(componentProps, forwardedRef) {
   const {
     format,
-    getAriaValueText = getDefaultAriaValueText,
+    getAriaValueText,
     locale,
     max = 100,
     min = 0,
@@ -36,12 +30,29 @@ export const ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
-  const formatOptionsRef = useValueAsRef(format);
+
+  // `value === null` (or any non-finite value) keeps Progress indeterminate. Otherwise compute a
+  // single clamped value and normalized percentage so completion status, `aria-valuenow`, the
+  // formatted text, the default `aria-valuetext`, and the indicator width all stay in sync for any
+  // `min`/`max` (not just the default 0–100).
   let status = 'indeterminate';
-  if (Number.isFinite(value)) {
-    status = value === max ? 'complete' : 'progressing';
+  let percentageValue = null;
+  let clampedValue = null;
+  let formattedValue = '';
+  // Derived alongside `status` so the indeterminate condition is not restated anywhere else.
+  let defaultAriaValueText = 'indeterminate progress';
+  if (value != null && Number.isFinite(value)) {
+    const rawPercentage = valueToPercent(value, min, max);
+    percentageValue = clamp(Number.isNaN(rawPercentage) ? 0 : rawPercentage, 0, 100);
+    clampedValue = clamp(value, min, max);
+    status = clampedValue === max ? 'complete' : 'progressing';
+    // Format the clamped value so visible and accessible text stay in sync with `aria-valuenow` and
+    // the indicator fill. The raw value remains available as the second `getAriaValueText` argument.
+    formattedValue = format ? formatNumber(clampedValue, locale, format) : formatNumber(percentageValue / 100, locale, {
+      style: 'percent'
+    });
+    defaultAriaValueText = formattedValue;
   }
-  const formattedValue = formatNumberValue(value, locale, formatOptionsRef.current);
   const state = React.useMemo(() => ({
     status
   }), [status]);
@@ -49,8 +60,8 @@ export const ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(
     'aria-labelledby': labelId,
     'aria-valuemax': max,
     'aria-valuemin': min,
-    'aria-valuenow': value ?? undefined,
-    'aria-valuetext': getAriaValueText(formattedValue, value),
+    'aria-valuenow': clampedValue ?? undefined,
+    'aria-valuetext': getAriaValueText ? getAriaValueText(formattedValue, value) : defaultAriaValueText,
     role: 'progressbar',
     children: /*#__PURE__*/_jsxs(React.Fragment, {
       children: [children, /*#__PURE__*/_jsx("span", {
@@ -62,13 +73,11 @@ export const ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(
   };
   const contextValue = React.useMemo(() => ({
     formattedValue,
-    max,
-    min,
+    percentageValue,
     setLabelId,
     state,
-    status,
     value
-  }), [formattedValue, max, min, setLabelId, state, status, value]);
+  }), [formattedValue, percentageValue, setLabelId, state, value]);
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/progress/root/ProgressRootContext.d.mts

@@ -1,28 +1,20 @@
 import * as React from 'react';
-import type { ProgressStatus, ProgressRootState } from "./ProgressRoot.mjs";
+import type { ProgressRootState } from "./ProgressRoot.mjs";
 export type ProgressRootContext = {
   /**
    * Formatted value of the component.
    */
   formattedValue: string;
   /**
-   * The maximum value.
+   * The value normalized to a `0`–`100` percentage of the range, clamped to those bounds.
+   * `null` while the progress is indeterminate.
    */
-  max: number;
-  /**
-   * The minimum value.
-   */
-  min: number;
+  percentageValue: number | null;
   /**
    * Value of the component.
    */
   value: number | null;
   setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
   state: ProgressRootState;
-  status: ProgressStatus;
 };
-/**
- * @internal
- */
-export declare const ProgressRootContext: React.Context<ProgressRootContext | undefined>;
 export declare function useProgressRootContext(): ProgressRootContext;

package/progress/root/ProgressRootContext.d.ts

@@ -1,28 +1,20 @@
 import * as React from 'react';
-import type { ProgressStatus, ProgressRootState } from "./ProgressRoot.js";
+import type { ProgressRootState } from "./ProgressRoot.js";
 export type ProgressRootContext = {
   /**
    * Formatted value of the component.
    */
   formattedValue: string;
   /**
-   * The maximum value.
+   * The value normalized to a `0`–`100` percentage of the range, clamped to those bounds.
+   * `null` while the progress is indeterminate.
    */
-  max: number;
-  /**
-   * The minimum value.
-   */
-  min: number;
+  percentageValue: number | null;
   /**
    * Value of the component.
    */
   value: number | null;
   setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
   state: ProgressRootState;
-  status: ProgressStatus;
 };
-/**
- * @internal
- */
-export declare const ProgressRootContext: React.Context<ProgressRootContext | undefined>;
 export declare function useProgressRootContext(): ProgressRootContext;

package/progress/root/stateAttributesMapping.js

@@ -4,24 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.progressStateAttributesMapping = void 0;
-var _ProgressRootDataAttributes = require("./ProgressRootDataAttributes");
 const progressStateAttributesMapping = exports.progressStateAttributesMapping = {
   status(value) {
-    if (value === 'progressing') {
-      return {
-        [_ProgressRootDataAttributes.ProgressRootDataAttributes.progressing]: ''
-      };
-    }
-    if (value === 'complete') {
-      return {
-        [_ProgressRootDataAttributes.ProgressRootDataAttributes.complete]: ''
-      };
-    }
-    if (value === 'indeterminate') {
-      return {
-        [_ProgressRootDataAttributes.ProgressRootDataAttributes.indeterminate]: ''
-      };
-    }
-    return null;
+    return {
+      [`data-${value}`]: ''
+    };
   }
 };

package/progress/root/stateAttributesMapping.mjs

@@ -1,21 +1,7 @@
-import { ProgressRootDataAttributes } from "./ProgressRootDataAttributes.mjs";
 export const progressStateAttributesMapping = {
   status(value) {
-    if (value === 'progressing') {
-      return {
-        [ProgressRootDataAttributes.progressing]: ''
-      };
-    }
-    if (value === 'complete') {
-      return {
-        [ProgressRootDataAttributes.complete]: ''
-      };
-    }
-    if (value === 'indeterminate') {
-      return {
-        [ProgressRootDataAttributes.indeterminate]: ''
-      };
-    }
-    return null;
+    return {
+      [`data-${value}`]: ''
+    };
   }
 };

package/progress/value/ProgressValue.d.mts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 import type { ProgressRootState } from "../root/ProgressRoot.mjs";
 /**
- * A text label displaying the current value.
+ * A text element displaying the current value.
  * Renders a `<span>` element.
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)

package/progress/value/ProgressValue.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ProgressRootState } from "../root/ProgressRoot.js";
 /**
- * A text label displaying the current value.
+ * A text element displaying the current value.
  * Renders a `<span>` element.
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)

package/progress/value/ProgressValue.js

@@ -11,7 +11,7 @@ var _useRenderElement = require("../../internals/useRenderElement");
 var _ProgressRootContext = require("../root/ProgressRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 /**
- * A text label displaying the current value.
+ * A text element displaying the current value.
  * Renders a `<span>` element.
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
@@ -29,8 +29,12 @@ const ProgressValue = exports.ProgressValue = /*#__PURE__*/React.forwardRef(func
     formattedValue,
     state
   } = (0, _ProgressRootContext.useProgressRootContext)();
-  const formattedValueArg = value == null ? 'indeterminate' : formattedValue;
-  const formattedValueDisplay = value == null ? null : formattedValue;
+
+  // Follow `status` rather than re-deriving it: a non-finite `value` is also indeterminate, and
+  // has no formatted text to show.
+  const indeterminate = state.status === 'indeterminate';
+  const formattedValueArg = indeterminate ? 'indeterminate' : formattedValue;
+  const formattedValueDisplay = indeterminate ? null : formattedValue;
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     ref: forwardedRef,

package/progress/value/ProgressValue.mjs

@@ -5,7 +5,7 @@ import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useProgressRootContext } from "../root/ProgressRootContext.mjs";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
 /**
- * A text label displaying the current value.
+ * A text element displaying the current value.
  * Renders a `<span>` element.
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
@@ -23,8 +23,12 @@ export const ProgressValue = /*#__PURE__*/React.forwardRef(function ProgressValu
     formattedValue,
     state
   } = useProgressRootContext();
-  const formattedValueArg = value == null ? 'indeterminate' : formattedValue;
-  const formattedValueDisplay = value == null ? null : formattedValue;
+
+  // Follow `status` rather than re-deriving it: a non-finite `value` is also indeterminate, and
+  // has no formatted text to show.
+  const indeterminate = state.status === 'indeterminate';
+  const formattedValueArg = indeterminate ? 'indeterminate' : formattedValue;
+  const formattedValueDisplay = indeterminate ? null : formattedValue;
   const element = useRenderElement('span', componentProps, {
     state,
     ref: forwardedRef,

package/radio/indicator/RadioIndicatorDataAttributes.d.mts

@@ -20,7 +20,7 @@ export declare enum RadioIndicatorDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the radio indicator is animating in.
+   * Present when the radio indicator begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/radio/indicator/RadioIndicatorDataAttributes.d.ts

@@ -20,7 +20,7 @@ export declare enum RadioIndicatorDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the radio indicator is animating in.
+   * Present when the radio indicator begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/radio/indicator/RadioIndicatorDataAttributes.js

@@ -27,7 +27,7 @@ let RadioIndicatorDataAttributes = exports.RadioIndicatorDataAttributes = functi
    */
   RadioIndicatorDataAttributes["required"] = "data-required";
   /**
-   * Present when the radio indicator is animating in.
+   * Present when the radio indicator begins animating in.
    */
   RadioIndicatorDataAttributes[RadioIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/radio/indicator/RadioIndicatorDataAttributes.mjs

@@ -21,7 +21,7 @@ export let RadioIndicatorDataAttributes = function (RadioIndicatorDataAttributes
    */
   RadioIndicatorDataAttributes["required"] = "data-required";
   /**
-   * Present when the radio indicator is animating in.
+   * Present when the radio indicator begins animating in.
    */
   RadioIndicatorDataAttributes[RadioIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**