material 3.4.3 → 3.5.0

package/src/styles/components/_chips.scss

@@ -4,6 +4,7 @@
 @use "../abstract/functions" as f;
 @use "../abstract/mixins" as m;
 @use "../abstract/theme" as t;
+@use "../abstract/direction" as d;
 @use "../abstract/chips/assist";
 @use "../abstract/chips/filter";
 @use "../abstract/chips/input";
@@ -83,10 +84,25 @@ $container: "#{base.$prefix}-chips";
         padding: 0;
         padding-inline-end: 8px;
         justify-content: flex-start;
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
+        // The start corners only, without the arm: one aggregated arm below
+        // carries the mirrored form for both subjects at a shorter prelude
+        // than a per-subject arm (abstract/_direction.scss).
+        @include d.corners($start-start: 0, $end-start: 0, $arm: false);
         color: var(--#{base.$prefix}-chip-trailing-color);
     }
+    // Both mirrored forms in one arm at one prelude, after the rule whose
+    // corners it replaces; `inherit` restates the chip's radius before the
+    // end corners are zeroed. The subject list is bare, so a mark on the chip
+    // root reaches it. Nothing of this in the logical form, where the two
+    // start corners mirror natively.
+    @include d.arms-at-root(
+      ":where(.#{base.$prefix}-rtl, :host(.#{base.$prefix}-rtl), [dir='rtl'])" +
+      " :is(.#{$component}__remove, .#{$component}__trailing-action):not(.#{base.$prefix}-ltr *)"
+    ) {
+        border-radius: inherit;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
     // m3.material.io, Chips: "Secondary actions (such as a trailing icon button
     // for Remove) must have a 48x48dp interaction target that doesn't interfere
     // with the chip's primary action (such as Edit or Drag). To achieve this,
@@ -218,7 +234,11 @@ $container: "#{base.$prefix}-chips";
         content: "";
         position: absolute;
         top: 50%;
-        inset-inline-end: 0;
+        // The 48dp box runs back from the chip's end edge, as on main. The
+        // end inset goes through the direction switch, so the artefacts a
+        // consumer bundler lowers carry the physical side with its arm and
+        // no :lang() lowering can drag the box off the end edge.
+        @include d.end(0);
         width: 48px;
         height: 48px;
         transform: translateY(-50%);

package/src/styles/components/_datepicker.scss

@@ -1,9 +1,17 @@
 // Compose DatePickerModalTokens: 360px container, 120px header, 40px date state
 // layers, 36x72px year state layers, extra-large corners and elevation level 3.
+//
+// The single-side insets go through the direction switch
+// (abstract/_direction.scss): the runtime-adopted sheets keep the logical
+// `inset-inline-*` properties, and the artefacts a consumer bundler lowers
+// carry the physical side with a direction arm, so the bundler's :lang()
+// lowering cannot pin the trigger, the docked calendar or the full-screen
+// buttons to the left-to-right side of a right-to-left page.
 @use '../abstract/base' as base;
 @use '../abstract/variables' as v;
 @use '../abstract/mixins' as m;
 @use '../abstract/theme' as t;
+@use '../abstract/direction' as d;
 
 $component: '#{base.$prefix}-datepicker';
 .#{$component} {
@@ -17,16 +25,30 @@ $component: '#{base.$prefix}-datepicker';
   contain: inline-size;
   contain-intrinsic-inline-size: v.text-field('width');
   color: t.color('on-surface');
-  // The physical range band and chevron flip: left-to-right at the root,
-  // right-to-left under the direction arm. The defaults are declared here, not
-  // only used as var() fallbacks, because a custom property inherits: a nested
-  // LTR instance must not read its RTL parent's values.
+  // The physical range band, its bleed into the grid padding, and the chevron
+  // flip: left-to-right at the root, right-to-left under the direction arm.
+  // The defaults are declared here, not only used as var() fallbacks, because
+  // a custom property inherits: a nested LTR instance must not read its RTL
+  // parent's values. The bleed is a value here rather than a physical-pair arm
+  // on the ::before: the arm's `:not(.mtrl-ltr *)` cut sits after the
+  // pseudo-element, which no combinator can match, so an LTR instance in an
+  // RTL page would take the RTL band. These are flipped values, not properties
+  // a bundler lowers, so the arm is written directly and rides in both forms
+  // (abstract/_mixins.scss rtl).
   --#{$component}-start: 100% 0;
   --#{$component}-end: 0 0;
+  --#{$component}-bleed-first-left: auto;
+  --#{$component}-bleed-first-right: 100%;
+  --#{$component}-bleed-last-left: 100%;
+  --#{$component}-bleed-last-right: auto;
   --#{$component}-flip: none;
   @include m.rtl($self: true) {
     --#{$component}-start: 0 0;
     --#{$component}-end: 100% 0;
+    --#{$component}-bleed-first-left: 100%;
+    --#{$component}-bleed-first-right: auto;
+    --#{$component}-bleed-last-left: auto;
+    --#{$component}-bleed-last-right: 100%;
     --#{$component}-flip: scaleX(-1);
   }
   &__anchor { display: flex; position: relative; }
@@ -44,7 +66,7 @@ $component: '#{base.$prefix}-datepicker';
   &__anchor &__input { padding-inline-end: 56px; }
   // Normalize only the icon controls; their own font-size rules follow.
   &__trigger, &__mode-toggle, &__prev, &__next, &__close { font: inherit; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
-  &__trigger { position: absolute; inset-inline-end: 4px; top: 4px; font-size: 24px; }
+  &__trigger { position: absolute; top: 4px; @include d.end(4px); font-size: 24px; }
   &__help, &__error { @include m.typography('body-small'); padding: 4px 16px 0; }
   &__help { color: t.color('on-surface-variant'); }
   &__error { color: t.color('error'); &:empty { display: none; } }
@@ -65,8 +87,12 @@ $component: '#{base.$prefix}-datepicker';
     border-radius: 0; box-shadow: none; overflow: hidden;
     .#{$component}__content { height: 100%; }
     .#{$component}__modal-header { min-height: 128px; padding: 64px 64px 12px; }
-    .#{$component}__close { position: absolute; inset-inline-start: 4px; top: 4px; }
-    .#{$component}__save { position: absolute; inset-inline-end: 12px; top: 8px; }
+    .#{$component}__close {
+      position: absolute; top: 4px; @include d.start(4px);
+    }
+    .#{$component}__save {
+      position: absolute; top: 8px; @include d.end(12px);
+    }
     .#{$component}__title { margin-bottom: 0; }
     .#{$component}__headline { @include m.typography('title-large'); }
     .#{$component}__weekdays { padding: 0 var(--#{$component}-grid-inset); }
@@ -75,7 +101,9 @@ $component: '#{base.$prefix}-datepicker';
   &__subhead { @include m.typography('title-small'); color: t.color('on-surface-variant'); padding: 20px 24px 8px; }
   // Docked: corner-large (16dp), where the dialogs are extra-large.
   &--docked { border-radius: v.shape('large'); }
-  &--docked { position: absolute; inset: auto; top: 100%; inset-inline-start: 0; margin: 8px 0 0; z-index: v.z-index('dropdown'); }
+  &--docked {
+    position: absolute; inset: auto; top: 100%; @include d.start(0); margin: 8px 0 0; z-index: v.z-index('dropdown');
+  }
   &__content { display: flex; flex-direction: column; }
   &__modal-header {
     position: relative; box-sizing: border-box; min-height: 120px; padding: 16px 64px 16px 24px;
@@ -85,7 +113,27 @@ $component: '#{base.$prefix}-datepicker';
   &--range &__headline { @include m.typography('title-large'); }
   &__title { @include m.typography('label-large'); margin-bottom: 20px; }
   &__headline { @include m.typography('headline-large'); overflow-wrap: anywhere; }
-  &__mode-toggle { position: absolute; inset-inline-end: 12px; bottom: 12px; font-size: 24px; }
+  &__mode-toggle {
+    position: absolute; @include d.end(12px); bottom: 12px; font-size: 24px;
+  }
+  // The arms above need the marker on an ancestor, and dir="rtl" may sit on
+  // this root instead — the runtime resolves the factory root from the
+  // nearest [dir], itself included (src/core/dom/direction.ts). These
+  // root-carried forms follow the inline arms, as the split-button's do.
+  // Nothing of them in the logical form.
+  @include d.arms-self-only {
+    .#{$component}__trigger { right: auto; left: 4px; }
+    .#{$component}__mode-toggle { right: auto; left: 12px; }
+  }
+  &--fullscreen {
+    @include d.arms-self-only {
+      .#{$component}__close { left: auto; right: 4px; }
+      .#{$component}__save { right: auto; left: 12px; }
+    }
+  }
+  &--docked {
+    @include d.arms-self-only { left: auto; right: 0; }
+  }
   // The month and year row is 56dp, as in Compose (48dp buttons, 4dp above and below).
   &__header { display: flex; align-items: center; padding: 4px 12px; min-height: 56px; box-sizing: border-box; }
   &__navigation { display: flex; flex: 1; }
@@ -133,8 +181,14 @@ $component: '#{base.$prefix}-datepicker';
     content: ''; position: absolute; top: 4px; width: var(--#{$component}-grid-inset); height: 40px;
     background: t.color('secondary-container');
   }
-  &__cell--range:last-child::before { inset-inline-start: 100%; }
-  &__cell--range:first-child::before { inset-inline-end: 100%; }
+  &__cell--range:last-child::before {
+    left: var(--#{$component}-bleed-last-left);
+    right: var(--#{$component}-bleed-last-right);
+  }
+  &__cell--range:first-child::before {
+    left: var(--#{$component}-bleed-first-left);
+    right: var(--#{$component}-bleed-first-right);
+  }
   &__day {
     position: relative; isolation: isolate; width: 100%; height: 48px; padding: 0; border: 0;
     background: transparent; color: t.color('on-surface'); cursor: pointer;

package/src/styles/components/_extended-fab.scss

@@ -5,6 +5,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}-extended-fab';
 
@@ -260,24 +261,19 @@ $sizes: (
   }
 
   // A logical corner follows the inline direction; the physical aliases stay
-  // put. Bundlers lower inset-inline-start into :lang() arms that miss
-  // dir="rtl" (src/styles/components/_text-field.scss), about 1.5 kB of the
-  // built full sheet per declaration, so the flip is written as direction
-  // arms instead.
+  // put. The flip goes through the direction switch
+  // (abstract/_direction.scss): the bundler-lowered artefacts carry it as a
+  // direction arm, because a bundler lowers inset-inline-start into :lang()
+  // arms that miss dir="rtl" (src/styles/components/_text-field.scss), and
+  // the adopted sheets carry the logical property itself.
   &--top-start,
   &--bottom-start {
-    @include m.rtl(true) {
-      left: auto;
-      right: 16px;
-    }
+    @include d.flip-start(16px);
   }
 
   &--top-end,
   &--bottom-end {
-    @include m.rtl(true) {
-      right: auto;
-      left: 16px;
-    }
+    @include d.flip-end(16px);
   }
   
   // Animation effects

package/src/styles/components/_fab-menu.scss

@@ -13,6 +13,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}-fab-menu';
@@ -66,43 +67,21 @@ $swap: 48ms;
   }
 
   &--bottom-end {
-    right: var(--#{$component}-margin);
-
-    @include m.rtl(true) {
-      left: var(--#{$component}-margin);
-      right: auto;
-    }
+    @include d.end(var(--#{$component}-margin), $self: true);
   }
 
   &--bottom-start {
-    left: var(--#{$component}-margin);
-
-    @include m.rtl(true) {
-      right: var(--#{$component}-margin);
-      left: auto;
-    }
+    @include d.start(var(--#{$component}-margin), $self: true);
 
     // Into the page from this edge. The shared rules stay on the inline end,
     // which is where bottom-end and an unplaced menu already open.
     .#{$fab}.#{$component}__fab {
-      left: 0;
-      right: auto;
-
-      @include m.rtl {
-        right: 0;
-        left: auto;
-      }
+      @include d.sides(0, auto);
     }
 
     .#{$component}__list {
-      left: 0;
-      right: auto;
+      @include d.sides(0, auto);
       align-items: flex-start;
-
-      @include m.rtl {
-        right: 0;
-        left: auto;
-      }
     }
 
     .#{$component}__item {
@@ -115,7 +94,7 @@ $swap: 48ms;
   @at-root .#{$fab}.#{$component}__fab {
     position: absolute;
     inset-block-start: 0;
-    right: 0;
+    @include d.end(0);
     display: grid;
     place-items: center;
     transition:
@@ -126,12 +105,6 @@ $swap: 48ms;
       color $spatial-colour,
       box-shadow $spatial;
 
-    // The corner follows the inline direction; the rule above is its
-    // left-to-right form.
-    @include m.rtl {
-      left: 0;
-      right: auto;
-    }
 
     > * {
       grid-area: 1 / 1;
@@ -182,7 +155,7 @@ $swap: 48ms;
   &__list {
     position: absolute;
     bottom: calc(100% + 8px);
-    right: 0;
+    @include d.end(0);
     display: flex;
     flex-direction: column;
     align-items: flex-end;
@@ -192,27 +165,26 @@ $swap: 48ms;
     // Hidden once the last item has left
     transition: visibility 0s linear var(--#{$component}-exit, 0ms);
 
-    // The end edge follows the inline direction.
-    @include m.rtl {
-      left: 0;
-      right: auto;
-    }
   }
 
   // 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; a root-carried [dir] does reach the
   // inner parts through the at-root attribute arm, but that arm sets the
-  // left-to-right edges, so this root-carried form is written after it.
-  &--bottom-start:where(.#{base.$prefix}-rtl, [dir='rtl']) {
-    .#{$fab}.#{$component}__fab {
-      right: 0;
-      left: auto;
-    }
+  // left-to-right edges, so this root-carried form is written after it
+  // (abstract/_direction.scss: nothing in the logical form, where the edges
+  // mirror natively).
+  &--bottom-start {
+    @include d.arms-self-only {
+      .#{$fab}.#{$component}__fab {
+        right: 0;
+        left: auto;
+      }
 
-    .#{$component}__list {
-      right: 0;
-      left: auto;
+      .#{$component}__list {
+        right: 0;
+        left: auto;
+      }
     }
   }
 

package/src/styles/components/_fab.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}-fab';
 
@@ -195,24 +196,19 @@ $component: '#{base.$prefix}-fab';
   }
 
   // A logical corner follows the inline direction; the physical aliases stay
-  // put. Bundlers lower inset-inline-start into :lang() arms that miss
-  // dir="rtl" (src/styles/components/_text-field.scss), about 1.5 kB of the
-  // built full sheet per declaration, so the flip is written as direction
-  // arms instead.
+  // put. The flip goes through the direction switch
+  // (abstract/_direction.scss): the bundler-lowered artefacts carry it as a
+  // direction arm, because a bundler lowers inset-inline-start into :lang()
+  // arms that miss dir="rtl" (src/styles/components/_text-field.scss), and
+  // the adopted sheets carry the logical property itself.
   &--top-start,
   &--bottom-start {
-    @include m.rtl(true) {
-      left: auto;
-      right: 16px;
-    }
+    @include d.flip-start(16px);
   }
 
   &--top-end,
   &--bottom-end {
-    @include m.rtl(true) {
-      right: auto;
-      left: 16px;
-    }
+    @include d.flip-end(16px);
   }
   
   // Optional animations

package/src/styles/components/_list.scss

@@ -18,6 +18,7 @@
 @use "../abstract/mixins" as m;
 @use "../abstract/theme" as t;
 @use "../abstract/variables" as v;
+@use "../abstract/direction" as d;
 
 $component: "#{base.$prefix}-list";
 .#{$component} {
@@ -104,15 +105,23 @@ $component: "#{base.$prefix}-list";
     > .#{$component}__item:not(.#{$component}__item--selected) { background: var(--#{base.$prefix}-list-item-container-color, t.color("surface-container")); }
     // Outer corners of a group (the first row, the last, and a row beside a
     // divider or subheader) are large. Specs, 2026-10-02: 4dp inner, 16dp outer.
+    // Block-edge pairs, which mirror to themselves: the arms form carries the
+    // physical pair with no direction arm.
     > .#{$component}__item:first-child,
     > :not(.#{$component}__item) + .#{$component}__item {
-      border-start-start-radius: var(--#{base.$prefix}-list-item-shape-outer, v.shape('large'));
-      border-start-end-radius: var(--#{base.$prefix}-list-item-shape-outer, v.shape('large'));
+      @include d.corners(
+        $start-start: var(--#{base.$prefix}-list-item-shape-outer, v.shape('large')),
+        $start-end: var(--#{base.$prefix}-list-item-shape-outer, v.shape('large')),
+        $arm: false
+      );
     }
     > .#{$component}__item:last-child,
     > .#{$component}__item:has(+ :not(.#{$component}__item)) {
-      border-end-start-radius: var(--#{base.$prefix}-list-item-shape-outer, v.shape('large'));
-      border-end-end-radius: var(--#{base.$prefix}-list-item-shape-outer, v.shape('large'));
+      @include d.corners(
+        $end-start: var(--#{base.$prefix}-list-item-shape-outer, v.shape('large')),
+        $end-end: var(--#{base.$prefix}-list-item-shape-outer, v.shape('large')),
+        $arm: false
+      );
     }
     // Hover, keyboard focus, press and selection replace that shape on every
     // corner. Focus is the row's own action under :focus-visible, so a click

package/src/styles/components/_menu.scss

@@ -4,6 +4,7 @@
 @use "../../styles/abstract/mixins" as m;
 @use "../../styles/abstract/functions" as f;
 @use "../../styles/abstract/theme" as t;
+@use "../../styles/abstract/direction" as d;
 
 $prefix: base.$prefix;
 
@@ -475,14 +476,14 @@ $component: "#{$prefix}-menu";
             }
 
             // The ends of the column round outwards, so the items read as one
+            // (a block edge, not an inline one: the pair mirrors to itself,
+            // so the arms form needs no direction arm).
             &:first-child {
-                border-start-start-radius: v.shape("medium");
-                border-start-end-radius: v.shape("medium");
+                @include d.corners($start-start: v.shape("medium"), $start-end: v.shape("medium"), $arm: false);
             }
 
             &:last-child {
-                border-end-start-radius: v.shape("medium");
-                border-end-end-radius: v.shape("medium");
+                @include d.corners($end-start: v.shape("medium"), $end-end: v.shape("medium"), $arm: false);
             }
 
             &--selected {
@@ -638,14 +639,13 @@ $component: "#{$prefix}-menu";
             // one menu that has been cut, rather than as loose cards.
             border-radius: v.shape("small");
 
+            // Block edges again: the pairs mirror to themselves
             &:first-child {
-                border-start-start-radius: v.shape("large"); // ContainerShape
-                border-start-end-radius: v.shape("large");
+                @include d.corners($start-start: v.shape("large"), $start-end: v.shape("large"), $arm: false); // ContainerShape
             }
 
             &:last-child {
-                border-end-start-radius: v.shape("large");
-                border-end-end-radius: v.shape("large");
+                @include d.corners($end-start: v.shape("large"), $end-end: v.shape("large"), $arm: false);
             }
 
             // its own margin would add to the list gap

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

@@ -2,6 +2,7 @@
 @use '../abstract/theme' as t;
 @use '../abstract/mixins' as m;
 @use '../abstract/variables' as v;
+@use '../abstract/direction' as d;
 
 // M3 Expressive navigation bar: Compose ShortNavigationBar with
 // NavigationBarTokens, NavigationBarVerticalItemTokens and
@@ -29,10 +30,15 @@ $spatial: v.motion('spring-default-spatial-duration') v.motion('spring-default-s
   }
   .#{$component}__indicator {
     inset-block-start: 6px;
-    inset-inline-start: 50%;
+    // A centred symmetric box mirrors to itself: physical sides and a physical
+    // centring margin place the pill at the item's centre in every direction,
+    // with no arm at all. The horizontal form the container query switches
+    // `--auto` to at 600px lives at (0,2,0); a direction arm here would carry
+    // the [dir] prelude's extra class and outrank it, collapsing the pill.
+    left: 50%;
+    margin-left: -28px;
     inline-size: 56px;
     block-size: 32px;
-    margin-inline-start: -28px;
   }
   // The icon is centred in the indicator: 4dp below its top edge
   .#{$component}__icon { margin-block-start: 4px; }
@@ -40,11 +46,14 @@ $spatial: v.motion('spring-default-spatial-duration') v.motion('spring-default-s
   .#{$component}__label { margin-block-start: 8px; }
   .#{$component}__item--active .#{$component}__label { color: t.color('secondary'); }
   // BadgedBox: a large badge's start at the icon's end less 12dp, its bottom 14dp
-  // below the icon's top; the dot 6dp in from the icon's end, at its top
+  // below the icon's top; the dot 6dp in from the icon's end, at its top. The
+  // dot is the badge's anchor shifted by its own property, so the direction
+  // arms mirror the badge alone. The mirrored form is aggregated after the
+  // component block (d.arms), naming both variants this mixin serves.
   .#{$component}__badge {
-    inset-inline-start: 50%;
+    @include d.start(calc(50% + var(--#{$component}-dot-shift, 0px)), $arm: false);
     inset-block-start: 8px;
-    &--dot { inset-inline-start: calc(50% + 6px); inset-block-start: 10px; }
+    &--dot { --#{$component}-dot-shift: 6px; inset-block-start: 10px; }
   }
 }
 
@@ -75,9 +84,15 @@ $spatial: v.motion('spring-default-spatial-duration') v.motion('spring-default-s
   // The horizontal item's active label takes the icon's colour (Compose, pending its own token)
   .#{$component}__item--active .#{$component}__label { color: t.color('on-secondary-container'); }
   .#{$component}__badge {
-    inset-inline-start: 28px;
+    @include d.start(calc(28px + var(--#{$component}-dot-shift, 0px)), $arm: false);
     inset-block-start: 6px;
-    &--dot { inset-inline-start: 34px; inset-block-start: 8px; }
+    &--dot { --#{$component}-dot-shift: 6px; inset-block-start: 8px; }
+  }
+
+  // As the vertical form's: the start side, mirrored by one arm that also
+  // matches the marker on the root carrying this variant.
+  @include d.arms($self: true) {
+    .#{$component}__badge { right: calc(28px + var(--#{$component}-dot-shift, 0px)); left: auto; }
   }
 }
 
@@ -231,6 +246,18 @@ $spatial: v.motion('spring-default-spatial-duration') v.motion('spring-default-s
   }
 }
 
+// The vertical items' mirrored form — the badge and its dot; the pill needs
+// no arm (see the mixin: it is centred by physical sides alone). The :is()
+// names both variants the mixin serves, halving the preludes every shipped
+// copy of the sheet pays, and the self arm still matches a marker on the root
+// that carries the variant. Nothing in the logical form, where the badge's
+// inset mirrors natively.
+:is(.#{$component}--vertical, .#{$component}--auto) {
+  @include d.arms($self: true) {
+    .#{$component}__badge { right: calc(50% + var(--#{$component}-dot-shift, 0px)); left: auto; }
+  }
+}
+
 // 'auto': horizontal items once the bar itself is 600px wide (MDC's medium threshold)
 @container #{$component} (min-width: 600px) {
   .#{$component}--auto { @include horizontal; }