@angular/material 16.0.2 → 16.1.0-next.1

package/autocomplete/index.d.ts

@@ -452,6 +452,34 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     private _scrollToOption;
     /** Handles keyboard events coming from the overlay panel. */
     private _handleOverlayEvents;
+    /**
+     * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is
+     * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options
+     * panel. Track the modal we have changed so we can undo the changes on destroy.
+     */
+    private _trackedModal;
+    /**
+     * If the autocomplete trigger is inside of an `aria-modal` element, connect
+     * that modal to the options panel with `aria-owns`.
+     *
+     * For some browser + screen reader combinations, when navigation is inside
+     * of an `aria-modal` element, the screen reader treats everything outside
+     * of that modal as hidden or invisible.
+     *
+     * This causes a problem when the combobox trigger is _inside_ of a modal, because the
+     * options panel is rendered _outside_ of that modal, preventing screen reader navigation
+     * from reaching the panel.
+     *
+     * We can work around this issue by applying `aria-owns` to the modal with the `id` of
+     * the options panel. This effectively communicates to assistive technology that the
+     * options panel is part of the same interaction as the modal.
+     *
+     * At time of this writing, this issue is present in VoiceOver.
+     * See https://github.com/angular/components/issues/20694
+     */
+    private _applyModalPanelOwnership;
+    /** Clears the references to the listbox overlay element from the modal it was added to. */
+    private _clearFromModal;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatAutocompleteTriggerBase, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteTriggerBase, never, never, { "autocomplete": { "alias": "matAutocomplete"; "required": false; }; "position": { "alias": "matAutocompletePosition"; "required": false; }; "connectedTo": { "alias": "matAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "matAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
 }

package/autocomplete/testing/index.d.ts

@@ -29,6 +29,8 @@ export declare class MatAutocompleteHarness extends _MatAutocompleteHarnessBase<
      * @return a `HarnessPredicate` configured with the given options.
      */
     static with<T extends MatAutocompleteHarness>(this: ComponentHarnessConstructor<T>, options?: AutocompleteHarnessFilters): HarnessPredicate<T>;
+    /** Gets the selector that can be used to find the autocomplete trigger's panel. */
+    protected _getPanelSelector(): Promise<string>;
 }
 
 export declare abstract class _MatAutocompleteHarnessBase<OptionType extends ComponentHarnessConstructor<Option> & {
@@ -67,7 +69,7 @@ export declare abstract class _MatAutocompleteHarnessBase<OptionType extends Com
     /** Gets the panel associated with this autocomplete trigger. */
     private _getPanel;
     /** Gets the selector that can be used to find the autocomplete trigger's panel. */
-    private _getPanelSelector;
+    protected _getPanelSelector(): Promise<string>;
 }
 
 export { }

package/chips/_chips-theme.scss

@@ -2,100 +2,84 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '@material/chips/chip-theme' as mdc-chip-theme;
-@use '@material/chips/chip-set' as mdc-chip-set;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/color-palette' as mdc-color-palette;
-@use '@material/typography' as mdc-typography;
-@use '../core/mdc-helpers/mdc-helpers';
+@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
+@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
+@use '../core/mdc-helpers/mdc-helpers';
 
-@mixin _chip-variant($background, $foreground) {
-  @include mdc-chip-theme.theme((
-    elevated-container-color: $background,
-    elevated-disabled-container-color: $background,
-    label-text-color: $foreground,
-    disabled-label-text-color: $foreground,
-    with-icon-icon-color: $foreground,
-    with-icon-disabled-icon-color: $foreground,
-    with-trailing-icon-disabled-trailing-icon-color: $foreground,
-    with-trailing-icon-trailing-icon-color: $foreground,
-    with-icon-selected-icon-color: $foreground,
-  ));
-}
+@function _get-default-palette($config) {
+  $is-dark: map.get($config, is-dark);
+  $grey-50: map.get(palette.$grey-palette, 50);
+  $grey-900: map.get(palette.$grey-palette, 900);
+  $default-foreground: if($is-dark, $grey-50, $grey-900);
 
-@mixin _colored-chip($palette) {
-  $background: theming.get-color-from-palette($palette);
-  $foreground: theming.get-color-from-palette($palette, default-contrast);
+  $surface: map.get(map.get($config, background), card);
+  $on-surface: if(
+    mdc-helpers.variable-safe-contrast-tone($surface, $is-dark) == 'dark',
+    #000,
+    #fff
+  );
+  $default-background: if(
+    meta.type-of($on-surface) == color and meta.type-of($surface) == color,
+    color.mix($on-surface, $surface, 12%),
+    $on-surface
+  );
 
-  &.mat-mdc-chip-selected,
-  &.mat-mdc-chip-highlighted {
-    @include _chip-variant($background, $foreground);
-  }
+  @return (default: $default-background, default-contrast: $default-foreground);
 }
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $foreground: map.get($config, foreground);
-  $is-dark: map.get($config, is-dark);
-
-  @include mdc-helpers.using-mdc-theme($config) {
-    $on-surface: mdc-theme-color.prop-value(on-surface);
-    $surface: mdc-theme-color.prop-value(surface);
-
-    .mat-mdc-standard-chip {
-      $standard-background: if(
-        meta.type-of($on-surface) == color and meta.type-of($surface) == color,
-        color.mix($on-surface, $surface, 12%),
-        $on-surface
-      );
 
-      @include _chip-variant(
-        $standard-background,
-        if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900)
-      );
+  .mat-mdc-standard-chip {
+    $default-palette: _get-default-palette($config);
+    $default-config: map.merge($config, (primary: $default-palette));
+    $default-color-tokens: tokens-mdc-chip.get-color-tokens($default-config);
+    @include mdc-chip-theme.theme($default-color-tokens);
 
+    &.mat-mdc-chip-selected,
+    &.mat-mdc-chip-highlighted {
       &.mat-primary {
-        @include _colored-chip($primary);
+        $primary-color-tokens: tokens-mdc-chip.get-color-tokens($config);
+        @include mdc-chip-theme.theme($primary-color-tokens);
       }
 
       &.mat-accent {
-        @include _colored-chip($accent);
+        $accent-config: map.merge($config, (primary: map.get($config, accent)));
+        $accent-color-tokens: tokens-mdc-chip.get-color-tokens($accent-config);
+        @include mdc-chip-theme.theme($accent-color-tokens);
       }
 
       &.mat-warn {
-        @include _colored-chip($warn);
+        $warn-config: map.merge($config, (primary: map.get($config, warn)));
+        $warn-color-tokens: tokens-mdc-chip.get-color-tokens($warn-config);
+        @include mdc-chip-theme.theme($warn-color-tokens);
       }
     }
   }
 
   .mat-mdc-chip-focus-overlay {
-    background: map.get($foreground, base);
+    background: map.get(map.get($config, foreground), base);
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-  @include mdc-chip-set.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
-  @include mdc-helpers.using-mdc-typography($config) {
-    // Note that we don't go through MDC's typography mixin, because it assigns the styles to
-    // an inner element which makes it difficult for clients to customize. Instead we apply the
-    // same styles ourselves to the root.
-    .mat-mdc-standard-chip {
-      @include mdc-typography.typography(body2, $query: mdc-helpers.$mdc-typography-styles-query);
-    }
+    theming.get-typography-config($config-or-theme)
+  );
+  $typography-tokens: tokens-mdc-chip.get-typography-tokens($config);
+
+  .mat-mdc-standard-chip {
+    @include mdc-chip-theme.theme($typography-tokens);
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  $density-scale: theming.clamp-density($density-scale, -2);
+  $density-tokens: tokens-mdc-chip.get-density-tokens($density-scale);
   .mat-mdc-chip.mat-mdc-standard-chip {
-    @include mdc-chip-theme.density($density-scale, $query: mdc-helpers.$mdc-base-styles-query);
+    @include mdc-chip-theme.theme($density-tokens);
   }
 }
 

package/core/mdc-helpers/_mdc-helpers.scss

@@ -100,7 +100,7 @@ $mat-typography-mdc-level-mappings: (
 
 // MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
 // This function falls back to determining the tone based on whether the theme is light or dark.
-@function _variable-safe-contrast-tone($value, $is-dark) {
+@function variable-safe-contrast-tone($value, $is-dark) {
   @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
     @return mdc-theme-color.contrast-tone($value);
   }
@@ -109,7 +109,7 @@ $mat-typography-mdc-level-mappings: (
 }
 
 @function _variable-safe-ink-color-for-fill($text-style, $fill-color, $is-dark) {
-  $contrast-tone: _variable-safe-contrast-tone($fill-color, $is-dark);
+  $contrast-tone: variable-safe-contrast-tone($fill-color, $is-dark);
   @return map.get(map.get(mdc-theme-color.$text-colors, $contrast-tone), $text-style);
 }
 
@@ -137,17 +137,17 @@ $mat-typography-mdc-level-mappings: (
   // Set new values based on the given Angular Material theme.
   mdc-theme-color.$primary: $primary;
   mdc-theme-color.$on-primary:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$secondary: $accent;
   mdc-theme-color.$on-secondary:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background);
   mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card);
   mdc-theme-color.$on-surface:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$error: $warn;
   mdc-theme-color.$on-error:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$property-values: (
       // Primary
       primary: mdc-theme-color.$primary,

package/core/tokens/m2/mdc/_chip.scss

@@ -0,0 +1,313 @@
+@use 'sass:color';
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, chip);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // The shape & radius of the chip.
+    container-shape:
+      (
+        family: 'rounded',
+        radius: (
+          16px 16px 16px 16px,
+        )
+      ),
+    // The shape & radius of the avatar.
+    with-avatar-avatar-shape:
+      (
+        family: 'rounded',
+        radius: (
+          14px 14px 14px 14px,
+        )
+      ),
+    // The width & height of the chip avatar.
+    with-avatar-avatar-size: 28px,
+    // The width & height of the chip icon.
+    with-icon-icon-size: 18px,
+    // Not used by MDC.
+    disabled-label-text-opacity: null,
+    // Not used by MDC.
+    disabled-outline-opacity: null,
+    // Not used by MDC.
+    elevated-disabled-container-opacity: null,
+    // Not used by MDC.
+    flat-disabled-outline-opacity: null,
+    // Not used by MDC.
+    flat-disabled-unselected-outline-opacity: null,
+    // Our chips do not have a border.
+    flat-outline-width: null,
+    // Our chips do not have a border.
+    flat-selected-outline-width: null,
+    // Our chips do not have a border.
+    flat-unselected-outline-width: null,
+    // Our chips do not have a border.
+    outline-width: null,
+    // Not used by MDC.
+    with-avatar-disabled-avatar-opacity: null,
+    // Not used by MDC.
+    with-icon-disabled-icon-opacity: null,
+    // Not used by MDC.
+    with-leading-icon-disabled-leading-icon-opacity: null,
+    // Not used by MDC.
+    with-leading-icon-leading-icon-size: null,
+    // Not used by MDC.
+    with-trailing-icon-disabled-trailing-icon-opacity: null,
+    // Not used by MDC.
+    with-trailing-icon-trailing-icon-size: null,
+    // Elevated chips not implemented.
+    container-elevation: null,
+    // Elevated chips not implemented.
+    container-shadow-color: null,
+    // Our chips do not have a border.
+    disabled-outline-color: null,
+    // Elevated chips not implemented.
+    elevated-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-container-shadow-color: null,
+    // Elevated chips not implemented.
+    container-surface-tint-layer-color: null,
+    // Elevated chips not implemented.
+    elevated-disabled-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-focus-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-hover-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-pressed-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-selected-container-color: null,
+    // Elevated chips not implemented.
+    elevated-selected-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-unselected-container-color: null,
+    // Elevated chips not implemented.
+    flat-container-elevation: null,
+    // Our chips do not have a border.
+    flat-disabled-outline-color: null,
+    // Not providing this uses
+    flat-disabled-selected-container-color: null,
+    // Not used by MDC.
+    flat-disabled-selected-container-opacity: null,
+    // Unused.
+    flat-disabled-selected-outline-color: null,
+    // Unused.
+    flat-disabled-selected-outline-opacity: null,
+    // Unused.
+    flat-disabled-unselected-outline-color: null,
+    // Unused.
+    flat-focus-outline-color: null,
+    // Unused.
+    flat-outline-color: null,
+    // Unused.
+    flat-selected-container-color: null,
+    // Unused.
+    flat-selected-focus-container-elevation: null,
+    // Unused.
+    flat-selected-hover-container-elevation: null,
+    // Unused.
+    flat-selected-outline-color: null,
+    // Unused.
+    flat-selected-pressed-container-elevation: null,
+    // Unused.
+    flat-unselected-focus-container-elevation: null,
+    // Unused.
+    flat-unselected-focus-outline-color: null,
+    // Unused.
+    flat-unselected-hover-container-elevation: null,
+    // Unused.
+    flat-unselected-outline-color: null,
+    // Unused.
+    flat-unselected-pressed-container-elevation: null,
+    // Unused.
+    focus-label-text-color: null,
+    // Unused.
+    focus-outline-color: null,
+    // Unused.
+    focus-state-layer-color: null,
+    // Unused.
+    focus-state-layer-opacity: null,
+    // Unused.
+    hover-label-text-color: null,
+    // Unused.
+    hover-state-layer-color: null,
+    // Unused.
+    hover-state-layer-opacity: null,
+    // Unused.
+    outline-color: null,
+    // Unused.
+    pressed-label-text-color: null,
+    // Unused.
+    pressed-state-layer-color: null,
+    // Unused.
+    pressed-state-layer-opacity: null,
+    // Unused.
+    selected-focus-label-text-color: null,
+    // Unused.
+    selected-focus-state-layer-color: null,
+    // Unused.
+    selected-focus-state-layer-opacity: null,
+    // Unused.
+    selected-hover-label-text-color: null,
+    // Unused.
+    selected-hover-state-layer-color: null,
+    // Unused.
+    selected-hover-state-layer-opacity: null,
+    // Unused.
+    selected-label-text-color: null,
+    // Unused.
+    selected-pressed-label-text-color: null,
+    // Unused.
+    selected-pressed-state-layer-color: null,
+    // Unused.
+    selected-pressed-state-layer-opacity: null,
+    // Unused.
+    unselected-focus-label-text-color: null,
+    // Unused.
+    unselected-focus-state-layer-color: null,
+    // Unused.
+    unselected-focus-state-layer-opacity: null,
+    // Unused.
+    unselected-hover-label-text-color: null,
+    // Unused.
+    unselected-hover-state-layer-color: null,
+    // Unused.
+    unselected-hover-state-layer-opacity: null,
+    // Unused.
+    unselected-label-text-color: null,
+    // Unused.
+    unselected-pressed-label-text-color: null,
+    // Unused.
+    unselected-pressed-state-layer-color: null,
+    // Unused.
+    unselected-pressed-state-layer-opacity: null,
+    // Unused.
+    with-icon-focus-icon-color: null,
+    // Unused.
+    with-icon-hover-icon-color: null,
+    // Unused.
+    with-icon-pressed-icon-color: null,
+    // Unused.
+    with-icon-selected-focus-icon-color: null,
+    // Unused.
+    with-icon-selected-hover-icon-color: null,
+    // Unused.
+    with-icon-selected-pressed-icon-color: null,
+    // Unused.
+    with-icon-unselected-focus-icon-color: null,
+    // Unused.
+    with-icon-unselected-hover-icon-color: null,
+    // Unused.
+    with-icon-unselected-icon-color: null,
+    // Unused.
+    with-icon-unselected-pressed-icon-color: null,
+    // Unused.
+    with-leading-icon-disabled-leading-icon-color: null,
+    // Unused.
+    with-leading-icon-focus-leading-icon-color: null,
+    // Unused.
+    with-leading-icon-hover-leading-icon-color: null,
+    // Unused.
+    with-leading-icon-leading-icon-color: null,
+    // Unused.
+    with-leading-icon-pressed-leading-icon-color: null,
+    // Unused.
+    with-trailing-icon-focus-trailing-icon-color: null,
+    // Unused.
+    with-trailing-icon-hover-trailing-icon-color: null,
+    // Unused.
+    with-trailing-icon-pressed-trailing-icon-color: null
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $palette: map.get($config, primary);
+  $background: theming.get-color-from-palette($palette);
+  $foreground: theming.get-color-from-palette($palette, default-contrast);
+
+  @return (
+    // The text color of a disabled chip.
+    disabled-label-text-color: $foreground,
+    // The background-color of the chip.
+    elevated-container-color: $background,
+    // The background-color of a disabled chip.
+    elevated-disabled-container-color: $background,
+    // The chip text color.
+    label-text-color: $foreground,
+    // The icon color of a chip.
+    with-icon-icon-color: $foreground,
+    // The color of the icon of a disabled chip.
+    with-icon-disabled-icon-color: $foreground,
+    // The color of the icon of a selected chip.
+    with-icon-selected-icon-color: $foreground,
+    // The color of the icon at the end of a disabled chip.
+    with-trailing-icon-disabled-trailing-icon-color: $foreground,
+    // The color of the icon at the end of the chip.
+    with-trailing-icon-trailing-icon-color: $foreground
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(wagnermaciel): The earlier implementation of the chip used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+
+  @return (
+    // The font family of the chip text.
+    label-text-font: typography-utils.font-family($config, body-2) or
+      typography-utils.font-family($config),
+    // The line height of the chip text.
+    label-text-line-height: typography-utils.line-height($config, body-2),
+    // The font size of the chip text.
+    label-text-size: typography-utils.font-size($config, body-2),
+    // The letter spacing of the chip label.
+    label-text-tracking: typography-utils.letter-spacing($config, body-2),
+    // The font weight of the chip text.
+    label-text-weight: typography-utils.font-weight($config, body-2)
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $scale: theming.clamp-density($config, -2);
+  @return (
+    // The height of the chip.
+    container-height:
+      map.get(
+        (
+          0: 32px,
+          -1: 28px,
+          -2: 24px,
+        ),
+        $scale
+      )
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return token-utils.merge-all(
+    get-unthemable-tokens(),
+    get-color-tokens(token-utils.$placeholder-color-config),
+    get-typography-tokens(token-utils.$placeholder-typography-config),
+    get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mdc/_plain-tooltip.scss

@@ -0,0 +1,80 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, plain-tooltip);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // Border radius for the tooltip container.
+    container-shape: 4px,
+    // Line height of the tooltip text.
+    supporting-text-line-height: 16px,
+    // MDC does not seem to use these token.
+    supporting-text-type: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $background: map.get($config, background);
+
+  @return (
+    // Color of the tooltip container.
+    container-color: theming.get-color-from-palette($background, tooltip),
+    // Color of the tooltip text.
+    supporting-text-color: #fff,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(amysorto): The earlier implementation of the tooltip used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+
+  @return (
+    // Font for the tooltip text.
+    supporting-text-font: typography-utils.font-family($config, caption)
+    or typography-utils.font-family($config),
+    // Font size for the the tooltip text.
+    supporting-text-size: typography-utils.font-size($config, caption),
+    // Font weight of the the tooltip text.
+    supporting-text-weight: typography-utils.font-weight($config, caption),
+    // Tracking (space between letters) of the tooltip text.
+    supporting-text-tracking: typography-utils.letter-spacing($config, caption),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return map.merge(
+          get-unthemable-tokens(),
+          map.merge(
+                  get-color-tokens(token-utils.$placeholder-color-config),
+                  map.merge(
+                          get-typography-tokens(token-utils.$placeholder-typography-config),
+                          get-density-tokens(token-utils.$placeholder-density-config)
+                  )
+          )
+  );
+}