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

package/fesm2022/tree.mjs

@@ -80,10 +80,10 @@ class MatTreeNode extends CdkTreeNode {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeNode, deps: [{ token: i0.ElementRef }, { token: i1.CdkTree }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.0-next.2", type: MatTreeNode, isStandalone: true, selector: "mat-tree-node", inputs: { tabIndexInputBinding: ["tabIndex", "tabIndexInputBinding", (value) => (value == null ? 0 : numberAttribute(value))], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { activation: "activation", expandedChange: "expandedChange" }, host: { listeners: { "click": "_focusItem()" }, properties: { "attr.aria-expanded": "_getAriaExpanded()", "attr.aria-level": "level + 1", "attr.aria-posinset": "_getPositionInSet()", "attr.aria-setsize": "_getSetSize()", "tabindex": "_getTabindexAttribute()" }, classAttribute: "mat-tree-node" }, providers: [{ provide: CdkTreeNode, useExisting: MatTreeNode }], exportAs: ["matTreeNode"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeNode, deps: [{ token: i0.ElementRef }, { token: i1.CdkTree }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.3", type: MatTreeNode, isStandalone: true, selector: "mat-tree-node", inputs: { tabIndexInputBinding: ["tabIndex", "tabIndexInputBinding", (value) => (value == null ? 0 : numberAttribute(value))], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { activation: "activation", expandedChange: "expandedChange" }, host: { listeners: { "click": "_focusItem()" }, properties: { "attr.aria-expanded": "_getAriaExpanded()", "attr.aria-level": "level + 1", "attr.aria-posinset": "_getPositionInSet()", "attr.aria-setsize": "_getSetSize()", "tabindex": "_getTabindexAttribute()" }, classAttribute: "mat-tree-node" }, providers: [{ provide: CdkTreeNode, useExisting: MatTreeNode }], exportAs: ["matTreeNode"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeNode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeNode, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-tree-node',
@@ -119,10 +119,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2",
  * Captures the node's template and a when predicate that describes when this node should be used.
  */
 class MatTreeNodeDef extends CdkTreeNodeDef {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeNodeDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0-next.2", type: MatTreeNodeDef, isStandalone: true, selector: "[matTreeNodeDef]", inputs: { when: ["matTreeNodeDefWhen", "when"], data: ["matTreeNode", "data"] }, providers: [{ provide: CdkTreeNodeDef, useExisting: MatTreeNodeDef }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeNodeDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.3", type: MatTreeNodeDef, isStandalone: true, selector: "[matTreeNodeDef]", inputs: { when: ["matTreeNodeDefWhen", "when"], data: ["matTreeNode", "data"] }, providers: [{ provide: CdkTreeNodeDef, useExisting: MatTreeNodeDef }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeNodeDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeNodeDef, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matTreeNodeDef]',
@@ -177,14 +177,14 @@ class MatNestedTreeNode extends CdkNestedTreeNode {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatNestedTreeNode, deps: [{ token: i0.ElementRef }, { token: i1.CdkTree }, { token: i0.IterableDiffers }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.0-next.2", type: MatNestedTreeNode, isStandalone: true, selector: "mat-nested-tree-node", inputs: { node: ["matNestedTreeNode", "node"], disabled: ["disabled", "disabled", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))] }, outputs: { activation: "activation", expandedChange: "expandedChange" }, host: { classAttribute: "mat-nested-tree-node" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatNestedTreeNode, deps: [{ token: i0.ElementRef }, { token: i1.CdkTree }, { token: i0.IterableDiffers }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.3", type: MatNestedTreeNode, isStandalone: true, selector: "mat-nested-tree-node", inputs: { node: ["matNestedTreeNode", "node"], disabled: ["disabled", "disabled", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))] }, outputs: { activation: "activation", expandedChange: "expandedChange" }, host: { classAttribute: "mat-nested-tree-node" }, providers: [
             { provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode },
             { provide: CdkTreeNode, useExisting: MatNestedTreeNode },
             { provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: MatNestedTreeNode },
         ], exportAs: ["matNestedTreeNode"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatNestedTreeNode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatNestedTreeNode, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-nested-tree-node',
@@ -234,10 +234,10 @@ class MatTreeNodePadding extends CdkTreeNodePadding {
     set indent(indent) {
         this._setIndentInput(indent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeNodePadding, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.0-next.2", type: MatTreeNodePadding, isStandalone: true, selector: "[matTreeNodePadding]", inputs: { level: ["matTreeNodePadding", "level", numberAttribute], indent: ["matTreeNodePaddingIndent", "indent"] }, providers: [{ provide: CdkTreeNodePadding, useExisting: MatTreeNodePadding }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeNodePadding, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.3", type: MatTreeNodePadding, isStandalone: true, selector: "[matTreeNodePadding]", inputs: { level: ["matTreeNodePadding", "level", numberAttribute], indent: ["matTreeNodePaddingIndent", "indent"] }, providers: [{ provide: CdkTreeNodePadding, useExisting: MatTreeNodePadding }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeNodePadding, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeNodePadding, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matTreeNodePadding]',
@@ -261,15 +261,15 @@ class MatTreeNodeOutlet {
         this.viewContainer = viewContainer;
         this._node = _node;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeNodeOutlet, deps: [{ token: i0.ViewContainerRef }, { token: CDK_TREE_NODE_OUTLET_NODE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0-next.2", type: MatTreeNodeOutlet, isStandalone: true, selector: "[matTreeNodeOutlet]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeNodeOutlet, deps: [{ token: i0.ViewContainerRef }, { token: CDK_TREE_NODE_OUTLET_NODE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.3", type: MatTreeNodeOutlet, isStandalone: true, selector: "[matTreeNodeOutlet]", providers: [
             {
                 provide: CdkTreeNodeOutlet,
                 useExisting: MatTreeNodeOutlet,
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeNodeOutlet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeNodeOutlet, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matTreeNodeOutlet]',
@@ -298,10 +298,10 @@ class MatTree extends CdkTree {
         // We need an initializer here to avoid a TS error. The value will be set in `ngAfterViewInit`.
         this._nodeOutlet = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTree, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0-next.2", type: MatTree, isStandalone: true, selector: "mat-tree", host: { classAttribute: "mat-tree" }, providers: [{ provide: CdkTree, useExisting: MatTree }], viewQueries: [{ propertyName: "_nodeOutlet", first: true, predicate: MatTreeNodeOutlet, descendants: true, static: true }], exportAs: ["matTree"], usesInheritance: true, ngImport: i0, template: `<ng-container matTreeNodeOutlet></ng-container>`, isInline: true, styles: [".mat-tree{display:block;background-color:var(--mat-tree-container-background-color, var(--mat-app-surface))}.mat-tree-node,.mat-nested-tree-node{color:var(--mat-tree-node-text-color, var(--mat-app-on-surface));font-family:var(--mat-tree-node-text-font, var(--mat-app-body-large-font));font-size:var(--mat-tree-node-text-size, var(--mat-app-body-large-size));font-weight:var(--mat-tree-node-text-weight, var(--mat-app-body-large-weight))}.mat-tree-node{display:flex;align-items:center;flex:1;word-wrap:break-word;min-height:var(--mat-tree-node-min-height, 48px)}.mat-nested-tree-node{border-bottom-width:0}"], dependencies: [{ kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTree, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-next.3", type: MatTree, isStandalone: true, selector: "mat-tree", host: { classAttribute: "mat-tree" }, providers: [{ provide: CdkTree, useExisting: MatTree }], viewQueries: [{ propertyName: "_nodeOutlet", first: true, predicate: MatTreeNodeOutlet, descendants: true, static: true }], exportAs: ["matTree"], usesInheritance: true, ngImport: i0, template: `<ng-container matTreeNodeOutlet></ng-container>`, isInline: true, styles: [".mat-tree{display:block;background-color:var(--mat-tree-container-background-color, var(--mat-app-surface))}.mat-tree-node,.mat-nested-tree-node{color:var(--mat-tree-node-text-color, var(--mat-app-on-surface));font-family:var(--mat-tree-node-text-font, var(--mat-app-body-large-font));font-size:var(--mat-tree-node-text-size, var(--mat-app-body-large-size));font-weight:var(--mat-tree-node-text-weight, var(--mat-app-body-large-weight))}.mat-tree-node{display:flex;align-items:center;flex:1;word-wrap:break-word;min-height:var(--mat-tree-node-min-height, 48px)}.mat-nested-tree-node{border-bottom-width:0}"], dependencies: [{ kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTree, decorators: [{
             type: Component,
             args: [{ selector: 'mat-tree', exportAs: 'matTree', template: `<ng-container matTreeNodeOutlet></ng-container>`, host: {
                         'class': 'mat-tree',
@@ -315,10 +315,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2",
  * Wrapper for the CdkTree's toggle with Material design styles.
  */
 class MatTreeNodeToggle extends CdkTreeNodeToggle {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeNodeToggle, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0-next.2", type: MatTreeNodeToggle, isStandalone: true, selector: "[matTreeNodeToggle]", inputs: { recursive: ["matTreeNodeToggleRecursive", "recursive"] }, providers: [{ provide: CdkTreeNodeToggle, useExisting: MatTreeNodeToggle }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeNodeToggle, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.3", type: MatTreeNodeToggle, isStandalone: true, selector: "[matTreeNodeToggle]", inputs: { recursive: ["matTreeNodeToggleRecursive", "recursive"] }, providers: [{ provide: CdkTreeNodeToggle, useExisting: MatTreeNodeToggle }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeNodeToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeNodeToggle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matTreeNodeToggle]',
@@ -338,8 +338,8 @@ const MAT_TREE_DIRECTIVES = [
     MatTreeNodeOutlet,
 ];
 class MatTreeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeModule, imports: [CdkTreeModule, MatCommonModule, MatNestedTreeNode,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeModule, imports: [CdkTreeModule, MatCommonModule, MatNestedTreeNode,
             MatTreeNodeDef,
             MatTreeNodePadding,
             MatTreeNodeToggle,
@@ -352,9 +352,9 @@ class MatTreeModule {
             MatTree,
             MatTreeNode,
             MatTreeNodeOutlet] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeModule, imports: [CdkTreeModule, MatCommonModule, MatCommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeModule, imports: [CdkTreeModule, MatCommonModule, MatCommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MatTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: MatTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CdkTreeModule, MatCommonModule, ...MAT_TREE_DIRECTIVES],

package/form-field/_form-field-high-contrast.scss

@@ -8,14 +8,14 @@
     // The outline of the `fill` appearance is achieved through a background color
     // which won't be visible in high contrast mode. Add an outline to replace it.
     .mat-mdc-text-field-wrapper {
-      @include cdk.high-contrast(active, off) {
+      @include cdk.high-contrast {
         outline: solid 1px;
       }
     }
 
     // Use GreyText for the disabled outline color which will account for the user's configuration.
     &.mat-form-field-disabled .mat-mdc-text-field-wrapper {
-      @include cdk.high-contrast(active, off) {
+      @include cdk.high-contrast {
         outline-color: GrayText;
       }
     }
@@ -24,7 +24,7 @@
   // If a form field with fill appearance is focused, update the outline to be
   // dashed and thicker to indicate focus.
   .mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper {
-    @include cdk.high-contrast(active, off) {
+    @include cdk.high-contrast {
       outline: $focus-indicator-style $focus-indicator-width;
     }
   }
@@ -32,7 +32,7 @@
   // For form fields with outline appearance, we show a dashed thick border on top
   // of the solid notched-outline border to indicate focus.
   .mat-mdc-form-field.mat-focused .mdc-notched-outline {
-    @include cdk.high-contrast(active, off) {
+    @include cdk.high-contrast {
       border: $focus-indicator-style $focus-indicator-width;
     }
   }

package/form-field/_mdc-text-field-structure.scss

@@ -6,10 +6,14 @@
 
 // Includes the structural styles for the form field inherited from MDC.
 @mixin private-text-field-structure {
-  $filled-slots: (tokens-mdc-filled-text-field.$prefix,
-    tokens-mdc-filled-text-field.get-token-slots());
-  $outlined-slots: (tokens-mdc-outlined-text-field.$prefix,
-    tokens-mdc-outlined-text-field.get-token-slots());
+  $filled-slots: (
+    tokens-mdc-filled-text-field.$prefix,
+    tokens-mdc-filled-text-field.get-token-slots()
+  );
+  $outlined-slots: (
+    tokens-mdc-outlined-text-field.$prefix,
+    tokens-mdc-outlined-text-field.get-token-slots()
+  );
 
   .mdc-text-field {
     display: inline-flex;
@@ -101,7 +105,7 @@
       @include _input-tokens('.mdc-text-field--outlined');
     }
 
-    @include cdk.high-contrast(active, off) {
+    @include cdk.high-contrast {
       .mdc-text-field--disabled & {
         background-color: Window;
       }
@@ -130,19 +134,15 @@
   .mdc-text-field--outlined {
     height: 56px;
     overflow: visible;
-    padding-left: 16px;
-    padding-right: 16px;
 
-    @include _supports-max {
-      @include token-utils.use-tokens($outlined-slots...) {
-        $shape-var: token-utils.get-token-variable(container-shape);
-        padding-right: max(16px, #{$shape-var});
-        padding-left: max(16px, calc(#{$shape-var} + 4px));
+    @include token-utils.use-tokens($outlined-slots...) {
+      $shape-var: token-utils.get-token-variable(container-shape);
+      padding-right: max(16px, #{$shape-var});
+      padding-left: max(16px, calc(#{$shape-var} + 4px));
 
-        [dir='rtl'] & {
-          padding-right: max(16px, calc(#{$shape-var} + 4px));
-          padding-left: max(16px, #{$shape-var});
-        }
+      [dir='rtl'] & {
+        padding-right: max(16px, calc(#{$shape-var} + 4px));
+        padding-left: max(16px, #{$shape-var});
       }
     }
   }
@@ -201,7 +201,7 @@
     .mdc-text-field--disabled & {
       cursor: default;
 
-      @include cdk.high-contrast(active, off) {
+      @include cdk.high-contrast {
         z-index: 1;
       }
     }
@@ -342,17 +342,14 @@
     border-right: none;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    width: 12px;
 
     @include token-utils.use-tokens($outlined-slots...) {
       @include token-utils.create-token-slot(border-top-left-radius, container-shape);
       @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
 
-      @include _supports-max {
-        .mdc-text-field--outlined .mdc-notched-outline & {
-          $shape-var: token-utils.get-token-variable(container-shape);
-          width: max(12px, #{$shape-var});
-        }
+      .mdc-text-field--outlined .mdc-notched-outline & {
+        $shape-var: token-utils.get-token-variable(container-shape);
+        width: max(12px, #{$shape-var});
       }
     }
 
@@ -397,14 +394,14 @@
   .mdc-notched-outline__notch {
     flex: 0 0 auto;
     width: auto;
-    max-width: calc(100% - 24px);
 
     @include token-utils.use-tokens($outlined-slots...) {
-      @include _supports-max {
-        .mdc-text-field--outlined .mdc-notched-outline & {
-          $shape-var: token-utils.get-token-variable(container-shape);
-          max-width: calc(100% - max(12px, #{$shape-var}) * 2);
-        }
+      .mdc-text-field--outlined .mdc-notched-outline & {
+        $shape-var: token-utils.get-token-variable(container-shape);
+        max-width: min(
+          var(--mat-form-field-notch-max-width, 100%),
+          calc(100% - max(12px, #{$shape-var}) * 2)
+        );
       }
     }
 
@@ -420,6 +417,7 @@
       padding-left: 0;
       padding-right: 8px;
       border-top: none;
+      --mat-form-field-notch-max-width: 100%;
     }
 
     [dir='rtl'] .mdc-notched-outline--notched & {
@@ -433,7 +431,8 @@
   }
 
   .mdc-line-ripple {
-    &::before, &::after {
+    &::before,
+    &::after {
       position: absolute;
       bottom: 0;
       left: 0;
@@ -459,8 +458,10 @@
         }
 
         .mdc-text-field--filled.mdc-text-field--disabled & {
-          @include token-utils.create-token-slot(border-bottom-color,
-            disabled-active-indicator-color);
+          @include token-utils.create-token-slot(
+            border-bottom-color,
+            disabled-active-indicator-color
+          );
         }
 
         #{$enabled-field}.mdc-text-field--invalid & {
@@ -468,8 +469,10 @@
         }
 
         #{$enabled-field}.mdc-text-field--invalid:not(.mdc-text-field--focused):hover & {
-          @include token-utils.create-token-slot(border-bottom-color,
-            error-hover-active-indicator-color);
+          @include token-utils.create-token-slot(
+            border-bottom-color,
+            error-hover-active-indicator-color
+          );
         }
       }
     }
@@ -481,8 +484,10 @@
 
       @include token-utils.use-tokens($filled-slots...) {
         .mdc-text-field--filled & {
-          @include token-utils.create-token-slot(border-bottom-width,
-            focus-active-indicator-height);
+          @include token-utils.create-token-slot(
+            border-bottom-width,
+            focus-active-indicator-height
+          );
         }
 
         .mdc-text-field--filled:not(.mdc-text-field--disabled) & {
@@ -490,8 +495,10 @@
         }
 
         .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) & {
-          @include token-utils.create-token-slot(border-bottom-color,
-            error-focus-active-indicator-color);
+          @include token-utils.create-token-slot(
+            border-bottom-color,
+            error-focus-active-indicator-color
+          );
         }
       }
     }
@@ -571,21 +578,14 @@
   }
 }
 
-// Wraps the content in a `@supports` query targeting the `max` CSS function.
-@mixin _supports-max {
-  // stylelint-disable material/no-prefixes
-  @supports (top: max(0%)) {
-    @content;
-  }
-  // stylelint-enable
-}
-
 // Includes the animation styles for the form field inherited from MDC.
 @mixin private-text-field-animations {
   $timing-curve: cubic-bezier(0.4, 0, 0.2, 1);
 
   .mdc-floating-label {
-    transition: transform 150ms $timing-curve, color 150ms $timing-curve;
+    transition:
+      transform 150ms $timing-curve,
+      color 150ms $timing-curve;
   }
 
   .mdc-text-field__input {
@@ -611,6 +611,8 @@
   }
 
   .mdc-line-ripple::after {
-    transition: transform 180ms $timing-curve, opacity 180ms $timing-curve;
+    transition:
+      transform 180ms $timing-curve,
+      opacity 180ms $timing-curve;
   }
 }

package/form-field/index.d.ts

@@ -137,6 +137,8 @@ export declare class MatFormField implements FloatingLabelParent, AfterContentIn
     _textField: ElementRef<HTMLElement>;
     _iconPrefixContainer: ElementRef<HTMLElement>;
     _textPrefixContainer: ElementRef<HTMLElement>;
+    _iconSuffixContainer: ElementRef<HTMLElement>;
+    _textSuffixContainer: ElementRef<HTMLElement>;
     _floatingLabel: MatFormFieldFloatingLabel | undefined;
     _notchedOutline: MatFormFieldNotchedOutline | undefined;
     _lineRipple: MatFormFieldLineRipple | undefined;

package/list/_list-inherited-structure.scss

@@ -1,4 +1,3 @@
-@use '@angular/cdk';
 @use '../core/style/vendor-prefixes';
 @use '../core/tokens/m2/mdc/list' as tokens-mdc-list;
 @use '../core/tokens/token-utils';
@@ -94,6 +93,7 @@
       }
     }
 
+    // Not used in Material, but some internal tests seem to depend on it.
     &.mdc-list-item--selected::before,
     &.mdc-list-item--selected:focus::before,
     &:not(.mdc-list-item--selected):focus::before {
@@ -103,20 +103,8 @@
       height: 100%;
       top: 0;
       left: 0;
-      border: 1px solid transparent;
-      border-radius: inherit;
       content: '';
       pointer-events: none;
-
-      @include cdk.high-contrast(active, off) {
-        border-color: CanvasText;
-      }
-    }
-
-    &.mdc-list-item--selected:focus::before,
-    &.mdc-list-item--selected::before {
-      border-width: 3px;
-      border-style: double;
     }
   }
 

package/list/_list-item-hcm-indicator.scss

@@ -5,7 +5,7 @@
 // its background color. Since that doesn't work in HCM, this mixin provides an alternative by
 // rendering a circle.
 @mixin private-high-contrast-list-item-indicator() {
-  @include cdk.high-contrast(active, off) {
+  @include cdk.high-contrast {
     &::after {
       $size: 10px;
       content: '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material",
-  "version": "19.0.0-next.2",
+  "version": "19.0.0-next.4",
   "description": "Angular Material",
   "repository": {
     "type": "git",
@@ -346,7 +346,7 @@
   },
   "peerDependencies": {
     "@angular/animations": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
-    "@angular/cdk": "19.0.0-next.2",
+    "@angular/cdk": "19.0.0-next.4",
     "@angular/core": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
     "@angular/common": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
     "@angular/forms": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",