@angular/material 20.0.0-next.0 → 20.0.0-next.10

package/button-toggle/testing/index.d.ts

@@ -1,16 +1,11 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarness } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { MatButtonToggleAppearance } from '@angular/material/button-toggle';
-
-/** Criteria that can be used to filter a list of `MatButtonToggleGroupHarness` instances. */
-export declare interface ButtonToggleGroupHarnessFilters extends BaseHarnessFilters {
-    /** Only find instances which match the given disabled state. */
-    disabled?: boolean;
-}
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { b as MatButtonToggleAppearance } from '../../button-toggle.d-B_G01PhW.js';
+import '@angular/cdk/bidi';
+import '@angular/core';
+import '@angular/forms';
 
 /** Criteria that can be used to filter a list of `MatButtonToggleHarness` instances. */
-export declare interface ButtonToggleHarnessFilters extends BaseHarnessFilters {
+interface ButtonToggleHarnessFilters extends BaseHarnessFilters {
     /** Only find instances whose text matches the given value. */
     text?: string | RegExp;
     /** Only find instances whose name matches the given value. */
@@ -22,31 +17,7 @@ export declare interface ButtonToggleHarnessFilters extends BaseHarnessFilters {
 }
 
 /** Harness for interacting with a standard mat-button-toggle in tests. */
-export declare class MatButtonToggleGroupHarness extends ComponentHarness {
-    /** The selector for the host element of a `MatButton` instance. */
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MatButtonToggleGroupHarness`
-     * that meets certain criteria.
-     * @param options Options for filtering which button toggle instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options?: ButtonToggleGroupHarnessFilters): HarnessPredicate<MatButtonToggleGroupHarness>;
-    /**
-     * Gets the button toggles that are inside the group.
-     * @param filter Optionally filters which toggles are included.
-     */
-    getToggles(filter?: ButtonToggleHarnessFilters): Promise<MatButtonToggleHarness[]>;
-    /** Gets whether the button toggle group is disabled. */
-    isDisabled(): Promise<boolean>;
-    /** Gets whether the button toggle group is laid out vertically. */
-    isVertical(): Promise<boolean>;
-    /** Gets the appearance that the group is using. */
-    getAppearance(): Promise<MatButtonToggleAppearance>;
-}
-
-/** Harness for interacting with a standard mat-button-toggle in tests. */
-export declare class MatButtonToggleHarness extends ComponentHarness {
+declare class MatButtonToggleHarness extends ComponentHarness {
     /** The selector for the host element of a `MatButton` instance. */
     static hostSelector: string;
     private _label;
@@ -92,4 +63,35 @@ export declare class MatButtonToggleHarness extends ComponentHarness {
     uncheck(): Promise<void>;
 }
 
-export { }
+/** Criteria that can be used to filter a list of `MatButtonToggleGroupHarness` instances. */
+interface ButtonToggleGroupHarnessFilters extends BaseHarnessFilters {
+    /** Only find instances which match the given disabled state. */
+    disabled?: boolean;
+}
+
+/** Harness for interacting with a standard mat-button-toggle in tests. */
+declare class MatButtonToggleGroupHarness extends ComponentHarness {
+    /** The selector for the host element of a `MatButton` instance. */
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a `MatButtonToggleGroupHarness`
+     * that meets certain criteria.
+     * @param options Options for filtering which button toggle instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: ButtonToggleGroupHarnessFilters): HarnessPredicate<MatButtonToggleGroupHarness>;
+    /**
+     * Gets the button toggles that are inside the group.
+     * @param filter Optionally filters which toggles are included.
+     */
+    getToggles(filter?: ButtonToggleHarnessFilters): Promise<MatButtonToggleHarness[]>;
+    /** Gets whether the button toggle group is disabled. */
+    isDisabled(): Promise<boolean>;
+    /** Gets whether the button toggle group is laid out vertically. */
+    isVertical(): Promise<boolean>;
+    /** Gets the appearance that the group is using. */
+    getAppearance(): Promise<MatButtonToggleAppearance>;
+}
+
+export { MatButtonToggleGroupHarness, MatButtonToggleHarness };
+export type { ButtonToggleGroupHarnessFilters, ButtonToggleHarnessFilters };

package/button-toggle.d-B_G01PhW.d.ts

@@ -0,0 +1,258 @@
+import { Direction } from '@angular/cdk/bidi';
+import * as i0 from '@angular/core';
+import { InjectionToken, OnInit, AfterContentInit, QueryList, EventEmitter, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * @deprecated No longer used.
+ * @breaking-change 11.0.0
+ */
+type ToggleType = 'checkbox' | 'radio';
+/** Possible appearance styles for the button toggle. */
+type MatButtonToggleAppearance = 'legacy' | 'standard';
+/**
+ * Represents the default options for the button toggle that can be configured
+ * using the `MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS` injection token.
+ */
+interface MatButtonToggleDefaultOptions {
+    /**
+     * Default appearance to be used by button toggles. Can be overridden by explicitly
+     * setting an appearance on a button toggle or group.
+     */
+    appearance?: MatButtonToggleAppearance;
+    /** Whether icon indicators should be hidden for single-selection button toggle groups. */
+    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;
+}
+/**
+ * Injection token that can be used to configure the
+ * default options for all button toggles within an app.
+ */
+declare const MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatButtonToggleDefaultOptions>;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare function MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY(): MatButtonToggleDefaultOptions;
+/**
+ * Injection token that can be used to reference instances of `MatButtonToggleGroup`.
+ * It serves as alternative token to the actual `MatButtonToggleGroup` class which
+ * could cause unnecessary retention of the class and its component metadata.
+ */
+declare const MAT_BUTTON_TOGGLE_GROUP: InjectionToken<MatButtonToggleGroup>;
+/**
+ * Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor.
+ * This allows it to support [(ngModel)].
+ * @docs-private
+ */
+declare const MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any;
+/** Change event object emitted by button toggle. */
+declare class MatButtonToggleChange {
+    /** The button toggle that emits the event. */
+    source: MatButtonToggle;
+    /** The value assigned to the button toggle. */
+    value: any;
+    constructor(
+    /** The button toggle that emits the event. */
+    source: MatButtonToggle, 
+    /** The value assigned to the button toggle. */
+    value: any);
+}
+/** Exclusive selection button toggle group that behaves like a radio-button group. */
+declare class MatButtonToggleGroup implements ControlValueAccessor, OnInit, AfterContentInit {
+    private _changeDetector;
+    private _dir;
+    private _multiple;
+    private _disabled;
+    private _disabledInteractive;
+    private _selectionModel;
+    /**
+     * Reference to the raw value that the consumer tried to assign. The real
+     * value will exclude any values from this one that don't correspond to a
+     * toggle. Useful for the cases where the value is assigned before the toggles
+     * have been initialized or at the same that they're being swapped out.
+     */
+    private _rawValue;
+    /**
+     * The method to be called in order to update ngModel.
+     * Now `ngModel` binding is not supported in multiple selection mode.
+     */
+    _controlValueAccessorChangeFn: (value: any) => void;
+    /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+    _onTouched: () => any;
+    /** Child button toggle buttons. */
+    _buttonToggles: QueryList<MatButtonToggle>;
+    /** The appearance for all the buttons in the group. */
+    appearance: MatButtonToggleAppearance;
+    /** `name` attribute for the underlying `input` element. */
+    get name(): string;
+    set name(value: string);
+    private _name;
+    /** Whether the toggle group is vertical. */
+    vertical: boolean;
+    /** Value of the toggle group. */
+    get value(): any;
+    set value(newValue: any);
+    /**
+     * Event that emits whenever the value of the group changes.
+     * Used to facilitate two-way data binding.
+     * @docs-private
+     */
+    readonly valueChange: EventEmitter<any>;
+    /** Selected button toggles in the group. */
+    get selected(): MatButtonToggle | MatButtonToggle[];
+    /** Whether multiple button toggles can be selected. */
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    /** 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. */
+    readonly change: EventEmitter<MatButtonToggleChange>;
+    /** Whether checkmark indicator for single-selection button toggle groups is hidden. */
+    get hideSingleSelectionIndicator(): boolean;
+    set hideSingleSelectionIndicator(value: boolean);
+    private _hideSingleSelectionIndicator;
+    /** Whether checkmark indicator for multiple-selection button toggle groups is hidden. */
+    get hideMultipleSelectionIndicator(): boolean;
+    set hideMultipleSelectionIndicator(value: boolean);
+    private _hideMultipleSelectionIndicator;
+    constructor(...args: unknown[]);
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    /**
+     * Sets the model value. Implemented as part of ControlValueAccessor.
+     * @param value Value to be set to the model.
+     */
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** Handle keydown event calling to single-select button toggle. */
+    protected _keydown(event: KeyboardEvent): void;
+    /** Dispatch change event with current selection and group value. */
+    _emitChangeEvent(toggle: MatButtonToggle): void;
+    /**
+     * Syncs a button toggle's selected state with the model value.
+     * @param toggle Toggle to be synced.
+     * @param select Whether the toggle should be selected.
+     * @param isUserInput Whether the change was a result of a user interaction.
+     * @param deferEvents Whether to defer emitting the change events.
+     */
+    _syncButtonToggle(toggle: MatButtonToggle, select: boolean, isUserInput?: boolean, deferEvents?: boolean): void;
+    /** Checks whether a button toggle is selected. */
+    _isSelected(toggle: MatButtonToggle): boolean;
+    /** Determines whether a button toggle should be checked on init. */
+    _isPrechecked(toggle: MatButtonToggle): boolean;
+    /** Initializes the tabindex attribute using the radio pattern. */
+    private _initializeTabIndex;
+    /** Obtain the subsequent toggle to which the focus shifts. */
+    private _getNextButton;
+    /** Updates the selection state of the toggles in the group based on a value. */
+    private _setSelectionByValue;
+    /** Clears the selected toggles. */
+    private _clearSelection;
+    /** Selects a value if there's a toggle that corresponds to it. */
+    private _selectValue;
+    /** Syncs up the group's value with the model and emits the change event. */
+    private _updateModelValue;
+    /** Marks all of the child button toggles to be checked. */
+    private _markButtonsForCheck;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggleGroup, 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;
+}
+/** Single button inside of a toggle group. */
+declare class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
+    private _changeDetectorRef;
+    private _elementRef;
+    private _focusMonitor;
+    private _idGenerator;
+    private _animationDisabled;
+    private _checked;
+    /**
+     * Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will
+     * take precedence so this may be omitted.
+     */
+    ariaLabel: string;
+    /**
+     * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
+     */
+    ariaLabelledby: string | null;
+    /** Underlying native `button` element. */
+    _buttonElement: ElementRef<HTMLButtonElement>;
+    /** The parent button toggle group (exclusive selection). Optional. */
+    buttonToggleGroup: MatButtonToggleGroup;
+    /** Unique ID for the underlying `button` element. */
+    get buttonId(): string;
+    /** The unique ID for this button toggle. */
+    id: string;
+    /** HTML's 'name' attribute used to group radios for unique selection. */
+    name: string;
+    /** MatButtonToggleGroup reads this to assign its own value. */
+    value: any;
+    /** Tabindex of the toggle. */
+    get tabIndex(): number | null;
+    set tabIndex(value: number | null);
+    private _tabIndex;
+    /** Whether ripples are disabled on the button toggle. */
+    disableRipple: boolean;
+    /** The appearance style of the button. */
+    get appearance(): MatButtonToggleAppearance;
+    set appearance(value: MatButtonToggleAppearance);
+    private _appearance;
+    /** Whether the button is checked. */
+    get checked(): boolean;
+    set checked(value: boolean);
+    /** Whether the button is disabled. */
+    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(...args: unknown[]);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Focuses the button. */
+    focus(options?: FocusOptions): void;
+    /** Checks the button toggle due to an interaction with the underlying native button. */
+    _onButtonClick(): void;
+    /**
+     * Marks the button toggle as needing checking for change detection.
+     * This method is exposed because the parent button toggle group will directly
+     * update bound properties of the radio button.
+     */
+    _markForCheck(): void;
+    /** Gets the name that should be assigned to the inner DOM node. */
+    _getButtonName(): string | null;
+    /** Whether the toggle is in single selection mode. */
+    isSingleSelector(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggle, 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;
+}
+
+export { MatButtonToggleGroup as M, MatButtonToggle as a, MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS as d, MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY as e, MAT_BUTTON_TOGGLE_GROUP as f, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR as g, MatButtonToggleChange as h };
+export type { ToggleType as T, MatButtonToggleAppearance as b, MatButtonToggleDefaultOptions as c };

package/card/_card-theme.scss

@@ -5,26 +5,16 @@
 @use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mat/card' as tokens-mat-card;
-@use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card;
-@use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card;
+@use './m2-card';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-elevated-card.$prefix,
-        tokens-mdc-elevated-card.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values(
-        tokens-mdc-outlined-card.$prefix,
-        tokens-mdc-outlined-card.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-card.$prefix,
-        tokens-mat-card.get-unthemable-tokens()
+      @include token-utils.create-token-values-mixed(
+        m2-card.$prefix,
+        m2-card.get-unthemable-tokens()
       );
     }
   }
@@ -35,17 +25,9 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-elevated-card.$prefix,
-        tokens-mdc-elevated-card.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mdc-outlined-card.$prefix,
-        tokens-mdc-outlined-card.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-card.$prefix,
-        tokens-mat-card.get-color-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-card.$prefix,
+        m2-card.get-color-tokens($theme)
       );
     }
   }
@@ -56,17 +38,9 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-elevated-card.$prefix,
-        tokens-mdc-elevated-card.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mdc-outlined-card.$prefix,
-        tokens-mdc-outlined-card.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-card.$prefix,
-        tokens-mat-card.get-typography-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-card.$prefix,
+        m2-card.get-typography-tokens($theme)
       );
     }
   }
@@ -74,20 +48,12 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-elevated-card.$prefix,
-        tokens-mdc-elevated-card.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mdc-outlined-card.$prefix,
-        tokens-mdc-outlined-card.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-card.$prefix,
-        tokens-mat-card.get-density-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-card.$prefix,
+        m2-card.get-density-tokens($theme)
       );
     }
   }
@@ -97,18 +63,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-card.$prefix,
-      tokens: tokens-mat-card.get-token-slots(),
-    ),
-    (
-      namespace: tokens-mdc-elevated-card.$prefix,
-      tokens: tokens-mdc-elevated-card.get-token-slots(),
-      prefix: 'elevated-',
-    ),
-    (
-      namespace: tokens-mdc-outlined-card.$prefix,
-      tokens: tokens-mdc-outlined-card.get-token-slots(),
-      prefix: 'outlined-',
+      namespace: m2-card.$prefix,
+      tokens: m2-card.get-token-slots(),
     ),
   );
 }
@@ -142,16 +98,8 @@
   );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-      tokens-mdc-elevated-card.$prefix,
-      map.get($tokens, tokens-mdc-elevated-card.$prefix)
-    );
-    @include token-utils.create-token-values(
-      tokens-mdc-outlined-card.$prefix,
-      map.get($tokens, tokens-mdc-outlined-card.$prefix)
-    );
-    @include token-utils.create-token-values(
-      tokens-mat-card.$prefix,
-      map.get($tokens, tokens-mat-card.$prefix)
+      m2-card.$prefix,
+      map.get($tokens, m2-card.$prefix)
     );
   }
 }

package/{core/tokens/m2/mat/_card.scss → card/_m2-card.scss}

@@ -1,6 +1,7 @@
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/inspection';
+@use '../core/style/sass-utils';
+@use '../core/style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, card);
@@ -8,39 +9,40 @@ $prefix: (mat, card);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    elevated-container-shape: 4px,
+    outlined-container-shape: 4px,
+    filled-container-shape: 4px,
+    outlined-outline-width: 1px,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    // Text color of the card's subtitle.
+    elevated-container-color: inspection.get-theme-color($theme, background, card),
+    elevated-container-elevation: elevation.get-box-shadow(1),
+    outlined-container-color: inspection.get-theme-color($theme, background, card),
+    outlined-container-elevation: elevation.get-box-shadow(0),
+    outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
     subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
+    filled-container-color: inspection.get-theme-color($theme, background, card),
+    filled-container-elevation: elevation.get-box-shadow(0)
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    // Font family of the card's title.
     title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
-    // Line height of the card's title.
     title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
-    // Font size of the card's title.
     title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
-    // Letter spacing of the card's title.
     title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
-    // Font weight of the card's title.
     title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
-    // Font family of the card's subtitle.
     subtitle-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
-    // Line height of the card's subtitle.
     subtitle-text-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height),
-    // Font size of the card's subtitle.
     subtitle-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
-    // Letter spacing of the card's subtitle.
     subtitle-text-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
-    // Font weight of the card's subtitle.
     subtitle-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
   );
 }
@@ -55,8 +57,8 @@ $prefix: (mat, card);
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
       get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
+      get-color-tokens(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

package/card/_m3-card.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use '../core/style/sass-utils';
+@use '../core/tokens/m3-utils';
+@use '../core/style/elevation';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, card);
+
+/// Generates custom tokens for the mat-card.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-card
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    m3-utils.generate-typography-tokens($systems, title-text, title-large),
+    m3-utils.generate-typography-tokens($systems, subtitle-text, title-medium),
+    (
+      subtitle-text-color: map.get($systems, md-sys-color, on-surface),
+      elevated-container-color: map.get($systems, md-sys-color, surface-container-low),
+      elevated-container-elevation: map.get($systems, md-sys-elevation, level1),
+      elevated-container-shape: map.get($systems, md-sys-shape, corner-medium),
+      outlined-container-color: map.get($systems, md-sys-color, surface),
+      outlined-container-elevation: map.get($systems, md-sys-elevation, level0),
+      outlined-container-shape: map.get($systems, md-sys-shape, corner-medium),
+      outlined-outline-color: map.get($systems, md-sys-color, outline-variant),
+      outlined-outline-width: if($exclude-hardcoded, null, 1px),
+      filled-container-color: map.get($systems, md-sys-color, surface-container-highest),
+      filled-container-elevation: map.get($systems, md-sys-elevation, level0),
+      filled-container-shape: map.get($systems, md-sys-shape, corner-medium),
+    ),
+  );
+
+  $elevated-elevation: map.get($tokens, elevated-container-elevation);
+  @if ($elevated-elevation != null) {
+    $tokens: map.set($tokens, elevated-container-elevation,
+        elevation.get-box-shadow($elevated-elevation));
+  }
+
+  $outlined-elevation: map.get($tokens, outlined-container-elevation);
+  @if ($outlined-elevation != null) {
+    $tokens: map.set($tokens, outlined-container-elevation,
+        elevation.get-box-shadow($outlined-elevation));
+  }
+
+  @return m3-utils.namespace($prefix, $tokens, $token-slots);
+}
+