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

package/core/option/_option-theme.scss

@@ -12,8 +12,8 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 /// Outputs color theme styles for the mat-option.
@@ -24,21 +24,26 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme)
+      );
     }
 
     .mat-accent {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.get-color-tokens($theme, accent));
+      @include token-utils.create-token-values(
+        tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme, accent)
+      );
     }
 
     .mat-warn {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.get-color-tokens($theme, warn));
+      @include token-utils.create-token-values(
+        tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme, warn)
+      );
     }
   }
 }
@@ -48,11 +53,12 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-option.$prefix,
+        tokens-mat-option.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -62,17 +68,24 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-option.$prefix,
+      tokens: tokens-mat-option.get-token-slots(),
+    ),
+  );
 }
 
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-option.$prefix, tokens: tokens-mat-option.get-token-slots()),
-  );
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-option.
@@ -84,8 +97,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -102,7 +114,8 @@
 
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
 }

package/core/ripple/_ripple-theme.scss

@@ -9,18 +9,19 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-ripple.$prefix,
-        tokens-mat-ripple.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-ripple.$prefix,
+        tokens-mat-ripple.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -28,11 +29,12 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-ripple.$prefix,
-        tokens-mat-ripple.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-ripple.$prefix,
+        tokens-mat-ripple.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -40,28 +42,35 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-ripple.$prefix,
-        tokens-mat-ripple.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-ripple.$prefix,
+        tokens-mat-ripple.get-density-tokens($theme)
+      );
     }
   }
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-ripple.$prefix, tokens: tokens-mat-ripple.get-token-slots()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-ripple.$prefix,
+      tokens: tokens-mat-ripple.get-token-slots(),
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -78,9 +87,12 @@
 
 @mixin _theme-from-tokens($tokens) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-        tokens-mat-ripple.$prefix, map.get($tokens, tokens-mat-ripple.$prefix));
+      tokens-mat-ripple.$prefix,
+      map.get($tokens, tokens-mat-ripple.$prefix)
+    );
   }
 }

package/core/ripple/_ripple.scss

@@ -44,7 +44,7 @@
     }
 
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.
-    @include cdk.high-contrast(active, off) {
+    @include cdk.high-contrast {
       display: none;
     }
 

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

@@ -8,44 +8,72 @@
 
 @mixin _palette-styles($theme, $palette-name) {
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
-      tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name));
-    @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,
-      tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name));
+    @include token-utils.create-token-values(
+      tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name)
+    );
+    @include token-utils.create-token-values(
+      tokens-mat-minimal-pseudo-checkbox.$prefix,
+      tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name)
+    );
   }
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  $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, tokens-mat-minimal-pseudo-checkbox.$prefix, $options...);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $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,
+    tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $options...
+  );
   @include token-utils.create-token-values(
-      tokens-mat-full-pseudo-checkbox.$prefix, $mat-full-pseudo-checkbox-tokens);
+    tokens-mat-full-pseudo-checkbox.$prefix,
+    $mat-full-pseudo-checkbox-tokens
+  );
   @include token-utils.create-token-values(
-      tokens-mat-minimal-pseudo-checkbox.$prefix, $mat-minimal-pseudo-checkbox-tokens);
+    tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $mat-minimal-pseudo-checkbox-tokens
+  );
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-pseudo-checkbox.
 /// @param {Map} $theme The theme to generate base styles for.
-@mixin base($theme) {}
+@mixin base($theme) {
+}
 
-/// Outputs the CSS variable values for the given tokens.
-/// @param {Map} $tokens The token values to emit.
-@mixin overrides($tokens: ()) {
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
   $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots();
   $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots();
 
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens),
-    (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens),
+  @return (
+    (
+      namespace: tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens: $full-pseudo-checkbox-tokens,
+      prefix: 'full-',
+    ),
+    (
+      namespace: tokens-mat-minimal-pseudo-checkbox.$prefix,
+      tokens: $minimal-pseudo-checkbox-tokens,
+      prefix: 'minimal-',
+    ),
   );
 }
 
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 /// Outputs color theme styles for the mat-pseudo-checkbox.
 /// @param {Map} $theme The theme to generate color styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
@@ -54,18 +82,18 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
-    .mat-primary {
-      @include _palette-styles($theme, primary);
-    }
-
+  } @else {
     // 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);
     }
@@ -95,8 +123,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);

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,11 +74,12 @@ $icon-margin: 16px !default;
     // Invert the arrow direction.
     polygon {
       transform: scaleX(-1);
+      transform-origin: center;
     }
   }
 
   // Fix for Chromium-based browsers blending in the `currentColor` with the background.
-  @include cdk.high-contrast(active, off) {
+  @include cdk.high-contrast {
     fill: CanvasText;
   }
 }

package/core/style/_sass-utils.scss

@@ -77,6 +77,10 @@ $use-system-typography-variables: false;
       $opacity: ($opacity * 100) + '%';
     }
 
+    @if (is-css-var-name($opacity)) {
+      $opacity: calc(var($opacity) * 100%);
+    }
+
     @if (is-css-var-name($color)) {
       $color: var($color);
     }

package/core/theming/_all-theme.scss

@@ -36,6 +36,7 @@
 @use '../../tree/tree-theme';
 @use '../../snack-bar/snack-bar-theme';
 @use '../../form-field/form-field-theme';
+@use '../../timepicker/timepicker-theme';
 @use './theming';
 
 // Create a theme.
@@ -79,6 +80,7 @@
     @include sort-theme.theme($theme);
     @include toolbar-theme.theme($theme);
     @include tree-theme.theme($theme);
+    @include timepicker-theme.theme($theme);
   }
 }
 
@@ -120,6 +122,7 @@
   @include sort-theme.base($theme);
   @include toolbar-theme.base($theme);
   @include tree-theme.base($theme);
+  @include timepicker-theme.base($theme);
 }
 
 // @deprecated Use `all-component-themes`.

package/core/theming/_config-validation.scss

@@ -29,7 +29,7 @@
 /// Validates that the given object is an M3 palette.
 /// @param {*} $palette The object to test
 /// @return {Boolean|null} null if it is a valid M3 palette, else true.
-@function _validate-palette($palette) {
+@function validate-palette($palette) {
   @if not meta.type-of($palette) == 'map' {
     @return true;
   }
@@ -100,15 +100,15 @@
     );
   }
   @if $config and map.has-key($config, theme-type) and
-      not list.index((light, dark), map.get($config, theme-type)) {
+      not list.index((light, dark, color-scheme), map.get($config, theme-type)) {
     @return (
-      #{'Expected $config.theme-type to be one of: light, dark. Got:'}
+      #{'Expected $config.theme-type to be one of: light, dark, color-scheme. Got:'}
       map.get($config, theme-type)
     );
   }
   @each $palette in (primary, secondary, tertiary) {
     @if $config and map.has-key($config, $palette) {
-      $err: _validate-palette(map.get($config, $palette));
+      $err: validate-palette(map.get($config, $palette));
       @if $err {
         @return (
           #{'Expected $config.#{$palette} to be a valid M3 palette. Got:'}

package/core/theming/_definition.scss

@@ -6,6 +6,16 @@
 @use '../tokens/m3-tokens';
 @use './config-validation';
 
+// Prefix used for component token fallback variables, e.g.
+// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+$system-fallback-prefix: mat-sys;
+
+// Default system level prefix to use when directly calling the `system-level-*` mixins.
+// Prefix used for component token fallback variables, e.g.
+// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+// TODO: Remove this variable after internal clients are migrated from "sys"
+$system-level-prefix: mat-sys;
+
 /// Map key used to store internals of theme config.
 $internals: _mat-theming-internals-do-not-access;
 /// The theme version of generated themes.
@@ -40,7 +50,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;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
   sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
 
   @return (
@@ -76,7 +86,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;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
   sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false;
 
   @return (