diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 6d7945c687..c3547825e0 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -6,6 +6,7 @@
 		"strict": true,
 		"noImplicitOverride": true,
 		"noImplicitReturns": true,
+		"noUnusedLocals": true,
 		"noFallthroughCasesInSwitch": true,
 		"esModuleInterop": true,
 		"resolveJsonModule": true
diff --git a/libs/components/cem.config.mjs b/libs/components/cem.config.mjs
index 201fa46763..2a31ccbfc5 100644
--- a/libs/components/cem.config.mjs
+++ b/libs/components/cem.config.mjs
@@ -9,6 +9,7 @@ export default {
 	/** Globs to analyze */
 	globs: [
 		'libs/components/src/lib/**/*.ts',
+		'libs/components/src/shared/foundation/**/*.ts',
 		'libs/components/src/shared/date-picker/date-picker-base.ts',
 	],
 	/** Globs to exclude */
diff --git a/libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts b/libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts
index 0fb3097ac7..a779e532e0 100644
--- a/libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts
+++ b/libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts
@@ -1,6 +1,6 @@
 import { attr, observable } from '@microsoft/fast-element';
 import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
-import { Anchor } from '../../shared/patterns/anchor';
+import { Anchor } from '../../shared/foundation/anchor/anchor';
 
 /**
  * @public
diff --git a/libs/components/src/lib/fab/fab.ts b/libs/components/src/lib/fab/fab.ts
index 9be09b5d0a..f04a177f19 100644
--- a/libs/components/src/lib/fab/fab.ts
+++ b/libs/components/src/lib/fab/fab.ts
@@ -1,9 +1,6 @@
-import {
-	applyMixins,
-	Button as FoundationButton,
-} from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
-
+import { applyMixins } from '@microsoft/fast-foundation';
+import { FoundationButton } from '../../shared/foundation/button';
 import type { Connotation, Size } from '../enums.js';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 
diff --git a/libs/components/src/shared/patterns/anchor.ts b/libs/components/src/shared/foundation/anchor/anchor.ts
similarity index 97%
rename from libs/components/src/shared/patterns/anchor.ts
rename to libs/components/src/shared/foundation/anchor/anchor.ts
index 6f844eec7c..e572151c4a 100644
--- a/libs/components/src/shared/patterns/anchor.ts
+++ b/libs/components/src/shared/foundation/anchor/anchor.ts
@@ -1,6 +1,6 @@
 import { attr } from '@microsoft/fast-element';
 import { applyMixins } from '@microsoft/fast-foundation';
-import { ARIAGlobalStatesAndProperties } from './aria-global';
+import { ARIAGlobalStatesAndProperties } from '../patterns/aria-global';
 
 /**
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
diff --git a/libs/components/src/shared/foundation/button/REAME.md b/libs/components/src/shared/foundation/button/REAME.md
new file mode 100644
index 0000000000..e59aeb1702
--- /dev/null
+++ b/libs/components/src/shared/foundation/button/REAME.md
@@ -0,0 +1,142 @@
+---
+id: button
+title: fast-button
+sidebar_label: button
+custom_edit_url: https://github.com/microsoft/fast/edit/master/packages/web-components/fast-foundation/src/button/README.md
+description: fast-button is a web component implementation of a button element.
+---
+
+As defined by the [W3C](https://w3c.github.io/aria-practices/#button):
+
+> A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+
+`fast-button` is a web component implementation of an [HTML button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button). The `fast-components` button supports several visual appearances (accent, lightweight, neutral, outline, stealth).
+
+## Setup
+
+```ts
+import {
+	provideFASTDesignSystem,
+	fastButton,
+} from '@microsoft/fast-components';
+
+provideFASTDesignSystem().register(fastButton());
+```
+
+## Usage
+
+```html live
+<fast-button appearance="primary">Submit</fast-button>
+```
+
+## Create your own design
+
+```ts
+import { Button, buttonTemplate as template } from '@microsoft/fast-foundation';
+import { buttonStyles as styles } from './my-button.styles';
+
+export const myButton = Button.compose({
+	baseName: 'button',
+	template,
+	styles,
+	shadowOptions: {
+		delegatesFocus: true,
+	},
+});
+```
+
+:::note
+This component is built with the expectation that focus is delegated to the button element rendered into the shadow DOM.
+:::
+
+## API
+
+### class: `Button`
+
+#### Superclass
+
+| Name                   | Module                                | Package |
+| ---------------------- | ------------------------------------- | ------- |
+| `FormAssociatedButton` | /src/button/button.form-associated.js |         |
+
+#### Fields
+
+| Name                    | Privacy | Type                                         | Default | Description                                                                                                                                                                         | Inherited From       |
+| ----------------------- | ------- | -------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| `autofocus`             | public  | `boolean`                                    |         | Determines if the element should receive document focus on page load.                                                                                                               |                      |
+| `formId`                | public  | `string`                                     |         | The id of a form to associate the element to.                                                                                                                                       |                      |
+| `formaction`            | public  | `string`                                     |         | See [`<button>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) for more details.                                                                        |                      |
+| `formenctype`           | public  | `string`                                     |         | See [`<button>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) for more details.                                                                        |                      |
+| `formmethod`            | public  | `string`                                     |         | See [`<button>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) for more details.                                                                        |                      |
+| `formnovalidate`        | public  | `boolean`                                    |         | See [`<button>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) for more details.                                                                        |                      |
+| `formtarget`            | public  | `"_self" or "_blank" or "_parent" or "_top"` |         | See [`<button>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) for more details.                                                                        |                      |
+| `type`                  | public  | `"submit" or "reset" or "button"`            |         | The button type.                                                                                                                                                                    |                      |
+| `defaultSlottedContent` | public  | `HTMLElement[]`                              |         | Default slotted content                                                                                                                                                             |                      |
+| `control`               | public  | `HTMLButtonElement`                          |         |                                                                                                                                                                                     |                      |
+| `proxy`                 |         |                                              |         |                                                                                                                                                                                     | FormAssociatedButton |
+| `$presentation`         | public  | `ComponentPresentation or null`              |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement    |
+| `template`              | public  | `ElementViewTemplate or void or null`        |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement    |
+| `styles`                | public  | `ElementStyles or void or null`              |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement    |
+
+#### Methods
+
+| Name              | Privacy   | Description                                       | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ------------------------------------------------- | ---------- | ------ | ----------------- |
+| `validate`        | public    | {@inheritDoc (FormAssociated:interface).validate} |            | `void` |                   |
+| `templateChanged` | protected |                                                   |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |                                                   |            | `void` | FoundationElement |
+
+#### Attributes
+
+| Name          | Field          | Inherited From |
+| ------------- | -------------- | -------------- |
+|               | autofocus      |                |
+| `form`        | formId         |                |
+| `formaction`  | formaction     |                |
+| `formenctype` | formenctype    |                |
+| `formmethod`  | formmethod     |                |
+|               | formnovalidate |                |
+| `formtarget`  | formtarget     |                |
+| `type`        | type           |                |
+
+#### CSS Parts
+
+| Name      | Description                         |
+| --------- | ----------------------------------- |
+| `control` | The button element                  |
+| `content` | The element wrapping button content |
+
+#### Slots
+
+| Name    | Description                                             |
+| ------- | ------------------------------------------------------- |
+| `start` | Content which can be provided before the button content |
+| `end`   | Content which can be provided after the button content  |
+|         | The default slot for button content                     |
+
+<hr/>
+
+### class: `DelegatesARIAButton`
+
+#### Fields
+
+| Name           | Privacy | Type                                             | Default | Description                                                          | Inherited From |
+| -------------- | ------- | ------------------------------------------------ | ------- | -------------------------------------------------------------------- | -------------- |
+| `ariaExpanded` | public  | `"true" or "false" or string or null`            |         | See https://www.w3.org/WAI/PF/aria/roles#button for more information |                |
+| `ariaPressed`  | public  | `"true" or "false" or "mixed" or string or null` |         | See https://www.w3.org/WAI/PF/aria/roles#button for more information |                |
+
+#### Attributes
+
+| Name            | Field        | Inherited From |
+| --------------- | ------------ | -------------- |
+| `aria-expanded` | ariaExpanded |                |
+| `aria-pressed`  | ariaPressed  |                |
+
+<hr/>
+
+## Additional resources
+
+- [Component explorer examples](https://explore.fast.design/components/fast-button)
+- [Component technical specification](https://github.com/microsoft/fast/blob/master/packages/web-components/fast-foundation/src/button/button.spec.md)
+- [W3C Component Aria Practices](https://w3c.github.io/aria-practices/#button)
+- [Open UI Analysis](https://open-ui.org/components/button)
diff --git a/libs/components/src/shared/foundation/button/button.form-associated.ts b/libs/components/src/shared/foundation/button/button.form-associated.ts
new file mode 100644
index 0000000000..6bf549f20d
--- /dev/null
+++ b/libs/components/src/shared/foundation/button/button.form-associated.ts
@@ -0,0 +1,14 @@
+import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+
+class _FoundationButton extends FoundationElement {}
+/* eslint-disable-next-line @typescript-eslint/naming-convention */
+interface _FoundationButton extends FormAssociated {}
+
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
+ *
+ * @internal
+ */
+export class FormAssociatedButton extends FormAssociated(_FoundationButton) {
+	proxy = document.createElement('input');
+}
diff --git a/libs/components/src/shared/foundation/button/button.spec.ts b/libs/components/src/shared/foundation/button/button.spec.ts
new file mode 100644
index 0000000000..4ba81e9877
--- /dev/null
+++ b/libs/components/src/shared/foundation/button/button.spec.ts
@@ -0,0 +1,695 @@
+import { DOM } from '@microsoft/fast-element';
+import { eventClick } from '@microsoft/fast-web-utilities';
+import { fixture } from '../test-utilities/fixture';
+import {
+	FoundationButton as Button,
+	buttonTemplate as template,
+} from './index';
+
+const FASTButton = Button.compose({
+	baseName: 'button',
+	template,
+});
+
+async function setup() {
+	const { connect, disconnect, element, parent } = await fixture(FASTButton());
+
+	return { connect, disconnect, element, parent };
+}
+
+describe('Foundation Button', () => {
+	it('should set the `autofocus` attribute on the internal button when provided', async () => {
+		const { element, connect, disconnect } = await setup();
+
+		element.autofocus = true;
+
+		await connect();
+
+		expect(
+			element.shadowRoot?.querySelector('button')?.hasAttribute('autofocus')
+		).toEqual(true);
+
+		await disconnect();
+	});
+
+	it('should set the `disabled` attribute on the internal button when provided', async () => {
+		const { element, connect, disconnect } = await setup();
+
+		element.disabled = true;
+
+		await connect();
+
+		expect(
+			element.shadowRoot?.querySelector('button')?.hasAttribute('disabled')
+		).toEqual(true);
+
+		await disconnect();
+	});
+
+	it('should set the `form` attribute on the internal button when `formId` is provided', async () => {
+		const { element, connect, disconnect } = await setup();
+		const formId = 'testId';
+
+		element.formId = 'testId';
+
+		await connect();
+
+		expect(
+			element.shadowRoot?.querySelector('button')?.getAttribute('form')
+		).toEqual(formId);
+
+		await disconnect();
+	});
+
+	it('should set the `formaction` attribute on the internal button when provided', async () => {
+		const { element, connect, disconnect } = await setup();
+		const formaction = 'test_action.asp';
+
+		element.formaction = formaction;
+
+		await connect();
+
+		expect(
+			element.shadowRoot?.querySelector('button')?.getAttribute('formaction')
+		).toEqual(formaction);
+
+		await disconnect();
+	});
+
+	it('should set the `formenctype` attribute on the internal button when provided', async () => {
+		const { element, connect, disconnect } = await setup();
+		const formenctype = 'text/plain';
+
+		element.formenctype = formenctype;
+
+		await connect();
+
+		expect(
+			element.shadowRoot?.querySelector('button')?.getAttribute('formenctype')
+		).toEqual(formenctype);
+
+		await disconnect();
+	});
+
+	it('should set the `formmethod` attribute on the internal button when provided', async () => {
+		const { element, connect, disconnect } = await setup();
+		const formmethod = 'post';
+
+		element.formmethod = formmethod;
+
+		await connect();
+
+		expect(
+			element.shadowRoot?.querySelector('button')?.getAttribute('formmethod')
+		).toEqual(formmethod);
+
+		await disconnect();
+	});
+
+	it('should set the `formnovalidate` attribute on the internal button when provided', async () => {
+		const { element, connect, disconnect } = await setup();
+		const formnovalidate = true;
+
+		element.formnovalidate = formnovalidate;
+
+		await connect();
+
+		expect(
+			element.shadowRoot
+				?.querySelector('button')
+				?.getAttribute('formnovalidate')
+		).toEqual(formnovalidate.toString());
+
+		await disconnect();
+	});
+
+	it('should set the `formtarget` attribute on the internal button when provided', async () => {
+		const { element, connect, disconnect } = await setup();
+		const formtarget = '_blank';
+
+		element.formtarget = formtarget;
+
+		await connect();
+
+		expect(
+			element.shadowRoot?.querySelector('button')?.getAttribute('formtarget')
+		).toEqual(formtarget);
+
+		await disconnect();
+	});
+
+	it('should set the `name` attribute on the internal button when provided', async () => {
+		const { element, connect, disconnect } = await setup();
+		const name = 'testName';
+
+		element.name = name;
+
+		await connect();
+
+		expect(
+			element.shadowRoot?.querySelector('button')?.getAttribute('name')
+		).toEqual(name);
+
+		await disconnect();
+	});
+
+	it('should set the `type` attribute on the internal button when provided', async () => {
+		const { element, connect, disconnect } = await setup();
+		const type = 'submit';
+
+		element.type = type;
+
+		await connect();
+
+		expect(
+			element.shadowRoot?.querySelector('button')?.getAttribute('type')
+		).toEqual(type);
+
+		await disconnect();
+	});
+
+	it('should set the `value` attribute on the internal button when provided', async () => {
+		const { element, connect, disconnect } = await setup();
+		const value = 'Reset';
+
+		element.value = value;
+
+		await connect();
+
+		expect(
+			element.shadowRoot?.querySelector('button')?.getAttribute('value')
+		).toEqual(value);
+
+		await disconnect();
+	});
+
+	describe('Delegates ARIA button', () => {
+		it('should set the `aria-atomic` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaAtomic = 'true';
+
+			element.ariaAtomic = ariaAtomic;
+
+			await connect();
+
+			expect(
+				element.shadowRoot?.querySelector('button')?.getAttribute('aria-atomic')
+			).toEqual(ariaAtomic);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-busy` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaBusy = 'false';
+
+			element.ariaBusy = ariaBusy;
+
+			await connect();
+
+			expect(
+				element.shadowRoot?.querySelector('button')?.getAttribute('aria-busy')
+			).toEqual(ariaBusy);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-controls` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaControls = 'testId';
+
+			element.ariaControls = ariaControls;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-controls')
+			).toEqual(ariaControls);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-current` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaCurrent = 'page';
+
+			element.ariaCurrent = ariaCurrent;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-current')
+			).toEqual(ariaCurrent);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-describedby` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaDescribedby = 'testId';
+
+			element.ariaDescribedby = ariaDescribedby;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-describedby')
+			).toEqual(ariaDescribedby);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-details` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaDetails = 'testId';
+
+			element.ariaDetails = ariaDetails;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-details')
+			).toEqual(ariaDetails);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-disabled` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaDisabled = 'true';
+
+			element.ariaDisabled = ariaDisabled;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-disabled')
+			).toEqual(ariaDisabled);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-errormessage` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaErrormessage = 'test';
+
+			element.ariaErrormessage = ariaErrormessage;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-errormessage')
+			).toEqual(ariaErrormessage);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-expanded` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaExpanded = 'true';
+
+			element.ariaExpanded = ariaExpanded;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-expanded')
+			).toEqual(ariaExpanded);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-flowto` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaFlowto = 'testId';
+
+			element.ariaFlowto = ariaFlowto;
+
+			await connect();
+
+			expect(
+				element.shadowRoot?.querySelector('button')?.getAttribute('aria-flowto')
+			).toEqual(ariaFlowto);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-haspopup` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaHaspopup = 'true';
+
+			element.ariaHaspopup = ariaHaspopup;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-haspopup')
+			).toEqual(ariaHaspopup);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-hidden` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaHidden = 'true';
+
+			element.ariaHidden = ariaHidden;
+
+			await connect();
+
+			expect(
+				element.shadowRoot?.querySelector('button')?.getAttribute('aria-hidden')
+			).toEqual(ariaHidden);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-invalid` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaInvalid = 'spelling';
+
+			element.ariaInvalid = ariaInvalid;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-invalid')
+			).toEqual(ariaInvalid);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-keyshortcuts` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaKeyshortcuts = 'F4';
+
+			element.ariaKeyshortcuts = ariaKeyshortcuts;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-keyshortcuts')
+			).toEqual(ariaKeyshortcuts);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-label` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaLabel = 'Foo label';
+
+			element.ariaLabel = ariaLabel;
+
+			await connect();
+
+			expect(
+				element.shadowRoot?.querySelector('button')?.getAttribute('aria-label')
+			).toEqual(ariaLabel);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-labelledby` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaLabelledby = 'testId';
+
+			element.ariaLabelledby = ariaLabelledby;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-labelledby')
+			).toEqual(ariaLabelledby);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-live` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaLive = 'polite';
+
+			element.ariaLive = ariaLive;
+
+			await connect();
+
+			expect(
+				element.shadowRoot?.querySelector('button')?.getAttribute('aria-live')
+			).toEqual(ariaLive);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-owns` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaOwns = 'testId';
+
+			element.ariaOwns = ariaOwns;
+
+			await connect();
+
+			expect(
+				element.shadowRoot?.querySelector('button')?.getAttribute('aria-owns')
+			).toEqual(ariaOwns);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-pressed` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaPressed = 'true';
+
+			element.ariaPressed = ariaPressed;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-pressed')
+			).toEqual(ariaPressed);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-relevant` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaRelevant = 'removals';
+
+			element.ariaRelevant = ariaRelevant;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-relevant')
+			).toEqual(ariaRelevant);
+
+			await disconnect();
+		});
+
+		it('should set the `aria-roledescription` attribute on the internal button when provided', async () => {
+			const { element, connect, disconnect } = await setup();
+			const ariaRoledescription = 'slide';
+
+			element.ariaRoledescription = ariaRoledescription;
+
+			await connect();
+
+			expect(
+				element.shadowRoot
+					?.querySelector('button')
+					?.getAttribute('aria-roledescription')
+			).toEqual(ariaRoledescription);
+
+			await disconnect();
+		});
+	});
+
+	describe("of type 'submit'", () => {
+		it('should submit the parent form when clicked', async () => {
+			const { connect, disconnect, element, parent } = await setup();
+			const form = document.createElement('form');
+			element.setAttribute('type', 'submit');
+			form.appendChild(element);
+			parent.appendChild(form);
+
+			await connect();
+
+			form.requestSubmit = jest.fn();
+
+			element.click();
+
+			expect(form.requestSubmit).toHaveBeenCalledWith(element.proxy);
+
+			await disconnect();
+		});
+
+		it('should no longer submit the parent form when clicked after type is changed', async () => {
+			const { connect, disconnect, element, parent } = await setup();
+			const form = document.createElement('form');
+			element.setAttribute('type', 'submit');
+			element.setAttribute('type', '');
+			form.appendChild(element);
+			parent.appendChild(form);
+
+			await connect();
+
+			form.requestSubmit = jest.fn();
+
+			element.click();
+
+			expect(form.requestSubmit).not.toHaveBeenCalled();
+
+			await disconnect();
+		});
+
+		it('should should not throw when clicked without a form', async () => {
+			const { connect, disconnect, element, parent } = await setup();
+			element.setAttribute('type', 'submit');
+			parent.appendChild(element);
+
+			await connect();
+
+			element.click();
+
+			await disconnect();
+		});
+	});
+
+	describe("of type 'reset'", () => {
+		it('should reset the parent form when clicked', async () => {
+			const { connect, disconnect, element, parent } = await setup();
+			const form = document.createElement('form');
+			element.setAttribute('type', 'reset');
+			form.appendChild(element);
+			parent.appendChild(form);
+
+			await connect();
+
+			const wasReset = await new Promise((resolve) => {
+				// Resolve true when the event listener is handled
+				form.addEventListener('reset', () => resolve(true));
+
+				element.click();
+
+				// Resolve false on the next update in case reset hasn't happened
+				DOM.queueUpdate(() => resolve(false));
+			});
+
+			expect(wasReset).toEqual(true);
+
+			await disconnect();
+		});
+
+		it('should no longer reset the parent form when clicked after type is changed', async () => {
+			const { connect, disconnect, element, parent } = await setup();
+			const form = document.createElement('form');
+			element.setAttribute('type', 'reset');
+			element.setAttribute('type', '');
+			form.appendChild(element);
+			parent.appendChild(form);
+
+			await connect();
+
+			const wasReset = await new Promise((resolve) => {
+				// Resolve true when the event listener is handled
+				form.addEventListener('reset', () => resolve(true));
+
+				element.click();
+
+				// Resolve false on the next update in case reset hasn't happened
+				DOM.queueUpdate(() => resolve(false));
+			});
+
+			expect(wasReset).toEqual(false);
+
+			await disconnect();
+		});
+
+		it('should should not throw when clicked without a form', async () => {
+			const { connect, disconnect, element, parent } = await setup();
+			element.setAttribute('type', 'reset');
+			parent.appendChild(element);
+
+			await connect();
+
+			element.click();
+
+			await disconnect();
+		});
+	});
+
+	describe("of 'disabled'", () => {
+		it('should not propagate when clicked', async () => {
+			const { connect, disconnect, element, parent } = await setup();
+
+			element.disabled = true;
+			parent.appendChild(element);
+
+			let wasClicked = false;
+			await connect();
+
+			parent.addEventListener(eventClick, () => {
+				wasClicked = true;
+			});
+
+			await DOM.nextUpdate();
+			element.click();
+
+			expect(wasClicked).toEqual(false);
+
+			await disconnect();
+		});
+
+		it('should not propagate when spans within shadowRoot are clicked', async () => {
+			const { connect, disconnect, element, parent } = await setup();
+
+			element.disabled = true;
+			parent.appendChild(element);
+
+			let wasClicked = false;
+
+			await connect();
+
+			parent.addEventListener(eventClick, () => {
+				wasClicked = true;
+			});
+
+			await DOM.nextUpdate();
+
+			const elements = element.shadowRoot?.querySelectorAll('span');
+			if (elements) {
+				const spans: HTMLSpanElement[] = Array.from(elements);
+				spans.forEach((span: HTMLSpanElement) => {
+					span.click();
+					expect(wasClicked).toEqual(false);
+				});
+			}
+
+			await disconnect();
+		});
+	});
+});
diff --git a/libs/components/src/shared/foundation/button/button.template.ts b/libs/components/src/shared/foundation/button/button.template.ts
new file mode 100644
index 0000000000..4ad736f5b3
--- /dev/null
+++ b/libs/components/src/shared/foundation/button/button.template.ts
@@ -0,0 +1,55 @@
+import { html, ref } from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { ButtonOptions, FoundationButton } from './button';
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#(Button:class)} component.
+ * @public
+ */
+export const buttonTemplate: FoundationElementTemplate<
+	ViewTemplate<FoundationButton>,
+	ButtonOptions
+> = () => html`
+	<button
+		class="control"
+		part="control"
+		?autofocus="${(x) => x.autofocus}"
+		?disabled="${(x) => x.disabled}"
+		form="${(x) => x.formId}"
+		formaction="${(x) => x.formaction}"
+		formenctype="${(x) => x.formenctype}"
+		formmethod="${(x) => x.formmethod}"
+		formnovalidate="${(x) => x.formnovalidate}"
+		formtarget="${(x) => x.formtarget}"
+		name="${(x) => x.name}"
+		type="${(x) => x.type}"
+		value="${(x) => x.value}"
+		aria-atomic="${(x) => x.ariaAtomic}"
+		aria-busy="${(x) => x.ariaBusy}"
+		aria-controls="${(x) => x.ariaControls}"
+		aria-current="${(x) => x.ariaCurrent}"
+		aria-describedby="${(x) => x.ariaDescribedby}"
+		aria-details="${(x) => x.ariaDetails}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-errormessage="${(x) => x.ariaErrormessage}"
+		aria-expanded="${(x) => x.ariaExpanded}"
+		aria-flowto="${(x) => x.ariaFlowto}"
+		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-hidden="${(x) => x.ariaHidden}"
+		aria-invalid="${(x) => x.ariaInvalid}"
+		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-labelledby="${(x) => x.ariaLabelledby}"
+		aria-live="${(x) => x.ariaLive}"
+		aria-owns="${(x) => x.ariaOwns}"
+		aria-pressed="${(x) => x.ariaPressed}"
+		aria-relevant="${(x) => x.ariaRelevant}"
+		aria-roledescription="${(x) => x.ariaRoledescription}"
+		${ref('control')}
+	>
+		<span class="content" part="content">
+			<slot></slot>
+		</span>
+	</button>
+`;
diff --git a/libs/components/src/shared/foundation/button/button.ts b/libs/components/src/shared/foundation/button/button.ts
new file mode 100644
index 0000000000..40a3fc4cb6
--- /dev/null
+++ b/libs/components/src/shared/foundation/button/button.ts
@@ -0,0 +1,271 @@
+/* eslint-disable @typescript-eslint/explicit-member-accessibility */
+import { attr } from '@microsoft/fast-element';
+import { applyMixins } from '@microsoft/fast-foundation';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+import { ARIAGlobalStatesAndProperties } from '../patterns/index';
+import { FormAssociatedButton } from './button.form-associated';
+
+/**
+ * Button configuration options
+ * @public
+ */
+export type ButtonOptions = FoundationElementDefinition;
+
+/**
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @csspart control - The button element
+ * @csspart content - The element wrapping button content
+ *
+ * @public
+ */
+export class FoundationButton extends FormAssociatedButton {
+	/**
+	 * Determines if the element should receive document focus on page load.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: autofocus
+	 */
+	@attr({ mode: 'boolean' })
+	// @ts-expect-error Type is incorrectly non-optional
+	public autofocus: boolean;
+
+	/**
+	 * The id of a form to associate the element to.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: form
+	 */
+	@attr({ attribute: 'form' })
+	// @ts-expect-error Type is incorrectly non-optional
+	public formId: string;
+
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: formaction
+	 */
+	@attr
+	// @ts-expect-error Type is incorrectly non-optional
+	public formaction: string;
+	// @ts-expect-error Function is delcared but not used
+	private formactionChanged(): void {
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.formAction = this.formaction;
+		}
+	}
+
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: formenctype
+	 */
+	@attr
+	// @ts-expect-error Type is incorrectly non-optional
+	public formenctype: string;
+	// @ts-expect-error Function is delcared but not used
+	private formenctypeChanged(): void {
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.formEnctype = this.formenctype;
+		}
+	}
+
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: formmethod
+	 */
+	@attr
+	// @ts-expect-error Type is incorrectly non-optional
+	public formmethod: string;
+	// @ts-expect-error Function is delcared but not used
+	private formmethodChanged(): void {
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.formMethod = this.formmethod;
+		}
+	}
+
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: formnovalidate
+	 */
+	@attr({ mode: 'boolean' })
+	// @ts-expect-error Type is incorrectly non-optional
+	public formnovalidate: boolean;
+	// @ts-expect-error Function is delcared but not used
+	private formnovalidateChanged(): void {
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.formNoValidate = this.formnovalidate;
+		}
+	}
+
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: formtarget
+	 */
+	@attr
+	// @ts-expect-error Type is incorrectly non-optional
+	public formtarget: '_self' | '_blank' | '_parent' | '_top';
+	// @ts-expect-error Function is delcared but not used
+	private formtargetChanged(): void {
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.formTarget = this.formtarget;
+		}
+	}
+
+	/**
+	 * The button type.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: type
+	 */
+	@attr
+	// @ts-expect-error Type is incorrectly non-optional
+	public type: 'submit' | 'reset' | 'button';
+	// @ts-expect-error Function is delcared but not used
+	private typeChanged(
+		previous: 'submit' | 'reset' | 'button' | void,
+		next: 'submit' | 'reset' | 'button'
+	): void {
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.type = this.type;
+		}
+
+		next === 'submit' && this.addEventListener('click', this.handleSubmission);
+		previous === 'submit' &&
+			this.removeEventListener('click', this.handleSubmission);
+		next === 'reset' && this.addEventListener('click', this.handleFormReset);
+		previous === 'reset' &&
+			this.removeEventListener('click', this.handleFormReset);
+	}
+
+	/** {@inheritDoc (FormAssociated:interface).validate} */
+	public override validate(): void {
+		super.validate(this.control);
+	}
+
+	/**
+	 * @internal
+	 */
+	public override connectedCallback(): void {
+		super.connectedCallback();
+
+		this.proxy.setAttribute('type', this.type);
+
+		const elements = Array.from(this.control.children) as HTMLSpanElement[];
+		if (elements) {
+			elements.forEach((span: HTMLSpanElement) => {
+				span.addEventListener('click', this.handleClick);
+			});
+		}
+	}
+
+	/**
+	 * @internal
+	 */
+	public override disconnectedCallback(): void {
+		super.disconnectedCallback();
+
+		const elements = Array.from(this.control.children) as HTMLSpanElement[];
+		if (elements) {
+			elements.forEach((span: HTMLSpanElement) => {
+				span.removeEventListener('click', this.handleClick);
+			});
+		}
+	}
+
+	/**
+	 * Prevent events to propagate if disabled
+	 * @internal
+	 */
+	private handleClick = (e: Event) => {
+		if (this.disabled) {
+			e.stopPropagation();
+		}
+	};
+
+	/**
+	 * Submits the parent form
+	 */
+	private handleSubmission = () => {
+		if (!this.form) {
+			return;
+		}
+
+		this.attachProxy();
+
+		this.form.requestSubmit(this.proxy);
+
+		this.detachProxy();
+	};
+
+	/**
+	 * Resets the parent form
+	 */
+	private handleFormReset = () => {
+		this.form?.reset();
+	};
+
+	public control!: HTMLButtonElement;
+}
+
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
+ *
+ * @public
+ */
+export class DelegatesARIAButton {
+	/**
+	 * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+	 * @public
+	 * @remarks
+	 * HTML Attribute: aria-expanded
+	 */
+	@attr({ attribute: 'aria-expanded' })
+	// @ts-expect-error Type is incorrectly non-optional
+	public ariaExpanded: 'true' | 'false' | string | null;
+
+	/**
+	 * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+	 * @public
+	 * @remarks
+	 * HTML Attribute: aria-pressed
+	 */
+	@attr({ attribute: 'aria-pressed' })
+	// @ts-expect-error Type is incorrectly non-optional
+	public ariaPressed: 'true' | 'false' | 'mixed' | string | null;
+}
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface DelegatesARIAButton extends ARIAGlobalStatesAndProperties {}
+applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface FoundationButton extends DelegatesARIAButton {}
+applyMixins(FoundationButton, DelegatesARIAButton);
diff --git a/libs/components/src/shared/foundation/button/index.ts b/libs/components/src/shared/foundation/button/index.ts
new file mode 100644
index 0000000000..04cbc4010e
--- /dev/null
+++ b/libs/components/src/shared/foundation/button/index.ts
@@ -0,0 +1,2 @@
+export * from './button.template.js';
+export * from './button.js';
diff --git a/libs/components/src/shared/patterns/aria-global.ts b/libs/components/src/shared/foundation/patterns/aria-global.ts
similarity index 100%
rename from libs/components/src/shared/patterns/aria-global.ts
rename to libs/components/src/shared/foundation/patterns/aria-global.ts
diff --git a/libs/components/src/shared/foundation/patterns/index.ts b/libs/components/src/shared/foundation/patterns/index.ts
new file mode 100644
index 0000000000..4f453051f2
--- /dev/null
+++ b/libs/components/src/shared/foundation/patterns/index.ts
@@ -0,0 +1 @@
+export * from './aria-global.js';
diff --git a/libs/components/src/shared/foundation/test-utilities/fixture.spec.ts b/libs/components/src/shared/foundation/test-utilities/fixture.spec.ts
new file mode 100644
index 0000000000..19c8c5debb
--- /dev/null
+++ b/libs/components/src/shared/foundation/test-utilities/fixture.spec.ts
@@ -0,0 +1,88 @@
+import {
+	attr,
+	customElement,
+	DOM,
+	FASTElement,
+	html,
+	observable,
+} from '@microsoft/fast-element';
+import { fixture, uniqueElementName } from './fixture';
+
+describe('The fixture helper', () => {
+	const name = uniqueElementName();
+	const template = html<MyElement>`
+		${(x) => x.value}
+		<slot></slot>
+	`;
+
+	@customElement({
+		name,
+		template,
+	})
+	class MyElement extends FASTElement {
+		/* eslint-disable-next-line */
+		@attr value = 'value';
+	}
+
+	class MyModel {
+		@observable value = 'different value';
+	}
+
+	it('can create a fixture for an element by name', async () => {
+		const { element } = await fixture(name);
+		expect(element instanceof MyElement).toEqual(true);
+	});
+
+	it('can connect an element', async () => {
+		const { element, connect } = await fixture(name);
+
+		expect(element.isConnected).toEqual(false);
+
+		await connect();
+
+		expect(element.isConnected).toEqual(true);
+
+		document.body.removeChild(element.parentElement!);
+	});
+
+	it('should not throw when connect is called multiple times', async () => {
+		const { connect } = await fixture(name);
+
+		await connect();
+		await connect();
+	});
+
+	it('can disconnect an element', async () => {
+		const { element, connect, disconnect } = await fixture(name);
+
+		expect(element.isConnected).toEqual(false);
+
+		await connect();
+
+		expect(element.isConnected).toEqual(true);
+
+		await disconnect();
+
+		expect(element.isConnected).toEqual(false);
+	});
+
+	it('can bind an element to data', async () => {
+		const source = new MyModel();
+		const { element, disconnect } = await fixture<MyElement>(
+			html<MyModel>`
+    <${name} value=${(x) => x.value}></${name}>
+  `,
+			{ source }
+		);
+
+		expect(element.value).toEqual(source.value);
+
+		source.value = 'something else';
+
+		await DOM.nextUpdate();
+
+		expect(element.value).toEqual(source.value);
+
+		await disconnect();
+	});
+});
diff --git a/libs/components/src/shared/foundation/test-utilities/fixture.ts b/libs/components/src/shared/foundation/test-utilities/fixture.ts
new file mode 100644
index 0000000000..8f5103334e
--- /dev/null
+++ b/libs/components/src/shared/foundation/test-utilities/fixture.ts
@@ -0,0 +1,222 @@
+import {
+	defaultExecutionContext,
+	ExecutionContext,
+	HTMLView,
+	ViewTemplate,
+} from '@microsoft/fast-element';
+import type { Constructable } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import type {
+	Container,
+	DesignSystemRegistrationContext,
+	FoundationElementDefinition,
+	FoundationElementRegistry,
+} from '@microsoft/fast-foundation';
+
+/**
+ * Options used to customize the creation of the test fixture.
+ */
+export interface FixtureOptions {
+	/**
+	 * The document to run the fixture in.
+	 * @defaultValue `globalThis.document`
+	 */
+	document?: Document;
+
+	/**
+	 * The parent element to append the fixture to.
+	 * @defaultValue An instance of `HTMLDivElement`.
+	 */
+	parent?: HTMLElement;
+
+	/**
+	 * The data source to bind the HTML to.
+	 * @defaultValue An empty object.
+	 */
+	source?: any;
+
+	/**
+	 * The execution context to use during binding.
+	 * @defaultValue {@link @microsoft/fast-element#defaultExecutionContext}
+	 */
+	context?: ExecutionContext;
+
+	/**
+	 * A pre-configured design system instance used in setting up the fixture.
+	 */
+	designSystem?: DesignSystem;
+}
+
+export interface Fixture<TElement = HTMLElement> {
+	/**
+	 * The document the fixture is running in.
+	 */
+	document: Document;
+
+	/**
+	 * The template the fixture was created from.
+	 */
+	template: ViewTemplate;
+
+	/**
+	 * The view that was created from the fixture's template.
+	 */
+	view: HTMLView;
+
+	/**
+	 * The parent element that the view was appended to.
+	 * @remarks
+	 * This element will be appended to the DOM only
+	 * after {@link Fixture.connect} has been called.
+	 */
+	parent: HTMLElement;
+
+	/**
+	 * The first element in the {@link Fixture.view}.
+	 */
+	element: TElement;
+
+	/**
+	 * Adds the {@link Fixture.parent} to the DOM, causing the
+	 * connect lifecycle to begin.
+	 * @remarks
+	 * Yields control to the caller one Microtask later, in order to
+	 * ensure that the DOM has settled.
+	 */
+	connect: () => Promise<void>;
+
+	/**
+	 * Removes the {@link Fixture.parent} from the DOM, causing the
+	 * disconnect lifecycle to begin.
+	 * @remarks
+	 * Yields control to the caller one Microtask later, in order to
+	 * ensure that the DOM has settled.
+	 */
+	disconnect: () => Promise<void>;
+}
+
+function findElement(view: HTMLView): HTMLElement {
+	let current: Node | null = view.firstChild;
+
+	while (current !== null && current.nodeType !== 1) {
+		current = current.nextSibling;
+	}
+
+	return current as any;
+}
+
+/**
+ * Creates a random, unique name suitable for use as a Custom Element name.
+ */
+export function uniqueElementName(): string {
+	return `fast-unique-${Math.random().toString(36).substring(7)}`;
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// @ts-expect-error variable is never read
+function isElementRegistry<T>(
+	obj: any
+): obj is FoundationElementRegistry<FoundationElementDefinition, any> {
+	return typeof obj.register === 'function';
+}
+
+/**
+ * Creates a test fixture suitable for testing custom elements, templates, and bindings.
+ * @param templateNameOrRegistry An HTML template or single element name to create the fixture for.
+ * @param options Enables customizing fixture creation behavior.
+ * @remarks
+ * Yields control to the caller one Microtask later, in order to
+ * ensure that the DOM has settled.
+ */
+export async function fixture<TElement = HTMLElement>(
+	templateNameOrRegistry:
+		| ViewTemplate
+		| string
+		| FoundationElementRegistry<
+				FoundationElementDefinition,
+				Constructable<TElement>
+		  >
+		| [
+				FoundationElementRegistry<
+					FoundationElementDefinition,
+					Constructable<TElement>
+				>,
+				...FoundationElementRegistry<
+					FoundationElementDefinition,
+					Constructable
+				>[]
+		  ],
+	options: FixtureOptions = {}
+): Promise<Fixture<TElement>> {
+	const document = options.document || globalThis.document;
+	const parent = options.parent || document.createElement('div');
+	const source = options.source || {};
+	const context = options.context || defaultExecutionContext;
+
+	if (typeof templateNameOrRegistry === 'string') {
+		const html = `<${templateNameOrRegistry}></${templateNameOrRegistry}>`;
+		templateNameOrRegistry = new ViewTemplate(html, []);
+	} else if (isElementRegistry(templateNameOrRegistry)) {
+		templateNameOrRegistry = [templateNameOrRegistry];
+	}
+
+	if (Array.isArray(templateNameOrRegistry)) {
+		const first = templateNameOrRegistry[0];
+		const ds = options.designSystem || DesignSystem.getOrCreate(parent);
+		let prefix = '';
+
+		ds.register(templateNameOrRegistry, {
+			// @ts-expect-error variable is never read
+			register(container: Container, context: DesignSystemRegistrationContext) {
+				prefix = context.elementPrefix;
+			},
+		});
+
+		const elementName = `${prefix}-${first.definition.baseName}`;
+		const html = `<${elementName}></${elementName}>`;
+		templateNameOrRegistry = new ViewTemplate(html, []);
+	}
+
+	const view = templateNameOrRegistry.create();
+	const element = findElement(view) as any;
+	let isConnected = false;
+
+	view.bind(source, context);
+	view.appendTo(parent);
+
+	customElements.upgrade(parent);
+
+	// Hook into the Microtask Queue to ensure the DOM is settled
+	// before yielding control to the caller.
+	await Promise.resolve();
+
+	const connect = async () => {
+		if (isConnected) {
+			return;
+		}
+
+		isConnected = true;
+		document.body.appendChild(parent);
+		await Promise.resolve();
+	};
+
+	const disconnect = async () => {
+		if (!isConnected) {
+			return;
+		}
+
+		isConnected = false;
+		document.body.removeChild(parent);
+		await Promise.resolve();
+	};
+
+	return {
+		document,
+		template: templateNameOrRegistry,
+		view,
+		parent,
+		element,
+		connect,
+		disconnect,
+	};
+}
diff --git a/libs/components/tsconfig.spec.json b/libs/components/tsconfig.spec.json
index 78272f62a3..2d02ba2f73 100644
--- a/libs/components/tsconfig.spec.json
+++ b/libs/components/tsconfig.spec.json
@@ -10,5 +10,5 @@
 		"target": "ES6"
 	},
 	"exclude": ["**/*.config.spec.ts"],
-	"include": ["**/*.spec.ts", "**/*.d.ts"]
+	"include": ["**/*.spec.ts", "**/*.d.ts", "**/fixture.ts"]
 }