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

package/_index.scss

@@ -21,6 +21,7 @@
 @forward './core/tokens/m3-system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state;
+@forward './core/tokens/m3-system' as private-experimental-* show private-experimental-theme;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;
@@ -37,8 +38,8 @@
 // Structural
 @forward './core/core' show core;
 @forward './core/ripple/ripple' show ripple;
-@forward './core/focus-indicators/focus-indicators' show strong-focus-indicators;
-@forward './core/focus-indicators/private' as private-strong-focus-indicators-*;
+@forward './core/focus-indicators/private' show strong-focus-indicators,
+  strong-focus-indicators-color, strong-focus-indicators-theme;
 @forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition;
 
 // Theme bundles
@@ -60,8 +61,6 @@
   pseudo-checkbox-base, pseudo-checkbox-overrides;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
   pseudo-checkbox-legacy-size;
-@forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show
-  strong-focus-indicators-color, strong-focus-indicators-theme;
 @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme,
   autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base,
   autocomplete-overrides;

package/button/_button-base.scss

@@ -48,11 +48,11 @@
   }
 
   // The focus indicator should match the bounds of the entire button.
-  .mat-mdc-focus-indicator {
+  .mat-focus-indicator {
     @include layout-common.fill();
   }
 
-  &:focus .mat-mdc-focus-indicator::before {
+  &:focus .mat-focus-indicator::before {
     content: '';
   }
 }

package/button/index.d.ts

@@ -4,7 +4,6 @@ import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
-import { MatRipple } from '@angular/material/core';
 import { MatRippleLoader } from '@angular/material/core';
 import { NgZone } from '@angular/core';
 import { OnDestroy } from '@angular/core';
@@ -104,16 +103,9 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
      * Handles the lazy creation of the MatButton ripple.
      * Used to improve initial load time of large applications.
      */
-    _rippleLoader: MatRippleLoader;
+    protected _rippleLoader: MatRippleLoader;
     /** Whether this button is a FAB. Used to apply the correct class on the ripple. */
-    _isFab: boolean;
-    /**
-     * Reference to the MatRipple instance of the button.
-     * @deprecated Considered an implementation detail. To be removed.
-     * @breaking-change 17.0.0
-     */
-    get ripple(): MatRipple;
-    set ripple(v: MatRipple);
+    protected _isFab: boolean;
     /**
      * Theme color of the button. This API is supported in M2 themes only, it has
      * no effect in M3 themes.

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/index.d.ts

@@ -9,7 +9,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';
@@ -119,12 +118,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

package/chips/index.d.ts

@@ -16,8 +16,6 @@ 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';
@@ -217,20 +215,13 @@ 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);
     ngOnInit(): void;

package/core/_core.scss

@@ -1,7 +1,6 @@
 @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';
 
@@ -15,13 +14,8 @@
     --mat-app-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');
+  @include private.structural-styling();
 
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `mat-sidenav-container`.

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);
-      }
-    }
-  }
-}

package/core/index.d.ts

@@ -10,6 +10,7 @@ import { HighContrastModeDetector } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/bidi';
 import { InjectionToken } from '@angular/core';
+import { Injector } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { NgZone } from '@angular/core';
@@ -22,12 +23,6 @@ import { QueryList } from '@angular/core';
 import { Subject } from 'rxjs';
 import { Version } from '@angular/core';
 
-/**
- * This is a permissive type for abstract class constructors.
- * @docs-private
- */
-export declare type _AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
-
 
 /** @docs-private */
 export declare class AnimationCurves {
@@ -44,64 +39,6 @@ export declare class AnimationDurations {
     static EXITING: string;
 }
 
-/**
- * @docs-private
- * @deprecated Will be removed together with `mixinColor`.
- * @breaking-change 19.0.0
- */
-export declare interface CanColor {
-    /** Theme color palette for the component. */
-    color: ThemePalette;
-    /** Default color to fall back to if no value is set. */
-    defaultColor: ThemePalette | undefined;
-}
-
-declare type CanColorCtor = _Constructor<CanColor> & _AbstractConstructor<CanColor>;
-
-/**
- * @docs-private
- * @deprecated Will be removed together with `mixinDisabled`.
- * @breaking-change 19.0.0
- */
-export declare interface CanDisable {
-    /** Whether the component is disabled. */
-    disabled: boolean;
-}
-
-declare type CanDisableCtor = _Constructor<CanDisable> & _AbstractConstructor<CanDisable>;
-
-/**
- * @docs-private
- * @deprecated Will be removed together with `mixinDisableRipple`.
- * @breaking-change 19.0.0
- */
-export declare interface CanDisableRipple {
-    /** Whether ripples are disabled. */
-    disableRipple: boolean;
-}
-
-declare type CanDisableRippleCtor = _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple>;
-
-/**
- * @docs-private
- * @deprecated Will be removed together with `mixinErrorState`.
- * @breaking-change 19.0.0
- */
-export declare interface CanUpdateErrorState {
-    /** Updates the error state based on the provided error state matcher. */
-    updateErrorState(): void;
-    /** Whether the component is in an error state. */
-    errorState: boolean;
-    /** An object used to control the error state of the component. */
-    errorStateMatcher: ErrorStateMatcher_2;
-}
-
-declare type CanUpdateErrorStateCtor = _Constructor<CanUpdateErrorState> & _AbstractConstructor<CanUpdateErrorState>;
-
-
-/** @docs-private */
-export declare type _Constructor<T> = new (...args: any[]) => T;
-
 /**
  * Counts the amount of option group labels that precede the specified option.
  * @param optionIndex Index of the option at which to start counting.
@@ -369,56 +306,6 @@ export declare interface GranularSanityChecks {
     version: boolean;
 }
 
-/** @docs-private */
-declare interface HasElementRef {
-    _elementRef: ElementRef;
-}
-
-/** @docs-private */
-declare interface HasErrorState {
-    _parentFormGroup: FormGroupDirective | null;
-    _parentForm: NgForm | null;
-    _defaultErrorStateMatcher: ErrorStateMatcher_2;
-    ngControl: NgControl | null;
-    stateChanges: Subject<void>;
-}
-
-/**
- * Mixin that adds an initialized property to a directive which, when subscribed to, will emit a
- * value once markInitialized has been called, which should be done during the ngOnInit function.
- * If the subscription is made after it has already been marked as initialized, then it will trigger
- * an emit immediately.
- * @docs-private
- * @deprecated Will be removed together with `mixinInitializer`.
- * @breaking-change 19.0.0
- */
-export declare interface HasInitialized {
-    /** Stream that emits once during the directive/component's ngOnInit. */
-    initialized: Observable<void>;
-    /**
-     * Sets the state as initialized and must be called during ngOnInit to notify subscribers that
-     * the directive has been initialized.
-     * @docs-private
-     */
-    _markInitialized: () => void;
-}
-
-declare type HasInitializedCtor = _Constructor<HasInitialized>;
-
-/**
- * @docs-private
- * @deprecated Will be removed together with `mixinTabIndex`.
- * @breaking-change 19.0.0
- */
-export declare interface HasTabIndex {
-    /** Tabindex of the component. */
-    tabIndex: number;
-    /** Tabindex to which to fall back to if no value is set. */
-    defaultTabIndex: number;
-}
-
-declare type HasTabIndexCtor = _Constructor<HasTabIndex> & _AbstractConstructor<HasTabIndex>;
-
 declare namespace i1_2 {
     export {
         MATERIAL_SANITY_CHECKS_FACTORY,
@@ -431,6 +318,9 @@ declare namespace i1_2 {
 
 declare namespace i1_3 {
     export {
+        RippleRenderer,
+        RippleTarget,
+        defaultRippleAnimationConfig,
         MatRippleModule,
         RippleGlobalOptions,
         MAT_RIPPLE_GLOBAL_OPTIONS,
@@ -438,10 +328,7 @@ declare namespace i1_3 {
         RippleState,
         RippleConfig,
         RippleAnimationConfig,
-        RippleRef,
-        RippleTarget,
-        defaultRippleAnimationConfig,
-        RippleRenderer
+        RippleRef
     }
 }
 
@@ -799,7 +686,7 @@ export declare class MatRipple implements OnInit, OnDestroy, RippleTarget {
     private _globalOptions;
     /** @docs-private Whether ripple directive is initialized and the input bindings are set. */
     _isInitialized: boolean;
-    constructor(_elementRef: ElementRef<HTMLElement>, ngZone: NgZone, platform: Platform, globalOptions?: RippleGlobalOptions, _animationMode?: string | undefined);
+    constructor(_elementRef: ElementRef<HTMLElement>, ngZone: NgZone, platform: Platform, globalOptions?: RippleGlobalOptions, _animationMode?: string | undefined, injector?: Injector);
     ngOnInit(): void;
     ngOnDestroy(): void;
     /** Fades out all currently showing ripple elements. */
@@ -832,7 +719,7 @@ export declare class MatRipple implements OnInit, OnDestroy, RippleTarget {
      * @param config Optional ripple configuration for the manual ripple.
      */
     launch(x: number, y: number, config?: RippleConfig): RippleRef;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatRipple, [null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatRipple, [null, null, null, { optional: true; }, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatRipple, "[mat-ripple], [matRipple]", ["matRipple"], { "color": { "alias": "matRippleColor"; "required": false; }; "unbounded": { "alias": "matRippleUnbounded"; "required": false; }; "centered": { "alias": "matRippleCentered"; "required": false; }; "radius": { "alias": "matRippleRadius"; "required": false; }; "animation": { "alias": "matRippleAnimation"; "required": false; }; "disabled": { "alias": "matRippleDisabled"; "required": false; }; "trigger": { "alias": "matRippleTrigger"; "required": false; }; }, {}, never, never, true, never>;
 }
 
@@ -850,6 +737,7 @@ export declare class MatRippleLoader implements OnDestroy {
     private _globalRippleOptions;
     private _platform;
     private _ngZone;
+    private _injector;
     private _hosts;
     constructor();
     ngOnDestroy(): void;
@@ -864,8 +752,6 @@ export declare class MatRippleLoader implements OnDestroy {
         centered?: boolean;
         disabled?: boolean;
     }): void;
-    /** Returns the ripple instance for the given host element. */
-    getRipple(host: HTMLElement): MatRipple | undefined;
     /** Sets the disabled state on the ripple instance corresponding to the given host element. */
     setDisabled(host: HTMLElement, disabled: boolean): void;
     /**
@@ -875,7 +761,6 @@ export declare class MatRippleLoader implements OnDestroy {
     private _onInteraction;
     /** Creates a MatRipple and appends it to the given element. */
     private _createRipple;
-    attachRipple(host: HTMLElement, ripple: MatRipple): void;
     destroyRipple(host: HTMLElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRippleLoader, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatRippleLoader>;
@@ -887,49 +772,6 @@ export declare class MatRippleModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatRippleModule>;
 }
 
-/**
- * Mixin to augment a directive with a `color` property.
- * @deprecated Use a plain input and host bindings instead.
- * @breaking-change 19.0.0
- */
-export declare function mixinColor<T extends _AbstractConstructor<HasElementRef>>(base: T, defaultColor?: ThemePalette): CanColorCtor & T;
-
-/**
- * Mixin to augment a directive with a `disabled` property.
- * @deprecated Use an input with a transform instead.
- * @breaking-change 19.0.0
- */
-export declare function mixinDisabled<T extends _AbstractConstructor<{}>>(base: T): CanDisableCtor & T;
-
-/**
- * Mixin to augment a directive with a `disableRipple` property.
- * @deprecated Use an input with a transform instead.
- * @breaking-change 19.0.0
- */
-export declare function mixinDisableRipple<T extends _AbstractConstructor<{}>>(base: T): CanDisableRippleCtor & T;
-
-/**
- * Mixin to augment a directive with updateErrorState method.
- * For component with `errorState` and need to update `errorState`.
- * @deprecated Implement the `updateErrorState` method directly.
- * @breaking-change 19.0.0
- */
-export declare function mixinErrorState<T extends _AbstractConstructor<HasErrorState>>(base: T): CanUpdateErrorStateCtor & T;
-
-/**
- * Mixin to augment a directive with an initialized property that will emits when ngOnInit ends.
- * @deprecated Track the initialized state manually.
- * @breaking-change 19.0.0
- */
-export declare function mixinInitialized<T extends _Constructor<{}>>(base: T): HasInitializedCtor & T;
-
-/**
- * Mixin to augment a directive with a `tabIndex` property.
- * @deprecated Use an input with a transform instead.
- * @breaking-change 19.0.0
- */
-export declare function mixinTabIndex<T extends _AbstractConstructor<CanDisable>>(base: T, defaultTabIndex?: number): HasTabIndexCtor & T;
-
 /** Adapts the native JS Date for use with cdk-based components that work with dates. */
 export declare class NativeDateAdapter extends DateAdapter<Date> {
     /**
@@ -1108,7 +950,7 @@ export declare class RippleRenderer implements EventListenerObject {
      */
     private _containerRect;
     private static _eventManager;
-    constructor(_target: RippleTarget, _ngZone: NgZone, elementOrElementRef: HTMLElement | ElementRef<HTMLElement>, _platform: Platform);
+    constructor(_target: RippleTarget, _ngZone: NgZone, elementOrElementRef: HTMLElement | ElementRef<HTMLElement>, _platform: Platform, injector?: Injector);
     /**
      * Fades in a ripple at the given coordinates.
      * @param x Coordinate within the element, along the X axis at which to start the ripple.
@@ -1189,6 +1031,7 @@ export declare class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
     static ɵprov: i0.ɵɵInjectableDeclaration<ShowOnDirtyErrorStateMatcher>;
 }
 
+
 /** Possible color palette values. */
 export declare type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;
 

package/core/ripple/_ripple.scss

@@ -44,7 +44,7 @@
     }
 
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.
-    @include cdk.high-contrast(active, off) {
+    @include cdk.high-contrast {
       display: none;
     }
 

package/core/style/_elevation.scss

@@ -110,7 +110,7 @@ $_ambient-map: (
 // <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
 //
 // For an explanation of the design behind how elevation is implemented, see the design doc at
-// https://goo.gl/Kq0k9Z.
+// https://docs.google.com/document/d/1W3NGSLqDZzjbBBLW2C6y_6NUxtvdZAVaJvg58LY3Q0E/edit
 
 // The default duration value for elevation transitions.
 $transition-duration: 280ms !default;

package/core/style/_menu-common.scss

@@ -79,7 +79,7 @@ $icon-margin: 16px !default;
   }
 
   // Fix for Chromium-based browsers blending in the `currentColor` with the background.
-  @include cdk.high-contrast(active, off) {
+  @include cdk.high-contrast {
     fill: CanvasText;
   }
 }

package/core/style/_sass-utils.scss

@@ -77,6 +77,10 @@ $use-system-typography-variables: false;
       $opacity: ($opacity * 100) + '%';
     }
 
+    @if (is-css-var-name($opacity)) {
+      $opacity: calc(var($opacity) * 100%);
+    }
+
     @if (is-css-var-name($color)) {
       $color: var($color);
     }