@carbon/react 1.98.0 → 1.99.0-rc.0

package/es/components/Dropdown/Dropdown.js

@@ -342,7 +342,11 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     size: size$1,
     className: className,
     invalid: normalizedProps.invalid,
+    invalidText: isFluid ? invalidText : undefined,
+    invalidTextId: normalizedProps.invalidId,
     warn: normalizedProps.warn,
+    warnText: isFluid ? warnText : undefined,
+    warnTextId: normalizedProps.warnId,
     light: light,
     isOpen: isOpen,
     ref: enableFloatingStyles || autoAlign ? refs.setReference : null,

package/es/components/Link/Link.js

@@ -67,7 +67,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef(({
     ref: ref
   }, linkProps, rest, {
     onClick: handleOnClick
-  }), children, !inline && Icon && /*#__PURE__*/React.createElement("div", {
+  }), children, !inline && Icon && /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--link__icon`
   }, /*#__PURE__*/React.createElement(Icon, null)));
 });

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -724,6 +724,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     return /*#__PURE__*/React.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
       "aria-label": itemText,
+      "aria-checked": isIndeterminate ? 'mixed' : isChecked,
       isActive: isChecked && !item['isSelectAll'],
       isHighlighted: highlightedIndex === index,
       title: itemText,

package/es/components/MultiSelect/MultiSelect.js

@@ -509,6 +509,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       key: itemProps.id,
       isActive: isChecked && !item['isSelectAll'],
       "aria-label": itemText,
+      "aria-checked": isIndeterminate ? 'mixed' : isChecked,
       isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: itemProps['aria-disabled']

package/es/components/NumberInput/NumberInput.d.ts

@@ -135,10 +135,14 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     min?: number;
     /**
-     * Provide an optional handler that is called when the input or stepper
+     * Provide an optional handler that is called when the input is blurred.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>, value?: string | number) => void;
+    /**
+     * Provide an optional handler that is called when the stepper
      * buttons are blurred.
      */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLButtonElement>) => void;
+    onStepperBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     /**
      * Provide an optional handler that is called when the internal state of
      * NumberInput changes. This handler is called with event and state info.

package/es/components/NumberInput/NumberInput.js

@@ -126,6 +126,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     max,
     min,
     onBlur,
+    onStepperBlur,
     onChange,
     onClick,
     onKeyUp,
@@ -426,6 +427,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
       if (disableWheelProp) {
         e.target.removeEventListener('wheel', disableWheel);
       }
+      let parsedValueForBlur;
       if (type === 'text') {
         // When isControlled, the current inputValue needs re-parsed
         // because the consumer's onChange hasn't been called yet and
@@ -441,6 +443,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         // causing the _numberValue to mismatch the formatted value in
         // the input. To avoid this, formattedValue is re-parsed.
         const parsedFormattedNewValue = numberParser.parse(formattedValue);
+        parsedValueForBlur = parsedFormattedNewValue;
         if (onChange && isValid) {
           const state = {
             value: parsedFormattedNewValue,
@@ -466,7 +469,12 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         }
       }
       if (onBlur) {
-        onBlur(e);
+        if (type === 'number') {
+          onBlur(e, value);
+          return;
+        }
+        const parsedTextValue = parsedValueForBlur ?? (isControlled ? numberParser.parse(inputValue) : numberValue);
+        onBlur(e, parsedTextValue);
       }
     },
     pattern: pattern,
@@ -486,7 +494,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     className: `${prefix}--number__control-btn down-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'down'),
-    onBlur: onBlur,
+    onBlur: onStepperBlur,
     tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
@@ -499,7 +507,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     className: `${prefix}--number__control-btn up-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'up'),
-    onBlur: onBlur,
+    onBlur: onStepperBlur,
     tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
@@ -610,10 +618,14 @@ NumberInput.propTypes = {
    */
   stepStartValue: PropTypes.number,
   /**
-   * Provide an optional handler that is called when the input or stepper
-   * buttons are blurred.
+   * Provide an optional handler that is called when the input is blurred.
    */
   onBlur: PropTypes.func,
+  /**
+   * Provide an optional handler that is called when the stepper
+   * buttons are blurred.
+   */
+  onStepperBlur: PropTypes.func,
   /**
    * Provide an optional handler that is called when the internal state of
    * NumberInput changes. This handler is called with event and state info.

package/es/components/Popover/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/Popover/index.js

@@ -60,27 +60,41 @@ forwardRef) {
   const caretRef = useRef(null);
   const popover = useRef(null);
   const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
+  const lastClickWasInsidePopoverContent = useRef(false);
   let align = mapPopoverAlign(initialAlign);
 
+  // Tracks clicks inside PopoverContent to prevent it from closing when clicked, this handles an edge
+  // case where the popover will close when clicking non-focusable elements (e.g. text)
+  useEvent(popover, 'mousedown', event => {
+    const target = event.target;
+    lastClickWasInsidePopoverContent.current = refs.floating.current?.contains(target) || false;
+
+    // reset flag
+    if (lastClickWasInsidePopoverContent.current) {
+      setTimeout(() => {
+        lastClickWasInsidePopoverContent.current = false;
+      }, 0);
+    }
+  });
+
   // The `Popover` should close whenever it and its children loses focus
   useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-    if (isTabTip) {
-      if (relatedTarget && !popover.current?.contains(relatedTarget)) {
-        onRequestClose?.();
-      }
-      return;
-    }
     if (!relatedTarget) {
+      // do not close if PopoverContent was clicked
+      if (lastClickWasInsidePopoverContent.current) {
+        lastClickWasInsidePopoverContent.current = false;
+        return;
+      }
       onRequestClose?.();
-      return;
-    }
-    const isOutsideMainContainer = !popover.current?.contains(relatedTarget);
-    const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+    } else if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+      const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+      const isFocusableWrapper = relatedTarget && popover.current && relatedTarget.contains(popover.current);
 
-    // Only close if focus moved outside both containers
-    if (isOutsideMainContainer && isOutsideFloating) {
-      onRequestClose?.();
+      // Only close if focus moved outside both containers and not to an interactive parent wrapper
+      if (isOutsideFloating && !isFocusableWrapper) {
+        onRequestClose?.();
+      }
     }
   });
   useWindowEvent('click', ({

package/es/components/Tabs/Tabs.js

@@ -886,7 +886,7 @@ const Tab = /*#__PURE__*/forwardRef(({
     })
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    tabIndex: selectedIndex === index && dismissable ? 0 : -1,
+    tabIndex: -1,
     "aria-disabled": disabled,
     "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
     disabled: disabled,

package/es/components/TextArea/TextArea.js

@@ -202,8 +202,10 @@ const TextArea = frFn((props, forwardRef) => {
   }, labelText) : null;
   const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
-    className: counterClasses
+    className: counterClasses,
+    "aria-hidden": "true"
   }, `${textCount}/${maxCount}`) : null;
+  const counterDescriptionId = enableCounter && maxCount ? `${id}-counter-desc` : undefined;
   const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
@@ -234,8 +236,13 @@ const TextArea = frFn((props, forwardRef) => {
   let ariaDescribedBy;
   if (invalid) {
     ariaDescribedBy = errorId;
-  } else if (!invalid && !warn && !isFluid && helperText) {
-    ariaDescribedBy = helperId;
+  } else if (warn && !isFluid) {
+    ariaDescribedBy = warnId;
+  } else {
+    const ids = [];
+    if (!isFluid && helperText && helperId) ids.push(helperId);
+    if (counterDescriptionId) ids.push(counterDescriptionId);
+    ariaDescribedBy = ids.length > 0 ? ids.join(' ') : undefined;
   }
   if (enableCounter) {
     // handle different counter mode
@@ -292,7 +299,10 @@ const TextArea = frFn((props, forwardRef) => {
     className: formItemClasses
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
-  }, label, counter), /*#__PURE__*/React.createElement("div", {
+  }, label, counter), enableCounter && maxCount && /*#__PURE__*/React.createElement("span", {
+    id: counterDescriptionId,
+    className: `${prefix}--visually-hidden`
+  }, counterMode === 'word' ? `Word limit ${maxCount}` : `Character limit ${maxCount}`), /*#__PURE__*/React.createElement("div", {
     ref: wrapperRef,
     className: textAreaWrapperClasses,
     "data-invalid": invalid || null

package/es/components/TextInput/PasswordInput.js

@@ -135,6 +135,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
+  const tooltipClasses = cx(`${prefix}--toggle-password-tooltip`, `${prefix}--icon-tooltip`);
   let align = undefined;
   if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
     if (tooltipAlignment === 'center') {
@@ -172,12 +173,12 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--text-input__divider`
   }), /*#__PURE__*/React.createElement(Tooltip, {
     align: align,
-    className: `${prefix}--toggle-password-tooltip`,
+    className: tooltipClasses,
     label: passwordIsVisible ? hidePasswordLabel : showPasswordLabel
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
-    disabled: disabled || readOnly,
+    disabled: disabled,
     onClick: handleTogglePasswordVisibility
   }, passwordVisibilityIcon)));
   useEffect(() => {

package/lib/components/Dropdown/Dropdown.js

@@ -346,7 +346,11 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     size: size,
     className: className,
     invalid: normalizedProps.invalid,
+    invalidText: isFluid ? invalidText : undefined,
+    invalidTextId: normalizedProps.invalidId,
     warn: normalizedProps.warn,
+    warnText: isFluid ? warnText : undefined,
+    warnTextId: normalizedProps.warnId,
     light: light,
     isOpen: isOpen,
     ref: enableFloatingStyles || autoAlign ? refs.setReference : null,

package/lib/components/Link/Link.js

@@ -71,7 +71,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef(({
     ref: ref
   }, linkProps, rest, {
     onClick: handleOnClick
-  }), children, !inline && Icon && /*#__PURE__*/React.createElement("div", {
+  }), children, !inline && Icon && /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--link__icon`
   }, /*#__PURE__*/React.createElement(Icon, null)));
 });

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -726,6 +726,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     return /*#__PURE__*/React.createElement(index$1.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
       "aria-label": itemText,
+      "aria-checked": isIndeterminate ? 'mixed' : isChecked,
       isActive: isChecked && !item['isSelectAll'],
       isHighlighted: highlightedIndex === index,
       title: itemText,

package/lib/components/MultiSelect/MultiSelect.js

@@ -511,6 +511,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       key: itemProps.id,
       isActive: isChecked && !item['isSelectAll'],
       "aria-label": itemText,
+      "aria-checked": isIndeterminate ? 'mixed' : isChecked,
       isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: itemProps['aria-disabled']

package/lib/components/NumberInput/NumberInput.d.ts

@@ -135,10 +135,14 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     min?: number;
     /**
-     * Provide an optional handler that is called when the input or stepper
+     * Provide an optional handler that is called when the input is blurred.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>, value?: string | number) => void;
+    /**
+     * Provide an optional handler that is called when the stepper
      * buttons are blurred.
      */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLButtonElement>) => void;
+    onStepperBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     /**
      * Provide an optional handler that is called when the internal state of
      * NumberInput changes. This handler is called with event and state info.

package/lib/components/NumberInput/NumberInput.js

@@ -128,6 +128,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     max,
     min,
     onBlur,
+    onStepperBlur,
     onChange,
     onClick,
     onKeyUp,
@@ -428,6 +429,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
       if (disableWheelProp) {
         e.target.removeEventListener('wheel', disableWheel);
       }
+      let parsedValueForBlur;
       if (type === 'text') {
         // When isControlled, the current inputValue needs re-parsed
         // because the consumer's onChange hasn't been called yet and
@@ -443,6 +445,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         // causing the _numberValue to mismatch the formatted value in
         // the input. To avoid this, formattedValue is re-parsed.
         const parsedFormattedNewValue = numberParser.parse(formattedValue);
+        parsedValueForBlur = parsedFormattedNewValue;
         if (onChange && isValid) {
           const state = {
             value: parsedFormattedNewValue,
@@ -468,7 +471,12 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
         }
       }
       if (onBlur) {
-        onBlur(e);
+        if (type === 'number') {
+          onBlur(e, value);
+          return;
+        }
+        const parsedTextValue = parsedValueForBlur ?? (isControlled ? numberParser.parse(inputValue) : numberValue);
+        onBlur(e, parsedTextValue);
       }
     },
     pattern: pattern,
@@ -488,7 +496,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     className: `${prefix}--number__control-btn down-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'down'),
-    onBlur: onBlur,
+    onBlur: onStepperBlur,
     tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
@@ -501,7 +509,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     className: `${prefix}--number__control-btn up-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'up'),
-    onBlur: onBlur,
+    onBlur: onStepperBlur,
     tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
@@ -612,10 +620,14 @@ NumberInput.propTypes = {
    */
   stepStartValue: PropTypes.number,
   /**
-   * Provide an optional handler that is called when the input or stepper
-   * buttons are blurred.
+   * Provide an optional handler that is called when the input is blurred.
    */
   onBlur: PropTypes.func,
+  /**
+   * Provide an optional handler that is called when the stepper
+   * buttons are blurred.
+   */
+  onStepperBlur: PropTypes.func,
   /**
    * Provide an optional handler that is called when the internal state of
    * NumberInput changes. This handler is called with event and state info.

package/lib/components/Popover/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Popover/index.js

@@ -62,27 +62,41 @@ forwardRef) {
   const caretRef = React.useRef(null);
   const popover = React.useRef(null);
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
+  const lastClickWasInsidePopoverContent = React.useRef(false);
   let align = mapPopoverAlign.mapPopoverAlign(initialAlign);
 
+  // Tracks clicks inside PopoverContent to prevent it from closing when clicked, this handles an edge
+  // case where the popover will close when clicking non-focusable elements (e.g. text)
+  useEvent.useEvent(popover, 'mousedown', event => {
+    const target = event.target;
+    lastClickWasInsidePopoverContent.current = refs.floating.current?.contains(target) || false;
+
+    // reset flag
+    if (lastClickWasInsidePopoverContent.current) {
+      setTimeout(() => {
+        lastClickWasInsidePopoverContent.current = false;
+      }, 0);
+    }
+  });
+
   // The `Popover` should close whenever it and its children loses focus
   useEvent.useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-    if (isTabTip) {
-      if (relatedTarget && !popover.current?.contains(relatedTarget)) {
-        onRequestClose?.();
-      }
-      return;
-    }
     if (!relatedTarget) {
+      // do not close if PopoverContent was clicked
+      if (lastClickWasInsidePopoverContent.current) {
+        lastClickWasInsidePopoverContent.current = false;
+        return;
+      }
       onRequestClose?.();
-      return;
-    }
-    const isOutsideMainContainer = !popover.current?.contains(relatedTarget);
-    const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+    } else if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+      const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+      const isFocusableWrapper = relatedTarget && popover.current && relatedTarget.contains(popover.current);
 
-    // Only close if focus moved outside both containers
-    if (isOutsideMainContainer && isOutsideFloating) {
-      onRequestClose?.();
+      // Only close if focus moved outside both containers and not to an interactive parent wrapper
+      if (isOutsideFloating && !isFocusableWrapper) {
+        onRequestClose?.();
+      }
     }
   });
   useEvent.useWindowEvent('click', ({

package/lib/components/Tabs/Tabs.js

@@ -888,7 +888,7 @@ const Tab = /*#__PURE__*/React.forwardRef(({
     })
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    tabIndex: selectedIndex === index$1 && dismissable ? 0 : -1,
+    tabIndex: -1,
     "aria-disabled": disabled,
     "aria-hidden": selectedIndex === index$1 && dismissable ? 'false' : 'true',
     disabled: disabled,

package/lib/components/TextArea/TextArea.js

@@ -206,8 +206,10 @@ const TextArea = frFn((props, forwardRef) => {
   }, labelText) : null;
   const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
-    className: counterClasses
+    className: counterClasses,
+    "aria-hidden": "true"
   }, `${textCount}/${maxCount}`) : null;
+  const counterDescriptionId = enableCounter && maxCount ? `${id}-counter-desc` : undefined;
   const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
@@ -238,8 +240,13 @@ const TextArea = frFn((props, forwardRef) => {
   let ariaDescribedBy;
   if (invalid) {
     ariaDescribedBy = errorId;
-  } else if (!invalid && !warn && !isFluid && helperText) {
-    ariaDescribedBy = helperId;
+  } else if (warn && !isFluid) {
+    ariaDescribedBy = warnId;
+  } else {
+    const ids = [];
+    if (!isFluid && helperText && helperId) ids.push(helperId);
+    if (counterDescriptionId) ids.push(counterDescriptionId);
+    ariaDescribedBy = ids.length > 0 ? ids.join(' ') : undefined;
   }
   if (enableCounter) {
     // handle different counter mode
@@ -296,7 +303,10 @@ const TextArea = frFn((props, forwardRef) => {
     className: formItemClasses
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
-  }, label, counter), /*#__PURE__*/React.createElement("div", {
+  }, label, counter), enableCounter && maxCount && /*#__PURE__*/React.createElement("span", {
+    id: counterDescriptionId,
+    className: `${prefix}--visually-hidden`
+  }, counterMode === 'word' ? `Word limit ${maxCount}` : `Character limit ${maxCount}`), /*#__PURE__*/React.createElement("div", {
     ref: wrapperRef,
     className: textAreaWrapperClasses,
     "data-invalid": invalid || null

package/lib/components/TextInput/PasswordInput.js

@@ -139,6 +139,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
+  const tooltipClasses = cx(`${prefix}--toggle-password-tooltip`, `${prefix}--icon-tooltip`);
   let align = undefined;
   if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
     if (tooltipAlignment === 'center') {
@@ -176,12 +177,12 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--text-input__divider`
   }), /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
     align: align,
-    className: `${prefix}--toggle-password-tooltip`,
+    className: tooltipClasses,
     label: passwordIsVisible ? hidePasswordLabel : showPasswordLabel
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
-    disabled: disabled || readOnly,
+    disabled: disabled,
     onClick: handleTogglePasswordVisibility
   }, passwordVisibilityIcon)));
   React.useEffect(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.98.0",
+  "version": "1.99.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,9 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": ">=0.32.0",
-    "@carbon/icons-react": "^11.72.0",
-    "@carbon/layout": "^11.45.0",
-    "@carbon/styles": "^1.97.0",
+    "@carbon/icons-react": "^11.73.0-rc.0",
+    "@carbon/layout": "^11.46.0-rc.0",
+    "@carbon/styles": "^1.98.0-rc.0",
     "@carbon/utilities": "^0.14.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -67,7 +67,6 @@
     "invariant": "^2.2.3",
     "prop-types": "^15.8.1",
     "react-fast-compare": "^3.2.2",
-    "storybook-addon-accessibility-checker": "^9.2.0-rc.3",
     "tabbable": "^6.2.0"
   },
   "devDependencies": {
@@ -79,8 +78,8 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@carbon/test-utils": "^10.38.0",
-    "@carbon/themes": "^11.65.0",
+    "@carbon/test-utils": "^10.39.0-rc.0",
+    "@carbon/themes": "^11.66.0-rc.0",
     "@figma/code-connect": "^1.3.5",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -105,8 +104,8 @@
     "fs-extra": "^11.0.0",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-is": "^16.13.1 || ^17.0.2 || ^18.3.1 || ^19.0.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.1",
@@ -132,5 +131,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "57fdbc7bfad9349b5c4359c7d621e709cd4daa25"
+  "gitHead": "8263c72357fc43c00e66c9030698f759ef7977ce"
 }

package/telemetry.yml

@@ -465,6 +465,7 @@ collect:
         - notificationType
         # NumberInput
         - hideSteppers
+        - onStepperBlur
         - stepStartValue
         - validate
         # OrderedList