material 3.2.1 → 3.2.2

package/src/styles/components/_toolbar.scss

@@ -20,6 +20,11 @@ $component: '#{base.$prefix}-toolbar';
   --#{$component}-content: #{t.color('on-surface-variant')};
   // The window-edge margin of a placed floating toolbar
   --#{$component}-margin: 16px;
+  // The direction multiplier: 1 left-to-right at the root, -1 under the
+  // direction arm. Declared here, not only used as a var() fallback, because a
+  // custom property inherits: a nested LTR instance must not read its RTL
+  // parent's -1.
+  --#{$component}-dir: 1;
 
   display: flex;
   align-items: center;
@@ -156,6 +161,10 @@ $component: '#{base.$prefix}-toolbar';
 
   // Off screen, past the edge it is placed at
   &--hidden {
+    @include m.rtl($self: true) {
+      --#{$component}-dir: -1;
+    }
+
     &.#{$component}--bottom {
       transform: translateY(calc(100% + var(--#{$component}-margin)));
     }
@@ -168,20 +177,14 @@ $component: '#{base.$prefix}-toolbar';
       transform: translateY(calc(-100% - var(--#{$component}-margin)));
     }
 
+    // The edge it leaves is physical: start and end trade sides in right-to-left,
+    // where the root's multiplier is -1.
     &.#{$component}--start {
-      transform: translateX(calc(-100% - var(--#{$component}-margin)));
+      transform: translateX(calc(-1 * var(--#{$component}-dir) * (100% + var(--#{$component}-margin))));
     }
 
     &.#{$component}--end {
-      transform: translateX(calc(100% + var(--#{$component}-margin)));
-    }
-
-    &.#{$component}--start:dir(rtl) {
-      transform: translateX(calc(100% + var(--#{$component}-margin)));
-    }
-
-    &.#{$component}--end:dir(rtl) {
-      transform: translateX(calc(-100% - var(--#{$component}-margin)));
+      transform: translateX(calc(var(--#{$component}-dir) * (100% + var(--#{$component}-margin))));
     }
 
     // In the flow there is no edge to leave by

package/src/styles/components/_top-app-bar.scss

@@ -159,34 +159,35 @@ $component: '#{base.$prefix}-top-app-bar';
   }
   
   // RTL Support
-  [dir="rtl"] & {
+  @include m.rtl {
     .#{$component}__leading {
       margin-right: 0;
       margin-left: 24px;
     }
-    
+
     .#{$component}__trailing {
       margin-left: 0;
       margin-right: auto;
     }
     
-    &--medium,
-    &--large {
-      .#{$component}__headline {
-        margin-left: 0;
-        margin-right: 16px;
-      }
-    }
-    
-    &--center {
-      .#{$component}__headline {
-        left: auto;
-        right: 50%;
-        transform: translateX(50%);
-      }
-    }
   }
-  
+
+  @include m.rtl-selector('.#{$component}--medium .#{$component}__headline') {
+    margin-left: 0;
+    margin-right: 16px;
+  }
+
+  @include m.rtl-selector('.#{$component}--large .#{$component}__headline') {
+    margin-left: 0;
+    margin-right: 16px;
+  }
+
+  @include m.rtl-selector('.#{$component}--center .#{$component}__headline') {
+    left: auto;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
   // Mobile screen adjustments
   @media (max-width: map.get(v.$breakpoints, 'sm')) {
     // Reduce side padding slightly on small screens
@@ -195,6 +196,15 @@ $component: '#{base.$prefix}-top-app-bar';
     .#{$component}__leading {
       margin-right: 16px;
     }
+
+    // The narrow bar reduces the leading's end gap, not its start edges: the
+    // direction rule has to be restated here, or this later rule wins over it.
+    @include m.rtl {
+      .#{$component}__leading {
+        margin-right: 0;
+        margin-left: 16px;
+      }
+    }
     
     .#{$component}__trailing {
       gap: 4px;