@angular/material 16.0.2 → 16.1.0-next.1

package/select/index.d.ts

@@ -287,6 +287,34 @@ export declare abstract class _MatSelectBase<C> extends _MatSelectMixinBase impl
     toggle(): void;
     /** Opens the overlay panel. */
     open(): void;
+    /**
+     * 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 reference to the listbox overlay element from the modal it was added to. */
+    private _clearFromModal;
     /** Closes the overlay panel and focuses the host element. */
     close(): void;
     /**

package/tabs/_tabs-common.scss

@@ -217,6 +217,10 @@ $mat-tab-animation-duration: 500ms !default;
       tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens());
   }
 
+  .mdc-tab-indicator .mdc-tab-indicator__content {
+    transition-duration: var(--mat-tab-animation-duration, 250ms);
+  }
+
   .mat-mdc-tab-header-pagination {
     @include vendor-prefixes.user-select(none);
     position: relative;

package/tabs/index.d.ts

@@ -896,6 +896,9 @@ export declare class MatTabNav extends _MatTabNavBase implements AfterContentIni
     get stretchTabs(): boolean;
     set stretchTabs(v: BooleanInput);
     private _stretchTabs;
+    get animationDuration(): string;
+    set animationDuration(value: NumberInput);
+    private _animationDuration;
     _items: QueryList<MatTabLink>;
     _tabListContainer: ElementRef;
     _tabList: ElementRef;
@@ -907,7 +910,7 @@ export declare class MatTabNav extends _MatTabNavBase implements AfterContentIni
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNav, [null, { optional: true; }, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNav, "[mat-tab-nav-bar]", ["matTabNavBar", "matTabNav"], { "color": { "alias": "color"; "required": false; }; "fitInkBarToContent": { "alias": "fitInkBarToContent"; "required": false; }; "stretchTabs": { "alias": "mat-stretch-tabs"; "required": false; }; }, {}, ["_items"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNav, "[mat-tab-nav-bar]", ["matTabNavBar", "matTabNav"], { "color": { "alias": "color"; "required": false; }; "fitInkBarToContent": { "alias": "fitInkBarToContent"; "required": false; }; "stretchTabs": { "alias": "mat-stretch-tabs"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, {}, ["_items"], ["*"], false, never>;
 }
 
 /**

package/tooltip/_tooltip-theme.scss

@@ -1,41 +1,37 @@
-@use 'sass:map';
-@use '@material/tooltip/plain-tooltip-theme';
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/typography/typography' as mdc-typography;
+@use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
 @use '../core/theming/theming';
-@use '../core/theming/palette';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
+@use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {
-    .mat-mdc-tooltip {
-      @include plain-tooltip-theme.theme((
-        container-color: map.get(palette.$light-theme-background-palette, tooltip),
-        supporting-text-color: mdc-theme-color.prop-value(text-primary-on-dark)
-      ));
-    }
+  $mdc-tooltip-color-tokens: m2-mdc-plain-tooltip.get-color-tokens($config);
+
+  // Add values for MDC tooltip tokens.
+  .mat-mdc-tooltip {
+    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-tokens);
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
           theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
-    .mat-mdc-tooltip {
-      @include plain-tooltip-theme.theme((
-        supporting-text-font: mdc-typography.get-font(caption),
-        supporting-text-size: mdc-typography.get-size(caption),
-        supporting-text-weight: mdc-typography.get-weight(caption),
-        supporting-text-tracking: mdc-typography.get-tracking(caption),
-      ));
-    }
+  $mdc-tooltip-typography-tokens: m2-mdc-plain-tooltip.get-typography-tokens($config);
+
+  // Add values for MDC tooltip tokens.
+  .mat-mdc-tooltip {
+    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
+  $mdc-tooltip-density-tokens: m2-mdc-plain-tooltip.get-density-tokens($density-scale);
+
+  // Add values for MDC tooltip tokens.
+  .mat-mdc-tooltip {
+    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
+  }
 }
 
 @mixin theme($theme-or-color-config) {

package/tooltip/testing/index.d.ts

@@ -10,6 +10,7 @@ export declare class MatTooltipHarness extends _MatTooltipHarnessBase {
     protected _optionalPanel: AsyncFactoryFn<TestElement | null>;
     static hostSelector: string;
     protected _hiddenClass: string;
+    protected _disabledClass: string;
     protected _showAnimationName: string;
     protected _hideAnimationName: string;
     /**
@@ -24,6 +25,7 @@ export declare class MatTooltipHarness extends _MatTooltipHarnessBase {
 export declare abstract class _MatTooltipHarnessBase extends ComponentHarness {
     protected abstract _optionalPanel: AsyncFactoryFn<TestElement | null>;
     protected abstract _hiddenClass: string;
+    protected abstract _disabledClass: string;
     protected abstract _showAnimationName: string;
     protected abstract _hideAnimationName: string;
     /** Shows the tooltip. */
@@ -32,6 +34,8 @@ export declare abstract class _MatTooltipHarnessBase extends ComponentHarness {
     hide(): Promise<void>;
     /** Gets whether the tooltip is open. */
     isOpen(): Promise<boolean>;
+    /** Gets whether the tooltip is disabled */
+    isDisabled(): Promise<boolean>;
     /** Gets a promise for the tooltip panel's text. */
     getTooltipText(): Promise<string>;
 }