chore: add ".js" extensions to import statements.

In particular, this allows external build tools like Rollup and @web/dev-server to understand imports of Lit, which is configured to require the ".js" extension via its export conditions (so that Lit import maps can remain minimal).

PiperOrigin-RevId: 469772992

actionelement/action-element.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig} from '@material/web/controller/action-controller';
+import {ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig} from '@material/web/controller/action-controller.js';
 import {LitElement} from 'lit';
 
 export {BeginPressConfig, EndPressConfig};

actionelement/action-element_test.ts

@@ -6,11 +6,11 @@
 
 import 'jasmine';
 
-import {Environment} from '@material/web/testing/environment';
+import {Environment} from '@material/web/testing/environment.js';
 import {html} from 'lit';
-import {customElement, property} from 'lit/decorators';
+import {customElement, property} from 'lit/decorators.js';
 
-import {ActionElement} from './action-element';
+import {ActionElement} from './action-element.js';
 
 declare global {
   interface HTMLElementTagNameMap {

badge/badge.ts

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {Badge} from './lib/badge';
-import {styles} from './lib/badge-styles.css';
+import {Badge} from './lib/badge.js';
+import {styles} from './lib/badge-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

badge/lib/badge.ts

@@ -5,8 +5,8 @@
  */
 
 import {html, LitElement, TemplateResult} from 'lit';
-import {property} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
+import {property} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
 /** @soyCompatible */
 export class Badge extends LitElement {

button/elevated-button.ts

@@ -4,13 +4,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {styles as elevationOverlayStyles} from '../elevation/lib/elevation-overlay-styles.css';
+import {styles as elevationOverlayStyles} from '../elevation/lib/elevation-overlay-styles.css.js';
 
-import {ElevatedButton} from './lib/elevated-button';
-import {styles as elevatedStyles} from './lib/elevated-styles.css';
-import {styles as sharedStyles} from './lib/shared-styles.css';
+import {ElevatedButton} from './lib/elevated-button.js';
+import {styles as elevatedStyles} from './lib/elevated-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/elevated-link-button.ts

@@ -4,13 +4,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {styles as elevationOverlayStyles} from '../elevation/lib/elevation-overlay-styles.css';
+import {styles as elevationOverlayStyles} from '../elevation/lib/elevation-overlay-styles.css.js';
 
-import {ElevatedLinkButton} from './lib/elevated-link-button';
-import {styles as elevatedStyles} from './lib/elevated-styles.css';
-import {styles as sharedStyles} from './lib/shared-styles.css';
+import {ElevatedLinkButton} from './lib/elevated-link-button.js';
+import {styles as elevatedStyles} from './lib/elevated-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/filled-button.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {FilledButton} from './lib/filled-button';
-import {styles as filledStyles} from './lib/filled-styles.css';
-import {styles as sharedStyles} from './lib/shared-styles.css';
+import {FilledButton} from './lib/filled-button.js';
+import {styles as filledStyles} from './lib/filled-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/filled-link-button.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {FilledLinkButton} from './lib/filled-link-button';
-import {styles as filledStyles} from './lib/filled-styles.css';
-import {styles as sharedStyles} from './lib/shared-styles.css';
+import {FilledLinkButton} from './lib/filled-link-button.js';
+import {styles as filledStyles} from './lib/filled-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/harness.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Harness} from '@material/web/testing/harness';
+import {Harness} from '@material/web/testing/harness.js';
 
-import {Button} from './lib/button';
+import {Button} from './lib/button.js';
 
 /**
  * Test harness for buttons.

button/lib/button.ts

@@ -6,22 +6,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
-import '@material/web/focus/focus-ring';
-import '@material/web/ripple/ripple';
+import '@material/web/icon/icon.js';
+import '@material/web/focus/focus-ring.js';
+import '@material/web/ripple/ripple.js';
 
-import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element';
-import {ariaProperty} from '@material/web/decorators/aria-property';
-import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus';
-import {MdRipple} from '@material/web/ripple/ripple';
-import {ARIAHasPopup} from '@material/web/types/aria';
-import {html as staticHtml, literal} from 'lit/static-html';
+import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';
+import {ariaProperty} from '@material/web/decorators/aria-property.js';
+import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';
+import {MdRipple} from '@material/web/ripple/ripple.js';
+import {ARIAHasPopup} from '@material/web/types/aria.js';
+import {html as staticHtml, literal} from 'lit/static-html.js';
 import {html, TemplateResult} from 'lit';
-import {property, query, queryAssignedElements, state} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
+import {property, query, queryAssignedElements, state} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 
-import {ButtonState} from './state';
+import {ButtonState} from './state.js';
 
 /** @soyCompatible */
 export abstract class Button extends ActionElement implements ButtonState {

button/lib/elevated-button.ts

@@ -5,9 +5,9 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {Button} from './button';
+import {Button} from './button.js';
 
 /** @soyCompatible */
 export class ElevatedButton extends Button {

button/lib/elevated-link-button.ts

@@ -5,9 +5,9 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {LinkButton} from './link-button';
+import {LinkButton} from './link-button.js';
 
 /** @soyCompatible */
 export class ElevatedLinkButton extends LinkButton {

button/lib/filled-button.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {Button} from './button';
+import {Button} from './button.js';
 
 /** @soyCompatible */
 export class FilledButton extends Button {

button/lib/filled-link-button.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {LinkButton} from './link-button';
+import {LinkButton} from './link-button.js';
 
 /** @soyCompatible */
 export class FilledLinkButton extends LinkButton {

button/lib/link-button.ts

@@ -5,11 +5,11 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {property} from 'lit/decorators';
-import {classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 
-import {Button} from './button';
+import {Button} from './button.js';
 
 type LinkTarget = '_blank'|'_parent'|'_self'|'_top';
 

button/lib/outlined-button.ts

@@ -5,9 +5,9 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {Button} from './button';
+import {Button} from './button.js';
 
 /** @soyCompatible */
 export class OutlinedButton extends Button {

button/lib/outlined-link-button.ts

@@ -5,9 +5,9 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {LinkButton} from './link-button';
+import {LinkButton} from './link-button.js';
 
 /** @soyCompatible */
 export class OutlinedLinkButton extends LinkButton {

button/lib/text-button.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {Button} from './button';
+import {Button} from './button.js';
 
 /** @soyCompatible */
 export class TextButton extends Button {

button/lib/text-link-button.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {LinkButton} from './link-button';
+import {LinkButton} from './link-button.js';
 
 /** @soyCompatible */
 export class TextLinkButton extends LinkButton {

button/lib/tonal-button.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {Button} from './button';
+import {Button} from './button.js';
 
 /** @soyCompatible */
 export class TonalButton extends Button {

button/lib/tonal-link-button.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {LinkButton} from './link-button';
+import {LinkButton} from './link-button.js';
 
 /** @soyCompatible */
 export class TonalLinkButton extends LinkButton {

button/outlined-button.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {OutlinedButton} from './lib/outlined-button';
-import {styles as outlinedStyles} from './lib/outlined-styles.css';
-import {styles as sharedStyles} from './lib/shared-styles.css';
+import {OutlinedButton} from './lib/outlined-button.js';
+import {styles as outlinedStyles} from './lib/outlined-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/outlined-link-button.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {OutlinedLinkButton} from './lib/outlined-link-button';
-import {styles as outlinedStyles} from './lib/outlined-styles.css';
-import {styles as sharedStyles} from './lib/shared-styles.css';
+import {OutlinedLinkButton} from './lib/outlined-link-button.js';
+import {styles as outlinedStyles} from './lib/outlined-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/text-button.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {styles as sharedStyles} from './lib/shared-styles.css';
-import {TextButton} from './lib/text-button';
-import {styles as textStyles} from './lib/text-styles.css';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
+import {TextButton} from './lib/text-button.js';
+import {styles as textStyles} from './lib/text-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/text-link-button.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {styles as sharedStyles} from './lib/shared-styles.css';
-import {TextLinkButton} from './lib/text-link-button';
-import {styles as textStyles} from './lib/text-styles.css';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
+import {TextLinkButton} from './lib/text-link-button.js';
+import {styles as textStyles} from './lib/text-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/tonal-button.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {styles as sharedStyles} from './lib/shared-styles.css';
-import {TonalButton} from './lib/tonal-button';
-import {styles as tonalStyles} from './lib/tonal-styles.css';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
+import {TonalButton} from './lib/tonal-button.js';
+import {styles as tonalStyles} from './lib/tonal-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/tonal-link-button.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {styles as sharedStyles} from './lib/shared-styles.css';
-import {TonalLinkButton} from './lib/tonal-link-button';
-import {styles as tonalStyles} from './lib/tonal-styles.css';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
+import {TonalLinkButton} from './lib/tonal-link-button.js';
+import {styles as tonalStyles} from './lib/tonal-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

checkbox/checkbox.ts

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {Checkbox} from './lib/checkbox';
-import {styles} from './lib/checkbox-styles.css';
+import {Checkbox} from './lib/checkbox.js';
+import {styles} from './lib/checkbox-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

checkbox/harness.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Harness} from '@material/web/testing/harness';
+import {Harness} from '@material/web/testing/harness.js';
 
-import {Checkbox} from './lib/checkbox';
+import {Checkbox} from './lib/checkbox.js';
 
 /**
  * Test harness for checkbox.

checkbox/lib/checkbox.ts

@@ -4,18 +4,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/focus/focus-ring';
-import '@material/web/ripple/ripple';
+import '@material/web/focus/focus-ring.js';
+import '@material/web/ripple/ripple.js';
 
-import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element';
-import {ariaProperty as legacyAriaProperty} from '@material/web/compat/base/aria-property';
-import {ariaProperty} from '@material/web/decorators/aria-property';
-import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus';
-import {MdRipple} from '@material/web/ripple/ripple';
+import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';
+import {ariaProperty as legacyAriaProperty} from '@material/web/compat/base/aria-property.js';
+import {ariaProperty} from '@material/web/decorators/aria-property.js';
+import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';
+import {MdRipple} from '@material/web/ripple/ripple.js';
 import {html, PropertyValues, TemplateResult} from 'lit';
-import {property, query, state} from 'lit/decorators';
-import {classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
+import {property, query, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 
 /** @soyCompatible */
 export class Checkbox extends ActionElement {

checkbox/lib/checkbox_test.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {fixture, TestFixture} from '@material/web/compat/testing/helpers';  // TODO(b/235474830): remove the use of fixtures
-import {MdFocusRing} from '@material/web/focus/focus-ring';
+import {fixture, TestFixture} from '@material/web/compat/testing/helpers.js';  // TODO(b/235474830): remove the use of fixtures
+import {MdFocusRing} from '@material/web/focus/focus-ring.js';
 import {html} from 'lit';
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {CheckboxHarness} from '../harness';
+import {CheckboxHarness} from '../harness.js';
 
-import {Checkbox} from './checkbox';
+import {Checkbox} from './checkbox.js';
 
 @customElement('md-test-checkbox')
 class TestCheckbox extends Checkbox {

chips/action/lib/action.ts

@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/focus/focus-ring';
-import '@material/web/ripple/ripple';
+import '@material/web/focus/focus-ring.js';
+import '@material/web/ripple/ripple.js';
 
-import {ActionElement} from '@material/web/actionelement/action-element';
-import {ariaProperty} from '@material/web/decorators/aria-property';
-import {MdRipple} from '@material/web/ripple/ripple';
+import {ActionElement} from '@material/web/actionelement/action-element.js';
+import {ariaProperty} from '@material/web/decorators/aria-property.js';
+import {MdRipple} from '@material/web/ripple/ripple.js';
 import {html, TemplateResult} from 'lit';
-import {property, query, state} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
+import {property, query, state} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
 /**
  * Base class for all actions.

chips/action/lib/adapter.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {MDCChipActionAttributes, MDCChipActionEvents} from './constants';
+import {MDCChipActionAttributes, MDCChipActionEvents} from './constants.js';
 
 /**
  * Defines the shape of the adapter expected by the foundation.

chips/action/lib/foundation.ts

@@ -5,11 +5,11 @@
  */
 
 // TODO(b/242194005): remove MDC deps
-import {isNavigationEvent, KEY, normalizeKey} from '@material/web/compat/dom/keyboard';
+import {isNavigationEvent, KEY, normalizeKey} from '@material/web/compat/dom/keyboard.js';
 
-import {MDCChipActionAdapter} from './adapter';
-import {MDCChipActionAttributes, MDCChipActionEvents, MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType} from './constants';
-import {MDCChipActionInteractionEventDetail, MDCChipActionNavigationEventDetail} from './types';
+import {MDCChipActionAdapter} from './adapter.js';
+import {MDCChipActionAttributes, MDCChipActionEvents, MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType} from './constants.js';
+import {MDCChipActionInteractionEventDetail, MDCChipActionNavigationEventDetail} from './types.js';
 
 const triggerMap = new Map<string, MDCChipActionInteractionTrigger>();
 triggerMap.set(KEY.SPACEBAR, MDCChipActionInteractionTrigger.SPACEBAR_KEY);

chips/action/lib/link-action.ts

@@ -5,10 +5,10 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {property} from 'lit/decorators';
-import {classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
-import {PrimaryAction} from './primary-action';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {PrimaryAction} from './primary-action.js';
 
 type LinkTarget = '_blank'|'_parent'|'_self'|'_top';
 

chips/action/lib/presentational-action.ts

@@ -5,9 +5,9 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
-import {PrimaryAction} from './primary-action';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {PrimaryAction} from './primary-action.js';
 
 /** @soyCompatible */
 export class PresentationalAction extends PrimaryAction {

chips/action/lib/primary-action.ts

@@ -5,10 +5,10 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {property} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
-import {Action} from './action';
+import {property} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {Action} from './action.js';
 
 /**
  * Base class for all primary actions: Presentational, Selectable, Link

chips/action/lib/primary-foundation.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {MDCChipActionAttributes, MDCChipActionType} from './constants';
-import {MDCChipActionFoundation} from './foundation';
+import {MDCChipActionAttributes, MDCChipActionType} from './constants.js';
+import {MDCChipActionFoundation} from './foundation.js';
 
 /**
  * MDCChipPrimaryActionFoundation provides the business logic for the primary

chips/action/lib/selectable-action.ts

@@ -6,10 +6,10 @@
 
 import {html, TemplateResult} from 'lit';
 
-import {property} from 'lit/decorators';
-import {classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
-import {PrimaryAction} from './primary-action';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {PrimaryAction} from './primary-action.js';
 
 /** @soyCompatible */
 export class SelectableAction extends PrimaryAction {

chips/action/lib/trailing-action.ts

@@ -5,10 +5,10 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {property} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
-import {Action} from './action';
+import {property} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {Action} from './action.js';
 
 /** @soyCompatible */
 export class TrailingAction extends Action {

chips/action/lib/trailing-foundation.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {MDCChipActionType} from './constants';
-import {MDCChipActionFoundation} from './foundation';
+import {MDCChipActionType} from './constants.js';
+import {MDCChipActionFoundation} from './foundation.js';
 
 /**
  * MDCChipTrailingActionFoundation provides the business logic for the trailing

chips/action/lib/types.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {MDCChipActionInteractionTrigger, MDCChipActionType} from './constants';
+import {MDCChipActionInteractionTrigger, MDCChipActionType} from './constants.js';
 
 /**
  * MDCChipActionInteractionEventDetail provides the details for the interaction

chips/chip/lib/adapter.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants';
+import {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants.js';
 
-import {MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from './constants';
+import {MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from './constants.js';
 
 /**
  * Defines the shape of the adapter expected by the foundation.

chips/chip/lib/foundation.ts

@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {AnimationFrame} from '@material/web/compat/animation/animationframe';
-import {KEY} from '@material/web/compat/dom/keyboard';
+import {AnimationFrame} from '@material/web/compat/animation/animationframe.js';
+import {KEY} from '@material/web/compat/dom/keyboard.js';
 
-import {MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType} from '../../action/lib/constants';
-import {MDCChipActionInteractionEventDetail} from '../../action/lib/types';
+import {MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType} from '../../action/lib/constants.js';
+import {MDCChipActionInteractionEventDetail} from '../../action/lib/types.js';
 
-import {MDCChipAdapter} from './adapter';
-import {MDCChipAnimation, MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from './constants';
-import {ActionInteractionEvent, ActionNavigationEvent, MDCChipAnimationEventDetail, MDCChipInteractionEventDetail, MDCChipNavigationEventDetail} from './types';
+import {MDCChipAdapter} from './adapter.js';
+import {MDCChipAnimation, MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from './constants.js';
+import {ActionInteractionEvent, ActionNavigationEvent, MDCChipAnimationEventDetail, MDCChipInteractionEventDetail, MDCChipNavigationEventDetail} from './types.js';
 
 interface Navigation {
   from: MDCChipActionType;

chips/chip/lib/types.ts

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {MDCChipActionType} from '../../action/lib/constants';
-import {MDCChipActionInteractionEventDetail, MDCChipActionNavigationEventDetail} from '../../action/lib/types';
+import {MDCChipActionType} from '../../action/lib/constants.js';
+import {MDCChipActionInteractionEventDetail, MDCChipActionNavigationEventDetail} from '../../action/lib/types.js';
 
-import {MDCChipAnimation} from './constants';
+import {MDCChipAnimation} from './constants.js';
 
 /** MDCChipInteractionEventDetail provides details for the interaction event. */
 export interface MDCChipInteractionEventDetail {

chips/chipset/lib/adapter.ts

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants';
-import {MDCChipAnimation} from '../../chip/lib/constants';
+import {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants.js';
+import {MDCChipAnimation} from '../../chip/lib/constants.js';
 
-import {MDCChipSetAttributes, MDCChipSetEvents} from './constants';
+import {MDCChipSetAttributes, MDCChipSetEvents} from './constants.js';
 
 /**
  * Defines the shape of the adapter expected by the foundation.

chips/chipset/lib/foundation.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {KEY} from '@material/web/compat/dom/keyboard';
+import {KEY} from '@material/web/compat/dom/keyboard.js';
 
-import {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants';
-import {MDCChipAnimation} from '../../chip/lib/constants';
+import {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/lib/constants.js';
+import {MDCChipAnimation} from '../../chip/lib/constants.js';
 
-import {MDCChipSetAdapter} from './adapter';
-import {MDCChipSetAttributes, MDCChipSetEvents} from './constants';
-import {ChipAnimationEvent, ChipInteractionEvent, ChipNavigationEvent, MDCChipSetInteractionEventDetail, MDCChipSetRemovalEventDetail, MDCChipSetSelectionEventDetail} from './types';
+import {MDCChipSetAdapter} from './adapter.js';
+import {MDCChipSetAttributes, MDCChipSetEvents} from './constants.js';
+import {ChipAnimationEvent, ChipInteractionEvent, ChipNavigationEvent, MDCChipSetInteractionEventDetail, MDCChipSetRemovalEventDetail, MDCChipSetSelectionEventDetail} from './types.js';
 
 interface FocusAction {
   action: MDCChipActionType;

chips/chipset/lib/types.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {MDCChipAnimationEventDetail, MDCChipInteractionEventDetail, MDCChipNavigationEventDetail} from '../../chip/lib/types';
+import {MDCChipAnimationEventDetail, MDCChipInteractionEventDetail, MDCChipNavigationEventDetail} from '../../chip/lib/types.js';
 
 /**
  * MDCChipSetInteractionEventDetail provides detail about the interaction event.

compat/testing/helpers.ts

@@ -8,7 +8,7 @@
 // tslint:disable:strip-private-property-underscore
 
 import {html, LitElement, render, TemplateResult} from 'lit';
-import {customElement, property} from 'lit/decorators';
+import {customElement, property} from 'lit/decorators.js';
 
 interface HasKeyCode {
   keyCode: number;

controller/action-controller_test.ts

@@ -6,12 +6,12 @@
 
 import 'jasmine';
 
-import {Environment} from '@material/web/testing/environment';
-import {Harness} from '@material/web/testing/harness';
+import {Environment} from '@material/web/testing/environment.js';
+import {Harness} from '@material/web/testing/harness.js';
 import {html, LitElement} from 'lit';
-import {customElement, property} from 'lit/decorators';
+import {customElement, property} from 'lit/decorators.js';
 
-import {ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig, TOUCH_DELAY_MS, WAIT_FOR_MOUSE_CLICK_MS} from './action-controller';
+import {ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig, TOUCH_DELAY_MS, WAIT_FOR_MOUSE_CLICK_MS} from './action-controller.js';
 
 declare global {
   interface HTMLElementTagNameMap {

controller/events_test.ts

@@ -6,7 +6,7 @@
 
 import 'jasmine';
 
-import {redispatchEvent} from './events';
+import {redispatchEvent} from './events.js';
 
 describe('redispatchEvent()', () => {
   let instance: HTMLDivElement;

controller/form-controller.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {bound} from '@material/web/decorators/bound';
+import {bound} from '@material/web/decorators/bound.js';
 import {ReactiveController, ReactiveControllerHost} from 'lit';
 
 declare global {

controller/form-controller_test.ts

@@ -6,11 +6,11 @@
 
 import 'jasmine';
 
-import {Environment} from '@material/web/testing/environment';
+import {Environment} from '@material/web/testing/environment.js';
 import {html, LitElement, TemplateResult} from 'lit';
-import {customElement, property} from 'lit/decorators';
+import {customElement, property} from 'lit/decorators.js';
 
-import {FormController, FormElement, getFormValue} from './form-controller';
+import {FormController, FormElement, getFormValue} from './form-controller.js';
 
 function submitForm(form: HTMLFormElement) {
   return new Promise<FormData>(resolve => {

controller/foundation_test.ts

@@ -6,7 +6,7 @@
 
 import 'jasmine';
 
-import {Foundation} from './foundation';
+import {Foundation} from './foundation.js';
 
 describe('Foundation', () => {
   it('#init() should be called on construction', () => {

controller/observer-foundation.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Foundation} from './foundation';
-import {observeProperty, ObserverRecord} from './observer';
+import {Foundation} from './foundation.js';
+import {observeProperty, ObserverRecord} from './observer.js';
 
 /**
  * Legacy observer foundation class for components.

controller/observer-foundation_test.ts

@@ -6,8 +6,8 @@
 
 import 'jasmine';
 
-import {ObserverRecord} from './observer';
-import {ObserverFoundation} from './observer-foundation';
+import {ObserverRecord} from './observer.js';
+import {ObserverFoundation} from './observer-foundation.js';
 
 describe('ObserverFoundation', () => {
   class TestObserverFoundation extends ObserverFoundation<{}> {

controller/observer_test.ts

@@ -6,7 +6,7 @@
 
 import 'jasmine';
 
-import {observeProperty, setObserversEnabled} from './observer';
+import {observeProperty, setObserversEnabled} from './observer.js';
 
 describe('observeProperty()', () => {
   it('should call Observer when property value changes', () => {

controller/string-converter_test.ts

@@ -6,7 +6,7 @@
 
 import 'jasmine';
 
-import {stringConverter} from './string-converter';
+import {stringConverter} from './string-converter.js';
 
 describe('stringConverter', () => {
   describe('.fromAttribute', () => {

decorators/bound.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {FunctionKeys} from '@material/web/types/keys';
+import {FunctionKeys} from '@material/web/types/keys.js';
 
 /**
  * Binds a class's method to its instance.

decorators/test/aria-property_test.ts

@@ -6,12 +6,12 @@
 
 import 'jasmine';
 
-import {Environment} from '@material/web/testing/environment';
+import {Environment} from '@material/web/testing/environment.js';
 import {html, LitElement} from 'lit';
-import {customElement, property, query} from 'lit/decorators';
-import {ifDefined} from 'lit/directives/if-defined';
+import {customElement, property, query} from 'lit/decorators.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 
-import {ariaProperty} from '../aria-property';
+import {ariaProperty} from '../aria-property.js';
 
 describe('@ariaProperty', () => {
   const env = new Environment();

decorators/test/bound_test.ts

@@ -6,7 +6,7 @@
 
 import 'jasmine';
 
-import {bound} from '../bound';
+import {bound} from '../bound.js';
 
 describe('@bound', () => {
   class MyClass {

fab/fab-extended.ts

@@ -4,16 +4,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
 import {html, TemplateResult} from 'lit';
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {styles as overlayStyles} from '../elevation/lib/elevation-overlay-styles.css';
+import {styles as overlayStyles} from '../elevation/lib/elevation-overlay-styles.css.js';
 
-import {FabExtended} from './lib/fab-extended';
-import {styles as extendedStyles} from './lib/fab-extended-styles.css';
-import {styles as sharedStyles} from './lib/fab-shared-styles.css';
+import {FabExtended} from './lib/fab-extended.js';
+import {styles as extendedStyles} from './lib/fab-extended-styles.css.js';
+import {styles as sharedStyles} from './lib/fab-shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

fab/fab.ts

@@ -4,16 +4,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
 import {html, TemplateResult} from 'lit';
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {styles as overlayStyles} from '../elevation/lib/elevation-overlay-styles.css';
+import {styles as overlayStyles} from '../elevation/lib/elevation-overlay-styles.css.js';
 
-import {Fab} from './lib/fab';
-import {styles as sharedStyles} from './lib/fab-shared-styles.css';
-import {styles as fabStyles} from './lib/fab-styles.css';
+import {Fab} from './lib/fab.js';
+import {styles as sharedStyles} from './lib/fab-shared-styles.css.js';
+import {styles as fabStyles} from './lib/fab-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

fab/harness.ts

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Harness} from '@material/web/testing/harness';
+import {Harness} from '@material/web/testing/harness.js';
 
-import {Fab} from './lib/fab';
-import {FabExtended} from './lib/fab-extended';
+import {Fab} from './lib/fab.js';
+import {FabExtended} from './lib/fab-extended.js';
 
 
 /**

fab/lib/fab-extended.ts

@@ -5,9 +5,9 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {FabShared} from './fab-shared';
+import {FabShared} from './fab-shared.js';
 
 /**
  * @soyCompatible

fab/lib/fab-shared.ts

@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/focus/focus-ring';
-import '@material/web/ripple/ripple';
+import '@material/web/focus/focus-ring.js';
+import '@material/web/ripple/ripple.js';
 
-import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element';
-import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus';
-import {MdRipple} from '@material/web/ripple/ripple';
+import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';
+import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';
+import {MdRipple} from '@material/web/ripple/ripple.js';
 import {html, TemplateResult} from 'lit';
-import {property, query, state} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
+import {property, query, state} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
 /**
  * @soyCompatible

fab/lib/fab.ts

@@ -5,9 +5,9 @@
  */
 
 import {TemplateResult} from 'lit';
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {FabShared} from './fab-shared';
+import {FabShared} from './fab-shared.js';
 
 /**
  * @soyCompatible

fab/md-fab_test.ts

@@ -4,13 +4,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {fixture, TestFixture} from '@material/web/compat/testing/helpers';  // TODO(b/235474830): remove the use of fixtures
-import {MdFocusRing} from '@material/web/focus/focus-ring';
-import {MdIcon} from '@material/web/icon/icon';
+import {fixture, TestFixture} from '@material/web/compat/testing/helpers.js';  // TODO(b/235474830): remove the use of fixtures
+import {MdFocusRing} from '@material/web/focus/focus-ring.js';
+import {MdIcon} from '@material/web/icon/icon.js';
 import {html} from 'lit';
 
-import {MdFabExtended} from './fab-extended';
-import {FabHarness} from './harness';
+import {MdFabExtended} from './fab-extended.js';
+import {FabHarness} from './harness.js';
 
 describe('md-fab-extended', () => {
   let fixt: TestFixture;

field/filled-field.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {FilledField} from './lib/filled-field';
-import {styles as filledStyles} from './lib/filled-styles.css';
-import {styles as sharedStyles} from './lib/shared-styles.css';
+import {FilledField} from './lib/filled-field.js';
+import {styles as filledStyles} from './lib/filled-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

field/harness.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Harness} from '@material/web/testing/harness';
+import {Harness} from '@material/web/testing/harness.js';
 
-import {Field} from './lib/field';
+import {Field} from './lib/field.js';
 
 /**
  * Test harness for field elements.

field/lib/field.ts

@@ -6,10 +6,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {createAnimationSignal, Easing} from '@material/web/motion/animation';
+import {createAnimationSignal, Easing} from '@material/web/motion/animation.js';
 import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
-import {property, queryAsync, state} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
+import {property, queryAsync, state} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
 /** @soyCompatible */
 export class Field extends LitElement {

field/lib/field_test.ts

@@ -6,12 +6,12 @@
 
 import 'jasmine';
 
-import {Environment} from '@material/web/testing/environment';
+import {Environment} from '@material/web/testing/environment.js';
 import {html} from 'lit';
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {FieldHarness} from '../harness';
-import {Field} from '../lib/field';
+import {FieldHarness} from '../harness.js';
+import {Field} from '../lib/field.js';
 
 declare global {
   interface HTMLElementTagNameMap {

field/lib/filled-field.ts

@@ -5,11 +5,11 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {state} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
-import {styleMap} from 'lit/directives/style-map';
+import {state} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
 
-import {Field} from './field';
+import {Field} from './field.js';
 
 /** @soyCompatible */
 export class FilledField extends Field {

field/lib/filled-field_test.ts

@@ -6,12 +6,12 @@
 
 import 'jasmine';
 
-import {Environment} from '@material/web/testing/environment';
+import {Environment} from '@material/web/testing/environment.js';
 import {html} from 'lit';
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {FieldHarness} from '../harness';
-import {FilledField} from '../lib/filled-field';
+import {FieldHarness} from '../harness.js';
+import {FilledField} from '../lib/filled-field.js';
 
 declare global {
   interface HTMLElementTagNameMap {

field/lib/outlined-field.ts

@@ -5,9 +5,9 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {ClassInfo} from 'lit/directives/class-map';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {Field} from './field';
+import {Field} from './field.js';
 
 /** @soyCompatible */
 export class OutlinedField extends Field {

field/lib/outlined-field_test.ts

@@ -6,12 +6,12 @@
 
 import 'jasmine';
 
-import {Environment} from '@material/web/testing/environment';
+import {Environment} from '@material/web/testing/environment.js';
 import {html} from 'lit';
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {FieldHarness} from '../harness';
-import {OutlinedField} from '../lib/outlined-field';
+import {FieldHarness} from '../harness.js';
+import {OutlinedField} from '../lib/outlined-field.js';
 
 declare global {
   interface HTMLElementTagNameMap {

field/outlined-field.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {OutlinedField} from './lib/outlined-field';
-import {styles as outlinedStyles} from './lib/outlined-styles.css';
-import {styles as sharedStyles} from './lib/shared-styles.css';
+import {OutlinedField} from './lib/outlined-field.js';
+import {styles as outlinedStyles} from './lib/outlined-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

focus/focus-ring.ts

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {FocusRing} from './lib/focus-ring';
-import {styles} from './lib/focus-ring-styles.css';
+import {FocusRing} from './lib/focus-ring.js';
+import {styles} from './lib/focus-ring-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

focus/lib/focus-ring.ts

@@ -5,8 +5,8 @@
  */
 
 import {html, LitElement, TemplateResult} from 'lit';
-import {property} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
+import {property} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
 /** @soyCompatible */
 export class FocusRing extends LitElement {

focus/strong-focus_test.ts

@@ -6,7 +6,7 @@
 
 import 'jasmine';
 
-import {isStrongFocusForced, pointerPress, setForceStrongFocus, setup, shouldShowStrongFocus} from './strong-focus';
+import {isStrongFocusForced, pointerPress, setForceStrongFocus, setup, shouldShowStrongFocus} from './strong-focus.js';
 
 class MockFocus {
   constructor(public visible = false) {}

formfield/formfield.ts

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {Formfield} from './lib/formfield';
-import {styles as formfieldStyles} from './lib/formfield-styles.css';
+import {Formfield} from './lib/formfield.js';
+import {styles as formfieldStyles} from './lib/formfield-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

formfield/lib/formfield.ts

@@ -5,9 +5,9 @@
  */
 
 import {html, LitElement, TemplateResult} from 'lit';
-import {property, queryAssignedElements} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
+import {property, queryAssignedElements} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 
 /** @soyCompatible */
 export class Formfield extends LitElement {

icon/icon.ts

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators';
+import {customElement} from 'lit/decorators.js';
 
-import {Icon} from './lib/icon';
-import {styles} from './lib/icon-styles.css';
+import {Icon} from './lib/icon.js';
+import {styles} from './lib/icon-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/filled-icon-button-toggle.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles} from './lib/filled-styles.css';
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
-import {IconButtonToggle} from './lib/icon-button-toggle';
+import {styles} from './lib/filled-styles.css.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {IconButtonToggle} from './lib/icon-button-toggle.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/filled-icon-button.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles} from './lib/filled-styles.css';
-import {IconButton} from './lib/icon-button';
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
+import {styles} from './lib/filled-styles.css.js';
+import {IconButton} from './lib/icon-button.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/filled-link-icon-button.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles} from './lib/filled-styles.css';
-import {LinkIconButton} from './lib/link-icon-button';
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
+import {styles} from './lib/filled-styles.css.js';
+import {LinkIconButton} from './lib/link-icon-button.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/filled-tonal-icon-button-toggle.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles} from './lib/filled-tonal-styles.css';
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
-import {IconButtonToggle} from './lib/icon-button-toggle';
+import {styles} from './lib/filled-tonal-styles.css.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {IconButtonToggle} from './lib/icon-button-toggle.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/filled-tonal-icon-button.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles} from './lib/filled-tonal-styles.css';
-import {IconButton} from './lib/icon-button';
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
+import {styles} from './lib/filled-tonal-styles.css.js';
+import {IconButton} from './lib/icon-button.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/filled-tonal-link-icon-button.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles} from './lib/filled-tonal-styles.css';
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
-import {LinkIconButton} from './lib/link-icon-button';
+import {styles} from './lib/filled-tonal-styles.css.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {LinkIconButton} from './lib/link-icon-button.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/harness.ts

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Harness} from '@material/web/testing/harness';
+import {Harness} from '@material/web/testing/harness.js';
 
-import {IconButton} from './lib/icon-button';
-import {IconButtonToggle} from './lib/icon-button-toggle';
+import {IconButton} from './lib/icon-button.js';
+import {IconButtonToggle} from './lib/icon-button-toggle.js';
 
 /**
  * Test harness for icon buttons.

iconbutton/icon-button_test.ts

@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './standard-icon-button-toggle';
-import './standard-link-icon-button';
-import './standard-icon-button';
+import './standard-icon-button-toggle.js';
+import './standard-link-icon-button.js';
+import './standard-icon-button.js';
 
-import {Environment} from '@material/web/testing/environment';
+import {Environment} from '@material/web/testing/environment.js';
 import {html} from 'lit';
 
-import {IconButtonHarness} from './harness';
-import {MdStandardIconButtonToggle} from './standard-icon-button-toggle';
+import {IconButtonHarness} from './harness.js';
+import {MdStandardIconButtonToggle} from './standard-icon-button-toggle.js';
 
 const ICON_BUTTON_TEMPLATE = html`
   <md-standard-icon-button .icon="${'star'}" aria-label="Star">

iconbutton/lib/icon-button-toggle.ts

@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element';
-import {ariaProperty} from '@material/web/decorators/aria-property';
-import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus';
-import {MdRipple} from '@material/web/ripple/ripple';
+import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';
+import {ariaProperty} from '@material/web/decorators/aria-property.js';
+import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';
+import {MdRipple} from '@material/web/ripple/ripple.js';
 import {html, TemplateResult} from 'lit';
-import {property, query, state} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
-import {html as staticHtml, literal} from 'lit/static-html';
+import {property, query, state} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {html as staticHtml, literal} from 'lit/static-html.js';
 
 /** @soyCompatible */
 export abstract class IconButtonToggle extends ActionElement {

iconbutton/lib/icon-button.ts

@@ -4,19 +4,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/focus/focus-ring';
-import '@material/web/icon/icon';
+import '@material/web/focus/focus-ring.js';
+import '@material/web/icon/icon.js';
 
-import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element';
-import {ariaProperty} from '@material/web/decorators/aria-property';
-import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus';
-import {MdRipple} from '@material/web/ripple/ripple';
-import {ARIAHasPopup} from '@material/web/types/aria';
+import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';
+import {ariaProperty} from '@material/web/decorators/aria-property.js';
+import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';
+import {MdRipple} from '@material/web/ripple/ripple.js';
+import {ARIAHasPopup} from '@material/web/types/aria.js';
 import {html, TemplateResult} from 'lit';
-import {property, query, state} from 'lit/decorators';
-import {ClassInfo, classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
-import {html as staticHtml, literal} from 'lit/static-html';
+import {property, query, state} from 'lit/decorators.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {html as staticHtml, literal} from 'lit/static-html.js';
 
 /** @soyCompatible */
 export abstract class IconButton extends ActionElement {

iconbutton/lib/link-icon-button.ts

@@ -5,11 +5,11 @@
  */
 
 import {html, TemplateResult} from 'lit';
-import {property} from 'lit/decorators';
-import {classMap} from 'lit/directives/class-map';
-import {ifDefined} from 'lit/directives/if-defined';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 
-import {IconButton} from './icon-button';
+import {IconButton} from './icon-button.js';
 
 // Note that we cast `linkTarget` to this type, below. The Lit compiler
 // enforces the `target` attribute value to be of this type, but this is not

iconbutton/outlined-icon-button-toggle.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
-import {IconButtonToggle} from './lib/icon-button-toggle';
-import {styles} from './lib/outlined-styles.css';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {IconButtonToggle} from './lib/icon-button-toggle.js';
+import {styles} from './lib/outlined-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/outlined-icon-button.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {IconButton} from './lib/icon-button';
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
-import {styles} from './lib/outlined-styles.css';
+import {IconButton} from './lib/icon-button.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {styles} from './lib/outlined-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/outlined-link-icon-button.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
-import {LinkIconButton} from './lib/link-icon-button';
-import {styles} from './lib/outlined-styles.css';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {LinkIconButton} from './lib/link-icon-button.js';
+import {styles} from './lib/outlined-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/standard-icon-button-toggle.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
-import {IconButtonToggle} from './lib/icon-button-toggle';
-import {styles} from './lib/standard-styles.css';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {IconButtonToggle} from './lib/icon-button-toggle.js';
+import {styles} from './lib/standard-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/standard-icon-button.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {IconButton} from './lib/icon-button';
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
-import {styles} from './lib/standard-styles.css';
+import {IconButton} from './lib/icon-button.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {styles} from './lib/standard-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/standard-link-icon-button.ts

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon';
+import '@material/web/icon/icon.js';
 
-import {customElement} from 'lit/decorators';
-import {ClassInfo} from 'lit/directives/class-map';
+import {customElement} from 'lit/decorators.js';
+import {ClassInfo} from 'lit/directives/class-map.js';
 
-import {styles as sharedStyles} from './lib/icon-button-styles.css';
-import {LinkIconButton} from './lib/link-icon-button';
-import {styles} from './lib/standard-styles.css';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {LinkIconButton} from './lib/link-icon-button.js';
+import {styles} from './lib/standard-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {