@angular/material 16.2.2 → 17.0.0-next.1

package/checkbox/_checkbox-theme.scss

@@ -3,93 +3,111 @@
 @use '@material/form-field' as mdc-form-field;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $warn: map.get($config, warn);
-  $foreground: map.get($config, foreground);
-
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($config));
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
-
-  .mat-mdc-checkbox {
-    &.mat-primary {
-      $primary-config: map.merge($config, (accent: $primary));
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($primary-config));
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-unthemable-tokens());
     }
+  }
+}
 
-    &.mat-warn {
-      $warn-config: map.merge($config, (accent: $warn));
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($warn-config));
+@mixin color($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
     }
 
-    @include mdc-helpers.using-mdc-theme($config) {
-      // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
-      @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
-    }
+    .mat-mdc-checkbox {
+      &.mat-primary {
+        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
+      }
+
+      &.mat-warn {
+        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
+      }
 
-    &.mat-mdc-checkbox-disabled label {
-      // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-      color: theming.get-color-from-palette($foreground, disabled-text);
+      @include mdc-helpers.using-mdc-theme($theme) {
+        // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
+        @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
+      }
+
+      &.mat-mdc-checkbox-disabled label {
+        // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
+        color: inspection.get-theme-color($theme, foreground, disabled-text);
+      }
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-          theming.get-typography-config($config-or-theme));
-
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($config));
+@mixin typography($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
+    }
 
-  .mat-mdc-checkbox {
-    @include mdc-helpers.using-mdc-typography($config) {
-      // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
-      @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
+    .mat-mdc-checkbox {
+      @include mdc-helpers.using-mdc-typography($theme) {
+        // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
+        @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
+      }
     }
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
+  $density-scale: inspection.get-theme-density($theme);
 
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
+    }
 
-  @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
-    .mat-mdc-checkbox-touch-target {
-      display: none;
+    @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
+      .mat-mdc-checkbox-touch-target {
+        display: none;
+      }
     }
   }
 }
 
-@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-checkbox') {
-    $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 $density != null {
-      @include density($density);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if $typography != null {
-      @include typography($typography);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
 
-@mixin theme-from-tokens($tokens) {
+@mixin _theme-from-tokens($tokens) {
   @if ($tokens != ()) {
     // TODO(mmalerba): Some of the theme styles above are not represented in terms of tokens,
     //   so this mixin is currently incomplete.

package/checkbox/index.d.ts

@@ -11,7 +11,6 @@ import { ControlValueAccessor } from '@angular/forms';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FocusableOption } from '@angular/cdk/a11y';
-import { FocusOrigin } from '@angular/cdk/a11y';
 import { HasTabIndex } from '@angular/material/core';
 import * as i0 from '@angular/core';
 import * as i3 from '@angular/material/core';
@@ -33,7 +32,6 @@ declare namespace i2 {
         TransitionCheckState,
         MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR,
         MatCheckboxChange,
-        _MatCheckboxBase,
         MatCheckbox
     }
 }
@@ -48,47 +46,19 @@ export declare function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefau
 
 export declare const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
 
-export declare class MatCheckbox extends _MatCheckboxBase<MatCheckboxChange> implements ControlValueAccessor, CanColor, CanDisable {
-    protected _animationClasses: {
-        uncheckedToChecked: string;
-        uncheckedToIndeterminate: string;
-        checkedToUnchecked: string;
-        checkedToIndeterminate: string;
-        indeterminateToChecked: string;
-        indeterminateToUnchecked: string;
-    };
-    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, tabIndex: string, animationMode?: string, options?: MatCheckboxDefaultOptions);
-    /** Focuses the checkbox. */
-    focus(): void;
-    protected _createChangeEvent(isChecked: boolean): MatCheckboxChange;
-    protected _getAnimationTargetElement(): HTMLInputElement;
-    _onInputClick(): void;
-    _onTouchTargetClick(): void;
-    /**
-     *  Prevent click events that come from the `<label/>` element from bubbling. This prevents the
-     *  click handler on the host from triggering twice when clicking on the `<label/>` element. After
-     *  the click event on the `<label/>` propagates, the browsers dispatches click on the associated
-     *  `<input/>`. By preventing clicks on the label by bubbling, we ensure only one click event
-     *  bubbles when the label is clicked.
-     */
-    _preventBubblingFromLabel(event: MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckbox, [null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["*"], false, never>;
-}
-
-export declare abstract class _MatCheckboxBase<E> extends _MatCheckboxMixinBase implements AfterViewInit, ControlValueAccessor, CanColor, CanDisable, HasTabIndex, CanDisableRipple, FocusableOption {
-    protected _changeDetectorRef: ChangeDetectorRef;
-    protected _ngZone: NgZone;
+export declare class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit, ControlValueAccessor, CanColor, CanDisable, HasTabIndex, CanDisableRipple, FocusableOption {
+    private _changeDetectorRef;
+    private _ngZone;
     _animationMode?: string | undefined;
-    protected _options?: MatCheckboxDefaultOptions | undefined;
+    private _options?;
     /** Focuses the checkbox. */
-    abstract focus(origin?: FocusOrigin): void;
+    focus(): void;
     /** Creates the change event that will be emitted by the checkbox. */
-    protected abstract _createChangeEvent(isChecked: boolean): E;
+    protected _createChangeEvent(isChecked: boolean): MatCheckboxChange;
     /** Gets the element on which to add the animation CSS classes. */
-    protected abstract _getAnimationTargetElement(): HTMLElement | null;
+    protected _getAnimationTargetElement(): HTMLInputElement;
     /** CSS classes to add when transitioning between the different checkbox states. */
-    protected abstract _animationClasses: {
+    protected _animationClasses: {
         uncheckedToChecked: string;
         uncheckedToIndeterminate: string;
         checkedToUnchecked: string;
@@ -121,7 +91,7 @@ export declare abstract class _MatCheckboxBase<E> extends _MatCheckboxMixinBase
     /** Name value will be applied to the input element if present */
     name: string | null;
     /** Event emitted when the checkbox's `checked` value changes. */
-    readonly change: EventEmitter<E>;
+    readonly change: EventEmitter<MatCheckboxChange>;
     /** Event emitted when the checkbox's `indeterminate` value changes. */
     readonly indeterminateChange: EventEmitter<boolean>;
     /** The value attribute of the native input element */
@@ -144,7 +114,7 @@ export declare abstract class _MatCheckboxBase<E> extends _MatCheckboxMixinBase
     private _currentAnimationClass;
     private _currentCheckState;
     private _controlValueAccessorChangeFn;
-    constructor(idPrefix: string, 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;
@@ -190,8 +160,18 @@ export declare abstract class _MatCheckboxBase<E> extends _MatCheckboxMixinBase
      * server-side rendering.
      */
     private _syncIndeterminate;
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatCheckboxBase<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatCheckboxBase<any>, never, never, { "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, never, false, never>;
+    _onInputClick(): void;
+    _onTouchTargetClick(): void;
+    /**
+     *  Prevent click events that come from the `<label/>` element from bubbling. This prevents the
+     *  click handler on the host from triggering twice when clicking on the `<label/>` element. After
+     *  the click event on the `<label/>` propagates, the browsers dispatches click on the associated
+     *  `<input/>`. By preventing clicks on the label by bubbling, we ensure only one click event
+     *  bubbles when the label is clicked.
+     */
+    _preventBubblingFromLabel(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckbox, [null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "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>;
 }
 
 /** Change event object emitted by checkbox. */

package/checkbox/testing/index.d.ts

@@ -17,9 +17,12 @@ export declare interface CheckboxHarnessFilters extends BaseHarnessFilters {
     disabled?: boolean;
 }
 
-/** Harness for interacting with a MDC-based mat-checkbox in tests. */
-export declare class MatCheckboxHarness extends _MatCheckboxHarnessBase {
+/** Harness for interacting with a mat-checkbox in tests. */
+export declare class MatCheckboxHarness extends ComponentHarness {
     static hostSelector: string;
+    _input: AsyncFactoryFn<TestElement>;
+    private _label;
+    private _inputContainer;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a checkbox with specific attributes.
      * @param options Options for narrowing the search:
@@ -29,15 +32,6 @@ export declare class MatCheckboxHarness extends _MatCheckboxHarnessBase {
      * @return a `HarnessPredicate` configured with the given options.
      */
     static with<T extends MatCheckboxHarness>(this: ComponentHarnessConstructor<T>, options?: CheckboxHarnessFilters): HarnessPredicate<T>;
-    protected _input: AsyncFactoryFn<TestElement>;
-    protected _label: AsyncFactoryFn<TestElement>;
-    private _inputContainer;
-    toggle(): Promise<void>;
-}
-
-export declare abstract class _MatCheckboxHarnessBase extends ComponentHarness {
-    protected abstract _input: AsyncFactoryFn<TestElement>;
-    protected abstract _label: AsyncFactoryFn<TestElement>;
     /** Whether the checkbox is checked. */
     isChecked(): Promise<boolean>;
     /** Whether the checkbox is in an indeterminate state. */
@@ -71,7 +65,7 @@ export declare abstract class _MatCheckboxHarnessBase extends ComponentHarness {
      * are using `MAT_CHECKBOX_DEFAULT_OPTIONS` to change the behavior on click, calling this method
      * might not have the expected result.
      */
-    abstract toggle(): Promise<void>;
+    toggle(): Promise<void>;
     /**
      * Puts the checkbox in a checked state by toggling it if it is currently unchecked, or doing
      * nothing if it is already checked.

package/core/_core-theme.scss

@@ -1,5 +1,5 @@
-@use 'sass:map';
-@use 'theming/theming';
+@use './theming/theming';
+@use './theming/inspection';
 @use './style/private';
 @use './ripple/ripple-theme';
 @use './option/option-theme';
@@ -8,23 +8,18 @@
 @use './style/elevation';
 @use './typography/typography';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @include ripple-theme.color($config);
-  @include option-theme.color($config);
-  @include optgroup-theme.color($config);
-  @include pseudo-checkbox-theme.color($config);
+@mixin color($theme) {
+  @include ripple-theme.color($theme);
+  @include option-theme.color($theme);
+  @include optgroup-theme.color($theme);
+  @include pseudo-checkbox-theme.color($theme);
 
   // Wrapper element that provides the theme background when the user's content isn't
   // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
   // selector in case the mixin is included at the top level.
   .mat-app-background#{if(&, ', &.mat-app-background', '')} {
-    $background: map.get($config, background);
-    $foreground: map.get($config, foreground);
-
-    background-color: theming.get-color-from-palette($background, background);
-    color: theming.get-color-from-palette($foreground, text);
+    background-color: inspection.get-theme-color($theme, background, background);
+    color: inspection.get-theme-color($theme, foreground, text);
   }
 
   // Provides external CSS classes for each elevation value. Each CSS class is formatted as
@@ -35,7 +30,7 @@
     // We need the `mat-mdc-elevation-specific`, because some MDC mixins
     // come with elevation baked in and we don't have a way of removing it.
     .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
-      @include private.private-theme-elevation($zValue, $config);
+      @include private.private-theme-elevation($zValue, $theme);
     }
   }
 
@@ -47,46 +42,36 @@
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-          theming.get-typography-config($config-or-theme));
-
-  @include option-theme.typography($config);
-  @include optgroup-theme.typography($config);
-  @include pseudo-checkbox-theme.typography($config);
+@mixin typography($theme) {
+  @include option-theme.typography($theme);
+  @include optgroup-theme.typography($theme);
+  @include pseudo-checkbox-theme.typography($theme);
   // TODO(mmalerba): add typography mixin for this.
   // @include ripple-theme.typography($config);
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-
-  @include option-theme.density($density-scale);
-  @include optgroup-theme.density($density-scale);
+@mixin density($theme) {
+  @include option-theme.density($theme);
+  @include optgroup-theme.density($theme);
   // TODO(mmalerba): add density mixins for these.
   // @include ripple-theme.density($density-scale);
   // @include pseudo-checkbox-theme.density($density-scale);
 }
 
 // Mixin that renders all of the core styles that depend on the theme.
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
   // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
   // the imported themes (such as `mat-ripple-theme`) should not report again.
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
-    $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/index.d.ts

@@ -393,7 +393,6 @@ declare namespace i1_3 {
         _countGroupLabelsBeforeOption,
         _getOptionScrollPosition,
         MatOptionSelectionChange,
-        _MatOptionBase,
         MatOption
     }
 }
@@ -415,7 +414,6 @@ declare namespace i1_5 {
 
 declare namespace i2 {
     export {
-        _MatOptgroupBase,
         MAT_OPTGROUP,
         MatOptgroup
     }
@@ -531,12 +529,7 @@ export declare class MatNativeDateModule {
 /**
  * Component that is used to group instances of `mat-option`.
  */
-export declare class MatOptgroup extends _MatOptgroupBase {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatOptgroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOptgroup, "mat-optgroup", ["matOptgroup"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*", "mat-option, ng-container"], false, never>;
-}
-
-export declare class _MatOptgroupBase extends _MatOptgroupMixinBase implements CanDisable {
+export declare class MatOptgroup extends _MatOptgroupMixinBase implements CanDisable {
     /** Label for the option group. */
     label: string;
     /** Unique id for the underlying label. */
@@ -544,8 +537,8 @@ export declare class _MatOptgroupBase extends _MatOptgroupMixinBase implements C
     /** Whether the group is in inert a11y mode. */
     _inert: boolean;
     constructor(parent?: MatOptionParentComponent);
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatOptgroupBase, [{ optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatOptgroupBase, never, never, { "label": { "alias": "label"; "required": false; }; }, {}, never, never, false, never>;
+    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>;
 }
 
 /** @docs-private */
@@ -556,17 +549,11 @@ declare const _MatOptgroupMixinBase: _Constructor_2<CanDisable> & _AbstractConst
 /**
  * Single option inside of a `<mat-select>` element.
  */
-export declare class MatOption<T = any> extends _MatOptionBase<T> {
-    constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: MatOptionParentComponent, group: MatOptgroup);
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatOption<any>, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatOption<any>, "mat-option", ["matOption"], {}, {}, never, ["mat-icon", "*"], false, never>;
-}
-
-export declare class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecked, OnDestroy {
+export declare class MatOption<T = any> implements FocusableOption, AfterViewChecked, OnDestroy {
     private _element;
     _changeDetectorRef: ChangeDetectorRef;
     private _parent;
-    readonly group: _MatOptgroupBase;
+    group: MatOptgroup;
     private _selected;
     private _active;
     private _disabled;
@@ -592,7 +579,7 @@ export declare class _MatOptionBase<T = any> implements FocusableOption, AfterVi
     _text: ElementRef<HTMLElement> | undefined;
     /** Emits when the state of the option changes and any parents have to be notified. */
     readonly _stateChanges: Subject<void>;
-    constructor(_element: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _parent: MatOptionParentComponent, group: _MatOptgroupBase);
+    constructor(_element: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _parent: MatOptionParentComponent, group: MatOptgroup);
     /**
      * Whether or not the option is currently active and ready to be selected.
      * An active option displays styles as if it is focused, but the
@@ -640,8 +627,8 @@ export declare class _MatOptionBase<T = any> implements FocusableOption, AfterVi
     ngOnDestroy(): void;
     /** Emits the selection change event. */
     private _emitSelectionChangeEvent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatOptionBase<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatOptionBase<any>, never, never, { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, never, never, false, never>;
+    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>;
 }
 
 export declare class MatOptionModule {
@@ -665,12 +652,12 @@ export declare interface MatOptionParentComponent {
 /** Event object emitted by MatOption when selected or deselected. */
 export declare class MatOptionSelectionChange<T = any> {
     /** Reference to the option that emitted the event. */
-    source: _MatOptionBase<T>;
+    source: MatOption<T>;
     /** Whether the change in the option's value was a result of a user action. */
     isUserInput: boolean;
     constructor(
     /** Reference to the option that emitted the event. */
-    source: _MatOptionBase<T>, 
+    source: MatOption<T>, 
     /** Whether the change in the option's value was a result of a user action. */
     isUserInput?: boolean);
 }
@@ -869,12 +856,14 @@ export declare class NativeDateAdapter extends DateAdapter<Date> {
      * @breaking-change 14.0.0
      */
     useUtcForDisplay: boolean;
-    constructor(matDateLocale: string, 
+    /** The injected locale. */
+    private readonly _matDateLocale;
+    constructor(
     /**
-     * @deprecated No longer being used. To be removed.
-     * @breaking-change 14.0.0
+     * @deprecated Now injected via inject(), param to be removed.
+     * @breaking-change 18.0.0
      */
-    _platform?: Platform);
+    matDateLocale?: string);
     getYear(date: Date): number;
     getMonth(date: Date): number;
     getDate(date: Date): number;
@@ -923,7 +912,7 @@ export declare class NativeDateAdapter extends DateAdapter<Date> {
      * @returns A Date object with its UTC representation based on the passed in date info
      */
     private _format;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NativeDateAdapter, [{ optional: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NativeDateAdapter, [{ optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NativeDateAdapter>;
 }
 

package/core/mdc-helpers/_mdc-helpers.scss

@@ -1,9 +1,7 @@
 // TODO(mmalerba): this file should be split into separate cohesive partials for things like
 //  "theming", "typography", "core".
-
-@use '../theming/theming';
+@use '../theming/inspection';
 @use '../typography/typography';
-@use '../typography/typography-utils';
 @use '@material/feature-targeting' as mdc-feature-targeting;
 @use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
@@ -36,7 +34,7 @@ $mat-typography-mdc-level-mappings: (
 );
 
 // Converts an Angular Material typography level config to an MDC one.
-@function typography-level-config-to-mdc($mat-config, $mat-level) {
+@function typography-level-config-to-mdc($theme, $mat-level) {
   $mdc-level: map.get($mat-typography-mdc-level-mappings, $mat-level);
 
   $result-with-nulls: map.merge(
@@ -49,11 +47,11 @@ $mat-typography-mdc-level-mappings: (
           )),
       if($mat-level,
           (
-            font-size: typography-utils.font-size($mat-config, $mat-level),
-            line-height: typography-utils.line-height($mat-config, $mat-level),
-            font-weight: typography-utils.font-weight($mat-config, $mat-level),
-            letter-spacing: typography-utils.letter-spacing($mat-config, $mat-level),
-            font-family: typography-utils.font-family($mat-config, $mat-level),
+            font-size: inspection.get-theme-typography($theme, $mat-level, font-size),
+            line-height: inspection.get-theme-typography($theme, $mat-level, line-height),
+            font-weight: inspection.get-theme-typography($theme, $mat-level, font-weight),
+            letter-spacing: inspection.get-theme-typography($theme, $mat-level, letter-spacing),
+            font-family: inspection.get-theme-typography($theme, $mat-level, font-family),
             // Angular Material doesn't use text-transform, so disable it.
             text-transform: none,
           ),
@@ -71,13 +69,13 @@ $mat-typography-mdc-level-mappings: (
 }
 
 // Converts an Angular Material typography config to an MDC one.
-@function typography-config-to-mdc($mat-config) {
+@function typography-config-to-mdc($theme) {
   $mdc-config: ();
 
   @each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings {
     $mdc-config: map.merge(
         $mdc-config,
-        ($mdc-level: typography-level-config-to-mdc($mat-config, $mat-level)));
+        ($mdc-level: typography-level-config-to-mdc($theme, $mat-level)));
   }
 
   @return $mdc-config;
@@ -100,12 +98,11 @@ $mat-typography-mdc-level-mappings: (
 
 // Configures MDC's global variables to reflect the given theme, applies the given styles,
 // then resets the global variables to prevent unintended side effects.
-@mixin using-mdc-theme($config) {
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
-  $background-palette: map.get($config, background);
-  $is-dark: map.get($config, is-dark);
+@mixin using-mdc-theme($theme) {
+  $primary: inspection.get-theme-color($theme, primary);
+  $accent: inspection.get-theme-color($theme, accent);
+  $warn: inspection.get-theme-color($theme, warn);
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
   // Save the original values.
   $orig-primary: mdc-theme-color.$primary;
@@ -126,8 +123,8 @@ $mat-typography-mdc-level-mappings: (
   mdc-theme-color.$secondary: $accent;
   mdc-theme-color.$on-secondary:
       if(variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background);
-  mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card);
+  mdc-theme-color.$background: inspection.get-theme-color($theme, background, background);
+  mdc-theme-color.$surface: inspection.get-theme-color($theme, background, card);
   mdc-theme-color.$on-surface:
       if(variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$error: $warn;
@@ -193,13 +190,13 @@ $mat-typography-mdc-level-mappings: (
 
 // Configures MDC's global variables to reflect the given typography config,
 // applies the given styles, then resets the global variables to prevent unintended side effects.
-@mixin using-mdc-typography($config) {
+@mixin using-mdc-typography($theme) {
   // Save the original values.
   $orig-mdc-typography-styles: mdc-typography.$styles;
 
   // Set new values based on the given Angular Material typography configuration.
-  @if $config {
-    mdc-typography.$styles: typography-config-to-mdc($config);
+  @if inspection.theme-has($theme, typography) {
+    mdc-typography.$styles: typography-config-to-mdc($theme);
   }
 
   // Apply given rules.