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

package/checkbox/index.d.ts

@@ -1,17 +1,10 @@
-import { _AbstractConstructor } from '@angular/material/core';
 import { AfterViewInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanColor } from '@angular/material/core';
-import { CanDisable } from '@angular/material/core';
-import { CanDisableRipple } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { CheckboxRequiredValidator } from '@angular/forms';
-import { _Constructor } from '@angular/material/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FocusableOption } from '@angular/cdk/a11y';
-import { HasTabIndex } from '@angular/material/core';
 import * as i0 from '@angular/core';
 import * as i3 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
@@ -46,7 +39,8 @@ export declare function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefau
 
 export declare const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
 
-export declare class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit, ControlValueAccessor, CanColor, CanDisable, HasTabIndex, CanDisableRipple, FocusableOption {
+export declare class MatCheckbox implements AfterViewInit, ControlValueAccessor, FocusableOption {
+    _elementRef: ElementRef<HTMLElement>;
     private _changeDetectorRef;
     private _ngZone;
     _animationMode?: string | undefined;
@@ -83,9 +77,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements AfterV
     /** Returns the unique id for the visual hidden input. */
     get inputId(): string;
     /** Whether the checkbox is required. */
-    get required(): boolean;
-    set required(value: BooleanInput);
-    private _required;
+    required: boolean;
     /** Whether the label should appear after or before the checkbox. Defaults to 'after' */
     labelPosition: 'before' | 'after';
     /** Name value will be applied to the input element if present */
@@ -96,10 +88,16 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements AfterV
     readonly indeterminateChange: EventEmitter<boolean>;
     /** The value attribute of the native input element */
     value: string;
+    /** Whether the checkbox has a ripple. */
+    disableRipple: boolean;
     /** The native `<input type="checkbox">` element */
     _inputElement: ElementRef<HTMLInputElement>;
     /** The native `<label>` element */
     _labelElement: ElementRef<HTMLInputElement>;
+    /** Tabindex for the checkbox. */
+    tabIndex: number;
+    /** Palette color of the checkbox. */
+    color: string | undefined;
     /**
      * Reference to the MatRipple instance of the checkbox.
      * @deprecated Considered an implementation detail. To be removed.
@@ -114,18 +112,15 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements AfterV
     private _currentAnimationClass;
     private _currentCheckState;
     private _controlValueAccessorChangeFn;
-    constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, tabIndex: string, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
+    constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, tabIndex: string, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
     ngAfterViewInit(): void;
     /** Whether the checkbox is checked. */
     get checked(): boolean;
-    set checked(value: BooleanInput);
+    set checked(value: boolean);
     private _checked;
-    /**
-     * Whether the checkbox is disabled. This fully overrides the implementation provided by
-     * mixinDisabled, but the mixin is still required because mixinTabIndex requires it.
-     */
+    /** Whether the checkbox is disabled. */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     private _disabled;
     /**
      * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
@@ -134,7 +129,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements AfterV
      * set to false.
      */
     get indeterminate(): boolean;
-    set indeterminate(value: BooleanInput);
+    set indeterminate(value: boolean);
     private _indeterminate;
     _isRippleDisabled(): boolean;
     /** Method being called whenever the label text changes. */
@@ -171,7 +166,13 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements AfterV
      */
     _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"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "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; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"], false, 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; }; "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; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"], false, never>;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+    static ngAcceptInputType_checked: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_indeterminate: unknown;
 }
 
 /** Change event object emitted by checkbox. */
@@ -199,13 +200,6 @@ export declare interface MatCheckboxDefaultOptions {
     clickAction?: MatCheckboxClickAction;
 }
 
-/** @docs-private */
-declare const _MatCheckboxMixinBase: _Constructor<HasTabIndex> & _AbstractConstructor<HasTabIndex> & _Constructor<CanColor> & _AbstractConstructor<CanColor> & _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & {
-    new (_elementRef: ElementRef): {
-        _elementRef: ElementRef;
-    };
-};
-
 export declare class MatCheckboxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, [typeof i2.MatCheckbox], [typeof i3.MatCommonModule, typeof i3.MatRippleModule, typeof _MatCheckboxRequiredValidatorModule], [typeof i2.MatCheckbox, typeof i3.MatCommonModule, typeof _MatCheckboxRequiredValidatorModule]>;

package/chips/_chips-theme.scss

@@ -1,99 +1,61 @@
 @use 'sass:color';
-@use 'sass:map';
-@use 'sass:meta';
 @use '@material/chips/chip-theme' as mdc-chip-theme;
 @use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
-@use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
-@use '../core/mdc-helpers/mdc-helpers';
-
-@function _get-default-palette($config) {
-  $is-dark: map.get($config, is-dark);
-  $grey-50: map.get(palette.$grey-palette, 50);
-  $grey-900: map.get(palette.$grey-palette, 900);
-  $default-foreground: if($is-dark, $grey-50, $grey-900);
-
-  $surface: map.get(map.get($config, background), card);
-  $on-surface: if(
-    mdc-helpers.variable-safe-contrast-tone($surface, $is-dark) == 'dark',
-    #000,
-    #fff
-  );
-  $default-background: if(
-    meta.type-of($on-surface) == color and meta.type-of($surface) == color,
-    color.mix($on-surface, $surface, 12%),
-    $on-surface
-  );
-
-  @return (default: $default-background, default-contrast: $default-foreground);
-}
-
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
 
+@mixin color($theme) {
   .mat-mdc-standard-chip {
-    $default-palette: _get-default-palette($config);
-    $default-config: map.merge($config, (primary: $default-palette));
-    $default-color-tokens: tokens-mdc-chip.get-color-tokens($default-config);
+    $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme);
     @include mdc-chip-theme.theme($default-color-tokens);
 
     &.mat-mdc-chip-selected,
     &.mat-mdc-chip-highlighted {
       &.mat-primary {
-        $primary-color-tokens: tokens-mdc-chip.get-color-tokens($config);
+        $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
         @include mdc-chip-theme.theme($primary-color-tokens);
       }
 
       &.mat-accent {
-        $accent-config: map.merge($config, (primary: map.get($config, accent)));
-        $accent-color-tokens: tokens-mdc-chip.get-color-tokens($accent-config);
+        $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
         @include mdc-chip-theme.theme($accent-color-tokens);
       }
 
       &.mat-warn {
-        $warn-config: map.merge($config, (primary: map.get($config, warn)));
-        $warn-color-tokens: tokens-mdc-chip.get-color-tokens($warn-config);
+        $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
         @include mdc-chip-theme.theme($warn-color-tokens);
       }
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-    theming.get-typography-config($config-or-theme)
-  );
-  $typography-tokens: tokens-mdc-chip.get-typography-tokens($config);
+@mixin typography($theme) {
+  $typography-tokens: tokens-mdc-chip.get-typography-tokens($theme);
 
   .mat-mdc-standard-chip {
     @include mdc-chip-theme.theme($typography-tokens);
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-  $density-tokens: tokens-mdc-chip.get-density-tokens($density-scale);
+@mixin density($theme) {
+  $density-tokens: tokens-mdc-chip.get-density-tokens($theme);
+
   .mat-mdc-chip.mat-mdc-standard-chip {
     @include mdc-chip-theme.theme($density-tokens);
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/core/color/_all-color.scss

@@ -1,25 +1,17 @@
 @use '../theming/all-theme';
-@use '../theming/theming';
+@use '../theming/inspection';
 
 // Includes all of the color styles.
-@mixin all-component-colors($config-or-theme) {
-  // In case a theme object has been passed instead of a configuration for
-  // the color system, extract the color config from the theme object.
-  $config: if(theming.private-is-theme-object($config-or-theme),
-      theming.get-color-config($config-or-theme), $config-or-theme);
-
-  @if $config == null {
+@mixin all-component-colors($theme) {
+  @if not inspection.theme-has($theme, color) {
     @error 'No color configuration specified.';
   }
 
-  @include all-theme.all-component-themes((
-    color: $config,
-    typography: null,
-    density: null,
-  ));
+  @include all-theme.all-component-themes(
+      inspection.theme-remove($theme, base, typography, density));
 }
 
 // @deprecated Use `all-component-colors`.
-@mixin angular-material-color($config-or-theme) {
-  @include all-component-colors($config-or-theme);
+@mixin angular-material-color($theme) {
+  @include all-component-colors($theme);
 }

package/core/density/private/_all-density.scss

@@ -1,4 +1,4 @@
-@use '../../theming/theming';
+@use '../../theming/inspection';
 @use '../../../button/button-theme';
 @use '../../../button/icon-button-theme';
 @use '../../../button/fab-theme';
@@ -30,13 +30,8 @@
 @use '../../../table/table-theme';
 
 // Includes all of the density styles.
-@mixin all-component-densities($config-or-theme) {
-  // In case a theme object has been passed instead of a configuration for
-  // the density system, extract the density config from the theme object.
-  $config: if(theming.private-is-theme-object($config-or-theme),
-      theming.get-density-config($config-or-theme), $config-or-theme);
-
-  @if $config == null {
+@mixin all-component-densities($theme) {
+  @if not inspection.theme-has($theme, density) {
     @error 'No density configuration specified.';
   }
 
@@ -45,39 +40,39 @@
   // not possible as it would introduce a circular dependency for density because the `mat-core`
   // mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
   // would then load `all-theme` again. This ultimately results a circular dependency.
-  @include form-field-theme.density($config);
-  @include card-theme.density($config);
-  @include progress-bar-theme.density($config);
-  @include progress-spinner-theme.density($config);
-  @include tooltip-theme.density($config);
-  @include input-theme.density($config);
-  @include core-theme.density($config);
-  @include select-theme.density($config);
-  @include checkbox-theme.density($config);
-  @include autocomplete-theme.density($config);
-  @include dialog-theme.density($config);
-  @include chips-theme.density($config);
-  @include slide-toggle-theme.density($config);
-  @include radio-theme.density($config);
-  @include slider-theme.density($config);
-  @include menu-theme.density($config);
-  @include list-theme.density($config);
-  @include paginator-theme.density($config);
-  @include tabs-theme.density($config);
-  @include snack-bar-theme.density($config);
-  @include button-theme.density($config);
-  @include icon-button-theme.density($config);
-  @include fab-theme.density($config);
-  @include table-theme.density($config);
-  @include expansion-theme.density($config);
-  @include stepper-theme.density($config);
-  @include toolbar-theme.density($config);
-  @include tree-theme.density($config);
-  @include button-toggle-theme.density($config);
+  @include form-field-theme.density($theme);
+  @include card-theme.density($theme);
+  @include progress-bar-theme.density($theme);
+  @include progress-spinner-theme.density($theme);
+  @include tooltip-theme.density($theme);
+  @include input-theme.density($theme);
+  @include core-theme.density($theme);
+  @include select-theme.density($theme);
+  @include checkbox-theme.density($theme);
+  @include autocomplete-theme.density($theme);
+  @include dialog-theme.density($theme);
+  @include chips-theme.density($theme);
+  @include slide-toggle-theme.density($theme);
+  @include radio-theme.density($theme);
+  @include slider-theme.density($theme);
+  @include menu-theme.density($theme);
+  @include list-theme.density($theme);
+  @include paginator-theme.density($theme);
+  @include tabs-theme.density($theme);
+  @include snack-bar-theme.density($theme);
+  @include button-theme.density($theme);
+  @include icon-button-theme.density($theme);
+  @include fab-theme.density($theme);
+  @include table-theme.density($theme);
+  @include expansion-theme.density($theme);
+  @include stepper-theme.density($theme);
+  @include toolbar-theme.density($theme);
+  @include tree-theme.density($theme);
+  @include button-toggle-theme.density($theme);
 }
 
 
 // @deprecated Use `all-component-densities`.
-@mixin angular-material-density($config-or-theme) {
-  @include all-component-densities($config-or-theme);
+@mixin angular-material-density($theme) {
+  @include all-component-densities($theme);
 }

package/core/focus-indicators/_focus-indicators-theme.scss

@@ -1,13 +1,11 @@
 @use './private';
 
-// stylelint-disable-next-line material/theme-mixin-api
-@mixin color($config-or-theme-or-color) {
-  @include private.strong-focus-indicators-color($config-or-theme-or-color);
-  @include private.mdc-strong-focus-indicators-color($config-or-theme-or-color);
+@mixin color($theme) {
+  @include private.strong-focus-indicators-color($theme);
+  @include private.mdc-strong-focus-indicators-color($theme);
 }
 
-// stylelint-disable-next-line material/theme-mixin-api
-@mixin theme($theme-or-color-config-or-color) {
-  @include private.strong-focus-indicators-theme($theme-or-color-config-or-color);
-  @include private.mdc-strong-focus-indicators-theme($theme-or-color-config-or-color);
+@mixin theme($theme) {
+  @include private.strong-focus-indicators-theme($theme);
+  @include private.mdc-strong-focus-indicators-theme($theme);
 }

package/core/focus-indicators/_private.scss

@@ -3,6 +3,7 @@
 @use '@angular/cdk';
 @use '../style/layout-common';
 @use '../theming/theming';
+@use '../theming/inspection';
 
 // Private sass variables that will be used as reference throughout component stylesheets.
 $default-border-width: 3px;
@@ -113,65 +114,60 @@ $default-border-radius: 4px;
   @include customize-focus-indicators($config, 'mat-mdc');
 }
 
-@mixin strong-focus-indicators-color($config-or-theme-or-color) {
-  @if meta.type-of($config-or-theme-or-color) == 'color' {
+@mixin strong-focus-indicators-color($theme-or-color) {
+  @if meta.type-of($theme-or-color) == 'color' {
     @include customize-focus-indicators((
-        border-color: $config-or-theme-or-color
+        border-color: $theme-or-color
     ), 'mat');
   }
   @else {
-    $config: theming.get-color-config($config-or-theme-or-color);
-    $border-color: theming.get-color-from-palette(map.get($config, primary));
+    $border-color: inspection.get-theme-color($theme-or-color, primary);
     @include customize-focus-indicators((
         border-color: $border-color
     ), 'mat');
   }
 }
 
-@mixin strong-focus-indicators-theme($theme-or-color-config-or-color) {
-  @if meta.type-of($theme-or-color-config-or-color) == '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-config-or-color
+        border-color: $theme-or-color
     ), 'mat');
   }
   @else {
-    $theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
-    @include theming.private-check-duplicate-theme-styles($theme, 'mat-focus-indicators') {
-      $color: theming.get-color-config($theme);
-      @if $color != null {
-        @include strong-focus-indicators-color($color);
+    @include theming.private-check-duplicate-theme-styles($theme-or-color, 'mat-focus-indicators') {
+      @if inspection.theme-has($theme-or-color, color) {
+        @include strong-focus-indicators-color($theme-or-color);
       }
     }
   }
 }
 
-@mixin mdc-strong-focus-indicators-color($config-or-theme-or-color) {
-  @if meta.type-of($config-or-theme-or-color) == 'color' {
+@mixin mdc-strong-focus-indicators-color($theme-or-color) {
+  @if meta.type-of($theme-or-color) == 'color' {
     @include customize-focus-indicators((
-        border-color: $config-or-theme-or-color
+        border-color: $theme-or-color
     ), 'mat-mdc');
   }
   @else {
-    $config: theming.get-color-config($config-or-theme-or-color);
-    $border-color: theming.get-color-from-palette(map.get($config, primary));
+    $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-config-or-color) {
-  @if meta.type-of($theme-or-color-config-or-color) == 'color' {
+@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-config-or-color
+        border-color: $theme-or-color
     ), 'mat-mdc');
   }
   @else {
-    $theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
-    @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-focus-indicators') {
-      $color: theming.get-color-config($theme);
-      @if $color != null {
-        @include mdc-strong-focus-indicators-color($color);
+    @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

@@ -1,9 +1,6 @@
-import { _AbstractConstructor as _AbstractConstructor_2 } from '@angular/material/core';
 import { AbstractControl } from '@angular/forms';
 import { AfterViewChecked } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { ChangeDetectorRef } from '@angular/core';
-import { _Constructor as _Constructor_2 } from '@angular/material/core';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FocusableOption } from '@angular/cdk/a11y';
@@ -529,23 +526,21 @@ export declare class MatNativeDateModule {
 /**
  * Component that is used to group instances of `mat-option`.
  */
-export declare class MatOptgroup extends _MatOptgroupMixinBase implements CanDisable {
+export declare class MatOptgroup {
     /** Label for the option group. */
     label: string;
+    /** whether the option group is disabled. */
+    disabled: boolean;
     /** Unique id for the underlying label. */
     _labelId: string;
     /** Whether the group is in inert a11y mode. */
     _inert: boolean;
     constructor(parent?: MatOptionParentComponent);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatOptgroup, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOptgroup, "mat-optgroup", ["matOptgroup"], { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["*", "mat-option, ng-container"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatOptgroup, "mat-optgroup", ["matOptgroup"], { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*", "mat-option, ng-container"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }
 
-/** @docs-private */
-declare const _MatOptgroupMixinBase: _Constructor_2<CanDisable> & _AbstractConstructor_2<CanDisable> & {
-    new (): {};
-};
-
 /**
  * Single option inside of a `<mat-select>` element.
  */
@@ -568,7 +563,7 @@ export declare class MatOption<T = any> implements FocusableOption, AfterViewChe
     id: string;
     /** Whether the option is disabled. */
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     /** Whether ripples for the option are disabled. */
     get disableRipple(): boolean;
     /** Whether to display checkmark for single-selection. */
@@ -629,6 +624,7 @@ export declare class MatOption<T = any> implements FocusableOption, AfterViewChe
     private _emitSelectionChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatOption<any>, [null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatOption<any>, "mat-option", ["matOption"], { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, never, ["mat-icon", "*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }
 
 export declare class MatOptionModule {

package/core/style/_form-common.scss

@@ -1,5 +1,5 @@
-@use 'sass:map';
-@use '../theming/theming';
+@use '../theming/inspection';
+@use './sass-utils';
 
 // Renders a gradient for showing the dashed line when the input is disabled.
 // Unlike using a border, a gradient allows us to adjust the spacing of the dotted line
@@ -13,9 +13,9 @@
 // Figures out the color of the placeholder for a form control.
 // Used primarily to prevent the various form controls from
 // becoming out of sync since these colors aren't in a palette.
-@function private-control-placeholder-color($config) {
-  $foreground: map.get($config, foreground);
-  $is-dark-theme: map.get($config, is-dark);
-  @return theming.get-color-from-palette($foreground, secondary-text,
-    if($is-dark-theme, 0.5, 0.42));
+@function private-control-placeholder-color($theme) {
+  $is-dark-theme: inspection.get-theme-type($theme) == dark;
+  @return sass-utils.safe-color-change(
+      inspection.get-theme-color($theme, foreground, secondary-text),
+      $alpha: if($is-dark-theme, 0.5, 0.42));
 }

package/core/style/_private.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use './elevation';
 @use '../theming/inspection';
 
@@ -9,9 +8,8 @@
   @include elevation.elevation($zValue, $elevation-color-or-default);
 }
 
-@mixin private-theme-overridable-elevation($zValue, $config) {
-  $foreground: map.get($config, foreground);
-  $elevation-color: map.get($foreground, elevation);
+@mixin private-theme-overridable-elevation($zValue, $theme) {
+  $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
   $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
   @include elevation.overridable-elevation($zValue, $elevation-color-or-default);

package/core/testing/index.d.ts

@@ -1,6 +1,7 @@
 import { BaseHarnessFilters } from '@angular/cdk/testing';
 import { ComponentHarness } from '@angular/cdk/testing';
 import { ComponentHarnessConstructor } from '@angular/cdk/testing';
+import { ContentContainerComponentHarness } from '@angular/cdk/testing';
 import { HarnessPredicate } from '@angular/cdk/testing';
 
 /** Harness for interacting with an MDC-based `mat-optgroup` in tests. */
@@ -27,7 +28,7 @@ export declare class MatOptgroupHarness extends ComponentHarness {
 }
 
 /** Harness for interacting with an MDC-based `mat-option` in tests. */
-export declare class MatOptionHarness extends ComponentHarness {
+export declare class MatOptionHarness extends ContentContainerComponentHarness {
     /** Selector used to locate option instances. */
     static hostSelector: string;
     /** Element containing the option's text. */