material 3.4.2 → 3.5.0

package/src/styles/components/_navigation-rail.scss

@@ -3,6 +3,7 @@
 @use '../abstract/theme' as t;
 @use '../abstract/mixins' as m;
 @use '../abstract/variables' as v;
+@use '../abstract/direction' as d;
 
 // M3 Expressive navigation rail.
 // Geometry: Compose NavigationRailCollapsed/Expanded/BaselineItem/VerticalItem/
@@ -127,7 +128,7 @@ $snap: 0s linear $midpoint;
     position: absolute;
     z-index: -1;
     inset-block-start: 6px;
-    inset-inline-start: 20px;
+    @include d.start(20px, $arm: false);
     inline-size: 56px;
     block-size: 32px;
     border-radius: v.shape('full'); // NavigationRailTokens active-indicator-shape
@@ -197,7 +198,7 @@ $snap: 0s linear $midpoint;
     display: grid;
     place-items: center;
     inset-block-start: 10px;
-    inset-inline-start: 36px;
+    @include d.start(36px, $arm: false);
     inline-size: 24px;
     block-size: 24px;
     color: t.color('on-surface-variant');
@@ -214,16 +215,19 @@ $snap: 0s linear $midpoint;
     position: absolute;
     box-sizing: border-box;
     inset-block-start: 42px;
-    inset-inline-start: 16px;
+    @include d.start(16px, $arm: false);
     inline-size: 64px;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     @include m.typography('label-medium');
+    // The inline inset's transition names both physical sides in the arms
+    // form (d.transition): the arms swap which is live, and a transition
+    // that names a property the arms unset jumps instead of snapping.
     transition:
       inset-block-start $snap,
-      inset-inline-start $snap,
+      d.transition(inset-inline-start, $snap),
       inline-size $snap,
       font-size $snap,
       line-height $snap,
@@ -233,7 +237,7 @@ $snap: 0s linear $midpoint;
   }
   &--expanded &__label {
     inset-block-start: 18px;
-    inset-inline-start: 68px;
+    @include d.start(68px, $arm: false);
     inline-size: calc(100% - 104px);
     text-align: start;
     @include m.typography('label-large');
@@ -252,7 +256,7 @@ $snap: 0s linear $midpoint;
   &__badge {
     position: absolute;
     box-sizing: border-box;
-    inset-inline-start: 48px;
+    @include d.start(48px, $arm: false);
     inset-block-start: 8px;
     min-inline-size: 16px;
     min-block-size: 16px;
@@ -261,7 +265,8 @@ $snap: 0s linear $midpoint;
     background: t.color('error');
     color: t.color('on-error');
     @include m.typography('label-small');
-    transition: inset-inline-start $snap, inset-inline-end $snap, inset-block-start $snap;
+    // Both physical sides in the arms form, as the label's snap above.
+    transition: d.transition(inset-inline-start, $snap), inset-block-start $snap;
     transition-behavior: allow-discrete;
     &--dot {
       inline-size: 6px;
@@ -269,13 +274,31 @@ $snap: 0s linear $midpoint;
       min-inline-size: 0;
       min-block-size: 0;
       padding: 0;
-      inset-inline-start: 54px;
+      @include d.start(54px, $arm: false);
       inset-block-start: 10px;
     }
   }
-  &--expanded &__badge { inset-inline-start: auto; inset-inline-end: 36px; inset-block-start: 20px; }
+  &--expanded &__badge { @include d.sides(auto, 36px, $arm: false); inset-block-start: 20px; }
   &--expanded &__badge--dot { inset-block-start: 25px; }
 
+  // The start-edge insets above are the left-to-right form; these arms write
+  // the mirrored one, a marker on the rail root included. Nothing of this in
+  // the logical form, where the insets mirror natively.
+  @include d.arms-selector('.#{$component}__indicator') { right: 20px; left: auto; }
+  @include d.arms-selector('.#{$component}__icon') { right: 36px; left: auto; }
+  @include d.arms-selector('.#{$component}__label') { right: 16px; left: auto; }
+  @include d.arms-selector('.#{$component}__badge') { right: 48px; left: auto; }
+  @include d.arms-selector('.#{$component}__badge--dot') { right: 54px; left: auto; }
+
+  // The expanded rules carry the variant class, so a marker on the root
+  // needs the self form (the fab-menu bottom-start trap).
+  &--expanded {
+    @include d.arms($self: true) {
+      .#{$component}__label { right: 68px; left: auto; }
+      .#{$component}__badge { left: 36px; right: auto; }
+    }
+  }
+
   &--hide-collapsed:not(&--expanded) { display: none; }
 
   // Modal expanded rail: a native dialog docked to the start edge.
@@ -283,7 +306,7 @@ $snap: 0s linear $midpoint;
   &--modal {
     position: fixed;
     inset-block: 0;
-    inset-inline: 0 auto;
+    @include d.sides(0, auto, $arm: false);
     margin: 0;
     border: 0;
     max-inline-size: calc(100vw - 56px);
@@ -291,12 +314,22 @@ $snap: 0s linear $midpoint;
     block-size: 100dvh;
     background: t.color('surface-container');
     // The modal rail's container, corner-large at the end, as the drawer's
-    border-start-end-radius: v.shape('large');
-    border-end-end-radius: v.shape('large');
+    @include d.corners($start-end: v.shape('large'), $end-end: v.shape('large'), $arm: false);
     transition: inline-size $fast-spatial;
     @include m.elevation(2);
     &:not([open]) { display: none; }
     &::backdrop { background: t.alpha('scrim', 0.32); }
+
+    // The modal docks at the start edge and its large corners follow it. One
+    // arm carries the whole mirrored form; the logical form needs none of it.
+    @include d.arms($self: true) {
+      left: auto;
+      right: 0;
+      border-top-left-radius: v.shape('large');
+      border-bottom-left-radius: v.shape('large');
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 
   &__toggle:focus-visible { outline: 2px solid t.color('secondary'); outline-offset: -2px; }

package/src/styles/components/_progress.scss

@@ -8,6 +8,7 @@
 @use "../../styles/abstract/variables" as v;
 @use "../../styles/abstract/functions" as f;
 @use "../../styles/abstract/mixins" as m;
+@use "../../styles/abstract/direction" as d;
 @use "../../styles/abstract/theme" as t;
 
 $component: "#{base.$prefix}-progress";
@@ -58,7 +59,7 @@ $component: "#{base.$prefix}-progress";
     white-space: nowrap;
 
     .#{$component}--linear & {
-      inset-inline-end: 0;
+      @include d.end(0, $arm: false);
       top: 100%;
       margin-top: 4px;
     }
@@ -70,6 +71,19 @@ $component: "#{base.$prefix}-progress";
     }
   }
 
+  // The label's mirrored inset, in one arm that also covers a marker on this
+  // root: --linear and the runtime's direction mark are the same element, and
+  // the plain arm members need the marker on an ancestor
+  // (abstract/_direction.scss). Nothing of it in the logical form.
+  &--linear {
+    @include d.arms($self: true) {
+      .#{$component}__label {
+        right: auto;
+        left: 0;
+      }
+    }
+  }
+
   // A linear indicator with a label leaves room for it underneath
   &--linear:has(.#{$component}__label) {
     margin-bottom: 20px;

package/src/styles/components/_side-sheet.scss

@@ -4,6 +4,7 @@
 @use "../abstract/variables" as v;
 @use "../abstract/mixins" as m;
 @use "../abstract/theme" as t;
+@use "../abstract/direction" as d;
 
 $component: "#{base.$prefix}-side-sheet";
 
@@ -181,14 +182,39 @@ $component: "#{base.$prefix}-side-sheet";
         // Sheet.Side.Docked.Container.Shape = Corner.None),
         &.#{$component}--end .#{$component}__container {
             box-shadow: f.get-elevation(1), calc(m.$sheet-overshoot-guard * var(--#{$component}-direction)) 0 0 0 t.color("surface-container-low");
-            border-start-start-radius: v.shape("large");
-            border-end-start-radius: v.shape("large");
+            @include d.corners($start-start: v.shape("large"), $end-start: v.shape("large"), $arm: false);
         }
 
         &.#{$component}--start .#{$component}__container {
             box-shadow: f.get-elevation(1), calc(-1 * m.$sheet-overshoot-guard * var(--#{$component}-direction)) 0 0 0 t.color("surface-container-low");
-            border-start-end-radius: v.shape("large");
-            border-end-end-radius: v.shape("large");
+            @include d.corners($start-end: v.shape("large"), $end-end: v.shape("large"), $arm: false);
+        }
+
+        // The inner edge follows the direction, so the mirrored form is an
+        // arm: the base corners are unset there, not mirrored by the cascade.
+        // One arm per placement, written after its base, the marker on the
+        // sheet root included (the self form). Nothing of it in the logical
+        // form, where the corners mirror natively.
+        &.#{$component}--end {
+            @include d.arms($self: true) {
+                .#{$component}__container {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+                    border-top-right-radius: v.shape("large");
+                    border-bottom-right-radius: v.shape("large");
+                }
+            }
+        }
+
+        &.#{$component}--start {
+            @include d.arms($self: true) {
+                .#{$component}__container {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                    border-top-left-radius: v.shape("large");
+                    border-bottom-left-radius: v.shape("large");
+                }
+            }
         }
     }
 

package/src/styles/components/_snackbar.scss

@@ -12,6 +12,7 @@
 @use '../../styles/abstract/variables' as v;
 @use '../../styles/abstract/functions' as f;
 @use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/direction' as d;
 @use '../../styles/abstract/theme' as t;
 
 $component: '#{base.$prefix}-snackbar';
@@ -74,12 +75,15 @@ $margin: 16px;
     translate: -50% 0;
   }
 
+  // The placement class sits on this root, which the runtime may also mark:
+  // the self form covers a marker on the snackbar itself
+  // (abstract/_direction.scss).
   &--start {
-    inset-inline-start: $margin;
+    @include d.start($margin, $self: true);
   }
 
   &--end {
-    inset-inline-end: $margin;
+    @include d.end($margin, $self: true);
   }
 
   // ---------------------------------------------------------------------------

package/src/styles/components/_split-button.scss

@@ -8,8 +8,15 @@
 // becomes a circle while its menu is open, and its chevron turns 180 degrees.
 //
 // Both halves are the library's own button, so their colours, state layers,
-// focus rings and touch targets come from there. Everything is written with
-// logical properties, so the pair mirrors in right-to-left languages.
+// focus rings and touch targets come from there.
+//
+// The corners are written as the logical properties and go through the
+// direction switch (abstract/_direction.scss): the runtime-adopted sheets
+// keep the logical radii, and the artefacts a consumer bundler lowers carry
+// the physical pair with the right-to-left pair as a direction arm, so the
+// bundler's :lang() lowering cannot pin them to the left-to-left corners of a
+// right-to-left page. The radii themselves are custom properties, so a state
+// changes only their value and the arms keep choosing the pair.
 @use "sass:map";
 @use "sass:math";
 @use "../../styles/abstract/base" as base;
@@ -17,6 +24,7 @@
 @use "../../styles/abstract/functions" as f;
 @use "../../styles/abstract/mixins" as m;
 @use "../../styles/abstract/theme" as t;
+@use "../../styles/abstract/direction" as d;
 
 $component: "#{base.$prefix}-split-button";
 $button: "#{base.$prefix}-button";
@@ -56,6 +64,13 @@ $gap: 2px;
   // side overflow it, so a 9999px pill beside a 4dp corner drags that corner
   // to about a fiftieth of a pixel and the split reads as a square cut.
   // Half the height is the same pill and leaves the inner corner alone.
+  //
+  // The size classes set the three radii; a root without one keeps the
+  // default size's values, which is the size the factory defaults to.
+  --#{$component}-pill: #{math.div(map.get($sizes, "s", "height"), 2)};
+  --#{$component}-corner: var(--#{$component}-inner-shape, #{map.get($sizes, "s", "inner")});
+  --#{$component}-corner-active: var(--#{$component}-inner-shape-active, #{map.get($sizes, "s", "inner-active")});
+
   .#{$button} {
     transition:
       border-radius v.motion("spring-fast-spatial-duration") v.motion("spring-fast-spatial-easing"),
@@ -67,21 +82,13 @@ $gap: 2px;
   // ---------------------------------------------------------------------------
   @each $size, $spec in $sizes {
     &--#{$size} {
-      $inner: var(--#{base.$prefix}-split-button-inner-shape, #{map.get($spec, "inner")});
-      $inner-active: var(
-        --#{base.$prefix}-split-button-inner-shape-active,
-        #{map.get($spec, "inner-active")}
-      );
-
-      $outer: math.div(map.get($spec, "height"), 2);
+      --#{$component}-pill: #{math.div(map.get($spec, "height"), 2)};
+      --#{$component}-corner: var(--#{$component}-inner-shape, #{map.get($spec, "inner")});
+      --#{$component}-corner-active: var(--#{$component}-inner-shape-active, #{map.get($spec, "inner-active")});
 
       .#{$button} {
         height: map.get($spec, "height");
         min-height: map.get($spec, "height");
-        border-start-start-radius: $outer;
-        border-end-start-radius: $outer;
-        border-start-end-radius: $outer;
-        border-end-end-radius: $outer;
       }
 
       // The leading button: an outer pill edge, an inner corner facing its
@@ -90,15 +97,6 @@ $gap: 2px;
         padding-inline: map.get($spec, "lead-start") map.get($spec, "lead-end");
         // Compose SplitButtonDefaults.LeadingButtonMinWidth
         min-width: 48px;
-        border-start-end-radius: $inner;
-        border-end-end-radius: $inner;
-
-        &:hover,
-        &:focus-visible,
-        &:active {
-          border-start-end-radius: $inner-active;
-          border-end-end-radius: $inner-active;
-        }
       }
 
       // The trailing button is symmetrical, so its icon is nudged towards the
@@ -108,8 +106,6 @@ $gap: 2px;
         padding-inline: map.get($spec, "trail");
         // Its width is its padding and its icon, not the button's own minimum
         min-width: 0;
-        border-start-start-radius: $inner;
-        border-end-start-radius: $inner;
 
         // The icon sits in the button's icon wrapper, which has a size of its
         // own; the split button's chevron is bigger than a button icon
@@ -129,20 +125,62 @@ $gap: 2px;
             translate: map.get($spec, "offset") 0;
           }
         }
-
-        &:hover,
-        &:focus-visible,
-        &:active {
-          border-start-start-radius: $inner-active;
-          border-end-start-radius: $inner-active;
-        }
       }
+    }
+  }
 
-      // Open: the trailing button's inner corner rounds off into a circle
-      &.#{$component}--expanded .#{$component}__trailing {
-        border-start-start-radius: $outer;
-        border-end-start-radius: $outer;
-      }
+  // ---------------------------------------------------------------------------
+  // The corners: the outer pair faces out, the inner pair faces the gap. The
+  // leading half's inner corners sit on its trailing edge and the trailing
+  // half's on its leading edge, so the right-to-left form swaps the pair.
+  // ---------------------------------------------------------------------------
+  .#{$button} {
+    border-radius: var(--#{$component}-pill);
+  }
+
+  .#{$component}__leading {
+    @include d.corners(
+      $start-start: var(--#{$component}-pill),
+      $start-end: var(--#{$component}-corner),
+      $end-start: var(--#{$component}-pill),
+      $end-end: var(--#{$component}-corner),
+    );
+  }
+
+  .#{$component}__trailing {
+    @include d.corners(
+      $start-start: var(--#{$component}-corner),
+      $start-end: var(--#{$component}-pill),
+      $end-start: var(--#{$component}-corner),
+      $end-end: var(--#{$component}-pill),
+    );
+  }
+
+  // The inner corner grows further while a half is hovered, focused or
+  // pressed. Only the value changes, so the arms keep choosing the pair.
+  .#{$component}__leading:where(:hover, :focus-visible, :active),
+  .#{$component}__trailing:where(:hover, :focus-visible, :active) {
+    --#{$component}-corner: var(--#{$component}-corner-active);
+  }
+
+  // Open: the trailing button's inner corner rounds off into a circle. The
+  // pill is the same on either side, so this needs no arm.
+  &--expanded .#{$component}__trailing {
+    --#{$component}-corner: var(--#{$component}-pill);
+  }
+
+  // The placement class and the direction marker are the same element here:
+  // the runtime writes mtrl-rtl on this root, and dir="rtl" may sit on it.
+  // The arms above need a strict ancestor, so the root-carried form is
+  // written here, after them (abstract/_direction.scss: nothing in the
+  // logical form, where the radii mirror natively).
+  @include d.arms-self-only {
+    .#{$component}__leading {
+      border-radius: var(--#{$component}-corner) var(--#{$component}-pill) var(--#{$component}-pill) var(--#{$component}-corner);
+    }
+
+    .#{$component}__trailing {
+      border-radius: var(--#{$component}-pill) var(--#{$component}-corner) var(--#{$component}-corner) var(--#{$component}-pill);
     }
   }
 

package/src/styles/components/_switch.scss

@@ -4,6 +4,7 @@
 @use '../../styles/abstract/functions' as f;
 @use '../../styles/abstract/mixins' as m;
 @use '../../styles/abstract/theme' as t;
+@use '../../styles/abstract/direction' as d;
 
 $component: '#{base.$prefix}-switch';
 
@@ -112,7 +113,7 @@ $component: '#{base.$prefix}-switch';
       width: 40px;
       height: 40px;
       top: -6px;
-      inset-inline-start: -6px;
+      @include d.start-value(--#{$component}-layer-start, -6px);
       background-color: t.color('on-surface');
       opacity: 0;
       border-radius: 50%;
@@ -138,7 +139,7 @@ $component: '#{base.$prefix}-switch';
   &__thumb {
     position: absolute;
     top: 6px;
-    inset-inline-start: 6px;
+    @include d.start-value(--#{$component}-thumb-start, 6px);
     width: 16px;
     height: 16px;
     border-radius: 50%;
@@ -190,7 +191,7 @@ $component: '#{base.$prefix}-switch';
       width: 24px;
       height: 24px;
       top: 2px;
-      inset-inline-start: 2px;
+      @include d.start-value-set(--#{$component}-thumb-start, 2px);
     }
 
     .#{$component}__thumb-icon--unselected {
@@ -206,7 +207,7 @@ $component: '#{base.$prefix}-switch';
       border-color: t.color('primary');
 
       &::after {
-        inset-inline-start: 14px;
+        @include d.start-value-set(--#{$component}-layer-start, 14px);
         background-color: t.color('primary');
       }
     }
@@ -216,7 +217,7 @@ $component: '#{base.$prefix}-switch';
       width: 24px;
       height: 24px;
       top: 2px;
-      inset-inline-start: 22px;
+      @include d.start-value-set(--#{$component}-thumb-start, 22px);
     }
 
     .#{$component}__thumb-icon:not(.#{$component}__thumb-icon--unselected) {
@@ -308,11 +309,30 @@ $component: '#{base.$prefix}-switch';
       width: 28px;
       height: 28px;
       top: 0;
-      inset-inline-start: 0;
+      @include d.start-value-set(--#{$component}-thumb-start, 0);
     }
 
     &.#{$component}--checked .#{$component}__input:active ~ .#{$component}__track .#{$component}__thumb {
-      inset-inline-start: 20px;
+      @include d.start-value-set(--#{$component}-thumb-start, 20px);
+    }
+  }
+
+  // The mirrored handle and layer positions, one arm per subject: every
+  // state's move rides the custom property the arms form's base names, and a
+  // bundler lowers no custom property, so the move animates on whichever side
+  // the direction placed it — the transitions above already name both sides
+  // in the arms form. The arm resets the base side to auto, exactly as the
+  // logical property resolves one side per direction. Nothing of it in the
+  // logical form, where the insets mirror natively.
+  @include d.arms($self: true) {
+    .#{$component}__track::after {
+      left: auto;
+      right: var(--#{$component}-layer-start, -6px);
+    }
+
+    .#{$component}__thumb {
+      left: auto;
+      right: var(--#{$component}-thumb-start, 6px);
     }
   }
 

package/src/styles/components/_toolbar.scss

@@ -11,6 +11,7 @@
 @use '../../styles/abstract/variables' as v;
 @use '../../styles/abstract/functions' as f;
 @use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/direction' as d;
 @use '../../styles/abstract/theme' as t;
 
 $component: '#{base.$prefix}-toolbar';
@@ -143,12 +144,15 @@ $component: '#{base.$prefix}-toolbar';
     max-height: calc(100% - 2 * var(--#{$component}-margin));
   }
 
+  // The placement class sits on this root, which the runtime may also mark:
+  // the self form covers a marker on the toolbar itself
+  // (abstract/_direction.scss).
   &--start {
-    inset-inline-start: var(--#{$component}-margin);
+    @include d.start(var(--#{$component}-margin), $self: true);
   }
 
   &--end {
-    inset-inline-end: var(--#{$component}-margin);
+    @include d.end(var(--#{$component}-margin), $self: true);
   }
 
   &--floating.#{$component}--bottom {

package/src/styles/abstract/_config.scss

@@ -1,28 +0,0 @@
-// src/styles/abstract/_config.scss
-@use 'variables' as *;
-@forward 'variables';
-@forward 'functions';
-@forward 'mixins' show 
-  typography,
-  state-layer,
-  elevation,
-  motion-transition,
-  motion-exit,
-  motion-enter,
-  focus-ring,
-  interactive-states,
-  flex-center,
-  center-content,
-  container,
-  truncate,
-  shape,
-  breakpoint-up,
-  breakpoint-down,
-  breakpoint-between,
-  visually-hidden,
-  reduced-motion,
-  high-contrast,
-  rtl,
-  touch-target,
-  custom-scrollbar,
-  print;

package/src/styles/base/_foundation.scss

@@ -1,4 +0,0 @@
-// Tokens on the base stylesheet: shape, the two typefaces, and the three
-// body-medium typescale tokens the body rule reads. The rest of the
-// typescale is material/styles/typography.
-@use "tokens" with ($typescale-tokens: "body");

package/src/styles/base/_typescale.scss

@@ -1,9 +0,0 @@
-// Every typescale token, so material/styles/typography restores the scale on its
-// own. body-medium's font, size and line-height are also on the base, which
-// the body rule reads; the values match. Not imported by the full stylesheet:
-// base/tokens already emits every role there, once.
-@use "typescale-tokens" as scale;
-
-:root {
-  @include scale.tokens("all");
-}