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

package/_index.scss

@@ -17,7 +17,7 @@
 @forward './core/theming/theming' as private-* show private-clamp-density;
 @forward './core/typography/typography' show typography-hierarchy;
 @forward './core/typography/typography-utils' show font-shorthand;
-@forward './core/tokens/m2' show m2-tokens-from-theme;
+@forward 'core/tokens/m2-tokens' show m2-tokens-from-theme;
 @forward './core/tokens/m3-system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state, theme, theme-overrides;

package/autocomplete/_autocomplete-theme.scss

@@ -5,16 +5,16 @@
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
+@use 'm2-autocomplete';
 
 @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-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-unthemable-tokens()
+      @include token-utils.create-token-values-mixed(
+        m2-autocomplete.$prefix,
+        m2-autocomplete.get-unthemable-tokens()
       );
     }
   }
@@ -25,9 +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-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-color-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-autocomplete.$prefix,
+        m2-autocomplete.get-color-tokens($theme)
       );
     }
   }
@@ -38,9 +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-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-typography-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-autocomplete.$prefix,
+        m2-autocomplete.get-typography-tokens($theme)
       );
     }
   }
@@ -48,12 +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-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-density-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-autocomplete.$prefix,
+        m2-autocomplete.get-density-tokens($theme)
       );
     }
   }
@@ -63,8 +63,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-autocomplete.$prefix,
-      tokens: tokens-mat-autocomplete.get-token-slots(),
+      namespace: m2-autocomplete.$prefix,
+      tokens: m2-autocomplete.get-token-slots(),
     ),
   );
 }
@@ -98,8 +98,8 @@
   );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-      tokens-mat-autocomplete.$prefix,
-      map.get($tokens, tokens-mat-autocomplete.$prefix)
+      m2-autocomplete.$prefix,
+      map.get($tokens, m2-autocomplete.$prefix)
     );
   }
 }

package/{core/tokens/m2/mat/_autocomplete.scss → autocomplete/_m2-autocomplete.scss}

@@ -1,7 +1,7 @@
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/elevation';
-@use '../../../style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/inspection';
+@use '../core/style/elevation';
+@use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, autocomplete);
@@ -37,8 +37,8 @@ $prefix: (mat, autocomplete);
 @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/{core/tokens/m3/mat/_autocomplete.scss → autocomplete/_m3-autocomplete.scss}

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../style/elevation';
-@use '../../token-definition';
+@use '../core/style/elevation';
+@use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, autocomplete);
@@ -15,7 +15,7 @@ $prefix: (mat, autocomplete);
     background-color: map.get($systems, md-sys-color, surface-container),
     container-shape: map.get($systems, md-sys-shape, corner-extra-small),
     container-elevation-shadow:
-      token-definition.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
+      m3-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
   );
-  @return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
+  @return m3-utils.namespace($prefix, $tokens, $token-slots);
 }

package/autocomplete/index.d.ts

@@ -1,88 +1,70 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, AfterContentInit, OnDestroy, TemplateRef, ElementRef, QueryList, EventEmitter, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
+import * as i2 from '@angular/cdk/overlay';
+import { ScrollStrategy } from '@angular/cdk/overlay';
+import { M as MatOptionModule } from '../index.d-CikM2bbf.js';
+import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
+import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
+import { M as MatOption, a as MatOptgroup, b as MatOptionSelectionChange } from '../option.d-BVGX3edu.js';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { AfterContentInit } from '@angular/core';
-import { AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { ElementRef } from '@angular/core';
-import { EventEmitter } from '@angular/core';
-import * as i0 from '@angular/core';
-import * as i1 from '@angular/cdk/overlay';
-import * as i2 from '@angular/material/core';
-import * as i6 from '@angular/cdk/scrolling';
-import { InjectionToken } from '@angular/core';
-import { MatOptgroup } from '@angular/material/core';
-import { MatOption } from '@angular/material/core';
-import { MatOptionSelectionChange } from '@angular/material/core';
 import { Observable } from 'rxjs';
-import { OnChanges } from '@angular/core';
-import { OnDestroy } from '@angular/core';
-import { Overlay } from '@angular/cdk/overlay';
-import { QueryList } from '@angular/core';
-import { ScrollStrategy } from '@angular/cdk/overlay';
-import { SimpleChanges } from '@angular/core';
-import { TemplateRef } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
+import * as i5 from '@angular/cdk/scrolling';
+import '../index.d-C5neTPvr.js';
+import '../ripple.d-BT30YVLB.js';
+import '@angular/cdk/platform';
+import '../pseudo-checkbox-module.d-BHmTZ10P.js';
+import '@angular/cdk/bidi';
 
-/**
- * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel.
- * @docs-private
- */
-export declare function getMatAutocompleteMissingPanelError(): Error;
-
-declare namespace i3 {
-    export {
-        MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY,
-        MatAutocompleteSelectedEvent,
-        MatAutocompleteActivatedEvent,
-        MatAutocompleteDefaultOptions,
-        MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
-        MatAutocomplete
-    }
+/** Event object that is emitted when an autocomplete option is selected. */
+declare class MatAutocompleteSelectedEvent {
+    /** Reference to the autocomplete panel that emitted the event. */
+    source: MatAutocomplete;
+    /** Option that was selected. */
+    option: MatOption;
+    constructor(
+    /** Reference to the autocomplete panel that emitted the event. */
+    source: MatAutocomplete, 
+    /** Option that was selected. */
+    option: MatOption);
 }
-
-declare namespace i4 {
-    export {
-        getMatAutocompleteMissingPanelError,
-        MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY,
-        MAT_AUTOCOMPLETE_VALUE_ACCESSOR,
-        MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
-        MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER,
-        MatAutocompleteTrigger
-    }
+/** Event object that is emitted when an autocomplete option is activated. */
+interface MatAutocompleteActivatedEvent {
+    /** Reference to the autocomplete panel that emitted the event. */
+    source: MatAutocomplete;
+    /** Option that was selected. */
+    option: MatOption | null;
 }
-
-declare namespace i5 {
-    export {
-        MatAutocompleteOrigin
-    }
+/** Default `mat-autocomplete` options that can be overridden. */
+interface MatAutocompleteDefaultOptions {
+    /** Whether the first option should be highlighted when an autocomplete panel is opened. */
+    autoActiveFirstOption?: boolean;
+    /** Whether the active option should be selected as the user is navigating. */
+    autoSelectActiveOption?: boolean;
+    /**
+     * Whether the user is required to make a selection when
+     * they're interacting with the autocomplete.
+     */
+    requireSelection?: boolean;
+    /** Class to be applied to the autocomplete's backdrop. */
+    backdropClass?: string;
+    /** Whether the autocomplete has a backdrop. */
+    hasBackdrop?: boolean;
+    /** Class or list of classes to be applied to the autocomplete's overlay panel. */
+    overlayPanelClass?: string | string[];
+    /** Whether icon indicators should be hidden for single-selection. */
+    hideSingleSelectionIndicator?: boolean;
 }
-
 /** Injection token to be used to override the default options for `mat-autocomplete`. */
-export declare const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;
-
-/** @docs-private */
-export declare function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefaultOptions;
-
-/** Injection token that determines the scroll handling while the autocomplete panel is open. */
-export declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
-
-/** @docs-private */
-export declare function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
-
-/** @docs-private */
-export declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
-    provide: InjectionToken<() => ScrollStrategy>;
-    deps: (typeof Overlay)[];
-    useFactory: typeof MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY;
-};
-
+declare const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;
 /**
- * Provider that allows the autocomplete to register as a ControlValueAccessor.
  * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
  */
-export declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
-
+declare function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefaultOptions;
 /** Autocomplete component. */
-export declare class MatAutocomplete implements AfterContentInit, OnDestroy {
+declare class MatAutocomplete implements AfterContentInit, OnDestroy {
     private _changeDetectorRef;
     private _elementRef;
     protected _defaults: MatAutocompleteDefaultOptions;
@@ -189,75 +171,59 @@ export declare class MatAutocomplete implements AfterContentInit, OnDestroy {
     static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
 }
 
-/** Event object that is emitted when an autocomplete option is activated. */
-export declare interface MatAutocompleteActivatedEvent {
-    /** Reference to the autocomplete panel that emitted the event. */
-    source: MatAutocomplete;
-    /** Option that was selected. */
-    option: MatOption | null;
-}
-
-/** Default `mat-autocomplete` options that can be overridden. */
-export declare interface MatAutocompleteDefaultOptions {
-    /** Whether the first option should be highlighted when an autocomplete panel is opened. */
-    autoActiveFirstOption?: boolean;
-    /** Whether the active option should be selected as the user is navigating. */
-    autoSelectActiveOption?: boolean;
-    /**
-     * Whether the user is required to make a selection when
-     * they're interacting with the autocomplete.
-     */
-    requireSelection?: boolean;
-    /** Class or list of classes to be applied to the autocomplete's overlay panel. */
-    overlayPanelClass?: string | string[];
-    /** Whether icon indicators should be hidden for single-selection. */
-    hideSingleSelectionIndicator?: boolean;
-}
-
-export declare class MatAutocompleteModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatAutocompleteModule, never, [typeof i1.OverlayModule, typeof i2.MatOptionModule, typeof i2.MatCommonModule, typeof i3.MatAutocomplete, typeof i4.MatAutocompleteTrigger, typeof i5.MatAutocompleteOrigin], [typeof i6.CdkScrollableModule, typeof i3.MatAutocomplete, typeof i2.MatOptionModule, typeof i2.MatCommonModule, typeof i4.MatAutocompleteTrigger, typeof i5.MatAutocompleteOrigin]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MatAutocompleteModule>;
-}
-
 /**
  * Directive applied to an element to make it usable
  * as a connection point for an autocomplete panel.
  */
-export declare class MatAutocompleteOrigin {
+declare class MatAutocompleteOrigin {
     elementRef: ElementRef<HTMLElement>;
     constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteOrigin, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteOrigin, "[matAutocompleteOrigin]", ["matAutocompleteOrigin"], {}, {}, never, never, true, never>;
 }
 
-/** Event object that is emitted when an autocomplete option is selected. */
-export declare class MatAutocompleteSelectedEvent {
-    /** Reference to the autocomplete panel that emitted the event. */
-    source: MatAutocomplete;
-    /** Option that was selected. */
-    option: MatOption;
-    constructor(
-    /** Reference to the autocomplete panel that emitted the event. */
-    source: MatAutocomplete, 
-    /** Option that was selected. */
-    option: MatOption);
-}
-
+/**
+ * Provider that allows the autocomplete to register as a ControlValueAccessor.
+ * @docs-private
+ */
+declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
+/**
+ * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel.
+ * @docs-private
+ */
+declare function getMatAutocompleteMissingPanelError(): Error;
+/** Injection token that determines the scroll handling while the autocomplete panel is open. */
+declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(_overlay: unknown): () => ScrollStrategy;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: any[];
+    useFactory: typeof MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY;
+};
 /** Base class with all of the `MatAutocompleteTrigger` functionality. */
-export declare class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy {
+declare class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy {
     private _environmentInjector;
     private _element;
-    private _overlay;
+    private _injector;
     private _viewContainerRef;
     private _zone;
     private _changeDetectorRef;
     private _dir;
     private _formField;
-    private _document;
     private _viewportRuler;
     private _scrollStrategy;
     private _renderer;
+    private _animationsDisabled;
     private _defaults;
     private _overlayRef;
     private _portal;
@@ -298,6 +264,8 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _pendingAutoselectedOption;
     /** Stream of keyboard events that can close the panel. */
     private readonly _closeKeyEventStream;
+    /** Classes to apply to the panel. Exposed as a public property for internal usage. */
+    readonly _overlayPanelClass: string[];
     /**
      * Event handler for when the window is blurred. Needs to be an
      * arrow function in order to preserve the context.
@@ -365,10 +333,12 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     registerOnChange(fn: (value: any) => {}): void;
     registerOnTouched(fn: () => {}): void;
     setDisabledState(isDisabled: boolean): void;
-    _handleKeydown(event: KeyboardEvent): void;
-    _handleInput(event: KeyboardEvent): void;
+    _handleKeydown(e: Event): void;
+    _handleInput(event: Event): void;
     _handleFocus(): void;
     _handleClick(): void;
+    /** Whether the input currently has focus. */
+    private _hasFocus;
     /**
      * In "auto" mode, the label will animate down as soon as focus is lost.
      * This causes the value to jump when selecting an option with the mouse.
@@ -463,8 +433,11 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     static ngAcceptInputType_autocompleteDisabled: unknown;
 }
 
-export { MatOptgroup }
-
-export { MatOption }
+declare class MatAutocompleteModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatAutocompleteModule, never, [typeof i2.OverlayModule, typeof MatOptionModule, typeof MatCommonModule, typeof MatAutocomplete, typeof MatAutocompleteTrigger, typeof MatAutocompleteOrigin], [typeof i5.CdkScrollableModule, typeof MatAutocomplete, typeof MatOptionModule, typeof MatCommonModule, typeof MatAutocompleteTrigger, typeof MatAutocompleteOrigin]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MatAutocompleteModule>;
+}
 
-export { }
+export { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_AUTOCOMPLETE_VALUE_ACCESSOR, MatAutocomplete, MatAutocompleteModule, MatAutocompleteOrigin, MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatOptgroup, MatOption, getMatAutocompleteMissingPanelError };
+export type { MatAutocompleteActivatedEvent, MatAutocompleteDefaultOptions };

package/autocomplete/testing/index.d.ts

@@ -1,21 +1,16 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarness } from '@angular/cdk/testing';
-import { ComponentHarnessConstructor } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { MatOptgroupHarness } from '@angular/material/core/testing';
-import { MatOptionHarness } from '@angular/material/core/testing';
-import { OptgroupHarnessFilters } from '@angular/material/core/testing';
-import { OptionHarnessFilters } from '@angular/material/core/testing';
+import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
+import { O as OptionHarnessFilters, M as MatOptionHarness } from '../../option-harness.d-IqsW95GR.js';
+import { OptgroupHarnessFilters, MatOptgroupHarness } from '../../core/testing/index.js';
 
 /** A set of criteria that can be used to filter a list of `MatAutocompleteHarness` instances. */
-export declare interface AutocompleteHarnessFilters extends BaseHarnessFilters {
+interface AutocompleteHarnessFilters extends BaseHarnessFilters {
     /** Only find instances whose associated input element matches the given value. */
     value?: string | RegExp;
     /** Only find instances which match the given disabled state. */
     disabled?: boolean;
 }
 
-export declare class MatAutocompleteHarness extends ComponentHarness {
+declare class MatAutocompleteHarness extends ComponentHarness {
     private _documentRootLocator;
     /** The selector for the host element of a `MatAutocomplete` instance. */
     static hostSelector: string;
@@ -54,4 +49,5 @@ export declare class MatAutocompleteHarness extends ComponentHarness {
     protected _getPanelSelector(): Promise<string>;
 }
 
-export { }
+export { MatAutocompleteHarness };
+export type { AutocompleteHarnessFilters };

package/badge/_badge-theme.scss

@@ -3,7 +3,7 @@
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 @use '../core/typography/typography';
-@use '../core/tokens/m2/mat/badge' as tokens-mat-badge;
+@use './m2-badge';
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
@@ -15,9 +15,9 @@
     @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-mat-badge.$prefix,
-        tokens-mat-badge.get-unthemable-tokens()
+      @include token-utils.create-token-values-mixed(
+        m2-badge.$prefix,
+        m2-badge.get-unthemable-tokens()
       );
     }
   }
@@ -33,23 +33,23 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-badge.$prefix,
-        tokens-mat-badge.get-color-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-badge.$prefix,
+        m2-badge.get-color-tokens($theme)
       );
     }
 
     .mat-badge-accent {
-      @include token-utils.create-token-values(
-        tokens-mat-badge.$prefix,
-        tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)
+      @include token-utils.create-token-values-mixed(
+        m2-badge.$prefix,
+        m2-badge.private-get-color-palette-color-tokens($theme, accent)
       );
     }
 
     .mat-badge-warn {
-      @include token-utils.create-token-values(
-        tokens-mat-badge.$prefix,
-        tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)
+      @include token-utils.create-token-values-mixed(
+        m2-badge.$prefix,
+        m2-badge.private-get-color-palette-color-tokens($theme, warn)
       );
     }
   }
@@ -62,9 +62,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-mat-badge.$prefix,
-        tokens-mat-badge.get-typography-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-badge.$prefix,
+        m2-badge.get-typography-tokens($theme)
       );
     }
   }
@@ -74,7 +74,7 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @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 {
   }
 }
@@ -83,8 +83,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-badge.$prefix,
-      tokens: tokens-mat-badge.get-token-slots(),
+      namespace: m2-badge.$prefix,
+      tokens: m2-badge.get-token-slots(),
     ),
   );
 }
@@ -123,6 +123,6 @@
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
-  $mat-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...);
-  @include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens);
+  $mat-badge-tokens: token-utils.get-tokens-for($tokens, m2-badge.$prefix, $options...);
+  @include token-utils.create-token-values(m2-badge.$prefix, $mat-badge-tokens);
 }

package/{core/tokens/m2/mat/_badge.scss → badge/_m2-badge.scss}

@@ -2,9 +2,9 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:color';
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/inspection';
+@use '../core/style/sass-utils';
 
 $_default-size: 22px;
 $_small-size: $_default-size - 6px;
@@ -103,8 +103,8 @@ $prefix: (mat, badge);
 @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)
   );
 }