@angular/material 19.0.0-next.1 → 19.0.0-next.10

package/card/_card-theme.scss

@@ -12,15 +12,20 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-          tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-unthemable-tokens());
+        tokens-mdc-elevated-card.$prefix,
+        tokens-mdc-elevated-card.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-          tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-unthemable-tokens());
+        tokens-mdc-outlined-card.$prefix,
+        tokens-mdc-outlined-card.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-          tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens());
+        tokens-mat-card.$prefix,
+        tokens-mat-card.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -28,15 +33,20 @@
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mdc-elevated-card.$prefix,
-        tokens-mdc-elevated-card.get-color-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-outlined-card.$prefix,
-        tokens-mdc-outlined-card.get-color-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-card.$prefix,
-        tokens-mat-card.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-elevated-card.$prefix,
+        tokens-mdc-elevated-card.get-color-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-card.$prefix,
+        tokens-mdc-outlined-card.get-color-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-card.$prefix,
+        tokens-mat-card.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -44,15 +54,20 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-        tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-typography-tokens($theme));
+        tokens-mdc-elevated-card.$prefix,
+        tokens-mdc-elevated-card.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-typography-tokens($theme));
+        tokens-mdc-outlined-card.$prefix,
+        tokens-mdc-outlined-card.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-card.$prefix, tokens-mat-card.get-typography-tokens($theme));
+        tokens-mat-card.$prefix,
+        tokens-mat-card.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -60,34 +75,53 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mdc-elevated-card.$prefix,
-        tokens-mdc-elevated-card.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-outlined-card.$prefix,
-        tokens-mdc-outlined-card.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-card.$prefix,
-        tokens-mat-card.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-elevated-card.$prefix,
+        tokens-mdc-elevated-card.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-card.$prefix,
+        tokens-mdc-outlined-card.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-card.$prefix,
+        tokens-mat-card.get-density-tokens($theme)
+      );
     }
   }
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-card.$prefix, tokens: tokens-mat-card.get-token-slots()),
-    (prefix: tokens-mdc-elevated-card.$prefix, tokens: tokens-mdc-elevated-card.get-token-slots()),
-    (prefix: tokens-mdc-outlined-card.$prefix, tokens: tokens-mdc-outlined-card.get-token-slots()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-card.$prefix,
+      tokens: tokens-mat-card.get-token-slots(),
+    ),
+    (
+      namespace: tokens-mdc-elevated-card.$prefix,
+      tokens: tokens-mdc-elevated-card.get-token-slots(),
+      prefix: 'elevated-',
+    ),
+    (
+      namespace: tokens-mdc-outlined-card.$prefix,
+      tokens: tokens-mdc-outlined-card.get-token-slots(),
+      prefix: 'outlined-',
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -104,13 +138,20 @@
 
 @mixin _theme-from-tokens($tokens) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-        tokens-mdc-elevated-card.$prefix, map.get($tokens, tokens-mdc-elevated-card.$prefix));
+      tokens-mdc-elevated-card.$prefix,
+      map.get($tokens, tokens-mdc-elevated-card.$prefix)
+    );
     @include token-utils.create-token-values(
-        tokens-mdc-outlined-card.$prefix, map.get($tokens, tokens-mdc-outlined-card.$prefix));
+      tokens-mdc-outlined-card.$prefix,
+      map.get($tokens, tokens-mdc-outlined-card.$prefix)
+    );
     @include token-utils.create-token-values(
-        tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
+      tokens-mat-card.$prefix,
+      map.get($tokens, tokens-mat-card.$prefix)
+    );
   }
 }

package/card/index.d.ts

@@ -36,8 +36,8 @@ export declare const MAT_CARD_CONFIG: InjectionToken<MatCardConfig>;
  */
 export declare class MatCard {
     appearance: MatCardAppearance;
-    constructor(config?: MatCardConfig);
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatCard, [{ optional: true; }]>;
+    constructor(...args: unknown[]);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatCard, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatCard, "mat-card", ["matCard"], { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 

package/checkbox/_checkbox-common.scss

@@ -66,7 +66,7 @@ $_fallback-size: 40px;
     cursor: default;
     pointer-events: none;
 
-    @include cdk.high-contrast(active, off) {
+    @include cdk.high-contrast {
       opacity: 0.5;
     }
   }
@@ -177,7 +177,7 @@ $_fallback-size: 40px;
       @include token-utils.create-token-slot(color, selected-checkmark-color);
     }
 
-    @include cdk.high-contrast(active, off) {
+    @include cdk.high-contrast {
       color: CanvasText;
     }
   }
@@ -188,7 +188,7 @@ $_fallback-size: 40px;
         .mdc-checkbox__checkmark {
           @include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
 
-          @include cdk.high-contrast(active, off) {
+          @include cdk.high-contrast {
             color: CanvasText;
           }
         }
@@ -220,7 +220,7 @@ $_fallback-size: 40px;
       @include token-utils.create-token-slot(border-color, selected-checkmark-color);
     }
 
-    @include cdk.high-contrast(active, off) {
+    @include cdk.high-contrast {
       margin: 0 1px;
     }
   }

package/checkbox/_checkbox-theme.scss

@@ -51,13 +51,15 @@
       &.mat-primary {
         @include token-utils.create-token-values(
           tokens-mdc-checkbox.$prefix,
-          tokens-mdc-checkbox.get-color-tokens($theme, primary));
+          tokens-mdc-checkbox.get-color-tokens($theme, primary)
+        );
       }
 
       &.mat-warn {
         @include token-utils.create-token-values(
           tokens-mdc-checkbox.$prefix,
-          tokens-mdc-checkbox.get-color-tokens($theme, warn));
+          tokens-mdc-checkbox.get-color-tokens($theme, warn)
+        );
       }
     }
   }
@@ -103,22 +105,26 @@
   }
 }
 
-/// Outputs the CSS variable values for the given tokens.
-/// @param {Map} $tokens The token values to emit.
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
     (
-      prefix: tokens-mat-checkbox.$prefix,
+      namespace: tokens-mat-checkbox.$prefix,
       tokens: tokens-mat-checkbox.get-token-slots(),
     ),
     (
-      prefix: tokens-mdc-checkbox.$prefix,
+      namespace: tokens-mdc-checkbox.$prefix,
       tokens: tokens-mdc-checkbox.get-token-slots(),
-    )
+    ),
   );
 }
 
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):

package/checkbox/index.d.ts

@@ -1,6 +1,5 @@
 import { AbstractControl } from '@angular/forms';
 import { AfterViewInit } from '@angular/core';
-import { ChangeDetectorRef } from '@angular/core';
 import { CheckboxRequiredValidator } from '@angular/forms';
 import { ControlValueAccessor } from '@angular/forms';
 import { ElementRef } from '@angular/core';
@@ -9,8 +8,6 @@ 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 { MatRipple } from '@angular/material/core';
-import { NgZone } from '@angular/core';
 import { OnChanges } from '@angular/core';
 import { Provider } from '@angular/core';
 import { SimpleChanges } from '@angular/core';
@@ -56,8 +53,8 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     _elementRef: ElementRef<HTMLElement>;
     private _changeDetectorRef;
     private _ngZone;
-    _animationMode?: string | undefined;
-    private _options?;
+    _animationMode?: "NoopAnimations" | "BrowserAnimations" | null | undefined;
+    private _options;
     /** Focuses the checkbox. */
     focus(): void;
     /** Creates the change event that will be emitted by the checkbox. */
@@ -84,6 +81,16 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     ariaLabelledby: string | null;
     /** The 'aria-describedby' attribute is read after the element's label and field type. */
     ariaDescribedby: string;
+    /**
+     * Users can specify the `aria-expanded` attribute which will be forwarded to the input element
+     */
+    ariaExpanded: boolean;
+    /**
+     * Users can specify the `aria-controls` attribute which will be forwarded to the input element
+     */
+    ariaControls: string;
+    /** Users can specify the `aria-owns` attribute which will be forwarded to the input element */
+    ariaOwns: string;
     private _uniqueId;
     /** A unique id for the checkbox input. If none is supplied, it will be auto-generated. */
     id: string;
@@ -119,12 +126,6 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     color: string | undefined;
     /** Whether the checkbox should remain interactive when it is disabled. */
     disabledInteractive: boolean;
-    /**
-     * Reference to the MatRipple instance of the checkbox.
-     * @deprecated Considered an implementation detail. To be removed.
-     * @breaking-change 17.0.0
-     */
-    ripple: MatRipple;
     /**
      * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
      * @docs-private
@@ -134,7 +135,7 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     private _currentCheckState;
     private _controlValueAccessorChangeFn;
     private _validatorChangeFn;
-    constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, tabIndex: string, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
+    constructor(...args: unknown[]);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     /** Whether the checkbox is checked. */
@@ -190,8 +191,9 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
      *  bubbles when the label is clicked.
      */
     _preventBubblingFromLabel(event: MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckbox, [null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "ariaExpanded": { "alias": "aria-expanded"; "required": false; }; "ariaControls": { "alias": "aria-controls"; "required": false; }; "ariaOwns": { "alias": "aria-owns"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_ariaExpanded: unknown;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_disableRipple: unknown;
     static ngAcceptInputType_tabIndex: unknown;

package/chips/_chips-theme.scss

@@ -13,13 +13,16 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     .mat-mdc-standard-chip {
       @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-unthemable-tokens());
+        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());
+        tokens-mat-chip.$prefix,
+        tokens-mat-chip.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -32,35 +35,50 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     .mat-mdc-standard-chip {
       @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme));
+        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));
+        tokens-mat-chip.$prefix,
+        tokens-mat-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));
+            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));
+            tokens-mat-chip.$prefix,
+            tokens-mat-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));
+            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));
+            tokens-mat-chip.$prefix,
+            tokens-mat-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));
+            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));
+            tokens-mat-chip.$prefix,
+            tokens-mat-chip.get-color-tokens($theme, warn)
+          );
         }
       }
     }
@@ -72,13 +90,16 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     .mat-mdc-standard-chip {
       @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-typography-tokens($theme));
+        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));
+        tokens-mat-chip.$prefix,
+        tokens-mat-chip.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -88,25 +109,38 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @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));
+        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));
+        tokens-mat-chip.$prefix,
+        tokens-mat-chip.get-density-tokens($theme)
+      );
     }
   }
 }
 
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@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(),
+    ),
+  );
+}
+
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mdc-chip.$prefix, tokens: tokens-mdc-chip.get-token-slots()),
-    (prefix: tokens-mat-chip.$prefix, tokens: tokens-mat-chip.get-token-slots()),
-  );
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-chips.
@@ -118,8 +152,7 @@
   @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...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -136,7 +169,8 @@
 
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    '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);