@angular/material 18.1.0 → 18.1.2

package/slide-toggle/_slide-toggle-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,12 +15,12 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      $mat-tokens: tokens-mat-switch.get-unthemable-tokens();
-      $mdc-tokens: tokens-mdc-switch.get-unthemable-tokens();
-      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-unthemable-tokens());
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-unthemable-tokens());
       }
     }
   }
@@ -36,13 +35,12 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $mat-tokens: tokens-mat-switch.get-color-tokens($theme);
     $mdc-tokens: tokens-mdc-switch.get-color-tokens($theme);
 
     // Add values for MDC slide toggles tokens
     @include sass-utils.current-selector-or-root() {
-      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-color-tokens($theme));
 
       // TODO(wagnermaciel): Use our token system to define this css variable.
       --mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
@@ -52,19 +50,18 @@
         )};
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-color-tokens($theme));
 
         // Change the color palette related tokens to accent or warn if applicable
         &.mat-accent {
-          @include mdc-switch-theme.theme(
-            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent)
-          );
+          @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
         }
 
         &.mat-warn {
-          @include mdc-switch-theme.theme(
-            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn)
-          );
+          @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
         }
       }
     }
@@ -77,15 +74,13 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
-    $mat-tokens: tokens-mat-switch.get-typography-tokens($theme);
-    $mdc-tokens: tokens-mdc-switch.get-typography-tokens($theme);
-
-    // Add values for MDC slide toggle tokens
     @include sass-utils.current-selector-or-root() {
-      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-typography-tokens($theme));
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-typography-tokens($theme));
       }
     }
   }
@@ -98,12 +93,12 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      $mat-tokens: tokens-mat-switch.get-density-tokens($theme);
-      $mdc-tokens: tokens-mdc-switch.get-density-tokens($theme);
-      @include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-density-tokens($theme));
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-density-tokens($theme));
       }
     }
   }
@@ -158,6 +153,6 @@
   // only the mdc-switch does.
   $mat-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix);
 
-  @include mdc-switch-theme.theme($mdc-switch-tokens);
+  @include token-utils.create-token-values(tokens-mdc-switch.$prefix, $mdc-switch-tokens);
   @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-switch-tokens);
 }

package/slider/_slider-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/slider/slider-theme' as mdc-slider-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
@@ -16,11 +15,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
-    // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      $mat-tokens: tokens-mat-slider.get-unthemable-tokens();
-      @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-tokens);
-      @include mdc-slider-theme.theme(tokens-mdc-slider.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+        tokens-mat-slider.get-unthemable-tokens());
     }
   }
 }
@@ -35,40 +34,24 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-
-    $mdc-color-tokens: token-utils.resolve-elevation(
-        tokens-mdc-slider.get-color-tokens($theme),
-        handle-elevation,
-        handle-shadow-color
-    );
-
-    $mat-slider-color-tokens: tokens-mat-slider.get-color-tokens($theme);
-
-  // Add values for MDC slider tokens.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-slider-theme.theme($mdc-color-tokens);
-    @include token-utils.create-token-values(
-      tokens-mat-slider.$prefix,
-      $mat-slider-color-tokens
-    );
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+        tokens-mat-slider.get-color-tokens($theme));
 
-    .mat-accent {
-      @include token-utils.create-token-values(
-        tokens-mat-slider.$prefix,
-        tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent),
-      );
-      @include mdc-slider-theme.theme(
-        tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
-    }
+      .mat-accent {
+        @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+          tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
+        @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+          tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent));
+      }
 
       .mat-warn {
-        @include token-utils.create-token-values(
-          tokens-mat-slider.$prefix,
-          tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn),
-        );
-        @include mdc-slider-theme.theme(
-            tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
+        @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+          tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
+        @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+          tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn));
       }
     }
   }
@@ -82,9 +65,9 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    // Add values for MDC slider tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-slider-theme.theme(tokens-mdc-slider.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-typography-tokens($theme));
     }
   }
 }
@@ -97,9 +80,9 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    // Add values for MDC slider tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-slider-theme.theme(tokens-mdc-slider.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-density-tokens($theme));
     }
   }
 }
@@ -144,6 +127,6 @@
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-slider.$prefix, $options...);
   $mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...);
-  @include mdc-slider-theme.theme($mdc-slider-tokens);
+  @include token-utils.create-token-values(tokens-mdc-slider.$prefix, $mdc-slider-tokens);
   @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-slider-tokens);
 }

package/tabs/_tabs-common.scss

@@ -393,6 +393,20 @@ $mat-tab-animation-duration: 500ms !default;
   [mat-align-tabs='end'] > #{$parent} & {
     justify-content: flex-end;
   }
+
+  // Prevent the header from collapsing when it is a drop list. This is useful,
+  // because its height may become zero once all the tabs are dragged out.
+  // Note that ideally we would do this by default, rather than only in a drop
+  // list, but it ended up being hugely breaking internally.
+  .cdk-drop-list &,
+  &.cdk-drop-list {
+    @include token-utils.use-tokens(
+      tokens-mdc-secondary-navigation-tab.$prefix,
+      tokens-mdc-secondary-navigation-tab.get-token-slots()
+    ) {
+      @include token-utils.create-token-slot(min-height, container-height);
+    }
+  }
 }
 
 // Structural styles for the element that wraps the paginated container's content.

package/tabs/testing/index.d.ts

@@ -30,7 +30,7 @@ export declare class MatTabGroupHarness extends ComponentHarness {
     selectTab(filter?: TabHarnessFilters): Promise<void>;
 }
 
-/** Harness for interacting with an MDC_based Angular Material tab in tests. */
+/** Harness for interacting with an Angular Material tab in tests. */
 export declare class MatTabHarness extends ContentContainerComponentHarness<string> {
     /** The selector for the host element of a `MatTab` instance. */
     static hostSelector: string;

package/core/mdc-helpers/_mdc-helpers.scss

@@ -1,60 +0,0 @@
-// TODO(mmalerba): this file should be split into separate cohesive partials for things like
-//  "theming", "typography", "core".
-@use 'sass:string';
-@use '../typography/typography';
-@use '@material/feature-targeting' as mdc-feature-targeting;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/css' as mdc-theme-css;
-
-// A set of standard queries to use with MDC's queryable mixins.
-$mdc-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
-$mdc-base-styles-without-animation-query:
-    mdc-feature-targeting.all($mdc-base-styles-query, mdc-feature-targeting.without(animation));
-$mdc-theme-styles-query: color;
-$mdc-typography-styles-query: typography;
-
-// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
-// This function falls back to determining the tone based on whether the theme is light or dark.
-@function variable-safe-contrast-tone($value, $is-dark) {
-  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
-    @return mdc-theme-color.contrast-tone($value);
-  }
-
-  @return if($is-dark, 'light', 'dark');
-}
-
-// Function to create an Angular Material typography config from MDC's predefined typography levels.
-// This is used for components where we accidentally ended up supporting null typography configs
-// that were silently falling back to MDC's typography. At the moment of writing this includes
-// `dialog`, `slider` and `tooltip`.
-// Important! We shouldn't introduce any new usages of this pattern and we should eventually clean
-// up any existing usages.
-@function private-fallback-typography-from-mdc() {
-  // This is very close to what we have in `define-typography-config`, but we can't use it here,
-  // because it would cause a circular import and moving it here doesn't make sense.
-  $font-family: string.unquote('Roboto, sans-serif');
-  @return (
-    font-family: $font-family,
-    headline-1: typography.typography-config-level-from-mdc(headline1, $font-family),
-    headline-2: typography.typography-config-level-from-mdc(headline2, $font-family),
-    headline-3: typography.typography-config-level-from-mdc(headline3, $font-family),
-    headline-4: typography.typography-config-level-from-mdc(headline4, $font-family),
-    headline-5: typography.typography-config-level-from-mdc(headline5, $font-family),
-    headline-6: typography.typography-config-level-from-mdc(headline6, $font-family),
-    subtitle-1: typography.typography-config-level-from-mdc(subtitle1, $font-family),
-    subtitle-2: typography.typography-config-level-from-mdc(subtitle2, $font-family),
-    body-1: typography.typography-config-level-from-mdc(body1, $font-family),
-    body-2: typography.typography-config-level-from-mdc(body2, $font-family),
-    caption: typography.typography-config-level-from-mdc(caption, $font-family),
-    button: typography.typography-config-level-from-mdc(button, $font-family),
-    overline: typography.typography-config-level-from-mdc(overline, $font-family),
-  );
-}
-
-// Disables MDC's CSS custom property fallbacks for the specified mixin content.
-@mixin disable-mdc-fallback-declarations {
-  $previous-value: mdc-theme-css.$enable-fallback-declarations;
-  mdc-theme-css.$enable-fallback-declarations: false;
-  @content;
-  mdc-theme-css.$enable-fallback-declarations: $previous-value;
-}