@angular/material 21.0.0-next.0 → 21.0.0-next.2

package/_index.scss

@@ -20,7 +20,7 @@
 @forward 'core/tokens/system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state, theme, theme-overrides, m2-theme;
-@forward 'core/tokens/classes' show utility-classes;
+@forward 'core/tokens/classes' show system-classes;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;

package/autocomplete/index.d.ts

@@ -57,12 +57,6 @@ interface MatAutocompleteDefaultOptions {
 }
 /** Injection token to be used to override the default options for `mat-autocomplete`. */
 declare const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefaultOptions;
 /** Autocomplete component. */
 declare class MatAutocomplete implements AfterContentInit, OnDestroy {
     private _changeDetectorRef;
@@ -194,22 +188,6 @@ declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
 declare function getMatAutocompleteMissingPanelError(): Error;
 /** Injection token that determines the scroll handling while the autocomplete panel is open. */
 declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(_overlay: unknown): () => ScrollStrategy;
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
-    provide: InjectionToken<() => ScrollStrategy>;
-    deps: any[];
-    useFactory: typeof MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY;
-};
 /** Base class with all of the `MatAutocompleteTrigger` functionality. */
 declare class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy {
     private _environmentInjector;
@@ -439,5 +417,5 @@ declare class MatAutocompleteModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatAutocompleteModule>;
 }
 
-export { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_AUTOCOMPLETE_VALUE_ACCESSOR, MatAutocomplete, MatAutocompleteModule, MatAutocompleteOrigin, MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatOptgroup, MatOption, getMatAutocompleteMissingPanelError };
+export { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_VALUE_ACCESSOR, MatAutocomplete, MatAutocompleteModule, MatAutocompleteOrigin, MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatOptgroup, MatOption, getMatAutocompleteMissingPanelError };
 export type { MatAutocompleteActivatedEvent, MatAutocompleteDefaultOptions };

package/bottom-sheet/index.d.ts

@@ -186,14 +186,5 @@ declare class MatBottomSheet implements OnDestroy {
     static ɵprov: i0.ɵɵInjectableDeclaration<MatBottomSheet>;
 }
 
-/**
- * Animations used by the Material bottom sheet.
- * @deprecated No longer used. Will be removed.
- * @breaking-change 21.0.0
- */
-declare const matBottomSheetAnimations: {
-    readonly bottomSheetState: any;
-};
-
-export { MAT_BOTTOM_SHEET_DATA, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, MatBottomSheet, MatBottomSheetConfig, MatBottomSheetContainer, MatBottomSheetModule, MatBottomSheetRef, matBottomSheetAnimations };
+export { MAT_BOTTOM_SHEET_DATA, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, MatBottomSheet, MatBottomSheetConfig, MatBottomSheetContainer, MatBottomSheetModule, MatBottomSheetRef };
 export type { AutoFocusTarget };

package/button/index.d.ts

@@ -138,12 +138,6 @@ interface MatFabDefaultOptions {
 }
 /** Injection token to be used to override the default options for FAB. */
 declare const MAT_FAB_DEFAULT_OPTIONS: InjectionToken<MatFabDefaultOptions>;
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare function MAT_FAB_DEFAULT_OPTIONS_FACTORY(): MatFabDefaultOptions;
 /**
  * Material Design floating action button (FAB) component. These buttons represent the primary
  * or most common action for users to interact with.
@@ -213,5 +207,5 @@ declare class MatButtonModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatButtonModule>;
 }
 
-export { MAT_BUTTON_CONFIG, MAT_FAB_DEFAULT_OPTIONS, MAT_FAB_DEFAULT_OPTIONS_FACTORY, MatAnchor, MatButton, MatButtonModule, MatFabAnchor, MatFabButton, MatIconAnchor, MatIconButton, MatMiniFabAnchor, MatMiniFabButton };
+export { MAT_BUTTON_CONFIG, MAT_FAB_DEFAULT_OPTIONS, MatAnchor, MatButton, MatButtonModule, MatFabAnchor, MatFabButton, MatIconAnchor, MatIconButton, MatMiniFabAnchor, MatMiniFabButton };
 export type { MatButtonAppearance, MatButtonConfig, MatFabDefaultOptions };

package/button-toggle/index.d.ts

@@ -1,5 +1,5 @@
 import { MatButtonToggleGroup, MatButtonToggle } from '../button-toggle.d.js';
-export { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MAT_BUTTON_TOGGLE_GROUP, MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, MatButtonToggleAppearance, MatButtonToggleChange, MatButtonToggleDefaultOptions, ToggleType } from '../button-toggle.d.js';
+export { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MAT_BUTTON_TOGGLE_GROUP, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, MatButtonToggleAppearance, MatButtonToggleChange, MatButtonToggleDefaultOptions, ToggleType } from '../button-toggle.d.js';
 import * as i0 from '@angular/core';
 import { MatCommonModule } from '../common-module.d.js';
 import { MatRippleModule } from '../ripple-module.d.js';

package/button-toggle.d.d.ts

@@ -32,12 +32,6 @@ interface MatButtonToggleDefaultOptions {
  * default options for all button toggles within an app.
  */
 declare const MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatButtonToggleDefaultOptions>;
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare function MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY(): MatButtonToggleDefaultOptions;
 /**
  * Injection token that can be used to reference instances of `MatButtonToggleGroup`.
  * It serves as alternative token to the actual `MatButtonToggleGroup` class which
@@ -254,5 +248,5 @@ declare class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     static ngAcceptInputType_disabledInteractive: unknown;
 }
 
-export { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MAT_BUTTON_TOGGLE_GROUP, MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, MatButtonToggle, MatButtonToggleChange, MatButtonToggleGroup };
+export { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MAT_BUTTON_TOGGLE_GROUP, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, MatButtonToggle, MatButtonToggleChange, MatButtonToggleGroup };
 export type { MatButtonToggleAppearance, MatButtonToggleDefaultOptions, ToggleType };

package/checkbox/index.d.ts

@@ -198,12 +198,6 @@ interface MatCheckboxDefaultOptions {
 }
 /** Injection token to be used to override the default options for `mat-checkbox`. */
 declare const MAT_CHECKBOX_DEFAULT_OPTIONS: InjectionToken<MatCheckboxDefaultOptions>;
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefaultOptions;
 /**
  * Checkbox click action when user click on input element.
  * noop: Do not toggle checked or indeterminate.
@@ -219,5 +213,5 @@ declare class MatCheckboxModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatCheckboxModule>;
 }
 
-export { MAT_CHECKBOX_DEFAULT_OPTIONS, MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY, MatCheckbox, MatCheckboxChange, MatCheckboxModule, TransitionCheckState };
+export { MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckbox, MatCheckboxChange, MatCheckboxModule, TransitionCheckState };
 export type { MatCheckboxClickAction, MatCheckboxDefaultOptions };

package/chips/_m3-chip.scss

@@ -49,8 +49,11 @@
       chip-selected-label-text-color: map.get($system, on-secondary-container),
       chip-selected-trailing-action-state-layer-color: map.get($system, on-secondary-container),
       chip-selected-trailing-icon-color: map.get($system, on-secondary-container),
-      chip-trailing-action-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-      chip-trailing-action-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      // Parent chips will show focus/hover state as well so need stronger focus/hover styling here
+      chip-trailing-action-focus-state-layer-opacity:
+        calc(map.get($system, focus-state-layer-opacity) * 2),
+      chip-trailing-action-hover-state-layer-opacity:
+        calc(map.get($system, hover-state-layer-opacity) * 2),
       chip-trailing-action-state-layer-color: map.get($system, on-surface-variant),
       chip-with-icon-disabled-icon-color: map.get($system, on-surface),
       chip-with-icon-icon-color: map.get($system, on-surface-variant),

package/chips/index.d.ts

@@ -12,10 +12,10 @@ import '../ripple.d.js';
 import '@angular/cdk/platform';
 
 /**
- * Section within a chip.
+ * A non-interactive section of a chip.
  * @docs-private
  */
-declare class MatChipAction {
+declare class MatChipContent {
     _elementRef: ElementRef<HTMLElement>;
     protected _parentChip: {
         _handlePrimaryActionInteraction(): void;
@@ -24,8 +24,6 @@ declare class MatChipAction {
         _edit(): void;
         _isEditing?: boolean;
     };
-    /** Whether the action is interactive. */
-    isInteractive: boolean;
     /** Whether this is the primary action in the chip. */
     _isPrimary: boolean;
     /** Whether this is the leading action in the chip. */
@@ -44,18 +42,26 @@ declare class MatChipAction {
      * Determine the value of the disabled attribute for this chip action.
      */
     protected _getDisabledAttribute(): string | null;
+    constructor(...args: unknown[]);
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipContent, "[matChipContent]", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "_allowFocusWhenDisabled": { "alias": "_allowFocusWhenDisabled"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+}
+/**
+ * Interactive section of a chip.
+ * @docs-private
+ */
+declare class MatChipAction extends MatChipContent {
     /**
      * Determine the value of the tabindex attribute for this chip action.
      */
     protected _getTabindex(): string | null;
-    constructor(...args: unknown[]);
-    focus(): void;
     _handleClick(event: MouseEvent): void;
     _handleKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAction, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, { "isInteractive": { "alias": "isInteractive"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "_allowFocusWhenDisabled": { "alias": "_allowFocusWhenDisabled"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_disabled: unknown;
-    static ngAcceptInputType_tabIndex: unknown;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, {}, {}, never, never, true, never>;
 }
 
 /** Avatar image within a chip. */
@@ -64,12 +70,7 @@ declare class MatChipAvatar {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAvatar, "mat-chip-avatar, [matChipAvatar]", never, {}, {}, never, never, true, never>;
 }
 /** Non-interactive trailing icon in a chip. */
-declare class MatChipTrailingIcon extends MatChipAction {
-    /**
-     * MDC considers all trailing actions as a remove icon,
-     * but we support non-interactive trailing icons.
-     */
-    isInteractive: boolean;
+declare class MatChipTrailingIcon extends MatChipContent {
     _isPrimary: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipTrailingIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipTrailingIcon, "mat-chip-trailing-icon, [matChipTrailingIcon]", never, {}, {}, never, never, true, never>;
@@ -498,7 +499,7 @@ declare class MatChipSet implements AfterViewInit, OnDestroy {
      * Determines if key manager should avoid putting a given chip action in the tab index. Skip
      * non-interactive and disabled actions since the user can't do anything with them.
      */
-    protected _skipPredicate(action: MatChipAction): boolean;
+    protected _skipPredicate(action: MatChipContent): boolean;
     /** Listens to changes in the chip set and syncs up the state of the individual chips. */
     private _trackChipSetChanges;
     /** Starts tracking the destroyed chips in order to capture the focused one. */
@@ -694,9 +695,10 @@ declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterV
      */
     readonly controlType: string;
     /** The chip input to add more chips */
-    protected _chipInput: MatChipTextControl;
+    protected _chipInput?: MatChipTextControl;
     protected _defaultRole: string;
     private _errorStateTracker;
+    private _uid;
     /**
      * List of element ids to propagate to the chipInput's aria-describedby attribute.
      */
@@ -780,7 +782,6 @@ declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterV
     set errorState(value: boolean);
     constructor(...args: unknown[]);
     ngAfterContentInit(): void;
-    ngAfterViewInit(): void;
     ngDoCheck(): void;
     ngOnDestroy(): void;
     /** Associates an HTML input element with this chip grid. */

package/core/index.d.ts

@@ -15,7 +15,7 @@ export { MAT_RIPPLE_GLOBAL_OPTIONS, MatRipple, RippleAnimationConfig, RippleConf
 export { MatRippleModule } from '../ripple-module.d.js';
 export { MatPseudoCheckbox, MatPseudoCheckboxModule, MatPseudoCheckboxState } from '../pseudo-checkbox-module.d.js';
 import { DateAdapter } from '../date-adapter.d.js';
-export { MAT_DATE_LOCALE, MAT_DATE_LOCALE_FACTORY } from '../date-adapter.d.js';
+export { MAT_DATE_LOCALE } from '../date-adapter.d.js';
 import '@angular/cdk/bidi';
 import '@angular/cdk/a11y';
 import '@angular/cdk/platform';

package/core/tokens/_classes.scss

@@ -1,11 +1,10 @@
-// Utility classes that can be used to style elements with the most commonly used tokens in
-// Material Design. Includes color, typography, elevation, and shape.
-// This API is experimental and may not release. Implemented for prototyping and testing.
-// Use caution depending on this.
-@mixin utility-classes() {
+// Utility classes that can be used to style elements with the most commonly used system tokens in
+// Material Design. Includes color, typography, elevation, state, and shape.
+@mixin system-classes() {
 
   // ***********************************************************************************************
-  // Background
+  // Background - Apply background color and a contrastful corresponding text color
+  // See https://m3.material.io/styles/color/roles for guidance.
   // ***********************************************************************************************
 
   // Styles an element with a primary color background and applies an accessible contrasting
@@ -137,7 +136,7 @@
 
 
   // ***********************************************************************************************
-  // Text
+  // Text - Apply colors to text
   // ***********************************************************************************************
 
   // Styles the text of an element with the primary color. Use for text that needs to stand out.
@@ -166,12 +165,13 @@
 
 
   // ***********************************************************************************************
-  // Font
+  // Font - Apply typography styles
+  // See https://m3.material.io/styles/typography/applying-type for guidance.
   // ***********************************************************************************************
 
   // Sets the font to the body small typeface. Use for small body text, such as captions. In Angular
   // Material, this is used for the subscript text in a form field and the text in a paginator.
-  .mat-font-body-small {
+  .mat-font-body-sm {
     font: var(--mat-sys-body-small);
     letter-spacing: var(--mat-sys-body-small-tracking);
   }
@@ -179,7 +179,7 @@
   // Sets the font to the body medium typeface. Use for medium body text, this is the default
   // body font. In Angular Material, this is used for the text in a table row and the supporting
   // text in a dialog.
-  .mat-font-body-medium {
+  .mat-font-body-md {
     font: var(--mat-sys-body-medium);
     letter-spacing: var(--mat-sys-body-medium-tracking);
   }
@@ -187,54 +187,54 @@
   // Sets the font to the body large typeface. Use for large body text, such as an introductory
   // paragraph. In Angular Material, this is used for the text in a list item and the text in a
   // select trigger.
-  .mat-font-body-large {
+  .mat-font-body-lg {
     font: var(--mat-sys-body-large);
     letter-spacing: var(--mat-sys-body-large-tracking);
   }
 
   // Sets the font to the display small typeface. Use for small display text, such as a date.
-  .mat-font-display-small {
+  .mat-font-display-sm {
     font: var(--mat-sys-display-small);
     letter-spacing: var(--mat-sys-display-small-tracking);
   }
 
   // Sets the font to the display medium typeface. Use for medium display text, such as a hero
   // title.
-  .mat-font-display-medium {
+  .mat-font-display-md {
     font: var(--mat-sys-display-medium);
     letter-spacing: var(--mat-sys-display-medium-tracking);
   }
 
   // Sets the font to the display large typeface. Use for large display text, such as a hero title.
-  .mat-font-display-large {
+  .mat-font-display-lg {
     font: var(--mat-sys-display-large);
     letter-spacing: var(--mat-sys-display-large-tracking);
   }
 
   // Sets the font to the headline small typeface. Use for small headlines, such as a page title. In
   // Angular Material, this is used for the headline in a dialog.
-  .mat-font-headline-small {
+  .mat-font-headline-sm {
     font: var(--mat-sys-headline-small);
     letter-spacing: var(--mat-sys-headline-small-tracking);
   }
 
   // Sets the font to the headline medium typeface. Use for medium headlines, such as a section
   // title.
-  .mat-font-headline-medium {
+  .mat-font-headline-md {
     font: var(--mat-sys-headline-medium);
     letter-spacing: var(--mat-sys-headline-medium-tracking);
   }
 
   // Sets the font to the headline large typeface. Use for large headlines, such as a page title on
   // a large screen.
-  .mat-font-headline-large {
+  .mat-font-headline-lg {
     font: var(--mat-sys-headline-large);
     letter-spacing: var(--mat-sys-headline-large-tracking);
   }
 
   // Sets the font to the title small typeface. Use for small titles, such as a card title. In
   // Angular Material, this is used for the header of a table and the label of an option group.
-  .mat-font-title-small {
+  .mat-font-title-sm {
     font: var(--mat-sys-title-small);
     letter-spacing: var(--mat-sys-title-small-tracking);
   }
@@ -242,7 +242,7 @@
   // Sets the font to the title medium typeface. Use for medium titles, such as a dialog title
   // or the primary text in a list item. In Angular Material, this is used for the subtitle
   // of a card and the header of an expansion panel.
-  .mat-font-title-medium {
+  .mat-font-title-md {
     font: var(--mat-sys-title-medium);
     letter-spacing: var(--mat-sys-title-medium-tracking);
   }
@@ -250,45 +250,46 @@
   // Sets the font to the title large typeface. Use for large titles, such as a page title on a
   // small screen. In Angular Material, this is used for the title of a card and the title of a
   // toolbar.
-  .mat-font-title-large {
+  .mat-font-title-lg {
     font: var(--mat-sys-title-large);
     letter-spacing: var(--mat-sys-title-large-tracking);
   }
 
 
   // ***********************************************************************************************
-  // Corner
+  // Corner - Apply varying amounts of a border radius
+  // See https://m3.material.io/styles/shape/corner-radius-scale for guidance.
   // ***********************************************************************************************
 
   // Sets the border radius to extra small. Use for components that need a small amount of rounding,
   // such as a chip. In Angular Material, this is used for the shape of a snackbar and a tooltip.
-  .mat-corner-extra-small {
+  .mat-corner-extra-sm {
     border-radius: var(--mat-sys-corner-extra-small);
   }
 
   // Sets the border radius to small. Use for components that need a small amount of rounding, such
   // as a text field.
-  .mat-corner-small {
+  .mat-corner-sm {
     border-radius: var(--mat-sys-corner-small);
   }
 
   // Sets the border radius to medium. Use for components that need a medium amount of rounding,
   // such as a button. In Angular Material, this is used for the shape of a card.
-  .mat-corner-medium {
+  .mat-corner-md {
     border-radius: var(--mat-sys-corner-medium);
   }
 
   // Sets the border radius to large. Use for components that need a large amount of rounding, such
   // as a card. In Angular Material, this is used for the shape of a floating action button and a
   // datepicker.
-  .mat-corner-large {
+  .mat-corner-lg {
     border-radius: var(--mat-sys-corner-large);
   }
 
   // Sets the border radius to extra large. Use for components that need a large amount of
   // rounding. In Angular Material, this is used for the shape of a button toggle and the shape of
   // a dialog.
-  .mat-corner-extra-large {
+  .mat-corner-xl {
     border-radius: var(--mat-sys-corner-extra-large);
   }
 
@@ -300,30 +301,30 @@
 
 
   // ***********************************************************************************************
-  // Border
+  // Border - Applies a 1px solid border
   // ***********************************************************************************************
 
   // Adds an outline to an element. Use for components that need a visible boundary. In Angular
   // Material, this is used for the outline of an outlined button.
-  .mat-outline {
+  .mat-border {
     border: 1px solid var(--mat-sys-outline);
   }
 
   // Adds a less prominent outline to an element. Use for components that need a less obvious
   // boundary. In Angular Material, this is used for the outline of an outlined card and the color
   // of the divider
-  .mat-outline-variant {
+  .mat-border-subtle {
     border: 1px solid var(--mat-sys-outline-variant);
   }
 
 
   // ***********************************************************************************************
-  // State
+  // Interactive - Adds interaction colors for hover, active, and focus
   // ***********************************************************************************************
 
   // Adds hover, focus, and active states to an element by applying varying shades of the surface
   // color. Use for interactive components that are not based on a primary color.
-  .mat-stateful {
+  .mat-interactive {
     &:hover {
       background: color-mix(
         in srgb,
@@ -351,7 +352,7 @@
 
   // Adds hover, focus, and active states to an element by applying varying shades of the primary
   // color. Use for interactive components that are not based on a primary color.
-  .mat-stateful-primary {
+  .mat-interactive-primary {
     &:hover {
       background: color-mix(
         in srgb,
@@ -379,37 +380,38 @@
 
 
   // ***********************************************************************************************
-  // Elevation
+  // Shadow - Applies elevation levels through box-shadow
+  // See https://m3.material.io/styles/elevation/applying-elevation for guidance.
   // ***********************************************************************************************
 
   // Use to slightly raise the appearance of a surface. In Angular Material, this is used for the
   // elevation of an elevated card and the handle of a slider.
-  .mat-shadow-level-1 {
+  .mat-shadow-1 {
     box-shadow: var(--mat-sys-level1);
   }
 
   // Use to raise the appearance of a surface. In Angular Material, this is used for the
   // elevation of a menu and a select panel.
-  .mat-shadow-level-2 {
+  .mat-shadow-2 {
     box-shadow: var(--mat-sys-level2);
   }
 
   // Used to raise the appearance of a surface. In Angular Material, this is used for the elevation
   // of a floating action button.
-  .mat-shadow-level-3 {
+  .mat-shadow-3 {
     box-shadow: var(--mat-sys-level3);
   }
 
   // Used to raise the appearance of a surface. This is generally reserved for elevation changes
   // due to interaction like focus and hover. In Angular Material, this is used for the elevation
   // of a hovered floating action button.
-  .mat-shadow-level-4 {
+  .mat-shadow-4 {
     box-shadow: var(--mat-sys-level4);
   }
 
   // Used to greatly raise the appearance of a surface. This is generally reserved for elevation
   // changes due to interaction like focus and hover.
-  .mat-shadow-level-5 {
+  .mat-shadow-5 {
     box-shadow: var(--mat-sys-level5);
   }
 }

package/date-adapter.d.d.ts

@@ -3,12 +3,6 @@ import { Subject, Observable } from 'rxjs';
 
 /** InjectionToken for datepicker that can be used to override default locale code. */
 declare const MAT_DATE_LOCALE: InjectionToken<{}>;
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare function MAT_DATE_LOCALE_FACTORY(): {};
 /** Adapts type `D` to be usable as a date by cdk-based components that work with dates. */
 declare abstract class DateAdapter<D, L = any> {
     /** The locale to use for all dates. */
@@ -264,4 +258,4 @@ declare abstract class DateAdapter<D, L = any> {
     clampDate(date: D, min?: D | null, max?: D | null): D;
 }
 
-export { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_LOCALE_FACTORY };
+export { DateAdapter, MAT_DATE_LOCALE };

package/datepicker/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, OnDestroy, AfterViewChecked, EventEmitter, SimpleChanges, FactoryProvider, AfterContentInit, ChangeDetectorRef, AfterViewInit, ElementRef, InjectionToken, OnInit, DoCheck, TemplateRef } from '@angular/core';
+import { OnChanges, OnDestroy, AfterViewChecked, EventEmitter, SimpleChanges, AfterContentInit, ChangeDetectorRef, AfterViewInit, ElementRef, InjectionToken, OnInit, DoCheck, TemplateRef } from '@angular/core';
 import { MatButton, MatButtonModule } from '../button/index.js';
 import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy } from '@angular/cdk/overlay';
@@ -344,32 +344,6 @@ declare class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRa
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRangeDateSelectionModel<any>, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatRangeDateSelectionModel<any>>;
 }
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare function MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(parent: MatSingleDateSelectionModel<unknown>, adapter: DateAdapter<unknown>): MatSingleDateSelectionModel<unknown>;
-/**
- * Used to provide a single selection model to a component.
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare const MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider;
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare function MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(parent: MatSingleDateSelectionModel<unknown>, adapter: DateAdapter<unknown>): MatSingleDateSelectionModel<unknown>;
-/**
- * Used to provide a range selection model to a component.
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare const MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider;
 
 /**
  * An internal component used to display a single month in the datepicker.
@@ -1021,26 +995,10 @@ declare abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelectio
 
 /** Injection token that determines the scroll handling while the calendar is open. */
 declare const MAT_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare function MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(_overlay: unknown): () => ScrollStrategy;
 /** Possible positions for the datepicker dropdown along the X axis. */
 type DatepickerDropdownPositionX = 'start' | 'end';
 /** Possible positions for the datepicker dropdown along the Y axis. */
 type DatepickerDropdownPositionY = 'above' | 'below';
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare const MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
-    provide: InjectionToken<() => ScrollStrategy>;
-    deps: any[];
-    useFactory: typeof MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY;
-};
 /**
  * Component used as the content for the datepicker overlay. We use this instead of using
  * MatCalendar directly as the content so we can control the initial focus. This also gives us a
@@ -1782,16 +1740,5 @@ declare class DefaultMatCalendarRangeStrategy<D> implements MatDateRangeSelectio
     static ɵprov: i0.ɵɵInjectableDeclaration<DefaultMatCalendarRangeStrategy<any>>;
 }
 
-/**
- * Animations used by the Material datepicker.
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-declare const matDatepickerAnimations: {
-    readonly transformPanel: any;
-    readonly fadeInCalendar: any;
-};
-
-export { DateRange, DefaultMatCalendarRangeStrategy, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_DATEPICKER_VALIDATORS, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATE_RANGE_SELECTION_STRATEGY, MAT_RANGE_DATE_SELECTION_MODEL_FACTORY, MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY, MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, MatCalendar, MatCalendarBody, MatCalendarCell, MatCalendarHeader, MatDateRangeInput, MatDateRangePicker, MatDateSelectionModel, MatDatepicker, MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel, MatDatepickerContent, MatDatepickerInput, MatDatepickerInputEvent, MatDatepickerIntl, MatDatepickerModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatEndDate, MatMonthView, MatMultiYearView, MatRangeDateSelectionModel, MatSingleDateSelectionModel, MatStartDate, MatYearView, matDatepickerAnimations, yearsPerPage, yearsPerRow };
+export { DateRange, DefaultMatCalendarRangeStrategy, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_VALIDATORS, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATE_RANGE_SELECTION_STRATEGY, MatCalendar, MatCalendarBody, MatCalendarCell, MatCalendarHeader, MatDateRangeInput, MatDateRangePicker, MatDateSelectionModel, MatDatepicker, MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel, MatDatepickerContent, MatDatepickerInput, MatDatepickerInputEvent, MatDatepickerIntl, MatDatepickerModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatEndDate, MatMonthView, MatMultiYearView, MatRangeDateSelectionModel, MatSingleDateSelectionModel, MatStartDate, MatYearView, yearsPerPage, yearsPerRow };
 export type { DateFilterFn, DateSelectionModelChange, DatepickerDropdownPositionX, DatepickerDropdownPositionY, ExtractDateTypeFromSelection, MatCalendarCellClassFunction, MatCalendarCellCssClasses, MatCalendarUserEvent, MatCalendarView, MatDateRangeSelectionStrategy, MatDatepickerControl, MatDatepickerPanel };