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

package/{core/tokens/m3/mat/_badge.scss → badge/_m3-badge.scss}

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../style/sass-utils';
-@use '../../token-definition';
+@use '../core/style/sass-utils';
+@use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, badge);
@@ -11,41 +11,42 @@ $prefix: (mat, badge);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the mat-badge
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: ((
+  $tokens: (
     background-color: map.get($systems, md-sys-color, error),
     text-color: map.get($systems, md-sys-color, on-error),
     disabled-state-background-color: sass-utils.safe-color-change(
       map.get($systems, md-sys-color, error),
-      $alpha: 0.38,
-    ),
+      $alpha: 0.38),
     disabled-state-text-color: map.get($systems, md-sys-color, on-error),
     text-font: map.get($systems, md-sys-typescale, label-small-font),
     text-size: map.get($systems, md-sys-typescale, label-small-size),
     text-weight: map.get($systems, md-sys-typescale, label-small-weight),
-    small-size-text-size: token-definition.hardcode(0, $exclude-hardcoded),
+    small-size-text-size: m3-utils.hardcode(0, $exclude-hardcoded),
     container-shape: map.get($systems, md-sys-shape, corner-full),
-    container-size: token-definition.hardcode(16px, $exclude-hardcoded),
-    line-height: token-definition.hardcode(16px, $exclude-hardcoded),
-    legacy-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
-    legacy-small-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
-    small-size-container-size: token-definition.hardcode(6px, $exclude-hardcoded),
-    small-size-line-height: token-definition.hardcode(6px, $exclude-hardcoded),
-    container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
-    small-size-container-padding: token-definition.hardcode(0, $exclude-hardcoded),
-    container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
-    small-size-container-offset: token-definition.hardcode(-6px 0, $exclude-hardcoded),
-    container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded),
-    small-size-container-overlap-offset: token-definition.hardcode(-6px, $exclude-hardcoded),
+    container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
+    line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
+    legacy-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
+    legacy-small-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
+    small-size-container-size: m3-utils.hardcode(6px, $exclude-hardcoded),
+    small-size-line-height: m3-utils.hardcode(6px, $exclude-hardcoded),
+    container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
+    small-size-container-padding: m3-utils.hardcode(0, $exclude-hardcoded),
+    container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
+    small-size-container-offset: m3-utils.hardcode(-6px 0, $exclude-hardcoded),
+    container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
+    small-size-container-overlap-offset: m3-utils.hardcode(-6px, $exclude-hardcoded),
 
     // This size isn't in the M3 spec so we emit the same values as for `medium`.
-    large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
-    large-size-line-height: token-definition.hardcode(16px, $exclude-hardcoded),
-    large-size-container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
-    large-size-container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded),
+    large-size-container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
+    large-size-line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
+    large-size-container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
+    large-size-container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
     large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
-    large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
-    legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
-  ), (
+    large-size-container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
+    legacy-large-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
+  );
+
+  $variant-tokens: (
     primary: (
       background-color: map.get($systems, md-sys-color, primary),
       text-color: map.get($systems, md-sys-color, on-primary),
@@ -74,7 +75,7 @@ $prefix: (mat, badge);
       disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
     ),
     error: () // Default, no overrides needed
-  ));
+  );
 
-  @return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }

package/badge/index.d.ts

@@ -1,119 +1,15 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/a11y';
-import * as i2 from '@angular/material/core';
-import { OnDestroy } from '@angular/core';
-import { OnInit } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
+import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
+import { M as MatBadge, _ as _MatBadgeStyleLoader } from '../badge.d-D0iThVg0.js';
+export { a as MatBadgePosition, b as MatBadgeSize } from '../badge.d-D0iThVg0.js';
+import '@angular/cdk/bidi';
+import '../palette.d-BSSFKjO6.js';
 
-declare namespace i3 {
-    export {
-        MatBadgePosition,
-        MatBadgeSize,
-        _MatBadgeStyleLoader,
-        MatBadge
-    }
-}
-
-/** Directive to display a text badge. */
-export declare class MatBadge implements OnInit, OnDestroy {
-    private _ngZone;
-    private _elementRef;
-    private _ariaDescriber;
-    private _renderer;
-    private _animationMode;
-    private _idGenerator;
-    /**
-     * Theme color of the badge. This API is supported in M2 themes only, it
-     * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/badge/styling.
-     *
-     * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
-     */
-    get color(): ThemePalette;
-    set color(value: ThemePalette);
-    private _color;
-    /** Whether the badge should overlap its contents or not */
-    overlap: boolean;
-    /** Whether the badge is disabled. */
-    disabled: boolean;
-    /**
-     * Position the badge should reside.
-     * Accepts any combination of 'above'|'below' and 'before'|'after'
-     */
-    position: MatBadgePosition;
-    /** The content for the badge */
-    get content(): string | number | undefined | null;
-    set content(newContent: string | number | undefined | null);
-    private _content;
-    /** Message used to describe the decorated element via aria-describedby */
-    get description(): string;
-    set description(newDescription: string);
-    private _description;
-    /** Size of the badge. Can be 'small', 'medium', or 'large'. */
-    size: MatBadgeSize;
-    /** Whether the badge is hidden. */
-    hidden: boolean;
-    /** Visible badge element. */
-    private _badgeElement;
-    /** Inline badge description. Used when the badge is applied to non-interactive host elements. */
-    private _inlineBadgeDescription;
-    /** Whether the OnInit lifecycle hook has run yet */
-    private _isInitialized;
-    /** InteractivityChecker to determine if the badge host is focusable. */
-    private _interactivityChecker;
-    private _document;
-    constructor(...args: unknown[]);
-    /** Whether the badge is above the host or not */
-    isAbove(): boolean;
-    /** Whether the badge is after the host or not */
-    isAfter(): boolean;
-    /**
-     * Gets the element into which the badge's content is being rendered. Undefined if the element
-     * hasn't been created (e.g. if the badge doesn't have content).
-     */
-    getBadgeElement(): HTMLElement | undefined;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    /** Gets whether the badge's host element is interactive. */
-    private _isHostInteractive;
-    /** Creates the badge element */
-    private _createBadgeElement;
-    /** Update the text content of the badge element in the DOM, creating the element if necessary. */
-    private _updateRenderedContent;
-    /** Updates the host element's aria description via AriaDescriber. */
-    private _updateDescription;
-    private _updateInlineDescription;
-    private _removeInlineDescription;
-    /** Adds css theme class given the color to the component host */
-    private _setColor;
-    /** Clears any existing badges that might be left over from server-side rendering. */
-    private _clearExistingBadges;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatBadge, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatBadge, "[matBadge]", never, { "color": { "alias": "matBadgeColor"; "required": false; }; "overlap": { "alias": "matBadgeOverlap"; "required": false; }; "disabled": { "alias": "matBadgeDisabled"; "required": false; }; "position": { "alias": "matBadgePosition"; "required": false; }; "content": { "alias": "matBadge"; "required": false; }; "description": { "alias": "matBadgeDescription"; "required": false; }; "size": { "alias": "matBadgeSize"; "required": false; }; "hidden": { "alias": "matBadgeHidden"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_overlap: unknown;
-    static ngAcceptInputType_disabled: unknown;
-    static ngAcceptInputType_hidden: unknown;
-}
-
-export declare class MatBadgeModule {
+declare class MatBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBadgeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBadgeModule, never, [typeof i1.A11yModule, typeof i2.MatCommonModule, typeof i3.MatBadge, typeof i3._MatBadgeStyleLoader], [typeof i3.MatBadge, typeof i2.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBadgeModule, never, [typeof i1.A11yModule, typeof MatCommonModule, typeof MatBadge, typeof _MatBadgeStyleLoader], [typeof MatBadge, typeof MatCommonModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatBadgeModule>;
 }
 
-/** Allowed position options for matBadgePosition */
-export declare type MatBadgePosition = 'above after' | 'above before' | 'below before' | 'below after' | 'before' | 'after' | 'above' | 'below';
-
-/** Allowed size options for matBadgeSize */
-export declare type MatBadgeSize = 'small' | 'medium' | 'large';
-
-/**
- * Component used to load the structural styles of the badge.
- * @docs-private
- */
-declare class _MatBadgeStyleLoader {
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatBadgeStyleLoader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<_MatBadgeStyleLoader, "ng-component", never, {}, {}, never, never, true, never>;
-}
-
-export { }
+export { MatBadge, MatBadgeModule };

package/badge/testing/index.d.ts

@@ -1,15 +1,14 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarness } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-import { MatBadgePosition } from '@angular/material/badge';
-import { MatBadgeSize } from '@angular/material/badge';
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { a as MatBadgePosition, b as MatBadgeSize } from '../../badge.d-D0iThVg0.js';
+import '@angular/core';
+import '../../palette.d-BSSFKjO6.js';
 
-export declare interface BadgeHarnessFilters extends BaseHarnessFilters {
+interface BadgeHarnessFilters extends BaseHarnessFilters {
     text?: string | RegExp;
 }
 
 /** Harness for interacting with a standard Material badge in tests. */
-export declare class MatBadgeHarness extends ComponentHarness {
+declare class MatBadgeHarness extends ComponentHarness {
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a badge with specific attributes.
@@ -33,4 +32,5 @@ export declare class MatBadgeHarness extends ComponentHarness {
     isDisabled(): Promise<boolean>;
 }
 
-export { }
+export { MatBadgeHarness };
+export type { BadgeHarnessFilters };

package/badge.d-D0iThVg0.d.ts

@@ -0,0 +1,99 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
+import { T as ThemePalette } from './palette.d-BSSFKjO6.js';
+
+/** Allowed position options for matBadgePosition */
+type MatBadgePosition = 'above after' | 'above before' | 'below before' | 'below after' | 'before' | 'after' | 'above' | 'below';
+/** Allowed size options for matBadgeSize */
+type MatBadgeSize = 'small' | 'medium' | 'large';
+/**
+ * Component used to load the structural styles of the badge.
+ * @docs-private
+ */
+declare class _MatBadgeStyleLoader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<_MatBadgeStyleLoader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<_MatBadgeStyleLoader, "ng-component", never, {}, {}, never, never, true, never>;
+}
+/** Directive to display a text badge. */
+declare class MatBadge implements OnInit, OnDestroy {
+    private _ngZone;
+    private _elementRef;
+    private _ariaDescriber;
+    private _renderer;
+    private _animationsDisabled;
+    private _idGenerator;
+    /**
+     * Theme color of the badge. This API is supported in M2 themes only, it
+     * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/badge/styling.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+     */
+    get color(): ThemePalette;
+    set color(value: ThemePalette);
+    private _color;
+    /** Whether the badge should overlap its contents or not */
+    overlap: boolean;
+    /** Whether the badge is disabled. */
+    disabled: boolean;
+    /**
+     * Position the badge should reside.
+     * Accepts any combination of 'above'|'below' and 'before'|'after'
+     */
+    position: MatBadgePosition;
+    /** The content for the badge */
+    get content(): string | number | undefined | null;
+    set content(newContent: string | number | undefined | null);
+    private _content;
+    /** Message used to describe the decorated element via aria-describedby */
+    get description(): string;
+    set description(newDescription: string);
+    private _description;
+    /** Size of the badge. Can be 'small', 'medium', or 'large'. */
+    size: MatBadgeSize;
+    /** Whether the badge is hidden. */
+    hidden: boolean;
+    /** Visible badge element. */
+    private _badgeElement;
+    /** Inline badge description. Used when the badge is applied to non-interactive host elements. */
+    private _inlineBadgeDescription;
+    /** Whether the OnInit lifecycle hook has run yet */
+    private _isInitialized;
+    /** InteractivityChecker to determine if the badge host is focusable. */
+    private _interactivityChecker;
+    private _document;
+    constructor(...args: unknown[]);
+    /** Whether the badge is above the host or not */
+    isAbove(): boolean;
+    /** Whether the badge is after the host or not */
+    isAfter(): boolean;
+    /**
+     * Gets the element into which the badge's content is being rendered. Undefined if the element
+     * hasn't been created (e.g. if the badge doesn't have content).
+     */
+    getBadgeElement(): HTMLElement | undefined;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Gets whether the badge's host element is interactive. */
+    private _isHostInteractive;
+    /** Creates the badge element */
+    private _createBadgeElement;
+    /** Update the text content of the badge element in the DOM, creating the element if necessary. */
+    private _updateRenderedContent;
+    /** Updates the host element's aria description via AriaDescriber. */
+    private _updateDescription;
+    private _updateInlineDescription;
+    private _removeInlineDescription;
+    /** Adds css theme class given the color to the component host */
+    private _setColor;
+    /** Clears any existing badges that might be left over from server-side rendering. */
+    private _clearExistingBadges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatBadge, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatBadge, "[matBadge]", never, { "color": { "alias": "matBadgeColor"; "required": false; }; "overlap": { "alias": "matBadgeOverlap"; "required": false; }; "disabled": { "alias": "matBadgeDisabled"; "required": false; }; "position": { "alias": "matBadgePosition"; "required": false; }; "content": { "alias": "matBadge"; "required": false; }; "description": { "alias": "matBadgeDescription"; "required": false; }; "size": { "alias": "matBadgeSize"; "required": false; }; "hidden": { "alias": "matBadgeHidden"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_overlap: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_hidden: unknown;
+}
+
+export { MatBadge as M, _MatBadgeStyleLoader as _ };
+export type { MatBadgePosition as a, MatBadgeSize as b };

package/bottom-sheet/_bottom-sheet-theme.scss

@@ -5,16 +5,16 @@
 @use '../core/theming/validation';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
+@use './m2-bottom-sheet';
 
 @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-bottom-sheet.$prefix,
-        tokens-mat-bottom-sheet.get-unthemable-tokens()
+      @include token-utils.create-token-values-mixed(
+        m2-bottom-sheet.$prefix,
+        m2-bottom-sheet.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-bottom-sheet.$prefix,
-        tokens-mat-bottom-sheet.get-color-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-bottom-sheet.$prefix,
+        m2-bottom-sheet.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-bottom-sheet.$prefix,
-        tokens-mat-bottom-sheet.get-typography-tokens($theme)
+      @include token-utils.create-token-values-mixed(
+        m2-bottom-sheet.$prefix,
+        m2-bottom-sheet.get-typography-tokens($theme)
       );
     }
   }
@@ -48,7 +48,7 @@
 
 @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 {
   }
 }
@@ -57,8 +57,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-bottom-sheet.$prefix,
-      tokens: tokens-mat-bottom-sheet.get-token-slots(),
+      namespace: m2-bottom-sheet.$prefix,
+      tokens: m2-bottom-sheet.get-token-slots(),
     ),
   );
 }
@@ -92,8 +92,8 @@
   );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-      tokens-mat-bottom-sheet.$prefix,
-      map.get($tokens, tokens-mat-bottom-sheet.$prefix)
+      m2-bottom-sheet.$prefix,
+      map.get($tokens, m2-bottom-sheet.$prefix)
     );
   }
 }

package/{core/tokens/m2/mat/_bottom-sheet.scss → bottom-sheet/_m2-bottom-sheet.scss}

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

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../style/sass-utils';
-@use '../../token-definition';
+@use '../core/style/sass-utils';
+@use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, bottom-sheet);
@@ -12,13 +12,13 @@ $prefix: (mat, bottom-sheet);
 /// @return {Map} A set of custom tokens for the mat-bottom-sheet
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: sass-utils.merge-all(
-    token-definition.generate-typography-tokens($systems, container-text, body-large),
+    m3-utils.generate-typography-tokens($systems, container-text, body-large),
     (
-      container-shape: token-definition.hardcode(28px, $exclude-hardcoded),
+      container-shape: m3-utils.hardcode(28px, $exclude-hardcoded),
       container-text-color: map.get($systems, md-sys-color, on-surface),
       container-background-color: map.get($systems, md-sys-color, surface-container-low),
     ),
   );
 
-  @return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
+  @return m3-utils.namespace($prefix, $tokens, $token-slots);
 }