@carbon/ibm-products 2.83.0 → 2.84.0

package/scss/components/TagSet/_tag-set.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// 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.
@@ -10,6 +10,8 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as *;
 @use '../../global/styles/mixins' as *;
 
@@ -55,11 +57,12 @@ $block-class-modal: #{$block-class}-modal;
   .#{$block-class-overflow} {
     display: inline-block;
     vertical-align: bottom;
-    .#{$carbon-prefix}--tag.#{$carbon-prefix}--tag--interactive {
+    .#{carbon-config.$prefix}--tag.#{carbon-config.$prefix}--tag--interactive {
       border: 0;
     }
 
-    .#{$carbon-prefix}--popover .#{$carbon-prefix}--popover-content {
+    .#{carbon-config.$prefix}--popover
+      .#{carbon-config.$prefix}--popover-content {
       padding: $spacing-05;
     }
   }
@@ -70,7 +73,7 @@ $block-class-modal: #{$block-class}-modal;
     visibility: hidden;
   }
 
-  .#{$carbon-prefix}--tag {
+  .#{carbon-config.$prefix}--tag {
     margin-block-end: $spacing-03;
     margin-inline-end: $spacing-03;
   }
@@ -100,7 +103,7 @@ $block-class-modal: #{$block-class}-modal;
   }
 
   .#{$block-class-modal}__body {
-    .#{$carbon-prefix}--tag {
+    .#{carbon-config.$prefix}--tag {
       margin-block-end: $spacing-03;
       margin-inline-end: $spacing-03;
     }
@@ -114,9 +117,9 @@ $block-class-modal: #{$block-class}-modal;
     text-align: start;
   }
 
-  .#{$carbon-prefix}--link:active,
-  .#{$carbon-prefix}--link:active:visited,
-  .#{$carbon-prefix}--link:active:visited:hover {
+  .#{carbon-config.$prefix}--link:active,
+  .#{carbon-config.$prefix}--link:active:visited,
+  .#{carbon-config.$prefix}--link:active:visited:hover {
     color: $text-inverse;
   }
 
@@ -144,16 +147,13 @@ $block-class-modal: #{$block-class}-modal;
   }
 
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
-    .#{$carbon-prefix}--tag {
+    .#{carbon-config.$prefix}--tag {
     background-color: $background-inverse-hover;
-    // This adds spacing only for the overflow menu
-    // listing "tags" as opposed to just "labels".
-    margin-block-end: $spacing-01;
   }
 
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
-    .#{$carbon-prefix}--tag {
+    .#{carbon-config.$prefix}--tag {
     @include type.type-style('body-compact-01');
 
     display: block;
@@ -169,21 +169,23 @@ $block-class-modal: #{$block-class}-modal;
     white-space: nowrap;
   }
 
-  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon {
-    // undo override by .#{$carbon-prefix}--tooltip button
+  .#{$block-class-overflow}__tag .#{carbon-config.$prefix}--tag__close-icon {
+    // undo override by .#{carbon-config.$prefix}--tooltip button
     padding: 0;
   }
 
-  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag--high-contrast {
+  .#{$block-class-overflow}__tag .#{carbon-config.$prefix}--tag--high-contrast {
     background-color: $background;
     color: $text-primary;
   }
 
-  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon:hover {
+  .#{$block-class-overflow}__tag
+    .#{carbon-config.$prefix}--tag__close-icon:hover {
     background-color: $background-hover;
   }
 
-  .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon:focus {
+  .#{$block-class-overflow}__tag
+    .#{carbon-config.$prefix}--tag__close-icon:focus {
     box-shadow: inset 0 0 0 $spacing-01 $focus;
   }
 }

package/scss/components/Tearsheet/_tearsheet.scss

@@ -1,7 +1,7 @@
 // stylelint-disable carbon/motion-duration-use, carbon/motion-easing-use
 
 //
-// Copyright IBM Corp. 2020, 2023
+// 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.
@@ -13,8 +13,11 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/feature-flags' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as *;
 @use '../../global/styles/mixins' as *;
 
@@ -26,9 +29,99 @@
 
 $block-class: #{$pkg-prefix}--tearsheet;
 
+// viewport, capped at 500px to set an upper limit on the movement speed
+// For the reason for calc() see https://github.com/sass/sass/issues/2849
+// and https://github.com/sass/node-sass/issues/2815.
+// stylelint-disable-next-line carbon/layout-use
+$transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
+
 // stylelint-disable-next-line carbon/theme-use
 $motion-duration: $duration-moderate-02;
 
+@mixin tearsheet-entrance-exit($has-presence: false) {
+  @if not($has-presence) {
+    &.#{$block-class} {
+      &:not(.is-visible) {
+        &.#{$block-class}.#{$block-class} .#{$block-class}__container {
+          transform: $transform-start;
+        }
+      }
+    }
+  } @else {
+    // handle entrance and exit via CSS animations,
+    // however keep CSS transitions for stacking animations
+    &.#{$block-class} {
+      animation: #{$block-class}--presence-tearsheet__enter
+        $motion-duration
+        motion(entrance, expressive);
+      opacity: 1;
+
+      // extra specificity to ensure this transition overrides the carbon default
+      &.#{$block-class}.#{$block-class} .#{$block-class}__container {
+        animation: #{$block-class}--presence-tearsheet--container__enter
+          $motion-duration
+          motion(entrance, expressive);
+        transform: translate3d(0, 0, 0);
+        @media screen and (prefers-reduced-motion: reduce) {
+          animation: none;
+        }
+      }
+
+      &.#{$block-class}--stacked-1-of-2.is-visible .#{$block-class}__container,
+      &.#{$block-class}--stacked-2-of-3.is-visible .#{$block-class}__container {
+        transform: scale(var(--#{$block-class}--stacking-scale-factor-single));
+      }
+
+      &.#{$block-class}--stacked-1-of-3.is-visible .#{$block-class}__container {
+        transform: scale(var(--#{$block-class}--stacking-scale-factor-double));
+      }
+
+      &[data-tearsheet-exiting] {
+        animation: #{$block-class}--presence-tearsheet__exit
+          $motion-duration
+          motion(exit, expressive)
+          forwards;
+
+        &.#{$block-class}.#{$block-class} .#{$block-class}__container {
+          animation: #{$block-class}--presence-tearsheet--container__exit
+            $motion-duration
+            motion(entrance, expressive)
+            forwards;
+          @media screen and (prefers-reduced-motion: reduce) {
+            animation: none;
+          }
+        }
+      }
+    }
+
+    @keyframes #{$block-class}--presence-tearsheet__enter {
+      from {
+        opacity: 0;
+        transition: none;
+      }
+    }
+
+    @keyframes #{$block-class}--presence-tearsheet__exit {
+      to {
+        opacity: 0;
+      }
+    }
+
+    @keyframes #{$block-class}--presence-tearsheet--container__enter {
+      from {
+        transform: $transform-start;
+        transition: none;
+      }
+    }
+
+    @keyframes #{$block-class}--presence-tearsheet--container__exit {
+      to {
+        transform: $transform-start;
+      }
+    }
+  }
+}
+
 @include block-wrap($block-class) {
   &.#{$block-class} {
     --overlay-color: #{$overlay};
@@ -51,17 +144,6 @@ $motion-duration: $duration-moderate-02;
       }
     }
 
-    &:not(.is-visible) {
-      &.#{$block-class}.#{$block-class} .#{$block-class}__container {
-        // we want the enter/leave animation to run up most of the height of the
-        // viewport, capped at 500px to set an upper limit on the movement speed
-        // For the reason for calc() see https://github.com/sass/sass/issues/2849
-        // and https://github.com/sass/node-sass/issues/2815.
-        // stylelint-disable-next-line carbon/layout-use
-        transform: translate3d(0, calc(min(95vh, 500px)), 0);
-      }
-    }
-
     &.#{$block-class}.#{$block-class} {
       /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
       background: initial;
@@ -249,8 +331,8 @@ $motion-duration: $duration-moderate-02;
 
   // buttons inside button sets in the header action area have 8px gap
   .#{$block-class}__header-actions
-    .#{$carbon-prefix}--btn-set
-    .#{$carbon-prefix}--btn:not(:first-of-type) {
+    .#{carbon-config.$prefix}--btn-set
+    .#{carbon-config.$prefix}--btn:not(:first-of-type) {
     margin-inline-start: $spacing-03;
   }
 
@@ -259,7 +341,7 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--wide
-    .#{$carbon-prefix}--modal-header__heading.#{$block-class}__heading {
+    .#{carbon-config.$prefix}--modal-header__heading.#{$block-class}__heading {
     @include type.type-style('heading-04');
   }
 
@@ -401,27 +483,28 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}--wide .#{$block-class}__content {
     // Specific to the Tearsheet *and* radio buttons,
     // `readOnly` styling is not applying a grey outline.
-    .#{$carbon-prefix}--radio-button[readonly]
-      + .#{$carbon-prefix}--radio-button__label
-      .#{$carbon-prefix}--radio-button__appearance {
+    .#{carbon-config.$prefix}--radio-button[readonly]
+      + .#{carbon-config.$prefix}--radio-button__label
+      .#{carbon-config.$prefix}--radio-button__appearance {
       border-color: $icon-disabled;
     }
 
-    .#{$carbon-prefix}--select--inline .#{$carbon-prefix}--select-input {
+    .#{carbon-config.$prefix}--select--inline
+      .#{carbon-config.$prefix}--select-input {
       background-color: transparent;
     }
 
     // and restore the 'light' prop in case light fields are wanted
-    .#{$carbon-prefix}--text-input--light,
-    .#{$carbon-prefix}--text-area--light,
-    .#{$carbon-prefix}--search--light .#{$carbon-prefix}--search-input,
-    .#{$carbon-prefix}--select--light .#{$carbon-prefix}--select-input,
-    .#{$carbon-prefix}--dropdown--light,
-    .#{$carbon-prefix}--dropdown--light .#{$carbon-prefix}--dropdown-list,
+    .#{carbon-config.$prefix}--text-input--light,
+    .#{carbon-config.$prefix}--text-area--light,
+    .#{carbon-config.$prefix}--search--light .#{carbon-config.$prefix}--search-input,
+    .#{carbon-config.$prefix}--select--light .#{carbon-config.$prefix}--select-input,
+    .#{carbon-config.$prefix}--dropdown--light,
+    .#{carbon-config.$prefix}--dropdown--light .#{carbon-config.$prefix}--dropdown-list,
     /* stylelint-disable-next-line prettier/prettier */
-    .#{$carbon-prefix}--number--light input[type='number'],
-    .#{$carbon-prefix}--date-picker--light
-      .#{$carbon-prefix}--date-picker__input {
+    .#{carbon-config.$prefix}--number--light input[type='number'],
+    .#{carbon-config.$prefix}--date-picker--light
+      .#{carbon-config.$prefix}--date-picker__input {
       background-color: $field-02;
     }
   }
@@ -453,12 +536,20 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
-    .#{$carbon-prefix}--slug,
+    .#{carbon-config.$prefix}--slug,
   &.#{$block-class}--has-ai-label:not(.#{$block-class}--has-close)
-    .#{$carbon-prefix}--slug {
+    .#{carbon-config.$prefix}--slug {
     inset-inline-end: 0;
     /* stylelint-disable-next-line carbon/layout-use */
     margin-block: 6px;
     margin-inline-end: $spacing-05;
   }
+
+  &.#{$block-class}--tearsheet-enable-presence {
+    @include tearsheet-entrance-exit($has-presence: true);
+  }
+
+  &:not(.#{$block-class}--tearsheet-enable-presence) {
+    @include tearsheet-entrance-exit($has-presence: enabled('enable-presence'));
+  }
 }

package/scss/components/Toolbar/_toolbar.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// 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.
@@ -8,6 +8,8 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as *;
 
 $block-class: #{$pkg-prefix}--toolbar;
@@ -48,7 +50,7 @@ $toolbar-dimensions: $spacing-08;
 }
 
 .#{$block-class}--vertical > .#{$block-class}__group:last-of-type,
-.#{$block-class} .#{$carbon-prefix}--dropdown {
+.#{$block-class} .#{carbon-config.$prefix}--dropdown {
   border-block-end-width: 0;
 }
 

package/scss/components/TruncatedList/_truncated-list.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.
@@ -12,6 +12,7 @@
 // Other Carbon settings if needed
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--truncated-list;
@@ -40,12 +41,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--truncated-list;
   }
 }
 
-.#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__button {
+.#{carbon-config.$prefix}--btn.#{$block-class}__button {
   padding: 0;
   inline-size: 100%;
   margin-block-start: $spacing-02;
   min-block-size: auto;
 }
-.#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__button:hover {
+.#{carbon-config.$prefix}--btn.#{$block-class}__button:hover {
   background: transparent;
 }

package/scss/components/TruncatedText/_truncated-text.scss

@@ -7,7 +7,7 @@
 
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
 
 $block-class: #{c4p-settings.$pkg-prefix}--truncated-text;
 
@@ -21,7 +21,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--truncated-text;
   }
 
   &__expand-toggle {
-    color: $link-primary;
+    color: theme.$link-primary;
     cursor: pointer;
   }
 }

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

@@ -14,6 +14,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
 
 $block-class: #{$pkg-prefix}--user-avatar;
 
@@ -71,16 +72,16 @@ $sizes: (
 //this mixin allows you to set background color based on the lighter themes such as g10 and white
 @mixin setLightBg($order, $color) {
   :root .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--white .#{$block-class}--#{$order} {
+  .#{carbon-config.$prefix}--g10 .#{$block-class}--#{$order},
+  .#{carbon-config.$prefix}--white .#{$block-class}--#{$order} {
     @include setBgColor($color);
   }
 }
 
 //this mixin allows you to set background color based on the darker themes such as g90 and g100
 @mixin setDarkBg($order, $color) {
-  .#{$carbon-prefix}--g90 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order} {
+  .#{carbon-config.$prefix}--g90 .#{$block-class}--#{$order},
+  .#{carbon-config.$prefix}--g100 .#{$block-class}--#{$order} {
     @include setBgColor($color);
   }
 }

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// 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.
@@ -12,6 +12,8 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/type/scss/font-family';
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as *;
 @use './color-map' as *;
 
@@ -72,8 +74,9 @@ $theme-keys: map-keys($themes);
   }
 }
 
-.#{$carbon-prefix}--tooltip__trigger.#{$block-class}__tooltip,
-.#{$block-class}__tooltip.#{$carbon-prefix}--btn--ghost:not([disabled]) svg {
+.#{carbon-config.$prefix}--tooltip__trigger.#{$block-class}__tooltip,
+.#{$block-class}__tooltip.#{carbon-config.$prefix}--btn--ghost:not([disabled])
+  svg {
   /* stylelint-disable-next-line max-nesting-depth */
   &:hover,
   &:focus {
@@ -93,19 +96,20 @@ $theme-keys: map-keys($themes);
   text-transform: uppercase;
 }
 
-.#{$block-class}__tooltip.#{$carbon-prefix}--btn--md.#{$carbon-prefix}--btn--icon-only {
+.#{$block-class}__tooltip.#{carbon-config.$prefix}--btn--md.#{carbon-config.$prefix}--btn--icon-only {
   padding: 0;
   border-radius: 50%;
   min-block-size: auto;
 }
 
-.#{$carbon-prefix}--btn--ghost.#{$block-class}__tooltip:focus {
+.#{carbon-config.$prefix}--btn--ghost.#{$block-class}__tooltip:focus {
   border: 0;
   box-shadow: 0 0 0 $spacing-02 $focus;
 }
 
-.#{$carbon-prefix}--tooltip__trigger .#{$block-class} svg,
-.#{$block-class}__tooltip.#{$carbon-prefix}--btn--ghost:not([disabled]) svg {
+.#{carbon-config.$prefix}--tooltip__trigger .#{$block-class} svg,
+.#{$block-class}__tooltip.#{carbon-config.$prefix}--btn--ghost:not([disabled])
+  svg {
   fill: $layer-01;
 }
 

package/scss/components/WebTerminal/_web-terminal.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.
@@ -11,6 +11,8 @@
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as *;
 
 $web-terminal-width: 40rem; // 640px
@@ -90,7 +92,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
 }
 
 .#{$block-class}__documentation-overflow
-  .#{$carbon-prefix}--overflow-menu-options__btn {
+  .#{carbon-config.$prefix}--overflow-menu-options__btn {
   text-decoration: none;
 }
 

package/telemetry.yml

@@ -965,6 +965,9 @@ collect:
         # TearsheetHeaderContent
         - titleEnd
         - titleStart
+        # TearsheetPresence
+        - _autoEnablePresence
+        - _presenceId
         # TearsheetWithSteps
         - progressIndicator
         - setOpen