@ostack.tech/ui 0.6.4 → 0.7.0

package/dist/ostack-ui.js

@@ -883,7 +883,7 @@ function useSetFieldControl(controlId, controlTagName, controlCodeId, controlHas
   const store = useFieldContext();
   const generatedId = useId();
   const actualControlId = controlId ?? prefix(`control-${generatedId}`);
-  const actualCodeId = controlCodeId ?? prefix(`control-code-${generatedId}`);
+  const actualCodeId = controlHasCode ? controlCodeId ?? prefix(`control-code-${generatedId}`) : void 0;
   useEffect(() => {
     store?.setState({
       controlId: actualControlId,
@@ -899,8 +899,9 @@ function useSetFieldControl(controlId, controlTagName, controlCodeId, controlHas
     });
   }, [actualControlId, controlTagName, controlHasCode, controlRequired, store]);
   return {
+    generatedId,
     controlId: actualControlId,
-    codeId: controlHasCode ? actualCodeId : void 0
+    codeId: actualCodeId
   };
 }
 function useSetFieldControlFocused() {
@@ -1331,7 +1332,7 @@ const Spinner = forwardRef(
         ),
         "data-accent": color,
         role: "status",
-        "aria-hidden": "true",
+        "aria-hidden": true,
         ref: forwardedRef,
         ...otherProps
       }
@@ -1419,8 +1420,8 @@ const IconButton = forwardRef(
     active,
     disabled,
     loading,
-    enabledWhenLoading,
     loadingLabel,
+    showSpinner = loading,
     disableTooltip,
     iconProps,
     spinnerProps,
@@ -1432,10 +1433,10 @@ const IconButton = forwardRef(
     ...otherProps
   }, forwardedRef) {
     const prefix = usePrefix();
-    const relevantLabel = loading ? loadingLabel ?? label : label;
+    const relevantLabel = loading ? loadingLabel || label : label;
     const labelEl = relevantLabel && /* @__PURE__ */ jsx(VisuallyHidden, { children: relevantLabel });
-    const iconEl = icon && !loading && /* @__PURE__ */ jsx(Slot, { className: cx(prefix("icon-button__icon"), iconProps?.className), children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, fixedWidth: true, ...iconProps }) });
-    const spinnerEl = loading && /* @__PURE__ */ jsx(
+    const iconEl = icon && !showSpinner && /* @__PURE__ */ jsx(Slot, { className: cx(prefix("icon-button__icon"), iconProps?.className), children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, fixedWidth: true, ...iconProps }) });
+    const spinnerEl = showSpinner && /* @__PURE__ */ jsx(
       Spinner,
       {
         ...spinnerProps,
@@ -1450,16 +1451,15 @@ const IconButton = forwardRef(
     if (asChild) {
       content = cloneElement(children, void 0, content);
     }
-    const loadingDisabled = loading && !enabledWhenLoading;
-    const visiblyDisabled = disabled || loadingDisabled;
     const handleClick = useCallback(
       (evt) => {
-        if (visiblyDisabled) {
-          return evt.preventDefault();
+        if (disabled || loading) {
+          evt.preventDefault();
+          return;
         }
-        return onClick?.(evt);
+        onClick?.(evt);
       },
-      [onClick, visiblyDisabled]
+      [disabled, loading, onClick]
     );
     const As = asChild ? Slot : "button";
     const button = /* @__PURE__ */ jsx(
@@ -1476,8 +1476,8 @@ const IconButton = forwardRef(
         onClick: handleClick,
         "data-accent": color,
         disabled,
-        "data-disabled": boolDataAttr(loadingDisabled || asChild && disabled),
-        "aria-disabled": loadingDisabled || asChild && disabled ? "true" : void 0,
+        "data-disabled": boolDataAttr(loading || asChild && disabled),
+        "aria-disabled": loading || asChild && disabled || void 0,
         "data-active": boolDataAttr(active),
         tabIndex: asChild && disabled ? -1 : void 0,
         ref: forwardedRef,
@@ -1678,8 +1678,8 @@ const Button = forwardRef(
     active,
     disabled,
     loading,
-    enabledWhenLoading,
     loadingContent,
+    showSpinner = loading,
     iconProps,
     spinnerProps,
     type,
@@ -1689,7 +1689,7 @@ const Button = forwardRef(
     ...otherProps
   }, forwardedRef) {
     const prefix = usePrefix();
-    const iconEl = icon && !loading && /* @__PURE__ */ jsx(
+    const iconEl = icon && !showSpinner && /* @__PURE__ */ jsx(
       Slot,
       {
         className: cx(
@@ -1700,7 +1700,7 @@ const Button = forwardRef(
         children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, ...iconProps })
       }
     );
-    const spinnerEl = loading && /* @__PURE__ */ jsx(
+    const spinnerEl = showSpinner && /* @__PURE__ */ jsx(
       Spinner,
       {
         ...spinnerProps,
@@ -1712,16 +1712,15 @@ const Button = forwardRef(
       }
     );
     const content = loading && loadingContent ? asChild ? cloneElement(children, void 0, loadingContent) : loadingContent : children;
-    const loadingDisabled = loading && !enabledWhenLoading;
-    const visiblyDisabled = disabled || loadingDisabled;
     const handleClick = useCallback(
       (evt) => {
-        if (visiblyDisabled) {
-          return evt.preventDefault();
+        if (disabled || loading) {
+          evt.preventDefault();
+          return;
         }
-        return onClick?.(evt);
+        onClick?.(evt);
       },
-      [onClick, visiblyDisabled]
+      [disabled, loading, onClick]
     );
     const As = asChild ? Slot : "button";
     return /* @__PURE__ */ jsxs(
@@ -1738,8 +1737,8 @@ const Button = forwardRef(
         onClick: handleClick,
         "data-accent": color,
         disabled,
-        "data-disabled": boolDataAttr(loadingDisabled || asChild && disabled),
-        "aria-disabled": loadingDisabled || asChild && disabled ? "true" : void 0,
+        "data-disabled": boolDataAttr(loading || asChild && disabled),
+        "aria-disabled": loading || asChild && disabled || void 0,
         "data-active": boolDataAttr(active),
         tabIndex: asChild && disabled ? -1 : void 0,
         ref: forwardedRef,
@@ -2858,7 +2857,9 @@ const ControlAddon = forwardRef(
         className: cx(prefix("control-addon"), className),
         "data-variant": controlContext?.variant ?? variant,
         "data-status": controlContext?.status ?? status,
-        "data-muted": boolDataAttr(controlContext?.disabled || muted),
+        "data-muted": boolDataAttr(
+          controlContext?.disabled || controlContext?.loading || muted
+        ),
         "data-readonly": boolDataAttr(controlContext?.readOnly || readOnly),
         ref: forwardedRef,
         ...otherProps
@@ -2866,34 +2867,34 @@ const ControlAddon = forwardRef(
     ) });
   }
 );
-function mergeAriaIds(...args) {
+function combineAriaIds(...args) {
   const ids = [];
   for (const arg of args) {
-    if (!arg) {
-      continue;
-    }
     if (Array.isArray(arg)) {
-      const innerIds = mergeAriaIds(...arg);
+      const innerIds = combineAriaIds(...arg);
       if (innerIds) {
         args.push(innerIds);
       }
-    } else {
+    } else if (arg) {
       ids.push(String(arg));
     }
   }
   return ids.join(" ") || void 0;
 }
-function setNativeValue(element, value) {
-  const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, "value") ?? {};
-  const prototype = Object.getPrototypeOf(element);
-  const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, "value") ?? {};
-  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
-    prototypeValueSetter.call(element, value);
-  } else if (valueSetter) {
-    valueSetter.call(element, value);
-  } else {
-    throw new Error("The given element does not have a value setter.");
+function setNativeProperty(element, prop, value) {
+  for (let proto = Object.getPrototypeOf(element); proto !== null; proto = Object.getPrototypeOf(proto)) {
+    const protoSetter = Object.getOwnPropertyDescriptor(proto, prop)?.set;
+    if (protoSetter) {
+      protoSetter.call(element, value);
+      return;
+    }
+  }
+  const ownSetter = Object.getOwnPropertyDescriptor(element, prop)?.set;
+  if (ownSetter) {
+    ownSetter.call(element, value);
+    return;
   }
+  throw new Error(`The given element does not have a "${prop}" setter.`);
 }
 function camelToKebabCase(str) {
   return str.replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`);
@@ -3429,11 +3430,11 @@ const Table = forwardRef(
                     className
                   ),
                   "data-status": status,
-                  "aria-describedby": mergeAriaIds(
+                  "aria-describedby": combineAriaIds(
                     codeId,
-                    descriptionIds,
                     errorMessageIds,
-                    ariaDescribedBy
+                    ariaDescribedBy,
+                    descriptionIds
                   ),
                   ...otherProps,
                   ref: combinedTableRef,
@@ -3693,7 +3694,7 @@ const TableRow = forwardRef(
       {
         className: cx(prefix("table__row"), className),
         "data-selected": boolDataAttr(selected),
-        "aria-selected": selected ? "true" : void 0,
+        "aria-selected": selected || void 0,
         ...otherProps,
         ref: forwardedRef
       }
@@ -3880,9 +3881,9 @@ const TableHead = forwardRef(
                                 prefix("table__column-sort-button"),
                                 sortButtonProps?.className
                               ),
-                              "aria-describedby": mergeAriaIds(
-                                sortDescriptionId,
-                                sortButtonProps?.["aria-describedby"]
+                              "aria-describedby": combineAriaIds(
+                                sortButtonProps?.["aria-describedby"],
+                                sortDescriptionId
                               ),
                               onClick: combineEventHandlers(
                                 sortButtonProps?.onClick,
@@ -4376,6 +4377,8 @@ const Checkbox = forwardRef(function Checkbox2({
   status,
   code,
   loading,
+  loadingDescription,
+  showSpinner = loading,
   onBlurToOutside,
   children,
   rootProps,
@@ -4396,26 +4399,29 @@ const Checkbox = forwardRef(function Checkbox2({
   required,
   disabled,
   readOnly,
+  "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const [locale7] = useLocale();
+  loadingDescription ??= locale7.Input.loadingDescription;
   const controlContext = useControlContext();
   const checkboxGroupContext = useContext(CheckboxGroupContext);
   const fieldLabelId = useFieldLabelId();
   const dataTableColumnLabelId = useDataTableColumnLabelId();
   const descriptionIds = useFieldDescriptionIds();
   const errorMessageIds = useFieldErrorMessageIds();
-  const { controlId, codeId } = useSetFieldControl(
+  const { generatedId, controlId, codeId } = useSetFieldControl(
     id,
     "BUTTON",
     codeProps?.id,
-    !!code,
+    Boolean(code),
     required
   );
-  const generatedId = useId();
   const labelId = children && (labelProps?.id ?? prefix(`checkbox-label-${generatedId}`));
+  const loadingDescriptionId = loading && loadingDescription && prefix(`control-loading-${generatedId}`);
   const checkboxRef = useRef(null);
   const containerRef = useRef(null);
   const labelRef = useRef(null);
@@ -4423,6 +4429,7 @@ const Checkbox = forwardRef(function Checkbox2({
   const checkboxVariant = variant ?? (isInTableCell ? "cell" : "default");
   status = controlContext?.status ?? status;
   disabled = controlContext?.disabled || disabled;
+  loading = controlContext?.loading || loading;
   readOnly = controlContext?.readOnly || readOnly;
   const [checked, setChecked] = useControllableState(
     defaultChecked ?? false,
@@ -4431,13 +4438,20 @@ const Checkbox = forwardRef(function Checkbox2({
   const onContextCheckedChange = checkboxGroupContext?.onCheckedChange;
   const handleCheckedChange = useCallback(
     (state) => {
-      if (!readOnly) {
+      if (!loading && !readOnly) {
         onCheckedChange?.(state);
         setChecked(state);
         onContextCheckedChange?.(value?.toString() ?? "", state === true);
       }
     },
-    [onCheckedChange, onContextCheckedChange, readOnly, setChecked, value]
+    [
+      loading,
+      onCheckedChange,
+      onContextCheckedChange,
+      readOnly,
+      setChecked,
+      value
+    ]
   );
   const setFieldControlFocused = useSetFieldControlFocused();
   const handleFocus = useCallback(() => {
@@ -4461,6 +4475,10 @@ const Checkbox = forwardRef(function Checkbox2({
       void Promise.resolve().then(() => labelEl.tabIndex = -1);
     }
   }, []);
+  const combinedLabelIds = combineAriaIds(
+    codeId,
+    labelId ?? fieldLabelId ?? dataTableColumnLabelId
+  );
   const combinedContainerRef = useCombinedRef(
     containerProps?.ref,
     containerRef
@@ -4478,6 +4496,7 @@ const Checkbox = forwardRef(function Checkbox2({
         ),
         status,
         disabled,
+        loading,
         readOnly
       },
       children: /* @__PURE__ */ jsxs(
@@ -4503,7 +4522,7 @@ const Checkbox = forwardRef(function Checkbox2({
               {
                 "data-status": status,
                 "data-variant": checkboxVariant,
-                "data-disabled": boolDataAttr(disabled),
+                "data-disabled": boolDataAttr(disabled || loading),
                 "data-readonly": boolDataAttr(readOnly),
                 ...containerProps,
                 className: cx(
@@ -4521,30 +4540,31 @@ const Checkbox = forwardRef(function Checkbox2({
                     {
                       id: controlId,
                       className: cx(prefix("checkbox"), className),
-                      name: name ?? (checkboxGroupContext?.name ? `${checkboxGroupContext.name}[]` : void 0),
+                      name: name ?? checkboxGroupContext?.name,
                       value,
                       checked,
                       required,
                       disabled,
+                      "data-loading": boolDataAttr(loading),
                       "data-readonly": boolDataAttr(readOnly),
                       "data-status": status,
                       "data-variant": checkboxVariant,
                       onCheckedChange: handleCheckedChange,
                       onFocus: combineEventHandlers(onFocus, handleFocus),
                       onBlur: combineEventHandlers(onBlur, handleBlur),
-                      "aria-readonly": readOnly ? "true" : void 0,
-                      "aria-labelledby": dataTableColumnLabelId || fieldLabelId || ariaLabelledBy ? mergeAriaIds(
-                        dataTableColumnLabelId,
-                        fieldLabelId,
-                        labelId,
-                        ariaLabelledBy
-                      ) : void 0,
-                      "aria-invalid": status === "invalid" ? "true" : void 0,
-                      "aria-describedby": mergeAriaIds(
-                        codeId,
+                      "aria-disabled": loading || readOnly || void 0,
+                      "aria-label": ariaLabel,
+                      "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 && combinedLabelIds !== labelId && combinedLabelIds !== fieldLabelId ? combinedLabelIds : void 0),
+                      "aria-invalid": status === "invalid" || void 0,
+                      "aria-describedby": combineAriaIds(
+                        loadingDescriptionId,
+                        checkboxGroupContext?.loadingDescriptionId,
                         errorMessageIds,
+                        checkboxGroupContext?.errorMessageIds,
+                        ariaDescribedBy,
+                        checkboxGroupContext?.ariaDescribedBy,
                         descriptionIds,
-                        ariaDescribedBy
+                        checkboxGroupContext?.descriptionIds
                       ),
                       ...otherProps,
                       ref: combinedCheckboxRef,
@@ -4561,7 +4581,7 @@ const Checkbox = forwardRef(function Checkbox2({
                       ) })
                     }
                   ),
-                  children && /* @__PURE__ */ jsx(
+                  labelId && /* @__PURE__ */ jsx(
                     Label,
                     {
                       htmlFor: controlId,
@@ -4585,18 +4605,19 @@ const Checkbox = forwardRef(function Checkbox2({
                       children
                     }
                   ),
-                  loading && /* @__PURE__ */ jsx(
+                  showSpinner && /* @__PURE__ */ jsx(
                     Spinner,
                     {
                       color: controlStatusToAccent(status, "neutral"),
-                      "data-disabled": boolDataAttr(disabled),
+                      "data-disabled": boolDataAttr(disabled || loading),
                       ...spinnerProps,
                       className: cx(
                         prefix("checkbox__spinner"),
                         spinnerProps?.className
                       )
                     }
-                  )
+                  ),
+                  loadingDescriptionId && /* @__PURE__ */ jsx(VisuallyHidden, { id: loadingDescriptionId, children: loadingDescription })
                 ]
               }
             )
@@ -5025,7 +5046,7 @@ function ScrolledDataTableRows({
     });
   }, [endIndex, startIndex, store]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("tr", { "aria-hidden": true, children: /* @__PURE__ */ jsx(
       "td",
       {
         style: {
@@ -5049,7 +5070,7 @@ function ScrolledDataTableRows({
       const key = rowsWindow[i] ? `row-${getRowKey(rowsWindow[i], rowKey)}` : `loading-${i}`;
       return renderRow ? /* @__PURE__ */ jsx(Fragment$1, { children: renderRow(props) }, key) : /* @__PURE__ */ jsx(DataTableRow, { ...props }, key);
     }),
-    /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("tr", { "aria-hidden": true, children: /* @__PURE__ */ jsx(
       "td",
       {
         style: {
@@ -5559,7 +5580,9 @@ const DataTableSelectionTrigger = forwardRef(function DataTableSelectionTrigger2
     }
   );
 });
-const REQUIRABLE_CONTROLS = ["INPUT", "SELECT", "TEXTAREA"];
+const REQUIRED_TAGS = ["INPUT", "SELECT", "TEXTAREA"];
+const READ_ONLY_TAGS = ["INPUT", "TEXTAREA"];
+const NON_READONLY_INPUT_TYPES = ["file", "color"];
 const Input = forwardRef(
   function Input2({
     asChild,
@@ -5570,6 +5593,8 @@ const Input = forwardRef(
     status,
     code,
     loading,
+    loadingDescription,
+    showSpinner = loading,
     align,
     startAdornment,
     endAdornment,
@@ -5592,35 +5617,53 @@ const Input = forwardRef(
     onFocus,
     onBlur,
     onClick,
+    "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
     ...otherProps
   }, forwardedRef) {
     const prefix = usePrefix();
     const [locale7] = useLocale();
+    loadingDescription ??= locale7.Input.loadingDescription;
     clearButtonLabel ??= locale7.Input.clearButtonLabel;
     const { responsiveValuesToCssVarsAndDataAttrs } = useResponsiveValues();
+    const labelId = useFieldLabelId();
     const dataTableColumnLabelId = useDataTableColumnLabelId();
     const descriptionIds = useFieldDescriptionIds();
     const errorMessageIds = useFieldErrorMessageIds();
     const { printHidden } = usePrintClassNames();
     const [inputEl, setInputEl] = useState(null);
-    const { controlId, codeId } = useSetFieldControl(
+    const tagName = inputEl?.tagName;
+    const { generatedId, controlId, codeId } = useSetFieldControl(
       id,
-      inputEl?.tagName,
+      tagName,
       codeProps?.id,
-      !!code,
+      Boolean(code),
       required
     );
+    const loadingDescriptionId = loading && loadingDescription && prefix(`control-loading-${generatedId}`);
     const containerRef = useRef(null);
     const clearButtonRef = useRef(null);
     const isInTableCell = useIsInTableCell();
     variant ??= isInTableCell ? "cell" : "default";
+    const isControlled = value !== void 0;
+    const [shouldShowClearButton, setShouldShowClearButton] = useState(
+      ((value ?? defaultValue)?.toString() ?? "").length > 0
+    );
+    useEffect(() => {
+      if (inputEl && showClearButton === "auto" && !isControlled) {
+        setShouldShowClearButton(inputEl.value.length > 0);
+      }
+    }, [inputEl, isControlled, showClearButton]);
     const handleChange = useCallback(
       (event) => {
-        onValueChange?.(event.target.value);
+        const inputEl2 = event.target;
+        onValueChange?.(inputEl2.value);
+        if (showClearButton === "auto" && !isControlled) {
+          setShouldShowClearButton(inputEl2.value.length > 0);
+        }
       },
-      [onValueChange]
+      [isControlled, onValueChange, showClearButton]
     );
     const setFieldControlFocused = useSetFieldControlFocused();
     const handleControlFocus = useCallback(
@@ -5644,7 +5687,7 @@ const Input = forwardRef(
     );
     const handleClick = useCallback(
       (evt) => {
-        if (readOnly && (type === "file" || type === "color")) {
+        if (readOnly && type && NON_READONLY_INPUT_TYPES.includes(type)) {
           evt.preventDefault();
         }
       },
@@ -5658,46 +5701,42 @@ const Input = forwardRef(
           requestAnimationFrame(() => {
             try {
               inputEl.setSelectionRange(cursorIdx, cursorIdx);
-            } finally {
-              inputEl.focus();
+            } catch {
             }
+            inputEl.focus();
           });
         }
       },
       [disabled, inputEl, prefix]
     );
-    const [shouldShowClearButton, setShouldShowClearButton] = useState(
-      ((value ?? defaultValue)?.toString() ?? "").length > 0
-    );
-    useEffect(() => {
-      if (inputEl && showClearButton === "auto" && value === void 0) {
-        const observer = new MutationObserver((mutations) => {
-          setShouldShowClearButton(
-            mutations[0].target.value.length > 0
-          );
-        });
-        observer.observe(inputEl, { attributeFilter: ["value"] });
-        return () => observer.disconnect();
-      }
-    }, [inputEl, showClearButton, value]);
     const handleClearButtonClick = useCallback(() => {
-      if (inputEl) {
-        setNativeValue(inputEl, "");
-        const changeEvent = new Event("input", { bubbles: true });
-        inputEl.dispatchEvent(changeEvent);
-        if (!changeEvent.defaultPrevented) {
-          onValueChange?.("");
+      if (inputEl && inputEl.value !== "") {
+        setNativeProperty(inputEl, "value", "");
+        const event = new Event(inputEl.type === "file" ? "change" : "input", {
+          bubbles: true,
+          cancelable: true
+        });
+        inputEl.dispatchEvent(event);
+        if (!event.defaultPrevented) {
           inputEl.focus();
         }
       }
-    }, [inputEl, onValueChange]);
-    const hasClearButton = !disabled && !readOnly && (showClearButton === true || showClearButton === "auto" && (value !== void 0 ? (value?.toString() ?? "")?.length > 0 : shouldShowClearButton));
+    }, [inputEl]);
+    const hasClearButton = !disabled && !loading && !readOnly && (showClearButton === true || showClearButton === "auto" && (isControlled ? (value?.toString() ?? "")?.length > 0 : shouldShowClearButton));
     const { cssVars, dataAttrs } = responsiveValuesToCssVarsAndDataAttrs(
       "control",
       { align }
     );
-    const requirable = inputEl && REQUIRABLE_CONTROLS.includes(inputEl.tagName);
-    const As = asChild ? Slot : "input";
+    const supportsRequired = Boolean(
+      tagName && REQUIRED_TAGS.includes(tagName)
+    );
+    const supportsReadOnly = Boolean(
+      tagName && READ_ONLY_TAGS.includes(tagName) && (!type || !NON_READONLY_INPUT_TYPES.includes(type))
+    );
+    const combinedLabelIds = combineAriaIds(
+      codeId,
+      labelId ?? dataTableColumnLabelId
+    );
     const combinedContainerRef = useCombinedRef(
       containerRef,
       containerProps?.ref
@@ -5707,144 +5746,140 @@ const Input = forwardRef(
       clearButtonRef,
       clearButtonProps?.ref
     );
-    return /* @__PURE__ */ jsx(ClearContexts, { field: false, children: /* @__PURE__ */ jsx(
-      ControlContext.Provider,
-      {
-        value: { variant, status, disabled, readOnly },
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-status": status,
-            "data-accent": controlStatusToAccent(status),
-            "data-variant": variant,
-            "data-disabled": boolDataAttr(disabled),
-            "data-readonly": boolDataAttr(readOnly),
-            ...rootProps,
-            className: cx(prefix("input__root"), rootProps?.className),
-            children: [
-              code && /* @__PURE__ */ jsx(
-                ControlCode,
-                {
-                  ...codeProps,
-                  id: codeId,
-                  className: cx(prefix("input__code"), codeProps?.className),
-                  children: code
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "data-status": status,
-                  "data-accent": controlStatusToAccent(status),
-                  "data-variant": variant,
-                  "data-disabled": boolDataAttr(disabled),
-                  "data-readonly": boolDataAttr(readOnly),
-                  ...containerProps,
-                  className: cx(
-                    prefix("input__container"),
-                    containerProps?.className
-                  ),
-                  onPointerDown: combineEventHandlers(
-                    containerProps?.onPointerDown,
-                    handleContainerPointerDown,
-                    { checkDefaultPrevented: true }
-                  ),
-                  ref: combinedContainerRef,
-                  children: [
-                    startAdornment,
-                    /* @__PURE__ */ jsx(
-                      As,
-                      {
-                        type,
-                        defaultValue,
-                        value,
-                        id: controlId,
-                        className: cx(prefix("input"), className),
-                        required,
-                        disabled,
-                        readOnly,
-                        onInput: combineEventHandlers(onChange, handleChange, {
-                          checkDefaultPrevented: true
-                        }),
-                        onFocus: combineEventHandlers(onFocus, handleControlFocus, {
-                          checkDefaultPrevented: true
-                        }),
-                        onBlur: combineEventHandlers(onBlur, handleControlBlur, {
-                          checkDefaultPrevented: true
-                        }),
-                        onClick: combineEventHandlers(onClick, handleClick, {
-                          checkDefaultPrevented: true
-                        }),
-                        style: { ...cssVars, ...style },
-                        ...dataAttrs,
-                        "data-status": status,
-                        "data-accent": controlStatusToAccent(status),
-                        "data-variant": variant,
-                        "aria-required": required && !requirable ? "true" : void 0,
-                        "aria-invalid": status === "invalid" ? "true" : void 0,
-                        "aria-labelledby": mergeAriaIds(
-                          dataTableColumnLabelId,
-                          ariaLabelledBy
-                        ),
-                        "aria-describedby": mergeAriaIds(
-                          code && codeId,
-                          errorMessageIds,
-                          descriptionIds,
-                          ariaDescribedBy
-                        ),
-                        ...otherProps,
-                        ref: combinedInputRef
-                      }
-                    ),
-                    hasClearButton && /* @__PURE__ */ jsx(
-                      CloseButton,
-                      {
-                        size: "sm",
-                        label: clearButtonLabel,
-                        tabIndex: -1,
-                        ...clearButtonProps,
-                        className: cx(
-                          prefix("input__clear-button"),
-                          printHidden,
-                          clearButtonProps?.className
-                        ),
-                        onClick: combineEventHandlers(
-                          clearButtonProps?.onClick,
-                          handleClearButtonClick,
-                          { checkDefaultPrevented: true }
-                        ),
-                        onFocus: combineEventHandlers(
-                          clearButtonProps?.onFocus,
-                          handleControlFocus
-                        ),
-                        onBlur: combineEventHandlers(
-                          clearButtonProps?.onBlur,
-                          handleControlBlur
-                        ),
-                        ref: combinedClearButtonRef
-                      }
+    const As = asChild ? Slot : "input";
+    return /* @__PURE__ */ jsxs(ClearContexts, { field: false, children: [
+      /* @__PURE__ */ jsx(
+        ControlContext.Provider,
+        {
+          value: { variant, status, disabled, loading, readOnly },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-status": status,
+              "data-accent": controlStatusToAccent(status),
+              "data-variant": variant,
+              "data-disabled": boolDataAttr(disabled || loading),
+              "data-readonly": boolDataAttr(readOnly),
+              ...rootProps,
+              className: cx(prefix("input__root"), rootProps?.className),
+              children: [
+                codeId && /* @__PURE__ */ jsx(
+                  ControlCode,
+                  {
+                    ...codeProps,
+                    id: codeId,
+                    className: cx(prefix("input__code"), codeProps?.className),
+                    children: code
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-status": status,
+                    "data-accent": controlStatusToAccent(status),
+                    "data-variant": variant,
+                    "data-disabled": boolDataAttr(disabled || loading),
+                    "data-readonly": boolDataAttr(readOnly),
+                    ...containerProps,
+                    className: cx(
+                      prefix("input__container"),
+                      containerProps?.className
                     ),
-                    loading && /* @__PURE__ */ jsx(
-                      Spinner,
-                      {
-                        color: controlStatusToAccent(status, "neutral"),
-                        "data-disabled": boolDataAttr(disabled),
-                        ...spinnerProps,
-                        className: cx(
-                          prefix("input__spinner"),
-                          spinnerProps?.className
-                        )
-                      }
+                    onPointerDown: combineEventHandlers(
+                      containerProps?.onPointerDown,
+                      handleContainerPointerDown,
+                      { checkDefaultPrevented: true }
                     ),
-                    endAdornment
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    ) });
+                    ref: combinedContainerRef,
+                    children: [
+                      startAdornment,
+                      /* @__PURE__ */ jsx(
+                        As,
+                        {
+                          type,
+                          defaultValue,
+                          value,
+                          id: controlId,
+                          className: cx(prefix("input"), className),
+                          required: required && supportsRequired,
+                          disabled,
+                          readOnly: (readOnly || loading) && supportsReadOnly,
+                          onChange: combineEventHandlers(onChange, handleChange),
+                          onFocus: combineEventHandlers(onFocus, handleControlFocus),
+                          onBlur: combineEventHandlers(onBlur, handleControlBlur),
+                          onClick: combineEventHandlers(onClick, handleClick),
+                          style: { ...cssVars, ...style },
+                          ...dataAttrs,
+                          "data-loading": loading,
+                          "data-status": status,
+                          "data-accent": controlStatusToAccent(status),
+                          "data-variant": variant,
+                          "aria-disabled": (readOnly || loading) && !supportsReadOnly || void 0,
+                          "aria-required": required && !supportsRequired || void 0,
+                          "aria-invalid": status === "invalid" || void 0,
+                          "aria-label": ariaLabel,
+                          "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 && combinedLabelIds !== labelId ? combinedLabelIds : void 0),
+                          "aria-describedby": combineAriaIds(
+                            loadingDescriptionId,
+                            errorMessageIds,
+                            ariaDescribedBy,
+                            descriptionIds
+                          ),
+                          ...otherProps,
+                          ref: combinedInputRef
+                        }
+                      ),
+                      hasClearButton && /* @__PURE__ */ jsx(
+                        CloseButton,
+                        {
+                          size: "sm",
+                          label: clearButtonLabel,
+                          tabIndex: -1,
+                          ...clearButtonProps,
+                          className: cx(
+                            prefix("input__clear-button"),
+                            printHidden,
+                            clearButtonProps?.className
+                          ),
+                          onClick: combineEventHandlers(
+                            clearButtonProps?.onClick,
+                            handleClearButtonClick,
+                            { checkDefaultPrevented: true }
+                          ),
+                          onFocus: combineEventHandlers(
+                            clearButtonProps?.onFocus,
+                            handleControlFocus
+                          ),
+                          onBlur: combineEventHandlers(
+                            clearButtonProps?.onBlur,
+                            handleControlBlur
+                          ),
+                          ref: combinedClearButtonRef
+                        }
+                      ),
+                      showSpinner && /* @__PURE__ */ jsx(
+                        Spinner,
+                        {
+                          color: controlStatusToAccent(status, "neutral"),
+                          "data-disabled": boolDataAttr(disabled || loading),
+                          ...spinnerProps,
+                          className: cx(
+                            prefix("input__spinner"),
+                            spinnerProps?.className
+                          )
+                        }
+                      ),
+                      endAdornment
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      loadingDescriptionId && /* @__PURE__ */ jsx(VisuallyHidden, { id: loadingDescriptionId, children: loadingDescription })
+    ] });
   }
 );
 const InputWithContainerRef = forwardRef(function InputWithContainerRef2({ inputRef, containerProps, ...otherProps }, forwardedRef) {
@@ -5949,8 +5984,8 @@ const MenuListItem = forwardRef(
     color,
     disabled,
     loading,
-    enabledWhenLoading,
     loadingContent,
+    showSpinner = loading,
     icon = null,
     iconPlacement,
     href,
@@ -5969,59 +6004,56 @@ const MenuListItem = forwardRef(
     const variant = menuListContext.variant;
     iconPlacement ??= menuListContext.iconPlacement;
     const handleSelect = useCallback(
-      (event) => {
-        if (!disabled) {
-          onSelect?.(event);
+      (evt) => {
+        if (disabled || loading) {
+          evt.preventDefault();
+          return;
         }
+        onSelect?.(evt);
       },
-      [disabled, onSelect]
+      [disabled, loading, onSelect]
     );
-    const iconEl = useMemo(
-      () => icon && /* @__PURE__ */ jsx(
-        Slot,
-        {
-          className: cx(
-            prefix("menu-list__item-icon"),
-            prefix(`menu-list__item-icon--${iconPlacement}`),
-            iconProps?.className
-          ),
-          children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, ...iconProps })
-        }
-      ),
-      [icon, iconPlacement, iconProps, prefix]
+    const iconEl = icon && !showSpinner && /* @__PURE__ */ jsx(
+      Slot,
+      {
+        className: cx(
+          prefix("menu-list__item-icon"),
+          prefix(`menu-list__item-icon--${iconPlacement}`),
+          iconProps?.className
+        ),
+        children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, ...iconProps })
+      }
     );
-    const spinnerEl = useMemo(
-      () => /* @__PURE__ */ jsx(
-        Spinner,
-        {
-          ...spinnerProps,
-          className: cx(
-            prefix("menu-list__item-spinner"),
-            prefix(`menu-list__item-spinner--${iconPlacement}`),
-            spinnerProps?.className
-          )
-        }
-      ),
-      [iconPlacement, prefix, spinnerProps]
+    const spinnerEl = showSpinner && /* @__PURE__ */ jsx(
+      Spinner,
+      {
+        ...spinnerProps,
+        className: cx(
+          prefix("menu-list__item-spinner"),
+          prefix(`menu-list__item-spinner--${iconPlacement}`),
+          spinnerProps?.className
+        )
+      }
     );
-    const shouldDisable = disabled || loading && !enabledWhenLoading;
     const Action = type === "button" ? "button" : type === "link" ? "a" : "div";
     const actionEl = /* @__PURE__ */ jsxs(
       Action,
       {
         type: type === "button" ? "button" : void 0,
-        disabled: type === "button" ? shouldDisable : void 0,
-        "data-disabled": boolDataAttr(type !== "button" && shouldDisable),
-        "aria-disabled": type !== "button" && shouldDisable ? "true" : void 0,
+        disabled: type === "button" ? disabled : void 0,
+        "data-disabled": boolDataAttr(type !== "button" && disabled),
+        "aria-disabled": type !== "button" && disabled || loading || void 0,
+        "data-loading": boolDataAttr(loading),
         "data-selected": boolDataAttr(selected),
         "data-accent": color,
         href,
         target,
         rel,
+        tabIndex: type === "link" && disabled ? -1 : void 0,
         ...actionProps,
         onClick: combineEventHandlers(
-          actionProps?.onClick,
           handleSelect,
+          actionProps?.onClick,
           { checkDefaultPrevented: true }
         ),
         className: cx(
@@ -6030,8 +6062,8 @@ const MenuListItem = forwardRef(
           actionProps?.className
         ),
         children: [
-          loading && iconPlacement === "start" && spinnerEl,
-          !loading && iconPlacement === "start" && iconEl,
+          iconPlacement === "start" && spinnerEl,
+          iconPlacement === "start" && iconEl,
           /* @__PURE__ */ jsx(
             "span",
             {
@@ -6043,8 +6075,8 @@ const MenuListItem = forwardRef(
               children: loading && loadingContent ? loadingContent : asChild ? children.props.children : children
             }
           ),
-          !loading && iconPlacement === "end" && iconEl,
-          loading && iconPlacement === "end" && spinnerEl
+          iconPlacement === "end" && iconEl,
+          iconPlacement === "end" && spinnerEl
         ]
       }
     );
@@ -6290,8 +6322,8 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
   color,
   disabled,
   loading,
-  enabledWhenLoading,
   loadingContent,
+  showSpinner,
   icon,
   iconPlacement,
   href,
@@ -6307,11 +6339,17 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
-  const handleSelect = useCallback(() => {
-    if (asLink) {
-      window.open(href, target, rel?.split(" ").join(","));
-    }
-  }, [asLink, href, rel, target]);
+  const handleSelect = useCallback(
+    (value) => {
+      if (!loading) {
+        onSelect?.(value);
+        if (asLink) {
+          window.open(href, target, rel?.split(" ").join(","));
+        }
+      }
+    },
+    [asLink, href, loading, onSelect, rel, target]
+  );
   return /* @__PURE__ */ jsx(
     MenuListItem,
     {
@@ -6320,8 +6358,8 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
       color,
       disabled,
       loading,
-      enabledWhenLoading,
       loadingContent,
+      showSpinner,
       icon,
       iconPlacement,
       href,
@@ -6342,10 +6380,10 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
       children: /* @__PURE__ */ jsx(
         Command.Item,
         {
-          disabled: disabled || loading && !enabledWhenLoading,
+          disabled,
           ...otherProps,
           keywords: typeof children === "string" ? [children, ...keywords ?? []] : keywords,
-          onSelect: combineEventHandlers(onSelect, handleSelect),
+          onSelect: handleSelect,
           className: cx(prefix("command-menu__item"), className),
           ref: forwardedRef,
           children
@@ -6666,7 +6704,7 @@ function SelectMultipleValue() {
             ),
             ...valueTagProps?.contentProps
           },
-          "aria-hidden": "true"
+          "aria-hidden": true
         },
         optionState.content
       );
@@ -6713,6 +6751,7 @@ const Select = forwardRef(function Select2({
   readOnly,
   required,
   loading,
+  loadingDescription,
   variant,
   status,
   code,
@@ -6723,6 +6762,7 @@ const Select = forwardRef(function Select2({
   loadingOptions,
   loadingOptionsLabel,
   loadingOptionsProgress,
+  showSpinner = loading || loadingOptions,
   emptyMessage,
   valueTagMaxWidth,
   onKeyDown,
@@ -6775,11 +6815,11 @@ const Select = forwardRef(function Select2({
       evt.preventDefault();
       const buttonEl = buttonRef.current;
       const target = evt.target;
-      if (buttonEl && !disabled && !target.closest("input, select, textarea, button, a")) {
+      if (buttonEl && !disabled && !loading && !target.closest("input, select, textarea, button, a")) {
         setOpen((open2) => !open2);
       }
     },
-    [disabled, setOpen]
+    [disabled, loading, setOpen]
   );
   const handleOptionSelect = useCallback(
     (optionValue) => {
@@ -6844,7 +6884,7 @@ const Select = forwardRef(function Select2({
     value: actualValue,
     onOptionSelect: handleOptionSelect,
     status,
-    disabled,
+    disabled: disabled || loading,
     readOnly,
     valueTagProps
   });
@@ -6852,7 +6892,7 @@ const Select = forwardRef(function Select2({
     () => ({ registering: true, ...selectContext }),
     [selectContext]
   );
-  const showOpen = open && !disabled && !readOnly;
+  const showOpen = open && !disabled && !loading && !readOnly;
   const combinedClearButtonRef = useCombinedRef(
     clearButtonRef,
     clearButtonProps?.ref
@@ -6895,7 +6935,9 @@ const Select = forwardRef(function Select2({
                   disabled,
                   readOnly,
                   required,
-                  loading: loading || loadingOptions,
+                  loading,
+                  loadingDescription,
+                  showSpinner,
                   startAdornment,
                   endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
                     !readOnly && /* @__PURE__ */ jsx(
@@ -6908,7 +6950,7 @@ const Select = forwardRef(function Select2({
                           arrowProps?.className
                         ),
                         "data-status": status,
-                        "data-disabled": disabled
+                        "data-disabled": disabled || loading
                       }
                     ),
                     endAdornment
@@ -6947,7 +6989,6 @@ const Select = forwardRef(function Select2({
                     ...spinnerProps,
                     className: cx(prefix("select__spinner"), spinnerProps?.className)
                   },
-                  "aria-readonly": readOnly ? "true" : void 0,
                   "data-placeholder": boolDataAttr(isEmpty),
                   children: /* @__PURE__ */ jsx("button", { ref: combinedButtonRef, children: /* @__PURE__ */ jsxs(
                     "span",
@@ -7420,6 +7461,8 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
   code,
   name,
   loading,
+  loadingDescription,
+  showSpinner = loading,
   required,
   disabled = false,
   readOnly = false,
@@ -7438,22 +7481,26 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
   onMouseDown,
   tabIndex: controlledTabIndex,
   children,
+  "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const [locale7] = useLocale();
+  loadingDescription ??= locale7.Input.loadingDescription;
   const labelId = useFieldLabelId();
   const dataTableColumnLabelId = useDataTableColumnLabelId();
   const descriptionIds = useFieldDescriptionIds();
   const errorMessageIds = useFieldErrorMessageIds();
-  const { controlId, codeId } = useSetFieldControl(
+  const { generatedId, controlId, codeId } = useSetFieldControl(
     id,
     "DIV",
     codeProps?.id,
-    !!code,
+    Boolean(code),
     required
   );
+  const loadingDescriptionId = loading && loadingDescription ? prefix(`control-loading-${generatedId}`) : void 0;
   const checkboxGroupRef = useRef(null);
   const isInTableCell = useIsInTableCell();
   inline ??= isInTableCell;
@@ -7512,101 +7559,107 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
     checkboxGroupRef,
     forwardedRef
   );
-  return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(ControlContext.Provider, { value: { variant, status, disabled, readOnly }, children: /* @__PURE__ */ jsx(
-    CheckboxGroupContext.Provider,
+  return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(
+    ControlContext.Provider,
     {
-      value: { name, value, onCheckedChange: handleCheckedChange },
-      children: /* @__PURE__ */ jsxs(
-        "div",
+      value: { variant, status, disabled, loading, readOnly },
+      children: /* @__PURE__ */ jsx(
+        CheckboxGroupContext.Provider,
         {
-          role: "group",
-          id: controlId,
-          ...otherProps,
-          "data-status": status,
-          "data-accent": controlStatusToAccent(status),
-          "data-variant": variant,
-          className: cx(
-            prefix("checkbox-group"),
-            inline && prefix("checkbox-group--inline"),
-            className
-          ),
-          onMouseDown: combineEventHandlers(onMouseDown, handleMouseDown),
-          onFocus: combineEventHandlers(onFocus, handleFocus),
-          onBlur: combineEventHandlers(onBlur, handleBlur),
-          "aria-readonly": readOnly ? "true" : void 0,
-          "aria-labelledby": mergeAriaIds(
-            dataTableColumnLabelId,
-            labelId,
-            ariaLabelledBy
-          ),
-          "aria-describedby": mergeAriaIds(
-            codeId,
-            descriptionIds,
+          value: {
+            name,
+            value,
+            onCheckedChange: handleCheckedChange,
+            loadingDescriptionId,
             errorMessageIds,
-            ariaDescribedBy
-          ),
-          tabIndex,
-          ref: combinedCheckboxGroupRef,
-          children: [
-            code && /* @__PURE__ */ jsx(
-              ControlCode,
-              {
-                status,
-                ...codeProps,
-                id: codeId,
-                className: cx(
-                  prefix("checkbox-group__code"),
-                  codeProps?.className
+            ariaDescribedBy,
+            descriptionIds
+          },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "group",
+              id: controlId,
+              ...otherProps,
+              "data-status": status,
+              "data-accent": controlStatusToAccent(status),
+              "data-variant": variant,
+              className: cx(
+                prefix("checkbox-group"),
+                inline && prefix("checkbox-group--inline"),
+                className
+              ),
+              onMouseDown: combineEventHandlers(onMouseDown, handleMouseDown),
+              onFocus: combineEventHandlers(onFocus, handleFocus),
+              onBlur: combineEventHandlers(onBlur, handleBlur),
+              "aria-disabled": loading || readOnly || void 0,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 ? combineAriaIds(codeId, labelId ?? dataTableColumnLabelId) : void 0),
+              tabIndex,
+              ref: combinedCheckboxGroupRef,
+              children: [
+                code && /* @__PURE__ */ jsx(
+                  ControlCode,
+                  {
+                    status,
+                    ...codeProps,
+                    id: codeId,
+                    className: cx(
+                      prefix("checkbox-group__code"),
+                      codeProps?.className
+                    ),
+                    children: code
+                  }
                 ),
-                children: code
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                "data-status": status,
-                "data-variant": variant,
-                "data-disabled": boolDataAttr(disabled),
-                "data-readonly": boolDataAttr(readOnly),
-                ...containerProps,
-                className: cx(
-                  prefix("checkbox-group__container"),
-                  containerProps?.className
-                ),
-                children: /* @__PURE__ */ jsx(ClearContexts, { children })
-              }
-            ),
-            loading && /* @__PURE__ */ jsx(
-              "div",
-              {
-                "data-status": status,
-                "data-variant": variant,
-                "data-disabled": boolDataAttr(disabled),
-                "data-readonly": boolDataAttr(readOnly),
-                ...endContainerProps,
-                className: cx(
-                  prefix("checkbox-group__end-container"),
-                  endContainerProps?.className
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-status": status,
+                    "data-variant": variant,
+                    "data-disabled": boolDataAttr(disabled || loading),
+                    "data-readonly": boolDataAttr(readOnly),
+                    ...containerProps,
+                    className: cx(
+                      prefix("checkbox-group__container"),
+                      containerProps?.className
+                    ),
+                    children: /* @__PURE__ */ jsx(ClearContexts, { children })
+                  }
                 ),
-                children: /* @__PURE__ */ jsx(
-                  Spinner,
+                showSpinner && /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    color: controlStatusToAccent(status, "neutral"),
-                    "data-disabled": boolDataAttr(disabled),
-                    ...spinnerProps,
+                    "data-status": status,
+                    "data-variant": variant,
+                    "data-disabled": boolDataAttr(disabled || loading),
+                    "data-readonly": boolDataAttr(readOnly),
+                    ...endContainerProps,
                     className: cx(
-                      prefix("checkbox-group__spinner"),
-                      spinnerProps?.className
+                      prefix("checkbox-group__end-container"),
+                      endContainerProps?.className
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      Spinner,
+                      {
+                        color: controlStatusToAccent(status, "neutral"),
+                        "data-disabled": boolDataAttr(disabled || loading),
+                        ...spinnerProps,
+                        className: cx(
+                          prefix("checkbox-group__spinner"),
+                          spinnerProps?.className
+                        )
+                      }
                     )
                   }
-                )
-              }
-            )
-          ]
+                ),
+                loadingDescriptionId && /* @__PURE__ */ jsx(VisuallyHidden, { id: loadingDescriptionId, children: loadingDescription })
+              ]
+            }
+          )
         }
       )
     }
-  ) }) });
+  ) });
 });
 const Container = forwardRef(
   function Container2({
@@ -7718,6 +7771,7 @@ const DateInput = forwardRef(
     onChange,
     onFocus,
     disabled,
+    loading,
     readOnly,
     showClearButton = "auto",
     endAdornment,
@@ -7921,6 +7975,7 @@ const DateInput = forwardRef(
             value: formattedValue,
             placeholder,
             disabled,
+            loading,
             readOnly,
             onChange: combineEventHandlers(onChange, handleInputChange),
             onFocus: combineEventHandlers(onFocus, handleInputFocus),
@@ -7934,7 +7989,7 @@ const DateInput = forwardRef(
                   className: printHidden,
                   "aria-label": calendarButtonLabel?.(
                     fullFormattedValue,
-                    !disabled && !readOnly
+                    !disabled && !loading && !readOnly
                   ),
                   onClick: handleAddonButtonClick,
                   onBlur: handleControlBlur,
@@ -7944,7 +7999,7 @@ const DateInput = forwardRef(
                 }
               ) }) })
             ] }),
-            "aria-describedby": mergeAriaIds(
+            "aria-describedby": combineAriaIds(
               formatDescriptionId,
               ariaDescribedBy
             ),
@@ -8008,7 +8063,7 @@ const DateInput = forwardRef(
                 ),
                 month,
                 onMonthChange: handleMonthChange,
-                disabled: disabled || readOnly || datePickerProps?.disabled,
+                disabled: disabled || loading || readOnly || datePickerProps?.disabled,
                 minDate,
                 maxDate,
                 minMonth,
@@ -8144,8 +8199,10 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
   minYear,
   maxYear,
   loading,
-  startLoading = loading,
-  endLoading = loading,
+  loadingDescription,
+  showSpinners = loading,
+  showStartSpinner = showSpinners,
+  showEndSpinner = showSpinners,
   align,
   startAdornment,
   endAdornment,
@@ -8179,6 +8236,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
 }, forwardedRef) {
   const prefix = usePrefix();
   const [locale7] = useLocale();
+  loadingDescription ??= locale7.Input.loadingDescription;
   clearButtonsLabel ??= locale7.Input.clearButtonLabel;
   dateFnsLocale ??= locale7.dateFnsLocale;
   placeholder ??= locale7.DateInput.placeholder;
@@ -8196,17 +8254,17 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
   const descriptionIds = useFieldDescriptionIds();
   const errorMessageIds = useFieldErrorMessageIds();
   const { printHidden } = usePrintClassNames();
-  const { controlId, codeId } = useSetFieldControl(
+  const { generatedId, controlId, codeId } = useSetFieldControl(
     startInputProps?.id,
     "INPUT",
     codeProps?.id,
-    !!code,
+    Boolean(code),
     required
   );
   const setFieldControlFocused = useSetFieldControlFocused();
-  const generatedId = useId();
   const startInputLabelId = startInputLabel && prefix(`control-start-label-${generatedId}`);
   const endInputLabelId = endInputLabel && prefix(`control-end-label-${generatedId}`);
+  const loadingDescriptionId = loading && loadingDescription && prefix(`control-loading-${generatedId}`);
   const formatDescriptionId = formatDescription && prefix(`control-format-${generatedId}`);
   const isInTableCell = useIsInTableCell();
   variant ??= isInTableCell ? "cell" : "default";
@@ -8385,10 +8443,14 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
   );
   const handleClearButtonClick = useCallback(
     (ref) => () => {
-      if (ref.current) {
-        setNativeValue(ref.current, "");
-        ref.current.dispatchEvent(new Event("change", { bubbles: true }));
-        ref.current.focus();
+      const inputEl = ref.current;
+      if (inputEl && inputEl.value !== "") {
+        setNativeProperty(inputEl, "value", "");
+        const event = new Event("change", { bubbles: true, cancelable: true });
+        inputEl.dispatchEvent(event);
+        if (!event.defaultPrevented) {
+          inputEl.focus();
+        }
       }
     },
     []
@@ -8503,8 +8565,8 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
       setFormattedValue
     ]
   );
-  const hasStartClearButton = !disabled && !startInputProps?.disabled && !readOnly && !startInputProps?.readOnly && (showClearButtons === true || showClearButtons === "auto" && formattedValue.start !== "");
-  const hasEndClearButton = !disabled && !endInputProps?.disabled && !readOnly && !endInputProps?.readOnly && (showClearButtons === true || showClearButtons === "auto" && formattedValue.end !== "");
+  const hasStartClearButton = !disabled && !loading && !startInputProps?.disabled && !readOnly && !startInputProps?.readOnly && (showClearButtons === true || showClearButtons === "auto" && formattedValue.start !== "");
+  const hasEndClearButton = !disabled && !loading && !endInputProps?.disabled && !readOnly && !endInputProps?.readOnly && (showClearButtons === true || showClearButtons === "auto" && formattedValue.end !== "");
   const { responsiveValuesToCssVarsAndDataAttrs } = useResponsiveValues();
   const { cssVars, dataAttrs } = responsiveValuesToCssVarsAndDataAttrs(
     "control",
@@ -8538,373 +8600,393 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
     popoverRef,
     popoverContentProps?.ref
   );
-  return /* @__PURE__ */ jsx(ClearContexts, { field: false, children: /* @__PURE__ */ jsx(ControlContext.Provider, { value: { variant, status, disabled, readOnly }, children: /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(ClearContexts, { field: false, children: /* @__PURE__ */ jsx(
+    ControlContext.Provider,
     {
-      "data-status": status,
-      "data-accent": controlStatusToAccent(status),
-      "data-variant": variant,
-      "data-disabled": boolDataAttr(disabled),
-      "data-readonly": boolDataAttr(readOnly),
-      className: cx(prefix("date-range-input__root"), className),
-      ...otherProps,
-      ref: forwardedRef,
-      children: [
-        startInputLabel && /* @__PURE__ */ jsx(VisuallyHidden, { id: startInputLabelId, children: startInputLabel }),
-        endInputLabel && /* @__PURE__ */ jsx(VisuallyHidden, { id: endInputLabelId, children: endInputLabel }),
-        formatDescription && /* @__PURE__ */ jsx(VisuallyHidden, { id: formatDescriptionId, children: formatDescription }),
-        code && /* @__PURE__ */ jsx(
-          ControlCode,
-          {
-            ...codeProps,
-            id: codeId,
-            className: cx(
-              prefix("date-range-input__code"),
-              codeProps?.className
+      value: { variant, status, disabled, loading, readOnly },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-status": status,
+          "data-accent": controlStatusToAccent(status),
+          "data-variant": variant,
+          "data-disabled": boolDataAttr(
+            disabled || loading || startInputProps?.disabled && endInputProps?.disabled
+          ),
+          "data-readonly": boolDataAttr(
+            readOnly || startInputProps?.readOnly && endInputProps?.readOnly
+          ),
+          className: cx(prefix("date-range-input__root"), className),
+          ...otherProps,
+          ref: forwardedRef,
+          children: [
+            startInputLabelId && /* @__PURE__ */ jsx(VisuallyHidden, { id: startInputLabelId, children: startInputLabel }),
+            endInputLabelId && /* @__PURE__ */ jsx(VisuallyHidden, { id: endInputLabelId, children: endInputLabel }),
+            loadingDescriptionId && /* @__PURE__ */ jsx(VisuallyHidden, { id: loadingDescriptionId, children: loadingDescription }),
+            formatDescriptionId && /* @__PURE__ */ jsx(VisuallyHidden, { id: formatDescriptionId, children: formatDescription }),
+            code && /* @__PURE__ */ jsx(
+              ControlCode,
+              {
+                ...codeProps,
+                id: codeId,
+                className: cx(
+                  prefix("date-range-input__code"),
+                  codeProps?.className
+                ),
+                children: code
+              }
             ),
-            children: code
-          }
-        ),
-        /* @__PURE__ */ jsxs(Popover, { open: popoverState.open, modal: popoverState.modal, children: [
-          /* @__PURE__ */ jsxs(
-            PopoverAnchor,
-            {
-              ...popoverAnchorProps,
-              className: cx(
-                prefix("date-range-input__container"),
-                prefix("date-range-input__popover-anchor"),
-                popoverAnchorProps?.className
-              ),
-              children: [
-                startAdornment,
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    "data-focused": boolDataAttr(
-                      !disabled && !startInputProps?.disabled && popoverState.open && selectionMode === "start"
-                    ),
-                    "data-status": status,
-                    "data-accent": controlStatusToAccent(status),
-                    "data-variant": variant,
-                    "data-disabled": boolDataAttr(
-                      disabled || startInputProps?.disabled && endInputProps?.disabled
-                    ),
-                    "data-readonly": boolDataAttr(
-                      readOnly || startInputProps?.readOnly && endInputProps?.readOnly
-                    ),
-                    ...startContainerProps,
-                    className: cx(
-                      prefix("date-range-input__container"),
-                      prefix("date-range-input__container--start"),
-                      startContainerProps?.className
-                    ),
-                    onPointerDown: combineEventHandlers(
-                      startContainerProps?.onPointerDown,
-                      handleContainerPointerDown("start")
-                    ),
-                    ref: combinedStartContainerRef,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          ...startInputProps,
-                          id: controlId,
-                          "data-status": status,
-                          "data-variant": variant,
-                          className: cx(
-                            prefix("date-range-input"),
-                            prefix("date-range-input--start"),
-                            startInputProps?.className
-                          ),
-                          value: formattedValue.start,
-                          placeholder: startInputProps?.placeholder ?? startPlaceholder ?? placeholder,
-                          required: required || startInputProps?.required,
-                          disabled: disabled || startInputProps?.disabled,
-                          readOnly: readOnly || startInputProps?.readOnly,
-                          onChange: combineEventHandlers(
-                            startInputProps?.onChange,
-                            handleStartInputChange
-                          ),
-                          onFocus: combineEventHandlers(
-                            startInputProps?.onFocus,
-                            handleInputFocus("start")
-                          ),
-                          onBlur: combineEventHandlers(
-                            startInputProps?.onBlur,
-                            handleControlBlur
-                          ),
-                          style: { ...cssVars, ...startInputProps?.style },
-                          ...dataAttrs,
-                          "aria-invalid": status === "invalid" ? "true" : void 0,
-                          "aria-labelledby": mergeAriaIds(
-                            dataTableColumnLabelId,
-                            labelId,
-                            startInputLabelId,
-                            startInputProps?.["aria-labelledby"]
-                          ),
-                          "aria-describedby": mergeAriaIds(
-                            codeId,
-                            errorMessageIds,
-                            descriptionIds,
-                            formatDescriptionId,
-                            startInputProps?.["aria-describedby"]
-                          ),
-                          ref: combinedStartInputRef
-                        }
-                      ),
-                      hasStartClearButton && /* @__PURE__ */ jsx(
-                        CloseButton,
-                        {
-                          size: "sm",
-                          label: clearButtonsLabel,
-                          tabIndex: -1,
-                          ...startClearButtonProps,
-                          className: cx(
-                            prefix("date-range-input__clear-button"),
-                            prefix("date-range-input__clear-button--start"),
-                            printHidden,
-                            startClearButtonProps?.className
-                          ),
-                          onClick: combineEventHandlers(
-                            startClearButtonProps?.onClick,
-                            handleClearButtonClick(startInputRef),
-                            { checkDefaultPrevented: true }
+            /* @__PURE__ */ jsxs(Popover, { open: popoverState.open, modal: popoverState.modal, children: [
+              /* @__PURE__ */ jsxs(
+                PopoverAnchor,
+                {
+                  "data-status": status,
+                  "data-accent": controlStatusToAccent(status),
+                  "data-variant": variant,
+                  "data-disabled": boolDataAttr(
+                    disabled || loading || startInputProps?.disabled && endInputProps?.disabled
+                  ),
+                  "data-readonly": boolDataAttr(
+                    readOnly || startInputProps?.readOnly && endInputProps?.readOnly
+                  ),
+                  ...popoverAnchorProps,
+                  className: cx(
+                    prefix("date-range-input__container"),
+                    prefix("date-range-input__popover-anchor"),
+                    popoverAnchorProps?.className
+                  ),
+                  children: [
+                    startAdornment,
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "data-focused": boolDataAttr(
+                          !disabled && !startInputProps?.disabled && popoverState.open && selectionMode === "start"
+                        ),
+                        "data-status": status,
+                        "data-accent": controlStatusToAccent(status),
+                        "data-variant": variant,
+                        "data-disabled": boolDataAttr(
+                          disabled || loading || startInputProps?.disabled && endInputProps?.disabled
+                        ),
+                        "data-readonly": boolDataAttr(
+                          readOnly || startInputProps?.readOnly && endInputProps?.readOnly
+                        ),
+                        ...startContainerProps,
+                        className: cx(
+                          prefix("date-range-input__container"),
+                          prefix("date-range-input__container--start"),
+                          startContainerProps?.className
+                        ),
+                        onPointerDown: combineEventHandlers(
+                          startContainerProps?.onPointerDown,
+                          handleContainerPointerDown("start")
+                        ),
+                        ref: combinedStartContainerRef,
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              ...startInputProps,
+                              id: controlId,
+                              "data-loading": boolDataAttr(loading),
+                              "data-status": status,
+                              "data-variant": variant,
+                              className: cx(
+                                prefix("date-range-input"),
+                                prefix("date-range-input--start"),
+                                startInputProps?.className
+                              ),
+                              value: formattedValue.start,
+                              placeholder: startInputProps?.placeholder ?? startPlaceholder ?? placeholder,
+                              required: required || startInputProps?.required,
+                              disabled: disabled || startInputProps?.disabled,
+                              readOnly: readOnly || loading || startInputProps?.readOnly,
+                              onChange: combineEventHandlers(
+                                startInputProps?.onChange,
+                                handleStartInputChange
+                              ),
+                              onFocus: combineEventHandlers(
+                                startInputProps?.onFocus,
+                                handleInputFocus("start")
+                              ),
+                              onBlur: combineEventHandlers(
+                                startInputProps?.onBlur,
+                                handleControlBlur
+                              ),
+                              style: { ...cssVars, ...startInputProps?.style },
+                              ...dataAttrs,
+                              "aria-invalid": status === "invalid" || void 0,
+                              "aria-labelledby": startInputProps?.["aria-labelledby"] ?? (startInputProps?.["aria-label"] === void 0 ? combineAriaIds(
+                                codeId,
+                                labelId ?? dataTableColumnLabelId,
+                                startInputLabelId
+                              ) : void 0),
+                              "aria-describedby": combineAriaIds(
+                                loadingDescriptionId,
+                                errorMessageIds,
+                                startInputProps?.["aria-describedby"],
+                                formatDescriptionId,
+                                descriptionIds
+                              ),
+                              ref: combinedStartInputRef
+                            }
                           ),
-                          ref: combinedStartClearButtonRef
-                        }
-                      ),
-                      startLoading && /* @__PURE__ */ jsx(
-                        Spinner,
-                        {
-                          color: controlStatusToAccent(status, "neutral"),
-                          "data-disabled": boolDataAttr(
-                            disabled || startInputProps?.disabled
+                          hasStartClearButton && /* @__PURE__ */ jsx(
+                            CloseButton,
+                            {
+                              size: "sm",
+                              label: clearButtonsLabel,
+                              tabIndex: -1,
+                              ...startClearButtonProps,
+                              className: cx(
+                                prefix("date-range-input__clear-button"),
+                                prefix("date-range-input__clear-button--start"),
+                                printHidden,
+                                startClearButtonProps?.className
+                              ),
+                              onClick: combineEventHandlers(
+                                startClearButtonProps?.onClick,
+                                handleClearButtonClick(startInputRef),
+                                { checkDefaultPrevented: true }
+                              ),
+                              ref: combinedStartClearButtonRef
+                            }
                           ),
-                          ...spinnerProps,
-                          className: cx(
-                            prefix("date-range-input__spinner"),
-                            prefix("date-range-input__spinner--start"),
-                            spinnerProps?.className
+                          showStartSpinner && /* @__PURE__ */ jsx(
+                            Spinner,
+                            {
+                              color: controlStatusToAccent(status, "neutral"),
+                              "data-disabled": boolDataAttr(
+                                disabled || loading || startInputProps?.disabled
+                              ),
+                              ...spinnerProps,
+                              className: cx(
+                                prefix("date-range-input__spinner"),
+                                prefix("date-range-input__spinner--start"),
+                                spinnerProps?.className
+                              )
+                            }
                           )
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(ControlAddon, { className: cx(prefix("date-range-input__arrow")), children: /* @__PURE__ */ jsx(Icon, { icon: faArrowRight }) }),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    "data-focused": boolDataAttr(
-                      !disabled && !endInputProps?.disabled && popoverState.open && selectionMode === "end"
-                    ),
-                    "data-status": status,
-                    "data-accent": controlStatusToAccent(status),
-                    "data-variant": variant,
-                    "data-disabled": boolDataAttr(
-                      disabled || startInputProps?.disabled && endInputProps?.disabled
-                    ),
-                    "data-readonly": boolDataAttr(
-                      readOnly || startInputProps?.readOnly && endInputProps?.readOnly
-                    ),
-                    ...endContainerProps,
-                    className: cx(
-                      prefix("date-range-input__container"),
-                      prefix("date-range-input__container--end"),
-                      endContainerProps?.className
-                    ),
-                    onPointerDown: combineEventHandlers(
-                      endContainerProps?.onPointerDown,
-                      handleContainerPointerDown("end")
+                        ]
+                      }
                     ),
-                    ref: combinedEndContainerRef,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          ...endInputProps,
-                          "data-status": status,
-                          "data-variant": variant,
-                          className: cx(
-                            prefix("date-range-input"),
-                            prefix("date-range-input--end"),
-                            endInputProps?.className
-                          ),
-                          value: formattedValue.end,
-                          placeholder: endInputProps?.placeholder ?? endPlaceholder ?? placeholder,
-                          required: required || endInputProps?.required,
-                          disabled: disabled || endInputProps?.disabled,
-                          readOnly: readOnly || endInputProps?.readOnly,
-                          onChange: combineEventHandlers(
-                            endInputProps?.onChange,
-                            handleEndInputChange
-                          ),
-                          onFocus: combineEventHandlers(
-                            endInputProps?.onFocus,
-                            handleInputFocus("end")
-                          ),
-                          onBlur: combineEventHandlers(
-                            endInputProps?.onBlur,
-                            handleControlBlur
-                          ),
-                          style: { ...cssVars, ...endInputProps?.style },
-                          ...dataAttrs,
-                          "aria-invalid": status === "invalid" ? "true" : void 0,
-                          "aria-labelledby": mergeAriaIds(
-                            dataTableColumnLabelId,
-                            labelId,
-                            endInputLabelId,
-                            endInputProps?.["aria-labelledby"]
-                          ),
-                          "aria-describedby": mergeAriaIds(
-                            codeId,
-                            errorMessageIds,
-                            descriptionIds,
-                            formatDescriptionId,
-                            endInputProps?.["aria-describedby"]
-                          ),
-                          ref: combinedEndInputRef
-                        }
-                      ),
-                      hasEndClearButton && /* @__PURE__ */ jsx(
-                        CloseButton,
-                        {
-                          size: "sm",
-                          label: clearButtonsLabel,
-                          tabIndex: -1,
-                          ...endClearButtonProps,
-                          className: cx(
-                            prefix("date-range-input__clear-button"),
-                            prefix("date-range-input__clear-button--end"),
-                            printHidden,
-                            endClearButtonProps?.className
-                          ),
-                          onClick: combineEventHandlers(
-                            endClearButtonProps?.onClick,
-                            handleClearButtonClick(endInputRef),
-                            { checkDefaultPrevented: true }
+                    /* @__PURE__ */ jsx(ControlAddon, { className: cx(prefix("date-range-input__arrow")), children: /* @__PURE__ */ jsx(Icon, { icon: faArrowRight }) }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "data-focused": boolDataAttr(
+                          !disabled && !endInputProps?.disabled && popoverState.open && selectionMode === "end"
+                        ),
+                        "data-status": status,
+                        "data-accent": controlStatusToAccent(status),
+                        "data-variant": variant,
+                        "data-disabled": boolDataAttr(
+                          disabled || loading || startInputProps?.disabled && endInputProps?.disabled
+                        ),
+                        "data-readonly": boolDataAttr(
+                          readOnly || startInputProps?.readOnly && endInputProps?.readOnly
+                        ),
+                        ...endContainerProps,
+                        className: cx(
+                          prefix("date-range-input__container"),
+                          prefix("date-range-input__container--end"),
+                          endContainerProps?.className
+                        ),
+                        onPointerDown: combineEventHandlers(
+                          endContainerProps?.onPointerDown,
+                          handleContainerPointerDown("end")
+                        ),
+                        ref: combinedEndContainerRef,
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              ...endInputProps,
+                              "data-loading": boolDataAttr(loading),
+                              "data-status": status,
+                              "data-variant": variant,
+                              className: cx(
+                                prefix("date-range-input"),
+                                prefix("date-range-input--end"),
+                                endInputProps?.className
+                              ),
+                              value: formattedValue.end,
+                              placeholder: endInputProps?.placeholder ?? endPlaceholder ?? placeholder,
+                              required: required || endInputProps?.required,
+                              disabled: disabled || endInputProps?.disabled,
+                              readOnly: readOnly || loading || endInputProps?.readOnly,
+                              onChange: combineEventHandlers(
+                                endInputProps?.onChange,
+                                handleEndInputChange
+                              ),
+                              onFocus: combineEventHandlers(
+                                endInputProps?.onFocus,
+                                handleInputFocus("end")
+                              ),
+                              onBlur: combineEventHandlers(
+                                endInputProps?.onBlur,
+                                handleControlBlur
+                              ),
+                              style: { ...cssVars, ...endInputProps?.style },
+                              ...dataAttrs,
+                              "aria-invalid": status === "invalid" || void 0,
+                              "aria-labelledby": endInputProps?.["aria-labelledby"] ?? (endInputProps?.["aria-label"] === void 0 ? combineAriaIds(
+                                codeId,
+                                labelId ?? dataTableColumnLabelId,
+                                endInputLabelId
+                              ) : void 0),
+                              "aria-describedby": combineAriaIds(
+                                loadingDescriptionId,
+                                errorMessageIds,
+                                endInputProps?.["aria-describedby"],
+                                formatDescriptionId,
+                                descriptionIds
+                              ),
+                              ref: combinedEndInputRef
+                            }
                           ),
-                          ref: combinedEndClearButtonRef
-                        }
-                      ),
-                      endLoading && /* @__PURE__ */ jsx(
-                        Spinner,
-                        {
-                          color: controlStatusToAccent(status, "neutral"),
-                          "data-disabled": boolDataAttr(
-                            disabled || endInputProps?.disabled
+                          hasEndClearButton && /* @__PURE__ */ jsx(
+                            CloseButton,
+                            {
+                              size: "sm",
+                              label: clearButtonsLabel,
+                              tabIndex: -1,
+                              ...endClearButtonProps,
+                              className: cx(
+                                prefix("date-range-input__clear-button"),
+                                prefix("date-range-input__clear-button--end"),
+                                printHidden,
+                                endClearButtonProps?.className
+                              ),
+                              onClick: combineEventHandlers(
+                                endClearButtonProps?.onClick,
+                                handleClearButtonClick(endInputRef),
+                                { checkDefaultPrevented: true }
+                              ),
+                              ref: combinedEndClearButtonRef
+                            }
                           ),
-                          ...spinnerProps,
-                          className: cx(
-                            prefix("date-range-input__spinner"),
-                            prefix("date-range-input__spinner--end"),
-                            spinnerProps?.className
+                          showEndSpinner && /* @__PURE__ */ jsx(
+                            Spinner,
+                            {
+                              color: controlStatusToAccent(status, "neutral"),
+                              "data-disabled": boolDataAttr(
+                                disabled || loading || endInputProps?.disabled
+                              ),
+                              ...spinnerProps,
+                              className: cx(
+                                prefix("date-range-input__spinner"),
+                                prefix("date-range-input__spinner--end"),
+                                spinnerProps?.className
+                              )
+                            }
                           )
-                        }
-                      )
-                    ]
-                  }
-                ),
-                endAdornment,
-                /* @__PURE__ */ jsx(ControlAddon, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    "aria-label": calendarButtonLabel?.(
-                      fullFormattedValue,
-                      !disabled && !readOnly
-                    ),
-                    onClick: handleAddonButtonClick,
-                    onBlur: handleControlBlur,
-                    "data-state": void 0,
-                    className: cx(
-                      prefix("date-range-input__calendar-button"),
-                      printHidden
+                        ]
+                      }
                     ),
-                    ref: addonButtonRef,
-                    children: /* @__PURE__ */ jsx(Icon, { icon: faCalendar })
-                  }
-                ) }) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            PopoverContent,
-            {
-              ...popoverContentProps,
-              className: cx(
-                prefix("date-range-input__popover"),
-                popoverContentProps?.className
-              ),
-              side: popoverContentProps?.side ?? "bottom",
-              sideOffset: popoverContentProps?.sideOffset ?? 5,
-              showArrow: popoverContentProps?.showArrow ?? false,
-              onOpenAutoFocus: combineEventHandlers(
-                popoverContentProps?.onOpenAutoFocus,
-                handlePopoverOpenAutoFocus
-              ),
-              onEscapeKeyDown: combineEventHandlers(
-                popoverContentProps?.onEscapeKeyDown,
-                handlePopoverEscapeKeyDown
-              ),
-              onPointerDownOutside: combineEventHandlers(
-                popoverContentProps?.onPointerDownOutside,
-                handlePopoverPointerDownOutside
-              ),
-              onInteractOutside: combineEventHandlers(
-                popoverContentProps?.onInteractOutside,
-                handlePopoverInteractOutside
-              ),
-              onBlur: combineEventHandlers(
-                popoverContentProps?.onBlur,
-                handleControlBlur
+                    endAdornment,
+                    /* @__PURE__ */ jsx(ControlAddon, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "aria-label": calendarButtonLabel?.(
+                          fullFormattedValue,
+                          !disabled && !loading && !readOnly
+                        ),
+                        onClick: handleAddonButtonClick,
+                        onBlur: handleControlBlur,
+                        "data-state": void 0,
+                        className: cx(
+                          prefix("date-range-input__calendar-button"),
+                          printHidden
+                        ),
+                        ref: addonButtonRef,
+                        children: /* @__PURE__ */ jsx(Icon, { icon: faCalendar })
+                      }
+                    ) }) })
+                  ]
+                }
               ),
-              ref: combinedPopoverRef,
-              children: /* @__PURE__ */ jsx(
-                DateRangePicker,
+              /* @__PURE__ */ jsx(
+                PopoverContent,
                 {
+                  ...popoverContentProps,
                   className: cx(
-                    prefix("date-range-input__picker"),
-                    dateRangePickerProps?.className
+                    prefix("date-range-input__popover"),
+                    popoverContentProps?.className
                   ),
-                  ...dateRangePickerProps,
-                  value: deferredDateValue,
-                  onChange: combineEventHandlers(
-                    dateRangePickerProps?.onChange,
-                    handleDatePickerChange
+                  side: popoverContentProps?.side ?? "bottom",
+                  sideOffset: popoverContentProps?.sideOffset ?? 5,
+                  showArrow: popoverContentProps?.showArrow ?? false,
+                  onOpenAutoFocus: combineEventHandlers(
+                    popoverContentProps?.onOpenAutoFocus,
+                    handlePopoverOpenAutoFocus
                   ),
-                  selectionMode,
-                  month,
-                  onMonthChange: handleMonthChange,
-                  disabled: disabled || readOnly || (startInputProps?.disabled || startInputProps?.readOnly) && (endInputProps?.disabled || endInputProps?.readOnly) || dateRangePickerProps?.disabled,
-                  minDate,
-                  maxDate,
-                  minMonth,
-                  maxMonth,
-                  minYear,
-                  maxYear,
-                  locale: dateFnsLocale,
-                  monthSelectProps: {
-                    ...dateRangePickerProps?.monthSelectProps,
-                    popoverProps: {
-                      ...dateRangePickerProps?.monthSelectProps?.popoverProps,
-                      ref: monthSelectMenuRef
-                    }
-                  },
-                  yearSelectProps: {
-                    ...dateRangePickerProps?.yearSelectProps,
-                    popoverProps: {
-                      ...dateRangePickerProps?.yearSelectProps?.popoverProps,
-                      ref: yearSelectMenuRef
+                  onEscapeKeyDown: combineEventHandlers(
+                    popoverContentProps?.onEscapeKeyDown,
+                    handlePopoverEscapeKeyDown
+                  ),
+                  onPointerDownOutside: combineEventHandlers(
+                    popoverContentProps?.onPointerDownOutside,
+                    handlePopoverPointerDownOutside
+                  ),
+                  onInteractOutside: combineEventHandlers(
+                    popoverContentProps?.onInteractOutside,
+                    handlePopoverInteractOutside
+                  ),
+                  onBlur: combineEventHandlers(
+                    popoverContentProps?.onBlur,
+                    handleControlBlur
+                  ),
+                  ref: combinedPopoverRef,
+                  children: /* @__PURE__ */ jsx(
+                    DateRangePicker,
+                    {
+                      className: cx(
+                        prefix("date-range-input__picker"),
+                        dateRangePickerProps?.className
+                      ),
+                      ...dateRangePickerProps,
+                      value: deferredDateValue,
+                      onChange: combineEventHandlers(
+                        dateRangePickerProps?.onChange,
+                        handleDatePickerChange
+                      ),
+                      selectionMode,
+                      month,
+                      onMonthChange: handleMonthChange,
+                      disabled: disabled || loading || readOnly || (startInputProps?.disabled || startInputProps?.readOnly) && (endInputProps?.disabled || endInputProps?.readOnly) || dateRangePickerProps?.disabled,
+                      minDate,
+                      maxDate,
+                      minMonth,
+                      maxMonth,
+                      minYear,
+                      maxYear,
+                      locale: dateFnsLocale,
+                      monthSelectProps: {
+                        ...dateRangePickerProps?.monthSelectProps,
+                        popoverProps: {
+                          ...dateRangePickerProps?.monthSelectProps?.popoverProps,
+                          ref: monthSelectMenuRef
+                        }
+                      },
+                      yearSelectProps: {
+                        ...dateRangePickerProps?.yearSelectProps,
+                        popoverProps: {
+                          ...dateRangePickerProps?.yearSelectProps?.popoverProps,
+                          ref: yearSelectMenuRef
+                        }
+                      }
                     }
-                  }
+                  )
                 }
               )
-            }
-          )
-        ] })
-      ]
+            ] })
+          ]
+        }
+      )
     }
-  ) }) });
+  ) });
 });
 const DropdownMenu = DropdownMenu$1.Root;
 const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
@@ -8912,11 +8994,12 @@ const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
   defaultChecked,
   checked: controlledChecked,
   onCheckedChange,
+  onSelect,
   color,
   disabled,
   loading,
-  enabledWhenLoading,
   loadingContent,
+  showSpinner,
   iconPlacement,
   actionProps,
   contentProps,
@@ -8933,10 +9016,22 @@ const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
   );
   const handleCheckedChange = useCallback(
     (checked2) => {
-      onCheckedChange?.(checked2);
-      setChecked(checked2);
+      if (!loading) {
+        onCheckedChange?.(checked2);
+        setChecked(checked2);
+      }
+    },
+    [loading, onCheckedChange, setChecked]
+  );
+  const handleSelect = useCallback(
+    (evt) => {
+      if (loading) {
+        evt.preventDefault();
+        return;
+      }
+      onSelect?.(evt);
     },
-    [onCheckedChange, setChecked]
+    [loading, onSelect]
   );
   return /* @__PURE__ */ jsx(
     MenuListItem,
@@ -8945,8 +9040,8 @@ const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
       color,
       disabled,
       loading,
-      enabledWhenLoading,
       loadingContent,
+      showSpinner,
       iconPlacement,
       actionProps,
       contentProps,
@@ -8970,6 +9065,7 @@ const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
         {
           checked,
           onCheckedChange: handleCheckedChange,
+          onSelect: handleSelect,
           disabled,
           ...otherProps,
           className: cx(prefix("dropdown-menu__checkbox-item"), className),
@@ -9066,8 +9162,8 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
   color,
   disabled,
   loading,
-  enabledWhenLoading,
   loadingContent,
+  showSpinner,
   icon,
   iconPlacement,
   href,
@@ -9081,11 +9177,19 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
-  const handleSelect = useCallback(() => {
-    if (asLink) {
-      window.open(href, target, rel?.split(" ").join(","));
-    }
-  }, [asLink, href, rel, target]);
+  const handleSelect = useCallback(
+    (evt) => {
+      if (loading) {
+        evt.preventDefault();
+        return;
+      }
+      onSelect?.(evt);
+      if (asLink && !evt.defaultPrevented) {
+        window.open(href, target, rel?.split(" ").join(","));
+      }
+    },
+    [asLink, href, loading, onSelect, rel, target]
+  );
   return /* @__PURE__ */ jsx(
     MenuListItem,
     {
@@ -9094,8 +9198,8 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
       color,
       disabled,
       loading,
-      enabledWhenLoading,
       loadingContent,
+      showSpinner,
       icon,
       iconPlacement,
       href,
@@ -9109,11 +9213,9 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
       children: /* @__PURE__ */ jsx(
         DropdownMenu$1.Item,
         {
-          disabled: disabled || loading && !enabledWhenLoading,
+          disabled,
           ...otherProps,
-          onSelect: combineEventHandlers(onSelect, handleSelect, {
-            checkDefaultPrevented: true
-          }),
+          onSelect: handleSelect,
           className: cx(prefix("dropdown-menu__item"), className),
           ref: forwardedRef
         }
@@ -9143,11 +9245,12 @@ const DropdownMenuRadioGroup = forwardRef(function DropdownMenuRadioGroup2({ lab
 });
 const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({
   showRadio = true,
+  onSelect,
   color,
   disabled,
   loading,
-  enabledWhenLoading,
   loadingContent,
+  showSpinner,
   iconPlacement,
   actionProps,
   contentProps,
@@ -9158,6 +9261,16 @@ const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const handleSelect = useCallback(
+    (evt) => {
+      if (loading) {
+        evt.preventDefault();
+        return;
+      }
+      onSelect?.(evt);
+    },
+    [loading, onSelect]
+  );
   return /* @__PURE__ */ jsx(
     MenuListItem,
     {
@@ -9165,8 +9278,8 @@ const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({
       color,
       disabled,
       loading,
-      enabledWhenLoading,
       loadingContent,
+      showSpinner,
       iconPlacement,
       actionProps,
       contentProps,
@@ -9188,6 +9301,7 @@ const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({
         DropdownMenu$1.RadioItem,
         {
           disabled,
+          onSelect: handleSelect,
           className: cx(prefix("dropdown-menu__radio-item"), className),
           ref: forwardedRef,
           ...otherProps
@@ -9482,8 +9596,8 @@ const FieldGroup = forwardRef(
   function FieldGroup2({
     asChild,
     className,
+    "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
     ...otherProps
   }, forwardedRef) {
     const prefix = usePrefix();
@@ -9496,8 +9610,8 @@ const FieldGroup = forwardRef(
         className: cx(prefix("field-group"), className),
         role: "group",
         ...otherProps,
-        "aria-labelledby": mergeAriaIds(titleId, ariaLabelledBy),
-        "aria-describedby": mergeAriaIds(codeId, ariaDescribedBy),
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 ? combineAriaIds(codeId, titleId) : void 0),
         ref: forwardedRef
       }
     ) });
@@ -9538,7 +9652,7 @@ const FieldGroupHeader = forwardRef(function FieldGroupHeader2({
     As,
     {
       className: cx(prefix("field-group__header"), className),
-      "data-has-code": boolDataAttr(!!code),
+      "data-has-code": boolDataAttr(Boolean(code)),
       ...otherProps,
       ref: forwardedRef,
       children: [
@@ -9938,7 +10052,7 @@ function transformOptions({
     ...otherOptions
   };
 }
-const NumericInput = forwardRef(function DateInput3({
+const NumericInput = forwardRef(function NumericInput2({
   defaultValue,
   value,
   valueIsUnformattedString = false,
@@ -10104,7 +10218,7 @@ function validateNumericProps({
   }
 }
 function valueNeedsTransformation(value, valueIsUnformattedString, valueIsInteger, scale) {
-  return value != null && valueIsInteger && !!scale && (typeof value !== "string" || valueIsUnformattedString);
+  return value != null && valueIsInteger && Boolean(scale) && (typeof value !== "string" || valueIsUnformattedString);
 }
 function transformIntegerValueWithScale(value, scale) {
   const stringValue = numericToString(value);
@@ -10124,16 +10238,27 @@ function transformNumberFormatValues({ formattedValue, value, floatValue }, valu
   return { formattedValue, stringValue, numberValue: +stringValue };
 }
 const Output = forwardRef(
-  function Output2({ className, children, ...otherProps }, forwardedRef) {
+  function Output2({
+    pending,
+    pendingContent,
+    showSpinner = pending,
+    children,
+    className,
+    ...otherProps
+  }, forwardedRef) {
     const prefix = usePrefix();
     return /* @__PURE__ */ jsx(
       Input,
       {
+        showSpinner,
+        "aria-busy": pending || void 0,
+        "aria-disabled": void 0,
+        "aria-invalid": void 0,
         ...otherProps,
         className: cx(prefix("output"), className),
         readOnly: true,
         asChild: true,
-        children: /* @__PURE__ */ jsx("output", { ref: forwardedRef, children })
+        children: /* @__PURE__ */ jsx("output", { ref: forwardedRef, children: pending ? pendingContent || children : children })
       }
     );
   }
@@ -10143,6 +10268,8 @@ const Radio = forwardRef(function Radio2({
   status,
   code,
   loading,
+  loadingDescription,
+  showSpinner = loading,
   children,
   rootProps,
   codeProps,
@@ -10152,18 +10279,34 @@ const Radio = forwardRef(function Radio2({
   id,
   disabled,
   readOnly,
+  onClick,
   className,
-  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const [locale7] = useLocale();
+  loadingDescription ??= locale7.Input.loadingDescription;
   const controlContext = useControlContext();
   const generatedId = useId();
-  const radioId = id ?? prefix(`radio-${generatedId}`);
-  const codeId = codeProps?.id ?? prefix(`control-code-${generatedId}`);
+  const controlId = id ?? prefix(`control-${generatedId}`);
+  const codeId = code && (codeProps?.id ?? prefix(`control-code-${generatedId}`));
+  const labelId = children && (labelProps?.id ?? prefix(`radio-label-${generatedId}`));
+  const loadingDescriptionId = loading && loadingDescription && prefix(`control-loading-${generatedId}`);
   status = controlContext?.status ?? status;
   disabled = controlContext?.disabled || disabled;
+  loading = controlContext?.loading || loading;
   readOnly = controlContext?.readOnly || readOnly;
+  const handleClick = useCallback(
+    (evt) => {
+      if (loading || readOnly) {
+        evt.preventDefault();
+      }
+    },
+    [loading, readOnly]
+  );
+  const combinedLabelIds = combineAriaIds(codeId, labelId);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -10171,7 +10314,7 @@ const Radio = forwardRef(function Radio2({
       ...rootProps,
       className: cx(prefix("radio__root"), rootProps?.className),
       children: [
-        code && /* @__PURE__ */ jsx(
+        codeId && /* @__PURE__ */ jsx(
           ControlCode,
           {
             status,
@@ -10184,19 +10327,19 @@ const Radio = forwardRef(function Radio2({
         /* @__PURE__ */ jsx(
           RadioGroup$1.Item,
           {
-            id: radioId,
+            id: controlId,
             className: cx(prefix("radio"), className),
             value: value?.toString() ?? "",
             disabled,
+            "data-loading": boolDataAttr(loading),
             "data-readonly": boolDataAttr(readOnly),
-            "aria-readonly": readOnly ? "true" : void 0,
             "data-status": status,
-            "aria-describedby": mergeAriaIds(
-              code != null ? codeId : void 0,
-              ariaDescribedBy
-            ),
-            ref: forwardedRef,
+            "aria-disabled": loading || readOnly || void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 && combinedLabelIds !== labelId ? combinedLabelIds : void 0),
             ...otherProps,
+            onClick: combineEventHandlers(onClick, handleClick),
+            ref: forwardedRef,
             children: /* @__PURE__ */ jsx(
               RadioGroup$1.Indicator,
               {
@@ -10206,12 +10349,13 @@ const Radio = forwardRef(function Radio2({
             )
           }
         ),
-        children && /* @__PURE__ */ jsx(
+        labelId && /* @__PURE__ */ jsx(
           Label,
           {
-            htmlFor: radioId,
+            htmlFor: controlId,
             "data-status": status,
             ...labelProps,
+            id: labelId,
             className: cx(prefix("radio__label"), labelProps?.className),
             containerProps: {
               ...labelProps?.containerProps,
@@ -10223,15 +10367,16 @@ const Radio = forwardRef(function Radio2({
             children
           }
         ),
-        loading && /* @__PURE__ */ jsx(
+        showSpinner && /* @__PURE__ */ jsx(
           Spinner,
           {
             "data-status": status,
-            "data-disabled": boolDataAttr(disabled),
+            "data-disabled": boolDataAttr(disabled || loading),
             ...spinnerProps,
-            className: cx(prefix("checkbox__spinner"), spinnerProps?.className)
+            className: cx(prefix("radio__spinner"), spinnerProps?.className)
           }
-        )
+        ),
+        loadingDescriptionId && /* @__PURE__ */ jsx(VisuallyHidden, { id: loadingDescriptionId, children: loadingDescription })
       ]
     }
   );
@@ -10244,6 +10389,8 @@ const RadioGroup = forwardRef(function RadioGroup2({
   variant,
   status,
   loading,
+  loadingDescription,
+  showSpinner = loading,
   code,
   showClearButton,
   clearButtonLabel,
@@ -10259,6 +10406,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
   readOnly,
   className,
   children,
+  "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   onFocus,
@@ -10268,6 +10416,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
 }, forwardedRef) {
   const prefix = usePrefix();
   const [locale7] = useLocale();
+  loadingDescription ??= locale7.Input.loadingDescription;
   clearButtonLabel ??= locale7.Input.clearButtonLabel;
   const labelId = useFieldLabelId();
   const dataTableColumnLabelId = useDataTableColumnLabelId();
@@ -10277,25 +10426,26 @@ const RadioGroup = forwardRef(function RadioGroup2({
     defaultValue ?? "",
     controlledValue
   );
-  const { controlId, codeId } = useSetFieldControl(
+  const { generatedId, controlId, codeId } = useSetFieldControl(
     id,
     "DIV",
     codeProps?.id,
-    !!code,
+    Boolean(code),
     required
   );
+  const loadingDescriptionId = loading && loadingDescription && prefix(`control-loading-${generatedId}`);
   const radioGroupRef = useRef(null);
   const isInTableCell = useIsInTableCell();
   inline ??= isInTableCell;
   variant ??= isInTableCell ? "cell" : "default";
   const handleValueChange = useCallback(
     (value2) => {
-      if (!readOnly) {
+      if (!loading && !readOnly) {
         setValue(value2);
         onValueChange?.(value2);
       }
     },
-    [onValueChange, readOnly, setValue]
+    [loading, onValueChange, readOnly, setValue]
   );
   const setFieldControlFocused = useSetFieldControlFocused();
   const handleControlFocus = useCallback(() => {
@@ -10314,7 +10464,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
     handleValueChange("");
     radioGroupRef.current?.focus();
   }, [handleValueChange]);
-  const hasClearButton = !disabled && !readOnly && (showClearButton === true || showClearButton === "auto" && (value?.length ?? 0) > 0);
+  const hasClearButton = !disabled && !loading && !readOnly && (showClearButton === true || showClearButton === "auto" && (value?.length ?? 0) > 0);
   const handleKeyDown = useCallback(
     (evt) => {
       if (hasClearButton && (evt.code === "Delete" || evt.code === "Backspace")) {
@@ -10324,123 +10474,128 @@ const RadioGroup = forwardRef(function RadioGroup2({
     [handleClearButtonClick, hasClearButton]
   );
   const combinedRadioGroupRef = useCombinedRef(radioGroupRef, forwardedRef);
-  return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(ControlContext.Provider, { value: { variant, status, disabled, readOnly }, children: /* @__PURE__ */ jsxs(
-    RadioGroup$1.Root,
+  return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(
+    ControlContext.Provider,
     {
-      value,
-      onValueChange: handleValueChange,
-      id: controlId,
-      "data-status": status,
-      "data-accent": controlStatusToAccent(status),
-      "data-variant": variant,
-      required,
-      disabled,
-      className: cx(
-        prefix("radio-group"),
-        inline && prefix("radio-group--inline"),
-        className
-      ),
-      "aria-readonly": readOnly ? "true" : void 0,
-      "aria-labelledby": mergeAriaIds(
-        dataTableColumnLabelId,
-        labelId,
-        ariaLabelledBy
-      ),
-      "aria-describedby": mergeAriaIds(
-        codeId,
-        errorMessageIds,
-        descriptionIds,
-        ariaDescribedBy
-      ),
-      onFocus: combineEventHandlers(onFocus, handleControlFocus),
-      onBlur: combineEventHandlers(onBlur, handleControlBlur),
-      onKeyDown: combineEventHandlers(onKeyDown, handleKeyDown),
-      ...otherProps,
-      ref: combinedRadioGroupRef,
-      children: [
-        code && /* @__PURE__ */ jsx(
-          ControlCode,
-          {
-            status,
-            ...codeProps,
-            id: codeId,
-            className: cx(prefix("radio-group__code"), codeProps?.className),
-            children: code
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-status": status,
-            "data-variant": variant,
-            "data-disabled": boolDataAttr(disabled),
-            "data-readonly": boolDataAttr(readOnly),
-            ...containerProps,
-            className: cx(
-              prefix("radio-group__container"),
-              containerProps?.className
+      value: { variant, status, disabled, loading, readOnly },
+      children: /* @__PURE__ */ jsxs(
+        RadioGroup$1.Root,
+        {
+          value,
+          onValueChange: handleValueChange,
+          id: controlId,
+          "data-status": status,
+          "data-accent": controlStatusToAccent(status),
+          "data-variant": variant,
+          required,
+          disabled,
+          className: cx(
+            prefix("radio-group"),
+            inline && prefix("radio-group--inline"),
+            className
+          ),
+          "aria-disabled": loading || readOnly || void 0,
+          "aria-invalid": status === "invalid" || void 0,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 ? combineAriaIds(codeId, labelId ?? dataTableColumnLabelId) : void 0),
+          "aria-describedby": combineAriaIds(
+            loadingDescriptionId,
+            errorMessageIds,
+            ariaDescribedBy,
+            descriptionIds
+          ),
+          onFocus: combineEventHandlers(onFocus, handleControlFocus),
+          onBlur: combineEventHandlers(onBlur, handleControlBlur),
+          onKeyDown: combineEventHandlers(onKeyDown, handleKeyDown),
+          ...otherProps,
+          ref: combinedRadioGroupRef,
+          children: [
+            code && /* @__PURE__ */ jsx(
+              ControlCode,
+              {
+                status,
+                ...codeProps,
+                id: codeId,
+                className: cx(prefix("radio-group__code"), codeProps?.className),
+                children: code
+              }
             ),
-            children: /* @__PURE__ */ jsx(ClearContexts, { children })
-          }
-        ),
-        (hasClearButton || loading) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-status": status,
-            "data-variant": variant,
-            "data-disabled": boolDataAttr(disabled),
-            "data-readonly": boolDataAttr(readOnly),
-            ...endContainerProps,
-            className: cx(
-              prefix("checkbox-group__end-container"),
-              endContainerProps?.className
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-status": status,
+                "data-variant": variant,
+                "data-disabled": boolDataAttr(disabled || loading),
+                "data-readonly": boolDataAttr(readOnly),
+                ...containerProps,
+                className: cx(
+                  prefix("radio-group__container"),
+                  containerProps?.className
+                ),
+                children: /* @__PURE__ */ jsx(ClearContexts, { children })
+              }
             ),
-            children: [
-              hasClearButton && /* @__PURE__ */ jsx(
-                CloseButton,
-                {
-                  size: "sm",
-                  label: clearButtonLabel,
-                  tabIndex: -1,
-                  circle: true,
-                  ...clearButtonProps,
-                  className: cx(
-                    prefix("radio-group__clear-button"),
-                    clearButtonProps?.className
-                  ),
-                  onClick: combineEventHandlers(
-                    clearButtonProps?.onClick,
-                    handleClearButtonClick,
-                    { checkDefaultPrevented: true }
-                  ),
-                  onFocus: combineEventHandlers(
-                    clearButtonProps?.onFocus,
-                    handleControlFocus
+            (hasClearButton || showSpinner) && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-status": status,
+                "data-variant": variant,
+                "data-disabled": boolDataAttr(disabled || loading),
+                "data-readonly": boolDataAttr(readOnly),
+                ...endContainerProps,
+                className: cx(
+                  prefix("radio-group__end-container"),
+                  endContainerProps?.className
+                ),
+                children: [
+                  hasClearButton && /* @__PURE__ */ jsx(
+                    CloseButton,
+                    {
+                      size: "sm",
+                      label: clearButtonLabel,
+                      tabIndex: -1,
+                      circle: true,
+                      ...clearButtonProps,
+                      className: cx(
+                        prefix("radio-group__clear-button"),
+                        clearButtonProps?.className
+                      ),
+                      onClick: combineEventHandlers(
+                        clearButtonProps?.onClick,
+                        handleClearButtonClick,
+                        { checkDefaultPrevented: true }
+                      ),
+                      onFocus: combineEventHandlers(
+                        clearButtonProps?.onFocus,
+                        handleControlFocus
+                      ),
+                      onBlur: combineEventHandlers(
+                        clearButtonProps?.onBlur,
+                        handleControlBlur
+                      )
+                    }
                   ),
-                  onBlur: combineEventHandlers(
-                    clearButtonProps?.onBlur,
-                    handleControlBlur
-                  )
-                }
-              ),
-              loading && /* @__PURE__ */ jsx(
-                Spinner,
-                {
-                  color: controlStatusToAccent(status, "neutral"),
-                  "data-disabled": boolDataAttr(disabled),
-                  ...spinnerProps,
-                  className: cx(
-                    prefix("checkbox-group__spinner"),
-                    spinnerProps?.className
+                  showSpinner && /* @__PURE__ */ jsx(
+                    Spinner,
+                    {
+                      color: controlStatusToAccent(status, "neutral"),
+                      "data-disabled": boolDataAttr(disabled || loading),
+                      ...spinnerProps,
+                      className: cx(
+                        prefix("radio-group__spinner"),
+                        spinnerProps?.className
+                      )
+                    }
                   )
-                }
-              )
-            ]
-          }
-        )
-      ]
+                ]
+              }
+            ),
+            loadingDescriptionId && /* @__PURE__ */ jsx(VisuallyHidden, { id: loadingDescriptionId, children: loadingDescription })
+          ]
+        }
+      )
     }
-  ) }) });
+  ) });
 });
 const Separator = forwardRef(function Separator2({ className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
@@ -10900,7 +11055,7 @@ function TabListScrollButton({ side, onClick }) {
       disabled,
       onClick,
       tabIndex: -1,
-      "aria-hidden": "true"
+      "aria-hidden": true
     }
   );
 }
@@ -11089,7 +11244,7 @@ function useIntersectionObserver(element, onIntersectionEntryChange, options) {
     }
   }, [element, onIntersectionEntryChange, options]);
 }
-const MONKEY_PATCHED_HISTORY = Symbol.for("ostack-ui.monkeyPatchedHistory");
+const MONKEY_PATCHED_HISTORY = /* @__PURE__ */ Symbol.for("ostack-ui.monkeyPatchedHistory");
 const HISTORY_EVENT_TYPES = [
   "popstate",
   "hashchange",
@@ -11376,6 +11531,7 @@ export {
   VisuallyHidden,
   boolDataAttr,
   buildErrorReport,
+  combineAriaIds,
   combineEventHandlers,
   compare,
   compareNumericStrings,
@@ -11390,7 +11546,6 @@ export {
   ignoreFormControlsKeyboardShortcut,
   isNumericStringNegative,
   matchAgainstFilter,
-  mergeAriaIds,
   navigate,
   normalizeNumericString,
   numericStringFloatToInt,
@@ -11404,6 +11559,7 @@ export {
   registerKeyboardShortcut,
   setBoolDataAttr,
   setDefaultPrefix,
+  setNativeProperty,
   stableSort,
   stringHash,
   useAlertDialog,