@carbon/styles 1.84.0-rc.0 → 1.85.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.84.0-rc.0",
+  "version": "1.85.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.35.0-rc.0",
+    "@carbon/colors": "^11.35.0",
     "@carbon/feature-flags": "^0.27.0",
-    "@carbon/grid": "^11.38.0-rc.0",
-    "@carbon/layout": "^11.36.0-rc.0",
-    "@carbon/motion": "^11.30.0-rc.0",
-    "@carbon/themes": "^11.55.0-rc.0",
-    "@carbon/type": "^11.42.0-rc.0",
+    "@carbon/grid": "^11.38.0",
+    "@carbon/layout": "^11.36.0",
+    "@carbon/motion": "^11.30.0",
+    "@carbon/themes": "^11.55.0",
+    "@carbon/type": "^11.42.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "0.0.3-alpha.0",
     "@ibm/plex-sans": "0.0.3-alpha.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "80ee492dc5079b90b8bca04f49497a90b60a366e"
+  "gitHead": "8d60133ddf9a05676c96a5763aedfe7280bb37a6"
 }

package/scss/components/data-table/_data-table.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 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.
@@ -44,6 +44,44 @@
     @include focus-outline('outline');
   }
 
+  //----------------------------------------------------------------------------
+  // Container, full table ai
+  //----------------------------------------------------------------------------
+  .#{$prefix}--data-table-container--ai-enabled {
+    position: relative;
+    // Allow for pseudo element to show for gradient border effect
+    padding: 1px;
+    border: none;
+  }
+
+  .#{$prefix}--data-table-container--ai-enabled::after {
+    position: absolute;
+    z-index: -1;
+    // Used for gradient border effect
+    background-image: linear-gradient(to top, $ai-border-end, $ai-border-start);
+    block-size: 100%;
+    content: '';
+    inline-size: 100%;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--data-table-container--ai-enabled tbody {
+    position: relative;
+  }
+
+  .#{$prefix}--data-table-container--ai-enabled tbody::before {
+    position: absolute;
+    block-size: 100%;
+    content: '';
+    inline-size: 100%;
+    inset: 0;
+    // Prevents the pseudo element overlay from obstructing click on elements below the overlay
+    pointer-events: none;
+
+    @include ai-table-gradient('full-table');
+  }
+
   //----------------------------------------------------------------------------
   // Table title text
   //----------------------------------------------------------------------------

package/scss/components/progress-bar/_progress-bar.scss

@@ -14,6 +14,7 @@
 @use '../../utilities/convert';
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/layout';
+@use '../../utilities/high-contrast-mode' as *;
 
 /// Progress Bar styles
 /// @access public
@@ -185,4 +186,21 @@
   .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__helper-text {
     padding-inline: layout.density('padding-inline');
   }
+
+  //High Contrast Mode
+  //Ensure ProgressBar is visible and animated in Windows HCM
+  @include high-contrast-mode {
+    .#{$prefix}--progress-bar__track {
+      //According to https://developer.mozilla.org/en-US/docs/Web/CSS/system-color, in HCM, the
+      //checkbox should be displayed using Canvas and CanvasText.
+      background-color: Canvas;
+      forced-color-adjust: none;
+      outline: 2px solid rgba(0, 0, 0, 0);
+      outline-offset: -2px;
+    }
+
+    .#{$prefix}--progress-bar__bar {
+      background-color: CanvasText;
+    }
+  }
 }

package/scss/components/text-area/_text-area.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 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.
@@ -106,6 +106,7 @@
   }
 
   .#{$prefix}--form-item {
+    position: relative;
     &:has(.#{$prefix}--text-area__wrapper--cols) {
       inline-size: fit-content;
     }
@@ -247,4 +248,8 @@
     justify-content: space-between;
     inline-size: 100%;
   }
+  .#{$prefix}--form-requirement {
+    position: absolute;
+    inset-block-start: 100%;
+  }
 }

package/scss/components/treeview/_treeview.scss

@@ -57,7 +57,10 @@
   .#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
     @include focus-outline('outline');
   }
-
+  .#{$prefix}--tree-node.#{$prefix}--tree-parent-node
+    > .#{$prefix}--tree-node__label {
+    inline-size: auto;
+  }
   .#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
     outline: none;
   }
@@ -110,10 +113,14 @@
   .#{$prefix}--tree-node__label {
     @include type-style('body-compact-01');
 
+    position: relative;
     display: flex;
+    box-sizing: border-box;
     flex: 1;
     align-items: center;
+    inline-size: 100%;
     min-block-size: convert.to-rem(32px);
+    padding-inline-end: 1rem;
 
     &:hover {
       background-color: $layer-hover-01;
@@ -154,6 +161,7 @@
   .#{$prefix}--tree-node__label__details {
     display: flex;
     align-items: center;
+    min-inline-size: 0;
   }
 
   .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle {
@@ -247,4 +255,51 @@
   .#{$prefix}--tree--xs .#{$prefix}--tree-parent-node__toggle {
     margin-block-start: 0;
   }
+  .#{$prefix}--tree-node__label__text {
+    @include type-style('body-compact-01');
+
+    display: block;
+    overflow: hidden;
+    line-height: 1.2;
+    padding-inline-start: convert.to-rem(4px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--tree-node__label .#{$prefix}--icon-tooltip {
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--tree-node__label
+    .#{$prefix}--icon-tooltip
+    .#{$prefix}--btn--icon-only {
+    padding: 0;
+    border: none;
+    background: transparent;
+    block-size: auto;
+    color: inherit;
+    inline-size: 100%;
+    min-block-size: unset;
+    text-align: start;
+  }
+
+  .#{$prefix}--tree-node__label
+    .#{$prefix}--icon-tooltip
+    .#{$prefix}--btn--icon-only
+    .#{$prefix}--tree-node__label__text {
+    color: inherit;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--tree-node__label .#{$prefix}--tooltip-content {
+    padding: 1rem;
+  }
+
+  .#{$prefix}--tree-node__label .#{$prefix}--popover-container {
+    inline-size: 100%;
+  }
+  .#{$prefix}--tooltip-trigger__wrapper .#{$prefix}--btn--ghost:focus {
+    box-shadow: none;
+    outline: 2px solid $focus;
+  }
 }

package/scss/utilities/_ai-gradient.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2023
+// Copyright IBM Corp. 2023, 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.
@@ -55,6 +55,13 @@
         transparent 50%
       ),
       theme.$layer-selected;
+  } @else if $type == 'full-table' {
+    background: linear-gradient(
+      to top,
+      theme.$ai-aura-start 0%,
+      theme.$ai-aura-end 50%,
+      transparent 50%
+    );
   } @else {
     background: linear-gradient(
       to right,