@carbon/ibm-products 2.83.0 → 2.84.0

package/lib/components/Tearsheet/TearsheetShell.js

@@ -21,6 +21,9 @@ var ActionSet = require('../ActionSet/ActionSet.js');
 var Wrap = require('../../global/js/utils/Wrap.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
+var useMergedRefs = require('../../global/js/hooks/useMergedRefs.js');
+var useId = require('../../global/js/utils/useId.js');
+var TearsheetPresence = require('./TearsheetPresence.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
@@ -74,6 +77,35 @@ const SectionLevel3 = _ref => {
  * See the canvas tab for the component API details.
  * */
 const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    open,
+    ...props
+  } = _ref2;
+  const id = useId.useId();
+  const enablePresence = react.useFeatureFlag('enable-presence');
+  const hasPresenceContext = Boolean(React.useContext(TearsheetPresence.TearsheetPresenceContext));
+  const hasPresenceOptIn = enablePresence || hasPresenceContext;
+  const exclusivePresenceContext = TearsheetPresence.useExclusiveTearsheetPresenceContext(id);
+
+  // if opt in and not exclusive to a presence context, wrap with presence
+  if (hasPresenceOptIn && !exclusivePresenceContext) {
+    return /*#__PURE__*/React.createElement(TearsheetPresence.TearsheetPresence, {
+      open: open ?? false,
+      _presenceId: id
+      // do not auto enable styles for opt-in by feature flag
+      ,
+      _autoEnablePresence: hasPresenceContext
+    }, /*#__PURE__*/React.createElement(TearsheetShellDialog, _rollupPluginBabelHelpers.extends({
+      open: true,
+      ref: ref
+    }, props)));
+  }
+  return /*#__PURE__*/React.createElement(TearsheetShellDialog, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    open: open
+  }, props));
+});
+const TearsheetShellDialog = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     // The component props, in alphabetical order (for consistency).
     actions,
@@ -93,7 +125,7 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     label,
     navigation,
     onClose,
-    open,
+    open: externalOpen,
     portalTarget: portalTargetIn,
     selectorPrimaryFocus,
     selectorsFloatingMenus = [],
@@ -104,7 +136,7 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     launcherButtonRef,
     // Collect any other property values passed in.
     ...rest
-  } = _ref2;
+  } = _ref3;
   const carbonPrefix = react.usePrefix();
   const bcModalHeader = `${carbonPrefix}--modal-header`;
   const renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
@@ -115,13 +147,19 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   const {
     width
   } = useResizeObserver.useResizeObserver(resizer);
-  const prevOpen = usePreviousValue.usePreviousValue(open);
   const {
     keyDownListener,
     claimFocus
   } = useFocus.useFocus(modalRef, selectorPrimaryFocus);
   modalRef.current;
   const wide = size === 'wide';
+  const presenceContext = React.useContext(TearsheetPresence.TearsheetPresenceContext);
+  const mergedRefs = useMergedRefs.useMergedRefs([modalRef, presenceContext?.presenceRef]);
+  const enablePresence = react.useFeatureFlag('enable-presence') || presenceContext?.autoEnablePresence;
+
+  // always mark as open when mounted with presence
+  const open = externalOpen || enablePresence;
+  const prevOpen = usePreviousValue.usePreviousValue(open);
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
   const [depth, setDepth] = React.useState(0);
@@ -148,13 +186,28 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       claimFocus();
     }
   }, [open, currentStep, effectiveHasCloseIcon, claimFocus]);
+
+  // Focus launcher button on open change for non presence tearsheet
   React.useEffect(() => {
-    if (prevOpen && !open && launcherButtonRef?.current) {
+    if (!enablePresence && prevOpen && !open && launcherButtonRef?.current) {
       setTimeout(() => {
         launcherButtonRef?.current?.focus();
       }, 10);
     }
-  }, [open, prevOpen, launcherButtonRef]);
+  }, [enablePresence, open, prevOpen, launcherButtonRef]);
+
+  // Focus launcher button on unmount for presence tearsheet
+  React.useEffect(() => {
+    const launcherButton = launcherButtonRef?.current;
+    if (!enablePresence || !launcherButton) {
+      return;
+    }
+    return () => {
+      setTimeout(() => {
+        launcherButton.focus();
+      }, 10);
+    };
+  }, [enablePresence, launcherButtonRef]);
   React.useEffect(() => {
     requestAnimationFrame(() => {
       if (open && depth === position && !modalRef?.current?.contains(document.activeElement)) {
@@ -169,6 +222,8 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     }
   }, [claimFocus, hasError, modalRef]);
   React.useEffect(() => {
+    // Other tearsheets should already be notified if this tearsheet is exiting
+    const isPresent = open && !presenceContext?.isExiting;
     const notify = () => stack.all.forEach(handler => {
       handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
     });
@@ -181,7 +236,7 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     // false to true to open it then append its notification callback to
     // the end of the stack array (as its ID), and call all the callbacks
     // to notify all open tearsheets that the stacking has changed.
-    if (open) {
+    if (isPresent) {
       stack.open.push(handleStackChange);
       notify();
     }
@@ -203,7 +258,7 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         notify();
       }
     };
-  }, [open, size]);
+  }, [open, presenceContext?.isExiting, size]);
   const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1;
   useIsomorphicEffect.useIsomorphicEffect(() => {
     const setScaleValues = () => {
@@ -219,8 +274,8 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       };
     };
     if (modalRef.current) {
-      Object.entries(setScaleValues()).map(_ref3 => {
-        let [key, value] = _ref3;
+      Object.entries(setScaleValues()).map(_ref4 => {
+        let [key, value] = _ref4;
         modalRef.current.style.setProperty(key, String(value));
       });
     }
@@ -247,7 +302,9 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         [`${bc}--has-slug`]: deprecated_slug,
         [`${bc}--has-ai-label`]: !!decorator && decorator['type']?.displayName === 'AILabel',
         [`${bc}--has-decorator`]: !!decorator && decorator['type']?.displayName !== 'AILabel',
-        [`${bc}--has-close`]: effectiveHasCloseIcon
+        [`${bc}--has-close`]: effectiveHasCloseIcon,
+        ['is-visible']: enablePresence,
+        [`${bc}--tearsheet-enable-presence`]: presenceContext?.autoEnablePresence
       }),
       decorator: decorator || deprecated_slug,
       containerClassName: cx(`${bc}__container`, {
@@ -259,9 +316,10 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       selectorPrimaryFocus,
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
-      ref: modalRef,
+      ref: mergedRefs,
       selectorsFloatingMenus: [`.${carbonPrefix}--overflow-menu-options`, `.${carbonPrefix}--tooltip`, '.flatpickr-calendar', `.${bc}__container`, `.${carbonPrefix}--menu`, ...selectorsFloatingMenus],
-      size: "sm"
+      size: "sm",
+      "data-tearsheet-exiting": presenceContext?.isExiting || undefined
     }), includeHeader && /*#__PURE__*/React.createElement(react.ModalHeader, {
       className: cx(`${bc}__header`, {
         [`${bc}__header--with-close-icon`]: effectiveHasCloseIcon,
@@ -272,16 +330,17 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       }),
       closeModal: onClose,
       iconDescription: effectiveHasCloseIcon ? closeIconDescription : undefined
-    }, /*#__PURE__*/React.createElement(react.Section, {
+    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__header-content`,
       element: wide ? react.Layer : undefined
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__header-fields`
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bcModalHeader}__label`
-    }, label), /*#__PURE__*/React.createElement(react.Section, {
+    }, label), /*#__PURE__*/React.createElement(Wrap.Wrap, {
+      element: "h3",
       className: cx(`${bcModalHeader}__heading`, `${bc}__heading`)
-    }, /*#__PURE__*/React.createElement(react.Heading, null, title)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
+    }, title), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__header-description`
     }, description)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__header-actions`

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

@@ -6,5 +6,7 @@
  */
 export { Tearsheet } from './Tearsheet';
 export { TearsheetNarrow } from './TearsheetNarrow';
+export { TearsheetPresence, withTearsheetPresence } from './TearsheetPresence';
 export type { TearsheetProps } from './Tearsheet';
 export type { TearsheetNarrowProps } from './TearsheetNarrow';
+export type { TearsheetPresenceProps } from './TearsheetPresence';

package/lib/components/Tearsheet/usePresence.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type RefObject } from 'react';
+export declare const usePresence: (ref: RefObject<HTMLElement | null>, isOpen: boolean) => {
+    /**
+     * Indicates whether the ref object is supposed to be mounted
+     */
+    isPresent: boolean;
+    /**
+     * Indicates whether the ref object is currently exiting
+     */
+    isExiting: boolean;
+};

package/lib/components/Tearsheet/usePresence.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+var React = require('react');
+var settings = require('../../settings.js');
+
+const usePresence = (ref, isOpen) => {
+  const [exitState, setExitState] = React.useState(isOpen ? 'idle' : 'finished');
+  const isExiting = exitState === 'active';
+
+  // element is exiting
+  if (!isOpen && exitState === 'idle') {
+    setExitState('active');
+  }
+
+  // element exit was interrupted
+  if (isOpen && exitState !== 'idle') {
+    setExitState('idle');
+  }
+  const handleAnimationEnd = React.useCallback(() => {
+    setExitState('finished');
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!ref.current || !isExiting) {
+      return;
+    }
+
+    // resolve for JSDOM
+    if (!('getAnimations' in ref.current)) {
+      handleAnimationEnd();
+      return;
+    }
+
+    // cover all animations that start with the presence prefix
+    const animations = ref.current.getAnimations({
+      subtree: true
+    }).filter(animation => animation instanceof CSSAnimation && animation.animationName.startsWith(`${settings.pkg.prefix}`));
+    if (!animations.length) {
+      handleAnimationEnd();
+      return;
+    }
+    let cancelled = false;
+    Promise.all(animations.map(animation => animation.finished)).finally(() => {
+      if (cancelled) {
+        return;
+      }
+      handleAnimationEnd();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [ref, isExiting, handleAnimationEnd]);
+  return {
+    /**
+     * Indicates whether the ref object is supposed to be mounted
+     */
+    isPresent: isOpen || exitState !== 'finished',
+    /**
+     * Indicates whether the ref object is currently exiting
+     */
+    isExiting
+  };
+};
+
+exports.usePresence = usePresence;

package/lib/components/Tearsheet/usePresenceContext.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type RefObject } from 'react';
+export interface PresenceContext {
+    /**
+     * The ref object the presence mode is mounted with
+     */
+    presenceRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Indicates whether the ref object is currently exiting
+     */
+    isExiting: boolean;
+    /**
+     * Returns if the caller is exclusive to this presence context
+     */
+    isPresenceExclusive: (id: string) => boolean;
+}
+/**
+ * Returns if the presence node is present and the context value to be used by a presence context, e.g. ModalPresence.
+ */
+export declare const usePresenceContext: (open: boolean, initialPresenceId?: string) => readonly [boolean, PresenceContext];

package/lib/components/Tearsheet/usePresenceContext.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+var React = require('react');
+var usePresence = require('./usePresence.js');
+
+/**
+ * Returns if the presence node is present and the context value to be used by a presence context, e.g. ModalPresence.
+ */
+const usePresenceContext = (open, initialPresenceId) => {
+  const presenceIdRef = React.useRef(initialPresenceId);
+  const presenceRef = React.useRef(null);
+  const prevPresenceRef = React.useRef(null);
+
+  // clean up the presence id, if not predefined and if the presence node was unmounted
+  if (!initialPresenceId && prevPresenceRef.current && !presenceRef.current) {
+    presenceIdRef.current = null;
+  }
+  prevPresenceRef.current = presenceRef.current;
+  const {
+    isPresent,
+    isExiting
+  } = usePresence.usePresence(presenceRef, open);
+  const isPresenceExclusive = React.useCallback(id => {
+    if (!id) {
+      return false;
+    }
+
+    // return false if the presence context is occupied
+    if (presenceIdRef.current && presenceIdRef.current !== id) {
+      return false;
+    }
+
+    // otherwise occupy presence context and return true
+    presenceIdRef.current = id;
+    return true;
+  }, []);
+  const contextValue = React.useMemo(() => ({
+    presenceRef,
+    isPresenceExclusive,
+    isExiting
+  }), [presenceRef, isPresenceExclusive, isExiting]);
+  return [isPresent, contextValue];
+};
+
+exports.usePresenceContext = usePresenceContext;

package/lib/global/js/hooks/useMergedRefs.d.ts

@@ -0,0 +1 @@
+export function useMergedRefs(refs: any): (node: any) => void;

package/lib/global/js/hooks/useMergedRefs.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+var React = require('react');
+
+/**
+ * Merges multiple refs into a single callback ref.
+ *
+ * This hook is useful when you need to attach multiple refs (for example, a ref
+ * passed from `forwardRef` and a local ref from `useRef`) to the same node. It
+ * accepts an array of refs and returns a callback ref that, when attached to a
+ * node, assigns that node to every ref in the array.
+ */
+const useMergedRefs = refs => {
+  // eslint-disable-next-line  react-hooks/exhaustive-deps
+  const memoizedRefs = React.useMemo(() => refs, refs);
+  return React.useCallback(node => {
+    memoizedRefs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    });
+  }, [memoizedRefs]);
+};
+
+exports.useMergedRefs = useMergedRefs;

package/lib/global/js/hooks/useOverflowString.js

@@ -24,21 +24,5 @@ function useOverflowStringWidth(elementRef) {
   }, [checkWidthOverflow, elementRef, innerText]);
   return isOverflowing;
 }
-const useOverflowStringHeight = elementRef => {
-  const innerText = elementRef?.current?.innerText;
-  const [isOverflowing, setIsOverflowing] = React.useState();
-  const checkHeightOverflow = React.useCallback(() => {
-    const offsetHeight = elementRef?.current?.offsetHeight;
-    const scrollHeight = elementRef?.current?.scrollHeight;
-    if (offsetHeight && scrollHeight) {
-      setIsOverflowing(offsetHeight < scrollHeight);
-    }
-  }, [elementRef]);
-  React.useEffect(() => {
-    checkHeightOverflow();
-  }, [checkHeightOverflow, elementRef, innerText]);
-  return isOverflowing;
-};
 
-exports.useOverflowStringHeight = useOverflowStringHeight;
 exports.useOverflowStringWidth = useOverflowStringWidth;

package/lib/index.js

@@ -51,6 +51,7 @@ var TagOverflow = require('./components/TagOverflow/TagOverflow.js');
 var TagSet = require('./components/TagSet/TagSet.js');
 var Tearsheet$1 = require('./components/Tearsheet/Tearsheet.js');
 var TearsheetNarrow = require('./components/Tearsheet/TearsheetNarrow.js');
+var TearsheetPresence = require('./components/Tearsheet/TearsheetPresence.js');
 var WebTerminal = require('./components/WebTerminal/WebTerminal.js');
 var WebTerminalContentWrapper = require('./components/WebTerminal/WebTerminalContentWrapper.js');
 var index$2 = require('./components/WebTerminal/hooks/index.js');
@@ -195,6 +196,8 @@ exports.TagOverflow = TagOverflow.TagOverflow;
 exports.TagSet = TagSet.TagSet;
 exports.Tearsheet = Tearsheet$1.Tearsheet;
 exports.TearsheetNarrow = TearsheetNarrow.TearsheetNarrow;
+exports.TearsheetPresence = TearsheetPresence.TearsheetPresence;
+exports.withTearsheetPresence = TearsheetPresence.withTearsheetPresence;
 exports.WebTerminal = WebTerminal.WebTerminal;
 exports.WebTerminalContentWrapper = WebTerminalContentWrapper.WebTerminalContentWrapper;
 exports.WebTerminalProvider = index$2.WebTerminalProvider;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.83.0",
+  "version": "2.84.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -67,23 +67,24 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@carbon/styles": "^1.96.0",
+    "@carbon/styles": "^1.100.0",
     "@figma/code-connect": "^1.3.5",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
     "@percy/cli": "^1.31.0",
-    "@percy/storybook": "^9.0.0",
+    "@percy/storybook": "^10.0.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-a11y": "^9.1.8",
-    "@storybook/addon-docs": "^9.1.8",
-    "@storybook/addon-links": "^9.1.8",
+    "@storybook/addon-a11y": "^9.1.15",
+    "@storybook/addon-docs": "^9.1.15",
+    "@storybook/addon-links": "^9.1.15",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-vite": "^9.1.8",
+    "@storybook/react-vite": "^9.1.15",
     "@types/react-table": "^7.7.20",
+    "@vitejs/plugin-react": "^5.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.41.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.42.0",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
     "copyfiles": "^2.4.1",
@@ -91,7 +92,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.42.0",
+    "jest-config-ibm-cloud-cognitive": "^1.43.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all2": "^8.0.0",
@@ -102,7 +103,7 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-strip-banner": "^3.1.0",
     "sass": "^1.93.2",
-    "storybook": "^9.1.8",
+    "storybook": "^9.1.15",
     "storybook-addon-accessibility-checker": ">=9.2.0-rc.0",
     "typescript-config-carbon": "^0.9.0",
     "vite": "^7.0.0",
@@ -111,11 +112,11 @@
   "dependencies": {
     "@babel/runtime": "^7.26.10",
     "@carbon-labs/react-resizer": "^0.10.0",
-    "@carbon/feature-flags": "^0.32.0",
-    "@carbon/ibm-products-styles": "^2.79.0",
+    "@carbon/feature-flags": "^1.0.0",
+    "@carbon/ibm-products-styles": "^2.80.0",
     "@carbon/telemetry": "^0.1.0",
-    "@carbon/utilities": "^0.13.0",
-    "@carbon/utilities-react": "0.16.0",
+    "@carbon/utilities": "^0.16.0",
+    "@carbon/utilities-react": "0.19.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -125,14 +126,14 @@
     "react-window": "^1.8.11"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.46.0",
-    "@carbon/layout": "^11.44.0",
-    "@carbon/motion": "^11.38.0",
-    "@carbon/react": "^1.97.0",
-    "@carbon/themes": "^11.64.0",
-    "@carbon/type": "^11.50.0",
+    "@carbon/grid": "^11.50.0",
+    "@carbon/layout": "^11.48.0",
+    "@carbon/motion": "^11.41.0",
+    "@carbon/react": "^1.101.0",
+    "@carbon/themes": "^11.68.0",
+    "@carbon/type": "^11.54.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "30bb896c821dbc206f87874b66b97e3121efe15a"
+  "gitHead": "7b0c5737d123755ee2ed937568fcd568e9c76b3f"
 }

package/scss/components/APIKeyModal/_api-key-modal.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2022
+// Copyright IBM Corp. 2021, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -10,19 +10,21 @@
 @use '@carbon/styles/scss/components/button/tokens' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
+.#{$block-class} .#{carbon-config.$prefix}--modal-close {
   display: none;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--inline-loading {
+.#{$block-class} .#{carbon-config.$prefix}--inline-loading {
   min-block-size: 3rem; // increasing the height from 2 to 3 resolves an issue where the scroll bar bounces
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-content {
+.#{$block-class} .#{carbon-config.$prefix}--modal-content {
   padding-inline-end: $spacing-05;
 }
 

package/scss/components/AboutModal/_about-modal.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// Copyright IBM Corp. 2020, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/type/scss/font-family' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
 
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
@@ -16,7 +17,7 @@
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-container {
+.#{$block-class} .#{carbon-config.$prefix}--modal-container {
   grid-template-rows: auto auto 1fr auto;
 }
 
@@ -47,14 +48,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
   padding-block-start: 0;
   padding-inline: $spacing-05 20%;
 
-  &:not(.#{c4p-settings.$carbon-prefix}--modal-scroll-content) {
+  &:not(.#{carbon-config.$prefix}--modal-scroll-content) {
     margin-block-end: $spacing-06;
     padding-block-end: 0;
   }
 }
 
-.#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
+.#{$block-class} .#{carbon-config.$prefix}--modal-content--overflow-indicator {
   background-image: linear-gradient(to bottom, #00000000, $layer-01);
   inset-block-end: #{$spacing-06};
 }

package/scss/components/ActionBar/_action-bar.scss

@@ -41,11 +41,13 @@ $block-class-overflow-items: #{$_block-class}-overflow-items;
 
   .#{$block-class-overflow-items}__item-content {
     display: flex;
+    align-items: center;
     justify-content: space-between;
     inline-size: 100%;
   }
 
   .#{$block-class-overflow-items}__item svg {
+    flex-shrink: 0;
     margin: 0 $spacing-02;
   }
 }