@angular/material 18.1.0-rc.0 → 18.1.1

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/list/_list-option-trailing-avatar-compat.scss

@@ -1,59 +0,0 @@
-@use '@material/feature-targeting/feature-targeting';
-@use '@material/list/evolution-mixins' as mdc-list;
-@use '../core/mdc-helpers/mdc-helpers';
-
-// For compatibility with the non-MDC selection list, we support avatars that are
-// shown at the end of the list option. This is not supported by the MDC list as the
-// spec only defines avatars at the beginning of a list item. For selection list options,
-// we support changing the checkbox position to `before`. This results in the avatar from
-// the list start being moved to the end. Similar to MDC's `--trailing-icon` class, we
-// implement a `--trailing-avatar` class that is based on the original `--leading-avatar`
-// implementation. See: https://github.com/material-components/material-components-web/blob/3f342c3f4715fd3587f327ce4ea6b5dd314c5c55/packages/mdc-list/_evolution-mixins.scss#L198-L217
-
-@mixin core-styles($query) {
-  $feat-structure: feature-targeting.create-target($query, structure);
-
-  @include mdc-helpers.disable-mdc-fallback-declarations {
-    .mat-mdc-list-option-with-trailing-avatar {
-      @include mdc-list.item-end-spacing(16px, $query: $query);
-      @include mdc-list.item-end-size(40px, $query: $query);
-
-      &.mdc-list-item--with-two-lines {
-        $top: 32px;
-        $bottom: 20px;
-
-        .mdc-list-item__primary-text {
-          display: block;
-          margin-top: 0;
-          line-height: normal;
-          margin-bottom: $bottom * -1;
-
-          // This was used by MDC to set the text baseline. We should figure out a way to
-          // remove it, because it can introduce unnecessary whitespace at the beginning
-          // of the element.
-          &::before {
-            display: inline-block;
-            width: 0;
-            height: $top;
-            content: '';
-            vertical-align: 0;
-          }
-
-          &::after {
-            display: inline-block;
-            width: 0;
-            height: $bottom;
-            content: '';
-            vertical-align: $bottom * -1;
-          }
-        }
-      }
-
-      .mdc-list-item__end {
-        @include feature-targeting.targets($feat-structure) {
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-}