@angular/material 17.0.0 → 17.0.2

package/autocomplete/_autocomplete-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -5,30 +6,62 @@
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
-      tokens-mat-autocomplete.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-color-tokens($theme));
+    }
   }
 }
 
-@mixin typography($theme) {}
+@mixin typography($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {}
+}
 
-@mixin density($theme) {}
+@mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));
+  }
+}

package/autocomplete/index.d.ts

@@ -400,8 +400,6 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
      * the state of the trigger right before the opening sequence was finished.
      */
     private _emitOpened;
-    /** Intended to be called when the panel is attached. Captures the current value of the input. */
-    private _captureValueOnAttach;
     /** Destroys the autocomplete suggestion panel. */
     private _destroyPanel;
     private _assignOptionValue;

package/badge/_badge-theme.scss

@@ -1,7 +1,7 @@
 @use 'sass:color';
+@use 'sass:map';
 @use 'sass:math';
 @use '@angular/cdk';
-
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -164,57 +164,89 @@ $_emit-fallback-vars: true;
   }
 }
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+        tokens-mat-badge.get-color-tokens($theme));
+    }
 
-  .mat-badge-accent {
-    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
-  }
+    .mat-badge-accent {
+      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+        tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
+    }
 
-  .mat-badge-warn {
-    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
+    .mat-badge-warn {
+      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+        tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+        tokens-mat-badge.get-typography-tokens($theme));
+    }
   }
 }
 
-@mixin density($theme) {}
+@mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
-    // Try to reduce the number of times that the structural styles are emitted.
-    @if not $_badge-structure-emitted {
-      @include _badge-structure;
-
-      // Only flip the flag if the mixin is included at the top level. Otherwise the first
-      // inclusion might be inside of a theme class which will exclude the structural styles
-      // from all other themes.
-      @if not & {
-        $_badge-structure-emitted: true !global;
-      }
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
+    @else {
+      // Try to reduce the number of times that the structural styles are emitted.
+      @if not $_badge-structure-emitted {
+        @include _badge-structure;
+
+        // Only flip the flag if the mixin is included at the top level. Otherwise the first
+        // inclusion might be inside of a theme class which will exclude the structural styles
+        // from all other themes.
+        @if not & {
+          $_badge-structure-emitted: true !global;
+        }
+      }
 
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
-    }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix, map.get($tokens, tokens-mat-badge.$prefix));
+  }
+}

package/bottom-sheet/_bottom-sheet-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/typography/typography';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -6,39 +7,71 @@
 @use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
 
 @mixin base($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(
-        tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(
+          tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
-      tokens-mat-bottom-sheet.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
+        tokens-mat-bottom-sheet.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
-      tokens-mat-bottom-sheet.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
+        tokens-mat-bottom-sheet.get-typography-tokens($theme));
+    }
   }
 }
 
-@mixin density($theme) {}
+@mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
-    }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-bottom-sheet.$prefix, map.get($tokens, tokens-mat-bottom-sheet.$prefix));
+  }
+}

package/button/_button-theme.scss

@@ -168,6 +168,13 @@
   @include mdc-helpers.using-mdc-typography($theme) {
     @include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
   }
+
+  .mat-mdc-button,
+  .mat-mdc-raised-button,
+  .mat-mdc-outlined-button,
+  .mat-mdc-unelevated-button {
+    line-height: inherit;
+  }
 }
 
 @mixin density($theme) {

package/button-toggle/_button-toggle-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -7,56 +8,89 @@
 @use '../core/style/sass-utils';
 
 @mixin base($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(
-        tokens-mat-legacy-button-toggle.$prefix,
-        tokens-mat-legacy-button-toggle.get-unthemable-tokens()
-    );
-    @include token-utils.create-token-values(
-        tokens-mat-standard-button-toggle.$prefix,
-        tokens-mat-standard-button-toggle.get-unthemable-tokens()
-    );
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(
+          tokens-mat-legacy-button-toggle.$prefix,
+          tokens-mat-legacy-button-toggle.get-unthemable-tokens()
+      );
+      @include token-utils.create-token-values(
+          tokens-mat-standard-button-toggle.$prefix,
+          tokens-mat-standard-button-toggle.get-unthemable-tokens()
+      );
+    }
   }
 }
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
-      tokens-mat-legacy-button-toggle.get-color-tokens($theme));
-    @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-      tokens-mat-standard-button-toggle.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
+        tokens-mat-legacy-button-toggle.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
-      tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
-    @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-      tokens-mat-standard-button-toggle.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
+        tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
-      tokens-mat-legacy-button-toggle.get-density-tokens($theme));
-    @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-      tokens-mat-standard-button-toggle.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
+        tokens-mat-legacy-button-toggle.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-density-tokens($theme));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
-    }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-standard-button-toggle.$prefix,
+        map.get($tokens, tokens-mat-standard-button-toggle.$prefix));
+  }
+}

package/chips/_chips-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use 'sass:color';
 @use '@material/chips/chip-theme' as mdc-chip-theme;
 @use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
@@ -6,63 +7,94 @@
 @use '../core/typography/typography';
 
 @mixin base($theme) {
-  .mat-mdc-standard-chip {
-    @include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    .mat-mdc-standard-chip {
+      @include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  .mat-mdc-standard-chip {
-    $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme);
-    @include mdc-chip-theme.theme($default-color-tokens);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    .mat-mdc-standard-chip {
+      $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme);
+      @include mdc-chip-theme.theme($default-color-tokens);
 
-    &.mat-mdc-chip-selected,
-    &.mat-mdc-chip-highlighted {
-      &.mat-primary {
-        $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
-        @include mdc-chip-theme.theme($primary-color-tokens);
-      }
+      &.mat-mdc-chip-selected,
+      &.mat-mdc-chip-highlighted {
+        &.mat-primary {
+          $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
+          @include mdc-chip-theme.theme($primary-color-tokens);
+        }
 
-      &.mat-accent {
-        $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
-        @include mdc-chip-theme.theme($accent-color-tokens);
-      }
+        &.mat-accent {
+          $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
+          @include mdc-chip-theme.theme($accent-color-tokens);
+        }
 
-      &.mat-warn {
-        $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
-        @include mdc-chip-theme.theme($warn-color-tokens);
+        &.mat-warn {
+          $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
+          @include mdc-chip-theme.theme($warn-color-tokens);
+        }
       }
     }
   }
 }
 
 @mixin typography($theme) {
-  $typography-tokens: tokens-mdc-chip.get-typography-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    $typography-tokens: tokens-mdc-chip.get-typography-tokens($theme);
 
-  .mat-mdc-standard-chip {
-    @include mdc-chip-theme.theme($typography-tokens);
+    .mat-mdc-standard-chip {
+      @include mdc-chip-theme.theme($typography-tokens);
+    }
   }
 }
 
 @mixin density($theme) {
-  $density-tokens: tokens-mdc-chip.get-density-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    $density-tokens: tokens-mdc-chip.get-density-tokens($theme);
 
-  .mat-mdc-chip.mat-mdc-standard-chip {
-    @include mdc-chip-theme.theme($density-tokens);
+    .mat-mdc-chip.mat-mdc-standard-chip {
+      @include mdc-chip-theme.theme($density-tokens);
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-chip-theme.theme(map.get($tokens, tokens-mdc-chip.$prefix));
+  }
+}

package/core/_core-theme.scss

@@ -60,10 +60,8 @@
 @mixin density($theme) {
   @include option-theme.density($theme);
   @include optgroup-theme.density($theme);
+  @include pseudo-checkbox-theme.density($theme);
   @include ripple-theme.density($theme);
-
-  // TODO(mmalerba): add density mixins for these.
-  // @include pseudo-checkbox-theme.density($theme);
 }
 
 // Mixin that renders all of the core styles that depend on the theme.