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

package/_index.scss

@@ -14,6 +14,25 @@
 @forward './core/typography/typography-utils' show typography-level,
   font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
 
+// Private/Internal
+@forward './core/density/private/all-density' as private-* show private-all-component-densities;
+@forward './core/theming/theming' show private-check-duplicate-theme-styles,
+  private-legacy-get-theme, private-is-theme-object;
+  @forward './core/style/layout-common' as private-* show private-fill;
+@forward './core/style/private' show private-theme-elevation, private-animation-noop;
+@forward './core/style/vendor-prefixes' as private-* show private-user-select,
+  private-position-sticky, private-color-adjust;
+@forward './core/theming/palette' as private-* show $private-dark-primary-text,
+  $private-dark-disabled-text;
+@forward './core/style/variables' as private-* show $private-swift-ease-in-duration,
+  $private-swift-ease-in-timing-function, $private-swift-ease-out-timing-function,
+  $private-ease-in-out-curve-function, $private-swift-ease-out-duration, $private-xsmall;
+@forward './core/typography/typography' show private-typography-to-2014-config,
+  private-typography-to-2018-config;
+@forward './table/table-flex-styles' show private-table-flex-styles;
+@forward './core/style/menu-common' as private-menu-common-*;
+@forward './core/style/button-common' as private-button-common-*;
+
 // Structural
 @forward './core/core' show core;
 @forward './core/ripple/ripple' show ripple;
@@ -49,7 +68,7 @@
   checkbox-typography;
 @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography;
 @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color,
-  datepicker-typography;
+  datepicker-typography, datepicker-date-range-colors;
 @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography;
 @forward './divider/divider-theme' as divider-* show divider-theme, divider-color,
   divider-typography;

package/autocomplete/autocomplete-trigger.d.ts

@@ -11,7 +11,7 @@ import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, ViewContainerRef, OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { MatOption, MatOptionSelectionChange } from '@angular/material/core';
+import { _MatOptionBase, MatOptionSelectionChange } from '@angular/material/core';
 import { MatFormField } from '@angular/material/form-field';
 import { Observable } from 'rxjs';
 import { _MatAutocompleteBase, MatAutocompleteDefaultOptions } from './autocomplete';
@@ -70,6 +70,13 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
      * comes back.
      */
     private _canOpenOnNextFocus;
+    /** Value inside the input before we auto-selected an option. */
+    private _valueBeforeAutoSelection;
+    /**
+     * Current option that we have auto-selected as the user is navigating,
+     * but which hasn't been propagated to the model value yet.
+     */
+    private _pendingAutoselectedOption;
     /** Stream of keyboard events that can close the panel. */
     private readonly _closeKeyEventStream;
     /**
@@ -133,7 +140,7 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     /** Stream of changes to the selection state of the autocomplete options. */
     readonly optionSelections: Observable<MatOptionSelectionChange>;
     /** The currently active option, coerced to MatOption type. */
-    get activeOption(): MatOption | null;
+    get activeOption(): _MatOptionBase | null;
     /** Stream of clicks outside of the autocomplete panel. */
     private _getOutsideClickStream;
     writeValue(value: any): void;
@@ -143,6 +150,7 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     _handleKeydown(event: KeyboardEvent): void;
     _handleInput(event: KeyboardEvent): void;
     _handleFocus(): void;
+    _handleClick(): void;
     /**
      * In "auto" mode, the label will animate down as soon as focus is lost.
      * This causes the value to jump when selecting an option with the mouse.
@@ -159,7 +167,8 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     private _subscribeToClosingActions;
     /** Destroys the autocomplete suggestion panel. */
     private _destroyPanel;
-    private _setTriggerValue;
+    private _assignOptionValue;
+    private _updateNativeInputValue;
     /**
      * This method closes the panel, and if a value is specified, also sets the associated
      * control to that value. It will also mark the control as dirty if this interaction
@@ -190,6 +199,8 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     private _getWindow;
     /** Scrolls to a particular option in the list. */
     private _scrollToOption;
+    /** Handles keyboard events coming from the overlay panel. */
+    private _handleOverlayEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatAutocompleteTriggerBase, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteTriggerBase, never, never, { "autocomplete": "matAutocomplete"; "position": "matAutocompletePosition"; "connectedTo": "matAutocompleteConnectedTo"; "autocompleteAttribute": "autocomplete"; "autocompleteDisabled": "matAutocompleteDisabled"; }, {}, never>;
 }

package/autocomplete/autocomplete.d.ts

@@ -38,6 +38,8 @@ declare const _MatAutocompleteMixinBase: import("@angular/material/core")._Const
 export interface MatAutocompleteDefaultOptions {
     /** Whether the first option should be highlighted when an autocomplete panel is opened. */
     autoActiveFirstOption?: boolean;
+    /** Whether the active option should be selected as the user is navigating. */
+    autoSelectActiveOption?: boolean;
     /** Class or list of classes to be applied to the autocomplete's overlay panel. */
     overlayPanelClass?: string | string[];
 }
@@ -82,6 +84,10 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     get autoActiveFirstOption(): boolean;
     set autoActiveFirstOption(value: BooleanInput);
     private _autoActiveFirstOption;
+    /** Whether the active option should be selected as the user is navigating. */
+    get autoSelectActiveOption(): boolean;
+    set autoSelectActiveOption(value: BooleanInput);
+    private _autoSelectActiveOption;
     /**
      * Specify the width of the autocomplete panel.  Can be any CSS sizing value, otherwise it will
      * match the width of its host.
@@ -129,7 +135,7 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     /** Sets the autocomplete visibility classes on a classlist based on the panel is visible. */
     private _setVisibilityClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatAutocompleteBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteBase, never, never, { "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "displayWith": "displayWith"; "autoActiveFirstOption": "autoActiveFirstOption"; "panelWidth": "panelWidth"; "classList": "class"; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteBase, never, never, { "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "displayWith": "displayWith"; "autoActiveFirstOption": "autoActiveFirstOption"; "autoSelectActiveOption": "autoSelectActiveOption"; "panelWidth": "panelWidth"; "classList": "class"; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never>;
 }
 export declare class MatAutocomplete extends _MatAutocompleteBase {
     /** Reference to all option groups within the autocomplete. */

package/badge/_badge-theme.scss

@@ -5,10 +5,11 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:math';
+@use '@angular/cdk';
+
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
-@use '../../cdk/a11y';
 
 $font-size: 12px;
 $font-weight: 600;
@@ -102,6 +103,14 @@ $_badge-structure-emitted: false !default;
     position: relative;
   }
 
+  // The badge should make sure its host is overflow visible so that the badge content
+  // can be rendered outside of the element. Some components such as <mat-icon> explicitly
+  // style `overflow: hidden` so this requires extra specificity so that it does not
+  // depend on style load order.
+  .mat-badge.mat-badge {
+    overflow: visible;
+  }
+
   .mat-badge-hidden {
     .mat-badge-content {
       display: none;
@@ -158,7 +167,7 @@ $_badge-structure-emitted: false !default;
     color: theming.get-color-from-palette($primary, default-contrast);
     background: theming.get-color-from-palette($primary);
 
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       outline: solid 1px;
       border-radius: 0;
     }

package/button-toggle/_button-toggle-theme.scss

@@ -11,15 +11,27 @@
   $foreground: map.get($config, foreground);
   $background: map.get($config, background);
   $divider-color: theming.get-color-from-palette($foreground, divider);
+  $theme-divider-color: map.get($foreground, divider);
+
+  // By default the theme usually has an rgba color for the dividers, which can
+  // stack up with the background of a button toggle. This can cause the border
+  // of a selected toggle to look different from an deselected one. We use a solid
+  // color to ensure that the border always stays the same.
+  $divider-color: if(type-of($theme-divider-color) == color,
+    theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),
+    $theme-divider-color
+  );
 
   .mat-button-toggle-standalone,
   .mat-button-toggle-group {
-    @include private.private-theme-elevation(2, $config);
+    @include private.private-theme-overridable-elevation(2, $config);
   }
 
   .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
   .mat-button-toggle-group-appearance-standard {
-    box-shadow: none;
+    &:not([class*='mat-elevation-z']) {
+      box-shadow: none;
+    }
   }
 
   .mat-button-toggle {

package/checkbox/_checkbox-theme.scss

@@ -71,7 +71,7 @@
     }
 
     .mat-checkbox-label {
-      color: theming.get-color-from-palette($foreground, secondary-text);
+      color: theming.get-color-from-palette($foreground, disabled);
     }
   }
 

package/checkbox/checkbox.d.ts

@@ -109,7 +109,7 @@ export declare class MatCheckbox extends _MatCheckboxBase implements ControlValu
      * Whether the checkbox is checked.
      */
     get checked(): boolean;
-    set checked(value: boolean);
+    set checked(value: BooleanInput);
     private _checked;
     /**
      * Whether the checkbox is disabled. This fully overrides the implementation provided by

package/checkbox/testing/checkbox-harness-filters.d.ts

@@ -12,4 +12,6 @@ export interface CheckboxHarnessFilters extends BaseHarnessFilters {
     label?: string | RegExp;
     /** Only find instances whose name attribute is the given value. */
     name?: string;
+    /** Only find instances with the given checked value. */
+    checked?: boolean;
 }

package/chips/chip-input.d.ts

@@ -21,11 +21,8 @@ export interface MatChipInputEvent {
     input: HTMLInputElement;
     /** The value of the input. */
     value: string;
-    /**
-     * Reference to the chip input that emitted the event.
-     * @breaking-change 13.0.0 This property will be made required.
-     */
-    chipInput?: MatChipInput;
+    /** Reference to the chip input that emitted the event. */
+    chipInput: MatChipInput;
 }
 /**
  * Directive that adds chip-specific behaviors to an input element inside `<mat-form-field>`.

package/chips/chip-list.d.ts

@@ -13,17 +13,27 @@ import { AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter,
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldControl } from '@angular/material/form-field';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { MatChip, MatChipEvent, MatChipSelectionChange } from './chip';
 import { MatChipTextControl } from './chip-text-control';
 import * as i0 from "@angular/core";
 /** @docs-private */
 declare const _MatChipListBase: import("@angular/material/core")._Constructor<CanUpdateErrorState> & import("@angular/material/core")._AbstractConstructor<CanUpdateErrorState> & {
     new (_defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl): {
+        /**
+         * Emits whenever the component state changes and should cause the parent
+         * form-field to update. Implemented as part of `MatFormFieldControl`.
+         * @docs-private
+         */
+        readonly stateChanges: Subject<void>;
         _defaultErrorStateMatcher: ErrorStateMatcher;
         _parentForm: NgForm;
         _parentFormGroup: FormGroupDirective;
-        /** @docs-private */
+        /**
+         * Form control bound to the component.
+         * Implemented as part of `MatFormFieldControl`.
+         * @docs-private
+         */
         ngControl: NgControl;
     };
 };
@@ -71,8 +81,6 @@ export declare class MatChipList extends _MatChipListBase implements MatFormFiel
     protected _chipInput: MatChipTextControl;
     /** Uid of the chip list */
     _uid: string;
-    /** The aria-describedby attribute on the chip list for improved a11y. */
-    _ariaDescribedby: string;
     /** Tab index for the chip list. */
     _tabIndex: number;
     /**
@@ -91,6 +99,13 @@ export declare class MatChipList extends _MatChipListBase implements MatFormFiel
     get selected(): MatChip[] | MatChip;
     /** The ARIA role applied to the chip list. */
     get role(): string | null;
+    set role(role: string | null);
+    private _explicitRole?;
+    /**
+     * Implemented as part of MatFormFieldControl.
+     * @docs-private
+     */
+    userAriaDescribedBy: string;
     /** An object used to control when error messages are shown. */
     errorStateMatcher: ErrorStateMatcher;
     /** Whether the user should be allowed to select multiple chips. */
@@ -269,6 +284,6 @@ export declare class MatChipList extends _MatChipListBase implements MatFormFiel
     /** Syncs the list's state with the individual chips. */
     private _syncChipsState;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipList, [null, null, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipList, "mat-chip-list", ["matChipList"], { "errorStateMatcher": "errorStateMatcher"; "multiple": "multiple"; "compareWith": "compareWith"; "value": "value"; "required": "required"; "placeholder": "placeholder"; "disabled": "disabled"; "ariaOrientation": "aria-orientation"; "selectable": "selectable"; "tabIndex": "tabIndex"; }, { "change": "change"; "valueChange": "valueChange"; }, ["chips"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipList, "mat-chip-list", ["matChipList"], { "role": "role"; "userAriaDescribedBy": "aria-describedby"; "errorStateMatcher": "errorStateMatcher"; "multiple": "multiple"; "compareWith": "compareWith"; "value": "value"; "required": "required"; "placeholder": "placeholder"; "disabled": "disabled"; "ariaOrientation": "aria-orientation"; "selectable": "selectable"; "tabIndex": "tabIndex"; }, { "change": "change"; "valueChange": "valueChange"; }, ["chips"], ["*"]>;
 }
 export {};

package/chips/chip.d.ts

@@ -116,6 +116,8 @@ export declare class MatChip extends _MatChipMixinBase implements FocusableOptio
     trailingIcon: MatChipTrailingIcon;
     /** The chip's remove toggler. */
     removeIcon: MatChipRemove;
+    /** ARIA role that should be applied to the chip. */
+    role: string;
     /** Whether the chip is selected. */
     get selected(): boolean;
     set selected(value: BooleanInput);
@@ -182,7 +184,7 @@ export declare class MatChip extends _MatChipMixinBase implements FocusableOptio
     _blur(): void;
     private _dispatchSelectionChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, { optional: true; }, null, null, { optional: true; }, { attribute: "tabindex"; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "selected": "selected"; "value": "value"; "selectable": "selectable"; "disabled": "disabled"; "removable": "removable"; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "color": "color"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "role": "role"; "selected": "selected"; "value": "value"; "selectable": "selectable"; "disabled": "disabled"; "removable": "removable"; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon"]>;
 }
 /**
  * Applies proper (click) support and adds styling for use with the Material Design "cancel" icon

package/core/_core.scss

@@ -1,6 +1,4 @@
-@use '../../cdk/overlay';
-@use '../../cdk/a11y';
-@use '../../cdk/text-field';
+@use '@angular/cdk';
 
 // Core styles that can be used to apply material design treatments to any element.
 @use './ripple/ripple';
@@ -11,10 +9,10 @@
 @mixin core($typography-config: null) {
   @include all-typography.all-component-typographies($typography-config);
   @include ripple.ripple();
-  @include a11y.a11y-visually-hidden();
-  @include overlay.overlay();
-  @include text-field.text-field-autosize();
-  @include text-field.text-field-autofill();
+  @include cdk.a11y-visually-hidden();
+  @include cdk.overlay();
+  @include cdk.text-field-autosize();
+  @include cdk.text-field-autofill();
 
   @include focus-indicators.private-strong-focus-indicators-positioning();
   @include _mdc-core();

package/core/common-behaviors/error-state.d.ts

@@ -11,8 +11,6 @@ import { ErrorStateMatcher } from '../error/error-options';
 import { AbstractConstructor, Constructor } from './constructor';
 /** @docs-private */
 export interface CanUpdateErrorState {
-    /** Emits whenever the component state changes. */
-    readonly stateChanges: Subject<void>;
     /** Updates the error state based on the provided error state matcher. */
     updateErrorState(): void;
     /** Whether the component is in an error state. */
@@ -27,6 +25,7 @@ export interface HasErrorState {
     _parentForm: NgForm;
     _defaultErrorStateMatcher: ErrorStateMatcher;
     ngControl: NgControl;
+    stateChanges: Subject<void>;
 }
 /**
  * Mixin to augment a directive with updateErrorState method.

package/core/datetime/index.d.ts

@@ -1,12 +1,11 @@
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/cdk/platform";
 export * from './date-adapter';
 export * from './date-formats';
 export * from './native-date-adapter';
 export * from './native-date-formats';
 export declare class NativeDateModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NativeDateModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NativeDateModule, never, [typeof i1.PlatformModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NativeDateModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NativeDateModule>;
 }
 export declare class MatNativeDateModule {

package/core/ripple/_ripple.scss

@@ -1,4 +1,4 @@
-@use '../../../cdk/a11y';
+@use '@angular/cdk';
 
 @mixin ripple() {
   // The host element of an mat-ripple directive should always have a position of "absolute" or
@@ -36,7 +36,7 @@
     transform: scale3d(0, 0, 0);
 
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       display: none;
     }
   }

package/core/ripple/index.d.ts

@@ -1,12 +1,11 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./ripple";
 import * as i2 from "../common-behaviors/common-module";
-import * as i3 from "@angular/cdk/platform";
 export * from './ripple';
 export * from './ripple-ref';
 export * from './ripple-renderer';
 export declare class MatRippleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRippleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatRippleModule, [typeof i1.MatRipple], [typeof i2.MatCommonModule, typeof i3.PlatformModule], [typeof i1.MatRipple, typeof i2.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatRippleModule, [typeof i1.MatRipple], [typeof i2.MatCommonModule], [typeof i1.MatRipple, typeof i2.MatCommonModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatRippleModule>;
 }

package/core/ripple/ripple-ref.d.ts

@@ -39,6 +39,7 @@ export declare class RippleRef {
     element: HTMLElement;
     /** Ripple configuration used for the ripple. */
     config: RippleConfig;
+    _animationForciblyDisabledThroughCss: boolean;
     /** Current state of the ripple. */
     state: RippleState;
     constructor(_renderer: {
@@ -47,7 +48,7 @@ export declare class RippleRef {
     /** Reference to the ripple HTML element. */
     element: HTMLElement, 
     /** Ripple configuration used for the ripple. */
-    config: RippleConfig);
+    config: RippleConfig, _animationForciblyDisabledThroughCss?: boolean);
     /** Fades out the ripple element. */
     fadeOut(): void;
 }

package/core/ripple/ripple-renderer.d.ts

@@ -43,7 +43,12 @@ export declare class RippleRenderer implements EventListenerObject {
     private _triggerElement;
     /** Whether the pointer is currently down or not. */
     private _isPointerDown;
-    /** Set of currently active ripple references. */
+    /**
+     * Map of currently active ripple references.
+     * The ripple reference is mapped to its element event listeners.
+     * The reason why `| null` is used is that event listeners are added only
+     * when the condition is truthy (see the `_startFadeOutTransition` method).
+     */
     private _activeRipples;
     /** Latest non-persistent ripple that was triggered. */
     private _mostRecentTransientRipple;
@@ -77,16 +82,24 @@ export declare class RippleRenderer implements EventListenerObject {
      * @docs-private
      */
     handleEvent(event: Event): void;
+    /** Method that will be called if the fade-in or fade-in transition completed. */
+    private _finishRippleTransition;
+    /**
+     * Starts the fade-out transition of the given ripple if it's not persistent and the pointer
+     * is not held down anymore.
+     */
+    private _startFadeOutTransition;
+    /** Destroys the given ripple by removing it from the DOM and updating its state. */
+    private _destroyRipple;
     /** Function being called whenever the trigger is being pressed using mouse. */
     private _onMousedown;
     /** Function being called whenever the trigger is being pressed using touch. */
     private _onTouchStart;
     /** Function being called whenever the trigger is being released. */
     private _onPointerUp;
-    /** Runs a timeout outside of the Angular zone to avoid triggering the change detection. */
-    private _runTimeoutOutsideZone;
     /** Registers event listeners for a given list of events. */
     private _registerEvents;
+    private _getActiveRipples;
     /** Removes previously registered event listeners from the trigger element. */
     _removeTriggerEvents(): void;
 }

package/core/style/_menu-common.scss

@@ -1,4 +1,5 @@
-@use '../../../cdk/a11y';
+@use '@angular/cdk';
+
 @use './list-common';
 @use './layout-common';
 
@@ -84,7 +85,7 @@ $icon-margin: 16px !default;
   }
 
   // Fix for Chromium-based browsers blending in the `currentColor` with the background.
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     fill: CanvasText;
   }
 }

package/core/style/_vendor-prefixes.scss

@@ -1,7 +1,6 @@
 // stylelint-disable material/no-prefixes
 @mixin user-select($value) {
   -webkit-user-select: $value;
-  -moz-user-select: $value;
   user-select: $value;
 }
 
@@ -25,27 +24,12 @@
   }
 }
 
-@mixin cursor-grab {
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-
-@mixin cursor-grabbing {
-  cursor: -webkit-grabbing;
-  cursor: grabbing;
-}
-
 @mixin backface-visibility($value) {
   -webkit-backface-visibility: $value;
   backface-visibility: $value;
 }
 
-@mixin position-sticky($important: false) {
-  position: -webkit-sticky #{if($important, '!important', '')};
-  position: sticky #{if($important, '!important', '')};
-}
-
-@mixin private-color-adjust($value) {
+@mixin color-adjust($value) {
   -webkit-print-color-adjust: $value;
   color-adjust: $value;
 }

package/core/theming/_theming.scss

@@ -437,3 +437,12 @@ $_emitted-density: () !default;
     color: $theme-or-color-config
   ));
 }
+
+
+// Approximates an rgba color into a solid hex color, given a background color.
+@function private-rgba-to-hex($color, $background-color) {
+  // We convert the rgba color into a solid one by taking the opacity from the rgba
+  // value and using it to determine the percentage of the background to put
+  // into foreground when mixing the colors together.
+  @return mix($background-color, rgba($color, 1), (1 - opacity($color)) * 100%);
+}