@angular/material 20.0.0-next.0 → 20.0.0-next.10

package/checkbox/_m3-checkbox.scss

@@ -0,0 +1,103 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../core/style/sass-utils';
+@use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, checkbox);
+
+/// Generates custom tokens for mat-checkbox.
+/// @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 mat-checkbox
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    disabled-label-color:
+        sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    disabled-selected-checkmark-color: map.get($systems, md-sys-color, surface),
+    disabled-selected-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    disabled-unselected-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    label-text-color: map.get($systems, md-sys-color, on-surface),
+    label-text-font: map.get($systems, md-sys-typescale, body-medium-font),
+    label-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height),
+    label-text-size: map.get($systems, md-sys-typescale, body-medium-size),
+    label-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking),
+    label-text-weight: map.get($systems, md-sys-typescale, body-medium-weight),
+    selected-checkmark-color: map.get($systems, md-sys-color, on-primary),
+    selected-focus-icon-color: map.get($systems, md-sys-color, primary),
+    selected-focus-state-layer-color: map.get($systems, md-sys-color, primary),
+    selected-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    selected-hover-icon-color: map.get($systems, md-sys-color, primary),
+    selected-hover-state-layer-color: map.get($systems, md-sys-color, primary),
+    selected-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    selected-icon-color: map.get($systems, md-sys-color, primary),
+    selected-pressed-icon-color: map.get($systems, md-sys-color, primary),
+    selected-pressed-state-layer-color: map.get($systems, md-sys-color, on-surface),
+    selected-pressed-state-layer-opacity:
+        map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    unselected-focus-icon-color: map.get($systems, md-sys-color, on-surface),
+    unselected-focus-state-layer-color: map.get($systems, md-sys-color, on-surface),
+    unselected-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
+    unselected-hover-icon-color: map.get($systems, md-sys-color, on-surface),
+    unselected-hover-state-layer-color: map.get($systems, md-sys-color, on-surface),
+    unselected-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+    unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    unselected-pressed-state-layer-color: map.get($systems, md-sys-color, primary),
+    unselected-pressed-state-layer-opacity:
+        map.get($systems, md-sys-state, pressed-state-layer-opacity),
+  );
+
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, secondary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-secondary),
+    ),
+    tertiary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary),
+    ),
+    error: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, error),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-icon-color: map.get($systems, md-sys-color, error),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, error),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, error),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-error),
+    )
+  );
+
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    touch-target-display: list.nth((block, block, none, none), $index),
+    state-layer-size: list.nth((40px, 36px, 32px, 28px), $index)
+  );
+}

package/checkbox/index.d.ts

@@ -1,59 +1,37 @@
-import { AbstractControl } from '@angular/forms';
-import { AfterViewInit } from '@angular/core';
-import { CheckboxRequiredValidator } from '@angular/forms';
-import { ControlValueAccessor } from '@angular/forms';
-import { ElementRef } from '@angular/core';
-import { EventEmitter } from '@angular/core';
 import { FocusableOption } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import * as i3 from '@angular/material/core';
-import { InjectionToken } from '@angular/core';
-import { OnChanges } from '@angular/core';
-import { Provider } from '@angular/core';
-import { SimpleChanges } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
-import { ValidationErrors } from '@angular/forms';
-import { Validator } from '@angular/forms';
-
-declare namespace i1 {
-    export {
-        MAT_CHECKBOX_REQUIRED_VALIDATOR,
-        MatCheckboxRequiredValidator
-    }
-}
-
-declare namespace i2 {
-    export {
-        TransitionCheckState,
-        MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR,
-        MatCheckboxChange,
-        MatCheckbox
-    }
-}
-
-/**
- * @deprecated Will stop being exported.
- * @breaking-change 19.0.0
- */
-export declare const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
-
-/** Injection token to be used to override the default options for `mat-checkbox`. */
-export declare const MAT_CHECKBOX_DEFAULT_OPTIONS: InjectionToken<MatCheckboxDefaultOptions>;
-
-/** @docs-private */
-export declare function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefaultOptions;
+import { AfterViewInit, OnChanges, ElementRef, EventEmitter, SimpleChanges, InjectionToken } from '@angular/core';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
+import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
+import '@angular/cdk/bidi';
 
 /**
- * @deprecated No longer used, `MatCheckbox` implements required validation directly.
- * @breaking-change 19.0.0
+ * Represents the different states that require custom transitions between them.
+ * @docs-private
  */
-export declare const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
-
-export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlValueAccessor, Validator, FocusableOption {
+declare enum TransitionCheckState {
+    /** The initial state of the component before any user interaction. */
+    Init = 0,
+    /** The state representing the component when it's becoming checked. */
+    Checked = 1,
+    /** The state representing the component when it's becoming unchecked. */
+    Unchecked = 2,
+    /** The state representing the component when it's becoming indeterminate. */
+    Indeterminate = 3
+}
+/** Change event object emitted by checkbox. */
+declare class MatCheckboxChange {
+    /** The source checkbox of the event. */
+    source: MatCheckbox;
+    /** The new `checked` value of the checkbox. */
+    checked: boolean;
+}
+declare class MatCheckbox implements AfterViewInit, OnChanges, ControlValueAccessor, Validator, FocusableOption {
     _elementRef: ElementRef<HTMLElement>;
     private _changeDetectorRef;
     private _ngZone;
-    _animationMode?: "NoopAnimations" | "BrowserAnimations" | null | undefined;
+    protected _animationsDisabled: boolean;
     private _options;
     /** Focuses the checkbox. */
     focus(): void;
@@ -203,25 +181,8 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     static ngAcceptInputType_indeterminate: unknown;
 }
 
-/** Change event object emitted by checkbox. */
-export declare class MatCheckboxChange {
-    /** The source checkbox of the event. */
-    source: MatCheckbox;
-    /** The new `checked` value of the checkbox. */
-    checked: boolean;
-}
-
-/**
- * Checkbox click action when user click on input element.
- * noop: Do not toggle checked or indeterminate.
- * check: Only toggle checked status, ignore indeterminate.
- * check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
- * undefined: Same as `check-indeterminate`.
- */
-export declare type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
-
 /** Default `mat-checkbox` options that can be overridden. */
-export declare interface MatCheckboxDefaultOptions {
+interface MatCheckboxDefaultOptions {
     /**
      * Default theme color of the checkbox. This API is supported in M2 themes
      * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.
@@ -235,49 +196,28 @@ export declare interface MatCheckboxDefaultOptions {
     /** Whether disabled checkboxes should be interactive. */
     disabledInteractive?: boolean;
 }
-
-export declare class MatCheckboxModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, never, [typeof i2.MatCheckbox, typeof i3.MatCommonModule], [typeof i2.MatCheckbox, typeof i3.MatCommonModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MatCheckboxModule>;
-}
-
+/** Injection token to be used to override the default options for `mat-checkbox`. */
+declare const MAT_CHECKBOX_DEFAULT_OPTIONS: InjectionToken<MatCheckboxDefaultOptions>;
 /**
- * Validator for Material checkbox's required attribute in template-driven checkbox.
- * Current CheckboxRequiredValidator only work with `input type=checkbox` and does not
- * work with `mat-checkbox`.
- *
- * @deprecated No longer used, `MatCheckbox` implements required validation directly.
- * @breaking-change 19.0.0
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
  */
-export declare class MatCheckboxRequiredValidator extends CheckboxRequiredValidator {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxRequiredValidator, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCheckboxRequiredValidator, "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]", never, {}, {}, never, never, true, never>;
-}
-
+declare function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefaultOptions;
 /**
- * @deprecated No longer used, `MatCheckbox` implements required validation directly.
- * @breaking-change 19.0.0
+ * Checkbox click action when user click on input element.
+ * noop: Do not toggle checked or indeterminate.
+ * check: Only toggle checked status, ignore indeterminate.
+ * check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
+ * undefined: Same as `check-indeterminate`.
  */
-export declare class _MatCheckboxRequiredValidatorModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatCheckboxRequiredValidatorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<_MatCheckboxRequiredValidatorModule, never, [typeof i1.MatCheckboxRequiredValidator], [typeof i1.MatCheckboxRequiredValidator]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<_MatCheckboxRequiredValidatorModule>;
-}
+type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
 
-/**
- * Represents the different states that require custom transitions between them.
- * @docs-private
- */
-export declare enum TransitionCheckState {
-    /** The initial state of the component before any user interaction. */
-    Init = 0,
-    /** The state representing the component when it's becoming checked. */
-    Checked = 1,
-    /** The state representing the component when it's becoming unchecked. */
-    Unchecked = 2,
-    /** The state representing the component when it's becoming indeterminate. */
-    Indeterminate = 3
+declare class MatCheckboxModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, never, [typeof MatCheckbox, typeof MatCommonModule], [typeof MatCheckbox, typeof MatCommonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MatCheckboxModule>;
 }
 
-export { }
+export { MAT_CHECKBOX_DEFAULT_OPTIONS, MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY, MatCheckbox, MatCheckboxChange, MatCheckboxModule, TransitionCheckState };
+export type { MatCheckboxClickAction, MatCheckboxDefaultOptions };

package/checkbox/testing/index.d.ts

@@ -1,12 +1,8 @@
-import { AsyncFactoryFn } from '@angular/cdk/testing';
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarness } from '@angular/cdk/testing';
-import { ComponentHarnessConstructor } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { TestElement } from '@angular/cdk/testing';
+import * as _angular_cdk_testing from '@angular/cdk/testing';
+import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
 
 /** A set of criteria that can be used to filter a list of `MatCheckboxHarness` instances. */
-export declare interface CheckboxHarnessFilters extends BaseHarnessFilters {
+interface CheckboxHarnessFilters extends BaseHarnessFilters {
     /** Only find instances whose label matches the given value. */
     label?: string | RegExp;
     /** Only find instances whose name attribute is the given value. */
@@ -18,9 +14,9 @@ export declare interface CheckboxHarnessFilters extends BaseHarnessFilters {
 }
 
 /** Harness for interacting with a mat-checkbox in tests. */
-export declare class MatCheckboxHarness extends ComponentHarness {
+declare class MatCheckboxHarness extends ComponentHarness {
     static hostSelector: string;
-    _input: AsyncFactoryFn<TestElement>;
+    _input: _angular_cdk_testing.AsyncFactoryFn<_angular_cdk_testing.TestElement>;
     private _label;
     private _inputContainer;
     /**
@@ -86,4 +82,5 @@ export declare class MatCheckboxHarness extends ComponentHarness {
     uncheck(): Promise<void>;
 }
 
-export { }
+export { MatCheckboxHarness };
+export type { CheckboxHarnessFilters };

package/chips/_chips-theme.scss

@@ -1,6 +1,6 @@
 @use 'sass:color';
-@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
-@use '../core/tokens/m2/mat/chip' as tokens-mat-chip;
+@use './m2-chip';
+@use './m3-chip';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -15,14 +15,8 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix,
-        tokens-mdc-chip.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-chip.$prefix,
-        tokens-mat-chip.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-chip.$prefix, m2-chip.get-unthemable-tokens());
     }
   }
 }
@@ -37,48 +31,24 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix,
-        tokens-mdc-chip.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-chip.$prefix,
-        tokens-mat-chip.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-chip.$prefix, m2-chip.get-color-tokens($theme));
 
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
-          @include token-utils.create-token-values(
-            tokens-mdc-chip.$prefix,
-            tokens-mdc-chip.get-color-tokens($theme, primary)
-          );
-          @include token-utils.create-token-values(
-            tokens-mat-chip.$prefix,
-            tokens-mat-chip.get-color-tokens($theme, primary)
-          );
+          @include token-utils.create-token-values-mixed(
+            m2-chip.$prefix, m2-chip.get-color-tokens($theme, primary));
         }
 
         &.mat-accent {
-          @include token-utils.create-token-values(
-            tokens-mdc-chip.$prefix,
-            tokens-mdc-chip.get-color-tokens($theme, accent)
-          );
-          @include token-utils.create-token-values(
-            tokens-mat-chip.$prefix,
-            tokens-mat-chip.get-color-tokens($theme, accent)
-          );
+          @include token-utils.create-token-values-mixed(
+            m2-chip.$prefix, m2-chip.get-color-tokens($theme, accent));
         }
 
         &.mat-warn {
-          @include token-utils.create-token-values(
-            tokens-mdc-chip.$prefix,
-            tokens-mdc-chip.get-color-tokens($theme, warn)
-          );
-          @include token-utils.create-token-values(
-            tokens-mat-chip.$prefix,
-            tokens-mat-chip.get-color-tokens($theme, warn)
-          );
+          @include token-utils.create-token-values-mixed(
+            m2-chip.$prefix, m2-chip.get-color-tokens($theme, warn));
         }
       }
     }
@@ -92,13 +62,8 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix,
-        tokens-mdc-chip.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-chip.$prefix,
-        tokens-mat-chip.get-typography-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-chip.$prefix, m2-chip.get-typography-tokens($theme)
       );
     }
   }
@@ -108,16 +73,11 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(m3-chip.$prefix, m3-chip.get-density-tokens($theme));
   } @else {
     .mat-mdc-chip.mat-mdc-standard-chip {
-      @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix,
-        tokens-mdc-chip.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-chip.$prefix,
-        tokens-mat-chip.get-density-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-chip.$prefix, m2-chip.get-density-tokens($theme)
       );
     }
   }
@@ -127,12 +87,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mdc-chip.$prefix,
-      tokens: tokens-mdc-chip.get-token-slots(),
-    ),
-    (
-      namespace: tokens-mat-chip.$prefix,
-      tokens: tokens-mat-chip.get-token-slots(),
+      namespace: m2-chip.$prefix,
+      tokens: m2-chip.get-token-slots(),
     ),
   );
 }
@@ -152,6 +108,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -171,8 +130,6 @@
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
-  $mdc-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-chip.$prefix, $options...);
-  $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix, $options...);
-  @include token-utils.create-token-values(tokens-mdc-chip.$prefix, $mdc-chip-tokens);
-  @include token-utils.create-token-values(tokens-mat-chip.$prefix, $mat-chip-tokens);
+  $mat-chip-tokens: token-utils.get-tokens-for($tokens, m2-chip.$prefix, $options...);
+  @include token-utils.create-token-values(m2-chip.$prefix, $mat-chip-tokens);
 }

package/chips/_m2-chip.scss

@@ -0,0 +1,127 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/inspection';
+@use '../core/style/sass-utils';
+@use '../core/m2/palette' as m2-palette;
+@use '../core/theming/theming';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, chip);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return (
+    container-shape-radius: 16px,
+    disabled-container-opacity: 0.4,
+    disabled-outline-color: transparent,
+    flat-selected-outline-width: 0,
+    focus-outline-color: transparent,
+    hover-state-layer-opacity: 0.04,
+    outline-color: transparent,
+    outline-width: 0,
+    selected-hover-state-layer-opacity: 0.04,
+    selected-trailing-action-state-layer-color: transparent,
+    trailing-action-focus-opacity: 1,
+    trailing-action-focus-state-layer-opacity: 0,
+    trailing-action-hover-state-layer-opacity: 0,
+    trailing-action-opacity: 0.54,
+    trailing-action-state-layer-color: transparent,
+    with-avatar-avatar-shape-radius: 14px,
+    with-avatar-avatar-size: 28px,
+    with-avatar-disabled-avatar-opacity: 1,
+    with-icon-disabled-icon-opacity: 1,
+    with-icon-icon-size: 18px,
+    with-trailing-icon-disabled-trailing-icon-opacity: 1,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme, $palette-name: null) {
+  $foreground: null;
+  $background: null;
+  $state-layer-color: inspection.get-theme-color($theme, foreground, base);
+  $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity.
+  $surface: inspection.get-theme-color($theme, background, card);
+
+  @if $palette-name == null {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+    $grey-50: map.get(m2-palette.$grey-palette, 50);
+    $grey-900: map.get(m2-palette.$grey-palette, 900);
+    $foreground: if($is-dark, $grey-50, $grey-900);
+
+    $surface: inspection.get-theme-color($theme, background, card);
+    $background: if(
+        meta.type-of($state-layer-color) == color and meta.type-of($surface) == color,
+        color.mix($state-layer-color, $surface, 12%),
+        $state-layer-color
+    );
+  }
+  @else {
+    $background: inspection.get-theme-color($theme, $palette-name);
+    $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
+  }
+  @return (
+    disabled-label-text-color: $foreground,
+    elevated-container-color: $background,
+    elevated-disabled-container-color: $background,
+    elevated-selected-container-color: $background,
+    flat-disabled-selected-container-color: $background,
+    focus-state-layer-color: $state-layer-color,
+    focus-state-layer-opacity: $state-layer-opacity,
+    hover-state-layer-color: $state-layer-color,
+    label-text-color: $foreground,
+    selected-disabled-trailing-icon-color: $foreground,
+    selected-focus-state-layer-color: $state-layer-color,
+    selected-focus-state-layer-opacity: $state-layer-opacity,
+    selected-hover-state-layer-color: $state-layer-color,
+    selected-label-text-color: $foreground,
+    selected-trailing-icon-color: $foreground,
+    with-icon-disabled-icon-color: $foreground,
+    with-icon-icon-color: $foreground,
+    with-icon-selected-icon-color: $foreground,
+    with-trailing-icon-disabled-trailing-icon-color: $foreground,
+    with-trailing-icon-trailing-icon-color: $foreground,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -2);
+  @return (
+    // The height of the chip.
+    container-height:
+    map.get(
+        (
+          0: 32px,
+          -1: 28px,
+          -2: 24px,
+        ),
+        $scale
+    )
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
+  );
+}