@angular/material 21.0.0-next.3 → 21.0.0-next.5

package/button/testing/index.d.ts

@@ -18,6 +18,8 @@ interface ButtonHarnessFilters extends BaseHarnessFilters {
     disabled?: boolean;
     /** Only find instances with the specified type. */
     buttonType?: ButtonType;
+    /** Only find instances that contain an icon whose name matches the given value. */
+    iconName?: string | RegExp;
 }
 
 /** Harness for interacting with a mat-button in tests. */

package/core/focus-indicators/_private.scss

@@ -86,6 +86,10 @@ $default-border-radius: 4px;
   $config: map.merge($default-config, $config);
 
   @include _customize-focus-indicators($config);
+
+  // Strong focus indicators currently need chip labels to have overflow visible.
+  // TODO(b/446709063) revisit the structure to find a way to remove this dependency.
+  @include _chip-label-overflow-visible();
 }
 
 @mixin strong-focus-indicators-color($theme-or-color) {
@@ -108,3 +112,15 @@ $default-border-radius: 4px;
     }
   }
 }
+
+@mixin _chip-label-overflow-visible {
+  .mat-mdc-standard-chip {
+    // MDC sets `overflow: hidden` on these elements in order to truncate the text. This conflicts
+    // with how we structure and style the strong focus indicators so we need to override it.
+    .mdc-evolution-chip__cell--primary,
+    .mdc-evolution-chip__action--primary,
+    .mat-mdc-chip-action-label {
+      overflow: visible;
+    }
+  }
+}

package/core/tokens/_classes.scss

@@ -3,134 +3,109 @@
 @mixin system-classes() {
 
   // ***********************************************************************************************
-  // Background - Apply background color and a contrastful corresponding text color
-  // See https://m3.material.io/styles/color/roles for guidance.
+  // Background - Applies background colors defined by Material Design.
+  // See https://m3.material.io/styles/color/roles for detailed guidance.
   // ***********************************************************************************************
 
-  // Styles an element with a primary color background and applies an accessible contrasting
-  // color for text and icons. Use for key components across the UI, such as buttons that
-  // have greater importance on the page. In Angular Material, this is used for the selected
-  // date in a datepicker, the handle of a slider, and the background of a checkbox.
+  // Styles an element with a primary color background. Use for key components across the UI, such
+  // as buttons that have greater importance on the page. In Angular Material, this is used for the
+  // selected date in a datepicker, the handle of a slider, and the background of a checkbox.
   .mat-bg-primary {
     background-color: var(--mat-sys-primary);
-    color: var(--mat-sys-on-primary);
   }
 
-  // Styles an element with a primary container color background and applies an accessible
-  // contrasting color for text and icons. Use for filling components that should stand out
-  // on a surface. In Angular Material, this is used for
-  // the container of a floating action button.
+  // Styles an element with a primary container color background. Use for filling components that
+  // should stand out on a surface. In Angular Material, this is used for the container of a
+  // floating action button.
   .mat-bg-primary-container {
     background-color: var(--mat-sys-primary-container);
-    color: var(--mat-sys-on-primary-container);
   }
 
-  // Styles an element with a secondary color background and applies an accessible contrasting
-  // color for text and icons. Use for less prominent components in the UI that have a different
-  // color scheme than the primary.
+  // Styles an element with a secondary color background. Use for less prominent components in the
+  // UI that have a different color scheme than the primary.
   .mat-bg-secondary {
     background-color: var(--mat-sys-secondary);
-    color: var(--mat-sys-on-secondary);
   }
 
-  // Styles an element with a secondary container color background and applies an accessible
-  // contrasting color for text and icons. Use for components that need less emphasis than
-  // secondary, such as filter chips. In Angular Material, this is used for selected items
-  // in a list and the container of a tonal button.
+  // Styles an element with a secondary container color background. Use for components that need
+  // less emphasis than secondary, such as filter chips. In Angular Material, this is used for
+  // selected items in a list and the container of a tonal button.
   .mat-bg-secondary-container {
     background-color: var(--mat-sys-secondary-container);
-    color: var(--mat-sys-on-secondary-container);
   }
 
-  // Styles an element with an error color background and applies an accessible contrasting
-  // color for text and icons. Use for indicating an error state, such as an invalid text field, or
-  // for the background of an important notification. In Angular Material, this is used for the
-  // background of a badge.
+  // Styles an element with an error color background. Use for indicating an error state, such as
+  // an invalid text field, or for the background of an important notification. In Angular
+  // Material, this is used for the background of a badge.
   .mat-bg-error {
     background-color: var(--mat-sys-error);
-    color: var(--mat-sys-on-error);
   }
 
-  // Styles an element with an error container color background and applies an accessible
-  // contrasting color for text and icons. Use for components that need less emphasis than
-  // error, such as a container for error text.
+  // Styles an element with an error container color background. Use for components that need less
+  // emphasis than error, such as a container for error text.
   .mat-bg-error-container {
     background-color: var(--mat-sys-error-container);
-    color: var(--mat-sys-on-error-container);
   }
 
-  // Styles an element with a surface color background and applies an accessible contrasting
-  // color for text and icons. Use for general surfaces of components. In Angular Material, this is
-  // used for the background of many components, like tables, dialogs, menus, and toolbars.
+  // Styles an element with a surface color background. Use for general surfaces of components. In
+  // Angular Material, this is used for the background of many components, like tables, dialogs,
+  // menus, and toolbars.
   .mat-bg-surface {
     background-color: var(--mat-sys-surface);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a surface variant color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need to stand out from the
-  // main surface color. In Angular Material, this is used for the background of a filled
-  // form field and the track of a progress bar.
+  // Styles an element with a surface variant color background. Use for surfaces that need to stand
+  // out from the main surface color. In Angular Material, this is used for the background of a
+  // filled form field and the track of a progress bar.
   .mat-bg-surface-variant {
     background-color: var(--mat-sys-surface-variant);
-    color: var(--mat-sys-on-surface-variant);
   }
 
-  // Styles an element with the "highest" surface container color background and applies an
-  // accessible contrasting color for text and icons. Use for surfaces that need the most
-  // emphasis against the main surface color. In Angular Material, this is used for the
-  // background of a filled card.
+  // Styles an element with the "highest" surface container color background. Use for surfaces that
+  // need the most emphasis against the main surface color. In Angular Material, this is used for
+  // the background of a filled card.
   .mat-bg-surface-container-highest {
     background-color: var(--mat-sys-surface-container-highest);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a "high" surface container color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need more emphasis against
-  // the main surface color. In Angular Material, this is used for the background of a datepicker.
+  // Styles an element with a "high" surface container color background. Use for surfaces that need
+  // more emphasis against the main surface color. In Angular Material, this is used for the
+  // background of a datepicker.
   .mat-bg-surface-container-high {
     background-color: var(--mat-sys-surface-container-high);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a surface container color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need to stand out from the
-  // main surface color. In Angular Material, this is used for the background of a menu.
+  // Styles an element with a surface container color background. Use for surfaces that need to
+  // stand out from the main surface color. In Angular Material, this is used for the background
+  // of a menu.
   .mat-bg-surface-container {
     background-color: var(--mat-sys-surface-container);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a "low" surface container color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need less emphasis against
-  // the main surface color. In Angular Material, this is used for the background of a bottom sheet.
+  // Styles an element with a "low" surface container color background. Use for surfaces that need
+  // less emphasis against the main surface color. In Angular Material, this is used for the
+  // background of a bottom sheet.
   .mat-bg-surface-container-low {
     background-color: var(--mat-sys-surface-container-low);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with the "lowest" surface container color background and applies an
-  // accessible contrasting color for text and icons. Use for surfaces that need the least
-  // emphasis against the main surface color.
+  // Styles an element with the "lowest" surface container color background. Use for surfaces that
+  // need the least emphasis against the main surface color.
   .mat-bg-surface-container-lowest {
     background-color: var(--mat-sys-surface-container-lowest);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with an inverse surface color background and applies an accessible
-  // contrasting color for text and icons. Use for making elements stand out against the
-  // default color scheme. Good for temporary notifications. In Angular Material, this is used for
-  // the background of a snackbar and a tooltip.
+  // Styles an element with an inverse surface color background. Use for making elements stand out
+  // against the default color scheme. Good for temporary notifications. In Angular Material, this
+  // is used for the background of a snackbar and a tooltip.
   .mat-bg-inverse-surface {
     background-color: var(--mat-sys-inverse-surface);
-    color: var(--mat-sys-inverse-on-surface);
   }
 
-  // Styles an element with a disabled color background and applies an accessible contrasting
-  // color for text and icons. Use for disabled components. In Angular Material, this is used
-  // for components generally filled with the primary color but are currently disabled.
+  // Styles an element with a disabled color background. Use for disabled components. In Angular
+  // Material, this is used for components generally filled with the primary color but are
+  // currently disabled.
   .mat-bg-disabled {
-    color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
     background-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
   }
 
@@ -145,8 +120,7 @@
     color: var(--mat-sys-primary);
   }
 
-  // Styles the text of an element with the secondary color. Use for text that needs less emphasis
-  // than primary text.
+  // Styles the text of an element with the secondary color. Use for text that needs to stand out.
   .mat-text-secondary {
     color: var(--mat-sys-secondary);
   }
@@ -158,11 +132,60 @@
   }
 
   // Styles the text of an element with the disabled color. Use for text in disabled components.
-  // In Angular Material this is used to show text is disabled, generally on a "surface" background.
   .mat-text-disabled {
     color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
   }
 
+  // Styles the text of an element with the on-surface-variant color. Use for text that should have
+  // a lower emphasis than the surrounding text. This can include subheading, captions, and hint
+  // text.
+  .mat-text-on-surface-variant {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a primary background.
+  .mat-text-on-primary {
+    color: var(--mat-sys-on-primary);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a primary-container
+  // background.
+  .mat-text-on-primary-container {
+    color: var(--mat-sys-on-primary-container);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a secondary background.
+  .mat-text-on-secondary {
+    color: var(--mat-sys-on-secondary);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a secondary-container
+  // background.
+  .mat-text-on-secondary-container {
+    color: var(--mat-sys-on-secondary-container);
+  }
+
+  // Styles the text of an element with a color that contrasts well against an error background.
+  .mat-text-on-error {
+    color: var(--mat-sys-on-error);
+  }
+
+  // Styles the text of an element with a color that contrasts well against an error-container
+  // background.
+  .mat-text-on-error-container {
+    color: var(--mat-sys-on-error-container);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a surface background.
+  .mat-text-on-surface {
+    color: var(--mat-sys-on-surface);
+  }
+
+  // Styles the text of an element with a color that contrasts well against an inverse-surface
+  // background.
+  .mat-text-inverse-on-surface {
+    color: var(--mat-sys-inverse-on-surface);
+  }
 
   // ***********************************************************************************************
   // Font - Apply typography styles
@@ -232,6 +255,26 @@
     letter-spacing: var(--mat-sys-headline-large-tracking);
   }
 
+  // Sets the font to the label small typeface. Use for small labels, such as text in a badge.
+  .mat-font-label-sm {
+    font: var(--mat-sys-label-small);
+    letter-spacing: var(--mat-sys-label-small-tracking);
+  }
+
+  // Sets the font to the label medium typeface. Use for medium labels. In Angular Material, this
+  // is used for the slider label.
+  .mat-font-label-md {
+    font: var(--mat-sys-label-medium);
+    letter-spacing: var(--mat-sys-label-medium-tracking);
+  }
+
+  // Sets the font to the label large typeface. Use for large labels. In Angular Material, this is
+  // used for buttons, chips, and menu labels.
+  .mat-font-label-lg {
+    font: var(--mat-sys-label-large);
+    letter-spacing: var(--mat-sys-label-large-tracking);
+  }
+
   // Sets the font to the title small typeface. Use for small titles, such as a card title. In
   // Angular Material, this is used for the header of a table and the label of an option group.
   .mat-font-title-sm {
@@ -317,68 +360,6 @@
     border: 1px solid var(--mat-sys-outline-variant);
   }
 
-
-  // ***********************************************************************************************
-  // Interactive - Adds interaction colors for hover, active, and focus
-  // ***********************************************************************************************
-
-  // Adds hover, focus, and active states to an element by applying varying shades of the surface
-  // color. Use for interactive components that are not based on a primary color.
-  .mat-interactive {
-    &:hover {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:focus {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:active {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-  }
-
-  // Adds hover, focus, and active states to an element by applying varying shades of the primary
-  // color. Use for interactive components that are not based on a primary color.
-  .mat-interactive-primary {
-    &:hover {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-primary) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:focus {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-primary) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:active {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-  }
-
-
   // ***********************************************************************************************
   // Shadow - Applies elevation levels through box-shadow
   // See https://m3.material.io/styles/elevation/applying-elevation for guidance.

package/core/tokens/m2/_md-sys-color-internal.scss

@@ -0,0 +1,11 @@
+// Dark system color values that are google3-internal and diverge from the
+// external Material Design spec.
+@function values-dark($palettes) {
+  @return ();
+}
+
+// Light system color values that are google3-internal and diverge from the
+// external Material Design spec.
+@function values-light($palettes) {
+  @return ();
+}

package/core/tokens/m2/_md-sys-color.scss

@@ -1,8 +1,9 @@
 @use 'sass:map';
 @use '../../m2/palette';
+@use './md-sys-color-internal';
 
 @function md-sys-color-values-dark($palettes) {
-  @return (
+  $values: (
     primary: map.get($palettes, primary, default),
     on-primary: map.get($palettes, primary, default-contrast),
     inverse-primary: map.get($palettes, primary, 600),
@@ -55,10 +56,14 @@
     tertiary-fixed: map.get($palettes, accent, default),
     tertiary-fixed-dim: map.get($palettes, accent, default),
   );
+
+  $values: map.merge($values, md-sys-color-internal.values-dark($palettes));
+
+  @return $values;
 }
 
 @function md-sys-color-values-light($palettes) {
-  @return (
+  $values: (
     primary: map.get($palettes, primary, default),
     on-primary: map.get($palettes, primary, default-contrast),
     inverse-primary: map.get($palettes, primary, 300),
@@ -111,4 +116,8 @@
     tertiary-fixed: map.get($palettes, accent, default),
     tertiary-fixed-dim: map.get($palettes, accent, default),
   );
+
+  $values: map.merge($values, md-sys-color-internal.values-light($palettes));
+
+  @return $values;
 }

package/core/tokens/m3/_md-sys-color-internal.scss

@@ -0,0 +1,11 @@
+// Dark system color values that are internal-only and diverge from the
+// external Material Design spec.
+@function values-dark($palettes) {
+  @return ();
+}
+
+// Light system color values that are internal-only and diverge from the
+// external Material Design spec.
+@function values-light($palettes) {
+  @return ();
+}

package/core/tokens/m3/_md-sys-color.scss

@@ -1,7 +1,5 @@
 @use 'sass:map';
-
-// Indicates whether alternative tokens should be used
-$_alternate-tokens: false;
+@use './md-sys-color-internal';
 
 @function md-sys-color-values-dark($palettes: ()) {
   $values: (
@@ -53,22 +51,10 @@ $_alternate-tokens: false;
     tertiary: map.get($palettes, tertiary, 80),
     tertiary-container: map.get($palettes, tertiary, 30),
     tertiary-fixed: map.get($palettes, tertiary, 90),
-    tertiary-fixed-dim: map.get($palettes, tertiary, 80)
+    tertiary-fixed-dim: map.get($palettes, tertiary, 80),
   );
 
-  @if ($_alternate-tokens) {
-    $values: map.merge($values, (
-      on-surface-variant: map.get($palettes, neutral-variant, 80),
-      surface-bright: #37393b,
-      surface-container: #1e1f20,
-      surface-container-high: #282a2c,
-      surface-container-highest: #333537,
-      surface-container-low: #1b1b1b,
-      surface-container-lowest: #0e0e0e,
-      surface-dim: #131313,
-      surface-tint: #d1e1ff,
-    ));
-  }
+  $values: map.merge($values, md-sys-color-internal.values-dark($palettes));
 
   @return $values;
 }
@@ -123,22 +109,10 @@ $_alternate-tokens: false;
     tertiary: map.get($palettes, tertiary, 40),
     tertiary-container: map.get($palettes, tertiary, 90),
     tertiary-fixed: map.get($palettes, tertiary, 90),
-    tertiary-fixed-dim: map.get($palettes, tertiary, 80)
+    tertiary-fixed-dim: map.get($palettes, tertiary, 80),
   );
 
-  @if ($_alternate-tokens) {
-    $values: map.merge($values, (
-      background: map.get($palettes, neutral, 100),
-      surface: map.get($palettes, neutral, 100),
-      surface-bright: map.get($palettes, neutral, 100),
-      surface-container: #f0f4f9,
-      surface-container-high: #e9eef6,
-      surface-container-highest: #dde3ea,
-      surface-container-low: #f8fafd,
-      surface-dim: #d3dbe5,
-      surface-tint: #6991d6,
-    ));
-  }
+  $values: map.merge($values, md-sys-color-internal.values-light($palettes));
 
   @return $values;
 }

package/core/tokens/m3/_md-sys-typescale-internal.scss

@@ -0,0 +1,5 @@
+// System typescale values that are internal-only and diverge from the
+// external Material Design spec.
+@function values($typography) {
+  @return ();
+}

package/core/tokens/m3/_md-sys-typescale.scss

@@ -4,9 +4,7 @@
 //
 
 @use 'sass:map';
-
-// Indicates whether alternative tokens should be used
-$_alternate-tokens: false;
+@use './md-sys-typescale-internal';
 
 @function md-sys-typescale-values($typography: ()) {
   $plain: map.get($typography, plain);
@@ -110,19 +108,7 @@ $_alternate-tokens: false;
     title-small-weight: $medium
   );
 
-  @if ($_alternate-tokens) {
-    $values: map.merge($values, (
-      body-large-tracking: 0,
-      body-medium-tracking: 0,
-      body-small-tracking: 0.006rem,
-      display-large-tracking: 0,
-      label-large-tracking: 0,
-      label-medium-tracking: 0.006rem,
-      label-small-tracking: 0.006rem,
-      title-medium-tracking: 0,
-      title-small-tracking: 0,
-    ));
-  }
+  $values: map.merge($values, md-sys-typescale-internal.values($typography));
 
   @return $values;
 }

package/fesm2022/button/testing.mjs

@@ -1,5 +1,6 @@
 import { booleanAttribute } from '@angular/core';
 import { ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { MatIconHarness } from '@angular/material/icon/testing';
 
 /** Harness for interacting with a mat-button in tests. */
 class MatButtonHarness extends ContentContainerComponentHarness {
@@ -27,7 +28,10 @@ class MatButtonHarness extends ContentContainerComponentHarness {
             .addOption('disabled', options.disabled, async (harness, disabled) => {
             return (await harness.isDisabled()) === disabled;
         })
-            .addOption('buttonType', options.buttonType, (harness, buttonType) => HarnessPredicate.stringMatches(harness.getType(), buttonType));
+            .addOption('buttonType', options.buttonType, (harness, buttonType) => HarnessPredicate.stringMatches(harness.getType(), buttonType))
+            .addOption('iconName', options.iconName, (harness, iconName) => {
+            return harness.hasHarness(MatIconHarness.with({ name: iconName }));
+        });
     }
     async click(...args) {
         return (await this.host()).click(...args);

package/fesm2022/button/testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testing.mjs","sources":["../../../../../../darwin_arm64-fastbuild-ST-199a4f3c4e20/bin/src/material/button/testing/button-harness.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {booleanAttribute} from '@angular/core';\nimport {\n  ComponentHarnessConstructor,\n  ContentContainerComponentHarness,\n  HarnessPredicate,\n} from '@angular/cdk/testing';\nimport {\n  ButtonAppearance,\n  ButtonHarnessFilters,\n  ButtonType,\n  ButtonVariant,\n} from './button-harness-filters';\n\n/** Harness for interacting with a mat-button in tests. */\nexport class MatButtonHarness extends ContentContainerComponentHarness {\n  // Note: `.mat-mdc-button-base` should be enough for all buttons, however some apps are using\n  // the harness without actually having an applied button. Keep the attributes for backwards\n  // compatibility.\n\n  /** Selector for the harness. */\n  static hostSelector = `.mat-mdc-button-base, [matButton], [mat-button], [matIconButton],\n    [matFab], [matMiniFab], [mat-raised-button], [mat-flat-button], [mat-icon-button],\n    [mat-stroked-button], [mat-fab], [mat-mini-fab]`;\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes.\n   * @param options Options for narrowing the search:\n   *   - `selector` finds a button whose host element matches the given selector.\n   *   - `text` finds a button with specific text content.\n   *   - `variant` finds buttons matching a specific variant.\n   *   - `appearance` finds buttons matching a specific appearance.\n   * @return a `HarnessPredicate` configured with the given options.\n   */\n  static with<T extends MatButtonHarness>(\n    this: ComponentHarnessConstructor<T>,\n    options: ButtonHarnessFilters = {},\n  ): HarnessPredicate<T> {\n    return new HarnessPredicate(this, options)\n      .addOption('text', options.text, (harness, text) =>\n        HarnessPredicate.stringMatches(harness.getText(), text),\n      )\n      .addOption('variant', options.variant, (harness, variant) =>\n        HarnessPredicate.stringMatches(harness.getVariant(), variant),\n      )\n      .addOption('appearance', options.appearance, (harness, appearance) =>\n        HarnessPredicate.stringMatches(harness.getAppearance(), appearance),\n      )\n      .addOption('disabled', options.disabled, async (harness, disabled) => {\n        return (await harness.isDisabled()) === disabled;\n      })\n      .addOption('buttonType', options.buttonType, (harness, buttonType) =>\n        HarnessPredicate.stringMatches(harness.getType(), buttonType),\n      );\n  }\n\n  /**\n   * Clicks the button at the given position relative to its top-left.\n   * @param relativeX The relative x position of the click.\n   * @param relativeY The relative y position of the click.\n   */\n  click(relativeX: number, relativeY: number): Promise<void>;\n  /** Clicks the button at its center. */\n  click(location: 'center'): Promise<void>;\n  /** Clicks the button. */\n  click(): Promise<void>;\n  async click(...args: [] | ['center'] | [number, number]): Promise<void> {\n    return (await this.host()).click(...(args as []));\n  }\n\n  /** Gets a boolean promise indicating if the button is disabled. */\n  async isDisabled(): Promise<boolean> {\n    const host = await this.host();\n    return (\n      booleanAttribute(await host.getAttribute('disabled')) ||\n      (await host.hasClass('mat-mdc-button-disabled'))\n    );\n  }\n\n  /** Gets a promise for the button's label text. */\n  async getText(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /** Focuses the button and returns a void promise that indicates when the action is complete. */\n  async focus(): Promise<void> {\n    return (await this.host()).focus();\n  }\n\n  /** Blurs the button and returns a void promise that indicates when the action is complete. */\n  async blur(): Promise<void> {\n    return (await this.host()).blur();\n  }\n\n  /** Whether the button is focused. */\n  async isFocused(): Promise<boolean> {\n    return (await this.host()).isFocused();\n  }\n\n  /** Gets the variant of the button. */\n  async getVariant(): Promise<ButtonVariant> {\n    const host = await this.host();\n\n    // TODO(crisbeto): we're checking both classes and attributes for backwards compatibility\n    // with some internal apps that were applying the attribute without importing the directive.\n    // Really we should be only targeting the classes.\n    if (\n      (await host.hasClass('mat-mdc-icon-button')) ||\n      (await host.getAttribute('mat-icon-button')) != null\n    ) {\n      return 'icon';\n    }\n\n    if (\n      (await host.hasClass('mat-mdc-mini-fab')) ||\n      (await host.getAttribute('mat-mini-fab')) != null\n    ) {\n      return 'mini-fab';\n    }\n\n    if ((await host.hasClass('mat-mdc-fab')) || (await host.getAttribute('mat-fab')) != null) {\n      return 'fab';\n    }\n\n    return 'basic';\n  }\n\n  /** Gets the appearance of the button. */\n  async getAppearance(): Promise<ButtonAppearance | null> {\n    const host = await this.host();\n\n    if (await host.hasClass('mat-mdc-outlined-button')) {\n      return 'outlined';\n    }\n\n    if (await host.hasClass('mat-mdc-raised-button')) {\n      return 'elevated';\n    }\n\n    if (await host.hasClass('mat-mdc-unelevated-button')) {\n      return 'filled';\n    }\n\n    if (await host.hasClass('mat-mdc-button')) {\n      return 'text';\n    }\n\n    if (await host.hasClass('mat-tonal-button')) {\n      return 'tonal';\n    }\n\n    return null;\n  }\n\n  /**\n   * Gets the type of the button. Supported values are 'button', 'submit', and 'reset'.\n   */\n  async getType(): Promise<ButtonType | null> {\n    const host = await this.host();\n    const buttonType = await host.getAttribute('type');\n    if (buttonType === 'button' || buttonType === 'submit' || buttonType === 'reset') {\n      return buttonType;\n    }\n    return null;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testing.mjs","sources":["../../../../../../darwin_arm64-fastbuild-ST-199a4f3c4e20/bin/src/material/button/testing/button-harness.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {booleanAttribute} from '@angular/core';\nimport {\n  ComponentHarnessConstructor,\n  ContentContainerComponentHarness,\n  HarnessPredicate,\n} from '@angular/cdk/testing';\nimport {MatIconHarness} from '@angular/material/icon/testing';\nimport {\n  ButtonAppearance,\n  ButtonHarnessFilters,\n  ButtonType,\n  ButtonVariant,\n} from './button-harness-filters';\n\n/** Harness for interacting with a mat-button in tests. */\nexport class MatButtonHarness extends ContentContainerComponentHarness {\n  // Note: `.mat-mdc-button-base` should be enough for all buttons, however some apps are using\n  // the harness without actually having an applied button. Keep the attributes for backwards\n  // compatibility.\n\n  /** Selector for the harness. */\n  static hostSelector = `.mat-mdc-button-base, [matButton], [mat-button], [matIconButton],\n    [matFab], [matMiniFab], [mat-raised-button], [mat-flat-button], [mat-icon-button],\n    [mat-stroked-button], [mat-fab], [mat-mini-fab]`;\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes.\n   * @param options Options for narrowing the search:\n   *   - `selector` finds a button whose host element matches the given selector.\n   *   - `text` finds a button with specific text content.\n   *   - `variant` finds buttons matching a specific variant.\n   *   - `appearance` finds buttons matching a specific appearance.\n   * @return a `HarnessPredicate` configured with the given options.\n   */\n  static with<T extends MatButtonHarness>(\n    this: ComponentHarnessConstructor<T>,\n    options: ButtonHarnessFilters = {},\n  ): HarnessPredicate<T> {\n    return new HarnessPredicate(this, options)\n      .addOption('text', options.text, (harness, text) =>\n        HarnessPredicate.stringMatches(harness.getText(), text),\n      )\n      .addOption('variant', options.variant, (harness, variant) =>\n        HarnessPredicate.stringMatches(harness.getVariant(), variant),\n      )\n      .addOption('appearance', options.appearance, (harness, appearance) =>\n        HarnessPredicate.stringMatches(harness.getAppearance(), appearance),\n      )\n      .addOption('disabled', options.disabled, async (harness, disabled) => {\n        return (await harness.isDisabled()) === disabled;\n      })\n      .addOption('buttonType', options.buttonType, (harness, buttonType) =>\n        HarnessPredicate.stringMatches(harness.getType(), buttonType),\n      )\n      .addOption('iconName', options.iconName, (harness, iconName) => {\n        return harness.hasHarness(MatIconHarness.with({name: iconName}));\n      });\n  }\n\n  /**\n   * Clicks the button at the given position relative to its top-left.\n   * @param relativeX The relative x position of the click.\n   * @param relativeY The relative y position of the click.\n   */\n  click(relativeX: number, relativeY: number): Promise<void>;\n  /** Clicks the button at its center. */\n  click(location: 'center'): Promise<void>;\n  /** Clicks the button. */\n  click(): Promise<void>;\n  async click(...args: [] | ['center'] | [number, number]): Promise<void> {\n    return (await this.host()).click(...(args as []));\n  }\n\n  /** Gets a boolean promise indicating if the button is disabled. */\n  async isDisabled(): Promise<boolean> {\n    const host = await this.host();\n    return (\n      booleanAttribute(await host.getAttribute('disabled')) ||\n      (await host.hasClass('mat-mdc-button-disabled'))\n    );\n  }\n\n  /** Gets a promise for the button's label text. */\n  async getText(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /** Focuses the button and returns a void promise that indicates when the action is complete. */\n  async focus(): Promise<void> {\n    return (await this.host()).focus();\n  }\n\n  /** Blurs the button and returns a void promise that indicates when the action is complete. */\n  async blur(): Promise<void> {\n    return (await this.host()).blur();\n  }\n\n  /** Whether the button is focused. */\n  async isFocused(): Promise<boolean> {\n    return (await this.host()).isFocused();\n  }\n\n  /** Gets the variant of the button. */\n  async getVariant(): Promise<ButtonVariant> {\n    const host = await this.host();\n\n    // TODO(crisbeto): we're checking both classes and attributes for backwards compatibility\n    // with some internal apps that were applying the attribute without importing the directive.\n    // Really we should be only targeting the classes.\n    if (\n      (await host.hasClass('mat-mdc-icon-button')) ||\n      (await host.getAttribute('mat-icon-button')) != null\n    ) {\n      return 'icon';\n    }\n\n    if (\n      (await host.hasClass('mat-mdc-mini-fab')) ||\n      (await host.getAttribute('mat-mini-fab')) != null\n    ) {\n      return 'mini-fab';\n    }\n\n    if ((await host.hasClass('mat-mdc-fab')) || (await host.getAttribute('mat-fab')) != null) {\n      return 'fab';\n    }\n\n    return 'basic';\n  }\n\n  /** Gets the appearance of the button. */\n  async getAppearance(): Promise<ButtonAppearance | null> {\n    const host = await this.host();\n\n    if (await host.hasClass('mat-mdc-outlined-button')) {\n      return 'outlined';\n    }\n\n    if (await host.hasClass('mat-mdc-raised-button')) {\n      return 'elevated';\n    }\n\n    if (await host.hasClass('mat-mdc-unelevated-button')) {\n      return 'filled';\n    }\n\n    if (await host.hasClass('mat-mdc-button')) {\n      return 'text';\n    }\n\n    if (await host.hasClass('mat-tonal-button')) {\n      return 'tonal';\n    }\n\n    return null;\n  }\n\n  /**\n   * Gets the type of the button. Supported values are 'button', 'submit', and 'reset'.\n   */\n  async getType(): Promise<ButtonType | null> {\n    const host = await this.host();\n    const buttonType = await host.getAttribute('type');\n    if (buttonType === 'button' || buttonType === 'submit' || buttonType === 'reset') {\n      return buttonType;\n    }\n    return null;\n  }\n}\n"],"names":[],"mappings":"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"}