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

package/autocomplete/index.d.ts

@@ -3,18 +3,17 @@ import { InjectionToken, AfterContentInit, OnDestroy, TemplateRef, ElementRef, Q
 import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { MatOptionModule } from '../option-module.d.js';
-import { MatCommonModule } from '../common-module.d.js';
 import { ThemePalette } from '../palette.d.js';
 import { MatOption, MatOptgroup, MatOptionSelectionChange } from '../option.d.js';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { ControlValueAccessor } from '@angular/forms';
 import { Observable } from 'rxjs';
-import * as i5 from '@angular/cdk/scrolling';
+import * as i1 from '@angular/cdk/scrolling';
+import * as i2$1 from '@angular/cdk/bidi';
 import '../ripple-module.d.js';
 import '../ripple.d.js';
 import '@angular/cdk/platform';
 import '../pseudo-checkbox-module.d.js';
-import '@angular/cdk/bidi';
 
 /** Event object that is emitted when an autocomplete option is selected. */
 declare class MatAutocompleteSelectedEvent {
@@ -413,7 +412,7 @@ declare class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewI
 
 declare class MatAutocompleteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatAutocompleteModule, never, [typeof i2.OverlayModule, typeof MatOptionModule, typeof MatCommonModule, typeof MatAutocomplete, typeof MatAutocompleteTrigger, typeof MatAutocompleteOrigin], [typeof i5.CdkScrollableModule, typeof MatAutocomplete, typeof MatOptionModule, typeof MatCommonModule, typeof MatAutocompleteTrigger, typeof MatAutocompleteOrigin]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatAutocompleteModule, never, [typeof i2.OverlayModule, typeof MatOptionModule, typeof MatAutocomplete, typeof MatAutocompleteTrigger, typeof MatAutocompleteOrigin], [typeof i1.CdkScrollableModule, typeof MatAutocomplete, typeof MatOptionModule, typeof i2$1.BidiModule, typeof MatAutocompleteTrigger, typeof MatAutocompleteOrigin]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatAutocompleteModule>;
 }
 

package/badge/index.d.ts

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/a11y';
-import { MatCommonModule } from '../common-module.d.js';
 import { MatBadge, _MatBadgeStyleLoader } from '../badge.d.js';
 export { MatBadgePosition, MatBadgeSize } from '../badge.d.js';
-import '@angular/cdk/bidi';
+import * as i2 from '@angular/cdk/bidi';
 import '../palette.d.js';
 
 declare class MatBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBadgeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBadgeModule, never, [typeof i1.A11yModule, typeof MatCommonModule, typeof MatBadge, typeof _MatBadgeStyleLoader], [typeof MatBadge, typeof MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBadgeModule, never, [typeof i1.A11yModule, typeof MatBadge, typeof _MatBadgeStyleLoader], [typeof MatBadge, typeof i2.BidiModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatBadgeModule>;
 }
 

package/bottom-sheet/index.d.ts

@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
 import { OnDestroy, EventEmitter, InjectionToken, ViewContainerRef, ComponentRef, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/cdk/dialog';
 import { CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
-import { MatCommonModule } from '../common-module.d.js';
-import * as i3 from '@angular/cdk/portal';
+import * as i2 from '@angular/cdk/portal';
 import { ComponentType } from '@angular/cdk/portal';
+import * as i2$1 from '@angular/cdk/bidi';
 import { Direction } from '@angular/cdk/bidi';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { Observable } from 'rxjs';
@@ -40,7 +40,7 @@ declare class MatBottomSheetContainer extends CdkDialogContainer implements OnDe
 
 declare class MatBottomSheetModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBottomSheetModule, never, [typeof i1.DialogModule, typeof MatCommonModule, typeof i3.PortalModule, typeof MatBottomSheetContainer], [typeof MatBottomSheetContainer, typeof MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBottomSheetModule, never, [typeof i1.DialogModule, typeof i2.PortalModule, typeof MatBottomSheetContainer], [typeof MatBottomSheetContainer, typeof i2$1.BidiModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatBottomSheetModule>;
 }
 

package/button/index.d.ts

@@ -3,9 +3,8 @@ import * as i0 from '@angular/core';
 import { InjectionToken, AfterViewInit, OnDestroy, ElementRef, NgZone } from '@angular/core';
 import { ThemePalette } from '../palette.d.js';
 import { MatRippleLoader } from '../ripple-loader.d.js';
-import { MatCommonModule } from '../common-module.d.js';
 import { MatRippleModule } from '../ripple-module.d.js';
-import '@angular/cdk/bidi';
+import * as i2 from '@angular/cdk/bidi';
 import '../ripple.d.js';
 import '@angular/cdk/platform';
 
@@ -203,7 +202,7 @@ type MatIconAnchor = MatIconButton;
 
 declare class MatButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonModule, never, [typeof MatCommonModule, typeof MatRippleModule, typeof MatButton, typeof MatMiniFabButton, typeof MatIconButton, typeof MatFabButton], [typeof MatCommonModule, typeof MatButton, typeof MatMiniFabButton, typeof MatIconButton, typeof MatFabButton]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonModule, never, [typeof MatRippleModule, typeof MatButton, typeof MatMiniFabButton, typeof MatIconButton, typeof MatFabButton], [typeof i2.BidiModule, typeof MatButton, typeof MatMiniFabButton, typeof MatIconButton, typeof MatFabButton]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatButtonModule>;
 }
 

package/button-toggle/index.d.ts

@@ -1,16 +1,15 @@
 import { MatButtonToggleGroup, MatButtonToggle } 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';
-import '@angular/cdk/bidi';
+import * as i2 from '@angular/cdk/bidi';
 import '@angular/forms';
 import '../ripple.d.js';
 import '@angular/cdk/platform';
 
 declare class MatButtonToggleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonToggleModule, never, [typeof MatCommonModule, typeof MatRippleModule, typeof MatButtonToggleGroup, typeof MatButtonToggle], [typeof MatCommonModule, typeof MatButtonToggleGroup, typeof MatButtonToggle]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonToggleModule, never, [typeof MatRippleModule, typeof MatButtonToggleGroup, typeof MatButtonToggle], [typeof i2.BidiModule, typeof MatButtonToggleGroup, typeof MatButtonToggle]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatButtonToggleModule>;
 }
 

package/card/index.d.ts

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken } from '@angular/core';
-import { MatCommonModule } from '../common-module.d.js';
-import '@angular/cdk/bidi';
+import * as i2 from '@angular/cdk/bidi';
 
 type MatCardAppearance = 'outlined' | 'raised' | 'filled';
 /** Object that can be used to configure the default options for the card module. */
@@ -149,7 +148,7 @@ declare class MatCardAvatar {
 
 declare class MatCardModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCardModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCardModule, never, [typeof MatCommonModule, typeof MatCard, typeof MatCardActions, typeof MatCardAvatar, typeof MatCardContent, typeof MatCardFooter, typeof MatCardHeader, typeof MatCardImage, typeof MatCardLgImage, typeof MatCardMdImage, typeof MatCardSmImage, typeof MatCardSubtitle, typeof MatCardTitle, typeof MatCardTitleGroup, typeof MatCardXlImage], [typeof MatCard, typeof MatCardActions, typeof MatCardAvatar, typeof MatCardContent, typeof MatCardFooter, typeof MatCardHeader, typeof MatCardImage, typeof MatCardLgImage, typeof MatCardMdImage, typeof MatCardSmImage, typeof MatCardSubtitle, typeof MatCardTitle, typeof MatCardTitleGroup, typeof MatCardXlImage, typeof MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCardModule, never, [typeof MatCard, typeof MatCardActions, typeof MatCardAvatar, typeof MatCardContent, typeof MatCardFooter, typeof MatCardHeader, typeof MatCardImage, typeof MatCardLgImage, typeof MatCardMdImage, typeof MatCardSmImage, typeof MatCardSubtitle, typeof MatCardTitle, typeof MatCardTitleGroup, typeof MatCardXlImage], [typeof MatCard, typeof MatCardActions, typeof MatCardAvatar, typeof MatCardContent, typeof MatCardFooter, typeof MatCardHeader, typeof MatCardImage, typeof MatCardLgImage, typeof MatCardMdImage, typeof MatCardSmImage, typeof MatCardSubtitle, typeof MatCardTitle, typeof MatCardTitleGroup, typeof MatCardXlImage, typeof i2.BidiModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatCardModule>;
 }
 

package/checkbox/index.d.ts

@@ -3,8 +3,7 @@ import * as i0 from '@angular/core';
 import { AfterViewInit, OnChanges, ElementRef, EventEmitter, SimpleChanges, InjectionToken } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { ThemePalette } from '../palette.d.js';
-import { MatCommonModule } from '../common-module.d.js';
-import '@angular/cdk/bidi';
+import * as i2 from '@angular/cdk/bidi';
 
 /**
  * Represents the different states that require custom transitions between them.
@@ -209,7 +208,7 @@ type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefin
 
 declare class MatCheckboxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, never, [typeof MatCheckbox, typeof MatCommonModule], [typeof MatCheckbox, typeof MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, never, [typeof MatCheckbox], [typeof MatCheckbox, typeof i2.BidiModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatCheckboxModule>;
 }
 

package/chips/_m3-chip.scss

@@ -49,11 +49,8 @@
       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),
-      // 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-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),
       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

@@ -5,9 +5,8 @@ import { FocusKeyManager } from '@angular/cdk/a11y';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { ErrorStateMatcher } from '../error-options.d.js';
 import { MatFormFieldControl } from '../form-field-control.d.js';
-import { MatCommonModule } from '../common-module.d.js';
 import { MatRippleModule } from '../ripple-module.d.js';
-import '@angular/cdk/bidi';
+import * as i2 from '@angular/cdk/bidi';
 import '../ripple.d.js';
 import '@angular/cdk/platform';
 
@@ -937,7 +936,7 @@ declare class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
 
 declare class MatChipsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, never, [typeof MatCommonModule, typeof MatRippleModule, typeof MatChipAction, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon], [typeof MatCommonModule, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, never, [typeof MatRippleModule, typeof MatChipAction, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon], [typeof i2.BidiModule, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatChipsModule>;
 }
 

package/core/index.d.ts

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
 import { Version, InjectionToken, Provider } from '@angular/core';
-export { GranularSanityChecks, MATERIAL_SANITY_CHECKS, MatCommonModule, SanityChecks } from '../common-module.d.js';
 export { ThemePalette } from '../palette.d.js';
 import { NgControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { Subject } from 'rxjs';

package/core/tokens/_classes.scss

@@ -3,134 +3,109 @@
 @mixin system-classes() {
 
   // ***********************************************************************************************
-  // Background - Apply background color and a contrastful corresponding text color
-  // See https://m3.material.io/styles/color/roles for guidance.
+  // Background - Applies background colors defined by Material Design.
+  // See https://m3.material.io/styles/color/roles for detailed guidance.
   // ***********************************************************************************************
 
-  // Styles an element with a primary color background and applies an accessible contrasting
-  // color for text and icons. Use for key components across the UI, such as buttons that
-  // have greater importance on the page. In Angular Material, this is used for the selected
-  // date in a datepicker, the handle of a slider, and the background of a checkbox.
+  // Styles an element with a primary color background. Use for key components across the UI, such
+  // as buttons that have greater importance on the page. In Angular Material, this is used for the
+  // selected date in a datepicker, the handle of a slider, and the background of a checkbox.
   .mat-bg-primary {
     background-color: var(--mat-sys-primary);
-    color: var(--mat-sys-on-primary);
   }
 
-  // Styles an element with a primary container color background and applies an accessible
-  // contrasting color for text and icons. Use for filling components that should stand out
-  // on a surface. In Angular Material, this is used for
-  // the container of a floating action button.
+  // Styles an element with a primary container color background. Use for filling components that
+  // should stand out on a surface. In Angular Material, this is used for the container of a
+  // floating action button.
   .mat-bg-primary-container {
     background-color: var(--mat-sys-primary-container);
-    color: var(--mat-sys-on-primary-container);
   }
 
-  // Styles an element with a secondary color background and applies an accessible contrasting
-  // color for text and icons. Use for less prominent components in the UI that have a different
-  // color scheme than the primary.
+  // Styles an element with a secondary color background. Use for less prominent components in the
+  // UI that have a different color scheme than the primary.
   .mat-bg-secondary {
     background-color: var(--mat-sys-secondary);
-    color: var(--mat-sys-on-secondary);
   }
 
-  // Styles an element with a secondary container color background and applies an accessible
-  // contrasting color for text and icons. Use for components that need less emphasis than
-  // secondary, such as filter chips. In Angular Material, this is used for selected items
-  // in a list and the container of a tonal button.
+  // Styles an element with a secondary container color background. Use for components that need
+  // less emphasis than secondary, such as filter chips. In Angular Material, this is used for
+  // selected items in a list and the container of a tonal button.
   .mat-bg-secondary-container {
     background-color: var(--mat-sys-secondary-container);
-    color: var(--mat-sys-on-secondary-container);
   }
 
-  // Styles an element with an error color background and applies an accessible contrasting
-  // color for text and icons. Use for indicating an error state, such as an invalid text field, or
-  // for the background of an important notification. In Angular Material, this is used for the
-  // background of a badge.
+  // Styles an element with an error color background. Use for indicating an error state, such as
+  // an invalid text field, or for the background of an important notification. In Angular
+  // Material, this is used for the background of a badge.
   .mat-bg-error {
     background-color: var(--mat-sys-error);
-    color: var(--mat-sys-on-error);
   }
 
-  // Styles an element with an error container color background and applies an accessible
-  // contrasting color for text and icons. Use for components that need less emphasis than
-  // error, such as a container for error text.
+  // Styles an element with an error container color background. Use for components that need less
+  // emphasis than error, such as a container for error text.
   .mat-bg-error-container {
     background-color: var(--mat-sys-error-container);
-    color: var(--mat-sys-on-error-container);
   }
 
-  // Styles an element with a surface color background and applies an accessible contrasting
-  // color for text and icons. Use for general surfaces of components. In Angular Material, this is
-  // used for the background of many components, like tables, dialogs, menus, and toolbars.
+  // Styles an element with a surface color background. Use for general surfaces of components. In
+  // Angular Material, this is used for the background of many components, like tables, dialogs,
+  // menus, and toolbars.
   .mat-bg-surface {
     background-color: var(--mat-sys-surface);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a surface variant color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need to stand out from the
-  // main surface color. In Angular Material, this is used for the background of a filled
-  // form field and the track of a progress bar.
+  // Styles an element with a surface variant color background. Use for surfaces that need to stand
+  // out from the main surface color. In Angular Material, this is used for the background of a
+  // filled form field and the track of a progress bar.
   .mat-bg-surface-variant {
     background-color: var(--mat-sys-surface-variant);
-    color: var(--mat-sys-on-surface-variant);
   }
 
-  // Styles an element with the "highest" surface container color background and applies an
-  // accessible contrasting color for text and icons. Use for surfaces that need the most
-  // emphasis against the main surface color. In Angular Material, this is used for the
-  // background of a filled card.
+  // Styles an element with the "highest" surface container color background. Use for surfaces that
+  // need the most emphasis against the main surface color. In Angular Material, this is used for
+  // the background of a filled card.
   .mat-bg-surface-container-highest {
     background-color: var(--mat-sys-surface-container-highest);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a "high" surface container color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need more emphasis against
-  // the main surface color. In Angular Material, this is used for the background of a datepicker.
+  // Styles an element with a "high" surface container color background. Use for surfaces that need
+  // more emphasis against the main surface color. In Angular Material, this is used for the
+  // background of a datepicker.
   .mat-bg-surface-container-high {
     background-color: var(--mat-sys-surface-container-high);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a surface container color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need to stand out from the
-  // main surface color. In Angular Material, this is used for the background of a menu.
+  // Styles an element with a surface container color background. Use for surfaces that need to
+  // stand out from the main surface color. In Angular Material, this is used for the background
+  // of a menu.
   .mat-bg-surface-container {
     background-color: var(--mat-sys-surface-container);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a "low" surface container color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need less emphasis against
-  // the main surface color. In Angular Material, this is used for the background of a bottom sheet.
+  // Styles an element with a "low" surface container color background. Use for surfaces that need
+  // less emphasis against the main surface color. In Angular Material, this is used for the
+  // background of a bottom sheet.
   .mat-bg-surface-container-low {
     background-color: var(--mat-sys-surface-container-low);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with the "lowest" surface container color background and applies an
-  // accessible contrasting color for text and icons. Use for surfaces that need the least
-  // emphasis against the main surface color.
+  // Styles an element with the "lowest" surface container color background. Use for surfaces that
+  // need the least emphasis against the main surface color.
   .mat-bg-surface-container-lowest {
     background-color: var(--mat-sys-surface-container-lowest);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with an inverse surface color background and applies an accessible
-  // contrasting color for text and icons. Use for making elements stand out against the
-  // default color scheme. Good for temporary notifications. In Angular Material, this is used for
-  // the background of a snackbar and a tooltip.
+  // Styles an element with an inverse surface color background. Use for making elements stand out
+  // against the default color scheme. Good for temporary notifications. In Angular Material, this
+  // is used for the background of a snackbar and a tooltip.
   .mat-bg-inverse-surface {
     background-color: var(--mat-sys-inverse-surface);
-    color: var(--mat-sys-inverse-on-surface);
   }
 
-  // Styles an element with a disabled color background and applies an accessible contrasting
-  // color for text and icons. Use for disabled components. In Angular Material, this is used
-  // for components generally filled with the primary color but are currently disabled.
+  // Styles an element with a disabled color background. Use for disabled components. In Angular
+  // Material, this is used for components generally filled with the primary color but are
+  // currently disabled.
   .mat-bg-disabled {
-    color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
     background-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
   }
 
@@ -145,8 +120,7 @@
     color: var(--mat-sys-primary);
   }
 
-  // Styles the text of an element with the secondary color. Use for text that needs less emphasis
-  // than primary text.
+  // Styles the text of an element with the secondary color. Use for text that needs to stand out.
   .mat-text-secondary {
     color: var(--mat-sys-secondary);
   }
@@ -158,11 +132,60 @@
   }
 
   // Styles the text of an element with the disabled color. Use for text in disabled components.
-  // In Angular Material this is used to show text is disabled, generally on a "surface" background.
   .mat-text-disabled {
     color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
   }
 
+  // Styles the text of an element with the on-surface-variant color. Use for text that should have
+  // a lower emphasis than the surrounding text. This can include subheading, captions, and hint
+  // text.
+  .mat-text-on-surface-variant {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a primary background.
+  .mat-text-on-primary {
+    color: var(--mat-sys-on-primary);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a primary-container
+  // background.
+  .mat-text-on-primary-container {
+    color: var(--mat-sys-on-primary-container);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a secondary background.
+  .mat-text-on-secondary {
+    color: var(--mat-sys-on-secondary);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a secondary-container
+  // background.
+  .mat-text-on-secondary-container {
+    color: var(--mat-sys-on-secondary-container);
+  }
+
+  // Styles the text of an element with a color that contrasts well against an error background.
+  .mat-text-on-error {
+    color: var(--mat-sys-on-error);
+  }
+
+  // Styles the text of an element with a color that contrasts well against an error-container
+  // background.
+  .mat-text-on-error-container {
+    color: var(--mat-sys-on-error-container);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a surface background.
+  .mat-text-on-surface {
+    color: var(--mat-sys-on-surface);
+  }
+
+  // Styles the text of an element with a color that contrasts well against an inverse-surface
+  // background.
+  .mat-text-inverse-on-surface {
+    color: var(--mat-sys-inverse-on-surface);
+  }
 
   // ***********************************************************************************************
   // Font - Apply typography styles
@@ -232,6 +255,26 @@
     letter-spacing: var(--mat-sys-headline-large-tracking);
   }
 
+  // Sets the font to the label small typeface. Use for small labels, such as text in a badge.
+  .mat-font-label-sm {
+    font: var(--mat-sys-label-small);
+    letter-spacing: var(--mat-sys-label-small-tracking);
+  }
+
+  // Sets the font to the label medium typeface. Use for medium labels. In Angular Material, this
+  // is used for the slider label.
+  .mat-font-label-md {
+    font: var(--mat-sys-label-medium);
+    letter-spacing: var(--mat-sys-label-medium-tracking);
+  }
+
+  // Sets the font to the label large typeface. Use for large labels. In Angular Material, this is
+  // used for buttons, chips, and menu labels.
+  .mat-font-label-lg {
+    font: var(--mat-sys-label-large);
+    letter-spacing: var(--mat-sys-label-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-sm {
@@ -317,68 +360,6 @@
     border: 1px solid var(--mat-sys-outline-variant);
   }
 
-
-  // ***********************************************************************************************
-  // 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-interactive {
-    &:hover {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:focus {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:active {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-  }
-
-  // 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-interactive-primary {
-    &:hover {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-primary) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:focus {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-primary) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:active {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-  }
-
-
   // ***********************************************************************************************
   // Shadow - Applies elevation levels through box-shadow
   // See https://m3.material.io/styles/elevation/applying-elevation for guidance.

package/datepicker/index.d.ts

@@ -5,17 +5,17 @@ import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import * as i1 from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
-import * as i3 from '@angular/cdk/portal';
+import * as i2$1 from '@angular/cdk/portal';
 import { ComponentType, Portal, TemplatePortal } from '@angular/cdk/portal';
-import { MatCommonModule } from '../common-module.d.js';
 import { Observable, Subject } from 'rxjs';
 import { DateAdapter } from '../date-adapter.d.js';
 import { ThemePalette } from '../palette.d.js';
 import { ControlValueAccessor, Validator, ValidatorFn, AbstractControl, ValidationErrors, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import { MatFormFieldControl } from '../form-field-control.d.js';
+import * as i2$2 from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
 import { ErrorStateMatcher } from '../error-options.d.js';
-import * as i5 from '@angular/cdk/scrolling';
+import * as i1$1 from '@angular/cdk/scrolling';
 import '../ripple-loader.d.js';
 import '../ripple-module.d.js';
 import '../ripple.d.js';
@@ -1690,7 +1690,7 @@ declare class MatDatepickerActions implements AfterViewInit, OnDestroy {
 
 declare class MatDatepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDatepickerModule, never, [typeof MatButtonModule, typeof i2.OverlayModule, typeof i1.A11yModule, typeof i3.PortalModule, typeof MatCommonModule, typeof MatCalendar, typeof MatCalendarBody, typeof MatDatepicker, typeof MatDatepickerContent, typeof MatDatepickerInput, typeof MatDatepickerToggle, typeof MatDatepickerToggleIcon, typeof MatMonthView, typeof MatYearView, typeof MatMultiYearView, typeof MatCalendarHeader, typeof MatDateRangeInput, typeof MatStartDate, typeof MatEndDate, typeof MatDateRangePicker, typeof MatDatepickerActions, typeof MatDatepickerCancel, typeof MatDatepickerApply], [typeof i5.CdkScrollableModule, typeof MatCalendar, typeof MatCalendarBody, typeof MatDatepicker, typeof MatDatepickerContent, typeof MatDatepickerInput, typeof MatDatepickerToggle, typeof MatDatepickerToggleIcon, typeof MatMonthView, typeof MatYearView, typeof MatMultiYearView, typeof MatCalendarHeader, typeof MatDateRangeInput, typeof MatStartDate, typeof MatEndDate, typeof MatDateRangePicker, typeof MatDatepickerActions, typeof MatDatepickerCancel, typeof MatDatepickerApply]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDatepickerModule, never, [typeof MatButtonModule, typeof i2.OverlayModule, typeof i1.A11yModule, typeof i2$1.PortalModule, typeof MatCalendar, typeof MatCalendarBody, typeof MatDatepicker, typeof MatDatepickerContent, typeof MatDatepickerInput, typeof MatDatepickerToggle, typeof MatDatepickerToggleIcon, typeof MatMonthView, typeof MatYearView, typeof MatMultiYearView, typeof MatCalendarHeader, typeof MatDateRangeInput, typeof MatStartDate, typeof MatEndDate, typeof MatDateRangePicker, typeof MatDatepickerActions, typeof MatDatepickerCancel, typeof MatDatepickerApply], [typeof i2$2.BidiModule, typeof i1$1.CdkScrollableModule, typeof MatCalendar, typeof MatCalendarBody, typeof MatDatepicker, typeof MatDatepickerContent, typeof MatDatepickerInput, typeof MatDatepickerToggle, typeof MatDatepickerToggleIcon, typeof MatMonthView, typeof MatYearView, typeof MatMultiYearView, typeof MatCalendarHeader, typeof MatDateRangeInput, typeof MatStartDate, typeof MatEndDate, typeof MatDateRangePicker, typeof MatDatepickerActions, typeof MatDatepickerCancel, typeof MatDatepickerApply]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatDatepickerModule>;
 }
 

package/dialog/index.d.ts

@@ -2,12 +2,11 @@ import { MatDialogRef, MatDialogContainer } from '../dialog.d.js';
 export { AutoFocusTarget, DialogPosition, DialogRole, MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS, MAT_DIALOG_SCROLL_STRATEGY, MatDialog, MatDialogConfig, MatDialogState, _closeDialogVia } from '../dialog.d.js';
 import * as i0 from '@angular/core';
 import { OnInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
-import * as i5 from '@angular/cdk/scrolling';
-import * as i1 from '@angular/cdk/dialog';
+import * as i1 from '@angular/cdk/scrolling';
+import * as i1$1 from '@angular/cdk/dialog';
 import * as i2 from '@angular/cdk/overlay';
-import * as i3 from '@angular/cdk/portal';
-import { MatCommonModule } from '../common-module.d.js';
-import '@angular/cdk/bidi';
+import * as i2$1 from '@angular/cdk/portal';
+import * as i2$2 from '@angular/cdk/bidi';
 import '@angular/cdk/a11y';
 import 'rxjs';
 
@@ -59,7 +58,7 @@ declare class MatDialogTitle extends MatDialogLayoutSection {
  */
 declare class MatDialogContent {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, true, [{ directive: typeof i5.CdkScrollable; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkScrollable; inputs: {}; outputs: {}; }]>;
 }
 /**
  * Container for the bottom action buttons in a dialog.
@@ -78,7 +77,7 @@ declare class MatDialogActions extends MatDialogLayoutSection {
 
 declare class MatDialogModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, never, [typeof i1.DialogModule, typeof i2.OverlayModule, typeof i3.PortalModule, typeof MatCommonModule, typeof MatDialogContainer, typeof MatDialogClose, typeof MatDialogTitle, typeof MatDialogActions, typeof MatDialogContent], [typeof MatCommonModule, typeof MatDialogContainer, typeof MatDialogClose, typeof MatDialogTitle, typeof MatDialogActions, typeof MatDialogContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, never, [typeof i1$1.DialogModule, typeof i2.OverlayModule, typeof i2$1.PortalModule, typeof MatDialogContainer, typeof MatDialogClose, typeof MatDialogTitle, typeof MatDialogActions, typeof MatDialogContent], [typeof i2$2.BidiModule, typeof MatDialogContainer, typeof MatDialogClose, typeof MatDialogTitle, typeof MatDialogActions, typeof MatDialogContent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatDialogModule>;
 }