Merge branch 'main' into md-filter-chip-icons

Author: vdegenne

CODE_OF_CONDUCT.md

@@ -0,0 +1,129 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+*   Demonstrating empathy and kindness toward other people
+*   Being respectful of differing opinions, viewpoints, and experiences
+*   Giving and gracefully accepting constructive feedback
+*   Accepting responsibility and apologizing to those affected by our mistakes,
+    and learning from the experience
+*   Focusing on what is best not just for us as individuals, but for the overall
+    community
+
+Examples of unacceptable behavior include:
+
+*   The use of sexualized language or imagery, and sexual attention or advances
+    of any kind
+*   Trolling, insulting or derogatory comments, and personal or political
+    attacks
+*   Public or private harassment
+*   Publishing others' private information, such as a physical or email address,
+    without their explicit permission
+*   Other conduct which could reasonably be considered inappropriate in a
+    professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+material-web-contact@google.com. All complaints will be reviewed and
+investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

SECURITY.md

@@ -0,0 +1,12 @@
+# Security Policy
+
+## Supported Versions
+
+Security updates are only applied to the latest published version.
+
+## Reporting a Vulnerability
+
+Report vulnerabilities in a private
+[GitHub security advisory](https://github.com/material-components/material-web/security/advisories/new).
+
+**Please do not disclose security vulnerabilities in public issues.**

checkbox/internal/checkbox.ts

@@ -153,6 +153,7 @@ export class Checkbox extends checkboxBaseClass {
           ?required=${this.required}
           .indeterminate=${this.indeterminate}
           .checked=${this.checked}
+          @input=${this.handleInput}
           @change=${this.handleChange} />
 
         <div class="outline"></div>
@@ -167,11 +168,15 @@ export class Checkbox extends checkboxBaseClass {
     `;
   }
 
-  private handleChange(event: Event) {
+  private handleInput(event: Event) {
     const target = event.target as HTMLInputElement;
     this.checked = target.checked;
     this.indeterminate = target.indeterminate;
+    // <input> 'input' event bubbles and is composed, don't re-dispatch it.
+  }
 
+  private handleChange(event: Event) {
+    // <input> 'change' event is not composed, re-dispatch it.
     redispatchEvent(this, event);
   }
 

checkbox/internal/checkbox_test.ts

@@ -82,6 +82,42 @@ describe('checkbox', () => {
       expect(inputHandler).toHaveBeenCalledTimes(1);
       expect(inputHandler).toHaveBeenCalledWith(jasmine.any(Event));
     });
+
+    it('checkbox state is updated during input event listeners', async () => {
+      const {harness} = await setupTest();
+      let state = false;
+      const inputHandler = jasmine
+        .createSpy('inputHandler')
+        .and.callFake(() => {
+          state = harness.element.checked;
+        });
+
+      harness.element.addEventListener('input', inputHandler);
+
+      await harness.clickWithMouse();
+      expect(inputHandler).withContext('input listener').toHaveBeenCalled();
+      expect(state)
+        .withContext('checkbox.checked during input listener')
+        .toBeTrue();
+    });
+
+    it('checkbox state is updated during change event listeners', async () => {
+      const {harness} = await setupTest();
+      let state = false;
+      const changeHandler = jasmine
+        .createSpy('changeHandler')
+        .and.callFake(() => {
+          state = harness.element.checked;
+        });
+
+      harness.element.addEventListener('change', changeHandler);
+
+      await harness.clickWithMouse();
+      expect(changeHandler).withContext('change listener').toHaveBeenCalled();
+      expect(state)
+        .withContext('checkbox.checked during change listener')
+        .toBeTrue();
+    });
   });
 
   describe('checked', () => {

chips/internal/_shared.scss

@@ -89,16 +89,19 @@
     border: none;
     border-radius: inherit;
     display: flex;
-    gap: 8px;
     outline: none;
     padding: 0;
     position: relative;
     text-decoration: none;
   }
 
   .primary.action {
-    padding-inline-start: 8px;
-    padding-inline-end: 16px;
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
+  }
+
+  .has-icon .primary.action {
+    padding-inline-start: var(--_with-leading-icon-leading-space);
   }
 
   .touch {
@@ -190,6 +193,11 @@
     color: var(--_leading-icon-color);
   }
 
+  .leading.icon ::slotted(*),
+  .leading.icon svg {
+    margin-inline-end: var(--_icon-label-space);
+  }
+
   :where(:hover) .leading.icon {
     color: var(--_hover-leading-icon-color);
   }

chips/internal/_trailing-icon.scss

@@ -11,7 +11,8 @@
   .trailing.action {
     align-items: center;
     justify-content: center;
-    padding: 0 8px;
+    padding-inline-start: var(--_icon-label-space);
+    padding-inline-end: var(--_with-trailing-icon-trailing-space);
   }
 
   .trailing.action :is(md-ripple, md-focus-ring) {

chips/internal/chip.ts

@@ -51,6 +51,15 @@ export abstract class Chip extends LitElement {
    */
   @property() label = '';
 
+  /**
+   * Only needed for SSR.
+   *
+   * Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of
+   * Unstyled Content.
+   */
+  @property({type: Boolean, reflect: true, attribute: 'has-icon'}) hasIcon =
+    false;
+
   /**
    * The `id` of the action the primary focus ring and ripple are for.
    * TODO(b/310046938): use the same id for both elements
@@ -90,6 +99,7 @@ export abstract class Chip extends LitElement {
   protected getContainerClasses(): ClassInfo {
     return {
       'disabled': this.disabled,
+      'has-icon': this.hasIcon,
     };
   }
 
@@ -109,7 +119,7 @@ export abstract class Chip extends LitElement {
   }
 
   protected renderLeadingIcon(): TemplateResult {
-    return html`<slot name="icon"></slot>`;
+    return html`<slot name="icon" @slotchange=${this.handleIconChange}></slot>`;
   }
 
   protected abstract renderPrimaryAction(content: unknown): unknown;
@@ -123,4 +133,9 @@ export abstract class Chip extends LitElement {
       <span class="touch"></span>
     `;
   }
+
+  private handleIconChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasIcon = slot.assignedElements({flatten: true}).length > 0;
+  }
 }

chips/internal/filter-chip.ts

@@ -25,6 +25,15 @@ export class FilterChip extends MultiActionChip {
   @property({type: Boolean, attribute: 'has-trailing'}) hasTrailing = false;
   @property({type: Boolean, reflect: true}) selected = false;
 
+  /**
+   * Only needed for SSR.
+   *
+   * Add this attribute when a filter chip has a `slot="selected-icon"` to avoid
+   * a Flash Of Unstyled Content.
+   */
+  @property({type: Boolean, reflect: true, attribute: 'has-selected-icon'})
+  hasSelectedIcon = false;
+
   protected get primaryId() {
     return 'button';
   }
@@ -39,7 +48,8 @@ export class FilterChip extends MultiActionChip {
       ...super.getContainerClasses(),
       elevated: this.elevated,
       selected: this.selected,
-      'has-trailing': this.hasTrailing,
+      'has-trailing': this.removable,
+      'has-icon': this.hasIcon || this.selected,
     };
   }
 
@@ -64,10 +74,12 @@ export class FilterChip extends MultiActionChip {
     }
 
     return html`
-      <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
-        <path
-          d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
-      </svg>
+      <slot name="selected-icon">
+        <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
+          <path
+            d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
+        </svg>
+      </slot>
     `;
   }
 

internal/controller/form-submitter.ts

@@ -93,9 +93,9 @@ export function setupFormSubmitter(ctor: FormSubmitterConstructor) {
         return;
       }
 
-      // Wait a microtask for event bubbling to complete.
+      // Wait a full task for event bubbling to complete.
       await new Promise<void>((resolve) => {
-        resolve();
+        setTimeout(resolve);
       });
 
       if (event.defaultPrevented) {

internal/controller/form-submitter_test.ts

@@ -68,6 +68,8 @@ describe('setupFormSubmitter()', () => {
     spyOn(form, 'requestSubmit');
     spyOn(form, 'reset');
     await harness.clickWithMouse();
+    // Submission happens after a task
+    await env.waitForStability();
 
     expect(form.requestSubmit).toHaveBeenCalled();
     expect(form.reset).not.toHaveBeenCalled();
@@ -80,6 +82,8 @@ describe('setupFormSubmitter()', () => {
     spyOn(form, 'requestSubmit');
     spyOn(form, 'reset');
     await harness.clickWithMouse();
+    // Submission happens after a task
+    await env.waitForStability();
 
     expect(form.requestSubmit).not.toHaveBeenCalled();
     expect(form.reset).toHaveBeenCalled();
@@ -100,6 +104,8 @@ describe('setupFormSubmitter()', () => {
     );
 
     await harness.clickWithMouse();
+    // Submission happens after a task
+    await env.waitForStability();
 
     expect(form.requestSubmit).not.toHaveBeenCalled();
   });
@@ -115,6 +121,8 @@ describe('setupFormSubmitter()', () => {
     form.addEventListener('submit', submitListener);
 
     await harness.clickWithMouse();
+    // Submission happens after a task
+    await env.waitForStability();
 
     expect(submitListener).toHaveBeenCalled();
     const event = submitListener.calls.argsFor(0)[0] as SubmitEvent;
@@ -133,6 +141,8 @@ describe('setupFormSubmitter()', () => {
     harness.element.value = 'bar';
 
     await harness.clickWithMouse();
+    // Submission happens after a task
+    await env.waitForStability();
 
     const formData = Array.from(new FormData(form));
     expect(formData.length).withContext('formData.length').toBe(1);