@carbon/ibm-products 2.59.0 → 2.60.0

package/scss/components/TooltipTrigger/_tooltip-trigger.scss

@@ -14,8 +14,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--tooltip-trigger;
 
 .#{$block-class} {
   display: flex;
-  width: 100%;
-  height: 100%;
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
@@ -24,6 +22,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--tooltip-trigger;
   margin: 0;
   appearance: none;
   background: none;
+  block-size: 100%;
   cursor: pointer;
+  inline-size: 100%;
   outline: none;
 }

package/scss/components/TruncatedList/_truncated-list.scss

@@ -28,16 +28,22 @@ $block-class: #{c4p-settings.$pkg-prefix}--truncated-list;
 
 .#{$block-class}--expanded .#{$block-class}__list {
   overflow-y: auto;
+  @supports (overflow-block: auto) {
+    overflow-block: auto;
+  }
 }
 
 .#{$block-class}--expanded-all .#{$block-class}__list {
   overflow-y: hidden;
+  @supports (overflow-block: hidden) {
+    overflow-block: hidden;
+  }
 }
 
 .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__button {
-  width: 100%;
   padding: 0;
-  margin-top: $spacing-02;
+  inline-size: 100%;
+  margin-block-start: $spacing-02;
   min-block-size: auto;
 }
 .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__button:hover {

package/scss/components/UserAvatar/_carbon-imports.scss

@@ -7,4 +7,4 @@
 
 // Import any Carbon component styles used from UserAvatar in this file.
 // UserAvatar uses the following Carbon components:
-@use '@carbon/react/scss/components/tooltip';
+@use '@carbon/styles/scss/components/tooltip';

package/scss/components/UserAvatar/_user-avatar.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 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.
@@ -15,17 +15,6 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/react/scss/grid';
-
-// UserAvatar uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by UserAvatar
-@use '@carbon/react/scss/components/tooltip';
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-
 $block-class: #{$pkg-prefix}--user-avatar;
 
 $sizes: (
@@ -38,20 +27,21 @@ $sizes: (
 @mixin size($size) {
   $_size: map.get($sizes, $size);
 
-  width: $_size;
-  height: $_size;
+  block-size: $_size;
+
+  inline-size: $_size;
 }
 
 .#{$block-class} {
   position: relative;
   display: flex;
-  width: 4rem;
-  height: 4rem;
   align-items: center;
   justify-content: center;
   border: 0.5px solid transparent;
   border-radius: 100%;
+  block-size: 4rem;
   color: $text-inverse;
+  inline-size: 4rem;
   outline: none;
   outline-offset: 3px;
 }

package/scss/components/UserProfileImage/_carbon-imports.scss

@@ -7,4 +7,4 @@
 
 // UserProfileImage uses the following Carbon components:
 // IconButton
-@use '@carbon/react/scss/components/button';
+@use '@carbon/styles/scss/components/button';

package/scss/components/UserProfileImage/_color-map.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
 
 $carbon-colors: (
   'blue30': $blue-30,

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -28,8 +28,9 @@ $sizes: (
 @mixin size($size) {
   $_size: map.get($sizes, $size);
 
-  width: $_size;
-  height: $_size;
+  block-size: $_size;
+
+  inline-size: $_size;
 }
 
 $base-colors: 'cyan', 'gray', 'green', 'magenta', 'purple', 'teal';
@@ -93,9 +94,9 @@ $theme-keys: map-keys($themes);
 }
 
 .#{$block-class}__tooltip.#{$carbon-prefix}--btn--md.#{$carbon-prefix}--btn--icon-only {
-  min-height: auto;
   padding: 0;
   border-radius: 50%;
+  min-block-size: auto;
 }
 
 .#{$carbon-prefix}--btn--ghost.#{$block-class}__tooltip:focus {
@@ -109,8 +110,8 @@ $theme-keys: map-keys($themes);
 }
 
 .#{$block-class}__photo {
-  width: 100%;
   border-radius: 100%;
+  inline-size: 100%;
 }
 
 .#{$block-class}__photo--xl {

package/scss/components/WebTerminal/_carbon-imports.scss

@@ -8,5 +8,5 @@
 // WebTerminal uses the following Carbon components:
 // Button
 // OverflowMenu
-@use '@carbon/react/scss/components/button';
-@use '@carbon/react/scss/components/overflow-menu';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/overflow-menu';

package/scss/components/WebTerminal/_web-terminal.scss

@@ -51,22 +51,22 @@ $block-class: #{$pkg-prefix}--web-terminal;
   @include theme($g90);
 
   position: fixed;
-  top: $spacing-09;
-  right: 0;
-  width: 100%;
-  max-width: $web-terminal-width;
-  height: calc(100vh - #{$spacing-09});
-  border-left: 1px solid $gray-90;
+  block-size: calc(100vh - #{$spacing-09});
+  border-inline-start: 1px solid $gray-90;
   color: $text-primary;
+  inline-size: 100%;
+  inset-block-start: $spacing-09;
+  inset-inline-end: 0;
+  max-inline-size: $web-terminal-width;
   /* stylelint-disable-next-line  */
 }
 
 .#{$block-class}__bar {
   display: flex;
-  height: 3rem;
   align-items: center;
   justify-content: space-between;
   background-color: $background;
+  block-size: 3rem;
 }
 
 .#{$block-class}__actions {
@@ -84,15 +84,15 @@ $block-class: #{$pkg-prefix}--web-terminal;
 
 // Terminal body styles
 .#{$block-class}__body {
-  height: calc(100vh - #{$spacing-09});
+  block-size: calc(100vh - #{$spacing-09});
 }
 
 // Terminal wrapper styles
 .#{$block-class}-content-wrapper {
-  width: 100vw;
-  height: 100%;
+  block-size: 100%;
+  inline-size: 100vw;
 }
 
 .#{$block-class}-content-wrapper--open {
-  width: calc(100vw - #{$web-terminal-width});
+  inline-size: calc(100vw - #{$web-terminal-width});
 }

package/scss/components/_index-released-only-with-carbon.scss

@@ -20,6 +20,7 @@
 @use './CreateTearsheet/index-with-carbon' as *;
 @use './Datagrid/index-with-carbon' as *;
 @use './EditInPlace/index-with-carbon' as *;
+@use './EditTearsheet/index-with-carbon' as *;
 @use './EmptyStates/index-with-carbon' as *;
 @use './ExportModal/index-with-carbon' as *;
 @use './ExpressiveCard/index-with-carbon' as *;

package/scss/components/_index-with-carbon.scss

@@ -44,6 +44,7 @@
 @use './EditSidePanel/index-with-carbon' as *;
 @use './OptionsTile/index-with-carbon' as *;
 @use './EditInPlace/index-with-carbon' as *;
+@use './EditTearsheet/index-with-carbon' as *;
 @use './DataSpreadsheet/index-with-carbon' as *;
 @use './Datagrid/index-with-carbon' as *;
 @use './EditUpdateCards/index-with-carbon' as *;

package/scss/global/decorators/_side-panel-decorator.scss

@@ -8,8 +8,8 @@
 @mixin side-panel-decorator($prefix) {
   .#{$prefix}container {
     display: flex;
-    height: 100vh;
     flex-direction: column;
+    block-size: 100vh;
   }
 
   .#{$prefix}content {
@@ -18,8 +18,8 @@
 
   .#{$prefix}toggle {
     position: absolute;
-    top: 50%;
-    left: 50%;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
     transform: translate(-50%, -50%);
   }
 }

package/scss/global/styles/_display-box.scss

@@ -5,9 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/react' as *;
-@use '@carbon/react/scss/spacing' as *;
-@use '@carbon/react/scss/type' as *;
+@use '@carbon/styles' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
 @use '../../global/styles/project-settings' as *;
 
 $block-class: 'ccs-sb--display-box';
@@ -21,28 +21,28 @@ $indicator-height: $spacing-04;
 .#{$block-class} {
   position: relative;
   display: inline-block;
-  padding-top: $spacing-05; // space for the indicators
-  margin-top: $spacing-09; // provides space in docs
   color: $text-helper;
+  margin-block-start: $spacing-09; // provides space in docs
+  padding-block-start: $spacing-05; // space for the indicators
 }
 
 .#{$block-class}__indicator {
   position: absolute;
-  top: 0;
-  width: 100%;
-  border-bottom: 1px solid $text-helper;
+  border-block-end: 1px solid $text-helper;
+  inline-size: 100%;
+  inset-block-start: 0;
   white-space: nowrap;
   @include type-style('helper-text-01');
 }
 
 .#{$block-class}__message {
   position: absolute;
-  bottom: $spacing-02;
+  inset-block-end: $spacing-02;
 }
 
 .sb-main-centered .#{$block-class}__message {
-  left: 50%;
-  min-width: 100vh;
+  inset-inline-start: 50%;
+  min-inline-size: 100vh;
   text-align: center;
   transform: translateX(-50%);
 }
@@ -50,18 +50,18 @@ $indicator-height: $spacing-04;
 .#{$block-class}__indicator--left,
 .#{$block-class}__indicator--right {
   position: absolute;
-  bottom: calc(-1 * $indicator-height);
-  width: 0;
-  height: 0;
-  border-top: $indicator-height solid $text-helper;
-  border-right: $indicator-width solid transparent;
-  border-left: $indicator-width solid transparent;
+  block-size: 0;
+  border-block-start: $indicator-height solid $text-helper;
+  border-inline-end: $indicator-width solid transparent;
+  border-inline-start: $indicator-width solid transparent;
+  inline-size: 0;
+  inset-block-end: calc(-1 * $indicator-height);
 }
 
 .#{$block-class}__indicator--left {
-  left: calc(-1 * $indicator-width);
+  inset-inline-start: calc(-1 * $indicator-width);
 }
 
 .#{$block-class}__indicator--right {
-  right: calc(-1 * $indicator-width);
+  inset-inline-end: calc(-1 * $indicator-width);
 }

package/scss/global/styles/_mixins.scss

@@ -13,10 +13,10 @@
 
 @mixin measuring-container() {
   position: absolute;
-  top: -100vh; // off screen
-  left: -100vw; // off screen
   overflow: hidden;
-  max-width: 100vw; // NOTE: resize only detected if < 100vw
+  inset-block-start: -100vh; // off screen
+  inset-inline-start: -100vw; // off screen
+  max-inline-size: 100vw; // NOTE: resize only detected if < 100vw
   pointer-events: none;
   visibility: hidden;
 }

package/scss/index-full-carbon.scss

@@ -7,4 +7,4 @@
 
 @forward './global/styles/project-settings';
 @forward './components/index';
-@forward '@carbon/react';
+@forward '@carbon/styles';

package/telemetry.yml

@@ -729,6 +729,7 @@ collect:
         - narrow
         - tertiaryButtonLabel
         # InterstitialScreen
+        - breakpointsWithMedia
         - domainName
         - headerClassName
         - headerTitle
@@ -1074,13 +1075,15 @@ collect:
         - bottom
         - top
         # General - size
-        - '"default"'
         - '"lg"'
         - '"md"'
         - '"sm"'
-        - '"xl"'
         - '"xs"'
         - 2xl
+        - BigNumbersSize.Default
+        - BigNumbersSize.Large
+        - BigNumbersSize.XLarge
+        - default
         - lg
         - md
         - narrow

package/es/components/SidePanel/motion/variants.d.ts

@@ -1,67 +0,0 @@
-export namespace overlayVariants {
-    namespace visible {
-        let opacity: number;
-        namespace transition {
-            let duration: number;
-            let ease: number[];
-        }
-    }
-    namespace hidden {
-        let opacity_1: number;
-        export { opacity_1 as opacity };
-    }
-    namespace exit {
-        let opacity_2: number;
-        export { opacity_2 as opacity };
-    }
-}
-export namespace panelVariants {
-    export function visible_1(): {
-        x: number;
-        transition: {
-            duration: number;
-            ease: number[];
-        };
-        opacity: number;
-    };
-    export { visible_1 as visible };
-    export function hidden_1({ placement, shouldReduceMotion }: {
-        placement: any;
-        shouldReduceMotion: any;
-    }): {
-        x: string | number;
-        opacity: number;
-    };
-    export { hidden_1 as hidden };
-    export function exit_1({ placement, shouldReduceMotion }: {
-        placement: any;
-        shouldReduceMotion: any;
-    }): {
-        x: string | number;
-        transition: {
-            duration: number;
-            ease: number[];
-        };
-        opacity: number;
-    };
-    export { exit_1 as exit };
-}
-export namespace actionSetVariants {
-    export function hidden_2(shouldReduceMotion: any): {
-        opacity: number;
-        transition: {
-            duration: number;
-            ease: number | number[];
-        };
-    };
-    export { hidden_2 as hidden };
-    export function visible_2(shouldReduceMotion: any): {
-        opacity: number;
-        transition: {
-            duration: number;
-            ease: number | number[];
-            delay: number;
-        };
-    };
-    export { visible_2 as visible };
-}

package/es/components/SidePanel/motion/variants.js

@@ -1,79 +0,0 @@
-/**
- * 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.
- */
-
-import { DURATIONS, EASINGS } from '../../../global/js/utils/motionConstants.js';
-
-var overlayVariants = {
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: DURATIONS.moderate02,
-      ease: EASINGS.productive.standard
-    }
-  },
-  hidden: {
-    opacity: 0
-  },
-  exit: {
-    opacity: 0
-  }
-};
-var panelVariants = {
-  visible: function visible() {
-    return {
-      x: 0,
-      transition: {
-        duration: DURATIONS.moderate02,
-        ease: EASINGS.productive.standard
-      },
-      opacity: 1
-    };
-  },
-  hidden: function hidden(_ref) {
-    var placement = _ref.placement,
-      shouldReduceMotion = _ref.shouldReduceMotion;
-    return {
-      x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
-      opacity: shouldReduceMotion ? 0 : 1
-    };
-  },
-  exit: function exit(_ref2) {
-    var placement = _ref2.placement,
-      shouldReduceMotion = _ref2.shouldReduceMotion;
-    return {
-      x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
-      transition: {
-        duration: DURATIONS.moderate01,
-        ease: EASINGS.productive.exit
-      },
-      opacity: shouldReduceMotion ? 0 : 1
-    };
-  }
-};
-var actionSetVariants = {
-  hidden: function hidden(shouldReduceMotion) {
-    return {
-      opacity: shouldReduceMotion ? 0 : 1,
-      transition: {
-        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast01,
-        ease: shouldReduceMotion ? 0 : EASINGS.productive.exit
-      }
-    };
-  },
-  visible: function visible(shouldReduceMotion) {
-    return {
-      opacity: 1,
-      transition: {
-        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast02,
-        ease: shouldReduceMotion ? 0 : EASINGS.productive.entrance,
-        delay: shouldReduceMotion ? 0.075 : 0
-      }
-    };
-  }
-};
-
-export { actionSetVariants, overlayVariants, panelVariants };

package/es/global/js/utils/keyboardNavigation.d.ts

@@ -1,27 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * Various utilities to help with a11y work
- */
-/**
- * A flag `node.compareDocumentPosition(target)` returns,
- * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
- */
-export const DOCUMENT_POSITION_BROAD_PRECEDING: number | false;
-/**
- * A flag `node.compareDocumentPosition(target)` returns,
- * that indicates `target` is located later than `node` in the document or `node` contains `target`.
- */
-export const DOCUMENT_POSITION_BROAD_FOLLOWING: number | false;
-/**
- * CSS selector that selects major nodes that are sequential-focusable.
- */
-export const selectorTabbable: "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
-/**
- * CSS selector that selects major nodes that are click focusable
- */
-export const selectorFocusable: "\n  a[href], area[href], input:not([disabled]),\n  button:not([disabled]),select:not([disabled]),\n  textarea:not([disabled]),\n  iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]\n";

package/es/global/js/utils/keyboardNavigation.js

@@ -1,37 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Various utilities to help with a11y work
- */
-
-/**
- * A flag `node.compareDocumentPosition(target)` returns,
- * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
- */
-var DOCUMENT_POSITION_BROAD_PRECEDING =
-// Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' &&
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
-
-/**
- * A flag `node.compareDocumentPosition(target)` returns,
- * that indicates `target` is located later than `node` in the document or `node` contains `target`.
- */
-var DOCUMENT_POSITION_BROAD_FOLLOWING =
-// Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' &&
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
-
-/**
- * CSS selector that selects major nodes that are sequential-focusable.
- */
-var selectorTabbable = "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
-
-export { DOCUMENT_POSITION_BROAD_FOLLOWING, DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable };

package/es/global/js/utils/wrapFocus.d.ts

@@ -1,25 +0,0 @@
-export default wrapFocus;
-/**
- * @param {Node} node A DOM node.
- * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
- * @returns {boolean} `true` of the given `node` is in a floating menu.
- */
-export function elementOrParentIsFloatingMenu(node: Node, selectorsFloatingMenus?: string[]): boolean;
-/**
- * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
- * @param {object} options The options.
- * @param {Node|null} options.bodyNode The DOM node of the inner modal.
- * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
- * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
- * @param {Node} options.currentActiveNode The DOM node that has focus.
- * @param {Node} options.oldActiveNode The DOM node that previously had focus.
- * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
- */
-declare function wrapFocus({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, }: {
-    bodyNode: Node | null;
-    startTrapNode: Node | null;
-    endTrapNode: Node | null;
-    currentActiveNode: Node;
-    oldActiveNode: Node;
-    selectorsFloatingMenus?: string[] | undefined;
-}): void;