@carbon/styles 1.110.1 → 1.111.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.110.1",
+  "version": "1.111.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.53.0",
-    "@carbon/feature-flags": "^1.4.0",
-    "@carbon/grid": "^11.57.0",
-    "@carbon/layout": "^11.54.0",
-    "@carbon/motion": "^11.47.0",
-    "@carbon/themes": "^11.76.1",
-    "@carbon/type": "^11.62.0",
+    "@carbon/colors": "^11.54.0",
+    "@carbon/feature-flags": "^1.5.0",
+    "@carbon/grid": "^11.58.0",
+    "@carbon/layout": "^11.55.0",
+    "@carbon/motion": "^11.48.0",
+    "@carbon/themes": "^11.77.0",
+    "@carbon/type": "^11.63.0",
     "@ibm/plex": "6.4.1",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "1110000e8374c35b7e040b09a7e292b2227f331d"
+  "gitHead": "5102bd860864c2580048183ffaf50d1ffd4400b5"
 }

package/scss/__tests__/layout-test.js

@@ -22,6 +22,7 @@ describe('@carbon/styles/scss/layout', () => {
 
       $_: get('api', (
         mixins: (
+          emit-layout-context-classes: meta.mixin-exists('emit-layout-context-classes', 'layout'),
           emit-layout-tokens: meta.mixin-exists('emit-layout-tokens', 'layout'),
           emit-layout-tokens-to-shadow-host: meta.mixin-exists('emit-layout-tokens-to-shadow-host', 'layout'),
         ),
@@ -31,6 +32,7 @@ describe('@carbon/styles/scss/layout', () => {
     const { value: api } = get('api');
     expect(api).toEqual({
       mixins: {
+        'emit-layout-context-classes': true,
         'emit-layout-tokens': true,
         'emit-layout-tokens-to-shadow-host': true,
       },
@@ -204,3 +206,90 @@ describe('@carbon/styles/scss/layout', () => {
     ).toBe(true);
   });
 });
+
+describe('@carbon/styles/scss/utilities/layout', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:meta';
+      @use '../utilities/layout';
+
+      $_: get('api', (
+        functions: (
+          size: meta.function-exists('size', 'layout'),
+          density: meta.function-exists('density', 'layout'),
+        ),
+        mixins: (
+          emit-layout-context-classes: meta.mixin-exists('emit-layout-context-classes', 'layout'),
+          emit-layout-tokens: meta.mixin-exists('emit-layout-tokens', 'layout'),
+          emit-layout-tokens-to-shadow-host: meta.mixin-exists('emit-layout-tokens-to-shadow-host', 'layout'),
+          redefine-tokens: meta.mixin-exists('redefine-tokens', 'layout'),
+          use: meta.mixin-exists('use', 'layout'),
+        ),
+      ));
+    `);
+
+    const { value: api } = get('api');
+    expect(api).toEqual({
+      functions: {
+        size: true,
+        density: true,
+      },
+      mixins: {
+        'emit-layout-context-classes': true,
+        'emit-layout-tokens': true,
+        'emit-layout-tokens-to-shadow-host': true,
+        'redefine-tokens': true,
+        use: true,
+      },
+    });
+  });
+
+  test('does not emit layout styles when used', async () => {
+    const { result } = await render(`
+      @use '../utilities/layout';
+    `);
+
+    const output = result.css.toString();
+    expect(output).not.toContain(':root');
+    expect(output).not.toContain('.cds--layout--size-sm');
+    expect(output).not.toContain('.cds--layout-constraint--size__default-md');
+  });
+
+  test('emit-layout-context-classes emits only context classes', async () => {
+    const { result } = await render(`
+      @use '../utilities/layout';
+
+      @include layout.emit-layout-context-classes();
+    `);
+
+    const output = result.css.toString();
+    expect(output).toContain('.cds--layout--size-sm');
+    expect(output).toContain('--cds-layout-size-height-context');
+    expect(output).not.toContain(':root');
+    expect(output).not.toContain('.cds--layout--density-normal');
+    expect(output).not.toContain('.cds--layout-constraint--size__default-md');
+  });
+
+  test('utility mixins and functions compile without emitting layout classes', async () => {
+    const { result } = await render(`
+      @use '../utilities/layout';
+
+      .test {
+        @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');
+        @include layout.use('density', $default: 'normal');
+        block-size: layout.size('height');
+        padding-inline: layout.density('padding-inline');
+      }
+    `);
+
+    const output = result.css.toString();
+    expect(output).toContain('--cds-layout-size-height-local');
+    expect(output).toContain('--cds-layout-density-padding-inline-local');
+    expect(output).toContain('block-size: var(--cds-layout-size-height-local)');
+    expect(output).toContain(
+      'padding-inline: var(--cds-layout-density-padding-inline-local)'
+    );
+    expect(output).not.toContain('.cds--layout--size-sm');
+    expect(output).not.toContain('.cds--layout-constraint--size__default-md');
+  });
+});

package/scss/_feature-flags.scss

@@ -10,6 +10,7 @@
     'enable-css-custom-properties': true,
     'enable-css-grid': true,
     'enable-v11-release': true,
+    'enable-v12-release': false,
     'enable-experimental-tile-contrast': false,
     'enable-tile-contrast': false,
     'enable-v12-tile-radio-icons': false,

package/scss/_layout.scss

@@ -5,76 +5,20 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@forward './utilities/layout';
+
 @use 'sass:map';
 @use 'sass:list';
 
 @use './config' as *;
 @use './utilities/custom-property';
-@use './utilities/convert';
-@use './spacing' as *;
-
-$layout-tokens: (
-  size: (
-    height: (
-      xs: convert.to-rem(24px),
-      sm: convert.to-rem(32px),
-      md: convert.to-rem(40px),
-      lg: convert.to-rem(48px),
-      xl: convert.to-rem(64px),
-      2xl: convert.to-rem(80px),
-    ),
-  ),
-  density: (
-    padding-inline: (
-      condensed: $spacing-03,
-      normal: $spacing-05,
-    ),
-  ),
-);
-
-@mixin emit-layout-tokens {
-  @each $group, $properties in $layout-tokens {
-    @each $property, $steps in $properties {
-      @each $step, $value in $steps {
-        @include custom-property.declaration(
-          'layout-#{$group}-#{$property}-#{$step}',
-          $value
-        );
-      }
-
-      // CSS max() doesn't accept '0' as a value without a unit
-      // stylelint-disable length-zero-no-unit
-      @include custom-property.declaration(
-        'layout-#{$group}-#{$property}-min',
-        0px
-      );
-      // stylelint-enable length-zero-no-unit
-
-      @include custom-property.declaration(
-        'layout-#{$group}-#{$property}-max',
-        999999999px
-      );
-    }
-  }
-}
+@use './utilities/layout' as *;
 
 @each $group, $properties in $layout-tokens {
+  @include emit-layout-context-classes($group);
+
   @each $property, $steps in $properties {
     @each $step, $value in $steps {
-      .#{$prefix}--layout--#{$group}-#{$step} {
-        @include custom-property.declaration(
-          'layout-#{$group}-#{$property}-context',
-          custom-property.get-var(
-            'layout-#{$group}-#{$property}-#{$step}',
-            $value
-          )
-        );
-        @include custom-property.declaration(
-          'layout-#{$group}-#{$property}',
-          custom-property.get-var('layout-#{$group}-#{$property}-context')
-        );
-      }
-
       .#{$prefix}--layout-constraint--#{$group}__default-#{$step} {
         @include custom-property.declaration(
           'layout-#{$group}-#{$property}',
@@ -103,29 +47,6 @@ $layout-tokens: (
   }
 }
 
-/// Emits layout context tokens for shadow host elements.
-@mixin emit-layout-tokens-to-shadow-host($host-selector) {
-  @each $group, $properties in $layout-tokens {
-    @each $property, $steps in $properties {
-      @each $step, $value in $steps {
-        :host(#{$host-selector}[#{$group}='#{$step}']) {
-          @include custom-property.declaration(
-            'layout-#{$group}-#{$property}-context',
-            custom-property.get-var(
-              'layout-#{$group}-#{$property}-#{$step}',
-              $value
-            )
-          );
-          @include custom-property.declaration(
-            'layout-#{$group}-#{$property}',
-            custom-property.get-var('layout-#{$group}-#{$property}-context')
-          );
-        }
-      }
-    }
-  }
-}
-
 :root {
   @include emit-layout-tokens();
 }

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -10,6 +10,8 @@
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../colors' as *;
+@use '../../utilities/focus-outline';
+@use '../../utilities/button-reset';
 @use './tokens' as *;
 
 /// icon-indicator styles
@@ -20,16 +22,20 @@
     @include type-style('body-compact-01');
 
     display: flex;
+    align-items: center;
     color: $text-secondary;
+    gap: $spacing-03;
+    line-height: unset;
   }
 
   .#{$prefix}--icon-indicator svg {
     align-self: center;
-    margin-inline-end: $spacing-03;
   }
 
   .#{$prefix}--icon-indicator--20 {
     @include type-style('body-compact-02');
+
+    line-height: unset;
   }
 
   .#{$prefix}--icon-indicator--failed {
@@ -87,4 +93,18 @@
   .#{$prefix}--icon-indicator--informative {
     fill: $status-blue;
   }
+
+  .#{$prefix}--icon-indicator__button {
+    @include button-reset.reset($width: false);
+
+    display: flex;
+
+    &:focus {
+      @include focus-outline.focus-outline;
+    }
+  }
+
+  .#{$prefix}--icon-indicator .#{$prefix}--definition-tooltip {
+    padding-block: $spacing-01;
+  }
 }

package/scss/components/menu/_menu.scss

@@ -206,6 +206,10 @@
     color: $text-on-color;
   }
 
+  .#{$prefix}--menu-item--danger:focus {
+    box-shadow: inset 0 0 0 convert.to-rem(3px) $background;
+  }
+
   // MenuItemDivider
 
   .#{$prefix}--menu-item-divider {

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -21,6 +21,7 @@
 @use '../../utilities/convert';
 @use '../../utilities/z-index' as *;
 @use '../../utilities/custom-property';
+@use '../../utilities/layout';
 
 /// Overflow menu styles
 /// @access public
@@ -28,6 +29,7 @@
 @mixin overflow-menu {
   .#{$prefix}--overflow-menu,
   .#{$prefix}--overflow-menu__trigger {
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
     @include button-reset.reset;
     @include component-reset.reset;
     @include focus-outline('reset');
@@ -36,10 +38,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    block-size: $spacing-08;
+    block-size: layout.size('height');
     cursor: pointer;
-    inline-size: $spacing-08;
-    min-block-size: $spacing-08;
+    inline-size: layout.size('height');
+    min-block-size: layout.size('height');
     transition:
       outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive);
@@ -57,23 +59,6 @@
     margin-block-start: 0;
   }
 
-  .#{$prefix}--overflow-menu--xs {
-    block-size: $spacing-06;
-    inline-size: $spacing-06;
-    min-block-size: $spacing-06;
-  }
-
-  .#{$prefix}--overflow-menu--sm {
-    block-size: $spacing-07;
-    inline-size: $spacing-07;
-    min-block-size: $spacing-07;
-  }
-
-  .#{$prefix}--overflow-menu--lg {
-    block-size: $spacing-09;
-    inline-size: $spacing-09;
-  }
-
   // Overwrite Icon Tooltip focus styles
   .#{$prefix}--overflow-menu__trigger.#{$prefix}--tooltip--a11y.#{$prefix}--tooltip__trigger:focus {
     @include focus-outline('outline');
@@ -109,6 +94,7 @@
   }
 
   .#{$prefix}--overflow-menu-options {
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
     @include component-reset.reset;
     @include box-shadow;
 
@@ -157,68 +143,32 @@
       .#{$prefix}--breadcrumb-menu-options
     )::after {
     block-size: convert.to-rem(3px);
-    inline-size: $spacing-08;
+    inline-size: layout.size('height');
     inset-block-start: convert.to-rem(-3px);
     inset-inline-start: 0;
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after {
     block-size: $spacing-03;
-    inline-size: $spacing-08;
+    inline-size: layout.size('height');
     inset-block-end: -$spacing-03;
     inset-inline-start: 0;
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after {
-    block-size: $spacing-08;
+    block-size: layout.size('height');
     inline-size: convert.to-rem(6px);
     inset-block-start: 0;
     inset-inline-end: convert.to-rem(-6px);
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after {
-    block-size: $spacing-08;
+    block-size: layout.size('height');
     inline-size: convert.to-rem(6px);
     inset-block-start: 0;
     inset-inline-start: convert.to-rem(-6px);
   }
 
-  .#{$prefix}--overflow-menu-options--xs.#{$prefix}--overflow-menu-options {
-    &[data-floating-menu-direction='bottom']::after,
-    &[data-floating-menu-direction='top']::after {
-      inline-size: $spacing-06;
-    }
-
-    &[data-floating-menu-direction='left']::after,
-    &[data-floating-menu-direction='right']::after {
-      block-size: $spacing-06;
-    }
-  }
-
-  .#{$prefix}--overflow-menu-options--sm.#{$prefix}--overflow-menu-options {
-    &[data-floating-menu-direction='bottom']::after,
-    &[data-floating-menu-direction='top']::after {
-      inline-size: $spacing-07;
-    }
-
-    &[data-floating-menu-direction='left']::after,
-    &[data-floating-menu-direction='right']::after {
-      block-size: $spacing-07;
-    }
-  }
-
-  .#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options {
-    &[data-floating-menu-direction='bottom']::after,
-    &[data-floating-menu-direction='top']::after {
-      inline-size: $spacing-09;
-    }
-
-    &[data-floating-menu-direction='left']::after,
-    &[data-floating-menu-direction='right']::after {
-      block-size: $spacing-09;
-    }
-  }
-
   .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after,
   .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
     inset-inline: auto 0;
@@ -244,26 +194,11 @@
     align-items: center;
     padding: 0;
     background-color: transparent;
-    block-size: $spacing-08;
+    block-size: layout.size('height');
     inline-size: 100%;
     transition: background-color $duration-fast-02 motion(entrance, productive);
   }
 
-  .#{$prefix}--overflow-menu-options--xs
-    .#{$prefix}--overflow-menu-options__option {
-    block-size: $spacing-06;
-  }
-
-  .#{$prefix}--overflow-menu-options--sm
-    .#{$prefix}--overflow-menu-options__option {
-    block-size: $spacing-07;
-  }
-
-  .#{$prefix}--overflow-menu-options--lg
-    .#{$prefix}--overflow-menu-options__option {
-    block-size: $spacing-09;
-  }
-
   .#{$prefix}--overflow-menu--divider {
     border-block-start: 1px solid $border-subtle;
   }
@@ -344,6 +279,11 @@
     }
   }
 
+  .#{$prefix}--overflow-menu-options__option--danger
+    .#{$prefix}--overflow-menu-options__btn:focus {
+    box-shadow: inset 0 0 0 convert.to-rem(3px) $background;
+  }
+
   .#{$prefix}--overflow-menu-options__option--disabled:hover {
     background-color: $layer;
     cursor: not-allowed;

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -10,6 +10,8 @@
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../colors' as *;
+@use '../../utilities/focus-outline';
+@use '../../utilities/button-reset';
 @use '../icon-indicator/tokens' as *;
 
 /// shape-indicator styles
@@ -20,16 +22,20 @@
     @include type-style('helper-text-01');
 
     display: flex;
+    align-items: center;
     color: $text-secondary;
+    gap: $spacing-03;
+    line-height: unset;
   }
 
   .#{$prefix}--shape-indicator svg {
     align-self: center;
-    margin-inline-end: $spacing-03;
   }
 
   .#{$prefix}--shape-indicator--14 {
     @include type-style('body-compact-01');
+
+    line-height: unset;
   }
 
   .#{$prefix}--shape-indicator--failed {
@@ -89,4 +95,18 @@
   .#{$prefix}--shape-indicator--draft {
     fill: $status-gray;
   }
+
+  .#{$prefix}--shape-indicator__button {
+    @include button-reset.reset($width: false);
+
+    display: flex;
+
+    &:focus {
+      @include focus-outline.focus-outline;
+    }
+  }
+
+  .#{$prefix}--shape-indicator .#{$prefix}--definition-tooltip {
+    padding-block: $spacing-01;
+  }
 }

package/scss/components/structured-list/_structured-list.scss

@@ -200,7 +200,7 @@
   }
 
   @if not(
-    enabled('enable-v12-structured-list-visible-icons') and
+    enabled('enable-v12-structured-list-visible-icons') or
       $enable-v12-structured-list-visible-icons
   )
   {

package/scss/utilities/_layout.scss

@@ -8,8 +8,28 @@
 @use 'sass:map';
 
 @use '../config';
-@use '../layout' as *;
 @use './custom-property';
+@use './convert';
+@use '../spacing' as *;
+
+$layout-tokens: (
+  size: (
+    height: (
+      xs: convert.to-rem(24px),
+      sm: convert.to-rem(32px),
+      md: convert.to-rem(40px),
+      lg: convert.to-rem(48px),
+      xl: convert.to-rem(64px),
+      2xl: convert.to-rem(80px),
+    ),
+  ),
+  density: (
+    padding-inline: (
+      condensed: $spacing-03,
+      normal: $spacing-05,
+    ),
+  ),
+);
 
 /// Enables the use of contextual layout tokens within a component. This mixin should be
 /// included on the outermost selector of the component.
@@ -113,3 +133,79 @@
 @function density($property) {
   @return -group('density', $property);
 }
+
+/// Emits layout context class rules for a layout group.
+@mixin emit-layout-context-classes($group: size) {
+  $properties: map.get($layout-tokens, $group);
+
+  @if not $properties {
+    @error 'Unknown layout group: #{$group}';
+  }
+
+  @each $property, $steps in $properties {
+    @each $step, $value in $steps {
+      .#{config.$prefix}--layout--#{$group}-#{$step} {
+        @include custom-property.declaration(
+          'layout-#{$group}-#{$property}-context',
+          custom-property.get-var(
+            'layout-#{$group}-#{$property}-#{$step}',
+            $value
+          )
+        );
+        @include custom-property.declaration(
+          'layout-#{$group}-#{$property}',
+          custom-property.get-var('layout-#{$group}-#{$property}-context')
+        );
+      }
+    }
+  }
+}
+
+@mixin emit-layout-tokens {
+  @each $group, $properties in $layout-tokens {
+    @each $property, $steps in $properties {
+      @each $step, $value in $steps {
+        @include custom-property.declaration(
+          'layout-#{$group}-#{$property}-#{$step}',
+          $value
+        );
+      }
+
+      // CSS max() doesn't accept '0' as a value without a unit
+      // stylelint-disable length-zero-no-unit
+      @include custom-property.declaration(
+        'layout-#{$group}-#{$property}-min',
+        0px
+      );
+      // stylelint-enable length-zero-no-unit
+
+      @include custom-property.declaration(
+        'layout-#{$group}-#{$property}-max',
+        999999999px
+      );
+    }
+  }
+}
+
+/// Emits layout context tokens for shadow host elements.
+@mixin emit-layout-tokens-to-shadow-host($host-selector) {
+  @each $group, $properties in $layout-tokens {
+    @each $property, $steps in $properties {
+      @each $step, $value in $steps {
+        :host(#{$host-selector}[#{$group}='#{$step}']) {
+          @include custom-property.declaration(
+            'layout-#{$group}-#{$property}-context',
+            custom-property.get-var(
+              'layout-#{$group}-#{$property}-#{$step}',
+              $value
+            )
+          );
+          @include custom-property.declaration(
+            'layout-#{$group}-#{$property}',
+            custom-property.get-var('layout-#{$group}-#{$property}-context')
+          );
+        }
+      }
+    }
+  }
+}