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

package/_index.scss

@@ -18,9 +18,10 @@
 @forward './core/typography/typography' show typography-hierarchy;
 @forward './core/typography/typography-utils' show font-shorthand;
 @forward './core/tokens/m2' show m2-tokens-from-theme;
-@forward './core/tokens/m3-tokens' show system-level-colors,
+@forward './core/tokens/m3-system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state;
+@forward './core/tokens/m3-system' as private-experimental-* show private-experimental-theme;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;
@@ -37,8 +38,8 @@
 // Structural
 @forward './core/core' show core;
 @forward './core/ripple/ripple' show ripple;
-@forward './core/focus-indicators/focus-indicators' show strong-focus-indicators;
-@forward './core/focus-indicators/private' as private-strong-focus-indicators-*;
+@forward './core/focus-indicators/private' show strong-focus-indicators,
+  strong-focus-indicators-color, strong-focus-indicators-theme;
 @forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition;
 
 // Theme bundles
@@ -60,8 +61,6 @@
   pseudo-checkbox-base, pseudo-checkbox-overrides;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
   pseudo-checkbox-legacy-size;
-@forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show
-  strong-focus-indicators-color, strong-focus-indicators-theme;
 @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme,
   autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base,
   autocomplete-overrides;

package/button/_button-base.scss

@@ -48,11 +48,11 @@
   }
 
   // The focus indicator should match the bounds of the entire button.
-  .mat-mdc-focus-indicator {
+  .mat-focus-indicator {
     @include layout-common.fill();
   }
 
-  &:focus .mat-mdc-focus-indicator::before {
+  &:focus .mat-focus-indicator::before {
     content: '';
   }
 }
@@ -141,8 +141,6 @@
   @include token-utils.use-tokens($prefix, $slots) {
     $icon-spacing: token-utils.get-token-variable(icon-spacing, true);
     $icon-offset: token-utils.get-token-variable(icon-offset, true);
-    $horizontal-padding: token-utils.get-token-variable(horizontal-padding, true);
-    padding: 0 $horizontal-padding;
 
     @if ($has-with-icon-padding) {
       $with-icon-horizontal-padding:

package/button/index.d.ts

@@ -4,7 +4,6 @@ import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
-import { MatRipple } from '@angular/material/core';
 import { MatRippleLoader } from '@angular/material/core';
 import { NgZone } from '@angular/core';
 import { OnDestroy } from '@angular/core';
@@ -104,16 +103,9 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
      * Handles the lazy creation of the MatButton ripple.
      * Used to improve initial load time of large applications.
      */
-    _rippleLoader: MatRippleLoader;
+    protected _rippleLoader: MatRippleLoader;
     /** Whether this button is a FAB. Used to apply the correct class on the ripple. */
-    _isFab: boolean;
-    /**
-     * Reference to the MatRipple instance of the button.
-     * @deprecated Considered an implementation detail. To be removed.
-     * @breaking-change 17.0.0
-     */
-    get ripple(): MatRipple;
-    set ripple(v: MatRipple);
+    protected _isFab: boolean;
     /**
      * Theme color of the button. This API is supported in M2 themes only, it has
      * no effect in M3 themes.

package/checkbox/_checkbox-common.scss

@@ -175,10 +175,10 @@ $_fallback-size: 40px;
       // Always apply the color since the element becomes `opacity: 0`
       // when unchecked. This makes the animation look better.
       @include token-utils.create-token-slot(color, selected-checkmark-color);
+    }
 
-      @include cdk.high-contrast(active, off) {
-        color: CanvasText;
-      }
+    @include cdk.high-contrast(active, off) {
+      color: CanvasText;
     }
   }
 
@@ -214,15 +214,15 @@ $_fallback-size: 40px;
     transition: opacity $_transition-duration $_exit-curve,
                 transform $_transition-duration $_exit-curve;
 
-    @include cdk.high-contrast(active, off) {
-      margin: 0 1px;
-    }
-
     @include token-utils.use-tokens($prefix, $slots) {
       // Always apply the color since the element becomes `opacity: 0`
       // when unchecked. This makes the animation look better.
       @include token-utils.create-token-slot(border-color, selected-checkmark-color);
     }
+
+    @include cdk.high-contrast(active, off) {
+      margin: 0 1px;
+    }
   }
 
   @include token-utils.use-tokens($prefix, $slots) {

package/checkbox/index.d.ts

@@ -9,7 +9,6 @@ import { FocusableOption } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import * as i3 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
-import { MatRipple } from '@angular/material/core';
 import { NgZone } from '@angular/core';
 import { OnChanges } from '@angular/core';
 import { Provider } from '@angular/core';
@@ -119,12 +118,6 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     color: string | undefined;
     /** Whether the checkbox should remain interactive when it is disabled. */
     disabledInteractive: boolean;
-    /**
-     * Reference to the MatRipple instance of the checkbox.
-     * @deprecated Considered an implementation detail. To be removed.
-     * @breaking-change 17.0.0
-     */
-    ripple: MatRipple;
     /**
      * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
      * @docs-private

package/chips/index.d.ts

@@ -16,8 +16,6 @@ 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';
-import { MatRippleLoader } from '@angular/material/core';
 import { NgControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { NgZone } from '@angular/core';
@@ -217,20 +215,13 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     trailingIcon: MatChipTrailingIcon;
     /** The chip's trailing remove icon. */
     removeIcon: MatChipRemove;
-    /**
-     * Reference to the MatRipple instance of the chip.
-     * @deprecated Considered an implementation detail. To be removed.
-     * @breaking-change 17.0.0
-     */
-    get ripple(): MatRipple;
-    set ripple(v: MatRipple);
     /** Action receiving the primary set of user interactions. */
     primaryAction: MatChipAction;
     /**
      * Handles the lazy creation of the MatChip ripple.
      * Used to improve initial load time of large applications.
      */
-    _rippleLoader: MatRippleLoader;
+    private _rippleLoader;
     protected _injector: Injector;
     constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined);
     ngOnInit(): void;

package/core/_core.scss

@@ -1,19 +1,21 @@
 @use '@angular/cdk';
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
-@use './ripple/ripple';
 @use './style/elevation';
 @use './focus-indicators/private';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin core() {
-  @include ripple.ripple();
+  // TODO: Move ripple styles to be dynamically loaded instead of in core.
+  // This variable is used as a fallback for the ripple element's
+  // background color. However, if it isn't defined anywhere, then MSS
+  // complains in its verification stage.
+  html {
+    --mat-app-on-surface: initial;
+  }
+
   @include cdk.a11y-visually-hidden();
-  @include cdk.overlay();
-  @include cdk.text-field-autosize();
-  @include cdk.text-field-autofill();
-  @include private.structural-styling('mat');
-  @include private.structural-styling('mat-mdc');
+  @include private.structural-styling();
 
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `mat-sidenav-container`.

package/core/focus-indicators/_private.scss

@@ -12,31 +12,19 @@ $default-border-color: transparent;
 $default-border-radius: 4px;
 
 // Mixin that renders the focus indicator structural styles.
-@mixin structural-styling($prefix) {
-  .#{$prefix}-focus-indicator {
+@mixin structural-styling() {
+  .mat-focus-indicator {
     position: relative;
 
     &::before {
       @include layout-common.fill();
       box-sizing: border-box;
       pointer-events: none;
-      display: var(--#{$prefix}-focus-indicator-display, none); // Hide the indicator by default.
-      border: var(
-          --#{$prefix}-focus-indicator-border-width,
-          #{$default-border-width}
-        )
-        var(
-          --#{$prefix}-focus-indicator-border-style,
-          #{$default-border-style}
-        )
-        var(
-          --#{$prefix}-focus-indicator-border-color,
-          #{$default-border-color}
-        );
-      border-radius: var(
-        --#{$prefix}-focus-indicator-border-radius,
-        #{$default-border-radius}
-      );
+      display: var(--mat-focus-indicator-display, none); // Hide the indicator by default.
+      border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
+      border-style: var(--mat-focus-indicator-border-style, #{$default-border-style});
+      border-color: var(--mat-focus-indicator-border-color, #{$default-border-color});
+      border-radius: var(--mat-focus-indicator-border-radius, #{$default-border-radius});
     }
 
     // By default, render the focus indicator when the focus indicator host element takes focus.
@@ -48,7 +36,7 @@ $default-border-radius: 4px;
 
   // Enable the indicator in high contrast mode.
   @include cdk.high-contrast(active, off) {
-    @include customize-focus-indicators((display: block), $prefix);
+    @include _customize-focus-indicators((display: block));
   }
 }
 
@@ -62,18 +50,18 @@ $default-border-radius: 4px;
 }
 
 // Mixin that dedups CSS variables for the strong-focus-indicators mixin.
-@mixin customize-focus-indicators($config, $prefix) {
+@mixin _customize-focus-indicators($config) {
   $border-style: map.get($config, border-style);
   $border-width: map.get($config, border-width);
   $border-radius: map.get($config, border-radius);
   $border-color: map.get($config, border-color);
   $display: map.get($config, display);
   $map: (
-    '#{$prefix}-focus-indicator-border-style': $border-style,
-    '#{$prefix}-focus-indicator-border-width': $border-width,
-    '#{$prefix}-focus-indicator-border-radius': $border-radius,
-    '#{$prefix}-focus-indicator-border-color': $border-color,
-    '#{$prefix}-focus-indicator-display': $display,
+    'mat-focus-indicator-border-style': $border-style,
+    'mat-focus-indicator-border-width': $border-width,
+    'mat-focus-indicator-border-radius': $border-radius,
+    'mat-focus-indicator-border-color': $border-color,
+    'mat-focus-indicator-display': $display,
   );
 
   @if (&) {
@@ -91,48 +79,29 @@ $default-border-radius: 4px;
 @mixin strong-focus-indicators($config: ()) {
   // Default focus indicator config.
   $default-config: (
-      border-color: black,
-      display: block,
+    border-color: black,
+    display: block,
   );
 
   // Merge default config with user config.
   $config: map.merge($default-config, $config);
 
-  @include customize-focus-indicators($config, 'mat');
-}
-
-@mixin mdc-strong-focus-indicators($config: ()) {
-  // Default focus indicator config.
-  $default-config: (
-      border-color: black,
-      display: block,
-  );
-
-  // Merge default config with user config.
-  $config: map.merge($default-config, $config);
-
-  @include customize-focus-indicators($config, 'mat-mdc');
+  @include _customize-focus-indicators($config);
 }
 
 @mixin strong-focus-indicators-color($theme-or-color) {
   @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat');
+    @include _customize-focus-indicators((border-color: $theme-or-color));
   }
   @else {
     $border-color: inspection.get-theme-color($theme-or-color, primary);
-    @include customize-focus-indicators((
-        border-color: $border-color
-    ), 'mat');
+    @include _customize-focus-indicators((border-color: $border-color));
   }
 }
 
 @mixin strong-focus-indicators-theme($theme-or-color) {
   @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat');
+    @include _customize-focus-indicators((border-color: $theme-or-color));
   }
   @else {
     @include theming.private-check-duplicate-theme-styles($theme-or-color, 'mat-focus-indicators') {
@@ -142,33 +111,3 @@ $default-border-radius: 4px;
     }
   }
 }
-
-@mixin mdc-strong-focus-indicators-color($theme-or-color) {
-  @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat-mdc');
-  }
-  @else {
-    $border-color: inspection.get-theme-color($theme-or-color, primary);
-    @include customize-focus-indicators((
-        border-color: $border-color
-    ), 'mat-mdc');
-  }
-}
-
-@mixin mdc-strong-focus-indicators-theme($theme-or-color) {
-  @if meta.type-of($theme-or-color) == 'color' {
-    @include customize-focus-indicators((
-        border-color: $theme-or-color
-    ), 'mat-mdc');
-  }
-  @else {
-    @include theming.private-check-duplicate-theme-styles(
-        $theme-or-color, 'mat-mdc-focus-indicators') {
-      @if inspection.theme-has($theme-or-color, color) {
-        @include mdc-strong-focus-indicators-color($theme-or-color);
-      }
-    }
-  }
-}

package/core/index.d.ts

@@ -10,6 +10,7 @@ import { HighContrastModeDetector } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/bidi';
 import { InjectionToken } from '@angular/core';
+import { Injector } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { NgZone } from '@angular/core';
@@ -431,6 +432,9 @@ declare namespace i1_2 {
 
 declare namespace i1_3 {
     export {
+        RippleRenderer,
+        RippleTarget,
+        defaultRippleAnimationConfig,
         MatRippleModule,
         RippleGlobalOptions,
         MAT_RIPPLE_GLOBAL_OPTIONS,
@@ -438,10 +442,7 @@ declare namespace i1_3 {
         RippleState,
         RippleConfig,
         RippleAnimationConfig,
-        RippleRef,
-        RippleTarget,
-        defaultRippleAnimationConfig,
-        RippleRenderer
+        RippleRef
     }
 }
 
@@ -799,7 +800,7 @@ export declare class MatRipple implements OnInit, OnDestroy, RippleTarget {
     private _globalOptions;
     /** @docs-private Whether ripple directive is initialized and the input bindings are set. */
     _isInitialized: boolean;
-    constructor(_elementRef: ElementRef<HTMLElement>, ngZone: NgZone, platform: Platform, globalOptions?: RippleGlobalOptions, _animationMode?: string | undefined);
+    constructor(_elementRef: ElementRef<HTMLElement>, ngZone: NgZone, platform: Platform, globalOptions?: RippleGlobalOptions, _animationMode?: string | undefined, injector?: Injector);
     ngOnInit(): void;
     ngOnDestroy(): void;
     /** Fades out all currently showing ripple elements. */
@@ -832,7 +833,7 @@ export declare class MatRipple implements OnInit, OnDestroy, RippleTarget {
      * @param config Optional ripple configuration for the manual ripple.
      */
     launch(x: number, y: number, config?: RippleConfig): RippleRef;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatRipple, [null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatRipple, [null, null, null, { optional: true; }, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatRipple, "[mat-ripple], [matRipple]", ["matRipple"], { "color": { "alias": "matRippleColor"; "required": false; }; "unbounded": { "alias": "matRippleUnbounded"; "required": false; }; "centered": { "alias": "matRippleCentered"; "required": false; }; "radius": { "alias": "matRippleRadius"; "required": false; }; "animation": { "alias": "matRippleAnimation"; "required": false; }; "disabled": { "alias": "matRippleDisabled"; "required": false; }; "trigger": { "alias": "matRippleTrigger"; "required": false; }; }, {}, never, never, true, never>;
 }
 
@@ -864,8 +865,6 @@ export declare class MatRippleLoader implements OnDestroy {
         centered?: boolean;
         disabled?: boolean;
     }): void;
-    /** Returns the ripple instance for the given host element. */
-    getRipple(host: HTMLElement): MatRipple | undefined;
     /** Sets the disabled state on the ripple instance corresponding to the given host element. */
     setDisabled(host: HTMLElement, disabled: boolean): void;
     /**
@@ -875,7 +874,6 @@ export declare class MatRippleLoader implements OnDestroy {
     private _onInteraction;
     /** Creates a MatRipple and appends it to the given element. */
     private _createRipple;
-    attachRipple(host: HTMLElement, ripple: MatRipple): void;
     destroyRipple(host: HTMLElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRippleLoader, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatRippleLoader>;
@@ -1108,7 +1106,7 @@ export declare class RippleRenderer implements EventListenerObject {
      */
     private _containerRect;
     private static _eventManager;
-    constructor(_target: RippleTarget, _ngZone: NgZone, elementOrElementRef: HTMLElement | ElementRef<HTMLElement>, _platform: Platform);
+    constructor(_target: RippleTarget, _ngZone: NgZone, elementOrElementRef: HTMLElement | ElementRef<HTMLElement>, _platform: Platform, injector?: Injector);
     /**
      * Fades in a ripple at the given coordinates.
      * @param x Coordinate within the element, along the X axis at which to start the ripple.

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -56,16 +56,17 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
-    .mat-primary {
-      @include _palette-styles($theme, primary);
-    }
-
     // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
     // theme from their parent, rather than implementing their own theming, which is why we
     // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
     // in order to allow for the color to be overwritten if the checkbox is inside a parent that
     // has `mat-accent` and is placed inside another parent that has `mat-primary`.
     @include _palette-styles($theme, accent);
+
+    .mat-primary {
+      @include _palette-styles($theme, primary);
+    }
+
     .mat-accent {
       @include _palette-styles($theme, accent);
     }

package/core/style/_elevation.scss

@@ -110,7 +110,7 @@ $_ambient-map: (
 // <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
 //
 // For an explanation of the design behind how elevation is implemented, see the design doc at
-// https://goo.gl/Kq0k9Z.
+// https://docs.google.com/document/d/1W3NGSLqDZzjbBBLW2C6y_6NUxtvdZAVaJvg58LY3Q0E/edit
 
 // The default duration value for elevation transitions.
 $transition-duration: 280ms !default;

package/core/style/_list-common.scss

@@ -33,14 +33,14 @@
 
 // This mixin provides base styles for the wrapper around mat-line elements in a list.
 @mixin wrapper-base() {
-  @include normalize-text();
-
   display: flex;
   flex-direction: column;
   flex: auto;
   box-sizing: border-box;
   overflow: hidden;
 
+  @include normalize-text();
+
   // Must remove wrapper when lines are empty or it takes up horizontal
   // space and pushes other elements to the right.
   &:empty {

package/core/style/_menu-common.scss

@@ -74,6 +74,7 @@ $icon-margin: 16px !default;
     // Invert the arrow direction.
     polygon {
       transform: scaleX(-1);
+      transform-origin: center;
     }
   }