@angular/material 20.2.1 → 21.0.0-next.1

package/_index.scss

@@ -20,6 +20,7 @@
 @forward 'core/tokens/system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state, theme, theme-overrides, m2-theme;
+@forward 'core/tokens/classes' show system-classes;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;

package/chips/_m3-chip.scss

@@ -49,8 +49,11 @@
       chip-selected-label-text-color: map.get($system, on-secondary-container),
       chip-selected-trailing-action-state-layer-color: map.get($system, on-secondary-container),
       chip-selected-trailing-icon-color: map.get($system, on-secondary-container),
-      chip-trailing-action-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-      chip-trailing-action-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      // Parent chips will show focus/hover state as well so need stronger focus/hover styling here
+      chip-trailing-action-focus-state-layer-opacity:
+        calc(map.get($system, focus-state-layer-opacity) * 2),
+      chip-trailing-action-hover-state-layer-opacity:
+        calc(map.get($system, hover-state-layer-opacity) * 2),
       chip-trailing-action-state-layer-color: map.get($system, on-surface-variant),
       chip-with-icon-disabled-icon-color: map.get($system, on-surface),
       chip-with-icon-icon-color: map.get($system, on-surface-variant),

package/chips/index.d.ts

@@ -12,10 +12,10 @@ import '../ripple.d.js';
 import '@angular/cdk/platform';
 
 /**
- * Section within a chip.
+ * A non-interactive section of a chip.
  * @docs-private
  */
-declare class MatChipAction {
+declare class MatChipContent {
     _elementRef: ElementRef<HTMLElement>;
     protected _parentChip: {
         _handlePrimaryActionInteraction(): void;
@@ -24,8 +24,6 @@ declare class MatChipAction {
         _edit(): void;
         _isEditing?: boolean;
     };
-    /** Whether the action is interactive. */
-    isInteractive: boolean;
     /** Whether this is the primary action in the chip. */
     _isPrimary: boolean;
     /** Whether this is the leading action in the chip. */
@@ -44,18 +42,26 @@ declare class MatChipAction {
      * Determine the value of the disabled attribute for this chip action.
      */
     protected _getDisabledAttribute(): string | null;
+    constructor(...args: unknown[]);
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipContent, "[matChipContent]", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "_allowFocusWhenDisabled": { "alias": "_allowFocusWhenDisabled"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+}
+/**
+ * Interactive section of a chip.
+ * @docs-private
+ */
+declare class MatChipAction extends MatChipContent {
     /**
      * Determine the value of the tabindex attribute for this chip action.
      */
     protected _getTabindex(): string | null;
-    constructor(...args: unknown[]);
-    focus(): void;
     _handleClick(event: MouseEvent): void;
     _handleKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAction, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, { "isInteractive": { "alias": "isInteractive"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "_allowFocusWhenDisabled": { "alias": "_allowFocusWhenDisabled"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_disabled: unknown;
-    static ngAcceptInputType_tabIndex: unknown;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, {}, {}, never, never, true, never>;
 }
 
 /** Avatar image within a chip. */
@@ -64,12 +70,7 @@ declare class MatChipAvatar {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAvatar, "mat-chip-avatar, [matChipAvatar]", never, {}, {}, never, never, true, never>;
 }
 /** Non-interactive trailing icon in a chip. */
-declare class MatChipTrailingIcon extends MatChipAction {
-    /**
-     * MDC considers all trailing actions as a remove icon,
-     * but we support non-interactive trailing icons.
-     */
-    isInteractive: boolean;
+declare class MatChipTrailingIcon extends MatChipContent {
     _isPrimary: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipTrailingIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipTrailingIcon, "mat-chip-trailing-icon, [matChipTrailingIcon]", never, {}, {}, never, never, true, never>;
@@ -498,7 +499,7 @@ declare class MatChipSet implements AfterViewInit, OnDestroy {
      * Determines if key manager should avoid putting a given chip action in the tab index. Skip
      * non-interactive and disabled actions since the user can't do anything with them.
      */
-    protected _skipPredicate(action: MatChipAction): boolean;
+    protected _skipPredicate(action: MatChipContent): boolean;
     /** Listens to changes in the chip set and syncs up the state of the individual chips. */
     private _trackChipSetChanges;
     /** Starts tracking the destroyed chips in order to capture the focused one. */
@@ -694,9 +695,10 @@ declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterV
      */
     readonly controlType: string;
     /** The chip input to add more chips */
-    protected _chipInput: MatChipTextControl;
+    protected _chipInput?: MatChipTextControl;
     protected _defaultRole: string;
     private _errorStateTracker;
+    private _uid;
     /**
      * List of element ids to propagate to the chipInput's aria-describedby attribute.
      */
@@ -780,7 +782,6 @@ declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterV
     set errorState(value: boolean);
     constructor(...args: unknown[]);
     ngAfterContentInit(): void;
-    ngAfterViewInit(): void;
     ngDoCheck(): void;
     ngOnDestroy(): void;
     /** Associates an HTML input element with this chip grid. */

package/core/tokens/_classes.scss

@@ -0,0 +1,413 @@
+// Utility classes that can be used to style elements with the most commonly used system tokens in
+// Material Design. Includes color, typography, elevation, and shape.
+@mixin system-classes() {
+
+  // ***********************************************************************************************
+  // Background
+  // ***********************************************************************************************
+
+  // 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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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.
+  .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);
+  }
+
+
+  // ***********************************************************************************************
+  // Text
+  // ***********************************************************************************************
+
+  // Styles the text of an element with the primary color. Use for text that needs to stand out.
+  // In Angular Material, this is used for the text of a text button and the selected tab label.
+  .mat-text-primary {
+    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.
+  .mat-text-secondary {
+    color: var(--mat-sys-secondary);
+  }
+
+  // Styles the text of an element with the error color. Use for text that indicates an error, such
+  // as validation messages. In Angular Material, this is used for the error text in a form field.
+  .mat-text-error {
+    color: var(--mat-sys-error);
+  }
+
+  // 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);
+  }
+
+
+  // ***********************************************************************************************
+  // Font
+  // ***********************************************************************************************
+
+  // Sets the font to the body small typeface. Use for small body text, such as captions. In Angular
+  // Material, this is used for the subscript text in a form field and the text in a paginator.
+  .mat-font-body-sm {
+    font: var(--mat-sys-body-small);
+    letter-spacing: var(--mat-sys-body-small-tracking);
+  }
+
+  // Sets the font to the body medium typeface. Use for medium body text, this is the default
+  // body font. In Angular Material, this is used for the text in a table row and the supporting
+  // text in a dialog.
+  .mat-font-body-md {
+    font: var(--mat-sys-body-medium);
+    letter-spacing: var(--mat-sys-body-medium-tracking);
+  }
+
+  // Sets the font to the body large typeface. Use for large body text, such as an introductory
+  // paragraph. In Angular Material, this is used for the text in a list item and the text in a
+  // select trigger.
+  .mat-font-body-lg {
+    font: var(--mat-sys-body-large);
+    letter-spacing: var(--mat-sys-body-large-tracking);
+  }
+
+  // Sets the font to the display small typeface. Use for small display text, such as a date.
+  .mat-font-display-sm {
+    font: var(--mat-sys-display-small);
+    letter-spacing: var(--mat-sys-display-small-tracking);
+  }
+
+  // Sets the font to the display medium typeface. Use for medium display text, such as a hero
+  // title.
+  .mat-font-display-md {
+    font: var(--mat-sys-display-medium);
+    letter-spacing: var(--mat-sys-display-medium-tracking);
+  }
+
+  // Sets the font to the display large typeface. Use for large display text, such as a hero title.
+  .mat-font-display-lg {
+    font: var(--mat-sys-display-large);
+    letter-spacing: var(--mat-sys-display-large-tracking);
+  }
+
+  // Sets the font to the headline small typeface. Use for small headlines, such as a page title. In
+  // Angular Material, this is used for the headline in a dialog.
+  .mat-font-headline-sm {
+    font: var(--mat-sys-headline-small);
+    letter-spacing: var(--mat-sys-headline-small-tracking);
+  }
+
+  // Sets the font to the headline medium typeface. Use for medium headlines, such as a section
+  // title.
+  .mat-font-headline-md {
+    font: var(--mat-sys-headline-medium);
+    letter-spacing: var(--mat-sys-headline-medium-tracking);
+  }
+
+  // Sets the font to the headline large typeface. Use for large headlines, such as a page title on
+  // a large screen.
+  .mat-font-headline-lg {
+    font: var(--mat-sys-headline-large);
+    letter-spacing: var(--mat-sys-headline-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 {
+    font: var(--mat-sys-title-small);
+    letter-spacing: var(--mat-sys-title-small-tracking);
+  }
+
+  // Sets the font to the title medium typeface. Use for medium titles, such as a dialog title
+  // or the primary text in a list item. In Angular Material, this is used for the subtitle
+  // of a card and the header of an expansion panel.
+  .mat-font-title-md {
+    font: var(--mat-sys-title-medium);
+    letter-spacing: var(--mat-sys-title-medium-tracking);
+  }
+
+  // Sets the font to the title large typeface. Use for large titles, such as a page title on a
+  // small screen. In Angular Material, this is used for the title of a card and the title of a
+  // toolbar.
+  .mat-font-title-lg {
+    font: var(--mat-sys-title-large);
+    letter-spacing: var(--mat-sys-title-large-tracking);
+  }
+
+
+  // ***********************************************************************************************
+  // Corner
+  // ***********************************************************************************************
+
+  // Sets the border radius to extra small. Use for components that need a small amount of rounding,
+  // such as a chip. In Angular Material, this is used for the shape of a snackbar and a tooltip.
+  .mat-rounded-extra-sm {
+    border-radius: var(--mat-sys-corner-extra-small);
+  }
+
+  // Sets the border radius to small. Use for components that need a small amount of rounding, such
+  // as a text field.
+  .mat-rounded-sm {
+    border-radius: var(--mat-sys-corner-small);
+  }
+
+  // Sets the border radius to medium. Use for components that need a medium amount of rounding,
+  // such as a button. In Angular Material, this is used for the shape of a card.
+  .mat-rounded-md {
+    border-radius: var(--mat-sys-corner-medium);
+  }
+
+  // Sets the border radius to large. Use for components that need a large amount of rounding, such
+  // as a card. In Angular Material, this is used for the shape of a floating action button and a
+  // datepicker.
+  .mat-rounded-lg {
+    border-radius: var(--mat-sys-corner-large);
+  }
+
+  // Sets the border radius to extra large. Use for components that need a large amount of
+  // rounding. In Angular Material, this is used for the shape of a button toggle and the shape of
+  // a dialog.
+  .mat-rounded-xl {
+    border-radius: var(--mat-sys-corner-extra-large);
+  }
+
+  // Sets the border radius to full. Use for components that are circular, such as a user avatar.
+  // In Angular Material, this is used for the shape of a badge and the shape of a button.
+  .mat-rounded-full {
+    border-radius: var(--mat-sys-corner-full);
+  }
+
+
+  // ***********************************************************************************************
+  // Border
+  // ***********************************************************************************************
+
+  // Adds an outline to an element. Use for components that need a visible boundary. In Angular
+  // Material, this is used for the outline of an outlined button.
+  .mat-border {
+    border: 1px solid var(--mat-sys-outline);
+  }
+
+  // Adds a less prominent outline to an element. Use for components that need a less obvious
+  // boundary. In Angular Material, this is used for the outline of an outlined card and the color
+  // of the divider
+  .mat-border-subtle {
+    border: 1px solid var(--mat-sys-outline-variant);
+  }
+
+
+  // ***********************************************************************************************
+  // State
+  // ***********************************************************************************************
+
+  // 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-stateful {
+    &: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-stateful-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
+      );
+    }
+  }
+
+
+  // ***********************************************************************************************
+  // Elevation
+  // ***********************************************************************************************
+
+  // Use to slightly raise the appearance of a surface. In Angular Material, this is used for the
+  // elevation of an elevated card and the handle of a slider.
+  .mat-shadow-1 {
+    box-shadow: var(--mat-sys-level1);
+  }
+
+  // Use to raise the appearance of a surface. In Angular Material, this is used for the
+  // elevation of a menu and a select panel.
+  .mat-shadow-2 {
+    box-shadow: var(--mat-sys-level2);
+  }
+
+  // Used to raise the appearance of a surface. In Angular Material, this is used for the elevation
+  // of a floating action button.
+  .mat-shadow-3 {
+    box-shadow: var(--mat-sys-level3);
+  }
+
+  // Used to raise the appearance of a surface. This is generally reserved for elevation changes
+  // due to interaction like focus and hover. In Angular Material, this is used for the elevation
+  // of a hovered floating action button.
+  .mat-shadow-4 {
+    box-shadow: var(--mat-sys-level4);
+  }
+
+  // Used to greatly raise the appearance of a surface. This is generally reserved for elevation
+  // changes due to interaction like focus and hover.
+  .mat-shadow-5 {
+    box-shadow: var(--mat-sys-level5);
+  }
+}