Add explicit file extensions to module imports

.github/workflows/ci.yml

@@ -59,21 +59,3 @@ jobs:
 
             - name: Build Toolkit 🏗
               run: npm run build
-
-    build-docs:
-        runs-on: ubuntu-latest
-        timeout-minutes: 10
-        steps:
-            - name: Checkout 🛎️
-              uses: actions/checkout@v2
-
-            - name: Setup Node 💾
-              uses: actions/setup-node@v2
-              with:
-                  node-version: '14'
-
-            - name: Install Dependencies 📥
-              run: npm install
-
-            - name: Build Docs 🏗
-              run: npm run build:docs

azure-pipelines.yml

@@ -110,18 +110,3 @@ stages:
                   displayName: 'Publish Artifacts 📦'
                   inputs:
                       ArtifactName: 'drop'
-
-          - job: docs
-            timeoutInMinutes: 10
-
-            steps:
-                - task: NodeTool@0
-                  displayName: 'Setup Node 💾'
-                  inputs:
-                      versionSpec: '14.x'
-
-                - script: npm install
-                  displayName: 'Install Dependencies 📥'
-
-                - script: npm run build:docs
-                  displayName: 'Build Docs 🏗'

src/badge/badge.styles.ts

@@ -16,7 +16,7 @@ import {
 	fontFamily,
 	typeRampMinus1FontSize,
 	typeRampMinus1LineHeight,
-} from '../design-tokens';
+} from '../design-tokens.js';
 
 export const badgeStyles = (
 	context: ElementDefinitionContext,

src/badge/index.ts

@@ -6,7 +6,7 @@ import {
 	FoundationElementDefinition,
 	badgeTemplate as template,
 } from '@microsoft/fast-foundation';
-import {badgeStyles as styles} from './badge.styles';
+import {badgeStyles as styles} from './badge.styles.js';
 
 /**
  * The Visual Studio Code badge class.

src/button/button.styles.ts

@@ -33,7 +33,7 @@ import {
 	foreground,
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
-} from '../design-tokens';
+} from '../design-tokens.js';
 
 /**
  * Developer note:

src/button/index.ts

@@ -7,7 +7,7 @@ import {
 	Button as FoundationButton,
 	buttonTemplate as template,
 } from '@microsoft/fast-foundation';
-import {buttonStyles as styles} from './button.styles';
+import {buttonStyles as styles} from './button.styles.js';
 
 /**
  * Types of button appearance.

src/checkbox/checkbox.styles.ts

@@ -21,7 +21,7 @@ import {
 	foreground,
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
-} from '../design-tokens';
+} from '../design-tokens.js';
 
 export const checkboxStyles = (
 	context: ElementDefinitionContext,

src/checkbox/index.ts

@@ -6,7 +6,7 @@ import {
 	Checkbox as FoundationCheckbox,
 	checkboxTemplate as template,
 } from '@microsoft/fast-foundation';
-import {checkboxStyles as styles} from './checkbox.styles';
+import {checkboxStyles as styles} from './checkbox.styles.js';
 
 /**
  * The Visual Studio Code checkbox class.

src/custom-elements.ts

@@ -1,44 +1,44 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import type {Container} from '@microsoft/fast-foundation';
-import {vsCodeBadge} from './badge/index';
-import {vsCodeButton} from './button/index';
-import {vsCodeCheckbox} from './checkbox/index';
+import {vsCodeBadge} from './badge/index.js';
+import {vsCodeButton} from './button/index.js';
+import {vsCodeCheckbox} from './checkbox/index.js';
 import {
 	vsCodeDataGrid,
 	vsCodeDataGridCell,
 	vsCodeDataGridRow,
-} from './data-grid/index';
-import {vsCodeDivider} from './divider/index';
-import {vsCodeDropdown} from './dropdown/index';
-import {vsCodeLink} from './link/index';
-import {vsCodeOption} from './option/index';
-import {vsCodePanels, vsCodePanelTab, vsCodePanelView} from './panels/index';
-import {vsCodeProgressRing} from './progress-ring/index';
-import {vsCodeRadioGroup} from './radio-group/index';
-import {vsCodeRadio} from './radio/index';
-import {vsCodeTag} from './tag/index';
-import {vsCodeTextArea} from './text-area/index';
-import {vsCodeTextField} from './text-field/index';
+} from './data-grid/index.js';
+import {vsCodeDivider} from './divider/index.js';
+import {vsCodeDropdown} from './dropdown/index.js';
+import {vsCodeLink} from './link/index.js';
+import {vsCodeOption} from './option/index.js';
+import {vsCodePanels, vsCodePanelTab, vsCodePanelView} from './panels/index.js';
+import {vsCodeProgressRing} from './progress-ring/index.js';
+import {vsCodeRadioGroup} from './radio-group/index.js';
+import {vsCodeRadio} from './radio/index.js';
+import {vsCodeTag} from './tag/index.js';
+import {vsCodeTextArea} from './text-area/index.js';
+import {vsCodeTextField} from './text-field/index.js';
 
 // Don't delete these. They're needed so that API-extractor doesn't add import types
 // with improper pathing
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import type {Badge} from './badge/index';
-import type {Button} from './button/index';
-import type {Checkbox} from './checkbox/index';
-import type {DataGrid, DataGridCell, DataGridRow} from './data-grid/index';
-import type {Divider} from './divider/index';
-import type {Dropdown} from './dropdown/index';
-import type {Link} from './link/index';
-import type {Option} from './option/index';
-import type {Panels, PanelTab, PanelView} from './panels/index';
-import type {ProgressRing} from './progress-ring/index';
-import type {RadioGroup} from './radio-group/index';
-import type {Radio} from './radio/index';
-import type {Tag} from './tag/index';
-import type {TextArea} from './text-area/index';
-import type {TextField} from './text-field/index';
+import type {Badge} from './badge/index.js';
+import type {Button} from './button/index.js';
+import type {Checkbox} from './checkbox/index.js';
+import type {DataGrid, DataGridCell, DataGridRow} from './data-grid/index.js';
+import type {Divider} from './divider/index.js';
+import type {Dropdown} from './dropdown/index.js';
+import type {Link} from './link/index.js';
+import type {Option} from './option/index.js';
+import type {Panels, PanelTab, PanelView} from './panels/index.js';
+import type {ProgressRing} from './progress-ring/index.js';
+import type {RadioGroup} from './radio-group/index.js';
+import type {Radio} from './radio/index.js';
+import type {Tag} from './tag/index.js';
+import type {TextArea} from './text-area/index.js';
+import type {TextField} from './text-field/index.js';
 
 // export all components
 export {

src/data-grid/data-grid-cell.styles.ts

@@ -18,7 +18,7 @@ import {
 	listActiveSelectionForeground,
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
-} from '../design-tokens';
+} from '../design-tokens.js';
 
 export const dataGridCellStyles = (
 	context: ElementDefinitionContext,

src/data-grid/data-grid-row.styles.ts

@@ -11,7 +11,7 @@ import {
 	contrastActiveBorder,
 	designUnit,
 	listHoverBackground,
-} from '../design-tokens';
+} from '../design-tokens.js';
 
 export const dataGridRowStyles = (
 	context: ElementDefinitionContext,

src/data-grid/index.ts

@@ -13,9 +13,9 @@ import {
 	dataGridTemplate as gridTemplate,
 	dataGridRowTemplate as rowTemplate,
 } from '@microsoft/fast-foundation';
-import {dataGridStyles as gridStyles} from './data-grid.styles';
-import {dataGridRowStyles as rowStyles} from './data-grid-row.styles';
-import {dataGridCellStyles as cellStyles} from './data-grid-cell.styles';
+import {dataGridStyles as gridStyles} from './data-grid.styles.js';
+import {dataGridRowStyles as rowStyles} from './data-grid-row.styles.js';
+import {dataGridCellStyles as cellStyles} from './data-grid-cell.styles.js';
 
 export {DataGridCellTypes, DataGridRowTypes, GenerateHeaderOptions};
 

src/design-tokens.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {create} from './utilities/design-tokens/create';
+import {create} from './utilities/design-tokens/create.js';
 
 /**
  * Developer note:

src/divider/divider.styles.ts

@@ -7,7 +7,7 @@ import {
 	ElementDefinitionContext,
 	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
-import {borderWidth, designUnit, dividerBackground} from '../design-tokens';
+import {borderWidth, designUnit, dividerBackground} from '../design-tokens.js';
 
 export const dividerStyles = (
 	context: ElementDefinitionContext,

src/divider/index.ts

@@ -7,7 +7,7 @@ import {
 	FoundationElementDefinition,
 	dividerTemplate as template,
 } from '@microsoft/fast-foundation';
-import {dividerStyles as styles} from './divider.styles';
+import {dividerStyles as styles} from './divider.styles.js';
 
 export {DividerRole};
 

src/dropdown/dropdown.styles.ts

@@ -25,8 +25,8 @@ import {
 	listActiveSelectionForeground,
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
-} from '../design-tokens';
-import {DropdownOptions} from './';
+} from '../design-tokens.js';
+import {DropdownOptions} from './index.js';
 
 export const dropdownStyles = (
 	context: ElementDefinitionContext,

src/dropdown/index.ts

@@ -7,7 +7,7 @@ import {
 	SelectOptions,
 	selectTemplate as template,
 } from '@microsoft/fast-foundation';
-import {dropdownStyles as styles} from './dropdown.styles';
+import {dropdownStyles as styles} from './dropdown.styles.js';
 
 export {DropdownPosition};
 

src/index-rollup.ts

@@ -1,10 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {allComponents} from './custom-elements';
-import {provideVSCodeDesignSystem} from './vscode-design-system';
+import {allComponents} from './custom-elements.js';
+import {provideVSCodeDesignSystem} from './vscode-design-system.js';
 
-export * from './index';
+export * from './index.js';
 
 /**
  * The global VSCode Design System.

src/index.ts

@@ -1,22 +1,22 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-export * from './vscode-design-system';
-export * from './custom-elements';
+export * from './vscode-design-system.js';
+export * from './custom-elements.js';
 
 // Export components and classes
-export * from './badge/index';
-export * from './button/index';
-export * from './checkbox/index';
-export * from './data-grid/index';
-export * from './divider/index';
-export * from './dropdown/index';
-export * from './link/index';
-export * from './option/index';
-export * from './panels/index';
-export * from './progress-ring/index';
-export * from './radio-group/index';
-export * from './radio/index';
-export * from './tag/index';
-export * from './text-area/index';
-export * from './text-field/index';
+export * from './badge/index.js';
+export * from './button/index.js';
+export * from './checkbox/index.js';
+export * from './data-grid/index.js';
+export * from './divider/index.js';
+export * from './dropdown/index.js';
+export * from './link/index.js';
+export * from './option/index.js';
+export * from './panels/index.js';
+export * from './progress-ring/index.js';
+export * from './radio-group/index.js';
+export * from './radio/index.js';
+export * from './tag/index.js';
+export * from './text-area/index.js';
+export * from './text-field/index.js';

src/link/index.ts

@@ -6,7 +6,7 @@ import {
 	Anchor as FoundationAnchor,
 	anchorTemplate as template,
 } from '@microsoft/fast-foundation';
-import {linkStyles as styles} from './link.styles';
+import {linkStyles as styles} from './link.styles.js';
 
 /**
  * Link configuration options

src/link/link.styles.ts

@@ -16,8 +16,8 @@ import {
 	linkForeground,
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
-} from '../design-tokens';
-import {LinkOptions} from './';
+} from '../design-tokens.js';
+import {LinkOptions} from './index.js';
 
 export const linkStyles = (
 	context: ElementDefinitionContext,

src/option/index.ts

@@ -6,7 +6,7 @@ import {
 	ListboxOptionOptions,
 	listboxOptionTemplate as template,
 } from '@microsoft/fast-foundation';
-import {optionStyles as styles} from './option.styles';
+import {optionStyles as styles} from './option.styles.js';
 
 /**
  * Dropdown option configuration options

src/option/option.styles.ts

@@ -19,8 +19,8 @@ import {
 	listActiveSelectionForeground,
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
-} from '../design-tokens';
-import {OptionOptions} from './';
+} from '../design-tokens.js';
+import {OptionOptions} from './index.js';
 
 export const optionStyles = (
 	context: ElementDefinitionContext,

src/panels/index.ts

@@ -11,9 +11,9 @@ import {
 	tabsTemplate,
 	tabTemplate,
 } from '@microsoft/fast-foundation';
-import {panelsStyles} from './panels.styles';
-import {panelTabStyles} from './panel-tab.styles';
-import {panelViewStyles} from './panel-view.styles';
+import {panelsStyles} from './panels.styles.js';
+import {panelTabStyles} from './panel-tab.styles.js';
+import {panelViewStyles} from './panel-view.styles.js';
 
 /**
  * The Visual Studio Code panels class.

src/panels/panel-tab.styles.ts

@@ -18,7 +18,7 @@ import {
 	panelTabForeground,
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
-} from '../design-tokens';
+} from '../design-tokens.js';
 
 export const panelTabStyles = (
 	context: ElementDefinitionContext,

src/panels/panel-view.styles.ts

@@ -12,7 +12,7 @@ import {
 	designUnit,
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
-} from '../design-tokens';
+} from '../design-tokens.js';
 
 export const panelViewStyles = (
 	context: ElementDefinitionContext,