material 3.4.0 → 3.4.2

package/src/styles/components/_list.scss

@@ -79,6 +79,7 @@ $component: "#{base.$prefix}-list";
   }
   &__item--three-line &__leading--video { width: 114px; height: 64px; }
   &__action {
+    font: inherit;
     appearance: none;
     position: absolute;
     inset: 0;

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

@@ -63,6 +63,7 @@ $snap: 0s linear $midpoint;
     padding-inline-start: 20px;
   }
   &__toggle {
+    font: inherit;
     display: grid;
     place-items: center;
     position: relative;
@@ -93,6 +94,7 @@ $snap: 0s linear $midpoint;
   // Item: the hit target spans the rail; 64dp tall with the icon on top,
   // 56dp tall with the icon at the start.
   &__item {
+    font: inherit;
     position: relative;
     isolation: isolate;
     display: block;

package/src/styles/components/_radios.scss

@@ -60,6 +60,7 @@ $component: '#{base.$prefix}-radios';
 
   // Radio input
   &__input {
+    font: inherit;
     position: absolute;
     opacity: 0;
     height: 0;

package/src/styles/components/_search.scss

@@ -511,14 +511,11 @@ $transition-easing: cubic-bezier(0.2, 0, 0, 1);
 // Two-line items: 72dp, the second line Body Medium on-surface-variant.
 .#{$component}__suggestion-item--two-line {
     min-height: 72px;
-
-    .#{$component}__suggestion-text {
-        display: flex;
-        flex-direction: column;
-    }
 }
 
 .#{$component}__suggestion-supporting {
+    // Keep the headline's text and highlighted matches in one inline flow.
+    display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     @include m.typography("body-medium");

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

@@ -95,6 +95,7 @@ $component: "#{base.$prefix}-side-sheet";
 
     // 16dp on the icon side, per the specs' start padding with an icon
     &__close {
+        font: inherit;
         // The button is the layer's and the 48px target's containing block. That
         // cannot come from the state layer's `:where()` rule alone: it adds no
         // specificity, so a page reset like `button { position: static }` would
@@ -109,7 +110,7 @@ $component: "#{base.$prefix}-side-sheet";
         height: 40px;
         margin-inline-end: -8px;
         padding: 0;
-        border: none;
+        border: 0;
         border-radius: 50%;
         background: transparent;
         color: t.color("on-surface-variant");

package/src/styles/components/_slider.scss

@@ -182,7 +182,6 @@ $component: '#{base.$prefix}-slider';
 
     // Create a T-shaped handle using pseudo-elements
     &::before {
-      pointer-events: none;
       content: '';
       position: absolute;
       width: 4px;
@@ -205,13 +204,8 @@ $component: '#{base.$prefix}-slider';
       .#{$component}--error & {
         background-color: t.color('error');
       }
-      
-      .#{$component}--disabled & {
-        background-color: t.color('on-surface');
-        opacity: 0.38;
-      }
     }
-    
+
     // Disabled pointer events on the pseudo-element
     &::before {
       pointer-events: none;

package/src/styles/components/_switch.scss

@@ -70,6 +70,7 @@ $component: '#{base.$prefix}-switch';
 
   // Input (visually hidden but accessible)
   &__input {
+    font: inherit;
     position: absolute;
     opacity: 0;
     width: 100%;

package/src/styles/components/_timepicker.scss

@@ -388,6 +388,7 @@ $component: '#{base.$prefix}-time-picker';
   }
   
   &__toggle-type {
+    font: inherit;
     background: transparent;
     border: none;
     padding: 8px;

package/src/styles/components/_tooltip.scss

@@ -19,8 +19,6 @@ $arrow-size: 8px;
   border-radius: v.shape('extra-small'); // PlainTooltipTokens container-shape
   background-color: t.color('inverse-surface');
   color: t.color('inverse-on-surface');
-  font-size: 12px;
-  line-height: 16px;
   text-align: center;
   pointer-events: none;
   opacity: 0;

package/src/styles/elements/_text-field.scss

@@ -106,9 +106,15 @@
   }
 
   // Multiline reserves the textarea's box and first line. Compact multiline
-  // keeps the compact single-line height, as the upgraded input does.
+  // keeps the compact single-line height, as the upgraded input does. The
+  // value may hold line breaks: an inline-block's baseline is its last line,
+  // so each deeper line would push the page's baseline down and grow the
+  // host past the reserved box. An inline-flex container's baseline is its
+  // first item's, so the box and the first line stay put and the deeper
+  // lines stay clipped (#522).
   &[type='multiline'] {
     &::before {
+      display: inline-flex;
       height: v.text-field('height-multiline');
       padding-top: v.text-field('padding-top-multiline');
     }

package/src/styles/main.scss

@@ -20,7 +20,8 @@
 @use "utilities/visibility";
 @use "utilities/colors";
 @use "utilities/flexbox";
-@use "utilities/typography" as typo;
+// base/typography below emits the same `.mtrl-truncate` rule.
+@use "utilities/typography" as typo with ($compose-full: true);
 
 // Themes
 @use "themes/index";

package/src/styles/themes/_autumn.scss

@@ -59,19 +59,8 @@
     --#{$prefix}-sys-color-inverse-on-surface: #ffede5;
     --#{$prefix}-sys-color-inverse-primary: #ebbcac;
 
-    // Success colors
-    --#{$prefix}-sys-color-success: #85cfa9;
-    --#{$prefix}-sys-color-on-success: #00392d;
-
-    // Warning colors
-    --#{$prefix}-sys-color-warning: #ffb95c;
-    --#{$prefix}-sys-color-on-warning: #3f2200;
-
-    // Info colors
-    --#{$prefix}-sys-color-info: #99cbff;
-    --#{$prefix}-sys-color-on-info: #003060;
-
-    // Include status colors for light theme
+    // Success, warning, info and the error fallback, from the shared status
+    // roles (the values once written here were shadowed by this include)
     @include status-colors-light();
 
     &[data-theme-mode="dark"] {

package/src/styles/themes/_base-theme.scss

@@ -142,23 +142,32 @@ $contrast-emit: all !default;
   --#{$prefix}-sys-color-on-info: #003355;
 }
 
-// Common status colors that should be available in all themes
-@mixin status-colors-light() {
-  // Error colors
+// Error colours: the fallback for a theme whose palette sets no error family.
+// A generated theme's tokens always include the error roles, so it emits
+// status-roles-* alone and no earlier value is shadowed in its rule.
+@mixin status-error-light() {
   --#{$prefix}-sys-color-error: #B3261E;
   --#{$prefix}-sys-color-on-error: #FFFFFF;
   --#{$prefix}-sys-color-error-container: #F9DEDC;
   --#{$prefix}-sys-color-on-error-container: #410E0B;
-
-  @include status-roles-light();
 }
 
-@mixin status-colors-dark() {
-  // Error colors
+@mixin status-error-dark() {
   --#{$prefix}-sys-color-error: #F2B8B5;
   --#{$prefix}-sys-color-on-error: #601410;
   --#{$prefix}-sys-color-error-container: #8C1D18;
   --#{$prefix}-sys-color-on-error-container: #F9DEDC;
+}
+
+// Common status colors, for themes whose palette sets no error family
+@mixin status-colors-light() {
+  @include status-error-light();
+
+  @include status-roles-light();
+}
+
+@mixin status-colors-dark() {
+  @include status-error-dark();
 
   @include status-roles-dark();
 }

package/src/styles/themes/_brownbeige.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("brownbeige") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #ffb4a7;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_content.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("content") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #cfbcff;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_desert.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("desert") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #edc06c;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_expressive.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("expressive") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #79d7c0;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_fidelity.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("fidelity") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #cfbcff;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_fruit-salad.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("fruit-salad") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #97cbff;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_highcontrast.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("highcontrast") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #600004;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #98000a;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #cfbdfe;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffece9;
         --#{$prefix}-sys-color-on-error: #000000;
         --#{$prefix}-sys-color-error-container: #ffaea4;

package/src/styles/themes/_monochrome.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("monochrome") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #c6c6c6;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_neutral.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("neutral") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #cbc3d5;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_rainbow.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("rainbow") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #cfbcff;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_sageivory.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("sageivory") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #a8d292;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_summer.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("summer") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #95cdf7;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_tealcaramel.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("tealcaramel") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #84d2e7;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/themes/_vibrant.scss

@@ -7,8 +7,10 @@
 
 @include create-theme("vibrant") {
     // Success, warning and info, as every theme has them; the scheme's own
-    // roles, error included, follow
-    @include status-colors-light();
+    // roles, error family included, follow. The scheme always sets the error
+    // family, so status-colors-* would only emit defaults the declarations
+    // below shadow.
+    @include status-roles-light();
     --#{$prefix}-sys-color-error: #ba1a1a;
     --#{$prefix}-sys-color-on-error: #ffffff;
     --#{$prefix}-sys-color-error-container: #ffdad6;
@@ -57,7 +59,7 @@
     --#{$prefix}-sys-color-inverse-primary: #cfbcff;
 
     &[data-theme-mode="dark"] {
-        @include status-colors-dark();
+        @include status-roles-dark();
         --#{$prefix}-sys-color-error: #ffb4ab;
         --#{$prefix}-sys-color-on-error: #690005;
         --#{$prefix}-sys-color-error-container: #93000a;

package/src/styles/utilities/_typography.scss

@@ -104,9 +104,15 @@ $prefix: base.$prefix;
   -moz-osx-font-smoothing: auto;
 }
 
-// Text overflow
-.#{$prefix}-truncate {
-  @include m.truncate;
+// Text overflow. The full stylesheet also composes base/typography, whose
+// `.mtrl-truncate` is identical and later; main.scss sets this so the full
+// sheet carries one copy, while `material/styles/utilities` keeps its own.
+$compose-full: false !default;
+
+@if not $compose-full {
+  .#{$prefix}-truncate {
+    @include m.truncate;
+  }
 }
 
 .#{$prefix}-overflow-ellipsis {

package/src/styles/utilities/_visibility.scss

@@ -23,13 +23,8 @@ $prefix: base.$prefix;
   display: inline;
 }
 
-.#{$prefix}-flex {
-  display: flex;
-}
-
-.#{$prefix}-inline-flex {
-  display: inline-flex;
-}
+// `.mtrl-flex` and `.mtrl-inline-flex` live in utilities/flexbox: the full
+// stylesheet composed both files and emitted each class twice.
 
 .#{$prefix}-grid {
   display: grid;