@carbon/styles 1.91.0 → 1.92.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.91.0",
+  "version": "1.92.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,20 +40,20 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.41.0",
+    "@carbon/colors": "^11.42.0",
     "@carbon/feature-flags": "^0.31.0",
-    "@carbon/grid": "^11.44.0",
-    "@carbon/layout": "^11.42.0",
-    "@carbon/motion": "^11.36.0",
-    "@carbon/themes": "^11.61.0",
-    "@carbon/type": "^11.48.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": "0.0.3-alpha.0",
-    "@ibm/plex-sans-thai": "0.0.3-alpha.0",
+    "@ibm/plex-sans-hebrew": "1.1.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": "8f9dd77c8055a1a1ce36af55298c19c9f8966ab9"
+  "gitHead": "c17cce753e36124e6e8e02daba97ae9d4decbcc3"
 }

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/data-table/expandable/_data-table-expandable.scss

@@ -315,14 +315,14 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 3) td,
   .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 4) td {
-    border-block-end: 1px solid $layer;
+    background-color: $layer-accent;
+    border-block-end: 1px solid $layer-accent;
+    border-block-start: 1px solid $layer-accent;
   }
 
   .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td,
   .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td {
-    background-color: $layer-accent;
-    border-block-end: 1px solid $layer-accent;
-    border-block-start: 1px solid $layer-accent;
+    border-block-end: 1px solid $layer;
   }
 
   .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td,

package/scss/components/modal/_modal.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -292,6 +292,15 @@
       linear-gradient(to top, $layer 0, 2px, transparent 2px);
   }
 
+  .#{$prefix}--modal--slug
+    .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content.#{$prefix}--modal-scroll-content--no-fade,
+  .#{$prefix}--modal--decorator
+    .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content.#{$prefix}--modal-scroll-content--no-fade,
+  .#{$prefix}--modal-scroll-content.#{$prefix}--modal-scroll-content--no-fade,
+  .#{$prefix}--modal-scroll-content--no-fade {
+    mask-image: none;
+  }
+
   //removing mask image in case we have dropdown in modal
   .#{$prefix}--modal-scroll-content:has(.#{$prefix}--autoalign) {
     mask-image: none;

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

@@ -36,10 +36,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    block-size: convert.to-rem(40px);
+    block-size: $spacing-08;
     cursor: pointer;
-    inline-size: convert.to-rem(40px);
-    min-block-size: convert.to-rem(40px);
+    inline-size: $spacing-08;
+    min-block-size: $spacing-08;
     transition:
       outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive);
@@ -57,15 +57,21 @@
     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: convert.to-rem(32px);
-    inline-size: convert.to-rem(32px);
-    min-block-size: convert.to-rem(32px);
+    block-size: $spacing-07;
+    inline-size: $spacing-07;
+    min-block-size: $spacing-07;
   }
 
   .#{$prefix}--overflow-menu--lg {
-    block-size: convert.to-rem(48px);
-    inline-size: convert.to-rem(48px);
+    block-size: $spacing-09;
+    inline-size: $spacing-09;
   }
 
   // Overwrite Icon Tooltip focus styles
@@ -93,9 +99,9 @@
   }
 
   .#{$prefix}--overflow-menu__icon {
-    block-size: convert.to-rem(16px);
+    block-size: $spacing-05;
     fill: $icon-primary;
-    inline-size: convert.to-rem(16px);
+    inline-size: $spacing-05;
   }
 
   .#{$prefix}--overflow-menu__wrapper {
@@ -112,8 +118,8 @@
     flex-direction: column;
     align-items: flex-start;
     background-color: $layer;
-    inline-size: convert.to-rem(160px);
-    inset-block-start: 32px;
+    inline-size: $spacing-13;
+    inset-block-start: $spacing-07;
     inset-inline-start: 0;
     list-style: none;
 
@@ -151,53 +157,65 @@
       .#{$prefix}--breadcrumb-menu-options
     )::after {
     block-size: convert.to-rem(3px);
-    inline-size: convert.to-rem(40px);
+    inline-size: $spacing-08;
     inset-block-start: convert.to-rem(-3px);
     inset-inline-start: 0;
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after {
-    block-size: convert.to-rem(8px);
-    inline-size: convert.to-rem(40px);
-    inset-block-end: convert.to-rem(-8px);
+    block-size: $spacing-03;
+    inline-size: $spacing-08;
+    inset-block-end: -$spacing-03;
     inset-inline-start: 0;
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after {
-    block-size: convert.to-rem(40px);
+    block-size: $spacing-08;
     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: convert.to-rem(40px);
+    block-size: $spacing-08;
     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: convert.to-rem(32px);
+      inline-size: $spacing-07;
     }
 
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
-      block-size: convert.to-rem(32px);
+      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: convert.to-rem(48px);
+      inline-size: $spacing-09;
     }
 
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
-      block-size: convert.to-rem(48px);
+      block-size: $spacing-09;
     }
   }
 
@@ -226,19 +244,24 @@
     align-items: center;
     padding: 0;
     background-color: transparent;
-    block-size: convert.to-rem(40px);
+    block-size: $spacing-08;
     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: convert.to-rem(32px);
+    block-size: $spacing-07;
   }
 
   .#{$prefix}--overflow-menu-options--lg
     .#{$prefix}--overflow-menu-options__option {
-    block-size: convert.to-rem(48px);
+    block-size: $spacing-09;
   }
 
   .#{$prefix}--overflow-menu--divider {

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/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;
   }