@ng-matero/extensions 18.4.0 → 19.0.0

package/core/tokens/_token-utils.scss

@@ -3,11 +3,12 @@
 @use 'sass:string';
 @use '@angular/material' as mat;
 @use '../style/elevation';
+@use './m3-system';
 @use './m3-tokens';
 
 $_tokens: null;
 $_component-prefix: null;
-$_system-fallbacks: m3-tokens.create-system-fallbacks();
+$_system-fallbacks: m3-system.create-system-fallbacks();
 
 // Sets the token prefix and map to use when creating token slots.
 @mixin use-tokens($prefix, $tokens) {
@@ -113,19 +114,18 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
     @return _create-var($sys-fallback, $fallback);
   }
 
-  // TODO(mat-app-theme): Return the system-level fallback.
-  // Changing this will affect clients that do not properly call theme mixins since the tokens
-  // will be undefined and now default to M3 system values, causing a number of screenshot failures.
-  // @return $sys-fallback;
-  @return $fallback;
+  @return $sys-fallback;
 }
 
 // Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
   @if $tokens != null {
-    @each $key, $value in $tokens {
-      @if $value != null {
-        & {
+    // TODO: The `&` adds to the file size of theme, but it's necessary for compatibility
+    // with https://sass-lang.com/documentation/breaking-changes/mixed-decls/. We should
+    // figure out a better way to do this or move all the concrete styles out of the theme.
+    & {
+      @each $key, $value in $tokens {
+        @if $value != null {
           #{_create-var-name($prefix, $key)}: #{$value};
         }
       }
@@ -139,10 +139,13 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
 @function resolve-elevation($tokens, $elevation-token, $shadow-color-token) {
   $elevation: map.get($tokens, $elevation-token);
   $shadow-color: map.get($tokens, $shadow-color-token);
-  @return map.merge($tokens, (
-    $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
-    $shadow-color-token: null,
-  ));
+  @return map.merge(
+    $tokens,
+    (
+      $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
+      $shadow-color-token: null,
+    )
+  );
 }
 
 /// Checks whether a list starts wih a given prefix
@@ -196,7 +199,8 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
   $overrides: map.get($tokens, list.append($prefix, $color-variant));
   @if $overrides == null {
     $variants: _supported-color-variants($tokens, $prefix);
-    $secondary-message: if($variants == (),
+    $secondary-message: if(
+      $variants == (),
       'Mixin does not support color variants',
       'Supported color variants are: #{$variants}'
     );
@@ -209,41 +213,94 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
 /// Emits new token values for the given token overrides.
 /// Verifies that the overrides passed in are valid tokens.
 /// New token values are emitted under the current selector or root.
-@mixin batch-create-token-values($overrides: (), $token-maps...) {
-  @include _validate-token-overrides($overrides, $token-maps);
-
-  @each $token-map in $token-maps {
-    $prefix: map.get($token-map, prefix);
-    $tokens: map.get($token-map, tokens);
-
-    @each $name, $value in $tokens {
-      $tokens: map.set($tokens, $name, map.get($overrides, $name));
+@mixin batch-create-token-values($overrides: (), $namespace-configs...) {
+  @include mat.private-current-selector-or-root() {
+    $prefixed-name-data: ();
+    $unprefixed-name-data: ();
+    $all-names: ();
+
+    @each $config in $namespace-configs {
+      $namespace: map.get($config, namespace);
+      $prefix: if(map.has-key($config, prefix), map.get($config, prefix), '');
+      $tokens: _filter-nulls(map.get($config, tokens));
+      @each $name, $value in $tokens {
+        $prefixed-name: $prefix + $name;
+        $all-names: list.append($all-names, $prefixed-name, $separator: comma);
+        @if map.has-key($prefixed-name-data, $prefixed-name) {
+          @error #{
+          'Error overriding token: Ambiguous token name `'
+        }#{
+          $prefixed-name
+        }#{
+          '` exists in multiple namespaces: `('
+        }#{
+          list.nth(map.get($prefixed-name-data, $prefixed-name), 1)
+        }#{
+          ')` and `('
+        }#{
+          $namespace
+        }#{
+          ')`'
+        };
+        }
+        $prefixed-name-data: map.set($prefixed-name-data, $prefixed-name, ($namespace, $name));
+        $unprefixed-data: map.has-key($unprefixed-name-data, $name) and
+          map.get($unprefixed-name-data, $name) or
+          ();
+        $unprefixed-data: list.append($unprefixed-data, ($namespace, $prefixed-name));
+        $unprefixed-name-data: map.set($unprefixed-name-data, $name, $unprefixed-data);
+      }
     }
 
-    @include mat.private-current-selector-or-root() {
-      @include create-token-values($prefix, $tokens);
-    }
-  }
-}
-
-/// Verifies that the token overrides exist and are used in one of the given token maps.
-@mixin _validate-token-overrides($overrides: (), $token-maps) {
-  $valid-token-names: ();
-
-  @each $token-map in $token-maps {
-    @each $name, $value in map.get($token-map, tokens) {
-      @if ($value != null and list.index($valid-token-names, $name) == null) {
-        $valid-token-names: list.append($valid-token-names, $name);
+    @each $name, $value in $overrides {
+      @if map.has-key($prefixed-name-data, $name) {
+        $data: map.get($prefixed-name-data, $name);
+        $namespace: list.nth($data, 1);
+        $name: list.nth($data, 2);
+        @include create-token-values(
+          $namespace,
+          (
+            $name: $value,
+          )
+        );
+      } @else if (map.has-key($unprefixed-name-data, $name)) {
+        $datalist: map.get($unprefixed-name-data, $name);
+        $prefixed-names: ();
+        @each $data in $datalist {
+          $namespace: list.nth($data, 1);
+          $prefixed-names: list.append($prefixed-names, list.nth($data, 2), $separator: comma);
+          @include create-token-values(
+            $namespace,
+            (
+              $name: $value,
+            )
+          );
+        }
+        @warn #{
+        'Token `'
+      }#{
+        $name
+      }#{
+        '` is deprecated. Please use one of the following alternatives: '
+      }#{
+        $prefixed-names
+      };
+      } @else {
+        @error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
       }
     }
   }
+}
 
-  @each $name in map.keys($overrides) {
-    @if (list.index($valid-token-names, $name) == null) {
-      @error (
-        'Invalid token: "' + $name + '"'
-        'Valid tokens include: ' $valid-token-names
-      );
+/// Filters keys with a null value out of the map.
+/// @param {Map} $map The map to filter.
+/// @return {Map} The given map with all of the null keys filtered out.
+@function _filter-nulls($map) {
+  $result: ();
+  @each $key, $val in $map {
+    @if $val != null {
+      $result: map.set($result, $key, $val);
     }
   }
+  @return $result;
 }

package/core/tokens/m2/_index.scss

@@ -11,6 +11,7 @@
 @use './mtx/progress' as tokens-mtx-progress;
 @use './mtx/select' as tokens-mtx-select;
 @use './mtx/split' as tokens-mtx-split;
+@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
 
 /// Gets the tokens for the given theme, m2 tokens module, and theming system.
 /// @param {Map} $theme The Angular Material theme object to generate token values from.
@@ -65,5 +66,6 @@
     _get-tokens-for-module($theme, tokens-mtx-progress),
     _get-tokens-for-module($theme, tokens-mtx-select),
     _get-tokens-for-module($theme, tokens-mtx-split),
+    _get-tokens-for-module($theme, tokens-mdc-plain-tooltip),
   );
 }

package/core/tokens/m3/definitions/_index.scss

@@ -1,3 +1,4 @@
+@forward './md-comp-plain-tooltip' as md-comp-plain-tooltip-*;
 @forward './md-ref-palette' as md-ref-palette-*;
 @forward './md-ref-typeface' as md-ref-typeface-*;
 @forward './md-sys-color' as md-sys-color-*;

package/core/tokens/m3/definitions/_md-comp-plain-tooltip.scss

@@ -0,0 +1,51 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@use 'sass:map';
+
+@use './md-sys-color';
+
+@use './md-sys-shape';
+
+@use './md-sys-typescale';
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  @return (
+    'container-color': map.get($deps, 'md-sys-color', 'inverse-surface'),
+    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),
+    'supporting-text-color':
+      map.get($deps, 'md-sys-color', 'inverse-on-surface'),
+    'supporting-text-font':
+      map.get($deps, 'md-sys-typescale', 'body-small-font'),
+    'supporting-text-line-height':
+      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),
+    'supporting-text-size':
+      map.get($deps, 'md-sys-typescale', 'body-small-size'),
+    'supporting-text-tracking':
+    map.get($deps, 'md-sys-typescale', 'body-small-tracking'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.comp.plain-tooltip.supporting-text.tracking cannot be represented in the
+    // "font" property shorthand. Consider using the discrete properties instead.
+    'supporting-text-type':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-sys-typescale', 'body-small-weight')
+          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(
+            $deps,
+            'md-sys-typescale',
+            'body-small-line-height'
+          ) map.get($deps, 'md-sys-typescale', 'body-small-font')
+      ),
+    'supporting-text-weight':
+      map.get($deps, 'md-sys-typescale', 'body-small-weight')
+  );
+}

package/core/tokens/m3/index.scss

@@ -10,6 +10,7 @@
 @use './mtx/progress' as tokens-mtx-progress;
 @use './mtx/select' as tokens-mtx-select;
 @use './mtx/split' as tokens-mtx-split;
+@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
 
 $_module-names: (
   // Custom tokens
@@ -23,6 +24,7 @@ $_module-names: (
   tokens-mtx-progress,
   tokens-mtx-select,
   tokens-mtx-split,
+  tokens-mdc-plain-tooltip,
 );
 
 /// Gets the full set of M3 tokens for the given theme object.

package/core/tokens/m3/mdc/_plain-tooltip.scss

@@ -0,0 +1,15 @@
+@use '../../token-definition';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, plain-tooltip);
+
+/// Generates the tokens for MDC plain-tooltip
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of tokens for the MDC plain-tooltip
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-definition.get-mdc-tokens('plain-tooltip', $systems, $exclude-hardcoded);
+
+  @return token-definition.namespace-tokens($prefix, $mdc-tokens, $token-slots);
+}

package/core/tokens/m3/mtx/_alert.scss

@@ -5,11 +5,11 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, alert);
 
-/// Generates custom tokens for the mat-badge.
+/// Generates custom tokens for the mtx-alert.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
+/// @return {Map} A set of custom tokens for the mtx-alert
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $is-dark: map.get($systems, md-sys-type) == dark;
 
@@ -20,21 +20,21 @@ $prefix: (mtx, alert);
     background-color: map.get($systems, md-sys-color, surface-container),
     text-color: map.get($systems, md-sys-color, on-surface),
 
-    info-outline-color: map.get(mat.$azure-palette, if($is-dark, 40, 80)),
-    info-background-color: map.get(mat.$azure-palette, if($is-dark, 20, 90)),
-    info-text-color: map.get(mat.$azure-palette, if($is-dark, 90, 20)),
+    info-outline-color: light-dark(map.get(mat.$azure-palette, 80), map.get(mat.$azure-palette, 40)),
+    info-background-color: light-dark(map.get(mat.$azure-palette, 90), map.get(mat.$azure-palette, 20)),
+    info-text-color: light-dark(map.get(mat.$azure-palette, 20), map.get(mat.$azure-palette, 90)),
 
-    success-outline-color: map.get(mat.$green-palette, if($is-dark, 40, 80)),
-    success-background-color: map.get(mat.$green-palette, if($is-dark, 20, 95)),
-    success-text-color: map.get(mat.$green-palette, if($is-dark, 95, 20)),
+    success-outline-color: light-dark(map.get(mat.$green-palette, 80), map.get(mat.$green-palette, 40)),
+    success-background-color: light-dark(map.get(mat.$green-palette, 95), map.get(mat.$green-palette, 20)),
+    success-text-color: light-dark(map.get(mat.$green-palette, 20), map.get(mat.$green-palette, 95)),
 
-    warning-outline-color: map.get(mat.$yellow-palette, if($is-dark, 40, 80)),
-    warning-background-color: map.get(mat.$yellow-palette, if($is-dark, 20, 98)),
-    warning-text-color: map.get(mat.$yellow-palette, if($is-dark, 98, 20)),
+    warning-outline-color: light-dark(map.get(mat.$yellow-palette, 80), map.get(mat.$yellow-palette, 40)),
+    warning-background-color: light-dark(map.get(mat.$yellow-palette, 98), map.get(mat.$yellow-palette, 20)),
+    warning-text-color: light-dark(map.get(mat.$yellow-palette, 20), map.get(mat.$yellow-palette, 98)),
 
-    danger-outline-color: map.get(mat.$red-palette, if($is-dark, 40, 80)),
-    danger-background-color: map.get(mat.$red-palette, if($is-dark, 20, 90)),
-    danger-text-color: map.get(mat.$red-palette, if($is-dark, 90, 20)),
+    danger-outline-color: light-dark(map.get(mat.$red-palette, 80), map.get(mat.$red-palette, 40)),
+    danger-background-color: light-dark(map.get(mat.$red-palette, 90), map.get(mat.$red-palette, 20)),
+    danger-text-color: light-dark(map.get(mat.$red-palette, 20), map.get(mat.$red-palette, 90)),
   );
 
   @return token-definition.namespace-tokens($prefix, $tokens, $token-slots);

package/core/tokens/m3/mtx/_colorpicker.scss

@@ -4,11 +4,11 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, colorpicker);
 
-/// Generates custom tokens for the mat-badge.
+/// Generates custom tokens for the mtx-colorpicker.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
+/// @return {Map} A set of custom tokens for the mtx-colorpicker
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
     toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),

package/core/tokens/m3/mtx/_datetimepicker.scss

@@ -6,11 +6,11 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, datetimepicker);
 
-/// Generates custom tokens for the mat-badge.
+/// Generates custom tokens for the mtx-datetimepicker.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
+/// @return {Map} A set of custom tokens for the mtx-datetimepicker
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: ((
     calendar-header-background-color: token-definition.hardcode(transparent, $exclude-hardcoded),

package/core/tokens/m3/mtx/_drawer.scss

@@ -5,11 +5,11 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, drawer);
 
-/// Generates custom tokens for the mat-badge.
+/// Generates custom tokens for the mtx-drawer.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
+/// @return {Map} A set of custom tokens for the mtx-drawer
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
     container-shape: map.get($systems, md-sys-shape, corner-large),

package/core/tokens/m3/mtx/_grid.scss

@@ -4,11 +4,11 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, grid);
 
-/// Generates custom tokens for the mat-badge.
+/// Generates custom tokens for the mtx-grid.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
+/// @return {Map} A set of custom tokens for the mtx-grid
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
     container-shape:  map.get($systems, md-sys-shape, corner-medium),

package/core/tokens/m3/mtx/_loader.scss

@@ -5,11 +5,11 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, loader);
 
-/// Generates custom tokens for the mat-badge.
+/// Generates custom tokens for the mtx-loader.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
+/// @return {Map} A set of custom tokens for the mtx-loader
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
     backdrop-background-color: mat.private-safe-color-change(

package/core/tokens/m3/mtx/_popover.scss

@@ -4,11 +4,11 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, popover);
 
-/// Generates custom tokens for the mat-badge.
+/// Generates custom tokens for the mtx-popover.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
+/// @return {Map} A set of custom tokens for the mtx-popover
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
     container-shape: map.get($systems, md-sys-shape, corner-extra-small),

package/core/tokens/m3/mtx/_progress.scss

@@ -5,11 +5,11 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, progress);
 
-/// Generates custom tokens for the mat-badge.
+/// Generates custom tokens for the mtx-progress.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
+/// @return {Map} A set of custom tokens for the mtx-progress
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
     container-shape: map.get($systems, md-sys-shape, corner-extra-small),

package/core/tokens/m3/mtx/_select.scss

@@ -6,11 +6,11 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, select);
 
-/// Generates custom tokens for the mat-badge.
+/// Generates custom tokens for the mtx-select.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
+/// @return {Map} A set of custom tokens for the mtx-select
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: ((
     container-shape: map.get($systems, md-sys-shape, corner-extra-small),

package/core/tokens/m3/mtx/_split.scss

@@ -4,11 +4,11 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, split);
 
-/// Generates custom tokens for the mat-badge.
+/// Generates custom tokens for the mtx-split.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
+/// @return {Map} A set of custom tokens for the mtx-split
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: ((
     gutter-background-color: map.get($systems, md-sys-color, outline-variant),

package/datetimepicker/_datetimepicker-theme.scss

@@ -18,8 +18,10 @@
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
-        tokens-mtx-datetimepicker.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mtx-datetimepicker.$prefix,
+        tokens-mtx-datetimepicker.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -30,8 +32,10 @@
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
-        tokens-mtx-datetimepicker.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mtx-datetimepicker.$prefix,
+        tokens-mtx-datetimepicker.get-color-tokens($theme)
+      );
     }
 
     .mtx-datetimepicker-content {
@@ -64,8 +68,10 @@
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
-        tokens-mtx-datetimepicker.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mtx-datetimepicker.$prefix,
+        tokens-mtx-datetimepicker.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -77,13 +83,20 @@
   @else {}
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mtx-datetimepicker.$prefix, tokens: tokens-mtx-datetimepicker.get-token-slots()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mtx-datetimepicker.$prefix,
+      tokens: tokens-mtx-datetimepicker.get-token-slots(),
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 @mixin theme($theme, $options...) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-datetimepicker') {
     @if mat.get-theme-version($theme) == 1 {

package/datetimepicker/calendar-body.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * An internal class that represents the data corresponding to a single calendar cell.
@@ -9,17 +9,26 @@ export declare class MtxCalendarCell {
     displayValue: string;
     ariaLabel: string;
     enabled: boolean;
+    readonly id: number;
     constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean);
 }
 /**
  * An internal component used to display calendar data in a table.
  * @docs-private
  */
-export declare class MtxCalendarBody {
+export declare class MtxCalendarBody implements OnChanges {
+    private _elementRef;
+    private _ngZone;
+    private _injector;
     /** The label for the table. (e.g. "Jan 2017"). */
     label: string;
     /** The cells to display in the table. */
     rows: MtxCalendarCell[][];
+    /**
+     * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
+     * maintained even as the table resizes.
+     */
+    cellAspectRatio: number;
     /** The value in the table that corresponds to today. */
     todayValue: number;
     /** The value in the table that is currently selected. */
@@ -35,9 +44,22 @@ export declare class MtxCalendarBody {
     /** Emits when a new value is selected. */
     selectedValueChange: EventEmitter<number>;
     /** The number of blank cells to put at the beginning for the first row. */
-    get _firstRowOffset(): number;
+    _firstRowOffset: number;
+    /** Padding for the individual date cells. */
+    _cellPadding: string;
+    /** Width of an individual cell. */
+    _cellWidth: string;
     _cellClicked(cell: MtxCalendarCell): void;
+    _emitActiveDateChange(cell: MtxCalendarCell, event: FocusEvent): void;
     _isActiveCell(rowIndex: number, colIndex: number): boolean;
+    /**
+     * Tracking function for rows based on their identity. Ideally we would use some sort of
+     * key on the row, but that would require a breaking change for the `rows` input. We don't
+     * use the built-in identity tracking, because it logs warnings.
+     */
+    _trackRow: (row: MtxCalendarCell[]) => MtxCalendarCell[];
+    ngOnChanges(changes: SimpleChanges): void;
+    _focusActiveCell(movePreview?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxCalendarBody, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendarBody, "[mtx-calendar-body]", ["mtxCalendarBody"], { "label": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "allowDisabledSelection": { "alias": "allowDisabledSelection"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendarBody, "[mtx-calendar-body]", ["mtxCalendarBody"], { "label": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "allowDisabledSelection": { "alias": "allowDisabledSelection"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, true, never>;
 }