@carbon/styles 1.39.0-rc.0 → 1.40.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.39.0-rc.0",
+  "version": "1.40.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "39b377be9e59d22de4a45c874227a6e2fe578557"
+  "gitHead": "99314f69da3f5791c3c0f46564a47ef9ee7c9e0f"
 }

package/scss/components/accordion/_accordion.scss

@@ -82,27 +82,17 @@ $content-padding: 0 0 0 $spacing-05 !default;
     padding-inline-end: layout.density('padding-inline');
     transition: background-color motion(standard, productive) $duration-fast-02;
 
-    &:hover::before,
-    &:focus::before {
-      position: absolute;
-      block-size: calc(100% + 2px);
-      content: '';
-      inline-size: 100%;
-      inset-block-start: -1px;
-      inset-inline-start: 0;
-    }
-
-    &:hover::before {
+    &:hover {
       background-color: $layer-hover;
     }
 
     &:focus {
+      box-shadow: /* Border top */ 0 -1px 0 0 $focus, inset 0 1px 0 0 $focus,
+        /* Border right */ inset 2px 0 0 0 $focus,
+        /* Border bottom */ 0 1px 0 0 $focus, inset 0 -1px 0 0 $focus,
+        /* Border left */ inset -2px 0 0 0 $focus;
       outline: none;
     }
-
-    &:focus::before {
-      @include focus-outline('outline-compat');
-    }
   }
 
   // Disabled styles

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

@@ -225,7 +225,6 @@ $copy-btn-feedback: $background-inverse !default;
 
   // collapsed pre
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
-    overflow-x: auto;
     padding-block-end: convert.to-rem(24px);
     padding-inline-end: $spacing-08;
   }
@@ -236,29 +235,18 @@ $copy-btn-feedback: $background-inverse !default;
     padding-inline-end: 0;
   }
 
-  // expanded pre
-  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
-    .#{$prefix}--snippet-container
-    pre {
-    overflow-x: auto;
-  }
-
-  .#{$prefix}--snippet--multi.#{$prefix}--snippet--has-right-overflow
-    .#{$prefix}--snippet-container
-    pre::after {
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--has-right-overflow::after {
     position: absolute;
     background-image: linear-gradient(to right, transparent, $layer);
     block-size: 100%;
     content: '';
     inline-size: convert.to-rem(16px);
     inset-block-start: 0;
-    inset-inline-end: 0;
+    inset-inline-end: $spacing-05;
   }
 
   [dir='rtl']
-    .#{$prefix}--snippet--multi.#{$prefix}--snippet--has-right-overflow
-    .#{$prefix}--snippet-container
-    pre::after {
+    .#{$prefix}--snippet--multi.#{$prefix}--snippet--has-right-overflow::after {
     background-image: linear-gradient(to left, transparent, $layer);
   }
 
@@ -414,9 +402,7 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
-  .#{$prefix}--snippet--light.#{$prefix}--snippet--multi
-    .#{$prefix}--snippet-container
-    pre::after {
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--multi::after {
     // Safari interprets `transparent` differently, so make color token value transparent instead:
     background-image: linear-gradient(to right, rgba($layer, 0), $layer);
   }

package/scss/components/file-uploader/_file-uploader.scss

@@ -4,6 +4,7 @@
 // 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 '../../breakpoint' as *;
 
 @use '../../config' as *;
 @use '../../motion' as *;
@@ -139,7 +140,7 @@
     display: grid;
     align-items: center;
     background-color: $layer;
-    gap: convert.to-rem(12px) $spacing-05;
+    gap: convert.to-rem(12px) 0;
     grid-auto-rows: auto;
     grid-template-columns: 1fr auto;
     margin-block-end: $spacing-03;
@@ -171,15 +172,66 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    .#{$prefix}--file-filename-container-wrap {
+      margin-block-start: 1px;
+      max-inline-size: 17.5rem;
+      padding-inline-start: $spacing-05;
+      @include breakpoint-down(410px) {
+        max-inline-size: 13.5rem;
+      }
+    }
+
+    .#{$prefix}--file-filename-container-wrap-invalid {
+      max-inline-size: 15.5rem;
+
+      .#{$prefix}--file-filename-tooltip {
+        inline-size: -webkit-fill-available;
+        padding-inline-start: $spacing-05;
+        @-moz-document url-prefix() {
+          inline-size: -moz-available;
+        }
+      }
+    }
+
+    .#{$prefix}--file-filename-tooltip {
+      inline-size: -webkit-fill-available;
+      @-moz-document url-prefix() {
+        inline-size: -moz-available;
+      }
+    }
+
+    .#{$prefix}--file-filename-button {
+      @include type-style('body-compact-01');
+
+      overflow: hidden;
+      padding: 0;
+      border: none;
+      background: none;
+      color: inherit;
+      cursor: pointer;
+      font: inherit;
+      inline-size: -webkit-fill-available;
+      outline: inherit;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      @-moz-document url-prefix() {
+        inline-size: -moz-available;
+      }
+    }
+    .#{$prefix}--file-filename-button:focus {
+      outline: revert;
+    }
   }
 
   .#{$prefix}--file__selected-file--md {
-    gap: $spacing-03 $spacing-05;
+    gap: $spacing-03 0;
     min-block-size: convert.to-rem(40px);
   }
 
   .#{$prefix}--file__selected-file--sm {
-    gap: $spacing-02 $spacing-05;
+    gap: $spacing-02 0;
     min-block-size: convert.to-rem(32px);
   }
 
@@ -259,21 +311,32 @@
     color: $text-primary;
     padding-block-end: $spacing-03;
   }
-
   .#{$prefix}--file__state-container {
     display: flex;
     align-items: center;
     justify-content: center;
     min-inline-size: 1.5rem;
-    padding-inline-end: $spacing-05;
+    padding-inline-end: convert.to-rem(12px);
 
     .#{$prefix}--loading__svg {
       stroke: $icon-primary;
     }
   }
 
+  .#{$prefix}--file__state-container .#{$prefix}--file-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-02;
+    border: none;
+    background-color: transparent;
+    block-size: $spacing-05;
+    inline-size: $spacing-06;
+  }
+
   .#{$prefix}--file__state-container .#{$prefix}--file-complete {
     fill: $interactive;
+    inline-size: $spacing-06;
 
     &:focus {
       @include focus-outline('border');

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

@@ -405,7 +405,7 @@ $list-box-menu-width: convert.to-rem(300px);
     block-size: convert.to-rem(24px);
     cursor: pointer;
     inline-size: convert.to-rem(24px);
-    inset-inline-end: $spacing-05;
+    inset-inline-end: $spacing-04;
     outline: none;
     transition: transform $duration-fast-01 motion(standard, productive);
   }

package/scss/components/modal/_modal.scss

@@ -202,8 +202,8 @@
     font-weight: 400;
     grid-column: 1/-1;
     grid-row: 2/-2;
-    margin-block-end: $spacing-09;
     overflow-y: auto;
+    padding-block-end: $spacing-09;
     // Required to accommodate focus outline's negative offset:
     padding-block-start: $spacing-03;
     // anything besides text/p spans full width, with just 16px padding
@@ -347,22 +347,35 @@
   // -----------------------------
   // Modal overflow
   // -----------------------------
+  .#{$prefix}--modal-scroll-content {
+    // Required to accommodate focus outline's negative offset when scrolling in Chrome
+    border-block-end: 2px solid transparent;
+  }
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
-    padding-block-end: $spacing-07;
+    padding-block-end: $spacing-06;
   }
 
   .#{$prefix}--modal-content--overflow-indicator {
     position: absolute;
-    background-image: linear-gradient(to bottom, transparent, $layer);
-    block-size: convert.to-rem(32px);
-    content: '';
+    background: $layer;
+    block-size: convert.to-rem(48px);
     grid-column: 1/-1;
     grid-row: 2/-2;
-    inline-size: 100%;
-    inset-block-end: $spacing-09;
+    inline-size: calc(100% - $spacing-05);
+    inset-block-end: 0;
     inset-inline-start: 0;
     pointer-events: none;
+
+    &::before {
+      position: absolute;
+      background-image: linear-gradient(to bottom, transparent, $layer);
+      block-size: convert.to-rem(32px);
+      content: '';
+      inline-size: 100%;
+      inset-block-start: -32px;
+      pointer-events: none;
+    }
   }
 
   // Safari-only media query
@@ -379,7 +392,6 @@
   .#{$prefix}--modal-content:focus
     ~ .#{$prefix}--modal-content--overflow-indicator {
     margin: 0 2px 2px;
-    inline-size: calc(100% - 4px);
   }
 
   @media screen and (-ms-high-contrast: active) {

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

@@ -58,6 +58,7 @@
   .#{$prefix}--overflow-menu--sm {
     block-size: convert.to-rem(32px);
     inline-size: convert.to-rem(32px);
+    min-block-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--overflow-menu--lg {

package/scss/components/text-area/_text-area.scss

@@ -17,6 +17,7 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/placeholder-colors' as *;
 @use '../../utilities/skeleton' as *;
+@use '../../utilities/layout';
 
 /// Text area styles
 /// @access public
@@ -27,7 +28,7 @@
     @include type-style('body-01');
     @include focus-outline('reset');
 
-    padding: convert.to-rem(11px) $spacing-05;
+    padding: convert.to-rem(11px) layout.density('padding-inline');
     border: none;
     background-color: $field;
     block-size: 100%;
@@ -62,6 +63,8 @@
   }
 
   .#{$prefix}--text-area__wrapper {
+    @include layout.use('density', $default: 'normal');
+
     position: relative;
     display: flex;
     inline-size: 100%;
@@ -71,7 +74,7 @@
     position: absolute;
     fill: $support-error;
     inset-block-start: $spacing-04;
-    inset-inline-end: $spacing-05;
+    inset-inline-end: layout.density('padding-inline');
   }
 
   .#{$prefix}--text-area__invalid-icon--warning {

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -193,6 +193,10 @@
     list-style-type: none;
   }
 
+  .#{$prefix}--side-nav__divider hr {
+    border: none;
+  }
+
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > {Menu,Submenu}
   //----------------------------------------------------------------------------