@carbon/ibm-products-styles 2.67.0 → 2.68.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-styles",
   "description": "Carbon for IBM Products styles",
-  "version": "2.67.0",
+  "version": "2.68.0-rc.0",
   "license": "Apache-2.0",
   "installConfig": {
     "hoistingLimits": "none"
@@ -47,10 +47,10 @@
   "devDependencies": {
     "chalk": "^4.1.2",
     "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.0.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.30.0",
+    "jest-config-ibm-cloud-cognitive": "^1.31.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
@@ -67,5 +67,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "6b1aa641b80b4df7b6fc51c91dfaaefbfccc1ae6"
+  "gitHead": "844a483091e668abe326d27da86108ec05be8860"
 }

package/scss/components/{BigNumbers/_big-numbers.scss → BigNumber/_big-number.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.
@@ -17,11 +17,11 @@
 // TODO: @use '@carbon/styles/scss/grid';
 // or
 // TODO: @use '@carbon/styles/scss/grid';
-// BigNumbers uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by BigNumbers
+// BigNumber uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by BigNumber
 // The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--big-numbers;
-$skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
+$block-class: #{c4p-settings.$pkg-prefix}--big-number;
+$skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-number-skeleton;
 
 .#{$block-class}__label {
   @include type-style('label-01');

package/scss/components/{BigNumbers → BigNumber}/_carbon-imports.scss

@@ -1,11 +1,11 @@
 //
-// 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.
 //
 
-// Import any Carbon component styles used from BigNumbers in this file.
-// BigNumbers uses the following Carbon components:
+// Import any Carbon component styles used from BigNumber in this file.
+// BigNumber uses the following Carbon components:
 @use '@carbon/styles/scss/components/skeleton-styles';
 @use '@carbon/styles/scss/components/tooltip';

package/scss/components/{BigNumbers → BigNumber}/_index-with-carbon.scss

@@ -1,9 +1,9 @@
 //
-// 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.
 //
 
 @use './carbon-imports';
-@use './big-numbers';
+@use './big-number';

package/scss/components/{BigNumbers → BigNumber}/_index.scss

@@ -1,8 +1,8 @@
 //
-// 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.
 //
 
-@use './big-numbers';
+@use './big-number';

package/scss/components/Card/_card.scss

@@ -18,11 +18,13 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class} {
+  border: 1px solid transparent;
   background-color: $layer-01;
   color: $text-primary;
 }
 
 .#{$block-class}__clickable {
+  border-color: $border-tile-01;
   cursor: pointer;
   // stylelint-disable-next-line carbon/motion-easing-use
   transition: background-color $duration-fast-02;

package/scss/components/Coachmark/_bubble.scss

@@ -0,0 +1,62 @@
+/**
+ * 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.
+ */
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as theme;
+@use '@carbon/styles/scss/themes' as themes;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/utilities';
+@use '../../../../ibm-products-styles/src/global/styles/project-settings' as
+  c4p-settings;
+
+$prefix: #{c4p-settings.$pkg-prefix} !default;
+
+.#{$prefix}__bubble {
+  position: fixed;
+  z-index: 10000;
+  display: none;
+  padding: $spacing-05;
+  border-radius: $spacing-01;
+  /* stylelint-disable-next-line declaration-no-important */
+  background: theme.$layer !important;
+  color: theme.$text-primary;
+  font-weight: bold;
+  inline-size: max-content;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+}
+
+.#{$prefix}__bubble-hidden {
+  display: none;
+}
+
+.#{$prefix}__bubble-open {
+  display: grid;
+  pointer-events: all;
+}
+
+.#{$prefix}__bubble-drop-shadow {
+  filter: drop-shadow(0 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2));
+}
+
+.#{$prefix}__bubble__arrow {
+  position: absolute;
+  z-index: 10010;
+  background: theme.$layer;
+  block-size: $spacing-04;
+  inline-size: $spacing-04;
+  transform: rotate(45deg);
+}
+
+.#{$prefix}__bubble__header {
+  z-index: 10020;
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: -$spacing-05;
+  margin-inline: -$spacing-05;
+}

package/scss/components/Coachmark/_coachmark-beacon.scss

@@ -0,0 +1,164 @@
+/* stylelint-disable carbon/layout-use */
+/* stylelint-disable carbon/motion-easing-use */
+/* stylelint-disable max-nesting-depth */
+//
+// 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/motion' as *;
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/styles/scss/grid';
+
+// CoachmarkBeacon uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by CoachmarkBeacon
+$beaconAnimationTime: 2s;
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
+
+.#{$block-class} {
+  position: relative;
+
+  &-default {
+    .#{$block-class}__target {
+      &::before {
+        display: none;
+      }
+      // the blue dot
+      &::after {
+        position: absolute;
+        border-radius: 50%;
+        /* stylelint-disable-next-line carbon/theme-use */
+        background-color: $blue-50;
+        block-size: $spacing-04;
+        content: '';
+        inline-size: $spacing-04;
+        inset-block-start: calc($spacing-01 + $spacing-03);
+        inset-inline-start: calc($spacing-01 + $spacing-03);
+      }
+
+      &:focus {
+        outline: transparent;
+
+        &::before {
+          position: absolute;
+          display: block;
+          border-radius: 100%;
+          block-size: 18px;
+          content: '';
+          inline-size: 18px;
+          inset-block-start: 7px;
+          inset-inline-start: 7px;
+          /* stylelint-disable-next-line carbon/theme-use */
+          outline: $spacing-01 $focus solid;
+        }
+      }
+    }
+  }
+  .#{$block-class}__target {
+    // the hit area
+    display: flex;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    block-size: $spacing-07;
+    cursor: pointer;
+    inline-size: $spacing-07;
+
+    &[aria-expanded='true'] {
+      circle {
+        animation: none;
+      }
+    }
+  }
+
+  &__center {
+    position: absolute;
+    z-index: 6900;
+    block-size: $spacing-11;
+    inline-size: $spacing-11;
+    inset-block-start: calc(($spacing-06 - $spacing-01) * -1);
+    inset-inline-start: calc(($spacing-06 - $spacing-01) * -1);
+    pointer-events: none;
+
+    circle {
+      /* stylelint-disable-next-line carbon/motion-duration-use */
+      animation: ripple $beaconAnimationTime infinite;
+      fill: $support-info;
+      fill-opacity: 0;
+      -webkit-mask-image: none;
+      mask-image: none;
+      stroke: $support-info;
+      stroke-opacity: 0;
+      stroke-width: 1px;
+      transition-timing-function: motion (exit, productive);
+      @media (prefers-reduced-motion) {
+        animation: none;
+      }
+    }
+  }
+}
+@keyframes ripple {
+  0% {
+    fill-opacity: 0;
+    r: 1px;
+    stroke-opacity: 0;
+    transition-timing-function: motion(entrance, productive);
+  }
+
+  31% {
+    fill-opacity: 0.2;
+    stroke-opacity: 1;
+  }
+
+  62% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+
+  100% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+}
+
+@keyframes ring-ripple {
+  0% {
+    fill-opacity: 0;
+    r: 12px;
+    stroke-opacity: 0;
+    transition-timing-function: motion(entrance, productive);
+  }
+
+  31% {
+    fill-opacity: 0.2;
+    stroke-opacity: 1;
+  }
+
+  62% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+
+  100% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+}

package/scss/components/Coachmark/_coachmark.scss

@@ -14,6 +14,9 @@
 @use './coachmark-header';
 @use './coachmark-overlay';
 @use './coachmark-tagline';
+@use './bubble';
+@use './coachmark-beacon';
+@use '../../global/styles/mixins' as *;
 
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
@@ -29,3 +32,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark;
 .#{$block-class} {
   position: relative;
 }
+
+// Onboarding/Coachmark/next
+
+$block-class-next: #{c4p-settings.$pkg-prefix}--coachmark__next;
+
+@include block-wrap(#{$block-class}__next) {
+  &.#{$block-class-next}--floating {
+    span:has(> div > .#{$block-class-next}--content-header--drag-icon) {
+      margin-inline-end: auto;
+    }
+  }
+}

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -28,6 +28,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   display: flex;
 }
 
+.#{$block-class}__visible {
+  visibility: visible;
+}
+
+.#{$block-class}__hidden {
+  visibility: hidden;
+}
+
 .#{$block-class}__condition-wrapper {
   display: flex;
   flex-flow: row wrap;

package/scss/components/PageHeader/_page-header.scss

@@ -711,15 +711,24 @@ $duration: 1000ms;
 /// @group page-header
 @include block-wrap(#{$block-class}__next) {
   &.#{$block-class} {
+    position: sticky;
     background-color: $layer-01;
     border-block-end: 1px solid $border-subtle-01;
+    /* stylelint-disable-next-line carbon/layout-use */
+    inset-block-start: var(--#{$pkg-prefix}-page-header-header-top);
   }
 
   .#{$block-class}__breadcrumb-bar {
+    position: sticky;
+    z-index: 1;
+    background-color: $layer;
     block-size: to-rem(40px);
+    /* stylelint-disable-next-line carbon/layout-use */
+    inset-block-start: var(--#{$pkg-prefix}-page-header-breadcrumb-top);
   }
 
-  .#{$block-class}__breadcrumb-bar .#{$carbon-prefix}--subgrid {
+  .#{$block-class}__breadcrumb-bar .#{$carbon-prefix}--subgrid,
+  .#{$block-class}__breadcrumb-bar .#{$carbon-prefix}--css-grid {
     block-size: 100%;
   }
 
@@ -751,14 +760,36 @@ $duration: 1000ms;
 
   .#{$block-class}__breadcrumb__actions {
     display: inline-flex;
+    justify-content: flex-end;
+    inline-size: 100%;
   }
 
   .#{$block-class}__breadcrumb__content-actions {
+    inline-size: 100%;
     margin-inline-end: $spacing-04;
   }
 
   .#{$block-class}__breadcrumb-wrapper {
     display: inline-flex;
+    inline-size: 100%;
+  }
+
+  .#{$block-class}__breadcrumb-wrapper .#{$block-class}-breadcrumb-overflow {
+    inline-size: 100%;
+    .#{$carbon-prefix}--breadcrumb {
+      display: flex;
+    }
+  }
+
+  .#{$block-class}__breadcrumb-wrapper
+    .#{$block-class}-breadcrumb-overflow-item {
+    display: none;
+    opacity: 0;
+  }
+  .#{$block-class}__breadcrumb-wrapper
+    .#{$block-class}-overflow-breadcrumb-item-with-items {
+    display: flex;
+    opacity: 1;
   }
 
   .#{$block-class}__content {
@@ -874,6 +905,29 @@ $duration: 1000ms;
     grid-template-columns: auto minmax(0, 1fr);
   }
 
+  .#{$pkg-prefix}--page-header__tab-bar--tablist
+    .#{$pkg-prefix}--page-header__tags {
+    display: flex;
+    align-self: center;
+    justify-content: flex-end;
+  }
+
+  .#{$pkg-prefix}--page-header__tab-bar--tablist.#{$pkg-prefix}--page-header__tab-bar--with-scroller
+    .#{$pkg-prefix}--page-header__tags {
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    transform: translateX(calc($spacing-06 * -1));
+
+    @include breakpoint(md) {
+      padding-inline-end: $spacing-03;
+      transform: translateX(0);
+    }
+    @include breakpoint(max) {
+      padding-inline-end: $spacing-05;
+    }
+  }
+
   .#{$carbon-prefix}--tabs .#{$carbon-prefix}--tab--overflow-nav-button {
     background-color: $layer-01;
 
@@ -886,6 +940,13 @@ $duration: 1000ms;
     }
   }
 
+  // **** This is a temporary work-around until the focus clipping
+  // **** for overflowing tabs is resolved in core.
+  // **** https://github.com/carbon-design-system/carbon/issues/19942
+  .#{$carbon-prefix}--tabs .#{$carbon-prefix}--tabs__nav-link {
+    margin-inline-end: $spacing-01;
+  }
+
   .#{$block-class}__tags {
     display: flex;
     align-items: center;
@@ -901,4 +962,86 @@ $duration: 1000ms;
   .#{$block-class}__tag-item {
     flex-shrink: 0;
   }
+
+  .#{$pkg-prefix}--page-header--scroller-button-icon {
+    /* stylelint-disable-next-line */
+    transition: transform $transition-base;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .#{$pkg-prefix}--page-header--scroller-button-icon-collapsed {
+    transform: rotate(-180deg);
+  }
+
+  .#{$pkg-prefix}--page-header--scroller-button-container {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: $spacing-01;
+  }
+
+  @keyframes page-header-title-breadcrumb-animation {
+    0% {
+      opacity: 0;
+      transform: translateY($spacing-05);
+    }
+
+    5% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes page-header-title-breadcrumb-animation-reduced-motion {
+    0% {
+      opacity: 0;
+    }
+
+    5% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .#{$pkg-prefix}--page-header-title-breadcrumb {
+    opacity: 0;
+    transform: translateY($spacing-05);
+    transition:
+      /* stylelint-disable-next-line */
+      transform motion(standard, productive) $duration-moderate-01,
+      opacity motion(standard, productive) $duration-moderate-01;
+    // Target browsers that do not yet support animation-timeline: scroll()
+    @supports not (animation-timeline: scroll()) {
+      &.#{$pkg-prefix}--page-header-title-breadcrumb-show {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      @media (prefers-reduced-motion: reduce) {
+        transform: translateY(0);
+        /* stylelint-disable-next-line */
+        transition: opacity motion(standard, productive) $duration-moderate-01;
+      }
+    }
+    // `animation-timeline: scroll()` only currently supported in Chromium based browsers
+    @supports (animation-timeline: scroll()) {
+      animation-direction: alternate;
+      animation-duration: 1ms; /* Firefox requires this to apply the animation */
+      animation-name: page-header-title-breadcrumb-animation;
+      animation-timeline: scroll(block nearest);
+
+      @media (prefers-reduced-motion: reduce) {
+        animation-name: page-header-title-breadcrumb-animation-reduced-motion;
+        transform: translateY(0);
+      }
+    }
+  }
 }

package/scss/components/Tearsheet/_tearsheet.scss

@@ -302,6 +302,12 @@ $motion-duration: $duration-moderate-02;
     margin: $spacing-04 0 0;
   }
 
+  // Unfortunately <Layer> creates an extra DOM element.  Try not to let it break
+  // existing layouts.
+  .#{$block-class}__layer {
+    display: contents;
+  }
+
   &.#{$block-class} .#{$block-class}__body {
     display: flex;
     flex-direction: row;

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

@@ -0,0 +1,6 @@
+//
+// 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.
+//

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

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './truncated-text';

package/scss/components/TruncatedText/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use './truncated-text';

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

@@ -0,0 +1,26 @@
+//
+// 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.
+//
+
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/theme' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--truncated-text;
+
+.#{$block-class} {
+  &__text-content {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    text-overflow: clip;
+  }
+
+  &__expand-toggle {
+    color: $link-primary;
+    cursor: pointer;
+  }
+}

package/scss/components/_index-with-carbon.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.
@@ -49,8 +49,9 @@
 @use './Datagrid/index-with-carbon' as *;
 @use './EditUpdateCards/index-with-carbon' as *;
 @use './SimpleHeader/index-with-carbon' as *;
-@use './BigNumbers/index-with-carbon' as *;
+@use './BigNumber/index-with-carbon' as *;
 @use './TruncatedList/index-with-carbon' as *;
+@use './TruncatedText/index-with-carbon' as *;
 @use './InterstitialScreen/index-with-carbon' as *;
 @use './Coachmark/index-with-carbon' as *;
 @use './CoachmarkBeacon/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2023
+// 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.
@@ -62,8 +62,9 @@
 @use './Guidebanner';
 @use './InlineTip';
 @use './NonLinearReading';
-@use './BigNumbers';
+@use './BigNumber';
 @use './TruncatedList';
+@use './TruncatedText';
 @use './InterstitialScreen';
 @use './DelimitedList';
 @use './Decorator';