@carbon/styles 1.33.1 → 1.34.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.33.1",
+  "version": "1.34.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -37,13 +37,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.17.1",
+    "@carbon/colors": "^11.18.0",
     "@carbon/feature-flags": "^0.15.0",
-    "@carbon/grid": "^11.16.1",
-    "@carbon/layout": "^11.16.1",
-    "@carbon/motion": "^11.13.1",
-    "@carbon/themes": "^11.21.1",
-    "@carbon/type": "^11.20.1",
+    "@carbon/grid": "^11.17.0",
+    "@carbon/layout": "^11.17.0",
+    "@carbon/motion": "^11.14.0",
+    "@carbon/themes": "^11.22.0",
+    "@carbon/type": "^11.21.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -64,5 +64,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "033a51ca9c37d409f96fd14ef723ca053585ff2d"
+  "gitHead": "42cf1b925449af74bf39204135987584e1f54d73"
 }

package/scss/components/accordion/_accordion.scss

@@ -11,6 +11,7 @@
 @use '../../theme' as *;
 @use '../../spacing' as *;
 @use '../../type' as *;
+@use '../../layer' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -5,18 +5,21 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../overflow-menu';
 @use '../../config' as *;
 @use '../../breakpoint' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../layer' as *;
+@use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/skeleton' as *;
 
 @mixin breadcrumb {
   .#{$prefix}--breadcrumb {
-    @include reset;
+    @include component-reset.reset;
     @include type-style('body-compact-01');
 
     display: inline;

package/scss/components/button/_button.scss

@@ -5,19 +5,21 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../config' as *;
+@use 'tokens' as *;
 @use 'vars' as *;
 @use 'mixins' as *;
+@use '../tooltip';
+@use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../layer' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/layout';
-@use 'tokens' as *;
 
 @mixin button {
   .#{$prefix}--btn {
@@ -300,6 +302,11 @@
   //expressive styles
   .#{$prefix}--btn--expressive {
     @include type-style('body-compact-02');
+
+    padding-block: min(
+      calc((layout.size('height') - var(--temp-expressive-1lh)) / 2 - rem(1px)),
+      var(--temp-padding-block-max)
+    );
   }
 
   .#{$prefix}--btn--icon-only.#{$prefix}--btn--expressive {

package/scss/components/button/_mixins.scss

@@ -29,6 +29,12 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
         map.get($body-compact-01, line-height)
       )} * 1em
   );
+  --temp-expressive-1lh: (
+    #{custom-property.get-var(
+        'body-compact-02-line-height',
+        map.get($body-compact-02, line-height)
+      )} * 1em
+  );
   // -1px to compensate for border width
   --temp-padding-block-max: calc(
     (#{custom-property.get-var('layout-size-height-lg')} - var(--temp-1lh)) / 2 -
@@ -42,7 +48,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   display: inline-flex;
   width: max-content;
   max-width: rem(320px);
-  height: layout.size('height');
+  min-height: layout.size('height');
   flex-shrink: 0;
   justify-content: space-between;
   // Fix to remove added margins on buttons in safari (see #5155)
@@ -51,7 +57,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   cursor: pointer;
   outline: none;
   // -1px to compensate for border width
-  padding-block-start: min(
+  padding-block: min(
     calc((layout.size('height') - var(--temp-1lh)) / 2 - rem(1px)),
     var(--temp-padding-block-max)
   );

package/scss/components/checkbox/_checkbox.scss

@@ -10,13 +10,14 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/visually-hidden' as *;
 
 @mixin checkbox {
   .#{$prefix}--checkbox-group {
-    @include reset;
+    @include component-reset.reset;
   }
 
   // Spacing between checkboxes

package/scss/components/code-snippet/_code-snippet.scss

@@ -5,20 +5,22 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'mixins' as *;
+@use '../copy-button';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../copy-button';
+@use '../../layer' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/keyframes' as *;
+@use '../../utilities/layout' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/tooltip' as *;
 @use '../../utilities/z-index' as *;
-@use 'mixins' as *;
 
 /// @type Color
 /// @access public
@@ -304,6 +306,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--inline.#{$prefix}--btn {
     width: initial;
     height: 1.25rem;
+    min-height: 1.25rem;
     padding-inline: 0;
   }
 
@@ -332,6 +335,7 @@ $copy-btn-feedback: $background-inverse !default;
     right: 0;
     bottom: 0;
     display: inline-flex;
+    height: rem(32px);
     align-items: center;
 
     padding: $spacing-03 $spacing-05;

package/scss/components/combo-button/_combo-button.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../button';
+@use '../menu';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../utilities/convert' as *;

package/scss/components/contained-list/_contained-list.scss

@@ -7,6 +7,8 @@
 
 @use 'sass:map';
 
+@use '../button';
+@use '../overflow-menu';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;

package/scss/components/content-switcher/_content-switcher.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../button';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;

package/scss/components/copy-button/_copy-button.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../button';
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
@@ -83,6 +84,10 @@
     }
   }
 
+  .#{$prefix}--copy-btn svg {
+    fill: $icon-primary;
+  }
+
   // Needs to come after reset so hidden text is not set to font-size: 100%
   .#{$prefix}--copy {
     font-size: 0;

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

@@ -7,12 +7,15 @@
 
 @use 'mixins' as *;
 @use 'vars' as *;
+@use '../checkbox';
+@use '../radio-button';
 @use '../../config' as *;
 @use '../../breakpoint' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../layer' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;

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

@@ -5,6 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../../button';
+@use '../../overflow-menu';
+@use '../../search';
 @use '../../../config' as *;
 @use '../../../motion' as *;
 @use '../../../spacing' as *;

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

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../action';
 @use '../../../config' as *;
 @use '../../../motion' as *;
 @use '../../../spacing' as *;

package/scss/components/date-picker/_date-picker.scss

@@ -5,20 +5,20 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'flatpickr' as *;
+@use '../form';
 @use '../../colors' as *;
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../theme' as *;
 @use '../../spacing' as *;
 @use '../../type' as *;
-@use '../form/form';
 @use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/placeholder-colors' as *;
 @use '../../utilities/skeleton' as *;
-@use 'flatpickr' as *;
 
 /// Date picker styles
 /// @access public

package/scss/components/dropdown/_dropdown.scss

@@ -7,6 +7,7 @@
 
 @use '../list-box';
 @use '../../config' as *;
+@use '../../layer' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;

package/scss/components/fluid-multiselect/_fluid-multiselect.scss

@@ -14,7 +14,7 @@
 @use '../../theme' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
-@use '../dropdown';
+@use '../multiselect';
 @use '../fluid-list-box';
 @use '../fluid-combo-box';
 

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

@@ -8,6 +8,7 @@
 //-----------------------------
 // Fluid Text Area
 //-----------------------------
+@use '../text-area';
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;

package/scss/components/form/_form.scss

@@ -9,6 +9,8 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../layer' as *;
+@use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
@@ -32,7 +34,7 @@ $input-label-weight: 400 !default;
   }
 
   .#{$prefix}--fieldset {
-    @include reset;
+    @include component-reset.reset;
   }
 
   .#{$prefix}--form-item {

package/scss/components/inline-loading/_inline-loading.scss

@@ -6,6 +6,7 @@
 //
 
 @use 'keyframes';
+@use '../loading';
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;

package/scss/components/list-box/_list-box.scss

@@ -15,8 +15,10 @@
 @use '../../type' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
+@use '../../layer' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/button-reset';
+@use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
@@ -649,6 +651,7 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box__menu-item__option {
+    @include component-reset.reset;
     @include focus-outline('reset');
 
     display: block;

package/scss/components/loading/_loading.scss

@@ -5,16 +5,17 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'vars' as *;
+@use 'functions' as *;
+@use 'animation';
 @use '../../config' as *;
+@use '../../layer' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
 @use '../../utilities/z-index' as *;
-@use 'vars' as *;
-@use 'functions' as *;
-@use 'animation';
 
 /// Loading styles
 /// @access private

package/scss/components/menu/_menu.scss

@@ -5,16 +5,18 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../button/tokens' as button-tokens;
 @use '../../config' as *;
+@use '../../layer' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../button/tokens' as button-tokens;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/z-index' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/component-reset';
 
 /// Menu styles
 /// @access public
@@ -23,6 +25,7 @@
   // Menu
 
   .#{$prefix}--menu {
+    @include component-reset.reset;
     @include box-shadow;
 
     position: fixed;
@@ -110,6 +113,11 @@
     display: flex;
   }
 
+  .#{$prefix}--menu-item-group > ul,
+  .#{$prefix}--menu-item-radio-group > ul {
+    @include component-reset.reset;
+  }
+
   .#{$prefix}--menu--with-icons > .#{$prefix}--menu-item,
   .#{$prefix}--menu--with-icons
     > .#{$prefix}--menu-item-group

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

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../button';
+@use '../menu';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../utilities/convert' as *;

package/scss/components/modal/_modal.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../button';
 @use '../../config' as *;
 @use '../../breakpoint' as *;
 @use '../../motion' as *;
@@ -12,13 +13,11 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/convert' as *;
-@use '../../utilities/component-reset' as *;
+@use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/z-index' as *;
 
-@use '../button';
-
 /// Modal styles
 /// @access public
 /// @group modal
@@ -227,6 +226,7 @@
   }
 
   .#{$prefix}--modal-header__label {
+    @include component-reset.reset;
     @include type-style('label-01');
 
     margin-bottom: $spacing-02;
@@ -234,6 +234,7 @@
   }
 
   .#{$prefix}--modal-header__heading {
+    @include component-reset.reset;
     @include type-style('heading-03');
 
     // padding should take into account the left and right padding of modal container

package/scss/components/multiselect/_multiselect.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../checkbox';
 @use '../list-box';
 @use '../../config' as *;
 @use '../../motion' as *;
@@ -28,6 +29,10 @@
     @include focus-outline('reset');
   }
 
+  .#{$prefix}--multi-select--filterable .#{$prefix}--list-box__field {
+    padding: 0;
+  }
+
   .#{$prefix}--multi-select .#{$prefix}--tag {
     min-width: auto;
     margin: 0 $spacing-03 0 $spacing-05;

package/scss/components/notification/_actionable-notification.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 @use 'mixins' as *;
+@use '../button';
 @use '../../breakpoint' as *;
 @use '../../colors' as *;
 @use '../../config' as *;

package/scss/components/number-input/_number-input.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../form';
 @use '../../colors' as *;
 @use '../../config' as *;
 @use '../../motion' as *;

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

@@ -5,14 +5,17 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../button' as button;
+@use '../tooltip';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../button/tokens' as button;
+@use '../../layer' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/button-reset';
+@use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
@@ -25,13 +28,14 @@
   .#{$prefix}--overflow-menu,
   .#{$prefix}--overflow-menu__trigger {
     @include button-reset.reset;
-    @include reset;
+    @include component-reset.reset;
     @include focus-outline('reset');
 
     position: relative;
     display: flex;
     width: rem(40px);
     height: rem(40px);
+    min-height: rem(40px);
     align-items: center;
     justify-content: center;
     cursor: pointer;
@@ -96,7 +100,7 @@
   }
 
   .#{$prefix}--overflow-menu-options {
-    @include reset;
+    @include component-reset.reset;
     @include box-shadow;
 
     position: absolute;
@@ -215,7 +219,7 @@
   }
 
   .#{$prefix}--overflow-menu-options__option {
-    @include reset;
+    @include component-reset.reset;
 
     display: flex;
     width: 100%;

package/scss/components/pagination/_pagination.scss

@@ -5,6 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../button';
+@use '../select';
+@use '../../layer' as *;
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
@@ -15,7 +18,6 @@
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
-@use '../select';
 
 /// Pagination styles
 /// @access public

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'mixins' as *;
+@use '../button';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -15,7 +17,6 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
-@use 'mixins' as *;
 
 /// Pagination nav base styles
 /// @access public

package/scss/components/popover/_popover.scss

@@ -6,9 +6,11 @@
 //
 
 @use '../../config' as *;
+@use '../../layer' as *;
 @use '../../theme';
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/button-reset';
+@use '../../utilities/component-reset';
 @use '../../utilities/custom-property';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
@@ -117,6 +119,8 @@ $popover-caret-height: custom-property.get-var(
 
   // Popover content
   .#{$prefix}--popover-content {
+    @include component-reset.reset;
+
     position: absolute;
     z-index: z('floating');
     display: none;
@@ -388,6 +392,10 @@ $popover-caret-height: custom-property.get-var(
     border-radius: 0;
   }
 
+  .#{$prefix}--popover--tab-tip .#{$prefix}--popover {
+    will-change: filter;
+  }
+
   .#{$prefix}--popover--tab-tip__button {
     @include button-reset.reset;
 

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

@@ -6,6 +6,7 @@
 //
 
 @use '../../config' as *;
+@use '../../layer' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;