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

package/chips/index.d.ts

@@ -2,31 +2,23 @@ import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { Directionality } from '@angular/cdk/bidi';
 import { DoCheck } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { EventEmitter } from '@angular/core';
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { FormGroupDirective } from '@angular/forms';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { Injector } from '@angular/core';
-import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
-import { MatRipple } from '@angular/material/core';
-import { MatRippleLoader } from '@angular/material/core';
 import { NgControl } from '@angular/forms';
-import { NgForm } from '@angular/forms';
 import { NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { QueryList } from '@angular/core';
-import { RippleGlobalOptions } from '@angular/material/core';
 import { Subject } from 'rxjs';
 
 declare namespace i10 {
@@ -144,7 +136,7 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     _elementRef: ElementRef<HTMLElement>;
     protected _ngZone: NgZone;
     private _focusMonitor;
-    private _globalRippleOptions?;
+    private _globalRippleOptions;
     protected _document: Document;
     /** Emits when the chip is focused. */
     readonly _onFocus: Subject<MatChipEvent>;
@@ -177,6 +169,8 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     ariaDescription: string | null;
     /** Id of a span that contains this chip's aria description. */
     _ariaDescriptionId: string;
+    /** Whether the chip list is disabled. */
+    _chipListDisabled: boolean;
     private _textElement;
     /**
      * The value of the chip. Defaults to the content inside
@@ -204,7 +198,9 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     /** Whether the ripple effect is disabled or not. */
     disableRipple: boolean;
     /** Whether the chip is disabled. */
-    disabled: boolean;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     /** Emitted when a chip is to be removed. */
     readonly removed: EventEmitter<MatChipEvent>;
     /** Emitted when the chip is destroyed. */
@@ -217,22 +213,15 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     trailingIcon: MatChipTrailingIcon;
     /** The chip's trailing remove icon. */
     removeIcon: MatChipRemove;
-    /**
-     * Reference to the MatRipple instance of the chip.
-     * @deprecated Considered an implementation detail. To be removed.
-     * @breaking-change 17.0.0
-     */
-    get ripple(): MatRipple;
-    set ripple(v: MatRipple);
     /** Action receiving the primary set of user interactions. */
     primaryAction: MatChipAction;
     /**
      * Handles the lazy creation of the MatChip ripple.
      * Used to improve initial load time of large applications.
      */
-    _rippleLoader: MatRippleLoader;
+    private _rippleLoader;
     protected _injector: Injector;
-    constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined);
+    constructor(...args: unknown[]);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
@@ -260,7 +249,7 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     _handlePrimaryActionInteraction(): void;
     /** Starts the focus monitoring process on the chip. */
     private _monitorFocus;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescription": { "alias": "aria-description"; "required": false; }; "value": { "alias": "value"; "required": false; }; "color": { "alias": "color"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
     static ngAcceptInputType_removable: unknown;
     static ngAcceptInputType_highlighted: unknown;
@@ -302,12 +291,7 @@ declare class MatChipAction {
      * Determine the value of the tabindex attribute for this chip action.
      */
     protected _getTabindex(): string | null;
-    constructor(_elementRef: ElementRef<HTMLElement>, _parentChip: {
-        _handlePrimaryActionInteraction(): void;
-        remove(): void;
-        disabled: boolean;
-        _isEditing?: boolean;
-    });
+    constructor(...args: unknown[]);
     focus(): void;
     _handleClick(event: MouseEvent): void;
     _handleKeydown(event: KeyboardEvent): void;
@@ -336,7 +320,7 @@ export declare interface MatChipEditedEvent extends MatChipEvent {
 export declare class MatChipEditInput {
     private readonly _elementRef;
     private readonly _document;
-    constructor(_elementRef: ElementRef, _document: any);
+    constructor(...args: unknown[]);
     initialize(initialValue: string): void;
     getNativeElement(): HTMLElement;
     setValue(value: string): void;
@@ -448,7 +432,7 @@ export declare class MatChipGrid extends MatChipSet implements AfterContentInit,
     /** Whether the chip grid is in an error state. */
     get errorState(): boolean;
     set errorState(value: boolean);
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, ngControl: NgControl);
+    constructor(...args: unknown[]);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngDoCheck(): void;
@@ -507,7 +491,7 @@ export declare class MatChipGrid extends MatChipSet implements AfterContentInit,
     private _propagateChanges;
     /** Mark the field as touched */
     private _markAsTouched;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipGrid, [null, null, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipGrid, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipGrid, "mat-chip-grid", never, { "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, { "change": "change"; "valueChange": "valueChange"; }, ["_chips"], ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_required: unknown;
@@ -562,7 +546,7 @@ export declare class MatChipInput implements MatChipTextControl, OnChanges, OnDe
     get empty(): boolean;
     /** The native input element to which this directive is attached. */
     readonly inputElement: HTMLInputElement;
-    constructor(_elementRef: ElementRef<HTMLInputElement>, defaultOptions: MatChipsDefaultOptions, formField?: MatFormField);
+    constructor(...args: unknown[]);
     ngOnChanges(): void;
     ngOnDestroy(): void;
     /** Utility method to make host definition/tests more clear. */
@@ -580,7 +564,7 @@ export declare class MatChipInput implements MatChipTextControl, OnChanges, OnDe
     setDescribedByIds(ids: string[]): void;
     /** Checks whether a keycode is one of the configured separators. */
     private _isSeparatorKey;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipGrid": { "alias": "matChipInputFor"; "required": false; }; "addOnBlur": { "alias": "matChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "matChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, true, never>;
     static ngAcceptInputType_addOnBlur: unknown;
     static ngAcceptInputType_disabled: unknown;
@@ -843,7 +827,7 @@ export declare class MatChipRow extends MatChip implements AfterViewInit {
     /** The projected chip edit input. */
     contentEditInput?: MatChipEditInput;
     _isEditing: boolean;
-    constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, ngZone: NgZone, focusMonitor: FocusMonitor, _document: any, animationMode?: string, globalRippleOptions?: RippleGlobalOptions, tabIndex?: string);
+    constructor(...args: unknown[]);
     _hasTrailingIcon(): boolean;
     /** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
     _handleFocus(): void;
@@ -857,7 +841,7 @@ export declare class MatChipRow extends MatChip implements AfterViewInit {
      * two values is guaranteed to be defined.
      */
     private _getEditInput;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, [null, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
 }
 
@@ -927,7 +911,7 @@ export declare class MatChipSet implements AfterViewInit, OnDestroy {
     _chips: QueryList<MatChip>;
     /** Flat list of all the actions contained within the chips. */
     _chipActions: QueryList<MatChipAction>;
-    constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality);
+    constructor(...args: unknown[]);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Checks whether any of the chips is focused. */
@@ -974,7 +958,7 @@ export declare class MatChipSet implements AfterViewInit, OnDestroy {
      * if the currently-focused chip is destroyed.
      */
     private _redirectDestroyedChipFocus;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipSet, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipSet, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipSet, "mat-chip-set", never, { "disabled": { "alias": "disabled"; "required": false; }; "role": { "alias": "role"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["_chips"], ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_tabIndex: unknown;

package/core/_core-theme.scss

@@ -15,53 +15,36 @@
 @use './tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
 @use './tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
 
-$_has-inserted-loaded-marker: false;
-
-@mixin _theme-loaded-marker {
-  @if not $_has-inserted-loaded-marker {
-    $_has-inserted-loaded-marker: true !global;
-
-    // Marker that is used to determine whether the user has added a theme to their page.
-    // Needs to be generated at the root, because themes may be nested inside classes.
-    @at-root {
-      .mat-theme-loaded-marker {
-        display: none;
-      }
-    }
-  }
-}
-
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include ripple-theme.base($theme);
     @include option-theme.base($theme);
     @include optgroup-theme.base($theme);
     @include pseudo-checkbox-theme.base($theme);
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-app.$prefix,
-        tokens-mat-app.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-app.$prefix,
+        tokens-mat-app.get-unthemable-tokens()
+      );
     }
   }
-
-  // The marker is a concrete style no matter which Material version we're targeting.
-  @include _theme-loaded-marker;
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+  } @else {
     @include ripple-theme.color($theme);
     @include option-theme.color($theme);
     @include optgroup-theme.color($theme);
     @include pseudo-checkbox-theme.color($theme);
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-app.$prefix,
-        tokens-mat-app.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-app.$prefix,
+        tokens-mat-app.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -69,8 +52,7 @@ $_has-inserted-loaded-marker: false;
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include option-theme.typography($theme);
     @include optgroup-theme.typography($theme);
     @include pseudo-checkbox-theme.typography($theme);
@@ -81,8 +63,7 @@ $_has-inserted-loaded-marker: false;
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     @include option-theme.density($theme);
     @include optgroup-theme.density($theme);
     @include pseudo-checkbox-theme.density($theme);
@@ -90,23 +71,36 @@ $_has-inserted-loaded-marker: false;
   }
 }
 
-@mixin overrides($tokens: ()) {
+@function _define-overrides() {
   $app-tokens: tokens-mat-app.get-token-slots();
   $ripple-tokens: tokens-mat-ripple.get-token-slots();
   $option-tokens: tokens-mat-option.get-token-slots();
+  $optgroup-tokens: tokens-mat-optgroup.get-token-slots();
   $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots();
   $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots();
 
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-app.$prefix, tokens: $app-tokens),
-    (prefix: tokens-mat-ripple.$prefix, tokens: $ripple-tokens),
-    (prefix: tokens-mat-option.$prefix, tokens: $option-tokens),
-    (prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens),
-    (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens),
+  @return (
+    (namespace: tokens-mat-app.$prefix, tokens: $app-tokens, prefix: 'app-'),
+    (namespace: tokens-mat-ripple.$prefix, tokens: $ripple-tokens, prefix: 'ripple-'),
+    (namespace: tokens-mat-option.$prefix, tokens: $option-tokens, prefix: 'option-'),
+    (namespace: tokens-mat-optgroup.$prefix, tokens: $optgroup-tokens, prefix: 'optgroup-'),
+    (
+      namespace: tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens: $full-pseudo-checkbox-tokens,
+      prefix: 'pseudo-checkbox-full-'
+    ),
+    (
+      namespace: tokens-mat-minimal-pseudo-checkbox.$prefix,
+      tokens: $minimal-pseudo-checkbox-tokens,
+      prefix: 'pseudo-checkbox-minimal-'
+    )
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 // Mixin that renders all of the core styles that depend on the theme.
 @mixin theme($theme, $options...) {
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
@@ -115,8 +109,7 @@ $_has-inserted-loaded-marker: false;
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
     @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);
@@ -129,30 +122,41 @@ $_has-inserted-loaded-marker: false;
       }
     }
   }
-
-  // The marker is a concrete style no matter which Material version we're targeting.
-  @include _theme-loaded-marker;
 }
 
 @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'
+  );
   $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...);
   $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...);
   $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);
-  $mat-optgroup-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mat-optgroup.$prefix, $options...);
-  $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
-    tokens-mat-full-pseudo-checkbox.$prefix, $options...);
-  $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
-    tokens-mat-minimal-pseudo-checkbox.$prefix, $options...);
+  $mat-optgroup-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-optgroup.$prefix,
+    $options...
+  );
+  $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-full-pseudo-checkbox.$prefix,
+    $options...
+  );
+  $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $options...
+  );
 
   @include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens);
   @include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens);
   @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
   @include token-utils.create-token-values(tokens-mat-optgroup.$prefix, $mat-optgroup-tokens);
-  @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
-    $mat-full-pseudo-checkbox-tokens);
-  @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,
-    $mat-minimal-pseudo-checkbox-tokens);
+  @include token-utils.create-token-values(
+    tokens-mat-full-pseudo-checkbox.$prefix,
+    $mat-full-pseudo-checkbox-tokens
+  );
+  @include token-utils.create-token-values(
+    tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $mat-minimal-pseudo-checkbox-tokens
+  );
 }

package/core/_core.scss

@@ -1,28 +1,21 @@
-@use '@angular/cdk';
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
-@use './ripple/ripple';
 @use './style/elevation';
-@use './focus-indicators/private';
 
-// Mixin that renders all of the core styles that are not theme-dependent.
-@mixin core() {
+/// @deprecated This mixin is a no-op and is going to be removed in v21.
+@mixin core() {}
+
+// Emits the mat-app-background CSS class. This predefined class sets the
+// background color and text color of an element.
+@mixin app-background() {
   // TODO: Move ripple styles to be dynamically loaded instead of in core.
   // This variable is used as a fallback for the ripple element's
   // background color. However, if it isn't defined anywhere, then MSS
   // complains in its verification stage.
   html {
-    --mat-app-on-surface: initial;
+    --mat-sys-on-surface: initial;
   }
 
-  @include ripple.ripple();
-  @include cdk.a11y-visually-hidden();
-  @include cdk.overlay();
-  @include cdk.text-field-autosize();
-  @include cdk.text-field-autofill();
-  @include private.structural-styling('mat');
-  @include private.structural-styling('mat-mdc');
-
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `mat-sidenav-container`.
   @at-root {
@@ -32,7 +25,17 @@
         @include token-utils.create-token-slot(background-color, background-color, transparent);
         @include token-utils.create-token-slot(color, text-color, inherit);
       }
+    }
+  }
+}
 
+// Emits CSS classes for applying elevation. These classes follow the pattern
+// mat-elevation-z#, where # is the elevation number you want, from 0 to 24.
+// These predefined classes use the CSS box-shadow settings defined by the
+// Material Design specification.
+@mixin elevation-classes() {
+  @at-root {
+    @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
       // Provides external CSS classes for each elevation value. Each CSS class is formatted as
       // `mat-elevation-z$z-value` where `$z-value` corresponds to the z-space to which the element
       // is elevated.

package/core/focus-indicators/_private.scss

@@ -12,31 +12,19 @@ $default-border-color: transparent;
 $default-border-radius: 4px;
 
 // Mixin that renders the focus indicator structural styles.
-@mixin structural-styling($prefix) {
-  .#{$prefix}-focus-indicator {
+@mixin structural-styling() {
+  .mat-focus-indicator {
     position: relative;
 
     &::before {
       @include layout-common.fill();
       box-sizing: border-box;
       pointer-events: none;
-      display: var(--#{$prefix}-focus-indicator-display, none); // Hide the indicator by default.
-      border: var(
-          --#{$prefix}-focus-indicator-border-width,
-          #{$default-border-width}
-        )
-        var(
-          --#{$prefix}-focus-indicator-border-style,
-          #{$default-border-style}
-        )
-        var(
-          --#{$prefix}-focus-indicator-border-color,
-          #{$default-border-color}
-        );
-      border-radius: var(
-        --#{$prefix}-focus-indicator-border-radius,
-        #{$default-border-radius}
-      );
+      display: var(--mat-focus-indicator-display, none); // Hide the indicator by default.
+      border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
+      border-style: var(--mat-focus-indicator-border-style, #{$default-border-style});
+      border-color: var(--mat-focus-indicator-border-color, #{$default-border-color});
+      border-radius: var(--mat-focus-indicator-border-radius, #{$default-border-radius});
     }
 
     // By default, render the focus indicator when the focus indicator host element takes focus.
@@ -47,8 +35,8 @@ $default-border-radius: 4px;
   }
 
   // Enable the indicator in high contrast mode.
-  @include cdk.high-contrast(active, off) {
-    @include customize-focus-indicators((display: block), $prefix);
+  @include cdk.high-contrast {
+    @include _customize-focus-indicators((display: block));
   }
 }
 
@@ -62,18 +50,18 @@ $default-border-radius: 4px;
 }
 
 // Mixin that dedups CSS variables for the strong-focus-indicators mixin.
-@mixin customize-focus-indicators($config, $prefix) {
+@mixin _customize-focus-indicators($config) {
   $border-style: map.get($config, border-style);
   $border-width: map.get($config, border-width);
   $border-radius: map.get($config, border-radius);
   $border-color: map.get($config, border-color);
   $display: map.get($config, display);
   $map: (
-    '#{$prefix}-focus-indicator-border-style': $border-style,
-    '#{$prefix}-focus-indicator-border-width': $border-width,
-    '#{$prefix}-focus-indicator-border-radius': $border-radius,
-    '#{$prefix}-focus-indicator-border-color': $border-color,
-    '#{$prefix}-focus-indicator-display': $display,
+    'mat-focus-indicator-border-style': $border-style,
+    'mat-focus-indicator-border-width': $border-width,
+    'mat-focus-indicator-border-radius': $border-radius,
+    'mat-focus-indicator-border-color': $border-color,
+    'mat-focus-indicator-display': $display,
   );
 
   @if (&) {
@@ -91,48 +79,29 @@ $default-border-radius: 4px;
 @mixin strong-focus-indicators($config: ()) {
   // Default focus indicator config.
   $default-config: (
-      border-color: black,
-      display: block,
+    border-color: black,
+    display: block,
   );
 
   // Merge default config with user config.
   $config: map.merge($default-config, $config);
 
-  @include customize-focus-indicators($config, 'mat');
-}
-
-@mixin mdc-strong-focus-indicators($config: ()) {
-  // Default focus indicator config.
-  $default-config: (
-      border-color: black,
-      display: block,
-  );
-
-  // Merge default config with user config.
-  $config: map.merge($default-config, $config);
-
-  @include customize-focus-indicators($config, 'mat-mdc');
+  @include _customize-focus-indicators($config);
 }
 
 @mixin strong-focus-indicators-color($theme-or-color) {
   @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat');
+    @include _customize-focus-indicators((border-color: $theme-or-color));
   }
   @else {
     $border-color: inspection.get-theme-color($theme-or-color, primary);
-    @include customize-focus-indicators((
-        border-color: $border-color
-    ), 'mat');
+    @include _customize-focus-indicators((border-color: $border-color));
   }
 }
 
 @mixin strong-focus-indicators-theme($theme-or-color) {
   @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat');
+    @include _customize-focus-indicators((border-color: $theme-or-color));
   }
   @else {
     @include theming.private-check-duplicate-theme-styles($theme-or-color, 'mat-focus-indicators') {
@@ -142,33 +111,3 @@ $default-border-radius: 4px;
     }
   }
 }
-
-@mixin mdc-strong-focus-indicators-color($theme-or-color) {
-  @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat-mdc');
-  }
-  @else {
-    $border-color: inspection.get-theme-color($theme-or-color, primary);
-    @include customize-focus-indicators((
-        border-color: $border-color
-    ), 'mat-mdc');
-  }
-}
-
-@mixin mdc-strong-focus-indicators-theme($theme-or-color) {
-  @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat-mdc');
-  }
-  @else {
-    @include theming.private-check-duplicate-theme-styles(
-        $theme-or-color, 'mat-mdc-focus-indicators') {
-      @if inspection.theme-has($theme-or-color, color) {
-        @include mdc-strong-focus-indicators-color($theme-or-color);
-      }
-    }
-  }
-}