Merge pull request #3403 from material-components:release

PiperOrigin-RevId: 447534512

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-<!-- ## Unreleased -->
+<!-- ## Unreleased  -->
 
 ## [v0.26.1] - 2022-05-09
 

components/checkbox/lib/_checkbox.scss

@@ -235,7 +235,6 @@ $_selected-checkmark-padding: 2.8px;
 }
 
 @mixin background_() {
-  background-clip: padding-box;
   display: inline-flex;
   position: absolute;
   align-items: center;

components/checkbox/test/md-checkbox_test.ts → components/checkbox/md-checkbox_test.ts

@@ -7,9 +7,10 @@
 import {MdFocusRing} from 'google3/third_party/javascript/material_web_components/m3/focus/focus-ring';
 import {html} from 'lit';
 
-import {fixture, TestFixture} from '../../../../test/src/util/helpers.js';
-import {MdCheckbox} from '../checkbox.js';
-import {CheckboxHarness} from '../harness.js';
+import {fixture, TestFixture} from '../../../test/src/util/helpers.js';
+
+import {MdCheckbox} from './checkbox.js';
+import {CheckboxHarness} from './harness.js';
 
 interface CheckboxProps {
   checked: boolean;

components/focus/test/screenshot_test.ts

@@ -52,7 +52,7 @@ class TestButton extends LitElement {
 }
 
 class TestButtonHarness extends Harness<TestButton> {
-  override async getInteractiveElement() {
+  protected override async getInteractiveElement() {
     await this.element.updateComplete;
     return this.element.renderRoot.querySelector<HTMLElement>('button')!;
   }
@@ -81,7 +81,8 @@ describe('<md-focus-ring>', () => {
     expect(await env.diffRootWithRtl('strong_focus')).toHaveAllPassed();
   });
 
-  function renderTable(title: string, props: TemplateProps<Harness> = {}) {
+  function renderTable(
+      title: string, props: TemplateProps<TestButtonHarness> = {}) {
     const testTemplates = templates.all(props);
     env.render(html`
       <md-test-table

components/switch/lib/_switch-theme.scss

@@ -53,15 +53,25 @@ $_unselected: '.md3-switch--unselected';
 
 $light-theme: values();
 
-$forced-colors-theme: (
-  disabled-unselected-handle-opacity: 1,
+$_forced-colors-theme: (
   disabled-selected-icon-color: GrayText,
   disabled-selected-icon-opacity: 1,
+  disabled-selected-track-color: GrayText,
   disabled-track-opacity: 1,
+  disabled-unselected-handle-color: GrayText,
+  disabled-unselected-handle-opacity: 1,
   disabled-unselected-icon-color: GrayText,
   disabled-unselected-icon-opacity: 1,
+  selected-focus-track-color: ButtonText,
+  selected-hover-track-color: ButtonText,
   selected-icon-color: ButtonText,
+  selected-pressed-track-color: ButtonText,
+  selected-track-color: ButtonText,
+  unselected-focus-handle-color: ButtonText,
+  unselected-handle-color: ButtonText,
+  unselected-hover-handle-color: ButtonText,
   unselected-icon-color: ButtonText,
+  unselected-pressed-handle-color: ButtonText,
 );
 
 @function _resolve-theme($theme, $resolvers) {
@@ -115,6 +125,8 @@ $forced-colors-theme: (
     $width: map.get($theme, track-width),
     $height: map.get($theme, track-height)
   );
+
+  @include _forced-colors-mode-theme;
 }
 
 @mixin _focus-ring($height, $width) {
@@ -128,6 +140,13 @@ $forced-colors-theme: (
   );
 }
 
+@mixin _forced-colors-mode-theme {
+  // TODO(b/230630968): create a foced-colors-mode mixin
+  @media screen and (forced-colors: active) {
+    @include theme($_forced-colors-theme);
+  }
+}
+
 @function _flatten-disable-colors($theme) {
   @return color.join-color-and-opacity-pairs(
     $theme,

components/switch/lib/_switch.scss

@@ -40,6 +40,7 @@ $icon-enter-duration: $animation-duration - $icon-exit-duration;
         @include _track-selected-before;
       }
     }
+  }
 
   // Handle container
   .md3-switch__handle-container {

components/switch/lib/switch.ts

@@ -187,7 +187,6 @@ export class Switch extends LitElement {
 
   @eventOptions({passive: true})
   protected handlePointerDown(event: PointerEvent) {
-    (event.target as HTMLElement).setPointerCapture(event.pointerId);
     focusRingPointerPress();
     this.showFocusRing = false;
   }

components/tabs/tab_bar/lib/primary-tab-bar.ts

@@ -22,9 +22,8 @@ export class PrimaryTabBar extends TabBar {
 
   // TODO(sorvell): probably want to memoize this and use a `slotChange` event
   protected getTabs() {
-    return (this.tabsSlot as HTMLSlotElement)
-               .assignedNodes({flatten: true})
-               .filter((e: Node) => e instanceof PrimaryTab) as PrimaryTab[];
+    return this.tabsSlot.filter((e: Node) => e instanceof PrimaryTab) as
+        PrimaryTab[];
   }
 
   protected getActiveTabIndex() {

components/tabs/tab_bar/lib/secondary-tab-bar.ts

@@ -22,9 +22,7 @@ export class SecondaryTabBar extends TabBar {
 
   // TODO(sorvell): probably want to memoize this and use a `slotChange` event
   protected getTabs() {
-    return (this.tabsSlot as HTMLSlotElement)
-               .assignedNodes({flatten: true})
-               .filter((e: Node) => e instanceof SecondaryTab) as
+    return this.tabsSlot.filter((e: Node) => e instanceof SecondaryTab) as
         SecondaryTab[];
   }
 

components/tabs/tab_bar/lib/tab-bar.ts

@@ -8,7 +8,7 @@
 import {BaseElement} from '@material/mwc-base/base-element.js';
 import {observer} from '@material/mwc-base/observer.js';
 import {html, TemplateResult} from 'lit';
-import {property, query} from 'lit/decorators.js';
+import {property, query, queryAssignedElements} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
 import {PrimaryTab} from '../../tab/lib/primary-tab.js';
@@ -34,7 +34,7 @@ export abstract class TabBar extends BaseElement {
   // emitDecoratorMetadata is enabled, the HTMLSlotElement constructor will
   // be emitted into the runtime, which will cause an "HTMLSlotElement is
   // undefined" error in browsers that don't define it (e.g. IE11).
-  @query('slot') protected tabsSlot!: HTMLElement;
+  @queryAssignedElements({flatten: true}) protected tabsSlot!: HTMLElement[];
 
   @observer(async function(this: TabBar) {
     await this.updateComplete;

components/testing/harness.ts

@@ -18,7 +18,34 @@ declare global {
  * @template H The harness type.
  */
 export type HarnessElement<H extends Harness> =
-    H extends Harness<infer E>? E : never;
+    H extends Harness<infer E>? ElementWithHarness<E, H>: never;
+
+/**
+ * Harnesses will attach themselves to their element for convenience.
+ *
+ * @template E The element type.
+ * @template H The harness type.
+ */
+export type ElementWithHarness<E extends HTMLElement = HTMLElement,
+                                         H extends Harness<E> = Harness<E>> =
+    E&{
+  /**
+   * The harness for this element.
+   */
+  harness: H;
+};
+
+/**
+ * Checks whether or not an element has a Harness attached to it on the
+ * `element.harness` property.
+ *
+ * @param element The element to check.
+ * @return True if the element has a harness property.
+ */
+export function isElementWithHarness(element: Element):
+    element is ElementWithHarness {
+  return (element as unknown as ElementWithHarness).harness instanceof Harness;
+}
 
 /**
  * A test harness class that can be used to simulate interaction with an
@@ -33,12 +60,20 @@ export class Harness<E extends HTMLElement = HTMLElement> {
    */
   protected transformPseudoClasses = defaultTransformPseudoClasses;
 
+  /**
+   * The element that this harness controls.
+   */
+  readonly element: E&ElementWithHarness<E, this>;
+
   /**
    * Creates a new harness for the given element.
    *
    * @param element The element that this harness controls.
    */
-  constructor(readonly element: E) {}
+  constructor(element: E) {
+    this.element = element as ElementWithHarness<E, this>;
+    this.element.harness = this;
+  }
 
   /**
    * Resets the element's simulated classes to the default state.

components/testing/templates.ts

@@ -9,7 +9,7 @@ import {DirectiveResult} from 'lit/directive.js';
 import {ref} from 'lit/directives/ref.js';
 import {literal} from 'lit/static-html.js';
 
-import {Harness, HarnessElement} from './harness.js';
+import {Harness, HarnessElement, isElementWithHarness} from './harness.js';
 import {TestTableTemplate} from './table/test-table.js';
 
 /**
@@ -95,10 +95,9 @@ export class TemplateBuilder<H extends Harness = never,
       testCaseProps.push({});
     }
 
-    return Array.from(this.variants.values())
-        .flatMap(({display, factory}) => {
-          return testCaseProps.map(props => ({display, render: factory(props)}));
-        });
+    return Array.from(this.variants.values()).flatMap(({display, factory}) => {
+      return testCaseProps.map(props => ({display, render: factory(props)}));
+    });
   }
 
   /**
@@ -177,8 +176,8 @@ export class TemplateBuilder<H extends Harness = never,
    *     options specify a `display` name and the variant `render` function.
    * @return The template builder, now using the provided variants.
    */
-  withVariants(variants:
-                   Record<string, TemplateRender<H>|TemplateVariantOptions<H>>) {
+  withVariants(
+      variants: Record<string, TemplateRender<H>|TemplateVariantOptions<H>>) {
     // TODO: clean this up by only allowing TemplateVariantOptions and force
     // users to specify the display name.
     for (const variant of Object.keys(variants)) {
@@ -249,7 +248,9 @@ export class TemplateBuilder<H extends Harness = never,
       return undefined as never;
     }
 
-    const harness = new this.harnessCtor(element);
+    const harness = isElementWithHarness(element) ?
+        element.harness as H :
+        new this.harnessCtor(element);
     // Common shared component state harness actions
     switch (state) {
       case State.FOCUS: