@base-ui/react 1.6.0 → 1.7.0

package/alert-dialog/handle.d.ts

@@ -1,16 +1,14 @@
 import { DialogHandle } from "../dialog/store/DialogHandle.js";
-import { DialogStore } from "../dialog/store/DialogStore.js";
-export declare const alertDialogState: {
-  readonly modal: true;
-  readonly disablePointerDismissal: true;
-  readonly role: 'alertdialog';
-};
 /**
- * A handle to control an Alert Dialog imperatively and to associate detached triggers with it.
+ * Controls an Alert Dialog imperatively and associates detached `AlertDialog.Trigger` components with
+ * an `AlertDialog.Root`. Create one with `AlertDialog.createHandle()` and pass it to the `handle`
+ * prop of the root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
  */
 export declare class AlertDialogHandle<Payload> extends DialogHandle<Payload> {
   private readonly __alertDialogBrand;
-  constructor(store?: DialogStore<Payload>);
 }
 /**
  * Creates a new handle to connect an AlertDialog.Root with detached AlertDialog.Trigger components.

package/alert-dialog/handle.js

@@ -3,29 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.alertDialogState = exports.AlertDialogHandle = void 0;
+exports.AlertDialogHandle = void 0;
 exports.createAlertDialogHandle = createAlertDialogHandle;
 var _DialogHandle = require("../dialog/store/DialogHandle");
-var _DialogStore = require("../dialog/store/DialogStore");
-const alertDialogState = exports.alertDialogState = {
-  modal: true,
-  disablePointerDismissal: true,
-  role: 'alertdialog'
-};
-
 /**
- * A handle to control an Alert Dialog imperatively and to associate detached triggers with it.
+ * Controls an Alert Dialog imperatively and associates detached `AlertDialog.Trigger` components with
+ * an `AlertDialog.Root`. Create one with `AlertDialog.createHandle()` and pass it to the `handle`
+ * prop of the root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
  */
-class AlertDialogHandle extends _DialogHandle.DialogHandle {
-  constructor(store) {
-    const alertDialogStore = store ?? new _DialogStore.DialogStore(alertDialogState);
-    super(alertDialogStore);
-    if (store) {
-      // Supplied stores may have been created as plain dialogs; enforce alert-dialog state.
-      this.store.update(alertDialogState);
-    }
-  }
-}
+class AlertDialogHandle extends _DialogHandle.DialogHandle {}
 
 /**
  * Creates a new handle to connect an AlertDialog.Root with detached AlertDialog.Trigger components.

package/alert-dialog/handle.mjs

@@ -1,24 +1,14 @@
 import { DialogHandle } from "../dialog/store/DialogHandle.mjs";
-import { DialogStore } from "../dialog/store/DialogStore.mjs";
-export const alertDialogState = {
-  modal: true,
-  disablePointerDismissal: true,
-  role: 'alertdialog'
-};
 
 /**
- * A handle to control an Alert Dialog imperatively and to associate detached triggers with it.
+ * Controls an Alert Dialog imperatively and associates detached `AlertDialog.Trigger` components with
+ * an `AlertDialog.Root`. Create one with `AlertDialog.createHandle()` and pass it to the `handle`
+ * prop of the root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
  */
-export class AlertDialogHandle extends DialogHandle {
-  constructor(store) {
-    const alertDialogStore = store ?? new DialogStore(alertDialogState);
-    super(alertDialogStore);
-    if (store) {
-      // Supplied stores may have been created as plain dialogs; enforce alert-dialog state.
-      this.store.update(alertDialogState);
-    }
-  }
-}
+export class AlertDialogHandle extends DialogHandle {}
 
 /**
  * Creates a new handle to connect an AlertDialog.Root with detached AlertDialog.Trigger components.

package/alert-dialog/root/AlertDialogRoot.js

@@ -13,5 +13,5 @@ var _useRenderDialogRoot = require("../../dialog/root/useRenderDialogRoot");
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */
 function AlertDialogRoot(props) {
-  return (0, _useRenderDialogRoot.useRenderDialogRoot)(props, 'alert-dialog');
+  return (0, _useRenderDialogRoot.useRenderDialogRoot)('alert-dialog', props);
 }

package/alert-dialog/root/AlertDialogRoot.mjs

@@ -8,5 +8,5 @@ import { useRenderDialogRoot } from "../../dialog/root/useRenderDialogRoot.mjs";
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */
 export function AlertDialogRoot(props) {
-  return useRenderDialogRoot(props, 'alert-dialog');
+  return useRenderDialogRoot('alert-dialog', props);
 }

package/autocomplete/index.d.mts

@@ -4,6 +4,7 @@ export type * from "./trigger/AutocompleteTrigger.mjs";
 export type * from "./input-group/AutocompleteInputGroup.mjs";
 export type * from "./item/AutocompleteItem.mjs";
 export type * from "./value/AutocompleteValue.mjs";
+export type { AutocompleteSeparatorProps, AutocompleteSeparatorState } from "./separator/AutocompleteSeparator.mjs";
 export type { ComboboxInputProps as AutocompleteInputProps, ComboboxInputState as AutocompleteInputState } from "../combobox/input/ComboboxInput.mjs";
 export type { ComboboxIconProps as AutocompleteIconProps, ComboboxIconState as AutocompleteIconState } from "../combobox/icon/ComboboxIcon.mjs";
 export type { ComboboxClearProps as AutocompleteClearProps, ComboboxClearState as AutocompleteClearState } from "../combobox/clear/ComboboxClear.mjs";

package/autocomplete/index.d.ts

@@ -4,6 +4,7 @@ export type * from "./trigger/AutocompleteTrigger.js";
 export type * from "./input-group/AutocompleteInputGroup.js";
 export type * from "./item/AutocompleteItem.js";
 export type * from "./value/AutocompleteValue.js";
+export type { AutocompleteSeparatorProps, AutocompleteSeparatorState } from "./separator/AutocompleteSeparator.js";
 export type { ComboboxInputProps as AutocompleteInputProps, ComboboxInputState as AutocompleteInputState } from "../combobox/input/ComboboxInput.js";
 export type { ComboboxIconProps as AutocompleteIconProps, ComboboxIconState as AutocompleteIconState } from "../combobox/icon/ComboboxIcon.js";
 export type { ComboboxClearProps as AutocompleteClearProps, ComboboxClearState as AutocompleteClearState } from "../combobox/clear/ComboboxClear.js";

package/autocomplete/index.parts.d.mts

@@ -18,6 +18,6 @@ export { AutocompleteItem as Item } from "./item/AutocompleteItem.mjs";
 export { ComboboxRow as Row } from "../combobox/row/ComboboxRow.mjs";
 export { ComboboxCollection as Collection } from "../combobox/collection/ComboboxCollection.mjs";
 export { ComboboxEmpty as Empty } from "../combobox/empty/ComboboxEmpty.mjs";
-export { Separator } from "../separator/Separator.mjs";
+export { AutocompleteSeparator as Separator } from "./separator/AutocompleteSeparator.mjs";
 export { useCoreFilter as useFilter } from "../combobox/root/utils/useFilter.mjs";
 export { useFilteredItems } from "../combobox/root/utils/useFilteredItems.mjs";

package/autocomplete/index.parts.d.ts

@@ -18,6 +18,6 @@ export { AutocompleteItem as Item } from "./item/AutocompleteItem.js";
 export { ComboboxRow as Row } from "../combobox/row/ComboboxRow.js";
 export { ComboboxCollection as Collection } from "../combobox/collection/ComboboxCollection.js";
 export { ComboboxEmpty as Empty } from "../combobox/empty/ComboboxEmpty.js";
-export { Separator } from "../separator/Separator.js";
+export { AutocompleteSeparator as Separator } from "./separator/AutocompleteSeparator.js";
 export { useCoreFilter as useFilter } from "../combobox/root/utils/useFilter.js";
 export { useFilteredItems } from "../combobox/root/utils/useFilteredItems.js";

package/autocomplete/index.parts.js

@@ -108,7 +108,7 @@ Object.defineProperty(exports, "Row", {
 Object.defineProperty(exports, "Separator", {
   enumerable: true,
   get: function () {
-    return _Separator.Separator;
+    return _AutocompleteSeparator.AutocompleteSeparator;
   }
 });
 Object.defineProperty(exports, "Status", {
@@ -161,6 +161,6 @@ var _AutocompleteItem = require("./item/AutocompleteItem");
 var _ComboboxRow = require("../combobox/row/ComboboxRow");
 var _ComboboxCollection = require("../combobox/collection/ComboboxCollection");
 var _ComboboxEmpty = require("../combobox/empty/ComboboxEmpty");
-var _Separator = require("../separator/Separator");
+var _AutocompleteSeparator = require("./separator/AutocompleteSeparator");
 var _useFilter = require("../combobox/root/utils/useFilter");
 var _useFilteredItems = require("../combobox/root/utils/useFilteredItems");

package/autocomplete/index.parts.mjs

@@ -18,6 +18,6 @@ export { AutocompleteItem as Item } from "./item/AutocompleteItem.mjs";
 export { ComboboxRow as Row } from "../combobox/row/ComboboxRow.mjs";
 export { ComboboxCollection as Collection } from "../combobox/collection/ComboboxCollection.mjs";
 export { ComboboxEmpty as Empty } from "../combobox/empty/ComboboxEmpty.mjs";
-export { Separator } from "../separator/Separator.mjs";
+export { AutocompleteSeparator as Separator } from "./separator/AutocompleteSeparator.mjs";
 export { useCoreFilter as useFilter } from "../combobox/root/utils/useFilter.mjs";
 export { useFilteredItems } from "../combobox/root/utils/useFilteredItems.mjs";

package/autocomplete/input-group/AutocompleteInputGroup.d.mts

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 import type { FieldRoot } from "../../field/root/FieldRoot.mjs";
-import type { Side } from "../../utils/useAnchorPositioning.mjs";
+import type { Side } from "../../internals/useAnchorPositioning.mjs";
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * A wrapper for the input and its associated controls.

package/autocomplete/input-group/AutocompleteInputGroup.d.ts

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 import type { FieldRoot } from "../../field/root/FieldRoot.js";
-import type { Side } from "../../utils/useAnchorPositioning.js";
+import type { Side } from "../../internals/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A wrapper for the input and its associated controls.

package/autocomplete/root/AutocompleteRoot.d.mts

@@ -30,7 +30,12 @@ export type AutocompleteRootChangeEventReason = AriaCombobox.ChangeEventReason;
 export type AutocompleteRootChangeEventDetails = AriaCombobox.ChangeEventDetails;
 export type AutocompleteRootHighlightEventReason = AriaCombobox.HighlightEventReason;
 export type AutocompleteRootHighlightEventDetails = AriaCombobox.HighlightEventDetails;
-export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Props<ItemValue, 'none'>, 'selectionMode' | 'selectedValue' | 'defaultSelectedValue' | 'onSelectedValueChange' | 'fillInputOnItemPress' | 'itemToStringValue' | 'isItemEqualToValue' | 'inputValue' | 'defaultInputValue' | 'onInputValueChange' | 'autoComplete' | 'formAutoComplete' | 'itemToStringLabel' | 'inline' | 'autoHighlight' | 'keepHighlight' | 'highlightItemOnHover' | 'actionsRef' | 'onOpenChange' | 'openOnInputClick'> {
+export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Props<ItemValue, 'none'>, 'selectionMode' | 'selectedValue' | 'defaultSelectedValue' | 'onSelectedValueChange' | 'fillInputOnItemPress' | 'itemToStringValue' | 'isItemEqualToValue' | 'inputValue' | 'defaultInputValue' | 'onInputValueChange' | 'autoComplete' | 'formAutoComplete' | 'itemToStringLabel' | 'inline' | 'autoHighlight' | 'keepHighlight' | 'highlightItemOnHover' | 'actionsRef' | 'onOpenChange' | 'openOnInputClick' | 'form'> {
+  /**
+   * Identifies the form that owns the internal input.
+   * Useful when the autocomplete is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * Controls how the autocomplete behaves with respect to list filtering and inline autocompletion.
    * - `list` (default): items are dynamically filtered based on the input value. The input value does not change based on the active item.

package/autocomplete/root/AutocompleteRoot.d.ts

@@ -30,7 +30,12 @@ export type AutocompleteRootChangeEventReason = AriaCombobox.ChangeEventReason;
 export type AutocompleteRootChangeEventDetails = AriaCombobox.ChangeEventDetails;
 export type AutocompleteRootHighlightEventReason = AriaCombobox.HighlightEventReason;
 export type AutocompleteRootHighlightEventDetails = AriaCombobox.HighlightEventDetails;
-export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Props<ItemValue, 'none'>, 'selectionMode' | 'selectedValue' | 'defaultSelectedValue' | 'onSelectedValueChange' | 'fillInputOnItemPress' | 'itemToStringValue' | 'isItemEqualToValue' | 'inputValue' | 'defaultInputValue' | 'onInputValueChange' | 'autoComplete' | 'formAutoComplete' | 'itemToStringLabel' | 'inline' | 'autoHighlight' | 'keepHighlight' | 'highlightItemOnHover' | 'actionsRef' | 'onOpenChange' | 'openOnInputClick'> {
+export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Props<ItemValue, 'none'>, 'selectionMode' | 'selectedValue' | 'defaultSelectedValue' | 'onSelectedValueChange' | 'fillInputOnItemPress' | 'itemToStringValue' | 'isItemEqualToValue' | 'inputValue' | 'defaultInputValue' | 'onInputValueChange' | 'autoComplete' | 'formAutoComplete' | 'itemToStringLabel' | 'inline' | 'autoHighlight' | 'keepHighlight' | 'highlightItemOnHover' | 'actionsRef' | 'onOpenChange' | 'openOnInputClick' | 'form'> {
+  /**
+   * Identifies the form that owns the internal input.
+   * Useful when the autocomplete is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * Controls how the autocomplete behaves with respect to list filtering and inline autocompletion.
    * - `list` (default): items are dynamically filtered based on the input value. The input value does not change based on the active item.

package/autocomplete/root/AutocompleteRoot.js

@@ -52,7 +52,9 @@ function AutocompleteRoot(props) {
   } else {
     resolvedInputValue = internalValue;
   }
-  const collator = (0, _useFilter.useCoreFilter)();
+  const collator = (0, _useFilter.useCoreFilter)({
+    locale: other.locale
+  });
   const baseFilter = React.useMemo(() => {
     if (other.filter !== undefined) {
       return other.filter;
@@ -85,15 +87,7 @@ function AutocompleteRoot(props) {
     if (eventDetails.reason === _reasons.REASONS.pointer) {
       return;
     }
-    if (enableInline) {
-      if (highlightedValue == null) {
-        setInlineInputValue('');
-      } else {
-        setInlineInputValue((0, _resolveValueLabel.stringifyAsLabel)(highlightedValue, itemToStringValue));
-      }
-    } else {
-      setInlineInputValue('');
-    }
+    setInlineInputValue(enableInline && highlightedValue != null ? (0, _resolveValueLabel.stringifyAsLabel)(highlightedValue, itemToStringValue) : '');
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AriaCombobox.AriaCombobox, {
     ...other,

package/autocomplete/root/AutocompleteRoot.mjs

@@ -46,7 +46,9 @@ export function AutocompleteRoot(props) {
   } else {
     resolvedInputValue = internalValue;
   }
-  const collator = useCoreFilter();
+  const collator = useCoreFilter({
+    locale: other.locale
+  });
   const baseFilter = React.useMemo(() => {
     if (other.filter !== undefined) {
       return other.filter;
@@ -79,15 +81,7 @@ export function AutocompleteRoot(props) {
     if (eventDetails.reason === REASONS.pointer) {
       return;
     }
-    if (enableInline) {
-      if (highlightedValue == null) {
-        setInlineInputValue('');
-      } else {
-        setInlineInputValue(stringifyAsLabel(highlightedValue, itemToStringValue));
-      }
-    } else {
-      setInlineInputValue('');
-    }
+    setInlineInputValue(enableInline && highlightedValue != null ? stringifyAsLabel(highlightedValue, itemToStringValue) : '');
   }
   return /*#__PURE__*/_jsx(AriaCombobox, {
     ...other,

package/autocomplete/separator/AutocompleteSeparator.d.mts

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+import type { BaseUIComponentProps, Orientation } from "../../internals/types.mjs";
+export interface AutocompleteSeparatorProps extends BaseUIComponentProps<'div', AutocompleteSeparatorState> {
+  /**
+   * The orientation of the separator.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation | undefined;
+}
+export interface AutocompleteSeparatorState {
+  /**
+   * The orientation of the separator.
+   */
+  orientation: Orientation;
+}
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+export declare const AutocompleteSeparator: React.ForwardRefExoticComponent<AutocompleteSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare namespace AutocompleteSeparator {
+  type Props = AutocompleteSeparatorProps;
+  type State = AutocompleteSeparatorState;
+}

package/autocomplete/separator/AutocompleteSeparator.d.ts

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+import type { BaseUIComponentProps, Orientation } from "../../internals/types.js";
+export interface AutocompleteSeparatorProps extends BaseUIComponentProps<'div', AutocompleteSeparatorState> {
+  /**
+   * The orientation of the separator.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation | undefined;
+}
+export interface AutocompleteSeparatorState {
+  /**
+   * The orientation of the separator.
+   */
+  orientation: Orientation;
+}
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+export declare const AutocompleteSeparator: React.ForwardRefExoticComponent<AutocompleteSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare namespace AutocompleteSeparator {
+  type Props = AutocompleteSeparatorProps;
+  type State = AutocompleteSeparatorState;
+}

package/autocomplete/separator/AutocompleteSeparator.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutocompleteSeparator = void 0;
+var _ListboxSeparator = require("../../utils/listbox-separator/ListboxSeparator");
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+const AutocompleteSeparator = exports.AutocompleteSeparator = _ListboxSeparator.ListboxSeparator;

package/autocomplete/separator/AutocompleteSeparator.mjs

@@ -0,0 +1,10 @@
+'use client';
+
+import { ListboxSeparator } from "../../utils/listbox-separator/ListboxSeparator.mjs";
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+export const AutocompleteSeparator = ListboxSeparator;

package/autocomplete/trigger/AutocompleteTrigger.d.mts

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 import type { FieldRootState } from "../../field/root/FieldRoot.mjs";
-import type { Side } from "../../utils/useAnchorPositioning.mjs";
+import type { Side } from "../../internals/useAnchorPositioning.mjs";
 import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.mjs";
 /**
  * A button that opens the popup.

package/autocomplete/trigger/AutocompleteTrigger.d.ts

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
-import type { Side } from "../../utils/useAnchorPositioning.js";
+import type { Side } from "../../internals/useAnchorPositioning.js";
 import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 /**
  * A button that opens the popup.

package/avatar/fallback/AvatarFallback.d.mts

@@ -12,6 +12,8 @@ export interface AvatarFallbackState extends AvatarRootState {}
 export interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarFallbackState> {
   /**
    * How long to wait before showing the fallback. Specified in milliseconds.
+   *
+   * @default 0
    */
   delay?: number | undefined;
 }

package/avatar/fallback/AvatarFallback.d.ts

@@ -12,6 +12,8 @@ export interface AvatarFallbackState extends AvatarRootState {}
 export interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarFallbackState> {
   /**
    * How long to wait before showing the fallback. Specified in milliseconds.
+   *
+   * @default 0
    */
   delay?: number | undefined;
 }

package/avatar/fallback/AvatarFallback.js

@@ -21,21 +21,21 @@ const AvatarFallback = exports.AvatarFallback = /*#__PURE__*/React.forwardRef(fu
   const {
     className,
     render,
-    delay,
+    delay = 0,
     style,
     ...elementProps
   } = componentProps;
   const {
     imageLoadingStatus
   } = (0, _AvatarRootContext.useAvatarRootContext)();
-  const [delayPassed, setDelayPassed] = React.useState(delay === undefined);
+  const [delayPassed, setDelayPassed] = React.useState(delay === 0);
   const timeout = (0, _useTimeout.useTimeout)();
   React.useEffect(() => {
-    if (delay !== undefined) {
+    if (delay > 0) {
       timeout.start(delay, () => setDelayPassed(true));
     } else {
       // Once the fallback is shown without a delay, keep it visible. Otherwise a later
-      // `undefined` -> number change would re-hide an already-visible fallback.
+      // change from no delay to a number would re-hide an already-visible fallback.
       setDelayPassed(true);
     }
     return timeout.clear;
@@ -48,7 +48,7 @@ const AvatarFallback = exports.AvatarFallback = /*#__PURE__*/React.forwardRef(fu
     ref: forwardedRef,
     props: elementProps,
     stateAttributesMapping: _stateAttributesMapping.avatarStateAttributesMapping,
-    enabled: imageLoadingStatus !== 'loaded' && (delay === undefined || delayPassed)
+    enabled: imageLoadingStatus !== 'loaded' && (delay === 0 || delayPassed)
   });
   return element;
 });

package/avatar/fallback/AvatarFallback.mjs

@@ -16,21 +16,21 @@ export const AvatarFallback = /*#__PURE__*/React.forwardRef(function AvatarFallb
   const {
     className,
     render,
-    delay,
+    delay = 0,
     style,
     ...elementProps
   } = componentProps;
   const {
     imageLoadingStatus
   } = useAvatarRootContext();
-  const [delayPassed, setDelayPassed] = React.useState(delay === undefined);
+  const [delayPassed, setDelayPassed] = React.useState(delay === 0);
   const timeout = useTimeout();
   React.useEffect(() => {
-    if (delay !== undefined) {
+    if (delay > 0) {
       timeout.start(delay, () => setDelayPassed(true));
     } else {
       // Once the fallback is shown without a delay, keep it visible. Otherwise a later
-      // `undefined` -> number change would re-hide an already-visible fallback.
+      // change from no delay to a number would re-hide an already-visible fallback.
       setDelayPassed(true);
     }
     return timeout.clear;
@@ -43,7 +43,7 @@ export const AvatarFallback = /*#__PURE__*/React.forwardRef(function AvatarFallb
     ref: forwardedRef,
     props: elementProps,
     stateAttributesMapping: avatarStateAttributesMapping,
-    enabled: imageLoadingStatus !== 'loaded' && (delay === undefined || delayPassed)
+    enabled: imageLoadingStatus !== 'loaded' && (delay === 0 || delayPassed)
   });
   return element;
 });

package/avatar/image/AvatarImage.d.mts

@@ -15,7 +15,7 @@ export interface AvatarImageState extends AvatarRootState {
    */
   transitionStatus: TransitionStatus;
 }
-export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImageState> {
+export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImageState, React.ComponentPropsWithRef<'img'>> {
   /**
    * Callback fired when the loading status changes.
    */

package/avatar/image/AvatarImage.d.ts

@@ -15,7 +15,7 @@ export interface AvatarImageState extends AvatarRootState {
    */
   transitionStatus: TransitionStatus;
 }
-export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImageState> {
+export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImageState, React.ComponentPropsWithRef<'img'>> {
   /**
    * Callback fired when the loading status changes.
    */

package/avatar/image/AvatarImageDataAttributes.d.mts

@@ -1,6 +1,6 @@
 export declare enum AvatarImageDataAttributes {
   /**
-   * Present when the image is animating in.
+   * Present when the image begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/avatar/image/AvatarImageDataAttributes.d.ts

@@ -1,6 +1,6 @@
 export declare enum AvatarImageDataAttributes {
   /**
-   * Present when the image is animating in.
+   * Present when the image begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/avatar/image/AvatarImageDataAttributes.js

@@ -7,7 +7,7 @@ exports.AvatarImageDataAttributes = void 0;
 var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 let AvatarImageDataAttributes = exports.AvatarImageDataAttributes = function (AvatarImageDataAttributes) {
   /**
-   * Present when the image is animating in.
+   * Present when the image begins animating in.
    */
   AvatarImageDataAttributes[AvatarImageDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/avatar/image/AvatarImageDataAttributes.mjs

@@ -1,7 +1,7 @@
 import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.mjs";
 export let AvatarImageDataAttributes = function (AvatarImageDataAttributes) {
   /**
-   * Present when the image is animating in.
+   * Present when the image begins animating in.
    */
   AvatarImageDataAttributes[AvatarImageDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/checkbox/indicator/CheckboxIndicator.js

@@ -9,11 +9,10 @@ exports.CheckboxIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _CheckboxRootContext = require("../root/CheckboxRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
-var _useStateAttributesMapping = require("../utils/useStateAttributesMapping");
+var _getCheckboxStateAttributesMapping = require("../utils/getCheckboxStateAttributesMapping");
 var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 var _useTransitionStatus = require("../../internals/useTransitionStatus");
 var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
-var _constants = require("../../internals/field-constants/constants");
 /**
  * Indicates whether the checkbox is ticked.
  * Renders a `<span>` element.
@@ -49,11 +48,10 @@ const CheckboxIndicator = exports.CheckboxIndicator = /*#__PURE__*/React.forward
       }
     }
   });
-  const baseStateAttributesMapping = (0, _useStateAttributesMapping.useStateAttributesMapping)(rootState);
+  const baseStateAttributesMapping = (0, _getCheckboxStateAttributesMapping.getCheckboxStateAttributesMapping)(rootState);
   const stateAttributesMapping = {
     ...baseStateAttributesMapping,
-    ..._stateAttributesMapping.transitionStatusMapping,
-    ..._constants.fieldValidityMapping
+    ..._stateAttributesMapping.transitionStatusMapping
   };
   const shouldRender = keepMounted || mounted;
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {

package/checkbox/indicator/CheckboxIndicator.mjs

@@ -3,11 +3,10 @@
 import * as React from 'react';
 import { useCheckboxRootContext } from "../root/CheckboxRootContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { useStateAttributesMapping } from "../utils/useStateAttributesMapping.mjs";
+import { getCheckboxStateAttributesMapping } from "../utils/getCheckboxStateAttributesMapping.mjs";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.mjs";
 import { useTransitionStatus } from "../../internals/useTransitionStatus.mjs";
 import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
-import { fieldValidityMapping } from "../../internals/field-constants/constants.mjs";
 
 /**
  * Indicates whether the checkbox is ticked.
@@ -44,11 +43,10 @@ export const CheckboxIndicator = /*#__PURE__*/React.forwardRef(function Checkbox
       }
     }
   });
-  const baseStateAttributesMapping = useStateAttributesMapping(rootState);
+  const baseStateAttributesMapping = getCheckboxStateAttributesMapping(rootState);
   const stateAttributesMapping = {
     ...baseStateAttributesMapping,
-    ...transitionStatusMapping,
-    ...fieldValidityMapping
+    ...transitionStatusMapping
   };
   const shouldRender = keepMounted || mounted;
   const element = useRenderElement('span', componentProps, {

package/checkbox/indicator/CheckboxIndicatorDataAttributes.d.mts

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

package/checkbox/indicator/CheckboxIndicatorDataAttributes.d.ts

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

package/checkbox/indicator/CheckboxIndicatorDataAttributes.js

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