material 3.2.0 → 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;

package/src/styles/elements/_button-group.scss

@@ -1,40 +1,103 @@
-// src/styles/elements/_button-group.scss
-// <m-button-group> before upgrade: a box per <m-button-group-item>, the size
-// of its button, which is drawn on upgrade.
+@use 'sass:list';
+@use 'sass:map';
 @use '../abstract/variables' as v;
-@use '../abstract/mixins' as m;
 @use 'config' as c;
 
-// As components/_button-group.scss: the standard group's 12px between
-// outlined buttons of the small size.
+$sizes: (
+  'xs': (32px, 18px, 13px, 'label-large', 20px),
+  's': (40px, 12px, 17px, 'label-large', 24px),
+  'm': (56px, 8px, 25px, 'title-medium', 24px),
+  'l': (96px, 8px, 50px, 'headline-small', 32px),
+  'xl': (136px, 8px, 67px, 'headline-large', 40px),
+);
+$densities: ('comfortable': 4px, 'compact': 8px);
+$icon-first: ':has(> [icon]:empty:first-child)';
+
+@mixin item($size, $font: true, $letter: true, $weight: true) {
+  $t: map.get($sizes, $size);
+  $type: map.get(v.$typescale, list.nth($t, 4));
+  height: list.nth($t, 1);
+  padding: 0 list.nth($t, 3);
+  @if $font {
+    font-size: map.get($type, 'font-size');
+    line-height: map.get($type, 'line-height');
+    @if $letter { letter-spacing: map.get($type, 'letter-spacing'); }
+  }
+  @if $weight { font-weight: map.get($type, 'font-weight'); }
+}
+
 @include c.host('button-group') {
   display: inline-flex;
-  vertical-align: middle;
+  vertical-align: baseline;
   gap: 12px;
   white-space: nowrap;
 
-  // Only the small/default size is reserved here. Other sizes retain their
-  // original baseline until their size reservation is addressed in #49.
-  &:not([size]), &[size='s'] {
-    vertical-align: baseline;
-    align-items: baseline;
-
-    // Preserve the inherited line box without adding inline space or a gap.
-    &::before {
-      content: " ";
-      white-space: pre;
-      width: 0;
-      margin-inline-end: -12px;
+  &::before {
+    width: 0;
+    height: 32px;
+    margin-inline-end: -12px;
+    align-self: flex-start;
+  }
+
+  &#{$icon-first} {
+    align-items: center;
+
+    &::before { content: ""; }
+  }
+
+  &[size='xs'] { gap: 18px; }
+  &:is([size='m'], [size='l'], [size='xl']) { gap: 8px; }
+
+  @each $density, $step in $densities {
+    &[density='#{$density}'] > * { height: 40px - $step; }
+  }
+
+  @each $size in ('xs', 'm', 'l', 'xl') {
+    &[size='#{$size}'] {
+      $t: map.get($sizes, $size);
+
+      > * {
+        @if $size == 'xs' { @include item($size, $font: false, $weight: false); }
+        @else if $size == 'm' { @include item($size, $weight: false); }
+        @else { @include item($size, $letter: false, $weight: false); }
+      }
+
+      @each $density, $step in $densities {
+        &[density='#{$density}'] > * { height: list.nth($t, 1) - $step; }
+      }
+
+      &::before {
+        height: list.nth($t, 1) * 0.5 + list.nth($t, 5) * 0.5;
+        @if $size == 'xs' { margin-inline-end: -1 * list.nth($t, 2); }
+      }
     }
   }
+
+  &:is([size='m'], [size='l'], [size='xl'])::before { margin-inline-end: -8px; }
+  &:is([size='l'], [size='xl']) > * { letter-spacing: 0; font-weight: 400; }
+
+  @each $density, $step in $densities {
+    &[density='#{$density}']::before { margin-block-start: $step * -0.5; }
+  }
 }
 
 @include c.declarations('button-group') {
   display: inline-flex;
   align-items: center;
-  box-sizing: border-box;
-  height: v.button('height-s');
-  padding: 0 v.button('padding-s');
-  border: v.button('outline-width-s') solid transparent;
-  @include m.typography('label-large');
+  flex: none;
+  min-width: 58px;
+  font-family: var(--mtrl-ref-typeface-plain,Roboto,sans-serif);
+  @include item('s');
+
+  &[icon]:empty { min-width: 0; padding: 0; aspect-ratio: 1; }
+}
+
+@include c.host('button-group') {
+  &[kind='connected'] {
+    gap: 2px;
+
+    &::before { margin-inline-end: -2px; }
+  }
+
+  &:is(:not([size]), [size='xs'], [size='s'])[kind='connected'] > * { min-width: 48px; }
 }

package/src/styles/elements/_datepicker.scss

@@ -9,7 +9,7 @@
 // As components/_datepicker.scss: the text field's width, the label 4px above
 // the 56px field, and 4px + one body-small line under it.
 @include c.host('datepicker') {
-  display: inline-block;
+  display: inline-flex;
   box-sizing: border-box;
   width: v.text-field('width');
   vertical-align: baseline;