@carbon/styles 1.76.0-rc.0 → 1.77.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.76.0-rc.0",
+  "version": "1.77.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.30.0-rc.0",
+    "@carbon/colors": "^11.30.0",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/grid": "^11.32.0-rc.0",
-    "@carbon/layout": "^11.30.0-rc.0",
-    "@carbon/motion": "^11.25.0-rc.0",
-    "@carbon/themes": "^11.47.0-rc.0",
-    "@carbon/type": "^11.36.0-rc.0",
+    "@carbon/grid": "^11.32.0",
+    "@carbon/layout": "^11.30.0",
+    "@carbon/motion": "^11.25.0",
+    "@carbon/themes": "^11.48.0-rc.0",
+    "@carbon/type": "^11.36.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": "faf649817d3be3e8e258aba866e14e9378b5c68e"
+  "gitHead": "9134345acdba15a2406b4a7df9781bccf0a32ab6"
 }

package/scss/components/_index.scss

@@ -8,6 +8,7 @@
 @use 'accordion';
 @use 'ai-label';
 @use 'aspect-ratio';
+@use 'badge-indicator';
 @use 'breadcrumb';
 @use 'button';
 @use 'chat-button';
@@ -59,6 +60,7 @@
 @use 'radio-button';
 @use 'search';
 @use 'select';
+@use 'shape-indicator';
 @use 'skeleton-styles';
 @use 'slider';
 @use 'slug';

package/scss/components/badge-indicator/_badge-indicator.scss

@@ -0,0 +1,48 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Badge indicator
+//-----------------------------
+
+@use '../../config' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../type';
+@use '../../utilities/component-reset';
+@use '../../utilities/convert';
+
+/// Badge indicator styles
+/// @access public
+/// @group badge-indicator
+@mixin badge-indicator {
+  .#{$prefix}--badge-indicator {
+    @include type.type-style('helper-text-01');
+
+    position: absolute;
+    display: flex;
+    padding: 0 $spacing-02 $spacing-01;
+    border-radius: 100px;
+    background: $support-error;
+    color: $text-on-color;
+
+    inset-block-start: 0;
+    inset-inline-end: 0;
+
+    margin-block-start: $spacing-03;
+    margin-inline-end: $spacing-03;
+
+    max-block-size: $spacing-05;
+    min-block-size: $spacing-03;
+    min-inline-size: $spacing-03;
+  }
+
+  .#{$prefix}--badge-indicator--count {
+    margin-block-start: $spacing-02;
+    margin-inline-end: $spacing-02;
+  }
+}

package/scss/components/badge-indicator/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'badge-indicator';
+@use 'badge-indicator';
+
+@include badge-indicator.badge-indicator;

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -30,6 +30,14 @@
     }
   }
 
+  .#{$prefix}--breadcrumb--sm {
+    @include type-style('label-01');
+  }
+
+  .#{$prefix}--breadcrumb .#{$prefix}--link {
+    font: inherit;
+  }
+
   .#{$prefix}--breadcrumb-item {
     position: relative;
     display: flex;
@@ -37,6 +45,10 @@
     margin-inline-end: $spacing-03;
   }
 
+  .#{$prefix}--breadcrumb--sm .#{$prefix}--breadcrumb-item {
+    margin-inline-end: $spacing-02;
+  }
+
   .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited {
     color: $link-primary;
 
@@ -51,6 +63,10 @@
     margin-inline-start: $spacing-03;
   }
 
+  .#{$prefix}--breadcrumb--sm .#{$prefix}--breadcrumb-item::after {
+    margin-inline-start: $spacing-02;
+  }
+
   .#{$prefix}--breadcrumb--no-trailing-slash
     .#{$prefix}--breadcrumb-item:last-child::after {
     content: '';
@@ -107,6 +123,12 @@
     }
   }
 
+  .#{$prefix}--breadcrumb--sm
+    .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu {
+    inline-size: $spacing-05;
+  }
+
   .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu:hover::after {
     opacity: 1;
   }
@@ -117,7 +139,9 @@
     box-shadow: none;
   }
 
-  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu__icon {
+  .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu
+    .#{$prefix}--overflow-menu__icon {
     position: relative;
     fill: $link-primary;
     transform: translateY(4px);

package/scss/components/button/_button.scss

@@ -409,6 +409,13 @@
     box-shadow: none;
   }
 
+  // badge indicator
+
+  .#{$prefix}--btn--sm .#{$prefix}--badge-indicator {
+    margin-block-start: $spacing-02;
+    margin-inline-end: $spacing-02;
+  }
+
   // Windows HCM fix
   .#{$prefix}--btn:focus {
     @include high-contrast-mode('focus');

package/scss/components/fluid-text-area/_fluid-text-area.scss

@@ -57,6 +57,12 @@
       inset-inline-end: $spacing-05;
       inset-inline-start: auto;
     }
+    .#{$prefix}--toggletip-button {
+      padding: $spacing-02;
+      margin-inline-start: -$spacing-02;
+      min-block-size: $spacing-06;
+      min-inline-size: $spacing-06;
+    }
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--label::-webkit-scrollbar,

package/scss/components/icon-indicator/_tokens.scss

@@ -60,6 +60,29 @@ $status-orange: (
   ),
 ) !default;
 
+// status-orange-outline
+$status-orange-outline: (
+  fallback: map.get(status.$status-orange-outline, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-orange-outline, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-orange-outline, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-orange, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-orange, g-100),
+    ),
+  ),
+) !default;
+
 // status-yellow
 $status-yellow: (
   fallback: map.get(status.$status-yellow, white-theme),
@@ -83,6 +106,29 @@ $status-yellow: (
   ),
 ) !default;
 
+// status-yellow-outline
+$status-yellow-outline: (
+  fallback: map.get(status.$status-yellow-outline, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-yellow-outline, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-yellow-outline, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-yellow, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-yellow, g-100),
+    ),
+  ),
+) !default;
+
 // status-green
 $status-green: (
   fallback: map.get(status.$status-green, white-theme),
@@ -179,7 +225,9 @@ $status-gray: (
 $status-tokens: (
   status-red: $status-red,
   status-orange: $status-orange,
+  status-orange-outline: $status-orange-outline,
   status-yellow: $status-yellow,
+  status-yellow-outline: $status-yellow-outline,
   status-green: $status-green,
   status-blue: $status-blue,
   status-purple: $status-purple,
@@ -189,7 +237,15 @@ $status-tokens: (
 // Generate CSS custom properties for each token
 $status-red: component-tokens.get-var($status-red, 'status-red');
 $status-orange: component-tokens.get-var($status-orange, 'status-orange');
+$status-orange-outline: component-tokens.get-var(
+  $status-orange-outline,
+  'status-orange-outline'
+);
 $status-yellow: component-tokens.get-var($status-yellow, 'status-yellow');
+$status-yellow-outline: component-tokens.get-var(
+  $status-yellow-outline,
+  'status-yellow-outline'
+);
 $status-green: component-tokens.get-var($status-green, 'status-green');
 $status-blue: component-tokens.get-var($status-blue, 'status-blue');
 $status-purple: component-tokens.get-var($status-purple, 'status-purple');

package/scss/components/popover/_popover.scss

@@ -266,6 +266,35 @@ $popover-caret-height: custom-property.get-var(
     transform: translate($popover-offset, calc(100% + $popover-offset));
   }
 
+  .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--auto-align)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--auto-align)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+  }
+
+  .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--auto-align)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
+    inset-block-end: 0;
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+    transform: translate(50%, calc($popover-offset));
+  }
+
+  .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--auto-align)
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
+    inset-block-end: 0;
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+    transform: translate(50%, calc(-1 * $popover-offset));
+  }
+
   [dir='rtl']
     .#{$prefix}--popover--bottom-right:not(.#{$prefix}--popover--auto-align)
     > .#{$prefix}--popover

package/scss/components/shape-indicator/_index.scss

@@ -0,0 +1,12 @@
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'shape-indicator';
+
+@use 'shape-indicator';
+
+@include shape-indicator.shape-indicator;

package/scss/components/shape-indicator/_shape-indicator.scss

@@ -0,0 +1,92 @@
+//
+// Copyright IBM Corp. 2016, 2023
+//
+// 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 '../../theme' as *;
+@use '../../type' as *;
+@use '../../config' as *;
+@use '../../spacing' as *;
+@use '../../colors' as *;
+@use '../icon-indicator/tokens' as *;
+
+/// shape-indicator styles
+/// @access public
+/// @group tag
+@mixin shape-indicator {
+  .#{$prefix}--shape-indicator {
+    @include type-style('helper-text-01');
+
+    display: flex;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--shape-indicator svg {
+    align-self: center;
+    margin-inline-end: $spacing-03;
+  }
+
+  .#{$prefix}--shape-indicator--14 {
+    @include type-style('body-compact-01');
+  }
+
+  .#{$prefix}--shape-indicator--failed {
+    fill: $status-red;
+  }
+
+  .#{$prefix}--shape-indicator--critical {
+    fill: $status-red;
+  }
+
+  .#{$prefix}--shape-indicator--high {
+    fill: $status-red;
+  }
+
+  .#{$prefix}--shape-indicator--medium {
+    fill: $status-orange;
+
+    path:first-of-type {
+      fill: $status-orange-outline;
+    }
+  }
+
+  .#{$prefix}--shape-indicator--low {
+    fill: $status-yellow;
+
+    path:nth-of-type(2) {
+      fill: $status-yellow-outline;
+    }
+  }
+
+  .#{$prefix}--shape-indicator--cautious {
+    fill: $status-yellow;
+
+    path:first-of-type {
+      fill: $status-yellow-outline;
+    }
+  }
+
+  .#{$prefix}--shape-indicator--undefined {
+    fill: $status-purple;
+  }
+
+  .#{$prefix}--shape-indicator--stable {
+    fill: $status-green;
+  }
+
+  .#{$prefix}--shape-indicator--informative {
+    fill: $status-blue;
+  }
+
+  .#{$prefix}--shape-indicator--incomplete {
+    path:nth-of-type(2) {
+      fill: $status-blue;
+    }
+  }
+
+  .#{$prefix}--shape-indicator--draft {
+    fill: $status-gray;
+  }
+}

package/scss/components/tabs/_tabs.scss

@@ -315,6 +315,7 @@
     .#{$prefix}--tabs__nav-item {
       @include reset;
 
+      position: relative;
       display: flex;
       flex: 1 0 auto;
       padding: 0;
@@ -547,6 +548,14 @@
       }
     }
 
+    .#{$prefix}--tabs__nav-item--icon-only:not(
+        .#{$prefix}--tabs__nav-item--icon-only__20
+      )
+      .#{$prefix}--badge-indicator {
+      margin-block-start: $spacing-02;
+      margin-inline-end: $spacing-02;
+    }
+
     //-----------------------------
     // Item Hover
     //-----------------------------

package/scss/components/tooltip/_tooltip.scss

@@ -35,7 +35,6 @@ $tooltip-padding-inline: custom-property.get-var(
     @include type.type-style('body-01');
 
     padding: $tooltip-padding-block $tooltip-padding-inline;
-    color: theme.$text-inverse;
     max-inline-size: convert.to-rem(288px);
   }
 }
@@ -64,6 +63,8 @@ $tooltip-padding-inline: custom-property.get-var(
 
     padding: convert.to-rem(8px) convert.to-rem(16px);
     max-inline-size: convert.to-rem(176px);
+    text-wrap: auto;
+    word-break: break-word;
   }
 }
 

package/scss/components/treeview/_treeview.scss

@@ -163,11 +163,9 @@
   .#{$prefix}--tree-parent-node__toggle {
     display: flex;
     align-items: center;
-    align-self: flex-start;
     border: 0;
     block-size: convert.to-rem(24px);
     inline-size: convert.to-rem(24px);
-    margin-block-start: $spacing-02;
     margin-inline: -$spacing-02 $spacing-02;
     padding-inline-start: $spacing-02;
 
@@ -191,9 +189,7 @@
   }
 
   .#{$prefix}--tree-node__icon {
-    align-self: flex-start;
     fill: $icon-secondary;
-    margin-block-start: convert.to-rem(1px);
     margin-inline: $spacing-03 $spacing-03;
     min-block-size: 1rem;
     min-inline-size: 1rem;