material 3.2.1 → 3.2.3

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;

package/src/styles/elements/_radios.scss

@@ -4,13 +4,35 @@
 @use 'config' as c;
 
 @include c.host('radios') {
-  display: block;
+  display: flex;
+  flex-direction: column;
   @include m.typography('body-large');
 
   &[direction='horizontal'] {
-    display: flex;
+    flex-direction: row;
     flex-wrap: wrap;
   }
+
+  // On upgrade the host's baseline is its first row's: the 20px circle's
+  // bottom edge, 14px down a 48px row (4px of label padding and 10px of the
+  // control around the circle). The column's first item is a strut that ends
+  // on that edge, so a baseline-aligned row holds the host in place; 0 wide
+  // and -34 below itself, it moves nothing. Without it the baseline was the
+  // label text's, 5px higher, and the host moved up 5px at upgrade
+  // (floor/material#109).
+  //
+  // Only a group with an option reserves that baseline: an empty host is 0
+  // tall after upgrade and exposes no baseline, so the strut would synthesize
+  // one 34px below its top and lift the text after it 24px at upgrade. The
+  // guard follows an actual option, not the absence of children: `:empty`
+  // counts the newline and spaces of indented markup as content, and that
+  // indented group has no option and no upgraded baseline either.
+  &:has(> #{c.tag('radio')})::before {
+    content: '';
+    flex: none;
+    height: 34px;
+    margin-block-end: -34px;
+  }
 }
 
 // As components/_radios.scss: a row at least 48px, the 40px control and 8px