Update Toolkit to FAST Foundation `v2` (#273)

This PR updates the Webview UI Toolkit to leverage FAST Foundation `v2`.

.eslintignore

@@ -0,0 +1,12 @@
+# don't ever lint node_modules
+node_modules
+# don't lint distribute package output
+dist
+# don't lint build folder output
+build
+# don't lint coverage output
+coverage
+# don't lint storybook files
+.storybook/
+# don't lint stories
+*.stories.*

.eslintrc.js

@@ -1,13 +1,5 @@
 module.exports = {
 	extends: ['@microsoft/eslint-config-fast-dna', 'prettier'],
-	ignorePatterns: [
-		'node_modules',
-		'dist',
-		'build',
-		'coverage',
-		'.storybook',
-		'*.spec.*',
-	],
 	rules: {
 		'no-extra-boolean-cast': 'off',
 		'@typescript-eslint/no-use-before-define': 'off',

.storybook/preview.js

@@ -1,5 +1,8 @@
+import * as VSCodeComponents from '../src/index-rollup';
 import {themes} from '@storybook/theming';
 
+VSCodeComponents;
+
 export const parameters = {
 	actions: {argTypesRegex: '^on[A-Z].*'},
 	options: {

docs/api-report.md

@@ -5,35 +5,45 @@
 ```ts
 
 import { Anchor } from '@microsoft/fast-foundation';
-import { Badge } from '@microsoft/fast-foundation';
+import { AnchorOptions } from '@microsoft/fast-foundation';
+import { Badge as Badge_2 } from '@microsoft/fast-foundation';
 import { BaseProgress } from '@microsoft/fast-foundation';
-import { Button } from '@microsoft/fast-foundation';
-import { Checkbox } from '@microsoft/fast-foundation';
-import { DataGrid } from '@microsoft/fast-foundation';
-import { DataGridCell } from '@microsoft/fast-foundation';
-import { DataGridRow } from '@microsoft/fast-foundation';
-import { Divider } from '@microsoft/fast-foundation';
+import { Button as Button_2 } from '@microsoft/fast-foundation';
+import { ButtonOptions } from '@microsoft/fast-foundation';
+import { Checkbox as Checkbox_2 } from '@microsoft/fast-foundation';
+import { CheckboxOptions } from '@microsoft/fast-foundation';
+import { Constructable } from '@microsoft/fast-element';
+import { DataGrid as DataGrid_2 } from '@microsoft/fast-foundation';
+import { DataGridCell as DataGridCell_2 } from '@microsoft/fast-foundation';
+import { DataGridRow as DataGridRow_2 } from '@microsoft/fast-foundation';
+import { Divider as Divider_2 } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElementDefinition } from '@microsoft/fast-foundation';
+import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { ListboxOption } from '@microsoft/fast-foundation';
-import { Radio } from '@microsoft/fast-foundation';
-import { RadioGroup } from '@microsoft/fast-foundation';
+import { ListboxOptionOptions } from '@microsoft/fast-foundation';
+import { OverrideFoundationElementDefinition } from '@microsoft/fast-foundation';
+import { ProgressRingOptions } from '@microsoft/fast-foundation';
+import { Radio as Radio_2 } from '@microsoft/fast-foundation';
+import { RadioGroup as RadioGroup_2 } from '@microsoft/fast-foundation';
+import { RadioOptions } from '@microsoft/fast-foundation';
 import { Select } from '@microsoft/fast-foundation';
+import { SelectOptions } from '@microsoft/fast-foundation';
 import { Tab } from '@microsoft/fast-foundation';
 import { TabPanel } from '@microsoft/fast-foundation';
 import { Tabs } from '@microsoft/fast-foundation';
-import { TextArea } from '@microsoft/fast-foundation';
-import { TextField } from '@microsoft/fast-foundation';
+import { TextArea as TextArea_2 } from '@microsoft/fast-foundation';
+import { TextField as TextField_2 } from '@microsoft/fast-foundation';
+import { TextFieldOptions } from '@microsoft/fast-foundation';
 
 // @public
-export type ButtonAppearance = 'primary' | 'secondary' | 'icon';
-
-// @public
-export class VSCodeBadge extends Badge {
+export class Badge extends Badge_2 {
     // @internal
     connectedCallback(): void;
 }
 
 // @public
-export class VSCodeButton extends Button {
+export class Button extends Button_2 {
     appearance: ButtonAppearance;
     // @internal
     attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void;
@@ -42,61 +52,74 @@ export class VSCodeButton extends Button {
 }
 
 // @public
-export class VSCodeCheckbox extends Checkbox {
+export type ButtonAppearance = 'primary' | 'secondary' | 'icon';
+
+// @public
+export class Checkbox extends Checkbox_2 {
     // @internal
     connectedCallback(): void;
 }
 
 // @public
-export class VSCodeDataGrid extends DataGrid {
+export class DataGrid extends DataGrid_2 {
     // @internal
     connectedCallback(): void;
 }
 
 // @public
-export class VSCodeDataGridCell extends DataGridCell {
+export class DataGridCell extends DataGridCell_2 {
 }
 
 // @public
-export class VSCodeDataGridRow extends DataGridRow {
+export class DataGridRow extends DataGridRow_2 {
 }
 
 // @public
-export class VSCodeDivider extends Divider {
+export class Divider extends Divider_2 {
 }
 
 // @public
-export class VSCodeDropdown extends Select {
+export class Dropdown extends Select {
 }
 
 // @public
-export class VSCodeLink extends Anchor {
+export type DropdownOptions = SelectOptions;
+
+// @public
+export class Link extends Anchor {
 }
 
 // @public
-export class VSCodeOption extends ListboxOption {
+export type LinkOptions = AnchorOptions;
+
+// @public
+class Option_2 extends ListboxOption {
+    // @internal
+    connectedCallback(): void;
+}
+export { Option_2 as Option }
+
+// @public
+export type OptionOptions = ListboxOptionOptions;
+
+// @public
+export class Panels extends Tabs {
     // @internal
     connectedCallback(): void;
 }
 
 // @public
-export class VSCodePanels extends Tabs {
+export class PanelTab extends Tab {
     // @internal
     connectedCallback(): void;
 }
 
 // @public
-export class VSCodePanelTab extends Tab {
-    // @internal
-    connectedCallback(): void;
+export class PanelView extends TabPanel {
 }
 
 // @public
-export class VSCodePanelView extends TabPanel {
-}
-
-// @public
-export class VSCodeProgressRing extends BaseProgress {
+export class ProgressRing extends BaseProgress {
     // @internal
     attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void;
     // @internal
@@ -104,35 +127,91 @@ export class VSCodeProgressRing extends BaseProgress {
 }
 
 // @public
-export class VSCodeRadio extends Radio {
+export class Radio extends Radio_2 {
     // @internal
     connectedCallback(): void;
 }
 
 // @public
-export class VSCodeRadioGroup extends RadioGroup {
+export class RadioGroup extends RadioGroup_2 {
     // @internal
     connectedCallback(): void;
 }
 
 // @public
-export class VSCodeTag extends Badge {
+export class Tag extends Badge_2 {
     // @internal
     connectedCallback(): void;
 }
 
 // @public
-export class VSCodeTextArea extends TextArea {
+export class TextArea extends TextArea_2 {
     // @internal
     connectedCallback(): void;
 }
 
 // @public
-export class VSCodeTextField extends TextField {
+export class TextField extends TextField_2 {
     // @internal
     connectedCallback(): void;
 }
 
+// @public
+export const vsCodeBadge: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Badge>;
+
+// @public
+export const vsCodeButton: (overrideDefinition?: OverrideFoundationElementDefinition<ButtonOptions> | undefined) => FoundationElementRegistry<ButtonOptions, Constructable<FoundationElement>>;
+
+// @public
+export const vsCodeCheckbox: (overrideDefinition?: OverrideFoundationElementDefinition<CheckboxOptions> | undefined) => FoundationElementRegistry<CheckboxOptions, Constructable<FoundationElement>>;
+
+// @public
+export const vsCodeDataGrid: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof DataGrid>;
+
+// @public
+export const vsCodeDataGridCell: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof DataGridCell>;
+
+// @public
+export const vsCodeDataGridRow: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof DataGridRow>;
+
+// @public
+export const vsCodeDivider: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Divider>;
+
+// @public
+export const vsCodeDropdown: (overrideDefinition?: OverrideFoundationElementDefinition<SelectOptions> | undefined) => FoundationElementRegistry<SelectOptions, Constructable<FoundationElement>>;
+
+// @public
+export const vsCodeLink: (overrideDefinition?: OverrideFoundationElementDefinition<AnchorOptions> | undefined) => FoundationElementRegistry<AnchorOptions, Constructable<FoundationElement>>;
+
+// @public
+export const vsCodeOption: (overrideDefinition?: OverrideFoundationElementDefinition<ListboxOptionOptions> | undefined) => FoundationElementRegistry<ListboxOptionOptions, Constructable<FoundationElement>>;
+
+// @public
+export const vsCodePanels: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Panels>;
+
+// @public
+export const vsCodePanelTab: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof PanelTab>;
+
+// @public
+export const vsCodePanelView: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof PanelView>;
+
+// @public
+export const vsCodeProgressRing: (overrideDefinition?: OverrideFoundationElementDefinition<ProgressRingOptions> | undefined) => FoundationElementRegistry<ProgressRingOptions, Constructable<FoundationElement>>;
+
+// @public
+export const vsCodeRadio: (overrideDefinition?: OverrideFoundationElementDefinition<RadioOptions> | undefined) => FoundationElementRegistry<RadioOptions, Constructable<FoundationElement>>;
+
+// @public
+export const vsCodeRadioGroup: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof RadioGroup>;
+
+// @public
+export const vsCodeTag: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Tag>;
+
+// @public
+export const vsCodeTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TextArea>;
+
+// @public
+export const vsCodeTextField: (overrideDefinition?: OverrideFoundationElementDefinition<TextFieldOptions> | undefined) => FoundationElementRegistry<TextFieldOptions, Constructable<FoundationElement>>;
 
 // (No @packageDocumentation comment for this package)
 

package.json

@@ -30,9 +30,8 @@
 		"test": "jest --verbose --coverage"
 	},
 	"dependencies": {
-		"@microsoft/fast-element": "^1.2.0",
-		"@microsoft/fast-foundation": "^1.24.7",
-		"lodash-es": "^4.17.21"
+		"@microsoft/fast-element": "^1.6.0",
+		"@microsoft/fast-foundation": "^2.21.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.14.3",
@@ -50,15 +49,15 @@
 		"@storybook/addon-links": "^6.4.0-beta.4",
 		"@storybook/html": "^6.4.0-beta.4",
 		"@storybook/theming": "^6.4.0-beta.4",
+		"@typescript-eslint/eslint-plugin": "^2.23.0",
 		"@types/jest": "^26.0.20",
-		"@typescript-eslint/eslint-plugin": "^5.1.0",
 		"@vscode/codicons": "^0.0.22",
 		"babel-jest": "^27.2.4",
 		"babel-loader": "^8.2.2",
 		"babel-plugin-transform-class-properties": "^6.24.1",
-		"eslint": "^7.32.0",
-		"eslint-config-prettier": "^8.1.0",
-		"eslint-plugin-react": "^7.26.1",
+		"eslint": "6.8.0",
+		"eslint-config-prettier": "6.10.1",
+		"eslint-plugin-import": "^2.25.2",
 		"gh-pages": "^3.1.0",
 		"jest": "^27.2.4",
 		"prettier": "^2.2.1",

rollup.config.js

@@ -54,22 +54,10 @@ export default [
 // ----- Helper Functions -----
 
 function transformHTMLFragment(data) {
-	const onlySpace = /^\s+$/g;
-	const spaceBeforeTagClose = /\s+(>)/g;
-	const spaceBetweenTags = /(>)\s+(<)/g;
-	const spaceBetweenAttrs = /(["'\w])(?!\s*>)\s+/g;
-	const openEnded = /(?:[^="'\w])?(["'\w])\s*$/g;
+	const spaceBeforeAfterAngleBrackets = /\s*([<>])\s*/g; // remove spaces before and after angle brackets
 
-	if (data.match(onlySpace)) {
-		return data.replace(onlySpace, ' ');
-	}
-	data = data.replace(spaceBeforeTagClose, '$1');
-	data = data.replace(spaceBetweenTags, '$1$2');
-	data = data.replace(spaceBetweenAttrs, '$1 ');
-	if (data.match(openEnded)) {
-		return data.trimStart();
-	}
-	return data.trim();
+	data = data.replace(spaceBeforeAfterAngleBrackets, '$1');
+	return data.replace(/\s{2,}/g, ' '); // Collapse all sequences to 1 space
 }
 
 function transformCSSFragment(data) {

src/badge/badge.styles.ts

@@ -2,7 +2,11 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
-import {display} from '@microsoft/fast-foundation';
+import {
+	display,
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import {
 	badgeBackground,
 	badgeForeground,
@@ -14,7 +18,10 @@ import {
 	typeRampMinus1LineHeight,
 } from '../design-tokens';
 
-export const BadgeStyles = css`
+export const badgeStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	${display('inline-block')} :host {
 		box-sizing: border-box;
 		font-family: ${fontFamily};

src/badge/fixtures/createBadge.ts

@@ -1,14 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeBadge} from '../index';
+import {Badge} from '../index';
 
 export type BadgeArgs = {
 	label: string;
 };
 
 export function createBadge({label}: BadgeArgs) {
-	const badge = new VSCodeBadge();
+	const badge = new Badge();
 
 	if (label) {
 		badge.textContent = label;

src/badge/index.ts

@@ -1,24 +1,18 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
-import {Badge, BadgeTemplate as template} from '@microsoft/fast-foundation';
-import {BadgeStyles as styles} from './badge.styles';
+import {
+	Badge as FoundationBadge,
+	badgeTemplate as template,
+} from '@microsoft/fast-foundation';
+import {badgeStyles as styles} from './badge.styles';
 
 /**
- * The Visual Studio Code badge component.
- *
- * @remarks
- * HTML Element: `<vscode-badge>`
+ * The Visual Studio Code badge class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-badge',
-	template,
-	styles,
-})
-export class VSCodeBadge extends Badge {
+export class Badge extends FoundationBadge {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -30,9 +24,23 @@ export class VSCodeBadge extends Badge {
 
 		// This will override any usage of the circular attribute
 		// inherited by the FAST Foundation Badge component so
-		// that VSCodeBadges are always circular
+		// that VSCode Badges are always circular
 		if (!this.circular) {
 			this.circular = true;
 		}
 	}
 }
+
+/**
+ * The Visual Studio Code badge component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-badge>`
+ *
+ * @public
+ */
+export const vsCodeBadge = Badge.compose({
+	baseName: 'badge',
+	template,
+	styles,
+});

src/button/button.styles.ts

@@ -3,8 +3,10 @@
 
 import {css} from '@microsoft/fast-element';
 import {
+	ButtonOptions,
 	disabledCursor,
 	display,
+	ElementDefinitionContext,
 	focusVisible,
 } from '@microsoft/fast-foundation';
 import {
@@ -174,7 +176,10 @@ const IconButtonStyles = css`
 	}
 `;
 
-export const ButtonStyles = css`
+export const buttonStyles = (
+	context: ElementDefinitionContext,
+	definition: ButtonOptions
+) => css`
 	${BaseButtonStyles}
 	${PrimaryButtonStyles}
 	${SecondaryButtonStyles}

src/button/fixtures/createButton.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {ButtonAppearance, VSCodeButton} from '../index';
+import {Button, ButtonAppearance} from '../index';
 import {
 	createCodiconIcon,
 	focusObserver,
@@ -28,7 +28,7 @@ export function createButton({
 	ariaLabel,
 	onClick,
 }: ButtonArgs) {
-	const button = new VSCodeButton();
+	const button = new Button();
 
 	if (label && !iconOnly) {
 		button.textContent = label;

src/button/index.ts

@@ -1,9 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {attr, customElement} from '@microsoft/fast-element';
-import {Button, ButtonTemplate as template} from '@microsoft/fast-foundation';
-import {ButtonStyles as styles} from './button.styles';
+import {attr} from '@microsoft/fast-element';
+import {
+	ButtonOptions,
+	Button as FoundationButton,
+	buttonTemplate as template,
+} from '@microsoft/fast-foundation';
+import {buttonStyles as styles} from './button.styles';
 
 /**
  * Types of button appearance.
@@ -12,22 +16,11 @@ import {ButtonStyles as styles} from './button.styles';
 export type ButtonAppearance = 'primary' | 'secondary' | 'icon';
 
 /**
- * The Visual Studio Code button component.
- *
- * @remarks
- * HTML Element: `<vscode-button>`
+ * The Visual Studio Code button class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-button',
-	template,
-	styles,
-	shadowOptions: {
-		delegatesFocus: true,
-	},
-})
-export class VSCodeButton extends Button {
+export class Button extends FoundationButton {
 	/**
 	 * The appearance the button should have.
 	 *
@@ -91,3 +84,20 @@ export class VSCodeButton extends Button {
 		}
 	}
 }
+
+/**
+ * The Visual Studio Code button component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-button>`
+ *
+ * @public
+ */
+export const vsCodeButton = Button.compose<ButtonOptions>({
+	baseName: 'button',
+	template,
+	styles,
+	shadowOptions: {
+		delegatesFocus: true,
+	},
+});

src/checkbox/checkbox.styles.ts

@@ -3,8 +3,10 @@
 
 import {css} from '@microsoft/fast-element';
 import {
+	CheckboxOptions,
 	disabledCursor,
 	display,
+	ElementDefinitionContext,
 	focusVisible,
 } from '@microsoft/fast-foundation';
 import {
@@ -22,7 +24,10 @@ import {
 	typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const CheckboxStyles = css`
+export const checkboxStyles = (
+	context: ElementDefinitionContext,
+	defintiion: CheckboxOptions
+) => css`
 	${display('inline-flex')} :host {
 		align-items: center;
 		outline: none;

src/checkbox/fixtures/createCheckbox.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeCheckbox} from '../index';
+import {Checkbox} from '../index';
 import {focusObserver} from '../../utilities/storybook/index';
 
 export type CheckboxArgs = {
@@ -25,7 +25,7 @@ export function createCheckbox({
 	hasValue,
 	onChange,
 }: CheckboxArgs) {
-	const checkbox = new VSCodeCheckbox();
+	const checkbox = new Checkbox();
 
 	if (label) {
 		checkbox.textContent = label;

src/checkbox/index.ts

@@ -1,27 +1,19 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
 import {
-	Checkbox,
-	CheckboxTemplate as template,
+	CheckboxOptions,
+	Checkbox as FoundationCheckbox,
+	checkboxTemplate as template,
 } from '@microsoft/fast-foundation';
-import {CheckboxStyles as styles} from './checkbox.styles';
+import {checkboxStyles as styles} from './checkbox.styles';
 
 /**
- * The Visual Studio Code checkbox component.
- *
- * @remarks
- * HTML Element: `<vscode-checkbox>`
+ * The Visual Studio Code checkbox class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-checkbox',
-	template,
-	styles,
-})
-export class VSCodeCheckbox extends Checkbox {
+export class Checkbox extends FoundationCheckbox {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -38,3 +30,34 @@ export class VSCodeCheckbox extends Checkbox {
 		}
 	}
 }
+
+/**
+ * The Visual Studio Code checkbox component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-checkbox>`
+ *
+ * @public
+ */
+export const vsCodeCheckbox = Checkbox.compose<CheckboxOptions>({
+	baseName: 'checkbox',
+	template,
+	styles,
+	checkedIndicator: `
+		<svg
+			part="checked-indicator"
+			class="checked-indicator"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M8.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"
+			/>
+		</svg>
+	`,
+	indeterminateIndicator: `
+		<div part="indeterminate-indicator" class="indeterminate-indicator"></div>
+	`,
+});

src/custom-elements.ts

@@ -0,0 +1,108 @@
+// 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 {
+	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';
+
+// 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';
+
+// export all components
+export {
+	vsCodeBadge,
+	vsCodeButton,
+	vsCodeCheckbox,
+	vsCodeDataGrid,
+	vsCodeDataGridCell,
+	vsCodeDataGridRow,
+	vsCodeDivider,
+	vsCodeDropdown,
+	vsCodeLink,
+	vsCodeOption,
+	vsCodePanels,
+	vsCodePanelTab,
+	vsCodePanelView,
+	vsCodeProgressRing,
+	vsCodeRadioGroup,
+	vsCodeRadio,
+	vsCodeTag,
+	vsCodeTextArea,
+	vsCodeTextField,
+};
+
+/**
+ * All VSCode Web Components
+ * @public
+ * @remarks
+ * This object can be passed directly to the Design System's `register` method to
+ * statically link and register all available components.
+ */
+export const allComponents = {
+	vsCodeBadge,
+	vsCodeButton,
+	vsCodeCheckbox,
+	vsCodeDataGrid,
+	vsCodeDataGridCell,
+	vsCodeDataGridRow,
+	vsCodeDivider,
+	vsCodeDropdown,
+	vsCodeLink,
+	vsCodeOption,
+	vsCodePanels,
+	vsCodePanelTab,
+	vsCodePanelView,
+	vsCodeProgressRing,
+	vsCodeRadioGroup,
+	vsCodeRadio,
+	vsCodeTag,
+	vsCodeTextArea,
+	vsCodeTextField,
+	register(container?: Container, ...rest: any[]) {
+		if (!container) {
+			// preserve backward compatibility with code that loops through
+			// the values of this object and calls them as funcs with no args
+			return;
+		}
+
+		for (const key in this) {
+			if (key === 'register') {
+				continue;
+			}
+
+			(this as any)[key]().register(container, ...rest);
+		}
+	},
+};

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

@@ -2,7 +2,11 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
-import {focusVisible} from '@microsoft/fast-foundation';
+import {
+	ElementDefinitionContext,
+	focusVisible,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import {
 	borderWidth,
 	cornerRadius,
@@ -16,7 +20,10 @@ import {
 	typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const DataGridCellStyles = css`
+export const dataGridCellStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	:host {
 		padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);
 		color: ${foreground};

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

@@ -2,13 +2,20 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
+import {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import {
 	designUnit,
 	listHoverBackground,
 	quickInputBackground,
 } from '../design-tokens';
 
-export const DataGridRowStyles = css`
+export const dataGridRowStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	:host {
 		display: grid;
 		padding: calc((${designUnit} / 4) * 1px) 0;

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

@@ -2,8 +2,15 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
+import {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 
-export const DataGridStyles = css`
+export const dataGridStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	:host {
 		display: flex;
 		position: relative;

src/data-grid/fixtures/createDataGrid.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeDataGrid} from '../index';
+import {DataGrid} from '../index';
 
 export type DataGridArgs = {
 	gridData: any;
@@ -18,7 +18,7 @@ export function createDataGrid({
 	hasCustomTitles,
 	ariaLabel,
 }: DataGridArgs) {
-	const dataGrid = new VSCodeDataGrid();
+	const dataGrid = new DataGrid();
 
 	if (gridData) {
 		dataGrid.rowsData = gridData;

src/data-grid/index.ts

@@ -1,37 +1,24 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement, ViewTemplate} from '@microsoft/fast-element';
 import {
-	createDataGridCellTemplate,
-	createDataGridRowTemplate,
-	createDataGridTemplate,
-	DataGrid,
-	DataGridCell,
-	DataGridRow,
+	dataGridCellTemplate as cellTemplate,
+	DataGrid as FoundationDataGrid,
+	DataGridCell as FoundationDataGridCell,
+	DataGridRow as FoundationDataGridRow,
+	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';
-
-const gridTemplate: ViewTemplate = createDataGridTemplate('vscode');
-const rowTemplate: ViewTemplate = createDataGridRowTemplate('vscode');
-const cellTemplate: ViewTemplate = createDataGridCellTemplate('vscode');
+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';
 
 /**
- * The Visual Studio Code data grid component.
- *
- * @remarks
- * HTML Element: `<vscode-data-grid>`
+ * The Visual Studio Code data grid class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-data-grid',
-	template: gridTemplate,
-	styles: gridStyles,
-})
-export class VSCodeDataGrid extends DataGrid {
+export class DataGrid extends FoundationDataGrid {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -51,31 +38,60 @@ export class VSCodeDataGrid extends DataGrid {
 }
 
 /**
- * The Visual Studio Code data grid row component.
+ * The Visual Studio Code data grid component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-data-grid>`
+ *
+ * @public
+ */
+export const vsCodeDataGrid = DataGrid.compose({
+	baseName: 'data-grid',
+	baseClass: FoundationDataGrid,
+	template: gridTemplate,
+	styles: gridStyles,
+});
+
+/**
+ * The Visual Studio Code data grid row class.
+ *
+ * @public
+ */
+export class DataGridRow extends FoundationDataGridRow {}
+
+/**
+ * The Visual Studio Code data grid row component registration.
  *
  * @remarks
  * HTML Element: `<vscode-data-grid-row>`
  *
  * @public
  */
-@customElement({
-	name: 'vscode-data-grid-row',
+export const vsCodeDataGridRow = DataGridRow.compose({
+	baseName: 'data-grid-row',
+	baseClass: FoundationDataGridRow,
 	template: rowTemplate,
 	styles: rowStyles,
-})
-export class VSCodeDataGridRow extends DataGridRow {}
+});
 
 /**
- * The Visual Studio Code data grid cell component.
+ * The Visual Studio Code data grid cell class.
+ *
+ * @public
+ */
+export class DataGridCell extends FoundationDataGridCell {}
+
+/**
+ * The Visual Studio Code data grid cell component registration.
  *
  * @remarks
  * HTML Element: `<vscode-data-grid-cell>`
  *
  * @public
  */
-@customElement({
-	name: 'vscode-data-grid-cell',
+export const vsCodeDataGridCell = DataGridCell.compose({
+	baseName: 'data-grid-cell',
+	baseClass: FoundationDataGridCell,
 	template: cellTemplate,
 	styles: cellStyles,
-})
-export class VSCodeDataGridCell extends DataGridCell {}
+});

src/divider/divider.styles.ts

@@ -2,10 +2,17 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
-import {display} from '@microsoft/fast-foundation';
+import {
+	display,
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import {borderWidth, designUnit, dividerBackground} from '../design-tokens';
 
-export const DividerStyles = css`
+export const dividerStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	${display('block')} :host {
 		border: none;
 		border-top: calc(${borderWidth} * 1px) solid ${dividerBackground};

src/divider/fixtures/createDivider.ts

@@ -1,14 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeDivider} from '../index';
+import {Divider} from '../index';
 
 export type DividerArgs = {
 	role: string;
 };
 
 export function createDivider({role}: DividerArgs) {
-	const divider = new VSCodeDivider();
+	const divider = new Divider();
 
 	if (role && role.toLocaleLowerCase() === 'presentation') {
 		divider.setAttribute('role', role.toLocaleLowerCase());

src/divider/index.ts

@@ -1,21 +1,29 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
-import {Divider, DividerTemplate as template} from '@microsoft/fast-foundation';
-import {DividerStyles as styles} from './divider.styles';
+import {
+	Divider as FoundationDivider,
+	dividerTemplate as template,
+} from '@microsoft/fast-foundation';
+import {dividerStyles as styles} from './divider.styles';
 
 /**
- * The Visual Studio Code divider component.
+ * The Visual Studio Code divider class.
+ *
+ * @public
+ */
+export class Divider extends FoundationDivider {}
+
+/**
+ * The Visual Studio Code divider component registration.
  *
  * @remarks
  * HTML Element: `<vscode-divider>`
  *
  * @public
  */
-@customElement({
-	name: 'vscode-divider',
+export const vsCodeDivider = Divider.compose({
+	baseName: 'divider',
 	template,
 	styles,
-})
-export class VSCodeDivider extends Divider {}
+});

src/dropdown/dropdown.styles.ts

@@ -5,6 +5,7 @@ import {css} from '@microsoft/fast-element';
 import {
 	disabledCursor,
 	display,
+	ElementDefinitionContext,
 	focusVisible,
 } from '@microsoft/fast-foundation';
 import {
@@ -25,8 +26,12 @@ import {
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
 } from '../design-tokens';
+import {DropdownOptions} from './';
 
-export const DropdownStyles = css`
+export const dropdownStyles = (
+	context: ElementDefinitionContext,
+	definition: DropdownOptions
+) => css`
 	${display('inline-flex')} :host {
 		background: ${dropdownBackground};
 		box-sizing: border-box;

src/dropdown/fixtures/createDropdown.ts

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeDropdown} from '../index';
-import {VSCodeOption} from '../../option/index';
+import {Dropdown} from '../index';
+import {Option} from '../../option/index';
 import {
 	createCodiconIcon,
 	focusObserver,
@@ -54,10 +54,10 @@ export function createDropdown({
 }
 
 function createDropdownWithNChildren(numberOfChildren: number) {
-	const dropdown = new VSCodeDropdown();
+	const dropdown = new Dropdown();
 
 	for (let i = 0; i < numberOfChildren; i++) {
-		const option = new VSCodeOption();
+		const option = new Option();
 		option.textContent = `Option Label #${i + 1}`;
 		dropdown.appendChild(option);
 	}

src/dropdown/index.ts

@@ -1,21 +1,48 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
-import {Select, SelectTemplate as template} from '@microsoft/fast-foundation';
-import {DropdownStyles as styles} from './dropdown.styles';
+import {
+	Select as FoundationSelect,
+	SelectOptions,
+	selectTemplate as template,
+} from '@microsoft/fast-foundation';
+import {dropdownStyles as styles} from './dropdown.styles';
 
 /**
- * The Visual Studio Code dropdown component.
+ * Dropdown configuration options
+ * @public
+ */
+export type DropdownOptions = SelectOptions;
+
+/**
+ * The Visual Studio Code dropdown class.
+ *
+ * @public
+ */
+export class Dropdown extends FoundationSelect {}
+
+/**
+ * The Visual Studio Code link dropdown registration.
  *
  * @remarks
  * HTML Element: `<vscode-dropdown>`
  *
  * @public
  */
-@customElement({
-	name: 'vscode-dropdown',
+export const vsCodeDropdown = Dropdown.compose<DropdownOptions>({
+	baseName: 'dropdown',
 	template,
 	styles,
-})
-export class VSCodeDropdown extends Select {}
+	indicator: `
+		<svg
+			class="select-indicator"
+			part="select-indicator"
+			viewBox="0 0 12 7"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1.35a.5.5 0 11.71-.7L6 5.8 11.15.65c.2-.2.5-.2.7 0z"
+			/>
+		</svg>
+	`,
+});

src/index-rollup.ts

@@ -1,6 +1,16 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import {allComponents} from './custom-elements';
+import {provideVSCodeDesignSystem} from './vscode-design-system';
+
 export * from './index';
-export * from '@microsoft/fast-element';
-export * from '@microsoft/fast-foundation';
+
+/**
+ * The global VSCode Design System.
+ * @remarks
+ * Only available if the components are added through a script tag
+ * rather than a module/build system.
+ */
+export const FASTDesignSystem =
+	provideVSCodeDesignSystem().register(allComponents);

src/index.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-// Export components
+// Export components and classes
 export * from './badge/index';
 export * from './button/index';
 export * from './checkbox/index';

src/link/fixtures/createLink.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeLink} from '../index';
+import {Link} from '../index';
 
 export type LinkArgs = {
 	label: string;
@@ -9,7 +9,7 @@ export type LinkArgs = {
 };
 
 export function createLink({label, href}: LinkArgs) {
-	const link = new VSCodeLink();
+	const link = new Link();
 
 	if (label) {
 		link.textContent = label;

src/link/index.ts

@@ -1,24 +1,39 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
-import {Anchor, AnchorTemplate as template} from '@microsoft/fast-foundation';
-import {LinkStyles as styles} from './link.styles';
+import {
+	AnchorOptions,
+	Anchor as FoundationAnchor,
+	anchorTemplate as template,
+} from '@microsoft/fast-foundation';
+import {linkStyles as styles} from './link.styles';
 
 /**
- * The Visual Studio Code link component.
+ * Link configuration options
+ * @public
+ */
+export type LinkOptions = AnchorOptions;
+
+/**
+ * The Visual Studio Code link class.
+ *
+ * @public
+ */
+export class Link extends FoundationAnchor {}
+
+/**
+ * The Visual Studio Code link component registration.
  *
  * @remarks
  * HTML Element: `<vscode-link>`
  *
  * @public
  */
-@customElement({
-	name: 'vscode-link',
+export const vsCodeLink = Link.compose<LinkOptions>({
+	baseName: 'link',
 	template,
 	styles,
 	shadowOptions: {
 		delegatesFocus: true,
 	},
-})
-export class VSCodeLink extends Anchor {}
+});

src/link/link.styles.ts

@@ -2,7 +2,11 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
-import {display, focusVisible} from '@microsoft/fast-foundation';
+import {
+	display,
+	ElementDefinitionContext,
+	focusVisible,
+} from '@microsoft/fast-foundation';
 import {
 	borderWidth,
 	cornerRadius,
@@ -13,8 +17,12 @@ import {
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
 } from '../design-tokens';
+import {LinkOptions} from './';
 
-export const LinkStyles = css`
+export const linkStyles = (
+	context: ElementDefinitionContext,
+	definition: LinkOptions
+) => css`
 	${display('inline-flex')} :host {
 		background: transparent;
 		box-sizing: border-box;

src/option/fixtures/createOption.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeOption} from '../index';
+import {Option} from '../index';
 
 export type OptionArgs = {
 	label: string;
@@ -10,7 +10,7 @@ export type OptionArgs = {
 };
 
 export function createOption({label, isDisabled, isSelected}: OptionArgs) {
-	const option = new VSCodeOption();
+	const option = new Option();
 
 	if (label) {
 		option.textContent = label;

src/option/index.ts

@@ -1,27 +1,25 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
 import {
-	ListboxOption,
-	ListboxOptionTemplate as template,
+	ListboxOption as FoundationListboxOption,
+	ListboxOptionOptions,
+	listboxOptionTemplate as template,
 } from '@microsoft/fast-foundation';
-import {OptionStyles as styles} from './option.styles';
+import {optionStyles as styles} from './option.styles';
 
 /**
- * The Visual Studio Code option component.
- *
- * @remarks
- * HTML Element: `<vscode-option>`
+ * Dropdown option configuration options
+ * @public
+ */
+export type OptionOptions = ListboxOptionOptions;
+
+/**
+ * The Visual Studio Code option class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-option',
-	template,
-	styles,
-})
-export class VSCodeOption extends ListboxOption {
+export class Option extends FoundationListboxOption {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -38,3 +36,17 @@ export class VSCodeOption extends ListboxOption {
 		}
 	}
 }
+
+/**
+ * The Visual Studio Code option component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-option>`
+ *
+ * @public
+ */
+export const vsCodeOption = Option.compose<OptionOptions>({
+	baseName: 'option',
+	template,
+	styles,
+});

src/option/option.styles.ts

@@ -5,6 +5,7 @@ import {css} from '@microsoft/fast-element';
 import {
 	disabledCursor,
 	display,
+	ElementDefinitionContext,
 	focusVisible,
 } from '@microsoft/fast-foundation';
 import {
@@ -19,8 +20,12 @@ import {
 	typeRampBaseFontSize,
 	typeRampBaseLineHeight,
 } from '../design-tokens';
+import {OptionOptions} from './';
 
-export const OptionStyles = css`
+export const optionStyles = (
+	context: ElementDefinitionContext,
+	definition: OptionOptions
+) => css`
 	${display('inline-flex')} :host {
 		font-family: var(--body-font);
 		border-radius: ${cornerRadius};

src/panels/fixtures/createPanelTab.ts

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodePanelTab} from '../index';
-import {VSCodeBadge} from '../../badge/index';
+import {PanelTab} from '../index';
+import {Badge} from '../../badge/index';
 import {focusObserver} from '../../utilities/storybook/index';
 
 export type PanelTabArgs = {
@@ -12,7 +12,7 @@ export type PanelTabArgs = {
 };
 
 export function createPanelTab({title, isFocused, hasBadge}: PanelTabArgs) {
-	const panelTab = new VSCodePanelTab();
+	const panelTab = new PanelTab();
 
 	if (title) {
 		panelTab.textContent = title;
@@ -21,7 +21,7 @@ export function createPanelTab({title, isFocused, hasBadge}: PanelTabArgs) {
 		focusObserver(panelTab);
 	}
 	if (hasBadge) {
-		const badge = new VSCodeBadge();
+		const badge = new Badge();
 		badge.textContent = '1';
 		badge.setAttribute('appearance', 'secondary');
 		panelTab.append(badge);

src/panels/fixtures/createPanelView.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodePanelView} from '../index';
+import {PanelView} from '../index';
 
 export type PanelViewArgs = {
 	label?: string;
@@ -9,7 +9,7 @@ export type PanelViewArgs = {
 };
 
 export function createPanelView({label, hasComplexContent}: PanelViewArgs) {
-	const panelView = new VSCodePanelView();
+	const panelView = new PanelView();
 
 	if (label && !hasComplexContent) {
 		panelView.textContent = label;

src/panels/fixtures/createPanels.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodePanels} from '../index';
+import {Panels} from '../index';
 import {createPanelTab, PanelTabArgs} from './createPanelTab';
 import {createPanelView} from './createPanelView';
 
@@ -18,7 +18,7 @@ export function createPanels({
 	tabMetaData,
 	ariaLabel,
 }: PanelsArgs) {
-	let panels: VSCodePanels;
+	let panels: Panels;
 	if (tabMetaData) {
 		panels = createTabsWithChildren(tabMetaData, hasComplexContent);
 	}
@@ -43,7 +43,7 @@ function createTabsWithChildren(
 	tabMetaData: PanelTabArgs[],
 	hasComplexContent: boolean
 ) {
-	const panels = new VSCodePanels();
+	const panels = new Panels();
 
 	// Create and append tab components
 	for (let i = 0; i < tabMetaData.length; i++) {

src/panels/index.ts

@@ -1,34 +1,25 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
 import {
-	Tab,
-	TabPanel,
-	TabPanelTemplate,
-	Tabs,
+	Tab as FoundationTab,
+	TabPanel as FoundationTabPanel,
+	Tabs as FoundationTabs,
+	tabPanelTemplate,
 	TabsOrientation,
-	TabsTemplate,
-	TabTemplate,
+	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';
+import {panelTabStyles} from './panel-tab.styles';
+import {panelViewStyles} from './panel-view.styles';
 
 /**
- * The Visual Studio Code panels component.
- *
- * @remarks
- * HTML Element: `<vscode-panels>`
+ * The Visual Studio Code panels class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-panels',
-	template: TabsTemplate,
-	styles: PanelsStyles,
-})
-export class VSCodePanels extends Tabs {
+export class Panels extends FoundationTabs {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -55,19 +46,25 @@ export class VSCodePanels extends Tabs {
 }
 
 /**
- * The Visual Studio Code panel tab component.
+ * The Visual Studio Code panels component registration.
  *
  * @remarks
- * HTML Element: `<vscode-panel-tab>`
+ * HTML Element: `<vscode-panels>`
  *
  * @public
  */
-@customElement({
-	name: 'vscode-panel-tab',
-	template: TabTemplate,
-	styles: PanelTabStyles,
-})
-export class VSCodePanelTab extends Tab {
+export const vsCodePanels = Panels.compose({
+	baseName: 'panels',
+	template: tabsTemplate,
+	styles: panelsStyles,
+});
+
+/**
+ * The Visual Studio Code panel tab class.
+ *
+ * @public
+ */
+export class PanelTab extends FoundationTab {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -91,16 +88,36 @@ export class VSCodePanelTab extends Tab {
 }
 
 /**
- * The Visual Studio Code panel view component.
+ * The Visual Studio Code panel tab component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-panel-tab>`
+ *
+ * @public
+ */
+export const vsCodePanelTab = PanelTab.compose({
+	baseName: 'panel-tab',
+	template: tabTemplate,
+	styles: panelTabStyles,
+});
+
+/**
+ * The Visual Studio Code panel view class.
+ *
+ * @public
+ */
+export class PanelView extends FoundationTabPanel {}
+
+/**
+ * The Visual Studio Code panel view component registration.
  *
  * @remarks
  * HTML Element: `<vscode-panel-view>`
  *
  * @public
  */
-@customElement({
-	name: 'vscode-panel-view',
-	template: TabPanelTemplate,
-	styles: PanelViewStyles,
-})
-export class VSCodePanelView extends TabPanel {}
+export const vsCodePanelView = PanelView.compose({
+	baseName: 'panel-view',
+	template: tabPanelTemplate,
+	styles: panelViewStyles,
+});

src/panels/panel-tab.styles.ts

@@ -2,7 +2,12 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
-import {display, focusVisible} from '@microsoft/fast-foundation';
+import {
+	display,
+	ElementDefinitionContext,
+	focusVisible,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import {
 	borderWidth,
 	cornerRadius,
@@ -15,7 +20,10 @@ import {
 	typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const PanelTabStyles = css`
+export const panelTabStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	${display('inline-flex')} :host {
 		box-sizing: border-box;
 		font-family: ${fontFamily};

src/panels/panel-view.styles.ts

@@ -2,7 +2,11 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
-import {display} from '@microsoft/fast-foundation';
+import {
+	display,
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import {
 	borderWidth,
 	designUnit,
@@ -10,7 +14,10 @@ import {
 	typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const PanelViewStyles = css`
+export const panelViewStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	${display('flex')} :host {
 		color: inherit;
 		background-color: transparent;

src/panels/panels.styles.ts

@@ -2,7 +2,11 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
-import {display} from '@microsoft/fast-foundation';
+import {
+	display,
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import {
 	cornerRadius,
 	designUnit,
@@ -13,7 +17,10 @@ import {
 	typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const PanelsStyles = css`
+export const panelsStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	${display('grid')} :host {
 		box-sizing: border-box;
 		font-family: ${fontFamily};

src/progress-ring/fixtures/createProgressRing.ts

@@ -1,10 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeProgressRing} from '../index';
+import {ProgressRing} from '../index';
 
 export function createProgressRing() {
-	const progressRing = new VSCodeProgressRing();
+	const progressRing = new ProgressRing();
 
 	return progressRing;
 }

src/progress-ring/index.ts

@@ -1,27 +1,19 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
 import {
 	BaseProgress,
-	ProgressRingTemplate as template,
+	ProgressRingOptions,
+	progressRingTemplate as template,
 } from '@microsoft/fast-foundation';
-import {ProgressRingStyles as styles} from './progress-ring.styles';
+import {progressRingStyles as styles} from './progress-ring.styles';
 
 /**
- * The Visual Studio Code progress ring component.
- *
- * @remarks
- * HTML Element: `<vscode-progress-ring>`
+ * The Visual Studio Code progress ring class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-progress-ring',
-	template,
-	styles,
-})
-export class VSCodeProgressRing extends BaseProgress {
+export class ProgressRing extends BaseProgress {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -67,3 +59,35 @@ export class VSCodeProgressRing extends BaseProgress {
 		}
 	}
 }
+
+/**
+ * The Visual Studio Code progress ring component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-progress-ring>`
+ *
+ * @public
+ */
+export const vsCodeProgressRing = ProgressRing.compose<ProgressRingOptions>({
+	baseName: 'progress-ring',
+	template,
+	styles,
+	indeterminateIndicator: `
+		<svg class="progress" part="progress" viewBox="0 0 16 16">
+			<circle
+				class="background"
+				part="background"
+				cx="8px"
+				cy="8px"
+				r="7px"
+			></circle>
+			<circle
+				class="indeterminate-indicator-1"
+				part="indeterminate-indicator-1"
+				cx="8px"
+				cy="8px"
+				r="7px"
+			></circle>
+		</svg>
+	`,
+});

src/progress-ring/progress-ring.styles.ts

@@ -2,10 +2,17 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
-import {display} from '@microsoft/fast-foundation';
+import {
+	display,
+	ElementDefinitionContext,
+	ProgressRingOptions,
+} from '@microsoft/fast-foundation';
 import {designUnit, progressBackground} from '../design-tokens';
 
-export const ProgressRingStyles = css`
+export const progressRingStyles = (
+	context: ElementDefinitionContext,
+	definition: ProgressRingOptions
+) => css`
 	${display('flex')} :host {
 		align-items: center;
 		outline: none;

src/radio-group/fixtures/createRadioGroup.ts

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeRadioGroup} from '../index';
-import {VSCodeRadio} from '../../radio/index';
+import {RadioGroup} from '../index';
+import {Radio} from '../../radio/index';
 
 export type RadioGroupArgs = {
 	label: string;
@@ -41,10 +41,10 @@ export function createRadioGroup({
 }
 
 function createRadioGroupWithNChildren(numberOfChildren: number) {
-	const radioGroup = new VSCodeRadioGroup();
+	const radioGroup = new RadioGroup();
 
 	for (let i = 0; i < numberOfChildren; i++) {
-		const radio = new VSCodeRadio();
+		const radio = new Radio();
 		radio.textContent = 'Radio Label';
 		radioGroup.appendChild(radio);
 	}

src/radio-group/index.ts

@@ -1,27 +1,18 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
 import {
-	RadioGroup,
-	RadioGroupTemplate as template,
+	RadioGroup as FoundationRadioGroup,
+	radioGroupTemplate as template,
 } from '@microsoft/fast-foundation';
-import {RadioGroupStyles as styles} from './radio-group.styles';
+import {radioGroupStyles as styles} from './radio-group.styles';
 
 /**
- * The Visual Studio Code radio group component.
- *
- * @remarks
- * HTML Element: `<vscode-radio-group>`
+ * The Visual Studio Code radio group class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-radio-group',
-	template,
-	styles,
-})
-export class VSCodeRadioGroup extends RadioGroup {
+export class RadioGroup extends FoundationRadioGroup {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -40,3 +31,17 @@ export class VSCodeRadioGroup extends RadioGroup {
 		}
 	}
 }
+
+/**
+ * The Visual Studio Code radio group component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-radio-group>`
+ *
+ * @public
+ */
+export const vsCodeRadioGroup = RadioGroup.compose({
+	baseName: 'radio-group',
+	template,
+	styles,
+});

src/radio-group/radio-group.styles.ts

@@ -2,14 +2,21 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
-import {display} from '@microsoft/fast-foundation';
+import {
+	display,
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import {
 	checkboxForeground,
 	designUnit,
 	typeRampBaseFontSize,
 } from '../design-tokens';
 
-export const RadioGroupStyles = css`
+export const radioGroupStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	${display('flex')} :host {
 		align-items: flex-start;
 		margin: calc(${designUnit} * 1px) 0;

src/radio/fixtures/createRadio.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeRadio} from '../index';
+import {Radio} from '../index';
 import {focusObserver} from '../../utilities/storybook/index';
 
 export type RadioArgs = {
@@ -21,7 +21,7 @@ export function createRadio({
 	isFocused,
 	onChange,
 }: RadioArgs) {
-	const radio = new VSCodeRadio();
+	const radio = new Radio();
 
 	if (label) {
 		radio.textContent = label;

src/radio/index.ts

@@ -1,24 +1,19 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
-import {Radio, RadioTemplate as template} from '@microsoft/fast-foundation';
-import {RadioStyles as styles} from './radio.styles';
+import {
+	Radio as FoundationRadio,
+	RadioOptions,
+	radioTemplate as template,
+} from '@microsoft/fast-foundation';
+import {radioStyles as styles} from './radio.styles';
 
 /**
- * The Visual Studio Code radio component.
- *
- * @remarks
- * HTML Element: `<vscode-radio>`
+ * The Visual Studio Code radio class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-radio',
-	template,
-	styles,
-})
-export class VSCodeRadio extends Radio {
+export class Radio extends FoundationRadio {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -35,3 +30,20 @@ export class VSCodeRadio extends Radio {
 		}
 	}
 }
+
+/**
+ * The Visual Studio Code radio component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-radio>`
+ *
+ * @public
+ */
+export const vsCodeRadio = Radio.compose<RadioOptions>({
+	baseName: 'radio',
+	template,
+	styles,
+	checkedIndicator: `
+		<div part="checked-indicator" class="checked-indicator"></div>
+	`,
+});

src/radio/radio.styles.ts

@@ -5,7 +5,9 @@ import {css} from '@microsoft/fast-element';
 import {
 	disabledCursor,
 	display,
+	ElementDefinitionContext,
 	focusVisible,
+	RadioOptions,
 } from '@microsoft/fast-foundation';
 import {
 	borderWidth,
@@ -20,7 +22,10 @@ import {
 	typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const RadioStyles = css`
+export const radioStyles = (
+	context: ElementDefinitionContext,
+	definition: RadioOptions
+) => css`
 	${display('inline-flex')} :host {
 		align-items: center;
 		flex-direction: row;

src/tag/fixtures/createTag.ts

@@ -1,14 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeTag} from '../index';
+import {Tag} from '../index';
 
 export type TagArgs = {
 	label: string;
 };
 
 export function createTag({label}: TagArgs) {
-	const tag = new VSCodeTag();
+	const tag = new Tag();
 
 	if (label) {
 		tag.textContent = label;

src/tag/index.ts

@@ -1,24 +1,18 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
-import {Badge, BadgeTemplate as template} from '@microsoft/fast-foundation';
-import {TagStyles as styles} from './tag.styles';
+import {
+	Badge as FoundationBadge,
+	badgeTemplate as template,
+} from '@microsoft/fast-foundation';
+import {tagStyles as styles} from './tag.styles';
 
 /**
- * The Visual Studio Code tag component.
- *
- * @remarks
- * HTML Element: `<vscode-tag>`
+ * The Visual Studio Code tag class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-tag',
-	template,
-	styles,
-})
-export class VSCodeTag extends Badge {
+export class Tag extends FoundationBadge {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -36,3 +30,17 @@ export class VSCodeTag extends Badge {
 		}
 	}
 }
+
+/**
+ * The Visual Studio Code tag component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-tag>`
+ *
+ * @public
+ */
+export const vsCodeTag = Tag.compose({
+	baseName: 'tag',
+	template,
+	styles,
+});

src/tag/tag.styles.ts

@@ -2,7 +2,11 @@
 // Licensed under the MIT License.
 
 import {css} from '@microsoft/fast-element';
-import {display} from '@microsoft/fast-foundation';
+import {
+	display,
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import {
 	badgeBackground,
 	badgeForeground,
@@ -15,7 +19,10 @@ import {
 	typeRampMinus1LineHeight,
 } from '../design-tokens';
 
-export const TagStyles = css`
+export const tagStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	${display('inline-block')} :host {
 		box-sizing: border-box;
 		font-family: ${fontFamily};

src/text-area/fixtures/createTextArea.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeTextArea} from '../index';
+import {TextArea} from '../index';
 
 export type TextAreaArgs = {
 	label: string;
@@ -28,7 +28,7 @@ export function createTextArea({
 	isDisabled,
 	isAutoFocused,
 }: TextAreaArgs) {
-	const textArea = new VSCodeTextArea();
+	const textArea = new TextArea();
 
 	if (label) {
 		textArea.textContent = label;

src/text-area/index.ts

@@ -1,30 +1,21 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
 import {
-	TextAreaTemplate as template,
-	TextArea,
+	TextArea as FoundationTextArea,
+	textAreaTemplate as template,
 } from '@microsoft/fast-foundation';
-import {TextAreaStyles as styles} from './text-area.styles';
+import {textAreaStyles as styles} from './text-area.styles';
 
 /**
- * The Visual Studio Code text area component.
+ * The Visual Studio Code text area class.
  *
  * @remarks
  * HTML Element: `<vscode-text-area>`
  *
  * @public
  */
-@customElement({
-	name: 'vscode-text-area',
-	template,
-	styles,
-	shadowOptions: {
-		delegatesFocus: true,
-	},
-})
-export class VSCodeTextArea extends TextArea {
+export class TextArea extends FoundationTextArea {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -41,3 +32,20 @@ export class VSCodeTextArea extends TextArea {
 		}
 	}
 }
+
+/**
+ * The Visual Studio Code text area component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-text-area>`
+ *
+ * @public
+ */
+export const vsCodeTextArea = TextArea.compose({
+	baseName: 'text-area',
+	template,
+	styles,
+	shadowOptions: {
+		delegatesFocus: true,
+	},
+});

src/text-area/text-area.styles.ts

@@ -5,7 +5,9 @@ import {css} from '@microsoft/fast-element';
 import {
 	disabledCursor,
 	display,
+	ElementDefinitionContext,
 	focusVisible,
+	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
 import {
 	borderWidth,
@@ -23,7 +25,10 @@ import {
 	typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const TextAreaStyles = css`
+export const textAreaStyles = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => css`
 	${display('inline-block')} :host {
 		font-family: ${fontFamily};
 		outline: none;

src/text-field/fixtures/createTextField.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {VSCodeTextField} from '../index';
+import {TextField} from '../index';
 import {createCodiconIcon} from '../../utilities/storybook/index';
 
 export type TextFieldArgs = {
@@ -29,7 +29,7 @@ export function createTextField({
 	startIcon,
 	endIcon,
 }: TextFieldArgs) {
-	const textField = new VSCodeTextField();
+	const textField = new TextField();
 
 	if (label) {
 		textField.textContent = label;

src/text-field/index.ts

@@ -1,30 +1,19 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import {customElement} from '@microsoft/fast-element';
 import {
-	TextFieldTemplate as template,
-	TextField,
+	TextField as FoundationTextField,
+	textFieldTemplate as template,
+	TextFieldOptions,
 } from '@microsoft/fast-foundation';
-import {TextFieldStyles as styles} from './text-field.styles';
+import {textFieldStyles as styles} from './text-field.styles';
 
 /**
- * The Visual Studio Code text field component.
- *
- * @remarks
- * HTML Element: `<vscode-text-field>`
+ * The Visual Studio Code text field class.
  *
  * @public
  */
-@customElement({
-	name: 'vscode-text-field',
-	template,
-	styles,
-	shadowOptions: {
-		delegatesFocus: true,
-	},
-})
-export class VSCodeTextField extends TextField {
+export class TextField extends FoundationTextField {
 	/**
 	 * Component lifecycle method that runs when the component is inserted
 	 * into the DOM.
@@ -41,3 +30,20 @@ export class VSCodeTextField extends TextField {
 		}
 	}
 }
+
+/**
+ * The Visual Studio Code text field component registration.
+ *
+ * @remarks
+ * HTML Element: `<vscode-text-field>`
+ *
+ * @public
+ */
+export const vsCodeTextField = TextField.compose<TextFieldOptions>({
+	baseName: 'text-field',
+	template,
+	styles,
+	shadowOptions: {
+		delegatesFocus: true,
+	},
+});

src/text-field/text-field.styles.ts

@@ -5,7 +5,9 @@ import {css} from '@microsoft/fast-element';
 import {
 	disabledCursor,
 	display,
+	ElementDefinitionContext,
 	focusVisible,
+	TextFieldOptions,
 } from '@microsoft/fast-foundation';
 import {
 	borderWidth,
@@ -24,7 +26,10 @@ import {
 	typeRampBaseLineHeight,
 } from '../design-tokens';
 
-export const TextFieldStyles = css`
+export const textFieldStyles = (
+	context: ElementDefinitionContext,
+	definition: TextFieldOptions
+) => css`
 	${display('inline-block')} :host {
 		font-family: ${fontFamily};
 		outline: none;

src/vscode-design-system.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {DesignSystem} from '@microsoft/fast-foundation';
+
+/**
+ * Provides a design system for the specified element either by returning one that was
+ * already created for that element or creating one.
+ * @param element - The element to root the design system at. By default, this is the body.
+ * @returns A VSCode Design System
+ * @public
+ */
+export function provideVSCodeDesignSystem(element?: HTMLElement): DesignSystem {
+	return DesignSystem.getOrCreate(element).withPrefix('vscode');
+}

tsconfig.json

@@ -17,6 +17,7 @@
 		"noEmitOnError": true,
 		"strict": true,
 		"strictNullChecks": true,
+		"strictFunctionTypes": false,
 		"allowJs": true
 	},
 	"include": ["src"],