@carbon/ibm-products 2.85.0 → 2.86.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.85.0",
+  "version": "2.86.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -45,17 +45,15 @@
     "build:carbon": "sass -q --quiet-deps --style=expanded --load-path ./node_modules --load-path ../../node_modules --load-path node_modules .storybook/carbon.scss:css/carbon.css",
     "build:css": "copyfiles '../ibm-products-styles/css/**/*.*' ./ -u 2",
     "build:scss": "copyfiles '../ibm-products-styles/scss/**/*.*' ./ -u 2",
-    "build:storybook": "yarn dlx cross-env \"NODE_OPTIONS=--max_old_space_size=8192\" && storybook build --quiet",
     "build:js-new": "node scripts/build",
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate/index.mjs",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
     "start": "run-s build:carbon storybook:start",
-    "storybook:build": "run-s build:carbon build:storybook",
+    "storybook:build": "yarn build:carbon && cross-env NODE_OPTIONS=--max_old_space_size=8192 storybook build --quiet",
     "storybook:start": "storybook dev ./public -p 3000",
     "telemetry-config": "ibmtelemetry-config generate --id 495342db-5046-4ecf-85ea-9ffceb6f8cdf --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)",
-    "test": "jest --colors",
-    "vrt": "percy storybook --verbose ./storybook-static"
+    "test": "jest --colors"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",
@@ -67,11 +65,9 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@carbon/styles": "^1.100.0",
+    "@carbon/styles": "^1.101.0",
     "@figma/code-connect": "^1.4.0",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
-    "@percy/cli": "^1.31.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",
@@ -84,7 +80,7 @@
     "@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.43.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.44.0",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
     "copyfiles": "^2.4.1",
@@ -92,7 +88,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.44.0",
+    "jest-config-ibm-cloud-cognitive": "^1.45.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all2": "^8.0.0",
@@ -113,7 +109,7 @@
     "@babel/runtime": "^7.26.10",
     "@carbon-labs/react-resizer": "^0.10.0",
     "@carbon/feature-flags": "^1.0.0",
-    "@carbon/ibm-products-styles": "^2.81.0",
+    "@carbon/ibm-products-styles": "^2.82.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.16.0",
     "@carbon/utilities-react": "0.19.0",
@@ -126,14 +122,14 @@
     "react-window": "^1.8.11"
   },
   "peerDependencies": {
-    "@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",
+    "@carbon/grid": "^11.51.0",
+    "@carbon/layout": "^11.49.0",
+    "@carbon/motion": "^11.42.0",
+    "@carbon/react": "^1.102.0",
+    "@carbon/themes": "^11.69.0",
+    "@carbon/type": "^11.55.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": "d5645922d967cd5c602f4c111bab8a6b5f633abe"
+  "gitHead": "b850469558c82e297e176a9ac502e9445b9b29c7"
 }

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -284,6 +284,9 @@ $block-size: 38.5rem;
       }
     }
   }
+  .#{$block-class}__notification:focus:before {
+    display: none;
+  }
   .#{$block-class}__notification-today:not(:first-of-type):before,
   .#{$block-class}__notification-yesterday:not(:first-of-type):before,
   .#{$block-class}__notification-previous:not(:first-of-type):before {

package/scss/components/OptionsTile/_options-tile.scss

@@ -24,23 +24,29 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 
 .#{$block-class} {
   position: relative;
+  display: flex;
+  justify-content: space-between;
   background-color: $layer;
   border-block-end: 1px solid $border-subtle;
 }
 
 .#{$block-class}__toggle-container {
   position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   inline-size: calc(
     #{$spacing-05} + 2rem + #{$spacing-05}
   ); // spacing + toggle width + spacing
 
   inset-block: 0;
   inset-inline-end: 0;
+  padding-inline-end: $spacing-05;
+  padding-inline-start: $spacing-05;
 }
 
 .#{$block-class}__toggle {
   position: absolute;
-  inset-inline-end: $spacing-05;
 }
 
 .#{$block-class}__toggle
@@ -53,19 +59,34 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
   @include visually-hidden;
 }
 
+.#{$block-class}__details {
+  display: inline-flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .#{$block-class}__header,
 .#{$block-class}__static-content {
   display: grid;
   box-sizing: border-box;
   align-items: center;
-  grid-template-columns: 3rem 1fr 2rem; // chevron container, heading, toggle width
+  grid-template-columns: 3rem 1fr 0; // chevron container, heading, toggle width
   padding-inline-end: $spacing-05;
 }
 
 .#{$block-class}__header {
+  flex-grow: 1;
   background-color: transparent;
   cursor: pointer;
+  inline-size: 100%;
+
   transition: background-color $duration-fast-01 motion(entrance, productive);
+
+  &--has-toggle {
+    inline-size: calc(
+      100% - (#{$spacing-05} + 2rem + #{$spacing-05})
+    ); // total width - toggle container width
+  }
 }
 
 .#{$block-class}__header::-webkit-details-marker {
@@ -76,6 +97,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
   background-color: $background-hover;
 }
 
+.#{$block-class}__header:has(.#{$block-class}__toggle-container:hover) {
+  background-color: transparent;
+}
+
 .#{$block-class}__header:focus {
   @include focus-outline('outline');
 }
@@ -135,9 +160,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 .#{$block-class}__summary-text {
   overflow: hidden;
   block-size: max-content;
-  // spacing-05 + toggle width
-  // stylelint-disable-next-line carbon/layout-use
-  padding-inline-end: calc(#{$spacing-05} + 2rem);
+  padding-inline-end: $spacing-05;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -150,8 +173,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 
 .#{$block-class}__content {
   padding-inline: $spacing-09 $spacing-05;
-  // spacing-05 + chevron size + spacing-05
-  // stylelint-disable-next-line carbon/layout-use
 }
 
 .#{$block-class}__content

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

@@ -787,22 +787,32 @@ $duration: 1000ms;
 
   .#{$block-class}__breadcrumb__actions {
     display: inline-flex;
+    flex: 1 1 0%;
     justify-content: flex-end;
-    inline-size: 100%;
+    min-inline-size: 75%;
+
+    @include breakpoint(md) {
+      min-inline-size: 40%;
+    }
   }
 
   .#{$block-class}__breadcrumb__content-actions {
-    inline-size: 100%;
     margin-inline-end: $spacing-04;
   }
 
   .#{$block-class}__breadcrumb-wrapper {
     display: inline-flex;
-    inline-size: 100%;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+
+    @include breakpoint(md) {
+      min-inline-size: 60%;
+    }
   }
 
   .#{$block-class}__breadcrumb-wrapper .#{$block-class}-breadcrumb-overflow {
-    inline-size: 100%;
+    flex: 1 1 0%;
+    min-inline-size: 0;
     .#{$carbon-prefix}--breadcrumb {
       display: flex;
     }

package/scss/components/SidePanel/_side-panel.scss

@@ -559,8 +559,6 @@ $clabs-prefix: resizer.$prefix;
           inline-size: 25%;
         }
       }
-
-      flex-direction: column;
     }
 
     .#{$action-set-block-class}__action-button.#{$action-set-block-class}__action-button {

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

@@ -5,5 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use './carbon-imports';
 @use './tearsheet';
+@use './tearsheet_next';
+@use './carbon-imports';

package/scss/components/Tearsheet/_index.scss

@@ -6,3 +6,4 @@
 //
 
 @use './tearsheet';
+@use './tearsheet_next';

package/scss/components/Tearsheet/_tearsheet.scss

@@ -25,8 +25,6 @@
 // ActionSet
 @use '../ActionSet/action-set';
 
-@use './tearsheet_next';
-
 $block-class: #{$pkg-prefix}--tearsheet;
 
 // viewport, capped at 500px to set an upper limit on the movement speed