@carbon/styles 1.32.0 → 1.33.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -31,14 +31,19 @@
   "peerDependencies": {
     "sass": "^1.33.0"
   },
+  "peerDependenciesMeta": {
+    "sass": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@carbon/colors": "^11.16.0",
+    "@carbon/colors": "^11.17.0",
     "@carbon/feature-flags": "^0.15.0",
-    "@carbon/grid": "^11.15.0",
-    "@carbon/layout": "^11.15.0",
-    "@carbon/motion": "^11.12.0",
-    "@carbon/themes": "^11.20.0",
-    "@carbon/type": "^11.19.0",
+    "@carbon/grid": "^11.16.0",
+    "@carbon/layout": "^11.16.0",
+    "@carbon/motion": "^11.13.0",
+    "@carbon/themes": "^11.21.0",
+    "@carbon/type": "^11.20.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -59,5 +64,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "507ddae3074272a3be1ff98b3940532d74788d3c"
+  "gitHead": "3a58934eed5588f5e8ee1facbb09584a41adc089"
 }

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 {

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

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 *;
@@ -65,8 +66,8 @@
 
   //counter
   .#{$prefix}--text-area--fluid div.#{$prefix}--label {
-    right: 1rem;
-    left: initial;
+    display: flex;
+    justify-content: flex-end;
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area {

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 *;
@@ -510,6 +512,7 @@ $list-box-menu-width: rem(300px);
     z-index: z('dropdown');
     right: 0;
     left: 0;
+    display: none;
     width: $list-box-width;
     background-color: $layer;
     overflow-y: auto;
@@ -521,11 +524,12 @@ $list-box-menu-width: rem(300px);
     }
   }
 
-  .#{$prefix}--list-box
-    .#{$prefix}--list-box__field[aria-expanded='false']
-    + .#{$prefix}--list-box__menu {
-    display: none;
-    max-height: 0;
+  .#{$prefix}--list-box .#{$prefix}--list-box__field[aria-expanded='false'] {
+    .#{$prefix}--list-box__menu {
+      display: none;
+      max-height: 0;
+      visibility: hidden;
+    }
   }
 
   .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
@@ -647,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;
@@ -768,8 +773,8 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box__menu-item--highlighted {
-    border-color: transparent;
-    background-color: $layer-selected;
+    @include focus-outline('outline');
+
     color: $text-primary;
   }
 

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,7 +28,7 @@
   .#{$prefix}--overflow-menu,
   .#{$prefix}--overflow-menu__trigger {
     @include button-reset.reset;
-    @include reset;
+    @include component-reset.reset;
     @include focus-outline('reset');
 
     position: relative;
@@ -96,7 +99,7 @@
   }
 
   .#{$prefix}--overflow-menu-options {
-    @include reset;
+    @include component-reset.reset;
     @include box-shadow;
 
     position: absolute;
@@ -215,7 +218,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;

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 *;

package/scss/components/radio-button/_radio-button.scss

@@ -9,19 +9,18 @@
 // Radio
 //-----------------------------
 
+@use '../form';
+@use '../button/tokens' as *;
+@use '../../config' as *;
+@use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type';
-@use '../form';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/component-reset' as *;
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/convert' as *;
-@use '../../config' as *;
-@use '../../spacing' as *;
-
-@use '../button/tokens' as *;
 
 /// @type Number
 /// @access public