@carbon/styles 1.105.0 → 1.106.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.105.0",
+  "version": "1.106.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -42,11 +42,11 @@
   "dependencies": {
     "@carbon/colors": "^11.51.0",
     "@carbon/feature-flags": "^1.3.0",
-    "@carbon/grid": "^11.54.0",
+    "@carbon/grid": "^11.55.0",
     "@carbon/layout": "^11.52.0",
     "@carbon/motion": "^11.45.0",
-    "@carbon/themes": "^11.72.0",
-    "@carbon/type": "^11.58.0",
+    "@carbon/themes": "^11.73.0",
+    "@carbon/type": "^11.59.0",
     "@ibm/plex": "6.4.1",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "5e89339998bd16c8ddd42e1cc6a2d0c15b3b0af5"
+  "gitHead": "13c5c427ad4413aea5184a0a593e6452bc163e4a"
 }

package/scss/components/__tests__/tabs-test.js

@@ -24,4 +24,16 @@ describe('scss/components/tabs', () => {
       `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('honours $prefix in vertical tabs nav-item-label line-height', async () => {
+    const { result } = await render(`
+        @use '../../config' with ($prefix: 'test');
+        @use '../tabs';
+
+        @include tabs.tabs;
+      `);
+    const cssText = result.css.toString();
+    expect(cssText).toContain('var(--test-body-compact-01-line-height)');
+    expect(cssText).not.toContain('var(--cds-body-compact-01-line-height)');
+  });
 });

package/scss/components/form/_form.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -223,6 +223,8 @@ $input-label-weight: 400 !default;
     overflow: hidden;
     margin: $spacing-02 0 0;
     max-block-size: 0;
+    overflow-wrap: break-word;
+    word-break: break-word;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--form__helper-text {

package/scss/components/pagination/_pagination.scss

@@ -18,6 +18,7 @@
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/layout';
 
 /// Pagination styles
 /// @access public
@@ -30,6 +31,7 @@
   .#{$prefix}--pagination {
     @include component-reset.reset;
     @include type-style('body-compact-01');
+    @include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
 
     display: flex;
     overflow: initial;
@@ -40,7 +42,7 @@
     container-name: pagination;
     container-type: inline-size;
     inline-size: calc(100% - 1px);
-    min-block-size: convert.to-rem(40px);
+    min-block-size: layout.size('height');
 
     // 42rem = 'md' breakpoint
     @container pagination (min-width: 42rem) {
@@ -66,14 +68,6 @@
     }
   }
 
-  .#{$prefix}--pagination--sm {
-    min-block-size: convert.to-rem(32px);
-  }
-
-  .#{$prefix}--pagination--lg {
-    min-block-size: convert.to-rem(48px);
-  }
-
   .#{$prefix}--pagination .#{$prefix}--select {
     align-items: center;
     block-size: 100%;
@@ -88,10 +82,8 @@
     @include type-style('body-compact-01');
 
     block-size: 100%;
-
     inline-size: auto;
-    line-height: convert.to-rem(40px);
-
+    line-height: layout.size('height');
     min-inline-size: auto;
 
     // Firefox-specific fix for three-digit numbers
@@ -109,14 +101,6 @@
     padding-inline: $spacing-05 2.25rem;
   }
 
-  .#{$prefix}--pagination--sm .#{$prefix}--select-input {
-    line-height: convert.to-rem(32px);
-  }
-
-  .#{$prefix}--pagination--lg .#{$prefix}--select-input {
-    line-height: convert.to-rem(48px);
-  }
-
   .#{$prefix}--pagination .#{$prefix}--select-input:hover {
     background: $layer-hover;
   }
@@ -223,12 +207,12 @@
     border: none;
     margin: 0;
     background: none;
-    block-size: convert.to-rem(40px);
+    block-size: layout.size('height');
     border-inline-start: 1px solid $border-subtle;
     cursor: pointer;
     fill: $icon-primary;
-    inline-size: convert.to-rem(40px);
-    min-block-size: convert.to-rem(32px);
+    inline-size: layout.size('height');
+    min-block-size: convert.to-rem(24px);
     transition:
       outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
@@ -244,20 +228,6 @@
     transform: rotate(0.5turn);
   }
 
-  .#{$prefix}--pagination--sm .#{$prefix}--pagination__button,
-  .#{$prefix}--pagination--sm
-    .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
-    block-size: convert.to-rem(32px);
-    inline-size: convert.to-rem(32px);
-  }
-
-  .#{$prefix}--pagination--lg .#{$prefix}--pagination__button,
-  .#{$prefix}--pagination--lg
-    .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
-    block-size: convert.to-rem(48px);
-    inline-size: convert.to-rem(48px);
-  }
-
   .#{$prefix}--pagination__button:focus,
   .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button {
     @include focus-outline('outline');

package/scss/components/popover/_popover.scss

@@ -401,8 +401,7 @@ $popover-caret-height: custom-property.get-var(
     inset-inline-end: calc(100% + $spacing-02);
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--bottom:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--bottom:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     transform: translate(50%, calc(100% + $popover-offset));
@@ -422,12 +421,14 @@ $popover-caret-height: custom-property.get-var(
     );
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--bottom-left:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--bottom-left:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-inline-end: calc(50% - $popover-offset);
@@ -445,12 +446,14 @@ $popover-caret-height: custom-property.get-var(
     transform: translate($popover-offset, calc(100% + $popover-offset));
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--bottom-right:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--bottom-right:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-inline-start: calc(50% - $popover-offset);
@@ -536,24 +539,19 @@ $popover-caret-height: custom-property.get-var(
     }
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--bottom
+  .#{$prefix}--popover--bottom:dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--bottom-left
+  .#{$prefix}--popover--bottom-left:dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--bottom-start
+  .#{$prefix}--popover--bottom-start:dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--bottom-right
+  .#{$prefix}--popover--bottom-right:dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--bottom-end
+  .#{$prefix}--popover--bottom-end:dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     transform: translate(50%, $popover-offset);
@@ -637,8 +635,7 @@ $popover-caret-height: custom-property.get-var(
     transform: translate(-50%, calc(-100% - $popover-offset));
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--top:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--top:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     transform: translate(50%, calc(-100% - $popover-offset));
@@ -658,12 +655,10 @@ $popover-caret-height: custom-property.get-var(
     );
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--top-left:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--top-left:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-inline-end: calc(50% - $popover-offset);
@@ -681,12 +676,10 @@ $popover-caret-height: custom-property.get-var(
     transform: translate($popover-offset, calc(-100% - $popover-offset));
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--top-right:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--top-right:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-inline-start: calc(50% - $popover-offset);
@@ -770,24 +763,19 @@ $popover-caret-height: custom-property.get-var(
     }
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--top:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--top:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--top-left:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--top-left:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--top-right:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--top-right:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     transform: translate(50%, calc(-1 * $popover-offset));
@@ -898,24 +886,23 @@ $popover-caret-height: custom-property.get-var(
     transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--right:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--right:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--right-bottom:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--right-bottom:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--right-end:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--right-end:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--right-top:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--right-top:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--right-start:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--right-start:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-inline-end: 100%;
@@ -973,24 +960,23 @@ $popover-caret-height: custom-property.get-var(
     }
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--right:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--right:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--right-top:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--right-top:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--right-start:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--right-start:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--right-bottom:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--right-bottom:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--right-end:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--right-end:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     inset-inline-end: 100%;
@@ -1034,34 +1020,29 @@ $popover-caret-height: custom-property.get-var(
     }
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--right:not(
+  .#{$prefix}--popover--border.#{$prefix}--popover--right:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--right-top:not(
+  .#{$prefix}--popover--border.#{$prefix}--popover--right-top:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--right-start:not(
+  .#{$prefix}--popover--border.#{$prefix}--popover--right-start:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--right-bottom:not(
+  .#{$prefix}--popover--border.#{$prefix}--popover--right-bottom:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--right-end:not(
+  .#{$prefix}--popover--border.#{$prefix}--popover--right-end:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     &::after {
@@ -1134,28 +1115,33 @@ $popover-caret-height: custom-property.get-var(
     }
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--right.#{$prefix}--popover--auto-align
+  .#{$prefix}--popover--border.#{$prefix}--popover--right.#{$prefix}--popover--auto-align:dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--right-top.#{$prefix}--popover--auto-align
+  .#{$prefix}--popover--border.#{$prefix}--popover--right-top.#{$prefix}--popover--auto-align:dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--right-start.#{$prefix}--popover--auto-align
+  .#{$prefix}--popover--border.#{$prefix}--popover--right-start.#{$prefix}--popover--auto-align:dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--right-bottom.#{$prefix}--popover--auto-align
+  .#{$prefix}--popover--border.#{$prefix}--popover--right-bottom.#{$prefix}--popover--auto-align:dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--right-end.#{$prefix}--popover--auto-align
+  .#{$prefix}--popover--border.#{$prefix}--popover--right-end.#{$prefix}--popover--auto-align:dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret {
@@ -1215,24 +1201,23 @@ $popover-caret-height: custom-property.get-var(
     );
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--left:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--left:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--left-bottom:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--left-bottom:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--left-end:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--left-end:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--left-top:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--left-top:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--left-start:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--left-start:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-inline-end: initial;
@@ -1290,24 +1275,23 @@ $popover-caret-height: custom-property.get-var(
     }
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--left:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--left:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--left-top:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--left-top:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--left-start:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--left-start:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--left-bottom:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--left-bottom:not(.#{$prefix}--popover--auto-align):dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--left-end:not(.#{$prefix}--popover--auto-align)
+  .#{$prefix}--popover--left-end:not(.#{$prefix}--popover--auto-align):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     inset-inline-end: initial;
@@ -1351,34 +1335,29 @@ $popover-caret-height: custom-property.get-var(
     }
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--left:not(
+  .#{$prefix}--popover--border.#{$prefix}--popover--left:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--left-top:not(
+  .#{$prefix}--popover--border.#{$prefix}--popover--left-top:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--left-start:not(
+  .#{$prefix}--popover--border.#{$prefix}--popover--left-start:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--left-bottom:not(
+  .#{$prefix}--popover--border.#{$prefix}--popover--left-bottom:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--left-end:not(
+  .#{$prefix}--popover--border.#{$prefix}--popover--left-end:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     &::after {
@@ -1449,28 +1428,33 @@ $popover-caret-height: custom-property.get-var(
     }
   }
 
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--left.#{$prefix}--popover--auto-align
+  .#{$prefix}--popover--border.#{$prefix}--popover--left.#{$prefix}--popover--auto-align:dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--left-top.#{$prefix}--popover--auto-align
+  .#{$prefix}--popover--border.#{$prefix}--popover--left-top.#{$prefix}--popover--auto-align:dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--left-start.#{$prefix}--popover--auto-align
+  .#{$prefix}--popover--border.#{$prefix}--popover--left-start.#{$prefix}--popover--auto-align:dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--left-bottom.#{$prefix}--popover--auto-align
+  .#{$prefix}--popover--border.#{$prefix}--popover--left-bottom.#{$prefix}--popover--auto-align:dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret,
-  [dir='rtl']
-    .#{$prefix}--popover--border.#{$prefix}--popover--left-end.#{$prefix}--popover--auto-align
+  .#{$prefix}--popover--border.#{$prefix}--popover--left-end.#{$prefix}--popover--auto-align:dir(
+      rtl
+    )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content
     > .#{$prefix}--popover-caret {
@@ -1502,16 +1486,14 @@ $popover-caret-height: custom-property.get-var(
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--tab-tip.#{$prefix}--popover--top-end:not(
+  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--top-end:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--tab-tip.#{$prefix}--popover--bottom-end:not(
+  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--bottom-end:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-inline-start: 0;
@@ -1527,16 +1509,14 @@ $popover-caret-height: custom-property.get-var(
     )
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--tab-tip.#{$prefix}--popover--top-start:not(
+  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--top-start:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content,
-  [dir='rtl']
-    .#{$prefix}--popover--tab-tip.#{$prefix}--popover--bottom-start:not(
+  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--bottom-start:not(
       .#{$prefix}--popover--auto-align
-    )
+    ):dir(rtl)
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content {
     inset-inline-end: 0;