@carbon/styles 1.92.0-rc.0 → 1.93.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.92.0-rc.0",
+  "version": "1.93.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,20 +40,20 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.42.0-rc.0",
+    "@carbon/colors": "^11.42.0",
     "@carbon/feature-flags": "^0.31.0",
-    "@carbon/grid": "^11.45.0-rc.0",
-    "@carbon/layout": "^11.43.0-rc.0",
-    "@carbon/motion": "^11.37.0-rc.0",
-    "@carbon/themes": "^11.62.0-rc.0",
-    "@carbon/type": "^11.49.0-rc.0",
+    "@carbon/grid": "^11.45.0",
+    "@carbon/layout": "^11.43.0",
+    "@carbon/motion": "^11.37.0",
+    "@carbon/themes": "^11.62.0",
+    "@carbon/type": "^11.49.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
     "@ibm/plex-sans-arabic": "1.1.0",
     "@ibm/plex-sans-devanagari": "1.1.0",
     "@ibm/plex-sans-hebrew": "1.1.0",
-    "@ibm/plex-sans-thai": "0.0.3-alpha.0",
+    "@ibm/plex-sans-thai": "1.1.0",
     "@ibm/plex-sans-thai-looped": "1.1.0",
     "@ibm/plex-serif": "1.1.0",
     "@ibm/telemetry-js": "^1.5.0"
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "0d9497f77c917c567c8be19157e3da42d7a02c04"
+  "gitHead": "dff507858b43de91b300a98fa1bec24d38aaeb48"
 }

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

@@ -178,7 +178,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--single pre {
     @include type-style('code-01');
 
-    padding-inline-end: $spacing-03;
+    padding-inline-end: $spacing-07;
   }
 
   // Preserve whitespace, but don't allow wrapping for inline and single
@@ -223,9 +223,10 @@ $copy-btn-feedback: $background-inverse !default;
     word-wrap: break-word;
   }
 
-  // collapsed pre
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
-    padding-inline-end: $spacing-08;
+    overflow: auto;
+    padding-block-end: $spacing-06;
+    padding-inline-end: $spacing-06;
   }
 
   .#{$prefix}--snippet--multi.#{$prefix}--snippet--no-copy
@@ -234,16 +235,6 @@ $copy-btn-feedback: $background-inverse !default;
     padding-inline-end: 0;
   }
 
-  .#{$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: $spacing-05;
-  }
-
   [dir='rtl']
     .#{$prefix}--snippet--multi.#{$prefix}--snippet--has-right-overflow::after {
     background-image: linear-gradient(to left, transparent, $layer);
@@ -401,12 +392,6 @@ $copy-btn-feedback: $background-inverse !default;
     background-color: $layer-active;
   }
 
-  .#{$prefix}--snippet--light.#{$prefix}--snippet--single::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);
-  }
-
   // Skeleton State
   .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
     block-size: 100%;
@@ -441,82 +426,60 @@ $copy-btn-feedback: $background-inverse !default;
     inset-inline: 50% auto;
   }
 
-  // Overflow Indicator
-  .#{$prefix}--snippet__overflow-indicator--left,
-  .#{$prefix}--snippet__overflow-indicator--right {
-    z-index: 1;
-    flex: 1 0 auto;
-    inline-size: $spacing-05;
-  }
-
-  .#{$prefix}--snippet__overflow-indicator--left {
-    order: 0;
-    background-image: linear-gradient(to left, transparent, $layer);
-    margin-inline-end: -$spacing-05;
-  }
-
-  .#{$prefix}--snippet__overflow-indicator--right {
-    order: 2;
-    background-image: linear-gradient(to right, transparent, $layer);
-    margin-inline-start: -$spacing-05;
-  }
-
-  [dir='rtl'] .#{$prefix}--snippet__overflow-indicator--left {
-    background-image: linear-gradient(to right, transparent, $layer);
-  }
-
-  [dir='rtl'] .#{$prefix}--snippet__overflow-indicator--right {
-    background-image: linear-gradient(to left, transparent, $layer);
-  }
-
-  .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right,
-  .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--left {
-    position: absolute;
-    block-size: calc(100% - #{$spacing-02});
-    inline-size: $spacing-07;
-  }
-
-  .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right {
-    inset-inline-end: $spacing-08;
-  }
-
-  .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy
-    .#{$prefix}--snippet__overflow-indicator--right {
-    inset-inline-end: 0;
-  }
-
-  .#{$prefix}--snippet--single
-    .#{$prefix}--snippet-container:focus
-    ~ .#{$prefix}--snippet__overflow-indicator--right {
-    inset-inline-end: calc(#{$spacing-08} + #{convert.to-rem(2px)});
-  }
-
-  .#{$prefix}--snippet--single
-    .#{$prefix}--snippet-container:focus
-    + .#{$prefix}--snippet__overflow-indicator--left {
-    inset-inline-start: convert.to-rem(2px);
-  }
-
-  .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--left {
-    background-image: linear-gradient(to left, transparent, $layer);
+  // Using mask-image for single line snippet
+  .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
+    mask-image: linear-gradient(
+      to right,
+      #000000 calc(100% - #{$spacing-07}),
+      transparent 100%
+    );
+    pointer-events: auto;
   }
 
-  .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--right {
-    background-image: linear-gradient(to right, transparent, $layer);
+  .#{$prefix}--snippet--multi {
+    position: relative;
   }
 
-  // Safari-only media query
-  // since fades won't appear correctly with CSS custom properties
-  // see: tabs, code snippet, and modal overflow indicators
-  @supports (hanging-punctuation: first) and (font: -apple-system-body) and
-    (-webkit-appearance: none) {
-    .#{$prefix}--snippet__overflow-indicator--left {
-      background-image: linear-gradient(to left, rgba($layer, 0), $layer);
-    }
-
-    .#{$prefix}--snippet__overflow-indicator--right {
-      background-image: linear-gradient(to right, rgba($layer, 0), $layer);
-    }
+  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
+    inline-size: 100%;
+    mask-composite: intersect;
+    mask-image: linear-gradient(
+        to right,
+        #000000 calc(100% - #{$spacing-07}),
+        transparent 100%
+      ),
+      linear-gradient(
+        to bottom,
+        #000000 calc(100% - #{$spacing-05}),
+        transparent 100%
+      );
+    pointer-events: auto;
+  }
+
+  [dir='rtl'] .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
+    mask-image: linear-gradient(
+      to left,
+      #000000 calc(100% - #{$spacing-07}),
+      transparent 100%
+    );
+  }
+
+  [dir='rtl'] .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
+    mask-image: linear-gradient(
+        to left,
+        #000000 calc(100% - #{$spacing-07}),
+        transparent 100%
+      ),
+      linear-gradient(
+        to bottom,
+        #000000 calc(100% - #{$spacing-05}),
+        transparent 100%
+      );
+  }
+
+  .#{$prefix}--snippet--single:focus-within .#{$prefix}--snippet-container,
+  .#{$prefix}--snippet--multi:focus-within .#{$prefix}--snippet-container {
+    mask-image: none;
   }
 
   .#{$prefix}--snippet--multi.#{$prefix}--skeleton {

package/scss/components/pagination/_pagination.scss

@@ -36,11 +36,14 @@
     justify-content: space-between;
     background-color: $layer;
     border-block-start: 1px solid $border-subtle;
+    container-name: pagination;
+    container-type: inline-size;
     inline-size: calc(100% - 1px);
     min-block-size: convert.to-rem(40px);
     overflow-x: auto;
 
-    @include breakpoint('md') {
+    // 42rem = 'md' breakpoint
+    @container pagination (min-width: 42rem) {
       overflow: initial;
 
       .#{$prefix}--pagination__control-buttons {
@@ -49,7 +52,7 @@
     }
 
     // mobile friendly pagination
-    @include breakpoint-down('md') {
+    @container pagination (max-width: 42rem) {
       .#{$prefix}--pagination__left > *,
       .#{$prefix}--pagination__right > * {
         display: none;
@@ -92,6 +95,13 @@
     line-height: convert.to-rem(40px);
 
     min-inline-size: auto;
+
+    // Firefox-specific fix for three-digit numbers
+    // stylelint-disable-next-line at-rule-no-vendor-prefix
+    @-moz-document url-prefix() {
+      padding-inline-end: $spacing-05;
+      text-overflow: clip;
+    }
   }
 
   // Extra specificity is needed to preserve padding
@@ -184,13 +194,14 @@
   .#{$prefix}--pagination__left {
     padding: 0 $spacing-05 0 0;
 
-    @include breakpoint('md') {
+    // 42rem = 'md' breakpoint width
+    @container pagination (min-width: 42rem) {
       padding: 0 $spacing-05;
     }
   }
 
   .#{$prefix}--pagination__text {
-    @include breakpoint('md') {
+    @container pagination (min-width: 42rem) {
       display: inline-block;
     }
   }

package/scss/components/pagination/_unstable_pagination.scss

@@ -30,12 +30,15 @@
     background-color: $layer;
     border-block-end: 1px solid transparent;
     border-block-start: 1px solid $border-subtle;
+    container-name: pagination;
+    container-type: inline-size;
     inline-size: 100%;
     min-block-size: convert.to-rem(40px);
   }
 
   .#{$prefix}--unstable-pagination__text {
-    @include breakpoint('md') {
+    // 42rem = 'md' breakpoint width
+    @container pagination (min-width: 42rem) {
       display: inline-block;
     }
 
@@ -160,7 +163,8 @@
     inset-block-start: 50%;
     transform: translateY(-50%);
 
-    @include breakpoint('md') {
+    // 42rem = 'md' breakpoint width
+    @container pagination (min-width: 42rem) {
       inset-inline-end: $spacing-05;
     }
   }

package/scss/components/popover/_popover.scss

@@ -7,6 +7,7 @@
 
 @use '../../config' as *;
 @use '../../layer' as *;
+@use '../../spacing' as *;
 @use '../../theme';
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/button-reset';
@@ -47,7 +48,10 @@ $popover-background-color: custom-property.get-var(
 );
 
 // The drop shadow value used for the popover container
-$popover-drop-shadow: custom-property.get-var('popover-drop-shadow', 'none');
+$popover-drop-shadow: custom-property.get-var(
+  'popover-drop-shadow',
+  drop-shadow(0 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2))
+);
 
 // The border radius value for the popover container
 $popover-border-radius: custom-property.get-var('popover-border-radius', 2px);
@@ -103,10 +107,8 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Drop shadow modifier
-  .#{$prefix}--popover--drop-shadow
-    .#{$prefix}--popover
-    > .#{$prefix}--popover-content {
-    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
+  .#{$prefix}--popover--drop-shadow .#{$prefix}--popover {
+    filter: $popover-drop-shadow;
   }
 
   // Caret tip modifier
@@ -121,7 +123,6 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover {
     position: absolute;
     z-index: z('floating');
-    filter: $popover-drop-shadow;
     inset: 0;
     pointer-events: none;
   }
@@ -235,7 +236,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-block-end: 0;
-    inset-inline-start: 0;
+    inset-inline-start: calc(50% - $popover-offset);
     transform: translate(
       calc(-1 * $popover-offset),
       calc(100% + $popover-offset)
@@ -250,7 +251,7 @@ $popover-caret-height: custom-property.get-var(
     .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--auto-align)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     inset-inline-start: initial;
   }
 
@@ -261,7 +262,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-block-end: 0;
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     transform: translate($popover-offset, calc(100% + $popover-offset));
   }
 
@@ -273,7 +274,6 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover-caret {
     inset-block-end: 0;
     inset-inline-end: 0;
-    inset-inline-start: auto;
   }
 
   .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--auto-align)
@@ -281,17 +281,13 @@ $popover-caret-height: custom-property.get-var(
     > .#{$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));
+    inset-inline-end: 0;
   }
 
   [dir='rtl']
@@ -302,7 +298,7 @@ $popover-caret-height: custom-property.get-var(
     .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--auto-align)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    inset-inline-start: 0;
+    inset-inline-start: calc(50% - $popover-offset);
   }
 
   // Popover hover area placement
@@ -427,7 +423,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-block-start: 0;
-    inset-inline-start: 0;
+    inset-inline-start: calc(50% - $popover-offset);
     transform: translate(
       calc(-1 * $popover-offset),
       calc(-100% - $popover-offset)
@@ -442,7 +438,7 @@ $popover-caret-height: custom-property.get-var(
     .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--auto-align)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     inset-inline-start: initial;
   }
 
@@ -453,7 +449,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-block-start: 0;
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     transform: translate($popover-offset, calc(-100% - $popover-offset));
   }
 
@@ -465,7 +461,7 @@ $popover-caret-height: custom-property.get-var(
     .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--auto-align)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
-    inset-inline-start: 0;
+    inset-inline-start: calc(50% - $popover-offset);
   }
 
   // Popover hover area placement
@@ -897,6 +893,57 @@ $popover-caret-height: custom-property.get-var(
     border-radius: 0;
   }
 
+  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--top-start:not(
+      .#{$prefix}--popover--auto-align
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--bottom-start:not(
+      .#{$prefix}--popover--auto-align
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  [dir='rtl']
+    .#{$prefix}--popover--tab-tip.#{$prefix}--popover--top-end:not(
+      .#{$prefix}--popover--auto-align
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  [dir='rtl']
+    .#{$prefix}--popover--tab-tip.#{$prefix}--popover--bottom-end:not(
+      .#{$prefix}--popover--auto-align
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-start: 0;
+  }
+
+  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--top-end:not(
+      .#{$prefix}--popover--auto-align
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--bottom-end:not(
+      .#{$prefix}--popover--auto-align
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  [dir='rtl']
+    .#{$prefix}--popover--tab-tip.#{$prefix}--popover--top-start:not(
+      .#{$prefix}--popover--auto-align
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content,
+  [dir='rtl']
+    .#{$prefix}--popover--tab-tip.#{$prefix}--popover--bottom-start:not(
+      .#{$prefix}--popover--auto-align
+    )
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    inset-inline-end: 0;
+    inset-inline-start: initial;
+  }
+
   .#{$prefix}--popover--tab-tip .#{$prefix}--popover {
     will-change: filter;
   }

package/scss/components/tabs/_tabs.scss

@@ -742,12 +742,6 @@
     }
   }
 
-  .#{$prefix}--tab-content--interactive {
-    &:focus {
-      outline: none;
-    }
-  }
-
   //-----------------------------
   // Skeleton state
   //-----------------------------

package/scss/components/ui-shell/header/_header.scss

@@ -57,26 +57,6 @@
     z-index: z('header') + 1;
   }
 
-  .#{$prefix}--header {
-    .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--auto-align) {
-      > .#{$prefix}--popover {
-        > .#{$prefix}--popover-caret,
-        > .#{$prefix}--popover-content {
-          inset-inline-start: $spacing-05;
-        }
-      }
-    }
-
-    .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--auto-align) {
-      > .#{$prefix}--popover {
-        > .#{$prefix}--popover-caret,
-        > .#{$prefix}--popover-content {
-          inset-inline-end: $spacing-05;
-        }
-      }
-    }
-  }
-
   .#{$prefix}--header__action > :first-child {
     margin-block-start: 0;
   }