@angular/material 17.1.0-next.2 → 17.1.0-rc.0

package/core/tokens/m2/mdc/_extended-fab.scss

@@ -12,19 +12,15 @@ $prefix: (mdc, extended-fab);
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
     container-color: null,
-    container-elevation: null,
     container-height: null,
-    container-shadow-color: null,
     container-shape: null,
     container-surface-tint-layer-color: null,
-    focus-container-elevation: null,
     focus-icon-color: null,
     focus-label-text-color: null,
     focus-outline-color: null,
     focus-outline-width: null,
     focus-state-layer-color: null,
     focus-state-layer-opacity: null,
-    hover-container-elevation: null,
     hover-icon-color: null,
     hover-label-text-color: null,
     hover-state-layer-color: null,
@@ -36,7 +32,6 @@ $prefix: (mdc, extended-fab);
     lowered-focus-container-elevation: null,
     lowered-hover-container-elevation: null,
     lowered-pressed-container-elevation: null,
-    pressed-container-elevation: null,
     pressed-icon-color: null,
     pressed-label-text-color: null,
     pressed-ripple-color: null,
@@ -48,7 +43,13 @@ $prefix: (mdc, extended-fab);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return ();
+  @return (
+    container-elevation: 6,
+    focus-container-elevation: 8,
+    hover-container-elevation: 8,
+    pressed-container-elevation: 12,
+    container-shadow-color: #000,
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

package/core/tokens/m2/mdc/_fab.scss

@@ -29,20 +29,16 @@ $ripple-target: '.mdc-fab__ripple';
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
-    container-elevation: null,
     container-height: null,
-    container-shadow-color: null,
     container-surface-tint-layer-color: null,
     container-width: null,
 
-    focus-container-elevation: null,
     focus-icon-color: null,
     focus-outline-color: null,
     focus-outline-width: null,
     focus-state-layer-color: null,
     focus-state-layer-opacity: null,
 
-    hover-container-elevation: null,
     hover-icon-color: null,
     hover-state-layer-color: null,
     hover-state-layer-opacity: null,
@@ -52,7 +48,6 @@ $ripple-target: '.mdc-fab__ripple';
     lowered-hover-container-elevation: null,
     lowered-pressed-container-elevation: null,
 
-    pressed-container-elevation: null,
     pressed-icon-color: null,
     pressed-ripple-color: null,
     pressed-ripple-opacity: null,
@@ -66,6 +61,11 @@ $ripple-target: '.mdc-fab__ripple';
   @return (
     // Background color of the FAB.
     container-color: inspection.get-theme-color($theme, background, card),
+    container-elevation: 6,
+    focus-container-elevation: 8,
+    hover-container-elevation: 8,
+    pressed-container-elevation: 12,
+    container-shadow-color: #000,
   );
 }
 

package/core/tokens/m2/mdc/_filled-button.scss

@@ -17,12 +17,6 @@ $prefix: (mdc, filled-button);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
-    container-elevation: 0,
-    disabled-container-elevation: 0,
-    focus-container-elevation: 0,
-    hover-container-elevation: 0,
-    keep-touch-target: false,
-    pressed-container-elevation: 0,
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -33,13 +27,14 @@ $prefix: (mdc, filled-button);
     hover-state-layer-opacity: null,
     pressed-state-layer-opacity: null,
     container-shadow-color: null,
+    container-elevation: null,
+    disabled-container-elevation: null,
+    focus-container-elevation: null,
+    hover-container-elevation: null,
+    keep-touch-target: false,
+    pressed-container-elevation: null,
     focus-label-text-color: null,
     hover-label-text-color: null,
-    label-text-font: null,
-    label-text-size: null,
-    label-text-tracking: null,
-    label-text-transform: null,
-    label-text-weight: null,
     pressed-label-text-color: null,
     with-icon-disabled-icon-color: null,
     with-icon-focus-icon-color: null,
@@ -81,7 +76,13 @@ $prefix: (mdc, filled-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

package/core/tokens/m2/mdc/_outlined-button.scss

@@ -49,12 +49,6 @@ $prefix: (mdc, outlined-button);
     with-icon-focus-icon-color: null,
     with-icon-pressed-icon-color: null,
     with-icon-disabled-icon-color: null,
-
-    label-text-size: null,
-    label-text-font: null,
-    label-text-weight: null,
-    label-text-tracking: null,
-    label-text-transform: null
   );
 }
 
@@ -87,7 +81,13 @@ $prefix: (mdc, outlined-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

package/core/tokens/m2/mdc/_protected-button.scss

@@ -27,17 +27,6 @@ $prefix: (mdc, protected-button);
     focus-state-layer-opacity: null,
     hover-state-layer-opacity: null,
     pressed-state-layer-opacity: null,
-    container-shadow-color: null,
-    container-elevation: null,
-    hover-container-elevation: null,
-    disabled-container-elevation: null,
-    focus-container-elevation: null,
-    pressed-container-elevation: null,
-    label-text-font: null,
-    label-text-size: null,
-    label-text-tracking: null,
-    label-text-transform: null,
-    label-text-weight: null,
     with-icon-icon-size: null,
     focus-label-text-color: null,
     hover-label-text-color: null,
@@ -62,7 +51,13 @@ $prefix: (mdc, protected-button);
     container-color: inspection.get-theme-color($theme, background, card),
     label-text-color: $on-surface,
     disabled-container-color: rgba($on-surface, 0.12),
-    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38))
+    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+    container-elevation: 2,
+    disabled-container-elevation: 0,
+    focus-container-elevation: 4,
+    hover-container-elevation: 4,
+    pressed-container-elevation: 8,
+    container-shadow-color: #000,
   );
 }
 
@@ -80,7 +75,13 @@ $prefix: (mdc, protected-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

package/core/tokens/m2/mdc/_text-button.scss

@@ -17,17 +17,6 @@ $prefix: (mdc, text-button);
   @return (
     container-shape: 4px,
 
-    // TODO: `container-height` is also included so it has a default value to
-    // prevent the buttons from collapsing if a density mixin isn't included.
-    container-height: 36px,
-
-    // TODO: handle these through the typography styles eventually.
-    label-text-font: null,
-    label-text-size: null,
-    label-text-tracking: null,
-    label-text-transform: null,
-    label-text-weight: null,
-
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
@@ -74,7 +63,13 @@ $prefix: (mdc, text-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

package/esm2022/autocomplete/autocomplete-origin.mjs

@@ -17,10 +17,10 @@ export class MatAutocompleteOrigin {
     elementRef) {
         this.elementRef = elementRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0-next.2", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0-next.2", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0-next.5", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0-next.5", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0-next.2", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0-next.5", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',