fix: ensure browser understandable extensions

packages/actionbar/test/actionbar.test.ts

@@ -13,7 +13,7 @@ import { fixture, elementUpdated, html, expect } from '@open-wc/testing';
 
 import '../sp-actionbar.js';
 import { Actionbar } from '../';
-import { Default } from '../stories/actionbar.stories';
+import { Default } from '../stories/actionbar.stories.js';
 
 describe('Actionbar', () => {
     it('loads', async () => {

packages/asset/test/asset.test.ts

@@ -22,20 +22,20 @@ describe('Asset', () => {
 
         await elementUpdated(el);
 
-        expect(el).to.be.accessible();
+        await expect(el).to.be.accessible();
     });
     it('loads [variant="file"] accessibly', async () => {
         const el = await fixture<Asset>(File());
 
         await elementUpdated(el);
 
-        expect(el).to.be.accessible();
+        await expect(el).to.be.accessible();
     });
     it('loads [variant="folder"] accessibly', async () => {
         const el = await fixture<Asset>(Folder());
 
         await elementUpdated(el);
 
-        expect(el).to.be.accessible();
+        await expect(el).to.be.accessible();
     });
 });

packages/avatar/src/Avatar.ts

@@ -17,7 +17,7 @@ import {
     CSSResultArray,
     TemplateResult,
 } from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 import avatarStyles from './avatar.css.js';
 

packages/avatar/test/avatar.test.ts

@@ -8,8 +8,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '../sp-avatar.js';
-import { Avatar } from '../';
+import '@spectrum-web-components/avatar/sp-avatar.js';
+import { Avatar } from '@spectrum-web-components/avatar';
 import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
 
 describe('Avatar', () => {

packages/bar-loader/test/bar-loader.test.ts

@@ -29,7 +29,7 @@ describe('BarLoader', () => {
         expect(el).lightDom.to.equalSnapshot();
         expect(el).shadowDom.to.equalSnapshot();
 
-        expect(el).to.be.accessible();
+        await expect(el).to.be.accessible();
     });
 
     it('accepts a changing progress', async () => {

packages/button/src/ButtonBase.ts

@@ -14,7 +14,7 @@ import { property, html, TemplateResult, CSSResultArray } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text';
+import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import buttonStyles from './button-base.css.js';
 
 export class ButtonBase extends LikeAnchor(ObserveSlotText(Focusable)) {

packages/checkbox/test/checkbox.test.ts

@@ -20,7 +20,7 @@ import {
     expect,
     nextFrame,
 } from '@open-wc/testing';
-import { waitForPredicate } from '../../../test/testing-helpers';
+import { waitForPredicate } from '../../../test/testing-helpers.js';
 import '@spectrum-web-components/shared/src/focus-visible.js';
 
 function inputForCheckbox(checkbox: Checkbox): HTMLInputElement {

packages/dialog/src/DialogWrapper.ts

@@ -18,7 +18,7 @@ import {
     CSSResultArray,
     query,
 } from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 import '@spectrum-web-components/underlay/sp-underlay.js';
 import '@spectrum-web-components/button/sp-button.js';

packages/dialog/stories/dialog-wrapper.stories.ts

@@ -16,7 +16,7 @@ import { action, boolean } from '@open-wc/demoing-storybook';
 import '@spectrum-web-components/button/sp-button.js';
 
 import '../sp-dialog-wrapper.js';
-import { landscape } from './images';
+import { landscape } from './images.js';
 
 export default {
     title: 'Dialog Wrapped',
@@ -46,16 +46,23 @@ export const wrapperLabeledHero = (): TemplateResult => {
     `;
 };
 
-export const wrapperDismissible = (): TemplateResult => {
+export const wrapperDismissible = ({
+    actionTracking = true,
+} = {}): TemplateResult => {
     const noTransitions = boolean('No Transitions', false, 'Testing');
+    const announceAction = actionTracking
+        ? action
+        : () => {
+              return;
+          };
     return html`
         <sp-dialog-wrapper
             ?no-transitions=${noTransitions}
             open
             hero=${landscape}
             dismissible
             headline="Wrapped Dialog w/ Hero Image"
-            @close=${action('close')}
+            @close=${announceAction('close')}
         >
             Content of the dialog
         </sp-dialog-wrapper>
@@ -91,8 +98,15 @@ export const wrapperDismissibleUnderlay = (): TemplateResult => {
     `;
 };
 
-export const wrapperButtons = (): TemplateResult => {
+export const wrapperButtons = ({
+    actionTracking = true,
+} = {}): TemplateResult => {
     const noTransitions = boolean('No Transitions', false, 'Testing');
+    const announceAction = actionTracking
+        ? action
+        : () => {
+              return;
+          };
     return html`
         <sp-dialog-wrapper
             ?no-transitions=${noTransitions}
@@ -103,9 +117,9 @@ export const wrapperButtons = (): TemplateResult => {
             secondary-label="Replace"
             cancel-label="Cancel"
             footer="Content for footer"
-            @confirm=${action('confirm')}
-            @secondary=${action('secondary')}
-            @cancel=${action('cancel')}
+            @confirm=${announceAction('confirm')}
+            @secondary=${announceAction('secondary')}
+            @cancel=${announceAction('cancel')}
         >
             Content of the dialog
         </sp-dialog-wrapper>

packages/dialog/stories/dialog.stories.ts

@@ -14,7 +14,7 @@ import { html, TemplateResult } from 'lit-html';
 import { boolean } from '@open-wc/demoing-storybook';
 
 import '../sp-dialog.js';
-import { landscape } from './images';
+import { landscape } from './images.js';
 import '@spectrum-web-components/button/sp-button.js';
 
 export default {

packages/dialog/test/dialog-wrapper.test.ts

@@ -66,7 +66,9 @@ describe('Dialog Wrapper', () => {
         expect(el.open).to.be.false;
     });
     it('dismisses', async () => {
-        const el = await fixture<DialogWrapper>(wrapperDismissible());
+        const el = await fixture<DialogWrapper>(
+            wrapperDismissible({ actionTracking: false })
+        );
 
         await elementUpdated(el);
         expect(el.open).to.be.true;
@@ -129,7 +131,9 @@ describe('Dialog Wrapper', () => {
         const handleConfirm = (): void => confirmSpy();
         const handleCancel = (): void => cancelSpy();
         const handleSecondary = (): void => secondarySpy();
-        const el = await fixture<DialogWrapper>(wrapperButtons());
+        const el = await fixture<DialogWrapper>(
+            wrapperButtons({ actionTracking: false })
+        );
         el.addEventListener('confirm', handleConfirm);
         el.addEventListener('cancel', handleCancel);
         el.addEventListener('secondary', handleSecondary);

packages/dropzone/test/dropzone.test.ts

@@ -11,8 +11,8 @@ governing permissions and limitations under the License.
 */
 import '../sp-dropzone.js';
 import { Dropzone } from '../';
-import { illustration } from './test-svg';
-import { waitForPredicate } from '../../../test/testing-helpers';
+import { illustration } from './test-svg.js';
+import { waitForPredicate } from '../../../test/testing-helpers.js';
 import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
 
 describe('Dropzone', () => {

packages/icon/src/Icon.ts

@@ -22,7 +22,7 @@ import {
 import { IconsetRegistry } from '@spectrum-web-components/iconset/src/iconset-registry.js';
 
 import iconStyles from './icon.css.js';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 export class Icon extends LitElement {
     public static is = 'sp-icon';

packages/icons/test/icons.test.ts

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 import '../sp-icons-large.js';
 import '../sp-icons-medium.js';
 import { IconsMedium, IconsLarge } from '../';
-import IconsetSVG from '../src/icons-large.svg';
+import IconsetSVG from '../src/icons-large.svg.js';
 import { elementUpdated, fixture, html, expect } from '@open-wc/testing';
 
 describe('icons', () => {

packages/iconset/test/iconset.test.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { waitForPredicate } from '../../../test/testing-helpers';
+import { waitForPredicate } from '../../../test/testing-helpers.js';
 import '@spectrum-web-components/icons/sp-icons-medium.js';
 import '@spectrum-web-components/icon/sp-icon.js';
 import { IconsMedium } from '@spectrum-web-components/icons';

packages/menu/test/menu-item.test.ts

@@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+import '../sp-menu.js';
 import '../sp-menu-item.js';
 import { MenuItem } from '../';
 import '@spectrum-web-components/menu';

packages/overlay/src/ActiveOverlay.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { createPopper, Instance, maxSize, applyMaxSize } from './popper';
+import { createPopper, Instance, maxSize, applyMaxSize } from './popper.js';
 import {
     Placement,
     OverlayOpenDetail,
@@ -25,7 +25,7 @@ import {
     property,
     PropertyValues,
 } from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import styles from './active-overlay.css.js';
 
 export interface PositionResult {

packages/overlay/src/overlay-stack.ts

@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
 
 import { ActiveOverlay } from './ActiveOverlay.js';
 import { OverlayOpenDetail } from './overlay-types';
-import { OverlayTimer } from './overlay-timer';
+import { OverlayTimer } from './overlay-timer.js';
 
 function isLeftClick(event: MouseEvent): boolean {
     return event.button === 0;

packages/overlay/src/overlay.ts

@@ -16,7 +16,7 @@ import {
     Placement,
     OverlayDisplayQueryDetail,
 } from './overlay-types';
-import { OverlayStack } from './overlay-stack';
+import { OverlayStack } from './overlay-stack.js';
 
 type OverlayOptions = {
     delayed?: boolean;

packages/overlay/src/popper.ts

@@ -20,11 +20,11 @@ import {
 import { Instance } from '@popperjs/core/lib/types';
 import { Placement } from '@popperjs/core/lib/enums';
 
-import flip from '@popperjs/core/lib/modifiers/flip';
-import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
-import arrow from '@popperjs/core/lib/modifiers/arrow';
-import offset from '@popperjs/core/lib/modifiers/offset';
-import { computeArrowRotateStyles } from './popper-arrow-rotate';
+import flip from '@popperjs/core/lib/modifiers/flip.js';
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow.js';
+import arrow from '@popperjs/core/lib/modifiers/arrow.js';
+import offset from '@popperjs/core/lib/modifiers/offset.js';
+import { computeArrowRotateStyles } from './popper-arrow-rotate.js';
 import maxSize from 'popper-max-size-modifier';
 import { applyMaxSize } from './apply-max-size.js';
 

packages/overlay/test/overlay-timer.test.ts

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 import { useFakeTimers, SinonFakeTimers } from 'sinon';
-import { OverlayTimer } from '../src/overlay-timer';
+import { OverlayTimer } from '../src/overlay-timer.js';
 import { expect } from '@open-wc/testing';
 
 describe('Overlays timer', () => {

packages/overlay/test/overlay-trigger.test.ts

@@ -9,7 +9,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { waitForPredicate, isVisible } from '../../../test/testing-helpers';
+import { waitForPredicate, isVisible } from '../../../test/testing-helpers.js';
 import {
     fixture,
     aTimeout,

packages/overlay/test/overlay.test.ts

@@ -10,12 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/dialog/sp-dialog.js';
 import { Dialog } from '@spectrum-web-components/dialog';
 import '@spectrum-web-components/popover/sp-popover.js';
 import { Popover } from '@spectrum-web-components/popover';
 import { Overlay, Placement } from '../';
 
-import { waitForPredicate, isVisible } from '../../../test/testing-helpers';
+import { waitForPredicate, isVisible } from '../../../test/testing-helpers.js';
 import {
     fixture,
     html,

packages/search/src/Search.ts

@@ -18,7 +18,7 @@ import {
     property,
     query,
 } from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 import { Textfield } from '@spectrum-web-components/textfield';
 import '@spectrum-web-components/button/sp-clear-button.js';

packages/search/test/search.test.ts

@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
 import '../sp-search.js';
 import { Search } from '../';
 import { litFixture, html, elementUpdated, expect } from '@open-wc/testing';
-import { waitForPredicate } from '../../../test/testing-helpers';
+import { waitForPredicate } from '../../../test/testing-helpers.js';
 import '@spectrum-web-components/shared/src/focus-visible.js';
 import { spy } from 'sinon';
 

packages/shared/test/focusable.test.ts

@@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '../src/focusable';
-import { Focusable } from '../src/focusable';
+import '../src/focusable.js';
+import { Focusable } from '../src/focusable.js';
 import { html } from 'lit-element';
 import { fixture, elementUpdated, expect } from '@open-wc/testing';
 

packages/shared/test/observe-slot-text.test.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ObserveSlotText } from '../src/observe-slot-text';
+import { ObserveSlotText } from '../src/observe-slot-text.js';
 import { LitElement, html, TemplateResult } from 'lit-element';
 import { fixture, elementUpdated, expect } from '@open-wc/testing';
 

packages/sidenav/test/sidenav-item.test.ts

@@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+import '../sp-sidenav.js';
 import '../sp-sidenav-item.js';
 import { SideNavItem } from '../';
 import { fixture, elementUpdated, html, expect } from '@open-wc/testing';

packages/slider/sp-slider.ts

@@ -9,7 +9,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Slider } from './src/Slider';
+import { Slider } from './src/Slider.js';
 
 customElements.define('sp-slider', Slider);
 

packages/tabs/test/tabs.test.ts

@@ -22,7 +22,7 @@ import {
 } from '@open-wc/testing';
 import { LitElement } from 'lit-element';
 import { TemplateResult } from 'lit-html';
-import { waitForPredicate } from '../../../test/testing-helpers';
+import { waitForPredicate } from '../../../test/testing-helpers.js';
 
 const keyboardEvent = (code: string): KeyboardEvent =>
     new KeyboardEvent('keydown', {

packages/tags/test/tags.test.ts

@@ -86,7 +86,7 @@ describe('Tags', () => {
         expect(el.hasAttribute('role')).to.be.true;
         expect(el.hasAttribute('aria-label')).to.be.true;
     });
-    it('loads accepts keyboard events while focused', async () => {
+    it('accepts keyboard events while focused', async () => {
         const el = await fixture<Tags>(
             html`
                 <sp-tags>
@@ -143,7 +143,7 @@ describe('Tags', () => {
 
         tag1.blur();
     });
-    it('loads accepts keyboard events while focused', async () => {
+    it('will no focus [disabled] children', async () => {
         const el = await fixture<Tags>(
             html`
                 <sp-tags>