@carbon/styles 1.76.0 → 1.77.0

package/scss/__tests__/type-test.js

@@ -130,8 +130,8 @@ describe('@carbon/styles/scss/type', () => {
     const { stylesheet } = css.parse(result.css.toString());
     const [rule] = stylesheet.rules;
     for (const declaration of rule.declarations) {
-      expect(declaration.property).toEqual(
-        expect.stringContaining('--custom-')
+      expect(declaration.value).toEqual(
+        expect.stringContaining('var(--custom-')
       );
     }
   });

package/scss/_config.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2023
+// Copyright IBM Corp. 2018, 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.
@@ -18,11 +18,11 @@ $css--body: true !default;
 /// @group config
 $css--font-face: true !default;
 
-/// If true, emit the custom type properties in in :root
+/// If true, emit the custom type properties in :root
 /// @access public
 /// @type Bool
 /// @group config
-$css--emit-type-custom-props: true !default;
+$css--emit-type-custom-props: false !default;
 
 /// If true, include reset CSS
 /// @access public

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/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/menu/_menu.scss

@@ -98,14 +98,6 @@
     }
   }
 
-  .#{$prefix}--menu-item__icon {
-    display: none;
-  }
-
-  .#{$prefix}--menu--with-icons .#{$prefix}--menu-item__icon {
-    display: flex;
-  }
-
   .#{$prefix}--menu-item__label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -121,18 +113,74 @@
     @include component-reset.reset;
   }
 
+  .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu-item__selection-icon {
+    display: none;
+  }
+
   .#{$prefix}--menu--with-icons > .#{$prefix}--menu-item,
   .#{$prefix}--menu--with-icons
     > .#{$prefix}--menu-item-group
     > ul
     > .#{$prefix}--menu-item,
   .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-selectable-items > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-selectable-items
     > .#{$prefix}--menu-item-radio-group
     > ul
     > .#{$prefix}--menu-item {
     grid-template-columns: 1rem 1fr max-content;
   }
 
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__selection-icon,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__selection-icon,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__selection-icon {
+    display: flex;
+  }
+
+  .#{$prefix}--menu--with-icons.#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-icons.#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-icons.#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item {
+    grid-template-columns: 1rem 1rem 1fr max-content;
+  }
+
   .#{$prefix}--menu-item--disabled {
     color: $text-disabled;
     cursor: not-allowed;

package/scss/components/menu-button/_menu-button.scss

@@ -30,19 +30,4 @@
   .#{$prefix}--menu-button__trigger--open svg {
     transform: rotate(180deg);
   }
-
-  // Menu alignment classes
-  $popover-offset: custom-property.get-var('popover-offset', 3rem);
-
-  .#{$prefix}--menu-button__top {
-    transform: translate(0, calc(-100% - $popover-offset));
-  }
-
-  .#{$prefix}--menu-button__top-start {
-    transform: translate(0, calc(-100% - $popover-offset));
-  }
-
-  .#{$prefix}--menu-button__top-end {
-    transform: translate(0, calc(-100% - $popover-offset));
-  }
 }

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;