@angular/material 18.1.0-rc.0 → 18.1.0

package/button/_button-base.scss

@@ -1,8 +1,5 @@
-@use '@material/touch-target' as mdc-touch-target;
-
 @use '../core/tokens/token-utils';
 @use '../core/style/layout-common';
-@use '../core/mdc-helpers/mdc-helpers';
 
 // Adds styles necessary to provide stateful interactions with the button. This includes providing
 // content for the state container's ::before and ::after so that they can be given a background
@@ -126,9 +123,19 @@
   // the button itself would require us to wrap it in another div. See:
   // https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible
   .mat-mdc-button-touch-target {
-    @include mdc-touch-target.touch-target(
-      $set-width: $is-square,
-      $query: mdc-helpers.$mdc-base-styles-query);
+    position: absolute;
+    top: 50%;
+    height: 48px;
+
+    @if $is-square {
+      left: 50%;
+      width: 48px;
+      transform: translate(-50%, -50%);
+    } @else {
+      left: 0;
+      right: 0;
+      transform: translateY(-50%);
+    }
 
     @include token-utils.use-tokens($prefix, $slots) {
       @include token-utils.create-token-slot(display, touch-target-display);

package/button/_button-theme.scss

@@ -1,8 +1,3 @@
-@use '@material/button/button-text-theme' as mdc-button-text-theme;
-@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
-@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
-@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
@@ -29,7 +24,7 @@
     tokens-mat-text-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-text-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
 }
 
@@ -44,7 +39,7 @@
     tokens-mat-filled-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-filled-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
 }
 
@@ -59,7 +54,7 @@
     tokens-mat-protected-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-protected-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
 }
 
@@ -74,7 +69,7 @@
     tokens-mat-outlined-button.get-color-tokens($theme)
   );
 
-  @include mdc-button-outlined-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
   @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
 }
 
@@ -97,10 +92,14 @@
       token-utils.get-tokens-for($tokens, tokens-mat-filled-button.$prefix, $options...);
   $mat-outlined-button-tokens:
       token-utils.get-tokens-for($tokens, tokens-mat-outlined-button.$prefix, $options...);
-  @include mdc-button-text-theme.theme($mdc-text-button-tokens);
-  @include mdc-button-protected-theme.theme($mdc-protected-button-tokens);
-  @include mdc-button-filled-theme.theme($mdc-filled-button-tokens);
-  @include mdc-button-outlined-theme.theme($mdc-outlined-button-tokens);
+
+  @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mdc-protected-button.$prefix, $mdc-protected-button-tokens);
+  @include token-utils.create-token-values(
+      tokens-mdc-filled-button.$prefix, $mdc-filled-button-tokens);
+  @include token-utils.create-token-values(
+    tokens-mdc-outlined-button.$prefix, $mdc-outlined-button-tokens);
   @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens);
   @include token-utils.create-token-values(
       tokens-mat-protected-button.$prefix, $mat-protected-button-tokens);
@@ -119,13 +118,13 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-unthemable-tokens());
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-unthemable-tokens());
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-unthemable-tokens());
-      @include mdc-button-outlined-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
         tokens-mdc-outlined-button.get-unthemable-tokens());
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
@@ -223,14 +222,14 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-typography-tokens($theme));
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-typography-tokens($theme));
-      @include mdc-button-outlined-theme.theme(
-        tokens-mdc-outlined-button.get-typography-tokens($theme));
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-typography-tokens($theme));
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-typography-tokens($theme));
@@ -252,14 +251,14 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-button-text-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
         tokens-mdc-text-button.get-density-tokens($theme));
-      @include mdc-button-filled-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
         tokens-mdc-filled-button.get-density-tokens($theme));
-      @include mdc-button-outlined-theme.theme(
-        tokens-mdc-outlined-button.get-density-tokens($theme));
-      @include mdc-button-protected-theme.theme(
+      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
         tokens-mdc-protected-button.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-density-tokens($theme));
 
       @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
         tokens-mat-text-button.get-density-tokens($theme));

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

@@ -10,6 +10,10 @@ $prefix: (mdc, extended-fab);
   @return (
     container-height: 48px,
     container-shape: 24px,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -49,12 +53,7 @@ $prefix: (mdc, extended-fab);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return (
-    container-elevation-shadow: elevation.get-box-shadow(6),
-    focus-container-elevation-shadow: elevation.get-box-shadow(8),
-    hover-container-elevation-shadow: elevation.get-box-shadow(8),
-    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
-  );
+  @return ();
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

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

@@ -9,6 +9,10 @@ $prefix: (mdc, fab-small);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 50%,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -52,10 +56,6 @@ $prefix: (mdc, fab-small);
   @return (
     // Background color of the FAB.
     container-color: inspection.get-theme-color($theme, background, card),
-    container-elevation-shadow: elevation.get-box-shadow(6),
-    focus-container-elevation-shadow: elevation.get-box-shadow(8),
-    hover-container-elevation-shadow: elevation.get-box-shadow(8),
-    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
   );
 }
 

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

@@ -9,6 +9,10 @@ $prefix: (mdc, fab);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 50%,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -53,10 +57,6 @@ $prefix: (mdc, fab);
   @return (
     // Background color of the FAB.
     container-color: inspection.get-theme-color($theme, background, card),
-    container-elevation-shadow: elevation.get-box-shadow(6),
-    focus-container-elevation-shadow: elevation.get-box-shadow(8),
-    hover-container-elevation-shadow: elevation.get-box-shadow(8),
-    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
   );
 }
 

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

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../style/sass-utils';
+@use '../../../style/elevation';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
 @use '../../../mdc-helpers/mdc-helpers';
@@ -17,7 +18,11 @@ $prefix: (mdc, protected-button);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
-    keep-touch-target: false,
+    container-elevation-shadow: elevation.get-box-shadow(2),
+    disabled-container-elevation-shadow: elevation.get-box-shadow(0),
+    focus-container-elevation-shadow: elevation.get-box-shadow(4),
+    hover-container-elevation-shadow: elevation.get-box-shadow(4),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(8),
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -39,6 +44,13 @@ $prefix: (mdc, protected-button);
     focus-state-layer-color: null,
     hover-state-layer-color: null,
     pressed-state-layer-color: null,
+    keep-touch-target: null,
+    container-elevation: null,
+    disabled-container-elevation: null,
+    focus-container-elevation: null,
+    hover-container-elevation: null,
+    pressed-container-elevation: null,
+    container-shadow-color: null,
   );
 }
 
@@ -53,12 +65,6 @@ $prefix: (mdc, protected-button);
       0.12),
     disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button,
       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,
   );
 }
 

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

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'sass:meta';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -12,7 +13,7 @@ $prefix: (mdc, protected-button);
 /// @return {Map} A set of tokens for the MDC protected-button
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   // Note: in M3 the "protected" button is called "elevated".
-  $mdc-tokens: token-utils.get-mdc-tokens('elevated-button', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('elevated-button', $systems, $exclude-hardcoded);
   $variant-tokens: (
     primary: (), // Default, no overrides needed.
     secondary: (
@@ -57,7 +58,7 @@ $prefix: (mdc, protected-button);
   );
 
   @return token-utils.namespace-tokens($prefix, (
-    _fix-tokens($mdc-tokens),
+    _fix-tokens($tokens),
     token-utils.map-values($variant-tokens, meta.get-function(_fix-tokens)),
   ), $token-slots);
 }
@@ -67,11 +68,27 @@ $prefix: (mdc, protected-button);
 /// @param {Map} $initial-tokens Map of protected button tokens currently being generated.
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
 @function _fix-tokens($initial-tokens) {
-  // Need to get the hardcoded values, because they include opacities that are used for the disabled
-  // state.
+  // Need to get the hardcoded values, because they include
+  // opacities that are used for the disabled state.
   $hardcoded-tokens: token-utils.get-mdc-tokens('elevated-button', (), false);
+  $tokens: $initial-tokens;
+  $elevation-tokens: (
+    container-elevation,
+    disabled-container-elevation,
+    focus-container-elevation,
+    hover-container-elevation,
+    pressed-container-elevation,
+  );
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation));
+    }
+  }
 
-  @return token-utils.combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+  @return token-utils.combine-color-tokens($tokens, $hardcoded-tokens, (
     (
       color: disabled-label-text-color,
       opacity: disabled-label-text-opacity,

package/datepicker/index.d.ts

@@ -52,7 +52,11 @@ import { ValidatorFn } from '@angular/forms';
 import { ViewContainerRef } from '@angular/core';
 import { WritableSignal } from '@angular/core';
 
-/** Function that can be used to filter out dates from a calendar. */
+/**
+ * Function that can be used to filter out dates from a calendar.
+ * Datepicker can sometimes receive a null value as input for the date argument.
+ * This doesn't represent a "null date" but rather signifies that no date has been selected yet in the calendar.
+ */
 export declare type DateFilterFn<D> = (date: D | null) => boolean;
 
 /** Possible positions for the datepicker dropdown along the X axis. */