@ng-matero/extensions 18.0.3 → 18.1.1

package/core/tokens/m3/definitions/_md-sys-motion.scss

@@ -0,0 +1,46 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'duration-extra-long1': if($exclude-hardcoded-values, null, 700ms),
+    'duration-extra-long2': if($exclude-hardcoded-values, null, 800ms),
+    'duration-extra-long3': if($exclude-hardcoded-values, null, 900ms),
+    'duration-extra-long4': if($exclude-hardcoded-values, null, 1000ms),
+    'duration-long1': if($exclude-hardcoded-values, null, 450ms),
+    'duration-long2': if($exclude-hardcoded-values, null, 500ms),
+    'duration-long3': if($exclude-hardcoded-values, null, 550ms),
+    'duration-long4': if($exclude-hardcoded-values, null, 600ms),
+    'duration-medium1': if($exclude-hardcoded-values, null, 250ms),
+    'duration-medium2': if($exclude-hardcoded-values, null, 300ms),
+    'duration-medium3': if($exclude-hardcoded-values, null, 350ms),
+    'duration-medium4': if($exclude-hardcoded-values, null, 400ms),
+    'duration-short1': if($exclude-hardcoded-values, null, 50ms),
+    'duration-short2': if($exclude-hardcoded-values, null, 100ms),
+    'duration-short3': if($exclude-hardcoded-values, null, 150ms),
+    'duration-short4': if($exclude-hardcoded-values, null, 200ms),
+    'easing-emphasized':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)),
+    'easing-emphasized-accelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 0.8, 0.15)),
+    'easing-emphasized-decelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.05, 0.7, 0.1, 1)),
+    'easing-legacy':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 0.2, 1)),
+    'easing-legacy-accelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 1, 1)),
+    'easing-legacy-decelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0.2, 1)),
+    'easing-linear':
+      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 1, 1)),
+    'easing-standard':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)),
+    'easing-standard-accelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 1, 1)),
+    'easing-standard-decelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0, 1)),
+    'path': /** TODO: type "motion_path" is not supported. */ null
+  );
+}

package/core/tokens/m3/definitions/_md-sys-shape.scss

@@ -0,0 +1,24 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'corner-extra-large': if($exclude-hardcoded-values, null, 28px),
+    'corner-extra-large-top':
+      if($exclude-hardcoded-values, null, (28px 28px 0 0)),
+    'corner-extra-small': if($exclude-hardcoded-values, null, 4px),
+    'corner-extra-small-top':
+      if($exclude-hardcoded-values, null, (4px 4px 0 0)),
+    'corner-full': if($exclude-hardcoded-values, null, 9999px),
+    'corner-large': if($exclude-hardcoded-values, null, 16px),
+    'corner-large-end': if($exclude-hardcoded-values, null, (0 16px 16px 0)),
+    'corner-large-start':
+      if($exclude-hardcoded-values, null, (16px 0 0 16px)),
+    'corner-large-top': if($exclude-hardcoded-values, null, (16px 16px 0 0)),
+    'corner-medium': if($exclude-hardcoded-values, null, 12px),
+    'corner-none': if($exclude-hardcoded-values, null, 0),
+    'corner-small': if($exclude-hardcoded-values, null, 8px)
+  );
+}

package/core/tokens/m3/definitions/_md-sys-state.scss

@@ -0,0 +1,13 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'dragged-state-layer-opacity': if($exclude-hardcoded-values, null, 0.16),
+    'focus-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12),
+    'hover-state-layer-opacity': if($exclude-hardcoded-values, null, 0.08),
+    'pressed-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12)
+  );
+}

package/core/tokens/m3/definitions/_md-sys-typescale.scss

@@ -0,0 +1,308 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@use 'sass:map';
+
+@use './md-ref-typeface';
+
+$_default: (
+  'md-ref-typeface': md-ref-typeface.values(),
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  @return (
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.body-large.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'body-large':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 1rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.5rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'body-large-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'body-large-line-height': if($exclude-hardcoded-values, null, 1.5rem),
+    'body-large-size': if($exclude-hardcoded-values, null, 1rem),
+    'body-large-tracking': if($exclude-hardcoded-values, null, 0.031rem),
+    'body-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.body-medium.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'body-medium':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.25rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'body-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'body-medium-line-height': if($exclude-hardcoded-values, null, 1.25rem),
+    'body-medium-size': if($exclude-hardcoded-values, null, 0.875rem),
+    'body-medium-tracking': if($exclude-hardcoded-values, null, 0.016rem),
+    'body-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.body-small.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'body-small':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'body-small-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'body-small-line-height': if($exclude-hardcoded-values, null, 1rem),
+    'body-small-size': if($exclude-hardcoded-values, null, 0.75rem),
+    'body-small-tracking': if($exclude-hardcoded-values, null, 0.025rem),
+    'body-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.display-large.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'display-large':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 3.562rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            4rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'display-large-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'display-large-line-height': if($exclude-hardcoded-values, null, 4rem),
+    'display-large-size': if($exclude-hardcoded-values, null, 3.562rem),
+    'display-large-tracking': if($exclude-hardcoded-values, null, -0.016rem),
+    'display-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.display-medium.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'display-medium':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 2.812rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            3.25rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'display-medium-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'display-medium-line-height': if($exclude-hardcoded-values, null, 3.25rem),
+    'display-medium-size': if($exclude-hardcoded-values, null, 2.812rem),
+    'display-medium-tracking': if($exclude-hardcoded-values, null, 0),
+    'display-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.display-small.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'display-small':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 2.25rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            2.75rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'display-small-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'display-small-line-height': if($exclude-hardcoded-values, null, 2.75rem),
+    'display-small-size': if($exclude-hardcoded-values, null, 2.25rem),
+    'display-small-tracking': if($exclude-hardcoded-values, null, 0),
+    'display-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.headline-large.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'headline-large':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 2rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            2.5rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'headline-large-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'headline-large-line-height': if($exclude-hardcoded-values, null, 2.5rem),
+    'headline-large-size': if($exclude-hardcoded-values, null, 2rem),
+    'headline-large-tracking': if($exclude-hardcoded-values, null, 0),
+    'headline-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.headline-medium.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'headline-medium':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 1.75rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            2.25rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'headline-medium-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'headline-medium-line-height': if($exclude-hardcoded-values, null, 2.25rem),
+    'headline-medium-size': if($exclude-hardcoded-values, null, 1.75rem),
+    'headline-medium-tracking': if($exclude-hardcoded-values, null, 0),
+    'headline-medium-weight':
+      map.get($deps, 'md-ref-typeface', 'weight-regular'),
+      // Warning: risk of reduced fidelity from using this composite typography token.
+      // Tokens md.sys.typescale.headline-small.tracking cannot be represented in the "font"
+      // property shorthand. Consider using the discrete properties instead.
+    'headline-small':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 1.5rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            2rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'headline-small-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'headline-small-line-height': if($exclude-hardcoded-values, null, 2rem),
+    'headline-small-size': if($exclude-hardcoded-values, null, 1.5rem),
+    'headline-small-tracking': if($exclude-hardcoded-values, null, 0),
+    'headline-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.label-large.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'label-large':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-medium')
+          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.25rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'label-large-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'label-large-line-height': if($exclude-hardcoded-values, null, 1.25rem),
+    'label-large-size': if($exclude-hardcoded-values, null, 0.875rem),
+    'label-large-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+    'label-large-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
+    'label-large-weight-prominent':
+      map.get($deps, 'md-ref-typeface', 'weight-bold'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.label-medium.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'label-medium':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-medium')
+          if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'label-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'label-medium-line-height': if($exclude-hardcoded-values, null, 1rem),
+    'label-medium-size': if($exclude-hardcoded-values, null, 0.75rem),
+    'label-medium-tracking': if($exclude-hardcoded-values, null, 0.031rem),
+    'label-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
+    'label-medium-weight-prominent':
+      map.get($deps, 'md-ref-typeface', 'weight-bold'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.label-small.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'label-small':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-medium')
+          if($exclude-hardcoded-values, null, 0.688rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'label-small-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'label-small-line-height': if($exclude-hardcoded-values, null, 1rem),
+    'label-small-size': if($exclude-hardcoded-values, null, 0.688rem),
+    'label-small-tracking': if($exclude-hardcoded-values, null, 0.031rem),
+    'label-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.title-large.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'title-large':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 1.375rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.75rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'title-large-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'title-large-line-height': if($exclude-hardcoded-values, null, 1.75rem),
+    'title-large-size': if($exclude-hardcoded-values, null, 1.375rem),
+    'title-large-tracking': if($exclude-hardcoded-values, null, 0),
+    'title-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.title-medium.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'title-medium':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-medium')
+          if($exclude-hardcoded-values, null, 1rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.5rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'title-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'title-medium-line-height': if($exclude-hardcoded-values, null, 1.5rem),
+    'title-medium-size': if($exclude-hardcoded-values, null, 1rem),
+    'title-medium-tracking': if($exclude-hardcoded-values, null, 0.009rem),
+    'title-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.title-small.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'title-small':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-medium')
+          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.25rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'title-small-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'title-small-line-height': if($exclude-hardcoded-values, null, 1.25rem),
+    'title-small-size': if($exclude-hardcoded-values, null, 0.875rem),
+    'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+    'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')
+  );
+}

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

@@ -11,20 +11,30 @@ $prefix: (mtx, alert);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the mat-badge
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $is-dark: map.get($systems, md-sys-type) == dark;
+
   $tokens: (
     container-shape: map.get($systems, md-sys-shape, corner-small),
 
-    outline-color: token-utils.hardcode(transparent, $exclude-hardcoded),
+    outline-color: map.get($systems, md-sys-color, outline-variant),
     background-color: map.get($systems, md-sys-color, surface-container),
     text-color: map.get($systems, md-sys-color, on-surface),
-    info-background-color: map.get(mat.$blue-palette, 50),
-    info-text-color: token-utils.hardcode(white, $exclude-hardcoded),
-    success-background-color: map.get(mat.$green-palette, 50),
-    success-text-color: token-utils.hardcode(white, $exclude-hardcoded),
-    warning-background-color: map.get(mat.$orange-palette, 50),
-    warning-text-color: token-utils.hardcode(white, $exclude-hardcoded),
-    danger-background-color: map.get(mat.$red-palette, 50),
-    danger-text-color: token-utils.hardcode(white, $exclude-hardcoded),
+
+    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)),
+
+    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)),
+
+    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)),
+
+    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)),
   );
 
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, datetimepicker);
@@ -70,8 +70,8 @@ $prefix: (mtx, datetimepicker);
     time-ampm-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary-container),
     time-ampm-selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
 
-    container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
-    container-touch-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
+    container-elevation-shadow: token-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
+    container-touch-elevation-shadow: token-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
     container-shape: map.get($systems, md-sys-shape, corner-large),
     container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
     selector-container-shape: map.get($systems, md-sys-shape, corner-small),

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '@material/elevation' as mdc-elevation;
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -13,7 +13,7 @@ $prefix: (mtx, drawer);
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
     container-shape: map.get($systems, md-sys-shape, corner-large),
-    container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+    container-elevation-shadow: token-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
     container-background-color: map.get($systems, md-sys-color, surface),
     container-text-color: map.get($systems, md-sys-color, on-surface-variant),
   );

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

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -18,7 +17,6 @@ $prefix: (mtx, grid);
     outline-color: map.get($systems, md-sys-color, outline-variant),
     column-menu-text-color: map.get($systems, md-sys-color, on-surface-variant),
     column-menu-divider-color: map.get($systems, md-sys-color, outline-variant),
-    column-menu-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
     table-footer-background-color: map.get($systems, md-sys-color, surface-container),
     table-row-striped-background-color: map.get($systems, md-sys-color, surface-container),
     table-row-hover-background-color: map.get($systems, md-sys-color, secondary-container),

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

@@ -16,6 +16,9 @@ $prefix: (mtx, popover);
     outline-color: map.get($systems, md-sys-color, surface-container),
     background-color: map.get($systems, md-sys-color, surface-container),
     text-color: map.get($systems, md-sys-color, on-surface),
+    // Note that this uses a value, rather than a computed box-shadow, because we use
+    // the value at runtime to determine which shadow to set based on the popover's depth.
+    base-elevation-level: token-utils.hardcode(2, $exclude-hardcoded),
   );
 
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, select);
@@ -14,7 +14,7 @@ $prefix: (mtx, select);
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: ((
     container-shape: map.get($systems, md-sys-shape, corner-extra-small),
-    container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+    container-elevation-shadow: token-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
 
     container-text-color: map.get($systems, md-sys-color, on-surface),
     placeholder-text-color: mat.private-safe-color-change(

package/core/typography/_all-typography.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@use './typography';
+@use '../m2/typography' as m2-typography;
 @use '../../alert/alert-theme';
 @use '../../button/button-theme';
 @use '../../colorpicker/colorpicker-theme';
@@ -17,7 +17,7 @@
 @mixin all-component-typographies($theme: null) {
   // If no actual color configuration has been specified, create a default one.
   @if not mat.theme-has($theme, typography) {
-    $theme: typography.define-typography-config();
+    $theme: m2-typography.define-typography-config();
   }
 
   @include alert-theme.typography($theme);

package/datetimepicker/calendar.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, Portal } from '@angular/cdk/portal';
+import { ComponentType, Portal, TemplatePortal } from '@angular/cdk/portal';
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
 import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
 import { MtxClockView } from './clock';
@@ -30,6 +30,8 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     preventSameDateTimeSelection: boolean;
     /** Input for custom header component */
     headerComponent: ComponentType<any>;
+    /** Input for action buttons. */
+    actionsPortal: TemplatePortal | null;
     /** Emits when the currently selected date changes. */
     selectedChange: EventEmitter<D>;
     /** Emits when the view has been changed. */
@@ -146,7 +148,7 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     private calendarState;
     private _2digit;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxCalendar<any>, [null, null, null, { optional: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendar<any>, "mtx-calendar", ["mtxCalendar"], { "multiYearSelector": { "alias": "multiYearSelector"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "timeInterval": { "alias": "timeInterval"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "headerComponent": { "alias": "headerComponent"; "required": false; }; "type": { "alias": "type"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendar<any>, "mtx-calendar", ["mtxCalendar"], { "multiYearSelector": { "alias": "multiYearSelector"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "timeInterval": { "alias": "timeInterval"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "headerComponent": { "alias": "headerComponent"; "required": false; }; "actionsPortal": { "alias": "actionsPortal"; "required": false; }; "type": { "alias": "type"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never, true, never>;
     static ngAcceptInputType_multiYearSelector: unknown;
     static ngAcceptInputType_twelvehour: unknown;
     static ngAcceptInputType_timeInput: unknown;

package/datetimepicker/calendar.scss

@@ -86,6 +86,42 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
       }
     }
   }
+
+  .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+@mixin landscape-actions-placeholder {
+  .mtx-datetimepicker-actions::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    width: $landscape-calendar-header-width;
+    height: 100%;
+    content: '';
+
+    @include token-utils.use-tokens($_tokens...) {
+      $border-color: token-utils.get-token-variable(calendar-header-divider-color);
+
+      border-right: 1px solid var($border-color);
+
+      @include token-utils.create-token-slot(background-color, calendar-header-background-color);
+      @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
+
+      [dir='rtl'] & {
+        left: auto;
+        right: 0;
+        border-right-width: 0;
+        border-left: 1px solid var($border-color);
+        border-bottom-left-radius: 0;
+
+        @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
+      }
+    }
+  }
 }
 
 .mtx-calendar {
@@ -190,11 +226,13 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 
 [mode='landscape'] {
   @include landscape-calendar-header;
+  @include landscape-actions-placeholder;
 }
 
 @media all and (orientation: landscape) {
   [mode='auto'] {
     @include landscape-calendar-header;
+    @include landscape-actions-placeholder;
   }
 }
 

package/datetimepicker/datetimepicker-actions.d.ts

@@ -0,0 +1,32 @@
+import { AfterViewInit, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { MtxDatetimepicker } from './datetimepicker';
+import * as i0 from "@angular/core";
+export declare class MtxDatetimepickerApply<D> {
+    _datetimepicker: MtxDatetimepicker<D>;
+    constructor(_datetimepicker: MtxDatetimepicker<D>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerApply<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerApply<any>, "[mtxDatetimepickerApply]", never, {}, {}, never, never, true, never>;
+}
+export declare class MtxDatetimepickerCancel<D> {
+    _datetimepicker: MtxDatetimepicker<D>;
+    constructor(_datetimepicker: MtxDatetimepicker<D>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerCancel<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerCancel<any>, "[mtxDatetimepickerCancel]", never, {}, {}, never, never, true, never>;
+}
+export declare class MtxDatetimepickerClear<D> {
+    _datetimepicker: MtxDatetimepicker<D>;
+    constructor(_datetimepicker: MtxDatetimepicker<D>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerClear<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerClear<any>, "[mtxDatetimepickerClear]", never, {}, {}, never, never, true, never>;
+}
+export declare class MtxDatetimepickerActions<D> implements AfterViewInit, OnDestroy {
+    private _datetimepicker;
+    private _viewContainerRef;
+    _template: TemplateRef<unknown>;
+    private _portal;
+    constructor(_datetimepicker: MtxDatetimepicker<D>, _viewContainerRef: ViewContainerRef);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerActions<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepickerActions<any>, "mtx-datetimepicker-actions", never, {}, {}, never, ["*"], true, never>;
+}