clean up soy comments, remove hidden input, and add change event

PiperOrigin-RevId: 495453747

switch/lib/_switch.scss

@@ -231,10 +231,6 @@ $_forced-colors-theme: (
     }
   }
 
-  .md3-switch__input {
-    display: none;
-  }
-
   @include track.styles();
   @include handle.styles();
   @include icon.styles();

switch/lib/switch.ts

@@ -20,7 +20,12 @@ import {ariaProperty} from '../../decorators/aria-property.js';
 import {pointerPress as focusRingPointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';
 import {MdRipple} from '../../ripple/ripple.js';
 
-/** @soyCompatible */
+/**
+ * @fires input {InputEvent} Fired whenever `selected` changes due to user
+ * interaction (bubbles and composed).
+ * @fires change {Event} Fired whenever `selected` changes due to user
+ * interaction (bubbles).
+ */
 export class Switch extends ActionElement {
   static override shadowRootOptions:
       ShadowRootInit = {mode: 'open', delegatesFocus: true};
@@ -90,7 +95,6 @@ export class Switch extends ActionElement {
     super.click();
   }
 
-  /** @soyTemplate */
   protected override render(): TemplateResult {
     const ariaLabelValue = this.ariaLabel ? this.ariaLabel : undefined;
     const ariaLabelledByValue =
@@ -120,19 +124,9 @@ export class Switch extends ActionElement {
           ${this.renderHandle()}
         </div>
       </button>
-
-      <input
-        class="md3-switch__input"
-        type="checkbox"
-        aria-hidden="true"
-        name="${this.name}"
-        ?checked=${this.selected}
-        .value=${this.value}
-      >
     `;
   }
 
-  /** @soyTemplate */
   protected getRenderClasses(): ClassInfo {
     return {
       'md3-switch--selected': this.selected,
@@ -140,7 +134,6 @@ export class Switch extends ActionElement {
     };
   }
 
-  /** @soyTemplate */
   protected renderRipple(): TemplateResult {
     return html`
       <div class="md3-switch__ripple">
@@ -152,13 +145,11 @@ export class Switch extends ActionElement {
     `;
   }
 
-  /** @soyTemplate */
   protected renderFocusRing(): TemplateResult {
     return html`<md-focus-ring .visible="${
         this.showFocusRing}"></md-focus-ring>`;
   }
 
-  /** @soyTemplate */
   protected renderHandle(): TemplateResult {
     /** @classMap */
     const classes = {
@@ -175,7 +166,6 @@ export class Switch extends ActionElement {
     `;
   }
 
-  /** @soyTemplate */
   private renderIcons(): TemplateResult {
     return html`
       <div class="md3-switch__icons">
@@ -187,8 +177,6 @@ export class Switch extends ActionElement {
 
   /**
    * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
-   *
-   * @soyTemplate
    */
   protected renderOnIcon(): TemplateResult {
     return html`
@@ -200,8 +188,6 @@ export class Switch extends ActionElement {
 
   /**
    * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
-   *
-   * @soyTemplate
    */
   protected renderOffIcon(): TemplateResult {
     return html`
@@ -211,12 +197,10 @@ export class Switch extends ActionElement {
     `;
   }
 
-  /** @soyTemplate */
   private renderTouchTarget(): TemplateResult {
     return html`<span class="md3-switch__touch"></span>`;
   }
 
-  /** @soyTemplate */
   private shouldShowIcons(): boolean {
     return this.icons || this.showOnlySelectedIcon;
   }
@@ -233,6 +217,11 @@ export class Switch extends ActionElement {
     }
 
     this.selected = !this.selected;
+    this.dispatchEvent(
+        new InputEvent('input', {bubbles: true, composed: true}));
+    // Bubbles but does not compose to mimic native browser <input> & <select>
+    // Additionally, native change event is not an InputEvent.
+    this.dispatchEvent(new Event('change', {bubbles: true}));
     super.endPress({cancelled, actionData: {selected: this.selected}});
   }
 

switch/lib/switch_test.ts

@@ -77,14 +77,6 @@ describe('md-switch', () => {
       expect(selectedButton.getAttribute('aria-checked')).toEqual('true');
     });
 
-    it('sets checked of hidden input', () => {
-      const toggleInput = toggle.shadowRoot!.querySelector('input')!;
-      expect(toggleInput.checked).toBeFalse();
-
-      const selectedInput = selected.shadowRoot!.querySelector('input')!;
-      expect(selectedInput.checked).toBeTrue();
-    });
-
     it('adds md3-switch--selected class when true', () => {
       const toggleRoot = toggle.shadowRoot!.querySelector('.md3-switch')!;
       expect(Array.from(toggleRoot.classList))
@@ -169,12 +161,6 @@ describe('md-switch', () => {
   });
 
   describe('name', () => {
-    let named: TestSwitch;
-
-    beforeEach(async () => {
-      named = await switchElement({name: 'foo'});
-    });
-
     it('is an empty string by default', () => {
       expect(toggle.name).toEqual('');
     });
@@ -184,28 +170,12 @@ describe('md-switch', () => {
       await toggle.updateComplete;
       expect(toggle.getAttribute('name')).toEqual('foo');
     });
-
-    it('sets name of hidden input', () => {
-      const input = named.shadowRoot!.querySelector('input')!;
-      expect(input.getAttribute('name')).toEqual('foo');
-    });
   });
 
   describe('value', () => {
-    let withValue: TestSwitch;
-
-    beforeEach(async () => {
-      withValue = await switchElement({value: 'bar'});
-    });
-
     it('is "on" by default', () => {
       expect(toggle.value).toEqual('on');
     });
-
-    it('sets value of hidden input', () => {
-      const input = withValue.shadowRoot!.querySelector('input')!;
-      expect(input.value).toEqual('bar');
-    });
   });
 
   describe('click()', () => {
@@ -221,15 +191,6 @@ describe('md-switch', () => {
       toggle.click();
       expect(toggle.selected).withContext('should remain false').toBeFalse();
     });
-
-    it('does not focus or click hidden input form element', () => {
-      const input = toggle.shadowRoot!.querySelector('input')!;
-      spyOn(input, 'focus');
-      spyOn(input, 'click');
-      toggle.click();
-      expect(input.focus).not.toHaveBeenCalled();
-      expect(input.click).not.toHaveBeenCalled();
-    });
   });
 
   describe('form submission', () => {

switch/switch.ts

@@ -22,7 +22,6 @@ declare global {
  * There's one type of switch in Material. Use this selection control when the
  * user needs to toggle a single item on or off.
  *
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */