Merge branch 'angular:main' into talkback-double-swipe-issue-fix

.ng-dev/google-sync-config.json

@@ -33,7 +33,6 @@
     "src/material/module.ts",
     "src/material/core/index.ts",
     "src/material/core/theming/tests/**/*",
-    "src/material/core/tokens/tests/**",
     "src/material/expansion/index.ts",
     "src/material-experimental/theming/_format-tokens.scss",
     "**/*import.scss"

CHANGELOG.md

@@ -1,3 +1,56 @@
+<a name="18.1.1"></a>
+# 18.1.1 "tantalum-tale" (2024-07-17)
+### cdk
+| Commit | Type | Description |
+| -- | -- | -- |
+| [ca634cb7b](https://github.com/angular/components/commit/ca634cb7ba6800b2dc23b15b319d8aef6ede64df) | fix | **drag-drop:** remove preview after animate to placeholder animation completes ([#29439](https://github.com/angular/components/pull/29439)) |
+### material
+| Commit | Type | Description |
+| -- | -- | -- |
+| [b7959c241](https://github.com/angular/components/commit/b7959c241d56ebfbcfb09c2fdce12ebdc6e2d6ad) | fix | **button:** support palettes for icon button in M3 ([#29433](https://github.com/angular/components/pull/29433)) |
+| [ffe1c35c0](https://github.com/angular/components/commit/ffe1c35c0b2b59acfbc49bfc345e477f680e1f44) | fix | **chips:** fix focus issue ([#29427](https://github.com/angular/components/pull/29427)) |
+| [57cc0b04b](https://github.com/angular/components/commit/57cc0b04b4be19b3cba08ae509e066f7ba40e61d) | fix | **core:** require theme for option typography ([#29416](https://github.com/angular/components/pull/29416)) |
+| [2e5e415ec](https://github.com/angular/components/commit/2e5e415ec573b2fd6593b116429080fbe7b24dc2) | fix | **tabs:** prevent tab header from collapsing when empty inside a drop list ([#29418](https://github.com/angular/components/pull/29418)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
+<a name="18.2.0-next.1"></a>
+# 18.2.0-next.1 "osmium-opal" (2024-07-17)
+## Deprecations
+### material
+- Tree controller deprecated. Use one of levelAccessor or childrenAccessor instead. To be removed in a future version.
+   * BaseTreeControl, TreeControl, FlatTreeControl, and NestedTreeControl deprecated
+   * CdkTree#treeControl deprecated. Provide one of CdkTree#levelAccessor or CdkTree#childrenAccessor instead.
+   * MatTreeFlattener deprecated. Use MatTree#childrenAccessor and MatTreeNode#isExpandable instead.
+   * MatTreeFlatDataSource deprecated. Use one of levelAccessor or childrenAccessor instead of TreeControl.
+
+  Note when upgrading: isExpandable works differently on Trees using treeControl than trees using childrenAccessor or levelAccessor. Nodes on trees that have a treeControl are expandable by default. Nodes on trees using childrenAccessor or levelAccessor are *not* expandable by default. Provide isExpandable to override default behavior.
+- Setting tabindex of tree nodes deprecated. By default, Tree ignores tabindex passed to tree nodes.
+   * MatTreeNode#tabIndex deprecated. MatTreeNode ignores Input tabIndex and manages its own focus behavior.
+   * MatTreeNode#defaultTabIndex deprecated. MatTreeNode ignores defaultTabIndex and manages its own focus behavior.
+   * MatNestedTreeNode#tabIndex deprecated. MatTreeNode ignores Input defaultTabIndex and manages its own focus behavior.
+   * LegacyTreeKeyManager and LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER deprecated. Inject a TreeKeyManagerFactory to customize keyboard behavior.
+
+  Note when upgrading: an opt-out is available for keyboard functionality changes. Provide LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER to opt-out of Tree managing its own focus. When provided, Tree does not manage it’s own focus and respects tabindex passed to TreeNode. When provided, have the same focus behavior as before this commit is applied.
+
+  Add Legacy Keyboard Interface demo, which shows usage of LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER. Add Custom Key Manager, which shows usage of injecting a TreeKeyManagerStrategy
+- disabled renamed to isDisabled.
+   * CdkTreeNode#disabled deprecated and alias to CdkTreeNode#isDisabled
+### material
+| Commit | Type | Description |
+| -- | -- | -- |
+| [095947c8c](https://github.com/angular/components/commit/095947c8c3a79fecf4e56fc39ab61b0cc6e03eea) | fix | **button:** support palettes for icon button in M3 ([#29433](https://github.com/angular/components/pull/29433)) |
+| [e69b2b09e](https://github.com/angular/components/commit/e69b2b09efaf577cd5fe92b70808479f975913af) | fix | **chips:** fix focus issue ([#29427](https://github.com/angular/components/pull/29427)) |
+| [b116643a0](https://github.com/angular/components/commit/b116643a062749fa2c964820ae9f9c0e76c40717) | fix | **core:** require theme for option typography ([#29416](https://github.com/angular/components/pull/29416)) |
+| [92ab713a6](https://github.com/angular/components/commit/92ab713a65e2d622f975a6e610f981563a12b592) | fix | **tabs:** prevent tab header from collapsing when empty inside a drop list ([#29418](https://github.com/angular/components/pull/29418)) |
+| [ff36c80f9](https://github.com/angular/components/commit/ff36c80f9c7a14f0e9f36eafc3e1423d34e7c916) | fix | **tree:** add levelAccessor, childrenAccessor, TreeKeyManager; a11y and docs improvements ([#29062](https://github.com/angular/components/pull/29062)) |
+### cdk
+| Commit | Type | Description |
+| -- | -- | -- |
+| [565566151](https://github.com/angular/components/commit/565566151a7a68ee2956b96a5b8d6b48d4762ef9) | fix | **drag-drop:** remove preview after animate to placeholder animation completes ([#29439](https://github.com/angular/components/pull/29439)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
 <a name="18.2.0-next.0"></a>
 # 18.2.0-next.0 "pumice-reverie" (2024-07-10)
 ### cdk

package.json

@@ -54,7 +54,7 @@
     "ci-notify-slack-failure": "node --no-warnings=ExperimentalWarning --loader ts-node/esm/transpile-only scripts/circleci/notify-slack-job-failure.mts",
     "prepare": "husky"
   },
-  "version": "18.2.0-next.0",
+  "version": "18.2.0-next.1",
   "dependencies": {
     "@angular/animations": "^18.1.0",
     "@angular/common": "^18.1.0",

src/cdk/drag-drop/drag-ref.ts

@@ -1106,7 +1106,9 @@ export class DragRef<T = any> {
         const handler = ((event: TransitionEvent) => {
           if (
             !event ||
-            (_getEventTarget(event) === this._preview && event.propertyName === 'transform')
+            (this._preview &&
+              _getEventTarget(event) === this._preview.element &&
+              event.propertyName === 'transform')
           ) {
             this._preview?.removeEventListener('transitionend', handler);
             resolve();

src/cdk/drag-drop/preview-ref.ts

@@ -39,6 +39,10 @@ export class PreviewRef {
   /** Reference to the preview element. */
   private _preview: HTMLElement;
 
+  get element(): HTMLElement {
+    return this._preview;
+  }
+
   constructor(
     private _document: Document,
     private _rootElement: HTMLElement,

src/material/button/_icon-button-theme.scss

@@ -37,9 +37,13 @@
   @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-icon-button.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+/// $color-variant: The color variant to use for the button: primary, secondary, tertiary, or error.
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -122,10 +126,14 @@
   );
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-icon-button.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+/// $color-variant: The color variant to use for the button: primary, secondary, tertiary, or error.
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -142,13 +150,14 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
+@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');
   @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-        tokens-mdc-icon-button.$prefix, map.get($tokens, tokens-mdc-icon-button.$prefix));
-    @include token-utils.create-token-values(
-        tokens-mat-icon-button.$prefix, map.get($tokens, tokens-mat-icon-button.$prefix));
+    $mdc-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-icon-button.$prefix, $options...);
+    $mat-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon-button.$prefix, $options...);
+
+    @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens);
+    @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
   }
 }

src/material/core/theming/_color-api-backwards-compatibility.scss

@@ -1,6 +1,7 @@
 @use '../../badge/badge-theme';
 @use '../../button/button-theme';
 @use '../../button/fab-theme';
+@use '../../button/icon-button-theme';
 @use '../../checkbox/checkbox-theme';
 @use '../../chips/chips-theme';
 @use '../../datepicker/datepicker-theme';
@@ -80,6 +81,7 @@ $_overrides-only: true;
 
   &.mat-mdc-button-base {
     @include button-theme.color($theme, $primary-options...);
+    @include icon-button-theme.color($theme, $primary-options...);
   }
 
   &.mat-mdc-standard-chip {

src/material/core/tokens/_token-utils.scss

@@ -1,9 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/keys' as mdc-keys;
+@use 'sass:string';
 @use '@material/tokens/v0_161' as mdc-tokens;
 @use '../style/elevation';
 @use '../style/sass-utils';
@@ -57,27 +55,33 @@ $placeholder-density-config: 0;
 $_tokens: null;
 $_component-prefix: null;
 
-@mixin _configure-token-prefix($first, $rest...) {
-  $_component-prefix: '' !global;
-  @each $item in $rest {
-    $_component-prefix:
-      if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
-  }
-  @include mdc-custom-properties.configure($varname-prefix: $first) {
-    @content;
-  }
-  $_component-prefix: null !global;
-}
-
 // Sets the token prefix and map to use when creating token slots.
 @mixin use-tokens($prefix, $tokens) {
+  $_component-prefix: $prefix !global;
   $_tokens: $tokens !global;
-  @include _configure-token-prefix($prefix...) {
-    @content;
-  }
+
+  @content;
+
+  $_component-prefix: null !global;
   $_tokens: null !global;
 }
 
+// Combines a prefix and a string to generate a CSS variable name for a token.
+@function _get-css-variable($prefix, $name) {
+  @if $prefix == null or $name == null {
+    @error 'Must specify both prefix and name when generating token';
+  }
+
+  $string-prefix: '';
+
+  // Prefixes are lists so we need to combine them.
+  @each $part in $prefix {
+    $string-prefix: if($string-prefix == '', $part, '#{$string-prefix}-#{$part}');
+  }
+
+  @return string.unquote('--#{$string-prefix}-#{$name}');
+}
+
 // Emits a slot for the given token, provided that it has a non-null value in the token map passed
 // to `use-tokens`.
 @mixin create-token-slot($property, $token, $emit-fallback: false) {
@@ -97,8 +101,9 @@ $_component-prefix: null;
       $fallback: $emit-fallback;
     }
 
-    $value: mdc-custom-properties.create('#{$_component-prefix}-#{$token}', $fallback: $fallback);
-    @include mdc-theme.property($property, $value);
+    $var-name: _get-css-variable($_component-prefix, $token);
+    $var-reference: if($fallback == null, var(#{$var-name}), var(#{$var-name}, #{$fallback}));
+    #{$property}: #{$var-reference};
   }
 }
 
@@ -112,7 +117,7 @@ $_component-prefix: null;
     @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
   }
 
-  @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
+  @return _get-css-variable($_component-prefix, $token);
 }
 
 // TODO(crisbeto): should be able to replace the usages of `get-token-variable` with this.
@@ -137,9 +142,14 @@ $_component-prefix: null;
   }
 }
 
+// Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
-  @include _configure-token-prefix($prefix...) {
-    @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);
+  @if $tokens != null {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        #{_get-css-variable($prefix, $key)}: #{$value};
+      }
+    }
   }
 }
 

src/material/core/tokens/m2/mdc/_switch.scss

@@ -89,8 +89,10 @@ $prefix: (mdc, switch);
       disabled-unselected-icon-color: $icon-color,
       // Color of track when disabled.
       disabled-unselected-track-color: $on-surface,
+      // TODO(crisbeto): `handle-surface-color` was hardcoded to `var(--mdc-surface-color, #fff)`
+      // which made it basically hardcoded to #fff. Should it be based on the theme?
       // Color of slide-toggle handle's surface.
-      handle-surface-color: surface,
+      handle-surface-color: #fff,
       // Color of icon (ex. checkmark) when selected
       selected-icon-color: $icon-color,
       // Color of handle when unselected and focused.

src/material/core/tokens/m3/mat/_icon-button.scss

@@ -11,7 +11,7 @@ $prefix: (mat, icon-button);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the mat-icon-button
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
+  $tokens: ((
     state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
     disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
     ripple-color: sass-utils.safe-color-change(
@@ -21,7 +21,36 @@ $prefix: (mat, icon-button);
     hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
     focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
     pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  );
+  ), (
+    primary: (
+      state-layer-color: map.get($systems, md-sys-color, primary),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, primary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    secondary: (
+      state-layer-color: map.get($systems, md-sys-color, secondary),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, secondary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    tertiary: (
+      state-layer-color: map.get($systems, md-sys-color, tertiary),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, tertiary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    error: (
+      state-layer-color: map.get($systems, md-sys-color, error),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, error),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    )
+  ));
 
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
 }

src/material/core/tokens/m3/mdc/_icon-button.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'sass:meta';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,9 +11,26 @@ $prefix: (mdc, icon-button);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC icon-button
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('icon-button', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('icon-button', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (
+      icon-color: map.get($systems, md-sys-color, primary)
+    ),
+    secondary: (
+      icon-color: map.get($systems, md-sys-color, secondary)
+    ),
+    tertiary: (
+      icon-color: map.get($systems, md-sys-color, tertiary)
+    ),
+    error: (
+      icon-color: map.get($systems, md-sys-color, error)
+    )
+  );
 
-  @return token-utils.namespace-tokens($prefix, _fix-tokens($mdc-tokens), $token-slots);
+  @return token-utils.namespace-tokens($prefix, (
+    _fix-tokens($tokens),
+    token-utils.map-values($variant-tokens, meta.get-function(_fix-tokens))
+  ), $token-slots);
 }
 
 /// Fixes inconsistent values in the icon button tokens so that they can produce valid styles.