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

package/_index.scss

@@ -127,7 +127,7 @@
 @forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography,
   slider-density, slider-base, slider-overrides;
 @forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color,
-  snack-bar-typography, snack-bar-density, snack-bar-base, bar-overrides;
+  snack-bar-typography, snack-bar-density, snack-bar-base, snack-bar-overrides;
 @forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density,
   sort-base, sort-overrides;
 @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color,

package/autocomplete/index.d.ts

@@ -289,6 +289,9 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _closingActionsSubscription;
     /** Subscription to viewport size changes. */
     private _viewportSubscription;
+    /** Implements BreakpointObserver to be used to detect handset landscape */
+    private _breakpointObserver;
+    private _handsetLandscapeSubscription;
     /**
      * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,
      * closed autocomplete from being reopened if the user switches to another browser tab and then
@@ -340,7 +343,7 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     autocompleteDisabled: boolean;
     private _initialized;
     private _injector;
-    constructor(_element: ElementRef<HTMLInputElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef, _zone: NgZone, _changeDetectorRef: ChangeDetectorRef, scrollStrategy: any, _dir: Directionality | null, _formField: MatFormField | null, _document: any, _viewportRuler: ViewportRuler, _defaults?: MatAutocompleteDefaultOptions | null | undefined);
+    constructor(_element: ElementRef<HTMLInputElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef, _zone: NgZone, _changeDetectorRef: ChangeDetectorRef, scrollStrategy: any, _dir: Directionality | null, _formField: MatFormField | null, _document: any, _viewportRuler: ViewportRuler, _defaults?: (MatAutocompleteDefaultOptions | null) | undefined);
     /** Class to apply to the panel when it's above the input. */
     private _aboveClass;
     ngAfterViewInit(): void;

package/badge/index.d.ts

@@ -25,7 +25,10 @@ export declare class MatBadge implements OnInit, OnDestroy {
     private _ariaDescriber;
     private _renderer;
     private _animationMode?;
-    /** The color of the badge. Can be `primary`, `accent`, or `warn`. */
+    /**
+     * The color of the badge. Can be `primary`, `accent`, or `warn`.
+     * Not recommended in M3, for more information see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
+     */
     get color(): ThemePalette;
     set color(value: ThemePalette);
     private _color;

package/bottom-sheet/index.d.ts

@@ -54,7 +54,7 @@ export declare class MatBottomSheet implements OnDestroy {
     /** Reference to the currently opened bottom sheet. */
     get _openedBottomSheetRef(): MatBottomSheetRef<any> | null;
     set _openedBottomSheetRef(value: MatBottomSheetRef<any> | null);
-    constructor(_overlay: Overlay, injector: Injector, _parentBottomSheet: MatBottomSheet, _defaultOptions?: MatBottomSheetConfig<any> | undefined);
+    constructor(_overlay: Overlay, injector: Injector, _parentBottomSheet: MatBottomSheet, _defaultOptions?: MatBottomSheetConfig | undefined);
     /**
      * Opens a bottom sheet containing the given component.
      * @param component Type of the component to load into the bottom sheet.
@@ -148,7 +148,6 @@ export declare class MatBottomSheetContainer extends CdkDialogContainer implemen
     _onAnimationDone(event: AnimationEvent_2): void;
     _onAnimationStart(event: AnimationEvent_2): void;
     protected _captureInitialFocus(): void;
-    private _toggleClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, { optional: true; }, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;
 }

package/button/index.d.ts

@@ -114,7 +114,13 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
      */
     get ripple(): MatRipple;
     set ripple(v: MatRipple);
-    /** Theme color palette of the button */
+    /**
+     * Theme color of the button. This API is supported in M2 themes only, it has
+     * no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
+     */
     color?: string | null;
     /** Whether the ripple effect is disabled or not. */
     get disableRipple(): boolean;

package/checkbox/index.d.ts

@@ -109,7 +109,13 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     _labelElement: ElementRef<HTMLInputElement>;
     /** Tabindex for the checkbox. */
     tabIndex: number;
-    /** Palette color of the checkbox. */
+    /**
+     * Theme color of the checkbox. This API is supported in M2 themes only, it
+     * has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
+     */
     color: string | undefined;
     /**
      * Reference to the MatRipple instance of the checkbox.
@@ -211,7 +217,11 @@ export declare type MatCheckboxClickAction = 'noop' | 'check' | 'check-indetermi
 
 /** Default `mat-checkbox` options that can be overridden. */
 export declare interface MatCheckboxDefaultOptions {
-    /** Default theme color palette to be used for checkboxes. */
+    /**
+     * Default theme color palette to be used for checkboxes. This API is supported in M2 themes
+     * only, it has no effect in M3 themes. For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants
+     */
     color?: ThemePalette;
     /** Default checkbox click action for checkboxes. */
     clickAction?: MatCheckboxClickAction;

package/chips/index.d.ts

@@ -13,6 +13,7 @@ import { FormGroupDirective } from '@angular/forms';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
+import { Injector } from '@angular/core';
 import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatRipple } from '@angular/material/core';
@@ -184,7 +185,13 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     get value(): any;
     set value(value: any);
     protected _value: any;
-    /** Theme color palette of the chip. */
+    /**
+     * Theme color of the chip. This API is supported in M2 themes only, it has no
+     * effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
+     */
     color?: string | null;
     /**
      * Determines whether or not the chip displays the remove styling and emits (removed) events.
@@ -226,7 +233,7 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
      * Used to improve initial load time of large applications.
      */
     _rippleLoader: MatRippleLoader;
-    private _injector;
+    protected _injector: Injector;
     constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -354,7 +361,7 @@ export declare interface MatChipEvent {
  * An extension of the MatChipSet component used with MatChipRow chips and
  * the matChipInputFor directive.
  */
-export declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterViewInit, ControlValueAccessor, DoCheck, MatFormFieldControl<any>, OnDestroy {
+export declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterViewInit, ControlValueAccessor, DoCheck, MatFormFieldControl<any>, OnDestroy, OnInit {
     ngControl: NgControl;
     /**
      * Implemented as part of MatFormFieldControl.
@@ -447,6 +454,7 @@ export declare class MatChipGrid extends MatChipSet implements AfterContentInit,
     get errorState(): boolean;
     set errorState(value: boolean);
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, ngControl: NgControl);
+    ngOnInit(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngDoCheck(): void;

package/core/_core-theme.scss

@@ -1,18 +1,17 @@
 @use './theming/theming';
 @use './theming/inspection';
 @use './theming/validation';
-@use './style/private';
 @use './ripple/ripple-theme';
 @use './option/option-theme';
 @use './option/optgroup-theme';
 @use './selection/pseudo-checkbox/pseudo-checkbox-theme';
-@use './style/elevation';
 @use './style/sass-utils';
 @use './typography/typography';
 @use './tokens/token-utils';
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/m2/mat/ripple' as tokens-mat-ripple;
 @use './tokens/m2/mat/option' as tokens-mat-option;
+@use './tokens/m2/mat/optgroup' as tokens-mat-optgroup;
 @use './tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
 @use './tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
 
@@ -41,6 +40,10 @@ $_has-inserted-loaded-marker: false;
     @include option-theme.base($theme);
     @include optgroup-theme.base($theme);
     @include pseudo-checkbox-theme.base($theme);
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-app.$prefix,
+        tokens-mat-app.get-unthemable-tokens());
+    }
   }
 
   // The marker is a concrete style no matter which Material version we're targeting.
@@ -60,18 +63,6 @@ $_has-inserted-loaded-marker: false;
       @include token-utils.create-token-values(tokens-mat-app.$prefix,
         tokens-mat-app.get-color-tokens($theme));
     }
-
-    // Provides external CSS classes for each elevation value. Each CSS class is formatted as
-    // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
-    // elevated.
-    @for $zValue from 0 through 24 {
-      $selector: elevation.$prefix + $zValue;
-      // 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, $theme);
-      }
-    }
   }
 }
 
@@ -149,6 +140,8 @@ $_has-inserted-loaded-marker: false;
   $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...);
   $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...);
   $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);
+  $mat-optgroup-tokens:
+    token-utils.get-tokens-for($tokens, tokens-mat-optgroup.$prefix, $options...);
   $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
     tokens-mat-full-pseudo-checkbox.$prefix, $options...);
   $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
@@ -157,6 +150,7 @@ $_has-inserted-loaded-marker: false;
   @include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens);
   @include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens);
   @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
+  @include token-utils.create-token-values(tokens-mat-optgroup.$prefix, $mat-optgroup-tokens);
   @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
     $mat-full-pseudo-checkbox-tokens);
   @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,

package/core/_core.scss

@@ -2,6 +2,7 @@
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
 @use './ripple/ripple';
+@use './style/elevation';
 @use './focus-indicators/private';
 @use './mdc-helpers/mdc-helpers';
 
@@ -18,13 +19,26 @@
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `mat-sidenav-container`.
   @at-root {
-    .mat-app-background {
-      @include mdc-helpers.disable-mdc-fallback-declarations {
-        @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
-          // Note: we need to emit fallback values here to avoid errors in internal builds.
+    // Note: we need to emit fallback values here to avoid errors in internal builds.
+    @include mdc-helpers.disable-mdc-fallback-declarations {
+      @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
+        .mat-app-background {
           @include token-utils.create-token-slot(background-color, background-color, transparent);
           @include token-utils.create-token-slot(color, text-color, inherit);
         }
+
+        // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+        // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element
+        // is elevated.
+        @for $zValue from 0 through 24 {
+          $selector: elevation.$prefix + $zValue;
+          // 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 token-utils.create-token-slot(box-shadow, 'elevation-shadow-level-#{$zValue}',
+              none);
+          }
+        }
       }
     }
   }

package/core/index.d.ts

@@ -970,7 +970,7 @@ export declare class NativeDateAdapter extends DateAdapter<Date> {
      * invalid date for all other values.
      */
     deserialize(value: any): Date | null;
-    isDateInstance(obj: any): boolean;
+    isDateInstance(obj: any): obj is Date;
     isValid(date: Date): boolean;
     invalid(): Date;
     /** Creates a date but allows the month and date to overflow. */

package/core/m2/_typography.scss

@@ -48,7 +48,7 @@
 /// @param {Map} $input Configuration for the "input" typographic level.
 /// @returns {Map} A typography config for the application.
 ///
-/// @deprecated Use `mat.m2-define-typography-config` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
+/// @deprecated Use `mat.m2-define-typography-config` instead. See https://v17.material.angular.io/guide/mdc-migration for information about migrating.
 /// @breaking-change 17.0.0
 @function define-legacy-typography-config(
   $font-family:   'Roboto, "Helvetica Neue", sans-serif',

package/core/theming/_config-validation.scss

@@ -89,7 +89,7 @@
   @if $err {
     @return (#{'$config should be a color configuration object. Got:'} $config);
   }
-  $allowed: (theme-type, primary, tertiary, use-system-variables);
+  $allowed: (theme-type, primary, tertiary, use-system-variables, system-variables-prefix);
   $err: validation.validate-allowed-values(map.keys($config or ()), $allowed...);
   @if $err {
     @return (
@@ -134,7 +134,8 @@
     bold-weight,
     medium-weight,
     regular-weight,
-    use-system-variables
+    use-system-variables,
+    system-variables-prefix
   );
   $err: validation.validate-allowed-values(map.keys($config or ()), $allowed...);
   @if $err {

package/core/theming/_definition.scss

@@ -40,6 +40,7 @@ $theme-version: 1;
   $type: map.get($config, theme-type) or light;
   $primary: map.get($config, primary) or palettes.$violet-palette;
   $tertiary: map.get($config, tertiary) or $primary;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
   sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
 
   @return (
@@ -55,7 +56,7 @@ $theme-version: 1;
         error: map.get($primary, error),
       ),
       color-tokens: m3-tokens.generate-color-tokens(
-          $type, $primary, $tertiary, map.get($primary, error))
+          $type, $primary, $tertiary, map.get($primary, error), $system-variables-prefix)
     )
   );
 }
@@ -74,6 +75,7 @@ $theme-version: 1;
   $bold: map.get($config, bold-weight) or 700;
   $medium: map.get($config, medium-weight) or 500;
   $regular: map.get($config, regular-weight) or 400;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
   sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false;
 
   @return (
@@ -87,7 +89,7 @@ $theme-version: 1;
         regular: $regular,
       ),
       typography-tokens: m3-tokens.generate-typography-tokens(
-          $brand, $plain, $bold, $medium, $regular)
+          $brand, $plain, $bold, $medium, $regular, $system-variables-prefix)
     )
   );
 }

package/core/theming/_palettes.scss

@@ -12,6 +12,8 @@
 /// The Material Design spec references some neutral hues that are not generated by
 /// https://m3.material.io/theme-builder. For now we use this function to estimate the missing hues
 /// by blending the nearest hues that are generated.
+/// Note: when updating, the corresponding logic in the theme generation schematic should be
+/// updated as well. See `src/material/schematics/ng-generate/m3-theme/index.ts#patchMissingHues`
 @function _patch-missing-hues($palette) {
   $neutral: map.get($palette, neutral);
   $palette: map.set($palette, neutral, 4, _estimate-hue($neutral, 4, 0, 10));

package/core/tokens/_density.scss

@@ -120,6 +120,7 @@ $_density-tokens: (
     container-size: (56px, 52px, 48px, 40px),
     form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
     form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
+    touch-target-display: (block, block, none, none),
   ),
   (mat, radio): (
     touch-target-display: (block, block, none, none),