@angular/material 18.2.0-next.3 → 18.2.0-rc.0

package/button-toggle/index.d.ts

@@ -95,6 +95,10 @@ export declare class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
+    /** Whether the button should remain interactive when it is disabled. */
+    get disabledInteractive(): boolean;
+    set disabledInteractive(value: boolean);
+    private _disabledInteractive;
     /** Event emitted when the group value changes. */
     readonly change: EventEmitter<MatButtonToggleChange>;
     constructor(toggleGroup: MatButtonToggleGroup, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _focusMonitor: FocusMonitor, defaultTabIndex: string, defaultOptions?: MatButtonToggleDefaultOptions);
@@ -116,10 +120,11 @@ export declare class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy
     /** Whether the toggle is in single selection mode. */
     isSingleSelector(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggle, [{ optional: true; }, null, null, null, { attribute: "tabindex"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
     static ngAcceptInputType_disableRipple: unknown;
     static ngAcceptInputType_checked: unknown;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_disabledInteractive: unknown;
 }
 
 /** Possible appearance styles for the button toggle. */
@@ -152,6 +157,8 @@ export declare interface MatButtonToggleDefaultOptions {
     hideSingleSelectionIndicator?: boolean;
     /** Whether icon indicators should be hidden for multiple-selection button toggle groups. */
     hideMultipleSelectionIndicator?: boolean;
+    /** Whether disabled toggle buttons should be interactive. */
+    disabledInteractive?: boolean;
 }
 
 /** Exclusive selection button toggle group that behaves like a radio-button group. */
@@ -160,6 +167,7 @@ export declare class MatButtonToggleGroup implements ControlValueAccessor, OnIni
     private _dir?;
     private _multiple;
     private _disabled;
+    private _disabledInteractive;
     private _selectionModel;
     /**
      * Reference to the raw value that the consumer tried to assign. The real
@@ -202,6 +210,9 @@ export declare class MatButtonToggleGroup implements ControlValueAccessor, OnIni
     /** Whether multiple button toggle group is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
+    /** Whether buttons in the group should be interactive while they're disabled. */
+    get disabledInteractive(): boolean;
+    set disabledInteractive(value: boolean);
     /** The layout direction of the toggle button group. */
     get dir(): Direction;
     /** Event emitted when the group's value changes. */
@@ -256,10 +267,11 @@ export declare class MatButtonToggleGroup implements ControlValueAccessor, OnIni
     /** Marks all of the child button toggles to be checked. */
     private _markButtonsForCheck;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggleGroup, [null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": { "alias": "appearance"; "required": false; }; "name": { "alias": "name"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "hideMultipleSelectionIndicator": { "alias": "hideMultipleSelectionIndicator"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": { "alias": "appearance"; "required": false; }; "name": { "alias": "name"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "hideMultipleSelectionIndicator": { "alias": "hideMultipleSelectionIndicator"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, true, never>;
     static ngAcceptInputType_vertical: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_disabledInteractive: unknown;
     static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
     static ngAcceptInputType_hideMultipleSelectionIndicator: unknown;
 }

package/checkbox/_checkbox-common.scss

@@ -2,6 +2,7 @@
 @use '@angular/cdk';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 @use '../core/tokens/token-utils';
+@use '../core/style/vendor-prefixes';
 
 $_path-length: 29.7833385;
 $_transition-duration: 90ms;
@@ -64,6 +65,10 @@ $_fallback-size: 40px;
   .mdc-checkbox--disabled {
     cursor: default;
     pointer-events: none;
+
+    @include cdk.high-contrast(active, off) {
+      opacity: 0.5;
+    }
   }
 
   .mdc-checkbox__background {
@@ -82,6 +87,9 @@ $_fallback-size: 40px;
     transition: background-color $_transition-duration $_exit-curve,
                 border-color $_transition-duration $_exit-curve;
 
+    // Force browser to show background-color when using the print function
+    @include vendor-prefixes.color-adjust(exact);
+
     @include token-utils.use-tokens($prefix, $slots) {
       $layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size);
       $offset: calc((#{$layer-size} - #{$_icon-size}) / 2);
@@ -167,6 +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;
+      }
     }
   }
 
@@ -175,6 +187,10 @@ $_fallback-size: 40px;
       &, &.mat-mdc-checkbox-disabled-interactive {
         .mdc-checkbox__checkmark {
           @include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
+
+          @include cdk.high-contrast(active, off) {
+            color: CanvasText;
+          }
         }
       }
     }

package/core/tokens/m3/mdc/_chip.scss

@@ -18,6 +18,7 @@ $prefix: (mdc, chip);
     (
       container-shape-radius: token-definition.hardcode(8px, $exclude-hardcoded),
       with-avatar-avatar-size: token-definition.hardcode(24px, $exclude-hardcoded),
+      with-avatar-avatar-shape-radius: token-definition.hardcode(24px, $exclude-hardcoded),
       label-text-color: map.get($systems, md-sys-color, on-surface-variant),
       disabled-label-text-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface),
@@ -43,6 +44,9 @@ $prefix: (mdc, chip);
       with-avatar-disabled-avatar-opacity:
           token-definition.hardcode(0.38, $exclude-hardcoded),
       elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container),
+      // In the M3 tokens this is a `surface` color, but in the MDC implementation it's
+      // never being emitted. We emit `transparent` so consumers override the color.
+      elevated-container-color: token-definition.hardcode(transparent, $exclude-hardcoded),
       flat-selected-outline-width: token-definition.hardcode(0, $exclude-hardcoded),
       selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
       flat-disabled-selected-container-color: sass-utils.safe-color-change(