diff --git a/change/@fluentui-web-components-b0669382-c509-4801-bd44-9849e8570a92.json b/change/@fluentui-web-components-b0669382-c509-4801-bd44-9849e8570a92.json
new file mode 100644
index 00000000000000..77a57797f6f18a
--- /dev/null
+++ b/change/@fluentui-web-components-b0669382-c509-4801-bd44-9849e8570a92.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removes dependancy on fast-foundation classes and templates",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index 042a9ff09a728b..2cf13edf679c07 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -4,65 +4,60 @@
 
 ```ts
 
-import type { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation/anchor.js';
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import { DividerOrientation } from '@microsoft/fast-foundation/divider.js';
-import { DividerRole } from '@microsoft/fast-foundation/divider.js';
+import type { Constructable } from '@microsoft/fast-element';
+import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
-import { FASTAccordion } from '@microsoft/fast-foundation/accordion.js';
-import { FASTAccordionItem } from '@microsoft/fast-foundation/accordion-item.js';
-import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js';
-import { FASTButton } from '@microsoft/fast-foundation/button.js';
-import { FASTCheckbox } from '@microsoft/fast-foundation/checkbox.js';
-import { FASTDivider } from '@microsoft/fast-foundation/divider.js';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
-import { FASTMenu } from '@microsoft/fast-foundation/menu.js';
-import { FASTMenuItem } from '@microsoft/fast-foundation/menu-item.js';
-import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
-import { FASTProgressRing } from '@microsoft/fast-foundation/progress-ring.js';
-import { FASTRadio } from '@microsoft/fast-foundation/radio.js';
-import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js';
-import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
-import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
-import { FASTTab } from '@microsoft/fast-foundation/tab.js';
-import { FASTTabPanel } from '@microsoft/fast-foundation/tab-panel.js';
-import { FASTTabs } from '@microsoft/fast-foundation/tabs.js';
-import { FASTTextField } from '@microsoft/fast-foundation/text-field.js';
-import { MenuItemRole } from '@microsoft/fast-foundation/menu-item.js';
-import { RadioGroupOrientation } from '@microsoft/fast-foundation/radio-group.js';
-import { SliderOrientation } from '@microsoft/fast-foundation/slider.js';
-import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
-import { StartEndOptions } from '@microsoft/fast-foundation/patterns.js';
-import type { StaticallyComposableHTML } from '@microsoft/fast-foundation/utilities.js';
-import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
-import { TextFieldType as TextInputType } from '@microsoft/fast-foundation/text-field.js';
+import { HTMLDirective } from '@microsoft/fast-element';
+import { Orientation } from '@microsoft/fast-web-utilities';
+import type { SyntheticViewTemplate } from '@microsoft/fast-element';
 import type { Theme } from '@fluentui/tokens';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 
 // @public
-export class Accordion extends FASTAccordion {
+export class Accordion extends FASTElement {
+    // (undocumented)
+    protected accordionItems: Element[];
+    // Warning: (ae-forgotten-export) The symbol "AccordionExpandMode" needs to be exported by the entry point index.d.ts
+    expandmode: AccordionExpandMode;
+    // (undocumented)
+    expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
+    // @internal (undocumented)
+    handleChange(source: any, propertyName: string): void;
+    // @internal (undocumented)
+    slottedAccordionItems: HTMLElement[];
+    // @internal (undocumented)
+    slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
 }
 
-// @public
+// @public (undocumented)
 export const accordionDefinition: FASTElementDefinition<typeof Accordion>;
 
-// Warning: (ae-internal-missing-underscore) The name "AccordionItem" should be prefixed with an underscore because the declaration is marked as @internal
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AccordionItem" because one of its declarations is marked as @internal
 //
-// @internal (undocumented)
-export class AccordionItem extends FASTAccordionItem {
-    // @public
+// @public
+export class AccordionItem extends FASTElement {
     block: boolean;
-    // @public
+    // @internal (undocumented)
+    clickHandler: (e: MouseEvent) => void;
+    disabled: boolean;
+    // @internal (undocumented)
+    expandbutton: HTMLElement;
+    expanded: boolean;
     expandIconPosition?: AccordionItemExpandIconPosition;
-    // @public
+    headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
+    id: string;
     size?: AccordionItemSize;
 }
 
-// Warning: (ae-incompatible-release-tags) The symbol "definition" is marked as @public, but its signature references "AccordionItem" which is marked as @internal
+// Warning: (ae-forgotten-export) The symbol "StartEnd" needs to be exported by the entry point index.d.ts
 //
-// @public
+// @internal
+export interface AccordionItem extends StartEnd {
+}
+
+// @public (undocumented)
 export const accordionItemDefinition: FASTElementDefinition<typeof AccordionItem>;
 
 // @public
@@ -71,9 +66,19 @@ export const AccordionItemExpandIconPosition: {
     readonly end: "end";
 };
 
+// Warning: (ae-forgotten-export) The symbol "ValuesOf" needs to be exported by the entry point index.d.ts
+//
 // @public
 export type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
 
+// Warning: (ae-forgotten-export) The symbol "StartEndOptions" needs to be exported by the entry point index.d.ts
+//
+// @public
+export type AccordionItemOptions = StartEndOptions<AccordionItem> & {
+    expandedIcon?: StaticallyComposableHTML<AccordionItem>;
+    collapsedIcon?: StaticallyComposableHTML<AccordionItem>;
+};
+
 // @public
 export const AccordionItemSize: {
     readonly small: "small";
@@ -88,8 +93,6 @@ export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
 // @public (undocumented)
 export const accordionItemStyles: ElementStyles;
 
-// Warning: (ae-incompatible-release-tags) The symbol "template" is marked as @public, but its signature references "AccordionItem" which is marked as @internal
-//
 // @public
 export const accordionItemTemplate: ElementViewTemplate<AccordionItem>;
 
@@ -99,11 +102,16 @@ export const accordionStyles: ElementStyles;
 // @public (undocumented)
 export const accordionTemplate: ElementViewTemplate<Accordion>;
 
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AnchorButton" because one of its declarations is marked as @internal
+//
 // @public
-export class AnchorButton extends FASTAnchor {
+export class AnchorButton extends FASTElement {
     appearance?: AnchorButtonAppearance | undefined;
     // (undocumented)
     connectedCallback(): void;
+    control: HTMLAnchorElement;
+    // @internal
+    defaultSlottedContent: HTMLElement[];
     disabled?: boolean;
     // (undocumented)
     protected disabledChanged(prev: boolean, next: boolean): void;
@@ -112,9 +120,21 @@ export class AnchorButton extends FASTAnchor {
     protected disabledFocusableChanged(prev: boolean, next: boolean): void;
     // (undocumented)
     disconnectedCallback(): void;
+    download: string;
+    href: string;
+    hreflang: string;
     iconOnly: boolean;
+    ping: string;
+    referrerpolicy: string;
+    rel: string;
     shape?: AnchorButtonShape | undefined;
     size?: AnchorButtonSize;
+    target: AnchorTarget;
+    type: string;
+}
+
+// @internal
+export interface AnchorButton extends StartEnd, DelegatesARIALink {
 }
 
 // @public
@@ -129,11 +149,9 @@ export const AnchorButtonAppearance: {
 // @public
 export type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
 
-// @public
+// @public (undocumented)
 export const AnchorButtonDefinition: FASTElementDefinition<typeof AnchorButton>;
 
-export { AnchorButtonOptions }
-
 // @public
 export const AnchorButtonShape: {
     readonly circular: "circular";
@@ -157,6 +175,22 @@ export type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
 // @public
 export const AnchorButtonTemplate: ElementViewTemplate<AnchorButton>;
 
+// @public
+type AnchorOptions = StartEndOptions<AnchorButton>;
+export { AnchorOptions as AnchorButtonOptions }
+export { AnchorOptions }
+
+// @public
+export const AnchorTarget: {
+    readonly _self: "_self";
+    readonly _blank: "_blank";
+    readonly _parent: "_parent";
+    readonly _top: "_top";
+};
+
+// @public
+export type AnchorTarget = ValuesOf<typeof AnchorTarget>;
+
 // @public
 export class Avatar extends FASTElement {
     active?: AvatarActive | undefined;
@@ -349,7 +383,7 @@ export const BadgeColor: {
 // @public
 export type BadgeColor = ValuesOf<typeof BadgeColor>;
 
-// @public
+// @public (undocumented)
 export const BadgeDefinition: FASTElementDefinition<typeof Badge>;
 
 // Warning: (ae-internal-missing-underscore) The name "BadgeOptions" should be prefixed with an underscore because the declaration is marked as @internal
@@ -406,19 +440,53 @@ export const borderRadiusSmall = "--borderRadiusSmall";
 // @public (undocumented)
 export const borderRadiusXLarge = "--borderRadiusXLarge";
 
+// Warning: (ae-forgotten-export) The symbol "FormAssociatedButton" needs to be exported by the entry point index.d.ts
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Button" because one of its declarations is marked as @internal
+//
 // @public
-export class Button extends FASTButton {
+export class Button extends FormAssociatedButton {
     appearance?: ButtonAppearance | undefined;
-    // (undocumented)
+    autofocus: boolean;
+    // @internal (undocumented)
     connectedCallback(): void;
+    // (undocumented)
+    control: HTMLButtonElement;
+    defaultSlottedContent: HTMLElement[];
     disabledFocusable?: boolean;
     // (undocumented)
     protected disabledFocusableChanged(prev: boolean, next: boolean): void;
     // (undocumented)
     disconnectedCallback(): void;
+    formaction: string;
+    // (undocumented)
+    protected formactionChanged(): void;
+    formenctype: string;
+    // (undocumented)
+    protected formenctypeChanged(): void;
+    formId: string;
+    formmethod: string;
+    // (undocumented)
+    protected formmethodChanged(): void;
+    formnovalidate: boolean;
+    // (undocumented)
+    protected formnovalidateChanged(): void;
+    formtarget: '_self' | '_blank' | '_parent' | '_top';
+    // (undocumented)
+    protected formtargetChanged(): void;
     iconOnly: boolean;
     shape?: ButtonShape | undefined;
     size?: ButtonSize;
+    type: ButtonType;
+    // (undocumented)
+    protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void;
+    // Warning: (ae-unresolved-inheritdoc-reference) The @inheritDoc reference could not be resolved: The package "@fluentui/web-components" does not have an export "FormAssociated"
+    //
+    // (undocumented)
+    validate(): void;
+}
+
+// @internal
+export interface Button extends StartEnd, DelegatesARIAButton {
 }
 
 // @public
@@ -433,9 +501,11 @@ export const ButtonAppearance: {
 // @public
 export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
 
-// @public
+// @public (undocumented)
 export const ButtonDefinition: FASTElementDefinition<typeof Button>;
 
+// @public
+type ButtonOptions = StartEndOptions<Button>;
 export { ButtonOptions }
 export { ButtonOptions as CompoundButtonOptions }
 export { ButtonOptions as MenuButtonOptions }
@@ -461,11 +531,33 @@ export const ButtonSize: {
 // @public
 export type ButtonSize = ValuesOf<typeof ButtonSize>;
 
-// @public
+// @public (undocumented)
 export const ButtonTemplate: ElementViewTemplate<Button>;
 
 // @public
-export class Checkbox extends FASTCheckbox {
+export const ButtonType: {
+    readonly submit: "submit";
+    readonly reset: "reset";
+    readonly button: "button";
+};
+
+// @public
+export type ButtonType = ValuesOf<typeof ButtonType>;
+
+// Warning: (ae-forgotten-export) The symbol "FormAssociatedCheckbox" needs to be exported by the entry point index.d.ts
+//
+// @public
+export class Checkbox extends FormAssociatedCheckbox {
+    constructor();
+    // @internal (undocumented)
+    clickHandler: (e: MouseEvent) => void;
+    // @internal (undocumented)
+    defaultSlottedNodes: Node[];
+    indeterminate: boolean;
+    // @internal
+    initialValue: string;
+    // @internal (undocumented)
+    keypressHandler: (e: KeyboardEvent) => void;
     labelPosition?: CheckboxLabelPosition;
     shape?: CheckboxShape;
     size?: CheckboxSize;
@@ -483,6 +575,12 @@ export const CheckboxLabelPosition: {
 // @public (undocumented)
 export type CheckboxLabelPosition = ValuesOf<typeof CheckboxLabelPosition>;
 
+// @public
+export type CheckboxOptions = {
+    checkedIndicator?: StaticallyComposableHTML<Checkbox>;
+    indeterminateIndicator?: StaticallyComposableHTML<Checkbox>;
+};
+
 // @public
 export const CheckboxShape: {
     readonly circular: "circular";
@@ -1414,7 +1512,7 @@ export const CompoundButtonAppearance: {
 // @public
 export type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
 
-// @public
+// @public (undocumented)
 export const CompoundButtonDefinition: FASTElementDefinition<typeof CompoundButton>;
 
 // @public
@@ -1491,7 +1589,7 @@ export const CounterBadgeColor: {
 // @public
 export type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
 
-// @public
+// @public (undocumented)
 export const CounterBadgeDefinition: FASTElementDefinition<typeof CounterBadge>;
 
 // Warning: (ae-incompatible-release-tags) The symbol "CounterBadgeOptions" is marked as @public, but its signature references "BadgeOptions" which is marked as @internal
@@ -1554,6 +1652,39 @@ export const curveEasyEaseMax = "--curveEasyEaseMax";
 // @public (undocumented)
 export const curveLinear = "--curveLinear";
 
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "DelegatesARIAButton" because one of its declarations is marked as @internal
+//
+// @public
+export class DelegatesARIAButton {
+    ariaExpanded: 'true' | 'false' | string | null;
+    ariaPressed: 'true' | 'false' | 'mixed' | string | null;
+}
+
+// Warning: (ae-forgotten-export) The symbol "ARIAGlobalStatesAndProperties" needs to be exported by the entry point index.d.ts
+//
+// @internal
+export interface DelegatesARIAButton extends ARIAGlobalStatesAndProperties {
+}
+
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "DelegatesARIALink" because one of its declarations is marked as @internal
+//
+// @public
+export class DelegatesARIALink {
+    ariaExpanded: 'true' | 'false' | string | null;
+}
+
+// @internal
+export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
+}
+
+// @public
+export class DelegatesARIATextbox {
+}
+
+// @public (undocumented)
+export interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
+}
+
 // @public
 export class Dialog extends FASTElement {
     ariaDescribedby?: string;
@@ -1588,10 +1719,12 @@ export const DialogStyles: ElementStyles;
 export const DialogTemplate: ElementViewTemplate<Dialog>;
 
 // @public
-export class Divider extends FASTDivider {
+export class Divider extends FASTElement {
     alignContent?: DividerAlignContent;
     appearance?: DividerAppearance;
     inset?: boolean;
+    orientation: DividerOrientation;
+    role: DividerRole;
 }
 
 // @public
@@ -1618,9 +1751,26 @@ export type DividerAppearance = ValuesOf<typeof DividerAppearance>;
 // @public
 export const DividerDefinition: FASTElementDefinition<typeof Divider>;
 
-export { DividerOrientation }
+// @public
+export const DividerOrientation: {
+    readonly horizontal: "horizontal"; /**
+    * Divider roles
+    * @public
+    */
+    readonly vertical: "vertical";
+};
+
+// @public
+export type DividerOrientation = ValuesOf<typeof DividerOrientation>;
 
-export { DividerRole }
+// @public
+export const DividerRole: {
+    readonly separator: "separator";
+    readonly presentation: "presentation";
+};
+
+// @public
+export type DividerRole = ValuesOf<typeof DividerRole>;
 
 // @public
 export const DividerStyles: ElementStyles;
@@ -1844,7 +1994,7 @@ export const MenuButtonAppearance: {
 // @public
 export type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearance>;
 
-// @public
+// @public (undocumented)
 export const MenuButtonDefinition: FASTElementDefinition<typeof MenuButton>;
 
 // @public
@@ -1873,17 +2023,71 @@ export const MenuButtonTemplate: ElementViewTemplate<MenuButton>;
 // @public
 export const MenuDefinition: FASTElementDefinition<typeof Menu>;
 
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "MenuItem" because one of its declarations is marked as @internal
+//
 // @public
-export class MenuItem extends FASTMenuItem {
+export class MenuItem extends FASTElement {
+    checked: boolean;
+    // (undocumented)
+    protected checkedChanged(oldValue: boolean, newValue: boolean): void;
+    cleanup: () => void;
+    disabled: boolean;
+    // @internal (undocumented)
+    disconnectedCallback(): void;
+    expanded: boolean;
+    // (undocumented)
+    protected expandedChanged(prev: boolean | undefined, next: boolean): void;
+    // @internal (undocumented)
+    handleMenuItemClick: (e: MouseEvent) => boolean;
+    // @internal (undocumented)
+    handleMenuItemKeyDown: (e: KeyboardEvent) => boolean;
+    // @internal (undocumented)
+    handleMouseOut: (e: MouseEvent) => boolean;
+    // @internal (undocumented)
+    handleMouseOver: (e: MouseEvent) => boolean;
+    // @internal (undocumented)
+    get hasSubmenu(): boolean;
+    hidden: boolean;
+    role: MenuItemRole;
+    // @internal
+    slottedSubmenu: HTMLElement[];
+    // @internal
+    protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
+    // @internal (undocumented)
+    submenu: HTMLElement | undefined;
+    // @internal
+    submenuContainer: HTMLDivElement;
+    // @internal (undocumented)
+    submenuLoaded: () => void;
+    updateSubmenu(): void;
+}
+
+// @internal
+export interface MenuItem extends StartEnd {
 }
 
 // @public (undocumented)
 export type MenuItemColumnCount = 0 | 1 | 2;
 
-// @public
+// @public (undocumented)
 export const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
 
-export { MenuItemRole }
+// @public
+export type MenuItemOptions = StartEndOptions<MenuItem> & {
+    checkboxIndicator?: StaticallyComposableHTML<MenuItem>;
+    expandCollapseGlyph?: StaticallyComposableHTML<MenuItem>;
+    radioIndicator?: StaticallyComposableHTML<MenuItem>;
+};
+
+// @public
+export const MenuItemRole: {
+    readonly menuitem: "menuitem";
+    readonly menuitemcheckbox: "menuitemcheckbox";
+    readonly menuitemradio: "menuitemradio";
+};
+
+// @public
+export type MenuItemRole = ValuesOf<typeof MenuItemRole>;
 
 // @public
 export const MenuItemStyles: ElementStyles;
@@ -1892,12 +2096,33 @@ export const MenuItemStyles: ElementStyles;
 export const MenuItemTemplate: ElementViewTemplate<MenuItem>;
 
 // @public
-export class MenuList extends FASTMenu {
+export class MenuList extends FASTElement {
+    collapseExpandedItem(): void;
+    // @internal (undocumented)
+    connectedCallback(): void;
+    // @internal (undocumented)
+    disconnectedCallback(): void;
+    focus(): void;
+    // (undocumented)
+    handleChange(source: any, propertyName: string): void;
+    // @internal
+    handleFocusOut: (e: FocusEvent) => void;
+    // @internal (undocumented)
+    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
+    protected isMenuItemElement: (el: Element) => el is HTMLElement;
+    // @internal (undocumented)
+    readonly isNestedMenu: () => boolean;
+    // @internal (undocumented)
+    items: HTMLElement[];
+    // (undocumented)
+    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    // (undocumented)
+    protected menuItems: Element[] | undefined;
     // (undocumented)
     protected setItems(): void;
 }
 
-// @public
+// @public (undocumented)
 export const MenuListDefinition: FASTElementDefinition<typeof MenuList>;
 
 // @public
@@ -1912,8 +2137,10 @@ export const MenuStyles: ElementStyles;
 // @public (undocumented)
 export const MenuTemplate: ElementViewTemplate<Menu>;
 
+// Warning: (ae-forgotten-export) The symbol "BaseProgress" needs to be exported by the entry point index.d.ts
+//
 // @public
-class ProgressBar_2 extends FASTProgress {
+class ProgressBar_2 extends BaseProgress {
     shape?: ProgressBarShape;
     thickness?: ProgressBarThickness;
     validationState: ProgressBarValidationState | null;
@@ -1958,34 +2185,95 @@ export const ProgressBarValidationState: {
 export type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
 // @public
-export class Radio extends FASTRadio {
+export type ProgressOptions = {
+    indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar_2>;
+    indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar_2>;
+};
+
+// Warning: (ae-forgotten-export) The symbol "FormAssociatedRadio" needs to be exported by the entry point index.d.ts
+//
+// @public
+export class Radio extends FormAssociatedRadio implements RadioControl {
+    constructor();
+    // @internal (undocumented)
+    connectedCallback(): void;
+    // @internal (undocumented)
+    defaultCheckedChanged(): void;
+    // @internal (undocumented)
+    defaultSlottedNodes: Node[];
+    // @internal
+    initialValue: string;
+    // @beta
+    keypressHandler(e: KeyboardEvent): boolean | void;
+    name: string;
 }
 
+// @public (undocumented)
+export type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
+
 // @public
 export const RadioDefinition: FASTElementDefinition<typeof Radio>;
 
 // @public
-export class RadioGroup extends FASTRadioGroup {
+export class RadioGroup extends FASTElement {
+    // (undocumented)
+    childItems: HTMLElement[];
+    // @internal (undocumented)
+    clickHandler: (e: MouseEvent) => void | boolean;
+    // @internal (undocumented)
+    connectedCallback(): void;
+    disabled: boolean;
+    // (undocumented)
+    disconnectedCallback(): void;
+    // @internal (undocumented)
+    focusOutHandler: (e: FocusEvent) => boolean | void;
+    // @internal (undocumented)
+    handleDisabledClick: (e: MouseEvent) => void | boolean;
+    // @internal
+    keydownHandler: (e: KeyboardEvent) => boolean | void;
+    name: string;
+    // (undocumented)
+    protected nameChanged(): void;
+    // Warning: (ae-forgotten-export) The symbol "RadioGroupOrientation" needs to be exported by the entry point index.d.ts
+    orientation: RadioGroupOrientation;
+    readOnly: boolean;
+    // @internal (undocumented)
+    slottedRadioButtons: HTMLElement[];
+    // (undocumented)
+    protected slottedRadioButtonsChanged(oldValue: unknown, newValue: HTMLElement[]): void;
     stacked: boolean;
+    value: string;
+    // (undocumented)
+    protected valueChanged(): void;
 }
 
 // @public
 export const RadioGroupDefinition: FASTElementDefinition<typeof RadioGroup>;
 
-export { RadioGroupOrientation }
-
 // @public
 export const RadioGroupStyles: ElementStyles;
 
 // @public (undocumented)
 export const RadioGroupTemplate: ElementViewTemplate<RadioGroup>;
 
+// @public
+export type RadioOptions = {
+    checkedIndicator?: StaticallyComposableHTML<Radio>;
+};
+
 // @public
 export const RadioStyles: ElementStyles;
 
 // @public (undocumented)
 export const RadioTemplate: ElementViewTemplate<Radio>;
 
+// Warning: (ae-internal-missing-underscore) The name "roleForMenuItem" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const roleForMenuItem: {
+    [value in keyof typeof MenuItemRole]: typeof MenuItemRole[value];
+};
+
 // @public
 export const setTheme: (theme: Theme) => void;
 
@@ -2028,21 +2316,111 @@ export const shadow8 = "--shadow8";
 // @public (undocumented)
 export const shadow8Brand = "--shadow8Brand";
 
+// Warning: (ae-forgotten-export) The symbol "FormAssociatedSlider" needs to be exported by the entry point index.d.ts
+//
 // @public
-export class Slider extends FASTSlider {
-    // (undocumented)
+export class Slider extends FormAssociatedSlider implements SliderConfiguration {
+    // @internal
+    calculateNewValue(rawValue: number): number;
+    // @internal (undocumented)
     connectedCallback(): void;
-    // (undocumented)
+    decrement(): void;
+    // @internal (undocumented)
+    direction: Direction;
+    // @internal (undocumented)
     disconnectedCallback(): void;
     // (undocumented)
     handleChange(source: any, propertyName: string): void;
+    // (undocumented)
+    handleMouseDown: (e: MouseEvent | null) => void;
+    handleThumbMouseDown: (event: MouseEvent | null) => void;
+    increment(): void;
+    // @internal (undocumented)
+    initialValue: string;
+    // @internal (undocumented)
+    isDragging: boolean;
+    // (undocumented)
+    keypressHandler: (e: KeyboardEvent) => void;
+    max: number;
+    // (undocumented)
+    protected maxChanged(): void;
+    min: number;
+    // (undocumented)
+    protected minChanged(): void;
+    mode: SliderMode;
+    orientation: Orientation;
+    // (undocumented)
+    protected orientationChanged(): void;
+    // @internal (undocumented)
+    position: string;
+    readOnly: boolean;
+    // (undocumented)
+    protected readOnlyChanged(): void;
     size?: SliderSize;
+    step: number | undefined;
+    // (undocumented)
+    protected stepChanged(): void;
+    // @internal (undocumented)
+    stepMultiplier: number;
+    // @internal (undocumented)
+    thumb: HTMLDivElement;
+    // @internal (undocumented)
+    track: HTMLDivElement;
+    // @internal (undocumented)
+    trackHeight: number;
+    // @internal (undocumented)
+    trackLeft: number;
+    // @internal (undocumented)
+    trackMinHeight: number;
+    // @internal (undocumented)
+    trackMinWidth: number;
+    // @internal (undocumented)
+    trackWidth: number;
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    // @internal (undocumented)
+    valueChanged(previous: string, next: string): void;
+    valueTextFormatter: (value: string) => string | null;
+}
+
+// @public (undocumented)
+export interface SliderConfiguration {
+    // (undocumented)
+    direction?: Direction;
+    // (undocumented)
+    disabled?: boolean;
+    // (undocumented)
+    max: number;
+    // (undocumented)
+    min: number;
+    // (undocumented)
+    orientation?: SliderOrientation;
 }
 
 // @public
 export const SliderDefinition: FASTElementDefinition<typeof Slider>;
 
-export { SliderOrientation }
+// @public (undocumented)
+export const SliderMode: {
+    readonly singleValue: "single-value";
+};
+
+// @public
+export type SliderMode = ValuesOf<typeof SliderMode>;
+
+// @public
+export type SliderOptions = {
+    thumb?: StaticallyComposableHTML<Slider>;
+};
+
+// @public (undocumented)
+export const SliderOrientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+
+// @public
+export type SliderOrientation = ValuesOf<typeof SliderOrientation>;
 
 // @public
 export const SliderSize: {
@@ -2057,7 +2435,7 @@ export type SliderSize = ValuesOf<typeof SliderSize>;
 export const SliderStyles: ElementStyles;
 
 // @public (undocumented)
-export const SliderTemplate: ElementViewTemplate<FASTSlider>;
+export const SliderTemplate: ElementViewTemplate<Slider>;
 
 // @public (undocumented)
 export const spacingHorizontalL = "--spacingHorizontalL";
@@ -2125,8 +2503,10 @@ export const spacingVerticalXXS = "--spacingVerticalXXS";
 // @public (undocumented)
 export const spacingVerticalXXXL = "--spacingVerticalXXXL";
 
+// Warning: (ae-forgotten-export) The symbol "ProgressRing" needs to be exported by the entry point index.d.ts
+//
 // @public
-export class Spinner extends FASTProgressRing {
+export class Spinner extends ProgressRing {
     appearance?: SpinnerAppearance;
     size?: SpinnerSize;
 }
@@ -2140,7 +2520,7 @@ export const SpinnerAppearance: {
 // @public
 export type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
 
-// @public
+// @public (undocumented)
 export const SpinnerDefinition: FASTElementDefinition<typeof Spinner>;
 
 // @public
@@ -2180,9 +2560,23 @@ const styles: ElementStyles;
 export { styles as ButtonStyles }
 export { styles as MenuButtonStyles }
 
+// Warning: (ae-forgotten-export) The symbol "FormAssociatedSwitch" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
-export class Switch extends FASTSwitch {
+export class Switch extends FormAssociatedSwitch {
+    constructor();
+    // @internal (undocumented)
+    clickHandler: (e: MouseEvent) => void;
+    // @internal (undocumented)
+    defaultSlottedNodes: Node[];
+    // @internal
+    initialValue: string;
+    // @internal (undocumented)
+    keypressHandler: (e: KeyboardEvent) => void;
     labelPosition: SwitchLabelPosition | undefined;
+    readOnly: boolean;
+    // (undocumented)
+    protected readOnlyChanged(): void;
 }
 
 // @public
@@ -2198,6 +2592,11 @@ export const SwitchLabelPosition: {
 // @public
 export type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
 
+// @public (undocumented)
+export type SwitchOptions = {
+    switch?: StaticallyComposableHTML<Switch>;
+};
+
 // @public (undocumented)
 export const SwitchStyles: ElementStyles;
 
@@ -2205,16 +2604,24 @@ export const SwitchStyles: ElementStyles;
 export const SwitchTemplate: ElementViewTemplate<Switch>;
 
 // @public
-export class Tab extends FASTTab {
+export class Tab extends FASTElement {
     // (undocumented)
     connectedCallback(): void;
+    disabled: boolean;
+}
+
+// @public (undocumented)
+export interface Tab extends StartEnd {
 }
 
 // @public (undocumented)
 export const TabDefinition: FASTElementDefinition<typeof Tab>;
 
+// @public
+export type TabOptions = StartEndOptions<Tab>;
+
 // @public (undocumented)
-export class TabPanel extends FASTTabPanel {
+export class TabPanel extends FASTElement {
 }
 
 // @public (undocumented)
@@ -2224,19 +2631,39 @@ export const TabPanelDefinition: FASTElementDefinition<typeof TabPanel>;
 export const TabPanelStyles: ElementStyles;
 
 // @public (undocumented)
-export const TabPanelTemplate: ElementViewTemplate<FASTTabPanel, any>;
+export const TabPanelTemplate: ElementViewTemplate<TabPanel, any>;
 
 // @public
-export class Tabs extends FASTTabs {
-    // (undocumented)
+export class Tabs extends FASTElement {
+    activeid: string;
+    // @internal (undocumented)
     activeidChanged(oldValue: string, newValue: string): void;
+    activetab: HTMLElement;
+    adjust(adjustment: number): void;
     appearance?: TabsAppearance;
+    // @internal (undocumented)
+    connectedCallback(): void;
     disabled?: boolean;
-    size?: TabsSize;
+    orientation: TabsOrientation;
+    // @internal (undocumented)
+    orientationChanged(): void;
     // (undocumented)
+    protected setTabs: () => void;
+    size?: TabsSize;
+    // @internal (undocumented)
+    tabpanels: HTMLElement[];
+    // @internal (undocumented)
+    tabpanelsChanged(): void;
+    // @internal (undocumented)
+    tabs: HTMLElement[];
+    // @internal (undocumented)
     tabsChanged(): void;
 }
 
+// @public (undocumented)
+export interface Tabs extends StartEnd {
+}
+
 // @public (undocumented)
 export const TabsAppearance: {
     readonly subtle: "subtle";
@@ -2249,7 +2676,17 @@ export type TabsAppearance = ValuesOf<typeof TabsAppearance>;
 // @public (undocumented)
 export const TabsDefinition: FASTElementDefinition<typeof Tabs>;
 
-export { TabsOrientation }
+// @public
+export type TabsOptions = StartEndOptions<Tabs>;
+
+// @public
+export const TabsOrientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+
+// @public
+export type TabsOrientation = ValuesOf<typeof TabsOrientation>;
 
 // @public (undocumented)
 export const TabsSize: {
@@ -2265,13 +2702,13 @@ export type TabsSize = ValuesOf<typeof TabsSize>;
 export const TabsStyles: ElementStyles;
 
 // @public (undocumented)
-export const TabsTemplate: ElementViewTemplate<FASTTabs, any>;
+export const TabsTemplate: ElementViewTemplate<Tabs, any>;
 
 // @public (undocumented)
 export const TabStyles: ElementStyles;
 
 // @public (undocumented)
-export const TabTemplate: ElementViewTemplate<FASTTab, any>;
+export const TabTemplate: ElementViewTemplate<Tab, any>;
 
 // @public
 class Text_2 extends FASTElement {
@@ -2302,6 +2739,21 @@ export type TextAlign = ValuesOf<typeof TextAlign>;
 // @public
 export const TextDefinition: FASTElementDefinition<typeof Text_2>;
 
+// @public (undocumented)
+export type TextFieldOptions = StartEndOptions<TextInput>;
+
+// @public
+export const TextFieldType: {
+    readonly email: "email";
+    readonly password: "password";
+    readonly tel: "tel";
+    readonly text: "text";
+    readonly url: "url";
+};
+
+// @public
+export type TextFieldType = ValuesOf<typeof TextFieldType>;
+
 // @public
 export const TextFont: {
     readonly base: "base";
@@ -2312,10 +2764,59 @@ export const TextFont: {
 // @public
 export type TextFont = ValuesOf<typeof TextFont>;
 
-// @public
-export class TextInput extends FASTTextField {
+// Warning: (ae-forgotten-export) The symbol "FormAssociatedTextField" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export class TextInput extends FormAssociatedTextField {
     appearance?: TextInputAppearance;
+    autofocus: boolean;
+    // (undocumented)
+    protected autofocusChanged(): void;
+    // @internal (undocumented)
+    connectedCallback(): void;
+    // @internal
+    control: HTMLInputElement;
     controlSize?: TextInputControlSize;
+    // @internal (undocumented)
+    defaultSlottedNodes: Node[];
+    // @internal
+    handleChange(): void;
+    // @internal
+    handleTextInput(): void;
+    list: string;
+    // (undocumented)
+    protected listChanged(): void;
+    maxlength: number;
+    // (undocumented)
+    protected maxlengthChanged(): void;
+    minlength: number;
+    // (undocumented)
+    protected minlengthChanged(): void;
+    pattern: string;
+    // (undocumented)
+    protected patternChanged(): void;
+    placeholder: string;
+    // (undocumented)
+    protected placeholderChanged(): void;
+    readOnly: boolean;
+    // (undocumented)
+    protected readOnlyChanged(): void;
+    select(): void;
+    size: number;
+    // (undocumented)
+    protected sizeChanged(): void;
+    spellcheck: boolean;
+    // (undocumented)
+    protected spellcheckChanged(): void;
+    type: TextFieldType;
+    // Warning: (ae-unresolved-inheritdoc-reference) The @inheritDoc reference could not be resolved: The package "@fluentui/web-components" does not have an export "FormAssociated"
+    //
+    // (undocumented)
+    validate(): void;
+}
+
+// @public (undocumented)
+export interface TextInput extends StartEnd, DelegatesARIATextbox {
 }
 
 // @public
@@ -2350,8 +2851,6 @@ export const TextInputStyles: ElementStyles;
 // @internal (undocumented)
 export const TextInputTemplate: ElementViewTemplate<TextInput>;
 
-export { TextInputType }
-
 // @public
 export const TextSize: {
     readonly _100: "100";
@@ -2425,7 +2924,7 @@ export const ToggleButtonAppearance: {
 // @public
 export type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
 
-// @public
+// @public (undocumented)
 export const ToggleButtonDefinition: FASTElementDefinition<typeof ToggleButton>;
 
 // @public
@@ -2454,6 +2953,10 @@ export const ToggleButtonStyles: ElementStyles;
 // @public
 export const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
 
+// Warnings were encountered during analysis:
+//
+// dist/dts/accordion-item/accordion-item.d.ts:11:5 - (ae-forgotten-export) The symbol "StaticallyComposableHTML" needs to be exported by the entry point index.d.ts
+
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/web-components/src/accordion-item/accordion-item.definition.ts b/packages/web-components/src/accordion-item/accordion-item.definition.ts
index a922e4ed8f651a..965022c68cf64a 100644
--- a/packages/web-components/src/accordion-item/accordion-item.definition.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.definition.ts
@@ -4,9 +4,6 @@ import { styles } from './accordion-item.styles.js';
 import { template } from './accordion-item.template.js';
 
 /**
- * The Fluent AccordionItem Element. Implements {@link @microsoft/fast-foundation#AccordionItem },
- * {@link @microsoft/fast-foundation#accordionItemTemplate}
- *
  *
  * @public
  * @remarks
diff --git a/packages/web-components/src/accordion-item/accordion-item.options.ts b/packages/web-components/src/accordion-item/accordion-item.options.ts
index c923a840cbd7ed..79ea47d2e9cd1f 100644
--- a/packages/web-components/src/accordion-item/accordion-item.options.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.options.ts
@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * An Accordion Item header font size can be small, medium, large, and extra-large
diff --git a/packages/web-components/src/accordion-item/accordion-item.template.ts b/packages/web-components/src/accordion-item/accordion-item.template.ts
index 7f5204b7d2e8e5..8033b940718d55 100644
--- a/packages/web-components/src/accordion-item/accordion-item.template.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.template.ts
@@ -1,6 +1,7 @@
-import { ElementViewTemplate, html } from '@microsoft/fast-element';
-import { accordionItemTemplate } from '@microsoft/fast-foundation/accordion-item.js';
-import { AccordionItem } from './accordion-item.js';
+import { ElementViewTemplate, html, ref } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { staticallyCompose } from '../utils/index.js';
+import { AccordionItem, AccordionItemOptions } from './accordion-item.js';
 
 const chevronRight20Filled = html.partial(`<svg
   width="20"
@@ -30,6 +31,53 @@ const chevronDown20Filled = html.partial(`<svg
   />
 </svg>`);
 
+export function accordionItemTemplate<T extends AccordionItem>(
+  options: AccordionItemOptions = {},
+): ElementViewTemplate<T> {
+  return html<T>`
+      <div
+          class="heading"
+          part="heading"
+          role="heading"
+          aria-level="${x => x.headinglevel}"
+      >
+          <button
+              class="button"
+              part="button"
+              ${ref('expandbutton')}
+              ?disabled="${x => (x.disabled ? 'true' : void 0)}"
+              aria-expanded="${x => x.expanded}"
+              aria-controls="${x => x.id}-panel"
+              id="${x => x.id}"
+              @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+          >
+              <span class="heading-content" part="heading-content">
+                  <slot name="heading"></slot>
+              </span>
+          </button>
+          ${startSlotTemplate(options)}
+          ${endSlotTemplate(options)}
+          <span class="icon" part="icon" aria-hidden="true">
+              <slot name="expanded-icon">
+                  ${staticallyCompose(options.expandedIcon)}
+              </slot>
+              <slot name="collapsed-icon">
+                  ${staticallyCompose(options.collapsedIcon)}
+              </slot>
+          <span>
+      </div>
+      <div
+          class="region"
+          part="region"
+          id="${x => x.id}-panel"
+          role="region"
+          aria-labelledby="${x => x.id}"
+      >
+          <slot></slot>
+      </div>
+`;
+}
+
 /**
  * The template for the fluent-accordion component.
  * @public
diff --git a/packages/web-components/src/accordion-item/accordion-item.ts b/packages/web-components/src/accordion-item/accordion-item.ts
index 3ef3e4b104eee6..0cb815af2f085d 100644
--- a/packages/web-components/src/accordion-item/accordion-item.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.ts
@@ -1,11 +1,84 @@
-import { attr } from '@microsoft/fast-element';
-import { FASTAccordionItem } from '@microsoft/fast-foundation/accordion-item.js';
+import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+import { uniqueId } from '@microsoft/fast-web-utilities';
+import type { StaticallyComposableHTML } from '../utils/index.js';
+import { StartEnd } from '../patterns/index.js';
+import type { StartEndOptions } from '../patterns/index.js';
+import { applyMixins } from '../utils/apply-mixins.js';
 import { AccordionItemExpandIconPosition, AccordionItemSize } from './accordion-item.options.js';
 
 /**
- * @internal
+ * Accordion Item configuration options
+ * @public
+ */
+export type AccordionItemOptions = StartEndOptions<AccordionItem> & {
+  expandedIcon?: StaticallyComposableHTML<AccordionItem>;
+  collapsedIcon?: StaticallyComposableHTML<AccordionItem>;
+};
+
+/**
+ *
+ * @slot start - Content which can be provided between the heading and the icon
+ * @slot end - Content which can be provided between the start slot and icon
+ * @slot heading - Content which serves as the accordion item heading and text of the expand button
+ * @slot - The default slot for accordion item content
+ * @slot expanded-icon - The expanded icon
+ * @slot collapsed-icon - The collapsed icon
+ * @fires change - Fires a custom 'change' event when the button is invoked
+ * @csspart heading - Wraps the button
+ * @csspart button - The button which serves to invoke the item
+ * @csspart heading-content - Wraps the slot for the heading content within the button
+ * @csspart icon - The icon container
+ * @csspart region - The wrapper for the accordion item content
+ *
+ * @public
  */
-export class AccordionItem extends FASTAccordionItem {
+export class AccordionItem extends FASTElement {
+  /**
+   * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
+   * heading element.
+   *
+   * @defaultValue 2
+   * @public
+   * @remarks
+   * HTML attribute: heading-level
+   */
+  @attr({
+    attribute: 'heading-level',
+    mode: 'fromView',
+    converter: nullableNumberConverter,
+  })
+  public headinglevel: 1 | 2 | 3 | 4 | 5 | 6 = 2;
+
+  /**
+   * Expands or collapses the item.
+   *
+   * @public
+   * @remarks
+   * HTML attribute: expanded
+   */
+  @attr({ mode: 'boolean' })
+  public expanded: boolean = false;
+
+  /**
+   * Disables an accordion item
+   *
+   * @public
+   * @remarks
+   * HTML attribute: disabled
+   */
+  @attr({ mode: 'boolean' })
+  public disabled: boolean = false;
+
+  /**
+   * The item ID
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: id
+   */
+  @attr
+  public id: string = uniqueId('accordion-');
+
   /**
    * Defines accordion header font size.
    *
@@ -37,4 +110,30 @@ export class AccordionItem extends FASTAccordionItem {
    */
   @attr({ attribute: 'expand-icon-position' })
   public expandIconPosition?: AccordionItemExpandIconPosition;
+
+  /**
+   * @internal
+   */
+  public expandbutton!: HTMLElement;
+
+  /**
+   * @internal
+   */
+  public clickHandler = (e: MouseEvent) => {
+    if (this.disabled) {
+      return;
+    }
+
+    this.$emit('click', e);
+  };
 }
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+export interface AccordionItem extends StartEnd {}
+applyMixins(AccordionItem, StartEnd);
diff --git a/packages/web-components/src/accordion/accordion.definition.ts b/packages/web-components/src/accordion/accordion.definition.ts
index aa47c704ae1a87..e8f3fc603ee366 100644
--- a/packages/web-components/src/accordion/accordion.definition.ts
+++ b/packages/web-components/src/accordion/accordion.definition.ts
@@ -4,10 +4,6 @@ import { styles } from './accordion.styles.js';
 import { template } from './accordion.template.js';
 
 /**
- * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
- * {@link @microsoft/fast-foundation#accordionTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-accordion\>
diff --git a/packages/web-components/src/accordion/accordion.options.ts b/packages/web-components/src/accordion/accordion.options.ts
new file mode 100644
index 00000000000000..0fc3656b44ca64
--- /dev/null
+++ b/packages/web-components/src/accordion/accordion.options.ts
@@ -0,0 +1,16 @@
+import type { ValuesOf } from '../utils/index.js';
+
+/**
+ * Expand mode for {@link FASTAccordion}
+ * @public
+ */
+export const AccordionExpandMode = {
+  single: 'single',
+  multi: 'multi',
+} as const;
+
+/**
+ * Type for the {@link FASTAccordion} Expand Mode
+ * @public
+ */
+export type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
diff --git a/packages/web-components/src/accordion/accordion.template.ts b/packages/web-components/src/accordion/accordion.template.ts
index bc7e767e698aab..2f181ac6c1456d 100644
--- a/packages/web-components/src/accordion/accordion.template.ts
+++ b/packages/web-components/src/accordion/accordion.template.ts
@@ -1,5 +1,15 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { accordionTemplate } from '@microsoft/fast-foundation/accordion.js';
+import { elements, ElementViewTemplate, html, slotted } from '@microsoft/fast-element';
 import type { Accordion } from './accordion.js';
 
+/**
+ * @public
+ */
+export function accordionTemplate<T extends Accordion>(): ElementViewTemplate<T> {
+  return html<T>`
+    <template>
+      <slot ${slotted({ property: 'slottedAccordionItems', filter: elements() })}></slot>
+    </template>
+  `;
+}
+
 export const template: ElementViewTemplate<Accordion> = accordionTemplate();
diff --git a/packages/web-components/src/accordion/accordion.ts b/packages/web-components/src/accordion/accordion.ts
index 15417111238886..9de8a8c59cad7a 100644
--- a/packages/web-components/src/accordion/accordion.ts
+++ b/packages/web-components/src/accordion/accordion.ts
@@ -1,7 +1,249 @@
-import { FASTAccordion } from '@microsoft/fast-foundation/accordion.js';
+import { Observable } from '@microsoft/fast-element';
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { keyArrowDown, keyArrowUp, keyEnd, keyHome, wrapInBounds } from '@microsoft/fast-web-utilities';
+import { AccordionItem } from '../accordion-item/accordion-item.js';
+import { AccordionExpandMode } from './accordion.options.js';
 
 /**
- * The base class used for constructing a fluent-accordion custom element
+ * An Accordion Custom HTML Element
+ * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
+ *
+ * @fires change - Fires a custom 'change' event when the active item changes
+ * @csspart item - The slot for the accordion items
  * @public
  */
-export class Accordion extends FASTAccordion {}
+export class Accordion extends FASTElement {
+  /**
+   * Controls the expand mode of the Accordion, either allowing
+   * single or multiple item expansion.
+   * @public
+   *
+   * @remarks
+   * HTML attribute: expand-mode
+   */
+  @attr({ attribute: 'expand-mode' })
+  public expandmode: AccordionExpandMode = AccordionExpandMode.multi;
+  public expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode) {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+
+    const expandedItem = this.findExpandedItem();
+
+    if (!expandedItem) {
+      return;
+    }
+
+    if (next !== AccordionExpandMode.single) {
+      (expandedItem as AccordionItem)?.expandbutton.removeAttribute('aria-disabled');
+    } else {
+      this.setSingleExpandMode(expandedItem);
+    }
+  }
+
+  /**
+   * @internal
+   */
+  @observable
+  public slottedAccordionItems!: HTMLElement[];
+
+  protected accordionItems!: Element[];
+
+  /**
+   * @internal
+   */
+  public slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
+    if (this.$fastController.isConnected) {
+      this.setItems();
+    }
+  }
+
+  /**
+   * @internal
+   */
+  public handleChange(source: any, propertyName: string) {
+    if (propertyName === 'disabled') {
+      this.setItems();
+    } else if (propertyName === 'expanded') {
+      // we only need to manage single expanded instances
+      // such as scenarios where a child is programatically expanded
+      if (source.expanded && this.isSingleExpandMode()) {
+        this.setSingleExpandMode(source);
+      }
+    }
+  }
+
+  private activeid!: string | null;
+  private activeItemIndex: number = 0;
+  private accordionIds!: Array<string | null>;
+
+  private change = (): void => {
+    this.$emit('change', this.activeid);
+  };
+
+  private findExpandedItem(): AccordionItem | Element | null {
+    if (this.accordionItems.length === 0) {
+      return null;
+    }
+
+    return (
+      this.accordionItems.find((item: Element | AccordionItem) => item instanceof AccordionItem && item.expanded) ??
+      this.accordionItems[0]
+    );
+  }
+
+  private setItems = (): void => {
+    if (this.slottedAccordionItems.length === 0) {
+      return;
+    }
+
+    const children: Element[] = Array.from(this.children);
+
+    this.removeItemListeners(children);
+
+    children.forEach((child: Element) => Observable.getNotifier(child).subscribe(this, 'disabled'));
+
+    this.accordionItems = children.filter(child => !child.hasAttribute('disabled'));
+
+    this.accordionIds = this.getItemIds();
+
+    this.accordionItems.forEach((item: Element, index: number) => {
+      if (item instanceof AccordionItem) {
+        item.addEventListener('click', this.activeItemChange);
+        item.addEventListener('keydown', this.handleItemKeyDown);
+        item.addEventListener('focus', this.handleItemFocus);
+        Observable.getNotifier(item).subscribe(this, 'expanded');
+      }
+
+      const itemId: string | null = this.accordionIds[index];
+      item.setAttribute('id', typeof itemId !== 'string' ? `accordion-${index + 1}` : itemId);
+      this.activeid = this.accordionIds[this.activeItemIndex] as string;
+    });
+
+    if (this.isSingleExpandMode()) {
+      const expandedItem = this.findExpandedItem() as AccordionItem;
+      this.setSingleExpandMode(expandedItem);
+    }
+  };
+
+  private setSingleExpandMode(expandedItem: Element): void {
+    if (this.accordionItems.length === 0) {
+      return;
+    }
+    const currentItems = Array.from(this.accordionItems);
+    this.activeItemIndex = currentItems.indexOf(expandedItem);
+
+    currentItems.forEach((item: Element, index: number) => {
+      if (item instanceof AccordionItem) {
+        if (this.activeItemIndex === index) {
+          item.expanded = true;
+          item.expandbutton.setAttribute('aria-disabled', 'true');
+        } else {
+          item.expanded = false;
+
+          if (!item.hasAttribute('disabled')) {
+            item.expandbutton.removeAttribute('aria-disabled');
+          }
+        }
+      }
+    });
+  }
+
+  private removeItemListeners = (oldValue: any): void => {
+    oldValue.forEach((item: HTMLElement, index: number) => {
+      Observable.getNotifier(item).unsubscribe(this, 'disabled');
+      Observable.getNotifier(item).unsubscribe(this, 'expanded');
+      item.removeEventListener('click', this.activeItemChange);
+      item.removeEventListener('keydown', this.handleItemKeyDown);
+      item.removeEventListener('focus', this.handleItemFocus);
+    });
+  };
+
+  private activeItemChange = (event: Event): void => {
+    if (event.defaultPrevented || event.target !== event.currentTarget) {
+      return;
+    }
+
+    event.preventDefault();
+
+    this.handleExpandedChange(event.target as HTMLElement);
+  };
+
+  private handleExpandedChange = (item: HTMLElement) => {
+    if (item instanceof AccordionItem) {
+      this.activeid = item.getAttribute('id');
+
+      if (!this.isSingleExpandMode()) {
+        item.expanded = !item.expanded;
+        // setSingleExpandMode sets activeItemIndex on its own
+        this.activeItemIndex = this.accordionItems.indexOf(item);
+      } else {
+        this.setSingleExpandMode(item);
+      }
+
+      this.change();
+    }
+  };
+
+  private getItemIds(): Array<string | null> {
+    return this.slottedAccordionItems.map((accordionItem: HTMLElement) => {
+      return accordionItem.id;
+    });
+  }
+
+  private isSingleExpandMode(): boolean {
+    return this.expandmode === AccordionExpandMode.single;
+  }
+
+  private handleItemKeyDown = (event: KeyboardEvent): void => {
+    // only handle the keydown if the event target is the accordion item
+    // prevents arrow keys from moving focus to accordion headers when focus is on accordion item panel content
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    this.accordionIds = this.getItemIds();
+    switch (event.key) {
+      case keyArrowUp:
+        event.preventDefault();
+        this.adjust(-1);
+        break;
+      case keyArrowDown:
+        event.preventDefault();
+        this.adjust(1);
+        break;
+      case keyHome:
+        this.activeItemIndex = 0;
+        this.focusItem();
+        break;
+      case keyEnd:
+        this.activeItemIndex = this.accordionItems.length - 1;
+        this.focusItem();
+        break;
+    }
+  };
+
+  private handleItemFocus = (event: FocusEvent): void => {
+    // update the active item index if the focus moves to an accordion item via a different method other than the up and down arrow key actions
+    // only do so if the focus is actually on the accordion item and not on any of its children
+    if (event.target === event.currentTarget) {
+      const focusedItem = event.target as HTMLElement;
+      const focusedIndex: number = (this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem));
+      if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
+        this.activeItemIndex = focusedIndex;
+        this.activeid = this.accordionIds[this.activeItemIndex] as string;
+      }
+    }
+  };
+
+  private adjust(adjustment: number): void {
+    this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
+    this.focusItem();
+  }
+
+  private focusItem(): void {
+    const element: Element = this.accordionItems[this.activeItemIndex];
+    if (element instanceof AccordionItem) {
+      element.expandbutton.focus();
+    }
+  }
+}
diff --git a/packages/web-components/src/anchor-button/anchor-button.definition.ts b/packages/web-components/src/anchor-button/anchor-button.definition.ts
index 9a76a726216de8..14f6561041e6c1 100644
--- a/packages/web-components/src/anchor-button/anchor-button.definition.ts
+++ b/packages/web-components/src/anchor-button/anchor-button.definition.ts
@@ -4,9 +4,6 @@ import { styles } from './anchor-button.styles.js';
 import { template } from './anchor-button.template.js';
 
 /**
- * The Fluent Anchor Button Element. Implements {@link @microsoft/fast-foundation#Anchor },
- * {@link @microsoft/fast-foundation#anchorTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-anchor-button\>
diff --git a/packages/web-components/src/anchor-button/anchor-button.options.ts b/packages/web-components/src/anchor-button/anchor-button.options.ts
index 43203acfd2b0da..12785a8ab21eef 100644
--- a/packages/web-components/src/anchor-button/anchor-button.options.ts
+++ b/packages/web-components/src/anchor-button/anchor-button.options.ts
@@ -1,6 +1,6 @@
-import type { AnchorOptions } from '@microsoft/fast-foundation/anchor.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';
+import type { ValuesOf } from '../utils/index.js';
+import type { AnchorOptions } from './anchor-button.js';
 
 /**
  * Anchor Button Appearance constants
@@ -39,3 +39,22 @@ export const AnchorButtonSize = ButtonSize;
 export type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
 
 export { AnchorOptions as AnchorButtonOptions };
+
+/**
+ * Anchor target values.
+ *
+ * @public
+ */
+export const AnchorTarget = {
+  _self: '_self',
+  _blank: '_blank',
+  _parent: '_parent',
+  _top: '_top',
+} as const;
+
+/**
+ * Type for anchor target values.
+ *
+ * @public
+ */
+export type AnchorTarget = ValuesOf<typeof AnchorTarget>;
diff --git a/packages/web-components/src/anchor-button/anchor-button.template.ts b/packages/web-components/src/anchor-button/anchor-button.template.ts
index abf13779af6d0e..015315a8eaffad 100644
--- a/packages/web-components/src/anchor-button/anchor-button.template.ts
+++ b/packages/web-components/src/anchor-button/anchor-button.template.ts
@@ -1,6 +1,54 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { anchorTemplate } from '@microsoft/fast-foundation/anchor.js';
-import type { AnchorButton } from './anchor-button.js';
+import { ElementViewTemplate, html, ref, slotted, ViewTemplate } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import type { AnchorButton, AnchorOptions } from './anchor-button.js';
+
+/**
+ * The template for the Button component.
+ * @public
+ */
+export function anchorTemplate<T extends AnchorButton>(options: AnchorOptions = {}): ViewTemplate<T> {
+  return html<T>`
+    <a
+      class="control"
+      part="control"
+      download="${x => x.download}"
+      href="${x => x.href}"
+      hreflang="${x => x.hreflang}"
+      ping="${x => x.ping}"
+      referrerpolicy="${x => x.referrerpolicy}"
+      rel="${x => x.rel}"
+      target="${x => x.target}"
+      type="${x => x.type}"
+      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-relevant="${x => x.ariaRelevant}"
+      aria-roledescription="${x => x.ariaRoledescription}"
+      ${ref('control')}
+    >
+      ${startSlotTemplate(options)}
+      <span class="content" part="content">
+        <slot ${slotted('defaultSlottedContent')}></slot>
+      </span>
+      ${endSlotTemplate(options)}
+    </a>
+  `;
+}
 
 /**
  * The template for the Button component.
diff --git a/packages/web-components/src/anchor-button/anchor-button.ts b/packages/web-components/src/anchor-button/anchor-button.ts
index 0fae967bbb6993..68c09787c5e017 100644
--- a/packages/web-components/src/anchor-button/anchor-button.ts
+++ b/packages/web-components/src/anchor-button/anchor-button.ts
@@ -1,12 +1,119 @@
-import { attr } from '@microsoft/fast-element';
-import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js';
-import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize } from './anchor-button.options.js';
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import type { StartEndOptions } from '../patterns/index.js';
+import { applyMixins } from '../utils/apply-mixins.js';
+import type {
+  AnchorButtonAppearance,
+  AnchorButtonShape,
+  AnchorButtonSize,
+  AnchorTarget,
+} from './anchor-button.options.js';
 
 /**
- * The base class used for constructing a fluent-anchor-button custom element
+ * Anchor configuration options
  * @public
  */
-export class AnchorButton extends FASTAnchor {
+export type AnchorOptions = StartEndOptions<AnchorButton>;
+
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
+ * @public
+ */
+export class AnchorButton extends FASTElement {
+  /**
+   * Prompts the user to save the linked URL. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: download
+   */
+  @attr
+  public download!: string;
+
+  /**
+   * The URL the hyperlink references. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: href
+   */
+  @attr
+  public href!: string;
+
+  /**
+   * Hints at the language of the referenced resource. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: hreflang
+   */
+  @attr
+  public hreflang!: string;
+
+  /**
+   * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: ping
+   */
+  @attr
+  public ping!: string;
+
+  /**
+   * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: referrerpolicy
+   */
+  @attr
+  public referrerpolicy!: string;
+
+  /**
+   * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: rel
+   */
+  @attr
+  public rel!: string;
+
+  /**
+   * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: target
+   */
+  @attr
+  public target!: AnchorTarget;
+
+  /**
+   * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: type
+   */
+  @attr
+  public type!: string;
+
+  /**
+   *
+   * Default slotted content
+   *
+   * @internal
+   */
+  @observable
+  public defaultSlottedContent!: HTMLElement[];
+
+  /**
+   * References the root element
+   */
+  public control!: HTMLAnchorElement;
+
   /**
    * The appearance the anchor button should have.
    *
@@ -109,3 +216,39 @@ export class AnchorButton extends FASTAnchor {
     ((this as unknown) as HTMLElement).removeEventListener('click', this.handleDisabledFocusableClick);
   }
 }
+
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+export class DelegatesARIALink {
+  /**
+   * See {@link https://www.w3.org/WAI/PF/aria/roles#link} for more information
+   * @public
+   * @remarks
+   * HTML Attribute: aria-expanded
+   */
+  @attr({ attribute: 'aria-expanded' })
+  public ariaExpanded!: 'true' | 'false' | 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
+ */
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {}
+applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+export interface AnchorButton extends StartEnd, DelegatesARIALink {}
+applyMixins(AnchorButton, StartEnd, DelegatesARIALink);
diff --git a/packages/web-components/src/avatar/avatar.options.ts b/packages/web-components/src/avatar/avatar.options.ts
index 2bbaa8b6b5ad20..1907e1a6bd9e01 100644
--- a/packages/web-components/src/avatar/avatar.options.ts
+++ b/packages/web-components/src/avatar/avatar.options.ts
@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * The Avatar "active" state
diff --git a/packages/web-components/src/badge/badge.definition.ts b/packages/web-components/src/badge/badge.definition.ts
index f15da6d05174f5..8996056d36563d 100644
--- a/packages/web-components/src/badge/badge.definition.ts
+++ b/packages/web-components/src/badge/badge.definition.ts
@@ -4,9 +4,6 @@ import { styles } from './badge.styles.js';
 import { template } from './badge.template.js';
 
 /**
- * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
  *
  * @public
  * @remarks
diff --git a/packages/web-components/src/badge/badge.options.ts b/packages/web-components/src/badge/badge.options.ts
index 52562f453dc569..81bae07d0bdb30 100644
--- a/packages/web-components/src/badge/badge.options.ts
+++ b/packages/web-components/src/badge/badge.options.ts
@@ -1,5 +1,5 @@
-import { StartEndOptions } from '@microsoft/fast-foundation/patterns.js';
-import type { StaticallyComposableHTML, ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import { StartEndOptions } from '../patterns/index.js';
+import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
 import type { Badge } from './badge.js';
 
 /**
diff --git a/packages/web-components/src/badge/badge.template.ts b/packages/web-components/src/badge/badge.template.ts
index d73589bec0e3b9..6480f25b890699 100644
--- a/packages/web-components/src/badge/badge.template.ts
+++ b/packages/web-components/src/badge/badge.template.ts
@@ -1,6 +1,6 @@
 import { ElementViewTemplate, html } from '@microsoft/fast-element';
-import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation/patterns.js';
-import { staticallyCompose } from '@microsoft/fast-foundation/utilities.js';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { staticallyCompose } from '../utils/template-helpers.js';
 import type { Badge } from './badge.js';
 import type { BadgeOptions } from './badge.options.js';
 
diff --git a/packages/web-components/src/badge/badge.ts b/packages/web-components/src/badge/badge.ts
index 67163d66652bb2..cca5925e1c5ad9 100644
--- a/packages/web-components/src/badge/badge.ts
+++ b/packages/web-components/src/badge/badge.ts
@@ -1,7 +1,7 @@
 import { attr, FASTElement } from '@microsoft/fast-element';
-import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
 // TODO: Remove with https://github.com/microsoft/fast/pull/6797
 import { applyMixins } from '../utils/apply-mixins.js';
+import { StartEnd } from '../patterns/index.js';
 import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
 
 /**
diff --git a/packages/web-components/src/button/button.definition.ts b/packages/web-components/src/button/button.definition.ts
index dad785060b687b..84cb52407ea988 100644
--- a/packages/web-components/src/button/button.definition.ts
+++ b/packages/web-components/src/button/button.definition.ts
@@ -4,9 +4,6 @@ import { styles } from './button.styles.js';
 import { template } from './button.template.js';
 
 /**
- * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-button\>
diff --git a/packages/web-components/src/button/button.form-associated.ts b/packages/web-components/src/button/button.form-associated.ts
new file mode 100644
index 00000000000000..718a2cccb0c609
--- /dev/null
+++ b/packages/web-components/src/button/button.form-associated.ts
@@ -0,0 +1,13 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+
+class _Button extends FASTElement {}
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+interface _Button extends FormAssociated {}
+
+/**
+ * @beta
+ */
+export class FormAssociatedButton extends FormAssociated(_Button) {
+  proxy = document.createElement('input');
+}
diff --git a/packages/web-components/src/button/button.options.ts b/packages/web-components/src/button/button.options.ts
index 0e89d77ce3988b..5a265819ffe32f 100644
--- a/packages/web-components/src/button/button.options.ts
+++ b/packages/web-components/src/button/button.options.ts
@@ -1,5 +1,6 @@
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import { StartEndOptions } from '../patterns/index.js';
+import type { ValuesOf } from '../utils/index.js';
+import type { Button } from './button.js';
 
 /**
  * ButtonAppearance constants
@@ -51,4 +52,26 @@ export const ButtonSize = {
  */
 export type ButtonSize = ValuesOf<typeof ButtonSize>;
 
-export { ButtonOptions };
+/**
+ * Button type values.
+ *
+ * @public
+ */
+export const ButtonType = {
+  submit: 'submit',
+  reset: 'reset',
+  button: 'button',
+} as const;
+
+/**
+ * Type for button type values.
+ *
+ * @public
+ */
+export type ButtonType = ValuesOf<typeof ButtonType>;
+
+/**
+ * Button configuration options
+ * @public
+ */
+export type ButtonOptions = StartEndOptions<Button>;
diff --git a/packages/web-components/src/button/button.template.ts b/packages/web-components/src/button/button.template.ts
index 71bfb2b96e4888..4ce2e2e5d3d3cd 100644
--- a/packages/web-components/src/button/button.template.ts
+++ b/packages/web-components/src/button/button.template.ts
@@ -1,9 +1,58 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { buttonTemplate } from '@microsoft/fast-foundation/button.js';
+import { ElementViewTemplate, html, ref, slotted } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
 import type { Button } from './button.js';
+import { ButtonOptions } from './button.options.js';
 
 /**
  * The template for the Button component.
  * @public
  */
+export function buttonTemplate<T extends Button>(options: ButtonOptions = {}): ElementViewTemplate<T> {
+  return html<T>`
+    <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')}
+    >
+      ${startSlotTemplate(options)}
+      <span class="content" part="content">
+        <slot ${slotted('defaultSlottedContent')}></slot>
+      </span>
+      ${endSlotTemplate(options)}
+    </button>
+  `;
+}
+
 export const template: ElementViewTemplate<Button> = buttonTemplate();
diff --git a/packages/web-components/src/button/button.ts b/packages/web-components/src/button/button.ts
index cadbe742cb7472..b0911bad0ac73d 100644
--- a/packages/web-components/src/button/button.ts
+++ b/packages/web-components/src/button/button.ts
@@ -1,12 +1,137 @@
-import { attr } from '@microsoft/fast-element';
-import { FASTButton } from '@microsoft/fast-foundation/button.js';
-import { ButtonAppearance, ButtonShape, ButtonSize } from './button.options.js';
+import { attr, observable } from '@microsoft/fast-element';
+import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import { applyMixins } from '../utils/apply-mixins.js';
+import { FormAssociatedButton } from './button.form-associated.js';
+import { ButtonAppearance, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
 
 /**
- * The base class used for constructing a fluent-button custom element
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart control - The button element
+ * @csspart content - The element wrapping button content
+ *
  * @public
  */
-export class Button extends FASTButton {
+export class Button extends FormAssociatedButton {
+  /**
+   * Determines if the element should receive document focus on page load.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: autofocus
+   */
+  @attr({ mode: 'boolean' })
+  public autofocus!: boolean;
+
+  /**
+   * The id of a form to associate the element to.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: form
+   */
+  @attr({ attribute: 'form' })
+  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
+  public formaction!: string;
+  protected 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
+  public formenctype!: string;
+  protected 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
+  public formmethod!: string;
+  protected 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' })
+  public formnovalidate!: boolean;
+  protected 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
+  public formtarget!: '_self' | '_blank' | '_parent' | '_top';
+  protected formtargetChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formTarget = this.formtarget;
+    }
+  }
+
+  /**
+   * The button type.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: type
+   */
+  @attr
+  public type!: ButtonType;
+  protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.type = this.type;
+    }
+
+    next === ButtonType.submit && this.addEventListener('click', this.handleSubmission);
+    previous === ButtonType.submit && this.removeEventListener('click', this.handleSubmission);
+    next === ButtonType.reset && this.addEventListener('click', this.handleFormReset);
+    previous === ButtonType.reset && this.removeEventListener('click', this.handleFormReset);
+  }
+
   /**
    * The appearance the button should have.
    *
@@ -78,9 +203,28 @@ export class Button extends FASTButton {
     }
   };
 
+  /**
+   *
+   * Default slotted content
+   *
+   * @public
+   * @remarks
+   */
+  @observable
+  public defaultSlottedContent!: HTMLElement[];
+
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+  public validate(): void {
+    super.validate(this.control);
+  }
+
+  /**
+   * @internal
+   */
   public connectedCallback(): void {
     super.connectedCallback();
 
+    this.proxy.setAttribute('type', this.type);
     ((this as unknown) as HTMLElement).addEventListener('click', this.handleDisabledFocusableClick);
   }
 
@@ -89,4 +233,81 @@ export class Button extends FASTButton {
 
     ((this as unknown) as HTMLElement).removeEventListener('click', this.handleDisabledFocusableClick);
   }
+
+  /**
+   * Submits the parent form
+   */
+  private handleSubmission = () => {
+    if (!this.form) {
+      return;
+    }
+
+    const attached = this.proxy.isConnected;
+
+    if (!attached) {
+      this.attachProxy();
+    }
+
+    // Browser support for requestSubmit is not comprehensive
+    // so click the proxy if it isn't supported
+    typeof this.form.requestSubmit === 'function' ? this.form.requestSubmit(this.proxy) : this.proxy.click();
+
+    if (!attached) {
+      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' })
+  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' })
+  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
+ */
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+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
+ */
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+export interface Button extends StartEnd, DelegatesARIAButton {}
+applyMixins(Button, StartEnd, DelegatesARIAButton);
diff --git a/packages/web-components/src/checkbox/checkbox.form-associated.ts b/packages/web-components/src/checkbox/checkbox.form-associated.ts
new file mode 100644
index 00000000000000..5b23a4bf46021e
--- /dev/null
+++ b/packages/web-components/src/checkbox/checkbox.form-associated.ts
@@ -0,0 +1,13 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { CheckableFormAssociated } from '../form-associated/form-associated.js';
+
+class _Checkbox extends FASTElement {}
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+interface _Checkbox extends CheckableFormAssociated {}
+
+/**
+ * @beta
+ */
+export class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
+  proxy = document.createElement('input');
+}
diff --git a/packages/web-components/src/checkbox/checkbox.options.ts b/packages/web-components/src/checkbox/checkbox.options.ts
index bb91f525e77be1..5396c6a2041294 100644
--- a/packages/web-components/src/checkbox/checkbox.options.ts
+++ b/packages/web-components/src/checkbox/checkbox.options.ts
@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * Checkbox shape
diff --git a/packages/web-components/src/checkbox/checkbox.template.ts b/packages/web-components/src/checkbox/checkbox.template.ts
index ce36de3bb8aaab..237f14228f49fe 100644
--- a/packages/web-components/src/checkbox/checkbox.template.ts
+++ b/packages/web-components/src/checkbox/checkbox.template.ts
@@ -1,15 +1,14 @@
-import { ElementViewTemplate, html } from '@microsoft/fast-element';
-import { checkboxTemplate } from '@microsoft/fast-foundation/checkbox.js';
-
-import type { Checkbox } from './checkbox.js';
+import { ElementViewTemplate, html, slotted } from '@microsoft/fast-element';
+import { staticallyCompose } from '../utils/index.js';
+import type { Checkbox, CheckboxOptions } from './checkbox.js';
 
 const checkedIndicator = html.partial(`
     <div class="checked-indicator">
-        <svg fill="currentColor" 
-            aria-hidden="true" 
-            width="1em" 
-            height="1em" 
-            viewBox="0 0 12 12" 
+        <svg fill="currentColor"
+            aria-hidden="true"
+            width="1em"
+            height="1em"
+            viewBox="0 0 12 12"
             xmlns="http://www.w3.org/2000/svg">
                 <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor">
                 </path>
@@ -21,6 +20,35 @@ const indeterminateIndicator = html.partial(`
     <div class="indeterminate-indicator"></div>
 `);
 
+/**
+ * Template for the Checkbox component
+ * @public
+ */
+export function checkboxTemplate<T extends Checkbox>(options: CheckboxOptions = {}): ElementViewTemplate<T> {
+  return html<T>`
+    <template
+      role="checkbox"
+      aria-checked="${x => (x.indeterminate ? 'mixed' : x.checked)}"
+      aria-required="${x => x.required}"
+      aria-disabled="${x => x.disabled}"
+      tabindex="${x => (x.disabled ? null : 0)}"
+      @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
+      @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+    >
+      <div part="control" class="control">
+        <slot name="checked-indicator"> ${staticallyCompose(options.checkedIndicator)} </slot>
+        <slot name="indeterminate-indicator"> ${staticallyCompose(options.indeterminateIndicator)} </slot>
+      </div>
+      <label
+        part="label"
+        class="${x => (x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden')}"
+      >
+        <slot ${slotted('defaultSlottedNodes')}></slot>
+      </label>
+    </template>
+  `;
+}
+
 /**
  * Template for the Checkbox component
  * @public
diff --git a/packages/web-components/src/checkbox/checkbox.ts b/packages/web-components/src/checkbox/checkbox.ts
index 1cd35fd3806b44..d3cdd156ac9b8f 100644
--- a/packages/web-components/src/checkbox/checkbox.ts
+++ b/packages/web-components/src/checkbox/checkbox.ts
@@ -1,12 +1,32 @@
-import { attr } from '@microsoft/fast-element';
-import { FASTCheckbox } from '@microsoft/fast-foundation/checkbox.js';
+import { attr, observable } from '@microsoft/fast-element';
+import { keySpace } from '@microsoft/fast-web-utilities';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import { FormAssociatedCheckbox } from './checkbox.form-associated.js';
 import { CheckboxLabelPosition, CheckboxShape, CheckboxSize } from './checkbox.options.js';
 
 /**
- * The base class used for constucting a fluent checkbox custom element
+ * Checkbox configuration options
  * @public
  */
-export class Checkbox extends FASTCheckbox {
+export type CheckboxOptions = {
+  checkedIndicator?: StaticallyComposableHTML<Checkbox>;
+  indeterminateIndicator?: StaticallyComposableHTML<Checkbox>;
+};
+
+/**
+ * A Checkbox Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot indeterminate-indicator - The indeterminate indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual checkbox control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export class Checkbox extends FormAssociatedCheckbox {
   /**
    * Sets shape of the checkbox.
    *
@@ -39,4 +59,60 @@ export class Checkbox extends FASTCheckbox {
    */
   @attr({ attribute: 'label-position' })
   public labelPosition?: CheckboxLabelPosition;
+  /**
+   * The element's value to be included in form submission when checked.
+   * Default to "on" to reach parity with input[type="checkbox"]
+   *
+   * @internal
+   */
+  public initialValue: string = 'on';
+
+  /**
+   * @internal
+   */
+  @observable
+  public defaultSlottedNodes!: Node[];
+
+  /**
+   * The indeterminate state of the control
+   */
+  @observable
+  public indeterminate: boolean = false;
+
+  constructor() {
+    super();
+
+    this.proxy.setAttribute('type', 'checkbox');
+  }
+
+  private toggleChecked() {
+    if (this.indeterminate) {
+      this.indeterminate = false;
+    }
+    this.checked = !this.checked;
+  }
+
+  /**
+   * @internal
+   */
+  public keypressHandler = (e: KeyboardEvent): void => {
+    if (this.disabled) {
+      return;
+    }
+
+    switch (e.key) {
+      case keySpace:
+        this.toggleChecked();
+        break;
+    }
+  };
+
+  /**
+   * @internal
+   */
+  public clickHandler = (e: MouseEvent): void => {
+    if (!this.disabled) {
+      this.toggleChecked();
+    }
+  };
 }
diff --git a/packages/web-components/src/compound-button/compound-button.definition.ts b/packages/web-components/src/compound-button/compound-button.definition.ts
index cec288120c4da2..f7456ef8ad5517 100644
--- a/packages/web-components/src/compound-button/compound-button.definition.ts
+++ b/packages/web-components/src/compound-button/compound-button.definition.ts
@@ -4,9 +4,6 @@ import { styles } from './compound-button.styles.js';
 import { template } from './compound-button.template.js';
 
 /**
- * The Fluent Compound Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-comopund-button\>
diff --git a/packages/web-components/src/compound-button/compound-button.options.ts b/packages/web-components/src/compound-button/compound-button.options.ts
index c0295f58bc16e0..79237e66a90cc9 100644
--- a/packages/web-components/src/compound-button/compound-button.options.ts
+++ b/packages/web-components/src/compound-button/compound-button.options.ts
@@ -1,6 +1,6 @@
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';
+import type { ButtonOptions } from '../button/button.options.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * Compound Button Appearance constants
diff --git a/packages/web-components/src/compound-button/compound-button.template.ts b/packages/web-components/src/compound-button/compound-button.template.ts
index aac32807e936c1..8cfb72117a012f 100644
--- a/packages/web-components/src/compound-button/compound-button.template.ts
+++ b/packages/web-components/src/compound-button/compound-button.template.ts
@@ -1,5 +1,5 @@
 import { ElementViewTemplate, html, ref, slotted } from '@microsoft/fast-element';
-import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation/patterns.js';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
 import type { CompoundButton } from './compound-button.js';
 import type { CompoundButtonOptions } from './compound-button.options.js';
 
diff --git a/packages/web-components/src/counter-badge/counter-badge.definition.ts b/packages/web-components/src/counter-badge/counter-badge.definition.ts
index 2520d85972b6d7..177e028b8ee102 100644
--- a/packages/web-components/src/counter-badge/counter-badge.definition.ts
+++ b/packages/web-components/src/counter-badge/counter-badge.definition.ts
@@ -4,10 +4,6 @@ import { styles } from './counter-badge.styles.js';
 import { template } from './counter-badge.template.js';
 
 /**
- * The Fluent CounterBadge Element. Implements {@link @microsoft/fast-foundation#Badge },
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-counter-badge\>
diff --git a/packages/web-components/src/counter-badge/counter-badge.options.ts b/packages/web-components/src/counter-badge/counter-badge.options.ts
index da5e35882920df..3045d52e75c9f1 100644
--- a/packages/web-components/src/counter-badge/counter-badge.options.ts
+++ b/packages/web-components/src/counter-badge/counter-badge.options.ts
@@ -1,5 +1,5 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 import { BadgeOptions } from '../badge/badge.options.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * CounterBadge options
diff --git a/packages/web-components/src/counter-badge/counter-badge.ts b/packages/web-components/src/counter-badge/counter-badge.ts
index 8defcf3c1dd3e1..5d1de44cc7920f 100644
--- a/packages/web-components/src/counter-badge/counter-badge.ts
+++ b/packages/web-components/src/counter-badge/counter-badge.ts
@@ -1,7 +1,7 @@
 import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
-import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
 // TODO: Remove with https://github.com/microsoft/fast/pull/6797
 import { applyMixins } from '../utils/apply-mixins.js';
+import { StartEnd } from '../patterns/index.js';
 import {
   CounterBadgeAppearance,
   CounterBadgeColor,
diff --git a/packages/web-components/src/dialog/dialog.options.ts b/packages/web-components/src/dialog/dialog.options.ts
index d2e3dc39941b18..d6020b649da935 100644
--- a/packages/web-components/src/dialog/dialog.options.ts
+++ b/packages/web-components/src/dialog/dialog.options.ts
@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * Dialog modal type
diff --git a/packages/web-components/src/divider/divider.options.ts b/packages/web-components/src/divider/divider.options.ts
index 3c99fec1f66f16..c537eeab5b92c5 100644
--- a/packages/web-components/src/divider/divider.options.ts
+++ b/packages/web-components/src/divider/divider.options.ts
@@ -1,17 +1,39 @@
-import { DividerOrientation, DividerRole } from '@microsoft/fast-foundation/divider.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import { Orientation } from '@microsoft/fast-web-utilities';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
- * Fast Foundation DividerRole property
+ * Divider roles
  * @public
  */
-export { DividerRole };
+export const DividerRole = {
+  /**
+   * The divider semantically separates content
+   */
+  separator: 'separator',
+
+  /**
+   * The divider has no semantic value and is for visual presentation only.
+   */
+  presentation: 'presentation',
+} as const;
+
+/**
+ * The types for Divider roles
+ * @public
+ */
+export type DividerRole = ValuesOf<typeof DividerRole>;
+
+/**
+ * Divider orientation
+ * @public
+ */
+export const DividerOrientation = Orientation;
 
 /**
- * Fast Foundation Orientation property
+ * The types for Divider orientation
  * @public
  */
-export { DividerOrientation };
+export type DividerOrientation = ValuesOf<typeof DividerOrientation>;
 
 /**
  * Align content within divider
diff --git a/packages/web-components/src/divider/divider.template.ts b/packages/web-components/src/divider/divider.template.ts
index 7b49da9e640e2b..a3ee06279b0673 100644
--- a/packages/web-components/src/divider/divider.template.ts
+++ b/packages/web-components/src/divider/divider.template.ts
@@ -1,6 +1,17 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { dividerTemplate } from '@microsoft/fast-foundation/divider.js';
+import { ElementViewTemplate, html } from '@microsoft/fast-element';
 import type { Divider } from './divider.js';
+import { DividerRole } from './divider.options.js';
+
+export function dividerTemplate<T extends Divider>(): ElementViewTemplate<T> {
+  return html<T>`
+    <template
+      role="${x => x.role}"
+      aria-orientation="${x => (x.role !== DividerRole.presentation ? x.orientation : void 0)}"
+    >
+      <slot></slot>
+    </template>
+  `;
+}
 
 /**
  * Template for the Divider component
diff --git a/packages/web-components/src/divider/divider.ts b/packages/web-components/src/divider/divider.ts
index 80cba29de0890d..fecf57fc14e738 100644
--- a/packages/web-components/src/divider/divider.ts
+++ b/packages/web-components/src/divider/divider.ts
@@ -1,14 +1,33 @@
-import { attr } from '@microsoft/fast-element';
-import { FASTDivider } from '@microsoft/fast-foundation/divider.js';
-import { DividerAlignContent, DividerAppearance } from './divider.options.js';
+import { attr, FASTElement } from '@microsoft/fast-element';
+import { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole } from './divider.options.js';
 
 /**
  * @class Divider component
  *
  * @remarks
- * This class extends the FASTDivider. A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
+ * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
  */
-export class Divider extends FASTDivider {
+export class Divider extends FASTElement {
+  /**
+   * The role of the element.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: role
+   */
+  @attr
+  public role: DividerRole = DividerRole.separator;
+
+  /**
+   * The orientation of the divider.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: orientation
+   */
+  @attr
+  public orientation: DividerOrientation = DividerOrientation.horizontal;
+
   /**
    * @property alignContent
    * @default center
diff --git a/packages/web-components/src/form-associated/form-associated.ts b/packages/web-components/src/form-associated/form-associated.ts
new file mode 100644
index 00000000000000..16f33b7d46c7b9
--- /dev/null
+++ b/packages/web-components/src/form-associated/form-associated.ts
@@ -0,0 +1,757 @@
+import { attr, booleanConverter, emptyArray, observable, Updates } from '@microsoft/fast-element';
+import type { Constructable, FASTElement } from '@microsoft/fast-element';
+import { keyEnter } from '@microsoft/fast-web-utilities';
+
+/**
+ * This file enables typing support for ElementInternals APIs.
+ * It is largely taken from https://github.com/microsoft/TSJS-lib-generator/pull/818/files.
+ *
+ * When TypeScript adds support for these APIs we can delete this file.
+ */
+
+interface ValidityStateFlags {
+  badInput?: boolean;
+  customError?: boolean;
+  patternMismatch?: boolean;
+  rangeOverflow?: boolean;
+  rangeUnderflow?: boolean;
+  stepMismatch?: boolean;
+  tooLong?: boolean;
+  tooShort?: boolean;
+  typeMismatch?: boolean;
+  valueMissing?: boolean;
+}
+
+/**
+ * Source:
+ * https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals
+ */
+interface ElementInternals {
+  /**
+   * Returns the form owner of internals target element.
+   */
+  readonly form: HTMLFormElement | null;
+  /**
+   * Returns a NodeList of all the label elements that internals target element is associated with.
+   */
+  readonly labels: NodeList;
+  /**
+   * Returns the error message that would be shown to the user if internals target element was to be checked for validity.
+   */
+  readonly validationMessage: string;
+  /**
+   * Returns the ValidityState object for internals target element.
+   */
+  readonly validity: ValidityState;
+  /**
+   * Returns true if internals target element will be validated when the form is submitted; false otherwise.
+   */
+  readonly willValidate: boolean;
+  /**
+   * Returns true if internals target element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.
+   */
+  checkValidity(): boolean;
+  /**
+   * Returns true if internals target element has no validity problems; otherwise,
+   * returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.
+   */
+  reportValidity(): boolean;
+  /**
+   * Sets both the state and submission value of internals target element to value.
+   *
+   * While "null" isn't enumerated as a argument type (here)[https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface],
+   * In practice it appears to remove the value from the form data on submission. Adding it as a valid type here
+   * becuase that capability is required for checkbox and radio types
+   */
+  setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+  /**
+   * Marks internals target element as suffering from the constraints indicated by the flags argument,
+   * and sets the element's validation message to message.
+   * If anchor is specified, the user agent might use
+   * it to indicate problems with the constraints of internals target
+   * element when the form owner is validated interactively or reportValidity() is called.
+   */
+  setValidity(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+}
+
+declare let ElementInternals: {
+  prototype: ElementInternals;
+  new (): ElementInternals;
+};
+
+const proxySlotName = 'form-associated-proxy';
+
+const ElementInternalsKey = 'ElementInternals';
+/**
+ * @alpha
+ */
+export const supportsElementInternals =
+  ElementInternalsKey in window && 'setFormValue' in window[ElementInternalsKey].prototype;
+
+const InternalsMap = new WeakMap();
+
+/**
+ * Base class for providing Custom Element Form Association.
+ *
+ * @beta
+ */
+export interface FormAssociated extends Omit<ElementInternals, 'labels'> {
+  dirtyValue: boolean;
+  disabled: boolean;
+  readonly elementInternals: ElementInternals | null;
+  readonly formAssociated: boolean;
+  initialValue: string;
+  readonly labels: ReadonlyArray<Node[]>;
+  name: string;
+  required: boolean;
+  value: string;
+  currentValue: string;
+  attachProxy(): void;
+  detachProxy(): void;
+  disabledChanged?(previous: boolean, next: boolean): void;
+  formDisabledCallback?(disabled: boolean): void;
+  formResetCallback(): void;
+  initialValueChanged?(previous: string, next: string): void;
+  nameChanged?(previous: string, next: string): void;
+  requiredChanged(prev: boolean, next: boolean): void;
+  stopPropagation(e: Event): void;
+
+  /**
+   * Sets the validity of the custom element. By default this uses the proxy element to determine
+   * validity, but this can be extended or replaced in implementation.
+   *
+   * @param anchor - The anchor element to provide to ElementInternals.setValidity for surfacing the browser's constraint validation UI
+   */
+  validate(anchor?: HTMLElement): void;
+  valueChanged(previous: string, next: string): void;
+}
+
+/**
+ * Base class for providing Custom Element Form Association with checkable features.
+ *
+ * @beta
+ */
+export interface CheckableFormAssociated extends FormAssociated {
+  currentChecked: boolean;
+  dirtyChecked: boolean;
+  checkedAttribute: boolean;
+  defaultChecked: boolean;
+  defaultCheckedChanged(oldValue: boolean | undefined, newValue: boolean): void;
+  checked: boolean;
+  checkedChanged(oldValue: boolean | undefined, newValue: boolean): void;
+}
+
+/**
+ * Avaiable types for the `proxy` property.
+ * @beta
+ */
+export type ProxyElement = HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement;
+
+/**
+ * Identifies a class as having a proxy element and optional submethods related
+ * to the proxy element.
+ *
+ * @beta
+ */
+export interface FormAssociatedProxy {
+  proxy: ProxyElement;
+  disabledChanged?(previous: boolean, next: boolean): void;
+  formDisabledCallback?(disabled: boolean): void;
+  formResetCallback?(): void;
+  initialValueChanged?(previous: string, next: string): void;
+  valueChanged?(previous: string, next: string): void;
+  nameChanged?(previous: string, next: string): void;
+}
+
+/**
+ * Combined type to describe a Form-associated element.
+ *
+ * @beta
+ */
+export type FormAssociatedElement = FormAssociated & FASTElement & HTMLElement & FormAssociatedProxy;
+
+/**
+ * Combined type to describe a checkable Form-associated element.
+ *
+ * @beta
+ */
+export type CheckableFormAssociatedElement = FormAssociatedElement &
+  CheckableFormAssociated & { proxy: HTMLInputElement };
+
+/**
+ * Combined type to describe a Constructable Form-Associated type.
+ *
+ * @beta
+ */
+export type ConstructableFormAssociated = Constructable<HTMLElement & FASTElement>;
+
+/**
+ * Base function for providing Custom Element Form Association.
+ *
+ * @beta
+ */
+export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T {
+  const C = class extends BaseCtor {
+    /**
+     * The proxy element - this element serves as the communication layer with the parent form
+     * when form association is not supported by the browser.
+     *
+     * @beta
+     */
+    public proxy!: ProxyElement;
+
+    /**
+     * Must evaluate to true to enable elementInternals.
+     * Feature detects API support and resolve respectively
+     *
+     * @internal
+     */
+    public static get formAssociated(): boolean {
+      return supportsElementInternals;
+    }
+
+    /**
+     * Returns the validity state of the element
+     *
+     * @beta
+     */
+    public get validity(): ValidityState {
+      return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
+    }
+
+    /**
+     * Retrieve a reference to the associated form.
+     * Returns null if not associated to any form.
+     *
+     * @beta
+     */
+    public get form(): HTMLFormElement | null {
+      return this.elementInternals ? this.elementInternals.form : this.proxy.form;
+    }
+
+    /**
+     * Retrieve the localized validation message,
+     * or custom validation message if set.
+     *
+     * @beta
+     */
+    public get validationMessage(): string {
+      return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
+    }
+
+    /**
+     * Whether the element will be validated when the
+     * form is submitted
+     */
+    public get willValidate(): boolean {
+      return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
+    }
+
+    /**
+     * A reference to all associated label elements
+     */
+    public get labels(): ReadonlyArray<Node> {
+      if (this.elementInternals) {
+        return Object.freeze(Array.from(this.elementInternals.labels));
+      } else if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {
+        // Labels associated by wrapping the element: <label><custom-element></custom-element></label>
+        const parentLabels = this.proxy.labels;
+        // Labels associated using the `for` attribute
+        const forLabels = Array.from(
+          (this.proxy.getRootNode() as HTMLDocument | ShadowRoot).querySelectorAll(`[for='${this.id}']`),
+        );
+
+        const labels = parentLabels ? forLabels.concat(Array.from(parentLabels)) : forLabels;
+
+        return Object.freeze(labels);
+      } else {
+        return emptyArray;
+      }
+    }
+
+    /**
+     * Track whether the value has been changed from the initial value
+     */
+    public dirtyValue: boolean = false;
+
+    /**
+     * Stores a reference to the slot element that holds the proxy
+     * element when it is appended.
+     */
+    private proxySlot!: HTMLSlotElement | void;
+
+    /**
+     * The value of the element to be associated with the form.
+     */
+    public value!: string;
+
+    /**
+     * Invoked when the `value` property changes
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `valueChanged` method
+     * They must be sure to invoke `super.valueChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    public valueChanged(previous: string, next: string) {
+      this.dirtyValue = true;
+
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.value = this.value;
+      }
+
+      this.currentValue = this.value;
+
+      this.setFormValue(this.value);
+      this.validate();
+    }
+
+    /**
+     * The current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    public currentValue!: string;
+    public currentValueChanged() {
+      this.value = this.currentValue;
+    }
+
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     *
+     * @remarks
+     * HTML Attribute: value
+     */
+    public initialValue: string = '';
+
+    /**
+     * Invoked when the `initialValue` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `initialValueChanged` method
+     * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    public initialValueChanged(previous: string, next: string): void {
+      // If the value is clean and the component is connected to the DOM
+      // then set value equal to the attribute value.
+      if (!this.dirtyValue) {
+        this.value = this.initialValue;
+        this.dirtyValue = false;
+      }
+    }
+
+    /**
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     *
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    public disabled: boolean = false;
+
+    /**
+     * Invoked when the `disabled` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `disabledChanged` method
+     * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    public disabledChanged(previous: boolean, next: boolean): void {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.disabled = this.disabled;
+      }
+
+      Updates.enqueue(() => this.classList.toggle('disabled', this.disabled));
+    }
+
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     *
+     * @remarks
+     * HTML Attribute: name
+     */
+    public name!: string;
+
+    /**
+     * Invoked when the `name` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `nameChanged` method
+     * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    public nameChanged(previous: string, next: string): void {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.name = this.name;
+      }
+    }
+
+    /**
+     * Require the field to be completed prior to form submission.
+     *
+     * @remarks
+     * HTML Attribute: required
+     */
+    public required: boolean;
+
+    /**
+     * Invoked when the `required` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `requiredChanged` method
+     * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    public requiredChanged(prev: boolean, next: boolean): void {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.required = this.required;
+      }
+
+      Updates.enqueue(() => this.classList.toggle('required', this.required));
+      this.validate();
+    }
+
+    /**
+     * The element internals object. Will only exist
+     * in browsers supporting the attachInternals API
+     */
+    private get elementInternals(): ElementInternals | null {
+      if (!supportsElementInternals) {
+        return null;
+      }
+
+      let internals = InternalsMap.get(this);
+
+      if (!internals) {
+        internals = (this as any).attachInternals();
+        InternalsMap.set(this, internals);
+      }
+
+      return internals;
+    }
+
+    /**
+     * These are events that are still fired by the proxy
+     * element based on user / programmatic interaction.
+     *
+     * The proxy implementation should be transparent to
+     * the app author, so block these events from emitting.
+     */
+    protected proxyEventsToBlock = ['change', 'click'];
+
+    constructor(...args: any[]) {
+      super(...args);
+
+      this.required = false;
+      this.initialValue = this.initialValue || '';
+
+      if (!this.elementInternals) {
+        // When elementInternals is not supported, formResetCallback is
+        // bound to an event listener, so ensure the handler's `this`
+        // context is correct.
+        this.formResetCallback = this.formResetCallback.bind(this);
+      }
+    }
+
+    /**
+     * @internal
+     */
+    public connectedCallback(): void {
+      super.connectedCallback();
+
+      this.addEventListener('keypress', this._keypressHandler);
+
+      if (!this.value) {
+        this.value = this.initialValue;
+        this.dirtyValue = false;
+      }
+
+      if (!this.elementInternals) {
+        this.attachProxy();
+
+        if (this.form) {
+          this.form.addEventListener('reset', this.formResetCallback);
+        }
+      }
+    }
+
+    /**
+     * @internal
+     */
+    public disconnectedCallback(): void {
+      this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
+
+      if (!this.elementInternals && this.form) {
+        this.form.removeEventListener('reset', this.formResetCallback);
+      }
+    }
+
+    /**
+     * Return the current validity of the element.
+     */
+    public checkValidity(): boolean {
+      return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();
+    }
+
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    public reportValidity(): boolean {
+      return this.elementInternals ? this.elementInternals.reportValidity() : this.proxy.reportValidity();
+    }
+
+    /**
+     * Set the validity of the control. In cases when the elementInternals object is not
+     * available (and the proxy element is used to report validity), this function will
+     * do nothing unless a message is provided, at which point the setCustomValidity method
+     * of the proxy element will be invoked with the provided message.
+     * @param flags - Validity flags
+     * @param message - Optional message to supply
+     * @param anchor - Optional element used by UA to display an interactive validation UI
+     */
+    public setValidity(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {
+      if (this.elementInternals) {
+        this.elementInternals.setValidity(flags, message, anchor);
+      } else if (typeof message === 'string') {
+        this.proxy.setCustomValidity(message);
+      }
+    }
+
+    /**
+     * Invoked when a connected component's form or fieldset has its disabled
+     * state changed.
+     * @param disabled - the disabled value of the form / fieldset
+     */
+    public formDisabledCallback(disabled: boolean): void {
+      this.disabled = disabled;
+    }
+
+    public formResetCallback(): void {
+      this.value = this.initialValue;
+      this.dirtyValue = false;
+    }
+
+    protected proxyInitialized: boolean = false;
+
+    /**
+     * Attach the proxy element to the DOM
+     */
+    public attachProxy(): void {
+      if (!this.proxyInitialized) {
+        this.proxyInitialized = true;
+        this.proxy.style.display = 'none';
+        this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation));
+
+        // These are typically mapped to the proxy during
+        // property change callbacks, but during initialization
+        // on the initial call of the callback, the proxy is
+        // still undefined. We should find a better way to address this.
+        this.proxy.disabled = this.disabled;
+        this.proxy.required = this.required;
+        if (typeof this.name === 'string') {
+          this.proxy.name = this.name;
+        }
+
+        if (typeof this.value === 'string') {
+          this.proxy.value = this.value;
+        }
+
+        this.proxy.setAttribute('slot', proxySlotName);
+
+        this.proxySlot = document.createElement('slot');
+        this.proxySlot.setAttribute('name', proxySlotName);
+      }
+
+      this.shadowRoot?.appendChild(this.proxySlot as HTMLSlotElement);
+      this.appendChild(this.proxy);
+    }
+
+    /**
+     * Detach the proxy element from the DOM
+     */
+    public detachProxy(): void {
+      this.removeChild(this.proxy);
+      this.shadowRoot?.removeChild(this.proxySlot as HTMLSlotElement);
+    }
+
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    public validate(anchor?: HTMLElement): void {
+      if (this.proxy instanceof HTMLElement) {
+        this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
+      }
+    }
+
+    /**
+     * Associates the provided value (and optional state) with the parent form.
+     * @param value - The value to set
+     * @param state - The state object provided to during session restores and when autofilling.
+     */
+    public setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void {
+      if (this.elementInternals) {
+        this.elementInternals.setFormValue(value, state || value);
+      }
+    }
+
+    private _keypressHandler(e: KeyboardEvent): void {
+      switch (e.key) {
+        case keyEnter:
+          if (this.form instanceof HTMLFormElement) {
+            // Implicit submission
+            const defaultButton = this.form.querySelector('[type=submit]') as HTMLElement | null;
+            defaultButton?.click();
+          }
+          break;
+      }
+    }
+
+    /**
+     * Used to stop propagation of proxy element events
+     * @param e - Event object
+     */
+    public stopPropagation(e: Event): void {
+      e.stopPropagation();
+    }
+  };
+
+  attr({ mode: 'boolean' })(C.prototype, 'disabled');
+  attr({ mode: 'fromView', attribute: 'value' })(C.prototype, 'initialValue');
+  attr({ attribute: 'current-value' })(C.prototype, 'currentValue');
+  attr(C.prototype, 'name');
+  attr({ mode: 'boolean' })(C.prototype, 'required');
+  observable(C.prototype, 'value');
+
+  return C;
+}
+
+/**
+ * Creates a checkable form associated component.
+ * @beta
+ */
+export function CheckableFormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T {
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface C extends FormAssociatedElement {}
+  class C extends FormAssociated(BaseCtor) {}
+  class D extends C {
+    /**
+     * Tracks whether the "checked" property has been changed.
+     * This is necessary to provide consistent behavior with
+     * normal input checkboxes
+     */
+    protected dirtyChecked: boolean = false;
+
+    /**
+     * Provides the default checkedness of the input element
+     * Passed down to proxy
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
+     */
+    public checkedAttribute: boolean = false;
+    private checkedAttributeChanged(): void {
+      this.defaultChecked = this.checkedAttribute;
+    }
+
+    public defaultChecked!: boolean;
+
+    /**
+     * @internal
+     */
+    public defaultCheckedChanged(): void {
+      if (!this.dirtyChecked) {
+        // Setting this.checked will cause us to enter a dirty state,
+        // but if we are clean when defaultChecked is changed, we want to stay
+        // in a clean state, so reset this.dirtyChecked
+        this.checked = this.defaultChecked;
+        this.dirtyChecked = false;
+      }
+    }
+
+    /**
+     * The checked state of the control.
+     *
+     * @public
+     */
+    public checked: boolean = false;
+    public checkedChanged(prev: boolean | undefined, next: boolean): void {
+      if (!this.dirtyChecked) {
+        this.dirtyChecked = true;
+      }
+
+      this.currentChecked = this.checked;
+      this.updateForm();
+
+      if (this.proxy instanceof HTMLInputElement) {
+        this.proxy.checked = this.checked;
+      }
+
+      if (prev !== undefined) {
+        this.$emit('change');
+      }
+
+      this.validate();
+    }
+
+    /**
+     * The current checkedness of the element. This property serves as a mechanism
+     * to set the `checked` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's checkedness
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    public currentChecked!: boolean;
+    public currentCheckedChanged(prev: boolean | undefined, next: boolean) {
+      this.checked = this.currentChecked;
+    }
+
+    constructor(...args: any[]) {
+      super(args);
+
+      // Re-initialize dirtyChecked because initialization of other values
+      // causes it to become true
+      this.dirtyChecked = false;
+    }
+
+    private updateForm(): void {
+      const value = this.checked ? this.value : null;
+      this.setFormValue(value, value);
+    }
+
+    public connectedCallback() {
+      super.connectedCallback();
+      this.updateForm();
+    }
+
+    public formResetCallback() {
+      super.formResetCallback();
+      this.checked = !!this.checkedAttribute;
+      this.dirtyChecked = false;
+    }
+  }
+
+  attr({ attribute: 'checked', mode: 'boolean' })(D.prototype, 'checkedAttribute');
+  attr({ attribute: 'current-checked', converter: booleanConverter })(D.prototype, 'currentChecked');
+  observable(D.prototype, 'defaultChecked');
+  observable(D.prototype, 'checked');
+
+  return D;
+}
diff --git a/packages/web-components/src/image/image.options.ts b/packages/web-components/src/image/image.options.ts
index a2328acec9bd8b..25cb3770ac754e 100644
--- a/packages/web-components/src/image/image.options.ts
+++ b/packages/web-components/src/image/image.options.ts
@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * Image fit
diff --git a/packages/web-components/src/label/label.options.ts b/packages/web-components/src/label/label.options.ts
index 1ecfa552581a76..d78e77f88cd230 100644
--- a/packages/web-components/src/label/label.options.ts
+++ b/packages/web-components/src/label/label.options.ts
@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * A Labels font size can be small, medium, or large
diff --git a/packages/web-components/src/menu-button/menu-button.definition.ts b/packages/web-components/src/menu-button/menu-button.definition.ts
index b8dbdffe82241f..30d0ad06c6699d 100644
--- a/packages/web-components/src/menu-button/menu-button.definition.ts
+++ b/packages/web-components/src/menu-button/menu-button.definition.ts
@@ -4,9 +4,6 @@ import { MenuButton } from './menu-button.js';
 import { template } from './menu-button.template.js';
 
 /**
- * The Fluent Menu Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-button\>
diff --git a/packages/web-components/src/menu-button/menu-button.options.ts b/packages/web-components/src/menu-button/menu-button.options.ts
index d45fef07d064dd..802a107e6f5d0f 100644
--- a/packages/web-components/src/menu-button/menu-button.options.ts
+++ b/packages/web-components/src/menu-button/menu-button.options.ts
@@ -1,6 +1,6 @@
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ButtonOptions } from '../button/index.js';
 import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * Menu Button Appearance constants
diff --git a/packages/web-components/src/menu-button/menu-button.template.ts b/packages/web-components/src/menu-button/menu-button.template.ts
index aeb7684a6ed762..3b47fcf5ff8f65 100644
--- a/packages/web-components/src/menu-button/menu-button.template.ts
+++ b/packages/web-components/src/menu-button/menu-button.template.ts
@@ -1,5 +1,5 @@
 import { ElementViewTemplate, html } from '@microsoft/fast-element';
-import { buttonTemplate } from '@microsoft/fast-foundation/button.js';
+import { buttonTemplate } from '../button/button.template.js';
 import type { MenuButton } from './menu-button.js';
 
 /**
diff --git a/packages/web-components/src/menu-item/menu-item.definition.ts b/packages/web-components/src/menu-item/menu-item.definition.ts
index a923d901bcefc9..eb864a8a9d96d1 100644
--- a/packages/web-components/src/menu-item/menu-item.definition.ts
+++ b/packages/web-components/src/menu-item/menu-item.definition.ts
@@ -4,10 +4,6 @@ import { styles } from './menu-item.styles.js';
 import { template } from './menu-item.template.js';
 
 /**
- * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem },
- * {@link @microsoft/fast-foundation#menuItemTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: <fluent-menu-item>
diff --git a/packages/web-components/src/menu-item/menu-item.options.ts b/packages/web-components/src/menu-item/menu-item.options.ts
new file mode 100644
index 00000000000000..60dd14ea187a5a
--- /dev/null
+++ b/packages/web-components/src/menu-item/menu-item.options.ts
@@ -0,0 +1,39 @@
+import type { ValuesOf } from '../utils/index.js';
+
+/**
+ * Menu items roles.
+ * @public
+ */
+export const MenuItemRole = {
+  /**
+   * The menu item has a "menuitem" role
+   */
+  menuitem: 'menuitem',
+
+  /**
+   * The menu item has a "menuitemcheckbox" role
+   */
+  menuitemcheckbox: 'menuitemcheckbox',
+
+  /**
+   * The menu item has a "menuitemradio" role
+   */
+  menuitemradio: 'menuitemradio',
+} as const;
+
+/**
+ * The types for menu item roles
+ * @public
+ */
+export type MenuItemRole = ValuesOf<typeof MenuItemRole>;
+
+/**
+ * @internal
+ */
+export const roleForMenuItem: {
+  [value in keyof typeof MenuItemRole]: typeof MenuItemRole[value];
+} = {
+  [MenuItemRole.menuitem]: 'menuitem',
+  [MenuItemRole.menuitemcheckbox]: 'menuitemcheckbox',
+  [MenuItemRole.menuitemradio]: 'menuitemradio',
+};
diff --git a/packages/web-components/src/menu-item/menu-item.template.ts b/packages/web-components/src/menu-item/menu-item.template.ts
index a745975443c616..dddefff1a4a732 100644
--- a/packages/web-components/src/menu-item/menu-item.template.ts
+++ b/packages/web-components/src/menu-item/menu-item.template.ts
@@ -1,7 +1,9 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { html } from '@microsoft/fast-element';
-import { menuItemTemplate } from '@microsoft/fast-foundation/menu-item.js';
-import type { MenuItem } from './menu-item.js';
+import { elements, html, ref, slotted, when } from '@microsoft/fast-element';
+import { staticallyCompose } from '../utils/template-helpers.js';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { MenuItemRole } from './menu-item.js';
+import type { MenuItem, MenuItemOptions } from './menu-item.js';
 
 const Checkmark16Filled = html.partial(
   `<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`,
@@ -10,6 +12,69 @@ const chevronRight16Filled = html.partial(
   `<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`,
 );
 
+export function menuItemTemplate<T extends MenuItem>(options: MenuItemOptions = {}): ElementViewTemplate<T> {
+  return html<T>`
+  <template
+      aria-haspopup="${x => (x.hasSubmenu ? 'menu' : void 0)}"
+      aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
+      aria-disabled="${x => x.disabled}"
+      aria-expanded="${x => x.expanded}"
+      @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event as KeyboardEvent)}"
+      @click="${(x, c) => x.handleMenuItemClick(c.event as MouseEvent)}"
+      @mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
+      @mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
+  >
+          ${when(
+            x => x.role === MenuItemRole.menuitemcheckbox,
+            html<MenuItem>`
+              <div part="input-container" class="input-container">
+                <span part="checkbox" class="checkbox">
+                  <slot name="checkbox-indicator"> ${staticallyCompose(options.checkboxIndicator)} </slot>
+                </span>
+              </div>
+            `,
+          )}
+          ${when(
+            x => x.role === MenuItemRole.menuitemradio,
+            html<MenuItem>`
+              <div part="input-container" class="input-container">
+                <span part="radio" class="radio">
+                  <slot name="radio-indicator"> ${staticallyCompose(options.radioIndicator)} </slot>
+                </span>
+              </div>
+            `,
+          )}
+      </div>
+      ${startSlotTemplate(options)}
+      <span class="content" part="content">
+          <slot></slot>
+      </span>
+      ${endSlotTemplate(options)}
+      ${when(
+        x => x.hasSubmenu,
+        html<T>`
+          <div part="expand-collapse-glyph-container" class="expand-collapse-glyph-container">
+            <span part="expand-collapse" class="expand-collapse">
+              <slot name="expand-collapse-indicator"> ${staticallyCompose(options.expandCollapseGlyph)} </slot>
+            </span>
+          </div>
+        `,
+      )}
+      <span
+          ?hidden="${x => !x.expanded}"
+          class="submenu-container"
+          part="submenu-container"
+          ${ref('submenuContainer')}
+      >
+          <slot name="submenu" ${slotted({
+            property: 'slottedSubmenu',
+            filter: elements("[role='menu']"),
+          })}></slot>
+      </span>
+  </template>
+  `;
+}
+
 export const template: ElementViewTemplate<MenuItem> = menuItemTemplate({
   checkboxIndicator: Checkmark16Filled,
   expandCollapseGlyph: chevronRight16Filled,
diff --git a/packages/web-components/src/menu-item/menu-item.ts b/packages/web-components/src/menu-item/menu-item.ts
index bd04b98dadff0f..4d1e82288604c2 100644
--- a/packages/web-components/src/menu-item/menu-item.ts
+++ b/packages/web-components/src/menu-item/menu-item.ts
@@ -1,11 +1,363 @@
-import { FASTMenuItem, MenuItemRole } from '@microsoft/fast-foundation/menu-item.js';
+import type { Placement } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, shift, size } from '@floating-ui/dom';
+import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { keyArrowLeft, keyArrowRight, keyEnter, keyEscape, keySpace } from '@microsoft/fast-web-utilities';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import type { StartEndOptions } from '../patterns/start-end.js';
+import { StartEnd } from '../patterns/start-end.js';
+import { applyMixins } from '../utils/apply-mixins.js';
+import { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
 
 export type MenuItemColumnCount = 0 | 1 | 2;
 
-export { MenuItemRole };
+export { MenuItemRole, roleForMenuItem };
 
 /**
- * The base class used for constructing a fluent-menu-item custom element
+ * Menu Item configuration options
  * @public
  */
-export class MenuItem extends FASTMenuItem {}
+export type MenuItemOptions = StartEndOptions<MenuItem> & {
+  checkboxIndicator?: StaticallyComposableHTML<MenuItem>;
+  expandCollapseGlyph?: StaticallyComposableHTML<MenuItem>;
+  radioIndicator?: StaticallyComposableHTML<MenuItem>;
+};
+
+/**
+ * A Switch Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot radio-indicator - The radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot - The default slot for menu item content
+ * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart input-container - The element representing the visual checked or radio indicator
+ * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
+ * @csspart radio - The element wrapping the `menuitemradio` indicator
+ * @csspart content - The element wrapping the menu item content
+ * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
+ * @csspart expand-collapse - The expand/collapse element
+ * @csspart submenu-region - The container for the submenu, used for positioning
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
+ * @public
+ */
+export class MenuItem extends FASTElement {
+  /**
+   * The disabled state of the element.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: disabled
+   */
+  @attr({ mode: 'boolean' })
+  public disabled!: boolean;
+
+  /**
+   * The expanded state of the element.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: expanded
+   */
+  @attr({ mode: 'boolean' })
+  public expanded!: boolean;
+  protected expandedChanged(prev: boolean | undefined, next: boolean): void {
+    if (this.$fastController.isConnected) {
+      if (next && this.submenu) {
+        this.updateSubmenu();
+      }
+
+      this.$emit('expanded-change', this, { bubbles: false });
+    }
+  }
+
+  /**
+   * The role of the element.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: role
+   */
+  @attr
+  public role: MenuItemRole = MenuItemRole.menuitem;
+
+  /**
+   * Cleanup function for the submenu positioner.
+   *
+   * @public
+   */
+  public cleanup!: () => void;
+
+  /**
+   * The checked value of the element.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: checked
+   */
+  @attr({ mode: 'boolean' })
+  public checked: boolean = false;
+  protected checkedChanged(oldValue: boolean, newValue: boolean): void {
+    if (this.$fastController.isConnected) {
+      this.$emit('change');
+    }
+  }
+
+  /**
+   * The hidden attribute.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: hidden
+   */
+  @attr({ mode: 'boolean' })
+  public hidden!: boolean;
+
+  /**
+   * The submenu slotted content.
+   *
+   * @internal
+   */
+  @observable
+  public slottedSubmenu!: HTMLElement[];
+
+  /**
+   * @internal
+   */
+  public get hasSubmenu(): boolean {
+    return !!this.submenu;
+  }
+
+  /**
+   * Sets the submenu and updates its position.
+   *
+   * @internal
+   */
+  protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]) {
+    if (next.length) {
+      this.submenu = next[0];
+      this.updateSubmenu();
+    }
+  }
+
+  /**
+   * The container for the submenu.
+   *
+   * @internal
+   */
+  public submenuContainer!: HTMLDivElement;
+
+  /**
+   * @internal
+   */
+  @observable
+  public submenu: HTMLElement | undefined;
+
+  private focusSubmenuOnLoad: boolean = false;
+
+  /**
+   * @internal
+   */
+  public disconnectedCallback(): void {
+    this.cleanup?.();
+    super.disconnectedCallback();
+  }
+
+  /**
+   * @internal
+   */
+  public handleMenuItemKeyDown = (e: KeyboardEvent): boolean => {
+    if (e.defaultPrevented) {
+      return false;
+    }
+
+    switch (e.key) {
+      case keyEnter:
+      case keySpace:
+        this.invoke();
+        return false;
+
+      case keyArrowRight:
+        //open/focus on submenu
+        this.expanded && this.submenu ? this.submenu.focus() : this.expandAndFocus();
+        return false;
+
+      case keyEscape:
+        // close submenu
+        if (this.expanded) {
+          this.closeSubMenu();
+          return false;
+        }
+        break;
+
+      case keyArrowLeft:
+        //close submenu
+        if (this.expanded) {
+          this.closeSubMenu();
+          return false;
+        }
+    }
+
+    return true;
+  };
+
+  /**
+   * @internal
+   */
+  public handleMenuItemClick = (e: MouseEvent): boolean => {
+    if (e.defaultPrevented || this.disabled) {
+      return false;
+    }
+
+    this.invoke();
+    return false;
+  };
+
+  /**
+   * @internal
+   */
+  public submenuLoaded = (): void => {
+    if (!this.focusSubmenuOnLoad) {
+      return;
+    }
+
+    this.focusSubmenuOnLoad = false;
+    if (this.submenu) {
+      this.submenu.focus();
+      this.setAttribute('tabindex', '-1');
+    }
+  };
+
+  /**
+   * @internal
+   */
+  public handleMouseOver = (e: MouseEvent): boolean => {
+    if (this.disabled || !this.hasSubmenu || this.expanded) {
+      return false;
+    }
+
+    this.expanded = true;
+
+    return false;
+  };
+
+  /**
+   * @internal
+   */
+  public handleMouseOut = (e: MouseEvent): boolean => {
+    if (!this.expanded || this.contains(document.activeElement)) {
+      return false;
+    }
+
+    this.expanded = false;
+
+    return false;
+  };
+
+  /**
+   * @internal
+   */
+  private closeSubMenu = (): void => {
+    // close submenu
+    this.expanded = false;
+    this.focus();
+  };
+
+  /**
+   * @internal
+   */
+  private expandAndFocus = (): void => {
+    if (!this.hasSubmenu) {
+      return;
+    }
+
+    this.focusSubmenuOnLoad = true;
+    this.expanded = true;
+  };
+
+  /**
+   * @internal
+   */
+  private invoke = (): void => {
+    if (this.disabled) {
+      return;
+    }
+
+    switch (this.role) {
+      case MenuItemRole.menuitemcheckbox:
+        this.checked = !this.checked;
+        break;
+
+      case MenuItemRole.menuitem:
+        if (this.hasSubmenu) {
+          this.expandAndFocus();
+          break;
+        }
+
+        this.$emit('change');
+        break;
+
+      case MenuItemRole.menuitemradio:
+        if (!this.checked) {
+          this.checked = true;
+        }
+        break;
+    }
+  };
+
+  /**
+   * Calculate and apply submenu positioning.
+   *
+   * @public
+   */
+  public updateSubmenu() {
+    this.cleanup?.();
+
+    if (!this.submenu || !this.expanded) {
+      return;
+    }
+
+    Updates.enqueue(() => {
+      this.cleanup = autoUpdate(this, this.submenuContainer, async () => {
+        const fallbackPlacements: Placement[] = ['left-start', 'right-start'];
+        const { x, y } = await computePosition(this, this.submenuContainer, {
+          middleware: [
+            shift(),
+            size({
+              apply: ({ availableWidth, rects }) => {
+                if (availableWidth < rects.floating.width) {
+                  fallbackPlacements.push('bottom-end', 'top-end');
+                }
+              },
+            }),
+            flip({ fallbackPlacements }),
+          ],
+          placement: 'right-start',
+          strategy: 'fixed',
+        });
+
+        Object.assign(this.submenuContainer.style, {
+          left: `${x}px`,
+          position: 'fixed',
+          top: `${y}px`,
+        });
+
+        this.submenuLoaded();
+      });
+    });
+  }
+}
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+/* eslint-disable-next-line */
+export interface MenuItem extends StartEnd {}
+applyMixins(MenuItem, StartEnd);
diff --git a/packages/web-components/src/menu-list/menu-list.definition.ts b/packages/web-components/src/menu-list/menu-list.definition.ts
index 6806c1543c395b..c96ee090375dac 100644
--- a/packages/web-components/src/menu-list/menu-list.definition.ts
+++ b/packages/web-components/src/menu-list/menu-list.definition.ts
@@ -4,10 +4,6 @@ import { styles } from './menu-list.styles.js';
 import { template } from './menu-list.template.js';
 
 /**
- * The Fluent MenuList Element. Implements {@link @microsoft/fast-foundation#Menu },
- * {@link @microsoft/fast-foundation#menuTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: <fluent-menu-list>
diff --git a/packages/web-components/src/menu-list/menu-list.template.ts b/packages/web-components/src/menu-list/menu-list.template.ts
index 96cd67083b5924..fbd0fcfd82e200 100644
--- a/packages/web-components/src/menu-list/menu-list.template.ts
+++ b/packages/web-components/src/menu-list/menu-list.template.ts
@@ -1,5 +1,17 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { menuTemplate } from '@microsoft/fast-foundation/menu.js';
+import { ElementViewTemplate, html, slotted } from '@microsoft/fast-element';
 import type { MenuList } from './menu-list.js';
 
+export function menuTemplate<T extends MenuList>(): ElementViewTemplate<T> {
+  return html<T>`
+    <template
+      slot="${x => (x.slot ? x.slot : x.isNestedMenu() ? 'submenu' : void 0)}"
+      role="menu"
+      @keydown="${(x, c) => x.handleMenuKeyDown(c.event as KeyboardEvent)}"
+      @focusout="${(x, c) => x.handleFocusOut(c.event as FocusEvent)}"
+    >
+      <slot ${slotted('items')}></slot>
+    </template>
+  `;
+}
+
 export const template: ElementViewTemplate<MenuList> = menuTemplate();
diff --git a/packages/web-components/src/menu-list/menu-list.ts b/packages/web-components/src/menu-list/menu-list.ts
index 3d4396a2482286..93737e852a11d5 100644
--- a/packages/web-components/src/menu-list/menu-list.ts
+++ b/packages/web-components/src/menu-list/menu-list.ts
@@ -1,14 +1,229 @@
-import { FASTMenu } from '@microsoft/fast-foundation/menu.js';
+import { FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
+import { isHTMLElement, keyArrowDown, keyArrowUp, keyEnd, keyHome } from '@microsoft/fast-web-utilities';
 import { MenuItem, MenuItemColumnCount, MenuItemRole } from '../menu-item/index.js';
 
 /**
- * The base class used for constructing a fluent-menu-list custom element
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @slot - The default slot for the menu items
+ *
  * @public
  */
+export class MenuList extends FASTElement {
+  /**
+   * @internal
+   */
+  @observable
+  public items!: HTMLElement[];
+  protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
+    // only update children after the component is connected and
+    // the setItems has run on connectedCallback
+    // (menuItems is undefined until then)
+    if (this.$fastController.isConnected && this.menuItems !== undefined) {
+      this.setItems();
+    }
+  }
+
+  protected menuItems: Element[] | undefined;
+
+  private expandedItem: MenuItem | null = null;
+
+  /**
+   * The index of the focusable element in the items array
+   * defaults to -1
+   */
+  private focusIndex: number = -1;
+
+  private static focusableElementRoles = MenuItemRole;
+
+  /**
+   * @internal
+   */
+  public connectedCallback(): void {
+    super.connectedCallback();
+    Updates.enqueue(() => {
+      // wait until children have had a chance to
+      // connect before setting/checking their props/attributes
+      this.setItems();
+    });
+
+    this.addEventListener('change', this.changeHandler);
+  }
+
+  /**
+   * @internal
+   */
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeItemListeners();
+    this.menuItems = undefined;
+    this.removeEventListener('change', this.changeHandler);
+  }
+
+  /**
+   * @internal
+   */
+  public readonly isNestedMenu = (): boolean => {
+    return (
+      this.parentElement !== null &&
+      isHTMLElement(this.parentElement) &&
+      this.parentElement.getAttribute('role') === 'menuitem'
+    );
+  };
+
+  /**
+   * Focuses the first item in the menu.
+   *
+   * @public
+   */
+  public focus(): void {
+    this.setFocus(0, 1);
+  }
+
+  /**
+   * Collapses any expanded menu items.
+   *
+   * @public
+   */
+  public collapseExpandedItem(): void {
+    if (this.expandedItem !== null) {
+      this.expandedItem.expanded = false;
+      this.expandedItem = null;
+    }
+  }
+
+  /**
+   * @internal
+   */
+  public handleMenuKeyDown(e: KeyboardEvent): void | boolean {
+    if (e.defaultPrevented || this.menuItems === undefined) {
+      return;
+    }
+    switch (e.key) {
+      case keyArrowDown:
+        // go forward one index
+        this.setFocus(this.focusIndex + 1, 1);
+        return;
+      case keyArrowUp:
+        // go back one index
+        this.setFocus(this.focusIndex - 1, -1);
+        return;
+      case keyEnd:
+        // set focus on last item
+        this.setFocus(this.menuItems.length - 1, -1);
+        return;
+      case keyHome:
+        // set focus on first item
+        this.setFocus(0, 1);
+        return;
+
+      default:
+        // if we are not handling the event, do not prevent default
+        return true;
+    }
+  }
+
+  /**
+   * if focus is moving out of the menu, reset to a stable initial state
+   * @internal
+   */
+  public handleFocusOut = (e: FocusEvent) => {
+    if (!this.contains(e.relatedTarget as Element) && this.menuItems !== undefined) {
+      this.collapseExpandedItem();
+      // find our first focusable element
+      const focusIndex: number = this.menuItems.findIndex(this.isFocusableElement);
+      // set the current focus index's tabindex to -1
+      this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
+      // set the first focusable element tabindex to 0
+      this.menuItems[focusIndex].setAttribute('tabindex', '0');
+      // set the focus index
+      this.focusIndex = focusIndex;
+    }
+  };
+
+  private handleItemFocus = (e: FocusEvent) => {
+    const targetItem: HTMLElement = e.target as HTMLElement;
+
+    if (this.menuItems !== undefined && targetItem !== this.menuItems[this.focusIndex]) {
+      this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
+      this.focusIndex = this.menuItems.indexOf(targetItem);
+      targetItem.setAttribute('tabindex', '0');
+    }
+  };
+
+  private handleExpandedChanged = (e: Event): void => {
+    if (
+      e.defaultPrevented ||
+      e.target === null ||
+      this.menuItems === undefined ||
+      this.menuItems.indexOf(e.target as Element) < 0
+    ) {
+      return;
+    }
+
+    e.preventDefault();
+    const changedItem: MenuItem = (e.target as any) as MenuItem;
+
+    // closing an expanded item without opening another
+    if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
+      this.expandedItem = null;
+      return;
+    }
+
+    if (changedItem.expanded) {
+      if (this.expandedItem !== null && this.expandedItem !== changedItem) {
+        this.expandedItem.expanded = false;
+      }
+      this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
+      this.expandedItem = changedItem;
+      this.focusIndex = this.menuItems.indexOf(changedItem);
+      changedItem.setAttribute('tabindex', '0');
+    }
+  };
+
+  private removeItemListeners(items: HTMLElement[] = this.items): void {
+    items.forEach(item => {
+      item.removeEventListener('focus', this.handleItemFocus);
+      item.removeEventListener('expanded-changed', this.handleExpandedChanged);
+      Observable.getNotifier(item).unsubscribe(this, 'hidden');
+    });
+  }
+
+  private static elementIndent(el: HTMLElement): MenuItemColumnCount {
+    const role = el.getAttribute('role');
+    const startSlot = el.querySelector('[slot=start]');
+
+    if (role && role !== MenuItemRole.menuitem) {
+      return startSlot ? 2 : 1;
+    }
+
+    return startSlot ? 1 : 0;
+  }
 
-export class MenuList extends FASTMenu {
   protected setItems(): void {
-    super.setItems();
+    const children: HTMLElement[] = Array.from(this.children) as HTMLElement[];
+
+    this.removeItemListeners(children);
+
+    children.forEach((child: Element) => Observable.getNotifier(child).subscribe(this, 'hidden'));
+
+    const newItems: Element[] = children.filter(child => !child.hasAttribute('hidden'));
+
+    this.menuItems = newItems;
+
+    const menuItems = this.menuItems.filter(this.isMenuItemElement);
+
+    // if our focus index is not -1 we have items
+    if (menuItems.length) {
+      this.focusIndex = 0;
+    }
+
+    menuItems.forEach((item: HTMLElement, index: number) => {
+      item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+      item.addEventListener('expanded-change', this.handleExpandedChanged);
+      item.addEventListener('focus', this.handleItemFocus);
+    });
 
     /**
      * Set the indent attribute on MenuItem elements based on their
@@ -30,14 +245,95 @@ export class MenuList extends FASTMenu {
     });
   }
 
-  private static elementIndent(el: HTMLElement): MenuItemColumnCount {
-    const role = el.getAttribute('role');
-    const startSlot = el.querySelector('[slot=start]');
+  public handleChange(source: any, propertyName: string) {
+    if (propertyName === 'hidden') {
+      this.setItems();
+    }
+  }
 
-    if (role && role !== MenuItemRole.menuitem) {
-      return startSlot ? 2 : 1;
+  /**
+   * handle change from child element
+   */
+  private changeHandler = (e: Event): void => {
+    if (this.menuItems === undefined) {
+      return;
     }
+    const changedMenuItem: MenuItem = e.target as MenuItem;
+    const changeItemIndex: number = this.menuItems.indexOf(changedMenuItem);
 
-    return startSlot ? 1 : 0;
+    if (changeItemIndex === -1) {
+      return;
+    }
+
+    if (changedMenuItem.role === 'menuitemradio' && changedMenuItem.checked === true) {
+      for (let i = changeItemIndex - 1; i >= 0; --i) {
+        const item: Element = this.menuItems[i];
+        const role: string | null = item.getAttribute('role');
+        if (role === MenuItemRole.menuitemradio) {
+          (item as MenuItem).checked = false;
+        }
+        if (role === 'separator') {
+          break;
+        }
+      }
+      const maxIndex: number = this.menuItems.length - 1;
+      for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
+        const item: Element = this.menuItems[i];
+        const role: string | null = item.getAttribute('role');
+        if (role === MenuItemRole.menuitemradio) {
+          (item as MenuItem).checked = false;
+        }
+        if (role === 'separator') {
+          break;
+        }
+      }
+    }
+  };
+
+  /**
+   * check if the item is a menu item
+   */
+  protected isMenuItemElement = (el: Element): el is HTMLElement => {
+    return (
+      el instanceof MenuItem ||
+      (isHTMLElement(el) && (el.getAttribute('role') as string) in MenuList.focusableElementRoles)
+    );
+  };
+
+  /**
+   * check if the item is focusable
+   */
+  private isFocusableElement = (el: Element): el is HTMLElement => {
+    return this.isMenuItemElement(el);
+  };
+
+  private setFocus(focusIndex: number, adjustment: number): void {
+    if (this.menuItems === undefined) {
+      return;
+    }
+
+    while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
+      const child: Element = this.menuItems[focusIndex];
+
+      if (this.isFocusableElement(child)) {
+        // change the previous index to -1
+        if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
+          this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
+        }
+
+        // update the focus index
+        this.focusIndex = focusIndex;
+
+        // update the tabindex of next focusable element
+        child.setAttribute('tabindex', '0');
+
+        // focus the element
+        child.focus();
+
+        break;
+      }
+
+      focusIndex += adjustment;
+    }
   }
 }
diff --git a/packages/web-components/src/patterns/aria-globals.ts b/packages/web-components/src/patterns/aria-globals.ts
new file mode 100644
index 00000000000000..bc1fb1e1b61bb6
--- /dev/null
+++ b/packages/web-components/src/patterns/aria-globals.ts
@@ -0,0 +1,230 @@
+//Copied from @microsoft/fast-foundation
+
+import { attr } from '@microsoft/fast-element';
+
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+export class ARIAGlobalStatesAndProperties {
+  /**
+   * Indicates whether assistive technologies will present all, or only parts of,
+   * the changed region based on the change notifications defined by the aria-relevant attribute.
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-atomic}
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: aria-atomic
+   */
+  @attr({ attribute: 'aria-atomic' })
+  public ariaAtomic!: 'true' | 'false' | string | null;
+
+  /**
+   * Indicates an element is being modified and that assistive technologies MAY want to wait
+   * until the modifications are complete before exposing them to the user.
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-busy}
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: aria-busy
+   */
+  @attr({ attribute: 'aria-busy' })
+  public ariaBusy!: 'true' | 'false' | string | null;
+
+  /**
+   * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-controls}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-controls
+   */
+  @attr({ attribute: 'aria-controls' })
+  public ariaControls!: string | null;
+
+  /**
+   * Indicates the element that represents the current item within a container or set of related elements.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-current}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-current
+   */
+  @attr({ attribute: 'aria-current' })
+  public ariaCurrent!: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | string | null;
+
+  /**
+   * Identifies the element (or elements) that describes the object.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-describedby}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-describedby
+   */
+  @attr({ attribute: 'aria-describedby' })
+  public ariaDescribedby!: string | null;
+
+  /**
+   * Identifies the element that provides a detailed, extended description for the object.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-details}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-details
+   */
+  @attr({ attribute: 'aria-details' })
+  public ariaDetails!: string | null;
+
+  /**
+   * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-disabled}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-disabled
+   */
+  @attr({ attribute: 'aria-disabled' })
+  public ariaDisabled!: 'true' | 'false' | string | null;
+
+  /**
+   * Identifies the element that provides an error message for the object.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-errormessage
+   */
+  @attr({ attribute: 'aria-errormessage' })
+  public ariaErrormessage!: string | null;
+
+  /**
+   * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+   * allows assistive technology to override the general default of reading in document source order.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-flowto}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-flowto
+   */
+  @attr({ attribute: 'aria-flowto' })
+  public ariaFlowto!: string | null;
+
+  /**
+   * Indicates the availability and type of interactive popup element,
+   * such as menu or dialog, that can be triggered by an element.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-haspopup
+   */
+  @attr({ attribute: 'aria-haspopup' })
+  public ariaHaspopup!: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | string | null;
+
+  /**
+   * Indicates whether the element is exposed to an accessibility API
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-hidden}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-hidden
+   */
+  @attr({ attribute: 'aria-hidden' })
+  public ariaHidden!: 'false' | 'true' | string | null;
+
+  /**
+   * Indicates the entered value does not conform to the format expected by the application.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-invalid}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-invalid
+   */
+  @attr({ attribute: 'aria-invalid' })
+  public ariaInvalid!: 'false' | 'true' | 'grammar' | 'spelling' | string | null;
+
+  /**
+   * Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-keyshortcuts
+   */
+  @attr({ attribute: 'aria-keyshortcuts' })
+  public ariaKeyshortcuts!: string | null;
+
+  /**
+   * Defines a string value that labels the current element.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-label}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-label
+   */
+  @attr({ attribute: 'aria-label' })
+  public ariaLabel!: string | null;
+
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-labelledby
+   */
+  @attr({ attribute: 'aria-labelledby' })
+  public ariaLabelledby!: string | null;
+
+  /**
+   * Indicates that an element will be updated, and describes the types of updates the user agents,
+   * assistive technologies, and user can expect from the live region.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-live}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-live
+   */
+  @attr({ attribute: 'aria-live' })
+  public ariaLive!: 'assertive' | 'off' | 'polite' | string | null;
+
+  /**
+   * Identifies an element (or elements) in order to define a visual,
+   * functional, or contextual parent/child relationship between DOM elements
+   * where the DOM hierarchy cannot be used to represent the relationship.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-owns}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-owns
+   */
+  @attr({ attribute: 'aria-owns' })
+  public ariaOwns!: string | null;
+
+  /**
+   * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-relevant}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-relevant
+   */
+  @attr({ attribute: 'aria-relevant' })
+  public ariaRelevant!: 'additions' | 'additions text' | 'all' | 'removals' | 'text' | string | null;
+
+  /**
+   * Defines a human-readable, author-localized description for the role of an element.
+   *
+   * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription}
+   * @public
+   * @remarks
+   * HTML Attribute: aria-roledescription
+   */
+  @attr({ attribute: 'aria-roledescription' })
+  public ariaRoledescription!: string | null;
+}
diff --git a/packages/web-components/src/patterns/index.ts b/packages/web-components/src/patterns/index.ts
new file mode 100644
index 00000000000000..346621b42d6c7a
--- /dev/null
+++ b/packages/web-components/src/patterns/index.ts
@@ -0,0 +1,2 @@
+export * from './aria-globals.js';
+export * from './start-end.js';
diff --git a/packages/web-components/src/patterns/start-end.ts b/packages/web-components/src/patterns/start-end.ts
new file mode 100644
index 00000000000000..f8c4cb4642e7a3
--- /dev/null
+++ b/packages/web-components/src/patterns/start-end.ts
@@ -0,0 +1,62 @@
+//Copied from @microsoft/fast-foundation
+
+import { CaptureType, html, ref } from '@microsoft/fast-element';
+import type { StaticallyComposableHTML } from '../utils/index.js';
+import { staticallyCompose } from '../utils/index.js';
+
+/**
+ * Start configuration options
+ * @public
+ */
+export type StartOptions<TSource = any, TParent = any> = {
+  start?: StaticallyComposableHTML<TSource, TParent>;
+};
+
+/**
+ * End configuration options
+ * @public
+ */
+export type EndOptions<TSource = any, TParent = any> = {
+  end?: StaticallyComposableHTML<TSource, TParent>;
+};
+
+/**
+ * Start/End configuration options
+ * @public
+ */
+export type StartEndOptions<TSource = any, TParent = any> = StartOptions<TSource, TParent> &
+  EndOptions<TSource, TParent>;
+
+/**
+ * A mixin class implementing start and end slots.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+export class StartEnd {
+  public start!: HTMLSlotElement;
+  public end!: HTMLSlotElement;
+}
+
+/**
+ * The template for the end slot.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export function endSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(
+  options: EndOptions<TSource, TParent>,
+): CaptureType<TSource, TParent> {
+  return html` <slot name="end" ${ref('end')}>${staticallyCompose(options.end)}</slot> `.inline();
+}
+
+/**
+ * The template for the start slots.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export function startSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(
+  options: StartOptions<TSource, TParent>,
+): CaptureType<TSource, TParent> {
+  return html` <slot name="start" ${ref('start')}>${staticallyCompose(options.start)}</slot> `.inline();
+}
diff --git a/packages/web-components/src/progress-bar/base-progress.ts b/packages/web-components/src/progress-bar/base-progress.ts
new file mode 100644
index 00000000000000..aaf8411121521a
--- /dev/null
+++ b/packages/web-components/src/progress-bar/base-progress.ts
@@ -0,0 +1,71 @@
+import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
+
+/**
+ * A base class for progress components.
+ * @public
+ */
+export class BaseProgress extends FASTElement {
+  /**
+   * The value of the progress
+   * @public
+   * @remarks
+   * HTML Attribute: value
+   */
+  @attr({ converter: nullableNumberConverter })
+  public value!: number | null;
+  protected valueChanged(): void {
+    this.updatePercentComplete();
+  }
+
+  /**
+   * The minimum value
+   * @public
+   * @remarks
+   * HTML Attribute: min
+   */
+  @attr({ converter: nullableNumberConverter })
+  public min!: number;
+  protected minChanged(): void {
+    if (this.$fastController.isConnected) {
+      this.updatePercentComplete();
+    }
+  }
+
+  /**
+   * The maximum value
+   * @public
+   * @remarks
+   * HTML Attribute: max
+   */
+  @attr({ converter: nullableNumberConverter })
+  public max!: number;
+  protected maxChanged(): void {
+    if (this.$fastController.isConnected) {
+      this.updatePercentComplete();
+    }
+  }
+
+  /**
+   * Indicates progress in %
+   * @internal
+   */
+  @observable
+  public percentComplete: number = 0;
+
+  /**
+   * @internal
+   */
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.updatePercentComplete();
+  }
+
+  private updatePercentComplete(): void {
+    const min: number = typeof this.min === 'number' ? this.min : 0;
+    const max: number = typeof this.max === 'number' ? this.max : 100;
+    const value: number = typeof this.value === 'number' ? this.value : 0;
+    const range: number = max - min;
+
+    this.percentComplete = range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
+  }
+}
diff --git a/packages/web-components/src/progress-bar/progress-bar.options.ts b/packages/web-components/src/progress-bar/progress-bar.options.ts
index 51f5366a7fc409..96b4d74b635cd0 100644
--- a/packages/web-components/src/progress-bar/progress-bar.options.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.options.ts
@@ -1,4 +1,5 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
+import { ProgressBar } from './progress-bar.js';
 
 /**
  * ProgressBarThickness Constants
@@ -45,3 +46,12 @@ export const ProgressBarValidationState = {
  * @public
  */
 export type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
+
+/**
+ * Progress configuration options
+ * @public
+ */
+export type ProgressOptions = {
+  indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar>;
+  indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar>;
+};
diff --git a/packages/web-components/src/progress-bar/progress-bar.template.ts b/packages/web-components/src/progress-bar/progress-bar.template.ts
index 67be2878411b80..9be9714c5c959a 100644
--- a/packages/web-components/src/progress-bar/progress-bar.template.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.template.ts
@@ -1,7 +1,37 @@
+import { html, when } from '@microsoft/fast-element';
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { progressTemplate } from '@microsoft/fast-foundation/progress.js';
+import { staticallyCompose } from '../utils/template-helpers.js';
+import type { ProgressOptions } from './progress-bar.options.js';
 import type { ProgressBar } from './progress-bar.js';
 
+export function progressTemplate<T extends ProgressBar>(options: ProgressOptions = {}): ElementViewTemplate<T> {
+  return html`
+    <template
+      role="progressbar"
+      aria-valuenow="${x => x.value}"
+      aria-valuemin="${x => x.min}"
+      aria-valuemax="${x => x.max}"
+    >
+      ${when(
+        x => typeof x.value === 'number',
+        html<T>`
+          <div class="progress" part="progress" slot="determinate">
+            <div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div>
+          </div>
+        `,
+        html<T>`
+          <div class="progress" part="progress" slot="indeterminate">
+            <slot name="indeterminate">
+              ${staticallyCompose(options.indeterminateIndicator1)}
+              ${staticallyCompose(options.indeterminateIndicator2)}
+            </slot>
+          </div>
+        `,
+      )}
+    </template>
+  `;
+}
+
 export const template: ElementViewTemplate<ProgressBar> = progressTemplate({
   indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
   indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`,
diff --git a/packages/web-components/src/progress-bar/progress-bar.ts b/packages/web-components/src/progress-bar/progress-bar.ts
index dc25706400831c..c582f6d1b1625f 100644
--- a/packages/web-components/src/progress-bar/progress-bar.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.ts
@@ -1,12 +1,19 @@
 import { attr } from '@microsoft/fast-element';
-import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
-import type { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
+import { BaseProgress } from './base-progress.js';
+import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 
 /**
- * The base class used for constructing a fluent-progress-bar custom element
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
  * @public
  */
-export class ProgressBar extends FASTProgress {
+export class ProgressBar extends BaseProgress {
   /**
    * The thickness of the progress bar
    *
diff --git a/packages/web-components/src/progress-ring/progress-ring.options.ts b/packages/web-components/src/progress-ring/progress-ring.options.ts
new file mode 100644
index 00000000000000..7f70d78e914b88
--- /dev/null
+++ b/packages/web-components/src/progress-ring/progress-ring.options.ts
@@ -0,0 +1,10 @@
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import type { ProgressRing } from './progress-ring.js';
+
+/**
+ * ProgressRing configuration options
+ * @public
+ */
+export type ProgressRingOptions = {
+  indeterminateIndicator?: StaticallyComposableHTML<ProgressRing>;
+};
diff --git a/packages/web-components/src/progress-ring/progress-ring.ts b/packages/web-components/src/progress-ring/progress-ring.ts
new file mode 100644
index 00000000000000..67b3ff5dc2dde7
--- /dev/null
+++ b/packages/web-components/src/progress-ring/progress-ring.ts
@@ -0,0 +1,15 @@
+import { BaseProgress } from '../progress-bar/base-progress.js';
+
+/**
+ * An circular Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @slot determinate - The slot for a custom determinate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart background - The background
+ *
+ * @public
+ */
+export class ProgressRing extends BaseProgress {}
diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
index 843f7464335ed7..967f498a393fbf 100644
--- a/packages/web-components/src/radio-group/index.ts
+++ b/packages/web-components/src/radio-group/index.ts
@@ -2,4 +2,3 @@ export * from './radio-group.js';
 export { definition as RadioGroupDefinition } from './radio-group.definition.js';
 export { styles as RadioGroupStyles } from './radio-group.styles.js';
 export { template as RadioGroupTemplate } from './radio-group.template.js';
-export { RadioGroupOrientation } from '@microsoft/fast-foundation/radio-group.js';
diff --git a/packages/web-components/src/radio-group/radio-group.options.ts b/packages/web-components/src/radio-group/radio-group.options.ts
new file mode 100644
index 00000000000000..d3af40bc749f50
--- /dev/null
+++ b/packages/web-components/src/radio-group/radio-group.options.ts
@@ -0,0 +1,14 @@
+import { Orientation } from '@microsoft/fast-web-utilities';
+import type { ValuesOf } from '../utils/index.js';
+
+/**
+ * Radio Group orientation
+ * @public
+ */
+export const RadioGroupOrientation = Orientation;
+
+/**
+ * Types of Radio Group orientation
+ * @public
+ */
+export type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientation>;
diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index 33d1eb816a9541..a700aa0e8dab9e 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -1,10 +1,10 @@
 import { html } from '@microsoft/fast-element';
 import type { Args, Meta } from '@storybook/html';
-import { RadioGroupOrientation } from '@microsoft/fast-foundation';
 import { renderComponent } from '../helpers.stories.js';
 import { RadioGroup as FluentRadioGroup } from './radio-group.js';
 import './define.js';
 import '../radio/define.js';
+import { RadioGroupOrientation } from './radio-group.options.js';
 
 type RadioGroupStoryArgs = Args & FluentRadioGroup;
 type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>;
diff --git a/packages/web-components/src/radio-group/radio-group.template.ts b/packages/web-components/src/radio-group/radio-group.template.ts
index dbb810a450bdbe..f69f713f960a4d 100644
--- a/packages/web-components/src/radio-group/radio-group.template.ts
+++ b/packages/web-components/src/radio-group/radio-group.template.ts
@@ -1,5 +1,36 @@
+import { elements, html, slotted } from '@microsoft/fast-element';
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { radioGroupTemplate } from '@microsoft/fast-foundation/radio-group.js';
 import type { RadioGroup } from './radio-group.js';
+import { RadioGroupOrientation } from './radio-group.options.js';
+
+export function radioGroupTemplate<T extends RadioGroup>(): ElementViewTemplate<T> {
+  return html<T>`
+    <template
+      role="radiogroup"
+      tabindex="${x => (x.disabled ? -1 : void 0)}"
+      aria-disabled="${x => x.disabled}"
+      aria-readonly="${x => x.readOnly}"
+      aria-orientation="${x => x.orientation}"
+      @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+      @mousedown="${(x, c) => x.handleDisabledClick(c.event as MouseEvent)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
+      @focusout="${(x, c) => x.focusOutHandler(c.event as FocusEvent)}"
+    >
+      <slot name="label"></slot>
+      <div
+        class="positioning-region ${x =>
+          x.orientation === RadioGroupOrientation.horizontal ? 'horizontal' : 'vertical'}"
+        part="positioning-region"
+      >
+        <slot
+          ${slotted({
+            property: 'slottedRadioButtons',
+            filter: elements('[role=radio]'),
+          })}
+        ></slot>
+      </div>
+    </template>
+  `;
+}
 
 export const template: ElementViewTemplate<RadioGroup> = radioGroupTemplate();
diff --git a/packages/web-components/src/radio-group/radio-group.ts b/packages/web-components/src/radio-group/radio-group.ts
index 64d45d27e9b62d..67f8b0d2a2c337 100644
--- a/packages/web-components/src/radio-group/radio-group.ts
+++ b/packages/web-components/src/radio-group/radio-group.ts
@@ -1,11 +1,22 @@
-import { attr } from '@microsoft/fast-element';
-import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js';
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import {
+  ArrowKeys,
+  Direction,
+  keyArrowDown,
+  keyArrowLeft,
+  keyArrowRight,
+  keyArrowUp,
+  keyEnter,
+} from '@microsoft/fast-web-utilities';
+import { Radio } from '../radio/radio.js';
+import { getDirection } from '../utils/index.js';
+import { RadioGroupOrientation } from './radio-group.options.js';
 
 /**
  * The base class used for constructing a fluent-radio-group custom element
  * @public
  */
-export class RadioGroup extends FASTRadioGroup {
+export class RadioGroup extends FASTElement {
   /**
    * sets radio layout styles
    *
@@ -15,4 +26,401 @@ export class RadioGroup extends FASTRadioGroup {
    */
   @attr({ mode: 'boolean' })
   public stacked: boolean = false;
+
+  /**
+   * When true, the child radios will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: readonly
+   */
+  @attr({ attribute: 'readonly', mode: 'boolean' })
+  public readOnly!: boolean;
+
+  /**
+   * Disables the radio group and child radios.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: disabled
+   */
+  @attr({ attribute: 'disabled', mode: 'boolean' })
+  public disabled!: boolean;
+
+  /**
+   * The name of the radio group. Setting this value will set the name value
+   * for all child radio elements.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: name
+   */
+  @attr
+  public name!: string;
+  protected nameChanged(): void {
+    if (this.slottedRadioButtons) {
+      this.slottedRadioButtons.forEach((radio: HTMLElement) => {
+        radio.setAttribute('name', this.name);
+      });
+    }
+  }
+
+  /**
+   * The value of the checked radio
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: value
+   */
+  @attr
+  public value!: string;
+  protected valueChanged(): void {
+    if (this.slottedRadioButtons) {
+      this.slottedRadioButtons.forEach((radio: HTMLElement) => {
+        if (radio instanceof Radio) {
+          if (radio.value === this.value) {
+            radio.checked = true;
+            this.selectedRadio = radio;
+          }
+        }
+      });
+    }
+    this.$emit('change');
+  }
+
+  /**
+   * The orientation of the group
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: orientation
+   */
+  @attr
+  public orientation: RadioGroupOrientation = RadioGroupOrientation.horizontal;
+
+  @observable
+  public childItems!: HTMLElement[];
+
+  /**
+   * @internal
+   */
+  @observable
+  public slottedRadioButtons!: HTMLElement[];
+  protected slottedRadioButtonsChanged(oldValue: unknown, newValue: HTMLElement[]): void {
+    if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
+      this.setupRadioButtons();
+    }
+  }
+
+  private selectedRadio!: Radio | null;
+  private focusedRadio!: Radio | null;
+  private direction!: Direction;
+
+  private get parentToolbar(): HTMLElement | null {
+    return this.closest('[role="toolbar"]');
+  }
+
+  private get isInsideToolbar(): boolean {
+    return (this.parentToolbar ?? false) as boolean;
+  }
+
+  private get isInsideFoundationToolbar(): boolean {
+    return !!this.parentToolbar?.hasOwnProperty('$fastController');
+  }
+
+  /**
+   * @internal
+   */
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.direction = getDirection(this);
+
+    this.setupRadioButtons();
+  }
+
+  public disconnectedCallback(): void {
+    this.slottedRadioButtons.forEach((radio: HTMLElement) => {
+      if (radio instanceof Radio) {
+        radio.removeEventListener('change', this.radioChangeHandler);
+      }
+    });
+  }
+
+  private setupRadioButtons(): void {
+    const checkedRadios: HTMLElement[] = this.slottedRadioButtons.filter((radio: HTMLElement) => {
+      return radio.hasAttribute('checked');
+    });
+    const numberOfCheckedRadios: number = checkedRadios ? checkedRadios.length : 0;
+    if (numberOfCheckedRadios > 1) {
+      const lastCheckedRadio: Radio = checkedRadios[numberOfCheckedRadios - 1] as Radio;
+      lastCheckedRadio.checked = true;
+    }
+    let foundMatchingVal: boolean = false;
+
+    this.slottedRadioButtons.forEach((radio: HTMLElement) => {
+      if (radio instanceof Radio) {
+        if (this.name !== undefined) {
+          radio.setAttribute('name', this.name);
+        }
+
+        if (this.value && this.value === radio.value) {
+          this.selectedRadio = radio;
+          this.focusedRadio = radio;
+          radio.checked = true;
+          radio.setAttribute('tabindex', '0');
+          foundMatchingVal = true;
+        } else {
+          if (!this.isInsideFoundationToolbar) {
+            radio.setAttribute('tabindex', '-1');
+          }
+          radio.checked = false;
+        }
+
+        radio.addEventListener('change', this.radioChangeHandler);
+      }
+    });
+
+    if (this.value === undefined && this.slottedRadioButtons.length > 0) {
+      const checkedRadios: HTMLElement[] = this.slottedRadioButtons.filter((radio: HTMLElement) => {
+        return radio.hasAttribute('checked');
+      });
+      const numberOfCheckedRadios: number = checkedRadios !== null ? checkedRadios.length : 0;
+      if (numberOfCheckedRadios > 0 && !foundMatchingVal) {
+        const lastCheckedRadio: Radio = checkedRadios[numberOfCheckedRadios - 1] as Radio;
+        lastCheckedRadio.checked = true;
+        this.focusedRadio = lastCheckedRadio;
+        lastCheckedRadio.setAttribute('tabindex', '0');
+      } else {
+        this.slottedRadioButtons[0].setAttribute('tabindex', '0');
+        this.focusedRadio = this.slottedRadioButtons[0] as Radio;
+      }
+    }
+  }
+
+  private radioChangeHandler = (e: Event): boolean | void => {
+    const changedRadio: Radio = e.target as Radio;
+
+    if (changedRadio.checked) {
+      this.slottedRadioButtons.forEach((radio: HTMLElement) => {
+        if (radio instanceof Radio && radio !== changedRadio) {
+          radio.checked = false;
+          if (!this.isInsideFoundationToolbar) {
+            radio.setAttribute('tabindex', '-1');
+          }
+        }
+      });
+      this.selectedRadio = changedRadio;
+      this.value = changedRadio.value;
+      changedRadio.setAttribute('tabindex', '0');
+      this.focusedRadio = changedRadio;
+    }
+    e.stopPropagation();
+  };
+
+  private moveToRadioByIndex = (group: HTMLElement[], index: number) => {
+    const radio: Radio = group[index] as Radio;
+    if (!this.isInsideToolbar) {
+      radio.setAttribute('tabindex', '0');
+      radio.checked = true;
+      this.selectedRadio = radio;
+    }
+    this.focusedRadio = radio;
+    radio.focus();
+  };
+
+  private moveRightOffGroup = () => {
+    (this.nextElementSibling as Radio)?.focus();
+  };
+
+  private moveLeftOffGroup = () => {
+    (this.previousElementSibling as Radio)?.focus();
+  };
+
+  /**
+   * @internal
+   */
+  public focusOutHandler = (e: FocusEvent): boolean | void => {
+    const group: HTMLElement[] = this.slottedRadioButtons;
+    const radio: Radio | null = e.target as Radio;
+    const index: number = radio !== null ? group.indexOf(radio) : 0;
+    const focusedIndex: number = this.focusedRadio ? group.indexOf(this.focusedRadio) : -1;
+
+    if (
+      (focusedIndex === 0 && index === focusedIndex) ||
+      (focusedIndex === group.length - 1 && focusedIndex === index)
+    ) {
+      if (!this.selectedRadio) {
+        this.focusedRadio = group[0] as Radio;
+        this.focusedRadio.setAttribute('tabindex', '0');
+        group.forEach((nextRadio: HTMLElement) => {
+          if (radio instanceof Radio && nextRadio !== this.focusedRadio) {
+            nextRadio.setAttribute('tabindex', '-1');
+          }
+        });
+      } else {
+        this.focusedRadio = this.selectedRadio;
+
+        if (!this.isInsideFoundationToolbar) {
+          this.selectedRadio.setAttribute('tabindex', '0');
+          group.forEach((nextRadio: HTMLElement) => {
+            if (nextRadio !== this.selectedRadio) {
+              nextRadio.setAttribute('tabindex', '-1');
+            }
+          });
+        }
+      }
+    }
+    return true;
+  };
+
+  /**
+   * @internal
+   */
+  public handleDisabledClick = (e: MouseEvent): void | boolean => {
+    // prevent focus events on items from the click handler when disabled
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    return true;
+  };
+
+  /**
+   * @internal
+   */
+  public clickHandler = (e: MouseEvent): void | boolean => {
+    if (this.disabled) {
+      return;
+    }
+
+    e.preventDefault();
+    const radio: Radio | null = e.target as Radio;
+
+    if (radio && radio instanceof Radio) {
+      radio.checked = true;
+      radio.setAttribute('tabindex', '0');
+      this.selectedRadio = radio;
+      this.focusedRadio = radio;
+    }
+  };
+
+  private shouldMoveOffGroupToTheRight = (index: number, group: HTMLElement[], key: string): boolean => {
+    return index === group.length && this.isInsideToolbar && key === keyArrowRight;
+  };
+
+  private shouldMoveOffGroupToTheLeft = (group: HTMLElement[], key: string): boolean => {
+    const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
+    return index < 0 && this.isInsideToolbar && key === keyArrowLeft;
+  };
+
+  private checkFocusedRadio = (): void => {
+    if (this.focusedRadio !== null && !this.focusedRadio.checked) {
+      this.focusedRadio.checked = true;
+      this.focusedRadio.setAttribute('tabindex', '0');
+      this.focusedRadio.focus();
+      this.selectedRadio = this.focusedRadio;
+    }
+  };
+
+  private moveRight = (e: KeyboardEvent): void => {
+    const group: HTMLElement[] = this.slottedRadioButtons;
+    let index: number = 0;
+
+    index = this.focusedRadio ? group.indexOf(this.focusedRadio) + 1 : 1;
+    if (this.shouldMoveOffGroupToTheRight(index, group, e.key)) {
+      this.moveRightOffGroup();
+      return;
+    } else if (index === group.length) {
+      index = 0;
+    }
+    /* looping to get to next radio that is not disabled */
+    /* matching native radio/radiogroup which does not select an item if there is only 1 in the group */
+    while (index < group.length && group.length > 1) {
+      if (!(group[index] as Radio).disabled) {
+        this.moveToRadioByIndex(group, index);
+        break;
+      } else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
+        break;
+      } else if (index + 1 >= group.length) {
+        if (this.isInsideToolbar) {
+          break;
+        } else {
+          index = 0;
+        }
+      } else {
+        index += 1;
+      }
+    }
+  };
+
+  private moveLeft = (e: KeyboardEvent): void => {
+    const group: HTMLElement[] = this.slottedRadioButtons;
+    let index: number = 0;
+
+    index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
+    index = index < 0 ? group.length - 1 : index;
+
+    if (this.shouldMoveOffGroupToTheLeft(group, e.key)) {
+      this.moveLeftOffGroup();
+      return;
+    }
+    /* looping to get to next radio that is not disabled */
+    while (index >= 0 && group.length > 1) {
+      if (!(group[index] as Radio).disabled) {
+        this.moveToRadioByIndex(group, index);
+        break;
+      } else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
+        break;
+      } else if (index - 1 < 0) {
+        index = group.length - 1;
+      } else {
+        index -= 1;
+      }
+    }
+  };
+
+  /**
+   * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
+   * navigation is different when there is an ancestor with role='toolbar'
+   *
+   * @internal
+   */
+  public keydownHandler = (e: KeyboardEvent): boolean | void => {
+    const key = e.key;
+
+    if (key in ArrowKeys && (this.isInsideFoundationToolbar || this.disabled)) {
+      return true;
+    }
+
+    switch (key) {
+      case keyEnter: {
+        this.checkFocusedRadio();
+        break;
+      }
+
+      case keyArrowRight:
+      case keyArrowDown: {
+        if (this.direction === Direction.ltr) {
+          this.moveRight(e);
+        } else {
+          this.moveLeft(e);
+        }
+        break;
+      }
+
+      case keyArrowLeft:
+      case keyArrowUp: {
+        if (this.direction === Direction.ltr) {
+          this.moveLeft(e);
+        } else {
+          this.moveRight(e);
+        }
+        break;
+      }
+
+      default: {
+        return true;
+      }
+    }
+  };
 }
diff --git a/packages/web-components/src/radio/radio.form-associated.ts b/packages/web-components/src/radio/radio.form-associated.ts
new file mode 100644
index 00000000000000..dcb8e3df668371
--- /dev/null
+++ b/packages/web-components/src/radio/radio.form-associated.ts
@@ -0,0 +1,13 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { CheckableFormAssociated } from '../form-associated/form-associated.js';
+
+class _Radio extends FASTElement {}
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+interface _Radio extends CheckableFormAssociated {}
+
+/**
+ * @beta
+ */
+export class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
+  proxy = document.createElement('input');
+}
diff --git a/packages/web-components/src/radio/radio.template.ts b/packages/web-components/src/radio/radio.template.ts
index 7fd8bcb11b8c3c..81ee30c02fb06b 100644
--- a/packages/web-components/src/radio/radio.template.ts
+++ b/packages/web-components/src/radio/radio.template.ts
@@ -1,6 +1,33 @@
-import { ElementViewTemplate, html } from '@microsoft/fast-element';
-import { radioTemplate } from '@microsoft/fast-foundation/radio.js';
-import type { Radio } from './radio.js';
+import { ElementViewTemplate, html, slotted } from '@microsoft/fast-element';
+import { staticallyCompose, whitespaceFilter } from '../utils/index.js';
+import type { Radio, RadioOptions } from './radio.js';
+
+export function radioTemplate<T extends Radio>(options: RadioOptions = {}): ElementViewTemplate<T> {
+  return html<T>`
+    <template
+      role="radio"
+      aria-checked="${x => x.checked}"
+      aria-required="${x => x.required}"
+      aria-disabled="${x => x.disabled}"
+      @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
+    >
+      <div part="control" class="control">
+        <slot name="checked-indicator"> ${staticallyCompose(options.checkedIndicator)} </slot>
+      </div>
+      <label
+        part="label"
+        class="${x => ['label', !x.defaultSlottedNodes?.length && 'label__hidden'].filter(Boolean).join(' ')}"
+      >
+        <slot
+          ${slotted({
+            property: 'defaultSlottedNodes',
+            filter: whitespaceFilter,
+          })}
+        ></slot>
+      </label>
+    </template>
+  `;
+}
 
 export const template: ElementViewTemplate<Radio> = radioTemplate({
   checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`,
diff --git a/packages/web-components/src/radio/radio.ts b/packages/web-components/src/radio/radio.ts
index 68e981ad584990..5fc1b859f4ee85 100644
--- a/packages/web-components/src/radio/radio.ts
+++ b/packages/web-components/src/radio/radio.ts
@@ -1,7 +1,122 @@
-import { FASTRadio } from '@microsoft/fast-foundation/radio.js';
+import { observable } from '@microsoft/fast-element';
+import { keySpace } from '@microsoft/fast-web-utilities';
+import type { RadioGroup } from '../radio-group/index.js';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import { FormAssociatedRadio } from './radio.form-associated.js';
 
 /**
- * The base class used for constructing a fluent-radio custom element
  * @public
  */
-export class Radio extends FASTRadio {}
+export type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
+
+/**
+ * Radio configuration options
+ * @public
+ */
+export type RadioOptions = {
+  checkedIndicator?: StaticallyComposableHTML<Radio>;
+};
+
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+export class Radio extends FormAssociatedRadio implements RadioControl {
+  /**
+   * The name of the radio. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute} for more info.
+   */
+  @observable
+  public name!: string;
+
+  /**
+   * The element's value to be included in form submission when checked.
+   * Default to "on" to reach parity with input[type="radio"]
+   *
+   * @internal
+   */
+  public initialValue: string = 'on';
+
+  /**
+   * @internal
+   */
+  @observable
+  public defaultSlottedNodes!: Node[];
+
+  private get radioGroup() {
+    return (this as HTMLElement).closest('[role=radiogroup]') as RadioGroup | null;
+  }
+
+  /**
+   * @internal
+   */
+  public defaultCheckedChanged(): void {
+    if (this.$fastController.isConnected && !this.dirtyChecked) {
+      // Setting this.checked will cause us to enter a dirty state,
+      // but if we are clean when defaultChecked is changed, we want to stay
+      // in a clean state, so reset this.dirtyChecked
+      if (!this.isInsideRadioGroup()) {
+        this.checked = this.defaultChecked ?? false;
+        this.dirtyChecked = false;
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.proxy.setAttribute('type', 'radio');
+  }
+
+  /**
+   * @internal
+   */
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.validate();
+
+    if (this.parentElement?.getAttribute('role') !== 'radiogroup' && this.getAttribute('tabindex') === null) {
+      if (!this.disabled) {
+        this.setAttribute('tabindex', '0');
+      }
+    }
+
+    if (this.checkedAttribute) {
+      if (!this.dirtyChecked) {
+        // Setting this.checked will cause us to enter a dirty state,
+        // but if we are clean when defaultChecked is changed, we want to stay
+        // in a clean state, so reset this.dirtyChecked
+        if (!this.isInsideRadioGroup()) {
+          this.checked = this.defaultChecked ?? false;
+          this.dirtyChecked = false;
+        }
+      }
+    }
+  }
+
+  private isInsideRadioGroup(): boolean {
+    return this.radioGroup !== null;
+  }
+
+  /**
+   * Handles key presses on the radio.
+   * @beta
+   */
+  public keypressHandler(e: KeyboardEvent): boolean | void {
+    switch (e.key) {
+      case keySpace:
+        if (!this.checked && !this.radioGroup?.readOnly) {
+          this.checked = true;
+        }
+        return;
+    }
+
+    return true;
+  }
+}
diff --git a/packages/web-components/src/slider/slider-utilities.ts b/packages/web-components/src/slider/slider-utilities.ts
new file mode 100644
index 00000000000000..c797169cd9bc25
--- /dev/null
+++ b/packages/web-components/src/slider/slider-utilities.ts
@@ -0,0 +1,17 @@
+import { Direction, limit } from '@microsoft/fast-web-utilities';
+
+/**
+ * Converts a pixel coordinate on the track to a percent of the track's range
+ */
+export function convertPixelToPercent(
+  pixelPos: number,
+  minPosition: number,
+  maxPosition: number,
+  direction?: Direction,
+): number {
+  let pct: number = limit(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
+  if (direction === Direction.rtl) {
+    pct = 1 - pct;
+  }
+  return pct;
+}
diff --git a/packages/web-components/src/slider/slider.form-associated.ts b/packages/web-components/src/slider/slider.form-associated.ts
new file mode 100644
index 00000000000000..c995b59df986c2
--- /dev/null
+++ b/packages/web-components/src/slider/slider.form-associated.ts
@@ -0,0 +1,13 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+
+class _Slider extends FASTElement {}
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+interface _Slider extends FormAssociated {}
+
+/**
+ * @beta
+ */
+export class FormAssociatedSlider extends FormAssociated(_Slider) {
+  proxy = document.createElement('input');
+}
diff --git a/packages/web-components/src/slider/slider.options.ts b/packages/web-components/src/slider/slider.options.ts
index d09f22571d58cb..b54abd3229f79a 100644
--- a/packages/web-components/src/slider/slider.options.ts
+++ b/packages/web-components/src/slider/slider.options.ts
@@ -1,5 +1,7 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
-export { SliderOrientation } from '@microsoft/fast-foundation/slider.js';
+import type { Direction } from '@microsoft/fast-web-utilities';
+import { Orientation } from '@microsoft/fast-web-utilities';
+import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
+import type { Slider } from './slider.js';
 
 /**
  * SliderSize Constants
@@ -15,3 +17,46 @@ export const SliderSize = {
  * @public
  */
 export type SliderSize = ValuesOf<typeof SliderSize>;
+
+/**
+ * @public
+ */
+export const SliderOrientation = Orientation;
+
+/**
+ * The types for the orientation of the slider
+ * @public
+ */
+export type SliderOrientation = ValuesOf<typeof SliderOrientation>;
+
+/**
+ * @public
+ */
+export const SliderMode = {
+  singleValue: 'single-value',
+} as const;
+
+/**
+ * The types for the selection mode of the slider
+ * @public
+ */
+export type SliderMode = ValuesOf<typeof SliderMode>;
+
+/**
+ * @public
+ */
+export interface SliderConfiguration {
+  max: number;
+  min: number;
+  orientation?: SliderOrientation;
+  direction?: Direction;
+  disabled?: boolean;
+}
+
+/**
+ * Slider configuration options
+ * @public
+ */
+export type SliderOptions = {
+  thumb?: StaticallyComposableHTML<Slider>;
+};
diff --git a/packages/web-components/src/slider/slider.template.ts b/packages/web-components/src/slider/slider.template.ts
index 01093bccd4a8f7..a33d6f4bcef41e 100644
--- a/packages/web-components/src/slider/slider.template.ts
+++ b/packages/web-components/src/slider/slider.template.ts
@@ -1,6 +1,46 @@
+import { html, ref } from '@microsoft/fast-element';
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { FASTSlider, sliderTemplate } from '@microsoft/fast-foundation/slider.js';
+import { staticallyCompose } from '../utils/template-helpers.js';
+import { SliderOptions } from './slider.options.js';
+import { Slider } from './slider.js';
 
-export const template: ElementViewTemplate<FASTSlider> = sliderTemplate({
+export function sliderTemplate<T extends Slider>(options: SliderOptions = {}): ElementViewTemplate<T> {
+  return html<T>`
+    <template
+      role="slider"
+      tabindex="${x => (x.disabled ? null : 0)}"
+      aria-valuetext="${x => x.valueTextFormatter(x.value)}"
+      aria-valuenow="${x => x.value}"
+      aria-valuemin="${x => x.min}"
+      aria-valuemax="${x => x.max}"
+      aria-disabled="${x => (x.disabled ? true : void 0)}"
+      aria-readonly="${x => (x.readOnly ? true : void 0)}"
+      aria-orientation="${x => x.orientation}"
+      class="${x => x.orientation}"
+    >
+      <div part="positioning-region" class="positioning-region">
+        <div ${ref('track')} part="track-container" class="track">
+          <slot name="track"></slot>
+          <div part="track-start" class="track-start" style="${x => x.position}">
+            <slot name="track-start"></slot>
+          </div>
+        </div>
+        <slot></slot>
+        <div
+          ${ref('thumb')}
+          part="thumb-container"
+          class="thumb-container"
+          style="${x => x.position}"
+          @mousedown="${(x, c) => x.handleThumbMouseDown(c.event as MouseEvent)}"
+          @touchstart="${(x, c) => x.handleThumbMouseDown(c.event as MouseEvent)}"
+        >
+          <slot name="thumb">${staticallyCompose(options.thumb)}</slot>
+        </div>
+      </div>
+    </template>
+  `;
+}
+
+export const template: ElementViewTemplate<Slider> = sliderTemplate({
   thumb: `<div class="thumb-cursor" tabindex="0"></div>`,
 });
diff --git a/packages/web-components/src/slider/slider.ts b/packages/web-components/src/slider/slider.ts
index 56470f6fdb50a6..d9b8e2c64ce2bb 100644
--- a/packages/web-components/src/slider/slider.ts
+++ b/packages/web-components/src/slider/slider.ts
@@ -1,13 +1,26 @@
-import { attr, css, Observable } from '@microsoft/fast-element';
+import { attr, css, nullableNumberConverter, observable, Observable } from '@microsoft/fast-element';
 import type { ElementStyles } from '@microsoft/fast-element';
-import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
-import type { SliderSize } from './slider.options.js';
+import {
+  Direction,
+  keyArrowDown,
+  keyArrowLeft,
+  keyArrowRight,
+  keyArrowUp,
+  keyEnd,
+  keyHome,
+  limit,
+  Orientation,
+} from '@microsoft/fast-web-utilities';
+import { getDirection } from '../utils/index.js';
+import { SliderConfiguration, SliderMode, SliderSize } from './slider.options.js';
+import { FormAssociatedSlider } from './slider.form-associated.js';
+import { convertPixelToPercent } from './slider-utilities.js';
 
 /**
  * The base class used for constructing a fluent-slider custom element
  * @public
  */
-export class Slider extends FASTSlider {
+export class Slider extends FormAssociatedSlider implements SliderConfiguration {
   /**
    * The size of the slider
    * @public
@@ -29,9 +42,246 @@ export class Slider extends FASTSlider {
     }
   }
 
+  private stepStyles?: ElementStyles;
+
+  /**
+   * Handles changes to step styling based on the step value
+   * NOTE: This function is not a changed callback, stepStyles is not observable
+   */
+  private handleStepStyles(): void {
+    if (this.step) {
+      const totalSteps = (100 / Math.floor((this.max - this.min) / this.step)) as any;
+
+      if (this.stepStyles !== undefined) {
+        this.$fastController.removeStyles(this.stepStyles);
+      }
+
+      this.stepStyles = css/**css*/ `
+        :host {
+          --step-rate: ${totalSteps}%;
+          color: blue;
+        }
+      `;
+
+      this.$fastController.addStyles(this.stepStyles);
+    } else if (this.stepStyles !== undefined) {
+      this.$fastController.removeStyles(this.stepStyles);
+    }
+  }
+
+  /**
+   * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: readonly
+   */
+  @attr({ attribute: 'readonly', mode: 'boolean' })
+  public readOnly!: boolean; // Map to proxy element
+  protected readOnlyChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
+  }
+
+  /**
+   * @internal
+   */
+  public track!: HTMLDivElement;
+
+  /**
+   * @internal
+   */
+  public thumb!: HTMLDivElement;
+
+  /**
+   * @internal
+   */
+  public stepMultiplier!: number;
+
+  /**
+   * @internal
+   */
+  @observable
+  public direction: Direction = Direction.ltr;
+
+  /**
+   * @internal
+   */
+  @observable
+  public isDragging: boolean = false;
+
+  /**
+   * @internal
+   */
+  @observable
+  public position!: string;
+
+  /**
+   * @internal
+   */
+  @observable
+  public trackWidth: number = 0;
+
+  /**
+   * @internal
+   */
+  @observable
+  public trackMinWidth: number = 0;
+
+  /**
+   * @internal
+   */
+  @observable
+  public trackHeight: number = 0;
+
+  /**
+   * @internal
+   */
+  @observable
+  public trackLeft: number = 0;
+
+  /**
+   * @internal
+   */
+  @observable
+  public trackMinHeight: number = 0;
+
+  /**
+   * The value property, typed as a number.
+   *
+   * @public
+   */
+  public get valueAsNumber(): number {
+    return parseFloat(super.value);
+  }
+
+  public set valueAsNumber(next: number) {
+    this.value = next.toString();
+  }
+
+  /**
+   * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
+   *
+   * @public
+   */
+  @observable
+  public valueTextFormatter: (value: string) => string | null = () => null;
+
+  /**
+   * @internal
+   */
+  public valueChanged(previous: string, next: string): void {
+    if (this.$fastController.isConnected) {
+      const nextAsNumber = parseFloat(next);
+      const value = limit(this.min, this.max, this.convertToConstrainedValue(nextAsNumber)).toString();
+
+      if (value !== next) {
+        this.value = value;
+        return;
+      }
+
+      super.valueChanged(previous, next);
+
+      this.setThumbPositionForOrientation(this.direction);
+
+      this.$emit('change');
+    }
+  }
+
+  /**
+   * The minimum allowed value.
+   *
+   * @defaultValue - 0
+   * @public
+   * @remarks
+   * HTML Attribute: min
+   */
+  @attr({ converter: nullableNumberConverter })
+  public min: number = 0; // Map to proxy element.
+  protected minChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.min = `${this.min}`;
+    }
+
+    this.validate();
+  }
+
+  /**
+   * The maximum allowed value.
+   *
+   * @defaultValue - 10
+   * @public
+   * @remarks
+   * HTML Attribute: max
+   */
+  @attr({ converter: nullableNumberConverter })
+  public max: number = 10; // Map to proxy element.
+  protected maxChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.max = `${this.max}`;
+    }
+    this.validate();
+  }
+
+  /**
+   * Value to increment or decrement via arrow keys, mouse click or drag.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: step
+   */
+  @attr({ converter: nullableNumberConverter })
+  public step: number | undefined;
+  protected stepChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.step = `${this.step}`;
+    }
+
+    this.updateStepMultiplier();
+    this.validate();
+  }
+
+  /**
+   * The orientation of the slider.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: orientation
+   */
+  @attr
+  public orientation: Orientation = Orientation.horizontal;
+  protected orientationChanged(): void {
+    if (this.$fastController.isConnected) {
+      this.setThumbPositionForOrientation(this.direction);
+    }
+  }
+
+  /**
+   * The selection mode.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: mode
+   */
+  @attr
+  public mode: SliderMode = SliderMode.singleValue;
+
+  /**
+   * @internal
+   */
   public connectedCallback(): void {
     super.connectedCallback();
 
+    this.proxy.setAttribute('type', 'range');
+
+    this.direction = getDirection(this);
+    this.updateStepMultiplier();
+    this.setupTrackConstraints();
+    this.setupListeners();
+    this.setupDefaultValue();
+    this.setThumbPositionForOrientation(this.direction);
+
     Observable.getNotifier(this).subscribe(this, 'max');
     Observable.getNotifier(this).subscribe(this, 'min');
     Observable.getNotifier(this).subscribe(this, 'step');
@@ -39,38 +289,274 @@ export class Slider extends FASTSlider {
     this.handleStepStyles();
   }
 
+  /**
+   * @internal
+   */
   public disconnectedCallback(): void {
     super.disconnectedCallback();
 
+    this.setupListeners(true);
+
     Observable.getNotifier(this).unsubscribe(this, 'max');
     Observable.getNotifier(this).unsubscribe(this, 'min');
     Observable.getNotifier(this).unsubscribe(this, 'step');
   }
 
-  private stepStyles?: ElementStyles;
+  /**
+   * Increment the value by the step
+   *
+   * @public
+   */
+  public increment(): void {
+    const newVal: number =
+      this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
+        ? Number(this.value) + Number(this.stepValue)
+        : Number(this.value) + Number(this.stepValue);
+    const incrementedVal: number = this.convertToConstrainedValue(newVal);
+    const incrementedValString: string = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
+    this.value = incrementedValString;
+  }
 
   /**
-   * Handles changes to step styling based on the step value
-   * NOTE: This function is not a changed callback, stepStyles is not observable
+   * Decrement the value by the step
+   *
+   * @public
    */
-  private handleStepStyles(): void {
-    if (this.step) {
-      const totalSteps = (100 / Math.floor((this.max - this.min) / this.step)) as any;
+  public decrement(): void {
+    const newVal =
+      this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
+        ? Number(this.value) - Number(this.stepValue)
+        : Number(this.value) - Number(this.stepValue);
+    const decrementedVal: number = this.convertToConstrainedValue(newVal);
+    const decrementedValString: string = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
+    this.value = decrementedValString;
+  }
 
-      if (this.stepStyles !== undefined) {
-        this.$fastController.removeStyles(this.stepStyles);
+  public keypressHandler = (e: KeyboardEvent): void => {
+    if (this.readOnly || this.disabled) {
+      return;
+    }
+
+    if (e.key === keyHome) {
+      e.preventDefault();
+      this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
+        ? (this.value = `${this.min}`)
+        : (this.value = `${this.max}`);
+    } else if (e.key === keyEnd) {
+      e.preventDefault();
+      this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
+        ? (this.value = `${this.max}`)
+        : (this.value = `${this.min}`);
+    } else if (!e.shiftKey) {
+      switch (e.key) {
+        case keyArrowRight:
+        case keyArrowUp:
+          e.preventDefault();
+          this.increment();
+          break;
+        case keyArrowLeft:
+        case keyArrowDown:
+          e.preventDefault();
+          this.decrement();
+          break;
       }
+    }
+  };
 
-      this.stepStyles = css/**css*/ `
-        :host {
-          --step-rate: ${totalSteps}%;
-          color: blue;
+  /**
+   * Gets the actual step value for the slider
+   *
+   */
+  private get stepValue(): number {
+    return this.step === undefined ? 1 : this.step;
+  }
+
+  /**
+   * Places the thumb based on the current value
+   *
+   * @public
+   * @param direction - writing mode
+   */
+  private setThumbPositionForOrientation(direction: Direction): void {
+    const newPct: number = convertPixelToPercent(Number(this.value), Number(this.min), Number(this.max), direction);
+    const percentage: number = (1 - newPct) * 100;
+    if (this.orientation === Orientation.horizontal) {
+      this.position = this.isDragging
+        ? `right: ${percentage}%; transition: none;`
+        : `right: ${percentage}%; transition: all 0.2s ease;`;
+    } else {
+      this.position = this.isDragging
+        ? `top: ${percentage}%; transition: none;`
+        : `top: ${percentage}%; transition: all 0.2s ease;`;
+    }
+  }
+
+  /**
+   * Update the step multiplier used to ensure rounding errors from steps that
+   * are not whole numbers
+   */
+  private updateStepMultiplier(): void {
+    const stepString: string = this.stepValue + '';
+    const decimalPlacesOfStep: number = !!(this.stepValue % 1) ? stepString.length - stepString.indexOf('.') - 1 : 0;
+    this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
+  }
+
+  private setupTrackConstraints = (): void => {
+    const clientRect: DOMRect = this.track.getBoundingClientRect();
+    this.trackWidth = this.track.clientWidth;
+    this.trackMinWidth = this.track.clientLeft;
+    this.trackHeight = clientRect.top;
+    this.trackMinHeight = clientRect.bottom;
+    this.trackLeft = this.getBoundingClientRect().left;
+    if (this.trackWidth === 0) {
+      this.trackWidth = 1;
+    }
+  };
+
+  //Remove
+  private setupListeners = (remove: boolean = false): void => {
+    //TODO Bug: https://github.com/microsoft/fluentui/issues/30087
+    this.addEventListener('keydown', this.keypressHandler);
+    this.addEventListener('mousedown', this.handleMouseDown);
+    // removes handlers attached by mousedown handlers
+    if (remove) {
+      this.removeEventListener('keydown', this.keypressHandler);
+      this.removeEventListener('mousedown', this.handleMouseDown);
+    }
+  };
+
+  /**
+   * @internal
+   */
+  public initialValue: string = '';
+
+  private get midpoint(): string {
+    return `${this.convertToConstrainedValue((this.max + this.min) / 2)}`;
+  }
+
+  private setupDefaultValue(): void {
+    if (typeof this.value === 'string') {
+      if (this.value.length === 0) {
+        this.initialValue = this.midpoint;
+      } else {
+        const value = parseFloat(this.value);
+
+        if (!Number.isNaN(value) && (value < this.min || value > this.max)) {
+          this.value = this.midpoint;
         }
-      `;
+      }
+    }
+  }
 
-      this.$fastController.addStyles(this.stepStyles);
-    } else if (this.stepStyles !== undefined) {
-      this.$fastController.removeStyles(this.stepStyles);
+  /**
+   *  Handle mouse moves during a thumb drag operation
+   *  If the event handler is null it removes the events
+   */
+  public handleThumbMouseDown = (event: MouseEvent | null): void => {
+    const windowFn = event !== null ? window.addEventListener : window.removeEventListener;
+    windowFn('mouseup', this.handleWindowMouseUp);
+    windowFn('mousemove', this.handleMouseMove, { passive: true });
+    windowFn('touchmove', this.handleMouseMove, { passive: true });
+    windowFn('touchend', this.handleWindowMouseUp);
+    this.isDragging = event !== null;
+  };
+
+  /**
+   *  Handle mouse moves during a thumb drag operation
+   */
+  private handleMouseMove = (e: MouseEvent | TouchEvent | Event): void => {
+    if (this.readOnly || this.disabled || e.defaultPrevented) {
+      return;
+    }
+    // update the value based on current position
+    const sourceEvent = window.TouchEvent && e instanceof TouchEvent ? e.touches[0] : (e as MouseEvent);
+    const eventValue: number =
+      this.orientation === Orientation.horizontal
+        ? sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft
+        : sourceEvent.pageY - document.documentElement.scrollTop;
+
+    this.value = `${this.calculateNewValue(eventValue)}`;
+  };
+
+  /**
+   * Calculate the new value based on the given raw pixel value.
+   *
+   * @param rawValue - the value to be converted to a constrained value
+   * @returns the constrained value
+   *
+   * @internal
+   */
+  public calculateNewValue(rawValue: number): number {
+    this.setupTrackConstraints();
+
+    // update the value based on current position
+    const newPosition = convertPixelToPercent(
+      rawValue,
+      this.orientation === Orientation.horizontal ? this.trackMinWidth : this.trackMinHeight,
+      this.orientation === Orientation.horizontal ? this.trackWidth : this.trackHeight,
+      this.direction,
+    );
+    const newValue: number = (this.max - this.min) * newPosition + this.min;
+    return this.convertToConstrainedValue(newValue);
+  }
+
+  /**
+   * Handle a window mouse up during a drag operation
+   */
+  private handleWindowMouseUp = (event: Event): void => {
+    this.stopDragging();
+  };
+
+  private stopDragging = (): void => {
+    this.isDragging = false;
+    this.handleMouseDown(null);
+    this.handleThumbMouseDown(null);
+  };
+
+  /**
+   *
+   * @param e - MouseEvent or null. If there is no event handler it will remove the events
+   */
+  public handleMouseDown = (e: MouseEvent | null) => {
+    if (e === null || (!this.disabled && !this.readOnly)) {
+      const windowFn = e !== null ? window.addEventListener : window.removeEventListener;
+      const documentFn = e !== null ? document.addEventListener : document.removeEventListener;
+      windowFn('mouseup', this.handleWindowMouseUp);
+      documentFn('mouseleave', this.handleWindowMouseUp);
+      windowFn('mousemove', this.handleMouseMove);
+
+      if (e) {
+        this.setupTrackConstraints();
+        const controlValue: number =
+          this.orientation === Orientation.horizontal
+            ? e.pageX - document.documentElement.scrollLeft - this.trackLeft
+            : e.pageY - document.documentElement.scrollTop;
+
+        this.value = `${this.calculateNewValue(controlValue)}`;
+      }
+    }
+  };
+
+  private convertToConstrainedValue(value: number): number {
+    if (isNaN(value)) {
+      value = this.min;
     }
+
+    /**
+     * The following logic intends to overcome the issue with math in JavaScript with regards to floating point numbers.
+     * This is needed as the `step` may be an integer but could also be a float. To accomplish this the step  is assumed to be a float
+     * and is converted to an integer by determining the number of decimal places it represent, multiplying it until it is an
+     * integer and then dividing it to get back to the correct number.
+     */
+    let constrainedValue: number = value - this.min;
+    const roundedConstrainedValue: number = Math.round(constrainedValue / this.stepValue);
+    const remainderValue: number =
+      constrainedValue - (roundedConstrainedValue * (this.stepMultiplier * this.stepValue)) / this.stepMultiplier;
+
+    constrainedValue =
+      remainderValue >= Number(this.stepValue) / 2
+        ? constrainedValue - remainderValue + Number(this.stepValue)
+        : constrainedValue - remainderValue;
+    return constrainedValue + this.min;
   }
 }
diff --git a/packages/web-components/src/spinner/spinner.definition.ts b/packages/web-components/src/spinner/spinner.definition.ts
index edb459e3528552..5102c56bc5d0c0 100644
--- a/packages/web-components/src/spinner/spinner.definition.ts
+++ b/packages/web-components/src/spinner/spinner.definition.ts
@@ -4,10 +4,6 @@ import { styles } from './spinner.styles.js';
 import { template } from './spinner.template.js';
 
 /**
- * The Fluent Spinner Element. Implements {@link @microsoft/fast-foundation#ProgressRing },
- * {@link @microsoft/fast-foundation#progress-ringTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-spinner\>
diff --git a/packages/web-components/src/spinner/spinner.options.ts b/packages/web-components/src/spinner/spinner.options.ts
index 05cd70dac38403..0f7f86eff38ad5 100644
--- a/packages/web-components/src/spinner/spinner.options.ts
+++ b/packages/web-components/src/spinner/spinner.options.ts
@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * SpinnerAppearance constants
diff --git a/packages/web-components/src/spinner/spinner.template.ts b/packages/web-components/src/spinner/spinner.template.ts
index 8b90de4351092a..569aeea632f868 100644
--- a/packages/web-components/src/spinner/spinner.template.ts
+++ b/packages/web-components/src/spinner/spinner.template.ts
@@ -1,7 +1,40 @@
+import { html, when } from '@microsoft/fast-element';
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { progressRingTemplate } from '@microsoft/fast-foundation/progress-ring.js';
+import { ProgressRingOptions } from '../progress-ring/progress-ring.options.js';
+import { staticallyCompose } from '../utils/index.js';
 import { Spinner } from './spinner.js';
 
+const progressSegments: number = 44;
+
+export function progressRingTemplate<T extends Spinner>(options: ProgressRingOptions = {}): ElementViewTemplate<T> {
+  return html<T>`
+    <template
+      role="progressbar"
+      aria-valuenow="${x => x.value}"
+      aria-valuemin="${x => x.min}"
+      aria-valuemax="${x => x.max}"
+    >
+      ${when(
+        x => typeof x.value === 'number',
+        html<T>`
+          <svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate">
+            <circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle>
+            <circle
+              class="determinate"
+              part="determinate"
+              style="stroke-dasharray: ${x => (progressSegments * x.percentComplete) / 100}px ${progressSegments}px"
+              cx="8px"
+              cy="8px"
+              r="7px"
+            ></circle>
+          </svg>
+        `,
+        html<T>` <slot name="indeterminate"> ${staticallyCompose(options.indeterminateIndicator)} </slot> `,
+      )}
+    </template>
+  `;
+}
+
 export const template: ElementViewTemplate<Spinner> = progressRingTemplate({
   indeterminateIndicator: `
     <svg class="progress" part="progress" viewBox="0 0 16 16">
diff --git a/packages/web-components/src/spinner/spinner.ts b/packages/web-components/src/spinner/spinner.ts
index 1ea2d5c5a1ff47..05a6fe7633c477 100644
--- a/packages/web-components/src/spinner/spinner.ts
+++ b/packages/web-components/src/spinner/spinner.ts
@@ -1,12 +1,12 @@
 import { attr } from '@microsoft/fast-element';
-import { FASTProgressRing } from '@microsoft/fast-foundation/progress-ring.js';
+import { ProgressRing } from '../progress-ring/progress-ring.js';
 import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 
 /**
  * The base class used for constructing a fluent-spinner custom element
  * @public
  */
-export class Spinner extends FASTProgressRing {
+export class Spinner extends ProgressRing {
   /**
    * The size of the spinner
    *
diff --git a/packages/web-components/src/switch/switch.form-associated.ts b/packages/web-components/src/switch/switch.form-associated.ts
new file mode 100644
index 00000000000000..49473cf3ea7445
--- /dev/null
+++ b/packages/web-components/src/switch/switch.form-associated.ts
@@ -0,0 +1,13 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { CheckableFormAssociated } from '../form-associated/form-associated.js';
+
+class _Switch extends FASTElement {}
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+interface _Switch extends CheckableFormAssociated {}
+
+/**
+ * @beta
+ */
+export class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
+  proxy = document.createElement('input');
+}
diff --git a/packages/web-components/src/switch/switch.options.ts b/packages/web-components/src/switch/switch.options.ts
index eba04e567c31d0..5319d60d1ce3c5 100644
--- a/packages/web-components/src/switch/switch.options.ts
+++ b/packages/web-components/src/switch/switch.options.ts
@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * SwitchLabelPosition Constants
diff --git a/packages/web-components/src/switch/switch.template.ts b/packages/web-components/src/switch/switch.template.ts
index 08c12199a9d4ed..7dd2710e9a5794 100644
--- a/packages/web-components/src/switch/switch.template.ts
+++ b/packages/web-components/src/switch/switch.template.ts
@@ -1,6 +1,30 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { switchTemplate } from '@microsoft/fast-foundation/switch.js';
-import { Switch } from './switch.js';
+import { ElementViewTemplate, html, slotted } from '@microsoft/fast-element';
+import { staticallyCompose } from '../utils/index.js';
+import { Switch, SwitchOptions } from './switch.js';
+
+export function switchTemplate<T extends Switch>(options: SwitchOptions = {}): ElementViewTemplate<T> {
+  return html<T>`
+    <template
+      role="switch"
+      aria-checked="${x => x.checked}"
+      aria-disabled="${x => x.disabled}"
+      aria-readonly="${x => x.readOnly}"
+      tabindex="${x => (x.disabled ? null : 0)}"
+      @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
+      @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+    >
+      <label
+        part="label"
+        class="${x => (x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden')}"
+      >
+        <slot ${slotted('defaultSlottedNodes')}></slot>
+      </label>
+      <div part="switch" class="switch">
+        <slot name="switch">${staticallyCompose(options.switch)}</slot>
+      </div>
+    </template>
+  `;
+}
 
 export const template: ElementViewTemplate<Switch> = switchTemplate({
   switch: `<span class="checked-indicator" part="checked-indicator"></span>`,
diff --git a/packages/web-components/src/switch/switch.ts b/packages/web-components/src/switch/switch.ts
index bf5bbcb79d90d0..79b7e2465ca290 100644
--- a/packages/web-components/src/switch/switch.ts
+++ b/packages/web-components/src/switch/switch.ts
@@ -1,8 +1,14 @@
-import { attr } from '@microsoft/fast-element';
-import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
+import { attr, observable } from '@microsoft/fast-element';
+import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
+import type { StaticallyComposableHTML } from '../utils/index.js';
 import { SwitchLabelPosition } from './switch.options.js';
+import { FormAssociatedSwitch } from './switch.form-associated.js';
 
-export class Switch extends FASTSwitch {
+export type SwitchOptions = {
+  switch?: StaticallyComposableHTML<Switch>;
+};
+
+export class Switch extends FormAssociatedSwitch {
   /**
    * The label position of the switch
    *
@@ -13,4 +19,63 @@ export class Switch extends FASTSwitch {
    */
   @attr({ attribute: 'label-position' })
   public labelPosition: SwitchLabelPosition | undefined;
+
+  /**
+   * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: readonly
+   */
+  @attr({ attribute: 'readonly', mode: 'boolean' })
+  public readOnly!: boolean; // Map to proxy element
+  protected readOnlyChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
+  }
+
+  /**
+   * The element's value to be included in form submission when checked.
+   * Default to "on" to reach parity with input[type="checkbox"]
+   *
+   * @internal
+   */
+  public initialValue: string = 'on';
+
+  /**
+   * @internal
+   */
+  @observable
+  public defaultSlottedNodes!: Node[];
+
+  public constructor() {
+    super();
+
+    this.proxy.setAttribute('type', 'checkbox');
+  }
+
+  /**
+   * @internal
+   */
+  public keypressHandler = (e: KeyboardEvent) => {
+    if (this.readOnly) {
+      return;
+    }
+
+    switch (e.key) {
+      case keyEnter:
+      case keySpace:
+        this.checked = !this.checked;
+        break;
+    }
+  };
+
+  /**
+   * @internal
+   */
+  public clickHandler = (e: MouseEvent) => {
+    if (!this.disabled && !this.readOnly) {
+      this.checked = !this.checked;
+    }
+  };
 }
diff --git a/packages/web-components/src/tab-panel/tab-panel.template.ts b/packages/web-components/src/tab-panel/tab-panel.template.ts
index 6482eb13aee55f..1ea75e0bebe688 100644
--- a/packages/web-components/src/tab-panel/tab-panel.template.ts
+++ b/packages/web-components/src/tab-panel/tab-panel.template.ts
@@ -1,3 +1,12 @@
-import { tabPanelTemplate } from '@microsoft/fast-foundation/tab-panel.js';
+import { ElementViewTemplate, html } from '@microsoft/fast-element';
+import { TabPanel } from './tab-panel.js';
+
+export function tabPanelTemplate<T extends TabPanel>(): ElementViewTemplate<T> {
+  return html<T>`
+    <template slot="tabpanel" role="tabpanel">
+      <slot></slot>
+    </template>
+  `;
+}
 
 export const template = tabPanelTemplate();
diff --git a/packages/web-components/src/tab-panel/tab-panel.ts b/packages/web-components/src/tab-panel/tab-panel.ts
index 6601d401762cbd..f79b8435e73b39 100644
--- a/packages/web-components/src/tab-panel/tab-panel.ts
+++ b/packages/web-components/src/tab-panel/tab-panel.ts
@@ -1,3 +1,3 @@
-import { FASTTabPanel } from '@microsoft/fast-foundation/tab-panel.js';
+import { FASTElement } from '@microsoft/fast-element';
 
-export class TabPanel extends FASTTabPanel {}
+export class TabPanel extends FASTElement {}
diff --git a/packages/web-components/src/tab/tab.template.ts b/packages/web-components/src/tab/tab.template.ts
index f84a1181a047cf..1304dcb909a63b 100644
--- a/packages/web-components/src/tab/tab.template.ts
+++ b/packages/web-components/src/tab/tab.template.ts
@@ -1,8 +1,8 @@
-import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation/patterns.js';
-import { FASTTab, TabOptions } from '@microsoft/fast-foundation/tab.js';
 import { ElementViewTemplate, html } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { Tab, TabOptions } from './tab.js';
 
-export function tabTemplate<T extends FASTTab>(options: TabOptions = {}): ElementViewTemplate<T> {
+export function tabTemplate<T extends Tab>(options: TabOptions = {}): ElementViewTemplate<T> {
   return html<T>`
     <template slot="tab" role="tab" aria-disabled="${x => x.disabled}">
       ${startSlotTemplate(options)}
diff --git a/packages/web-components/src/tab/tab.ts b/packages/web-components/src/tab/tab.ts
index 6b9d1b49aa1c44..d059e0dd88562f 100644
--- a/packages/web-components/src/tab/tab.ts
+++ b/packages/web-components/src/tab/tab.ts
@@ -1,10 +1,26 @@
-import { css, ElementStyles } from '@microsoft/fast-element';
-import { FASTTab } from '@microsoft/fast-foundation/tab.js';
+import { attr, css, ElementStyles, FASTElement } from '@microsoft/fast-element';
+import { StartEnd, StartEndOptions } from '../patterns/index.js';
+import { applyMixins } from '../utils/apply-mixins.js';
+
+/**
+ * Tab configuration options
+ * @public
+ */
+export type TabOptions = StartEndOptions<Tab>;
 
 /**
  * Tab extends the FASTTab and is a child of the TabList
  */
-export class Tab extends FASTTab {
+export class Tab extends FASTElement {
+  /**
+   * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: disabled
+   */
+  @attr({ mode: 'boolean' })
+  public disabled!: boolean;
+
   private styles: ElementStyles | undefined;
 
   connectedCallback() {
@@ -23,3 +39,7 @@ export class Tab extends FASTTab {
     this.$fastController.addStyles(this.styles);
   }
 }
+
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+export interface Tab extends StartEnd {}
+applyMixins(Tab, StartEnd);
diff --git a/packages/web-components/src/tabs/tabs.options.ts b/packages/web-components/src/tabs/tabs.options.ts
index 79721e1f2a5a13..c236c1ec53e677 100644
--- a/packages/web-components/src/tabs/tabs.options.ts
+++ b/packages/web-components/src/tabs/tabs.options.ts
@@ -1,5 +1,7 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
-import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
+import { Orientation } from '@microsoft/fast-web-utilities';
+import { StartEndOptions } from '../patterns/index.js';
+import type { ValuesOf } from '../utils/index.js';
+import { Tabs } from './tabs.js';
 
 export const TabsAppearance = {
   subtle: 'subtle',
@@ -16,4 +18,20 @@ export const TabsSize = {
 
 export type TabsSize = ValuesOf<typeof TabsSize>;
 
-export { TabsOrientation };
+/**
+ * Tabs option configuration options
+ * @public
+ */
+export type TabsOptions = StartEndOptions<Tabs>;
+
+/**
+ * The orientation of the component
+ * @public
+ */
+export const TabsOrientation = Orientation;
+
+/**
+ * The types for the Tabs component
+ * @public
+ */
+export type TabsOrientation = ValuesOf<typeof TabsOrientation>;
diff --git a/packages/web-components/src/tabs/tabs.stories.ts b/packages/web-components/src/tabs/tabs.stories.ts
index ba268672bc7c7b..ab5f00a33e0374 100644
--- a/packages/web-components/src/tabs/tabs.stories.ts
+++ b/packages/web-components/src/tabs/tabs.stories.ts
@@ -1,12 +1,11 @@
 import { html } from '@microsoft/fast-element';
-import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
 import type { Args, Meta } from '@storybook/html';
 import { renderComponent } from '../helpers.stories.js';
 import type { Tabs as FluentTabs } from './tabs.js';
 import './define.js';
 import '../tab/define.js';
 import '../tab-panel/define.js';
-import { TabsAppearance as TabsAppearanceValues, TabsSize } from './tabs.options.js';
+import { TabsAppearance as TabsAppearanceValues, TabsOrientation, TabsSize } from './tabs.options.js';
 
 type TabsStoryArgs = Args & FluentTabs;
 type TabsStoryMeta = Meta<TabsStoryArgs>;
diff --git a/packages/web-components/src/tabs/tabs.template.ts b/packages/web-components/src/tabs/tabs.template.ts
index 108322bdc355ad..6371533df2bbcb 100644
--- a/packages/web-components/src/tabs/tabs.template.ts
+++ b/packages/web-components/src/tabs/tabs.template.ts
@@ -1,3 +1,19 @@
-import { tabsTemplate } from '@microsoft/fast-foundation/tabs.js';
+import { ElementViewTemplate, html, slotted } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { Tabs } from './tabs.js';
+import { TabsOptions } from './tabs.options.js';
+
+export function tabsTemplate<T extends Tabs>(options: TabsOptions = {}): ElementViewTemplate<T> {
+  return html<T>`
+    ${startSlotTemplate(options)}
+    <div class="tablist" part="tablist" role="tablist">
+      <slot name="tab" ${slotted('tabs')}></slot>
+    </div>
+    ${endSlotTemplate(options)}
+    <div class="tabpanel" part="tabpanel">
+      <slot name="tabpanel" ${slotted('tabpanels')}></slot>
+    </div>
+  `;
+}
 
 export const template = tabsTemplate({});
diff --git a/packages/web-components/src/tabs/tabs.ts b/packages/web-components/src/tabs/tabs.ts
index f5f844ff9b1d6f..9a3ed654b39631 100644
--- a/packages/web-components/src/tabs/tabs.ts
+++ b/packages/web-components/src/tabs/tabs.ts
@@ -1,17 +1,339 @@
-import { attr, css, ElementStyles } from '@microsoft/fast-element';
-import { FASTTabs, TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
+import { attr, css, ElementStyles, FASTElement, observable } from '@microsoft/fast-element';
+import {
+  keyArrowDown,
+  keyArrowLeft,
+  keyArrowRight,
+  keyArrowUp,
+  keyEnd,
+  keyHome,
+  limit,
+  uniqueId,
+} from '@microsoft/fast-web-utilities';
 import { Tab } from '../index.js';
-import { TabsAppearance, TabsSize } from './tabs.options.js';
+import { applyMixins } from '../utils/apply-mixins.js';
+import { StartEnd } from '../patterns/index.js';
+import { TabsAppearance, TabsOrientation, TabsSize } from './tabs.options.js';
 
 type TabData = Omit<DOMRect, 'top' | 'bottom' | 'left' | 'right' | 'toJSON'>;
 
 /**
- * TabList extends FASTTabs and is used for constructing a fluent-tab-list custom html element.
  *
  * @class TabList component
  * @public
  */
-export class Tabs extends FASTTabs {
+export class BaseTabs extends FASTElement {
+  /**
+   * The orientation
+   * @public
+   * @remarks
+   * HTML Attribute: orientation
+   */
+  @attr
+  public orientation: TabsOrientation = TabsOrientation.horizontal;
+  /**
+   * @internal
+   */
+  public orientationChanged(): void {
+    if (this.$fastController.isConnected) {
+      this.setTabs();
+    }
+  }
+  /**
+   * The id of the active tab
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: activeid
+   */
+  @attr
+  public activeid!: string;
+  /**
+   * @internal
+   */
+  public activeidChanged(oldValue: string, newValue: string): void {
+    if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
+      this.prevActiveTabIndex = this.tabs.findIndex((item: HTMLElement) => item.id === oldValue);
+      this.setTabs();
+    }
+  }
+
+  /**
+   * @internal
+   */
+  @observable
+  public tabs!: HTMLElement[];
+  /**
+   * @internal
+   */
+  public tabsChanged(): void {
+    if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
+      this.tabIds = this.getTabIds();
+      this.tabpanelIds = this.getTabPanelIds();
+
+      this.setTabs();
+    }
+  }
+
+  /**
+   * @internal
+   */
+  @observable
+  public tabpanels!: HTMLElement[];
+  /**
+   * @internal
+   */
+  public tabpanelsChanged(): void {
+    if (this.$fastController.isConnected && this.tabpanels.length <= this.tabs.length) {
+      this.tabIds = this.getTabIds();
+      this.tabpanelIds = this.getTabPanelIds();
+
+      this.setTabs();
+    }
+  }
+
+  /**
+   * A reference to the active tab
+   * @public
+   */
+  public activetab!: HTMLElement;
+
+  private prevActiveTabIndex: number = 0;
+  private activeTabIndex: number = 0;
+  private tabIds!: Array<string>;
+  private tabpanelIds!: Array<string>;
+
+  private change = (): void => {
+    this.$emit('change', this.activetab);
+  };
+
+  private isDisabledElement = (el: Element): el is HTMLElement => {
+    return el.getAttribute('aria-disabled') === 'true';
+  };
+
+  private isHiddenElement = (el: Element): el is HTMLElement => {
+    return el.hasAttribute('hidden');
+  };
+
+  private isFocusableElement = (el: Element): el is HTMLElement => {
+    return !this.isDisabledElement(el) && !this.isHiddenElement(el);
+  };
+
+  private getActiveIndex(): number {
+    const id: string = this.activeid;
+    if (id !== undefined) {
+      return this.tabIds.indexOf(this.activeid) === -1 ? 0 : this.tabIds.indexOf(this.activeid);
+    } else {
+      return 0;
+    }
+  }
+
+  /**
+   * Function that is invoked whenever the selected tab or the tab collection changes.
+   *
+   * @public
+   */
+  protected setTabs(): void {
+    const gridHorizontalProperty: string = 'gridColumn';
+    const gridVerticalProperty: string = 'gridRow';
+    const gridProperty: string = this.isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
+
+    this.activeTabIndex = this.getActiveIndex();
+
+    this.tabs.forEach((tab: HTMLElement, index: number) => {
+      if (tab.slot === 'tab') {
+        const isActiveTab = this.activeTabIndex === index && this.isFocusableElement(tab);
+
+        const tabId: string = this.tabIds[index];
+        const tabpanelId: string = this.tabpanelIds[index];
+        tab.setAttribute('id', tabId);
+        tab.setAttribute('aria-selected', isActiveTab ? 'true' : 'false');
+        tab.setAttribute('aria-controls', tabpanelId);
+        tab.addEventListener('click', this.handleTabClick);
+        tab.addEventListener('keydown', this.handleTabKeyDown);
+        tab.setAttribute('tabindex', isActiveTab ? '0' : '-1');
+        if (isActiveTab) {
+          this.activetab = tab;
+          this.activeid = tabId;
+        }
+      }
+
+      // If the original property isn't emptied out,
+      // the next set will morph into a grid-area style setting that is not what we want
+      tab.style[gridHorizontalProperty as any] = '';
+      tab.style[gridVerticalProperty as any] = '';
+      tab.style[gridProperty as any] = `${index + 1}`;
+      !this.isHorizontal() ? tab.classList.add('vertical') : tab.classList.remove('vertical');
+    });
+    this.setTabPanels();
+  }
+
+  private setTabPanels(): void {
+    this.tabpanels.forEach((tabpanel: HTMLElement, index: number) => {
+      const tabId: string = this.tabIds[index];
+      const tabpanelId: string = this.tabpanelIds[index];
+      tabpanel.setAttribute('id', tabpanelId);
+      tabpanel.setAttribute('aria-labelledby', tabId);
+      this.activeTabIndex !== index ? tabpanel.setAttribute('hidden', '') : tabpanel.removeAttribute('hidden');
+    });
+  }
+
+  private getTabIds(): Array<string> {
+    return this.tabs.map((tab: HTMLElement) => {
+      return tab.getAttribute('id') ?? `tab-${uniqueId()}`;
+    });
+  }
+
+  private getTabPanelIds(): Array<string> {
+    return this.tabpanels.map((tabPanel: HTMLElement) => {
+      return tabPanel.getAttribute('id') ?? `panel-${uniqueId()}`;
+    });
+  }
+
+  private setComponent(): void {
+    if (this.activeTabIndex !== this.prevActiveTabIndex) {
+      this.activeid = this.tabIds[this.activeTabIndex] as string;
+      this.focusTab();
+      this.change();
+    }
+  }
+
+  private handleTabClick = (event: MouseEvent): void => {
+    const selectedTab = event.currentTarget as HTMLElement;
+    if (selectedTab.nodeType === 1 && this.isFocusableElement(selectedTab)) {
+      this.prevActiveTabIndex = this.activeTabIndex;
+      this.activeTabIndex = this.tabs.indexOf(selectedTab);
+      this.setComponent();
+    }
+  };
+
+  private isHorizontal(): boolean {
+    return this.orientation === TabsOrientation.horizontal;
+  }
+
+  private handleTabKeyDown = (event: KeyboardEvent): void => {
+    if (this.isHorizontal()) {
+      switch (event.key) {
+        case keyArrowLeft:
+          event.preventDefault();
+          this.adjustBackward(event);
+          break;
+        case keyArrowRight:
+          event.preventDefault();
+          this.adjustForward(event);
+          break;
+      }
+    } else {
+      switch (event.key) {
+        case keyArrowUp:
+          event.preventDefault();
+          this.adjustBackward(event);
+          break;
+        case keyArrowDown:
+          event.preventDefault();
+          this.adjustForward(event);
+          break;
+      }
+    }
+    switch (event.key) {
+      case keyHome:
+        event.preventDefault();
+        this.adjust(-this.activeTabIndex);
+        break;
+      case keyEnd:
+        event.preventDefault();
+        this.adjust(this.tabs.length - this.activeTabIndex - 1);
+        break;
+    }
+  };
+
+  /**
+   * The adjust method for FASTTabs
+   * @public
+   * @remarks
+   * This method allows the active index to be adjusted by numerical increments
+   */
+  public adjust(adjustment: number): void {
+    const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
+    const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
+
+    const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
+
+    // the index of the next focusable tab within the context of all available tabs
+    const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
+
+    if (nextIndex > -1) {
+      this.moveToTabByIndex(this.tabs, nextIndex);
+    }
+  }
+
+  private adjustForward(e: KeyboardEvent): void {
+    const group: HTMLElement[] = this.tabs;
+    let index: number = 0;
+
+    index = this.activetab ? group.indexOf(this.activetab) + 1 : 1;
+    if (index === group.length) {
+      index = 0;
+    }
+
+    while (index < group.length && group.length > 1) {
+      if (this.isFocusableElement(group[index])) {
+        this.moveToTabByIndex(group, index);
+        break;
+      } else if (this.activetab && index === group.indexOf(this.activetab)) {
+        break;
+      } else if (index + 1 >= group.length) {
+        index = 0;
+      } else {
+        index += 1;
+      }
+    }
+  }
+
+  private adjustBackward(e: KeyboardEvent): void {
+    const group: HTMLElement[] = this.tabs;
+    let index: number = 0;
+
+    index = this.activetab ? group.indexOf(this.activetab) - 1 : 0;
+    index = index < 0 ? group.length - 1 : index;
+
+    while (index >= 0 && group.length > 1) {
+      if (this.isFocusableElement(group[index])) {
+        this.moveToTabByIndex(group, index);
+        break;
+      } else if (index - 1 < 0) {
+        index = group.length - 1;
+      } else {
+        index -= 1;
+      }
+    }
+  }
+
+  private moveToTabByIndex(group: HTMLElement[], index: number) {
+    const tab: HTMLElement = group[index] as HTMLElement;
+    this.activetab = tab;
+    this.prevActiveTabIndex = this.activeTabIndex;
+    this.activeTabIndex = index;
+    tab.focus();
+    this.setComponent();
+  }
+
+  private focusTab(): void {
+    this.tabs[this.activeTabIndex].focus();
+  }
+
+  /**
+   * @internal
+   */
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    this.tabIds = this.getTabIds();
+    this.tabpanelIds = this.getTabPanelIds();
+    this.activeTabIndex = this.getActiveIndex();
+  }
+}
+
+export class Tabs extends BaseTabs {
   /**
    * activeTabData
    * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
@@ -179,3 +501,7 @@ export class Tabs extends FASTTabs {
     this.setTabData();
   }
 }
+
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+export interface Tabs extends StartEnd {}
+applyMixins(Tabs, StartEnd);
diff --git a/packages/web-components/src/text-input/index.ts b/packages/web-components/src/text-input/index.ts
index 71704f47706998..f6c3255d59653f 100644
--- a/packages/web-components/src/text-input/index.ts
+++ b/packages/web-components/src/text-input/index.ts
@@ -3,4 +3,3 @@ export * from './text-input.options.js';
 export { template as TextInputTemplate } from './text-input.template.js';
 export { styles as TextInputStyles } from './text-input.styles.js';
 export { definition as TextInputDefinition } from './text-input.definition.js';
-export { TextFieldType as TextInputType } from '@microsoft/fast-foundation/text-field.js';
diff --git a/packages/web-components/src/text-input/text-field.form-associated.ts b/packages/web-components/src/text-input/text-field.form-associated.ts
new file mode 100644
index 00000000000000..5f5c2149071e39
--- /dev/null
+++ b/packages/web-components/src/text-input/text-field.form-associated.ts
@@ -0,0 +1,13 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+
+class _TextField extends FASTElement {}
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+interface _TextField extends FormAssociated {}
+
+/**
+ * @beta
+ */
+export class FormAssociatedTextField extends FormAssociated(_TextField) {
+  proxy = document.createElement('input');
+}
diff --git a/packages/web-components/src/text-input/text-input.options.ts b/packages/web-components/src/text-input/text-input.options.ts
index 2ae120ce7c3e20..0a161029c31191 100644
--- a/packages/web-components/src/text-input/text-input.options.ts
+++ b/packages/web-components/src/text-input/text-input.options.ts
@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * TextInput size constants
@@ -32,3 +32,40 @@ export const TextInputAppearance = {
  * @public
  */
 export type TextInputAppearance = ValuesOf<typeof TextInputAppearance>;
+
+/**
+ * Text field sub-types
+ * @public
+ */
+export const TextFieldType = {
+  /**
+   * An email TextField
+   */
+  email: 'email',
+
+  /**
+   * A password TextField
+   */
+  password: 'password',
+
+  /**
+   * A telephone TextField
+   */
+  tel: 'tel',
+
+  /**
+   * A text TextField
+   */
+  text: 'text',
+
+  /**
+   * A URL TextField
+   */
+  url: 'url',
+} as const;
+
+/**
+ * Types for the text field sub-types
+ * @public
+ */
+export type TextFieldType = ValuesOf<typeof TextFieldType>;
diff --git a/packages/web-components/src/text-input/text-input.template.ts b/packages/web-components/src/text-input/text-input.template.ts
index c3a0528ca29e06..0c7034d32068f0 100644
--- a/packages/web-components/src/text-input/text-input.template.ts
+++ b/packages/web-components/src/text-input/text-input.template.ts
@@ -1,6 +1,69 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { textFieldTemplate } from '@microsoft/fast-foundation/text-field.js';
-import type { TextInput } from './text-input.js';
+import { ElementViewTemplate, html, ref, slotted } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { whitespaceFilter } from '../utils/index.js';
+import type { TextFieldOptions, TextInput } from './text-input.js';
+
+export function textFieldTemplate<T extends TextInput>(options: TextFieldOptions = {}): ElementViewTemplate<T> {
+  return html<T>`
+    <label
+      part="label"
+      for="control"
+      class="${x => (x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden')}"
+    >
+      <slot
+        ${slotted({
+          property: 'defaultSlottedNodes',
+          filter: whitespaceFilter,
+        })}
+      ></slot>
+    </label>
+    <div class="root" part="root">
+      ${startSlotTemplate(options)}
+      <input
+        class="control"
+        part="control"
+        id="control"
+        @input="${x => x.handleTextInput()}"
+        @change="${x => x.handleChange()}"
+        ?autofocus="${x => x.autofocus}"
+        ?disabled="${x => x.disabled}"
+        list="${x => x.list}"
+        maxlength="${x => x.maxlength}"
+        name="${x => x.name}"
+        minlength="${x => x.minlength}"
+        pattern="${x => x.pattern}"
+        placeholder="${x => x.placeholder}"
+        ?readonly="${x => x.readOnly}"
+        ?required="${x => x.required}"
+        size="${x => x.size}"
+        ?spellcheck="${x => x.spellcheck}"
+        :value="${x => x.value}"
+        type="${x => x.type}"
+        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-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-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+        ${ref('control')}
+      />
+      ${endSlotTemplate(options)}
+    </div>
+  `;
+}
 
 /**
  * @internal
diff --git a/packages/web-components/src/text-input/text-input.ts b/packages/web-components/src/text-input/text-input.ts
index 103721ebee4ef5..db25c013c0661a 100644
--- a/packages/web-components/src/text-input/text-input.ts
+++ b/packages/web-components/src/text-input/text-input.ts
@@ -1,12 +1,15 @@
-import { attr } from '@microsoft/fast-element';
-import { FASTTextField } from '@microsoft/fast-foundation/text-field.js';
+import { attr, nullableNumberConverter, observable, Updates } from '@microsoft/fast-element';
+import { ARIAGlobalStatesAndProperties, StartEnd, StartEndOptions } from '../patterns/index.js';
+import { applyMixins } from '../utils/apply-mixins.js';
 import { TextInputAppearance, TextInputControlSize } from './text-input.options.js';
+import { TextFieldType } from './text-input.options.js';
+import { FormAssociatedTextField } from './text-field.form-associated.js';
 
-/**
- * The base class used for constructing a fluent-text-input custom element
- * @public
- */
-export class TextInput extends FASTTextField {
+export { TextFieldType };
+
+export type TextFieldOptions = StartEndOptions<TextInput>;
+
+export class TextInput extends FormAssociatedTextField {
   /**
    * Defines TextInput control size
    *
@@ -28,4 +31,238 @@ export class TextInput extends FASTTextField {
    */
   @attr
   public appearance?: TextInputAppearance;
+
+  /**
+   * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: readonly
+   */
+  @attr({ attribute: 'readonly', mode: 'boolean' })
+  public readOnly!: boolean;
+  protected readOnlyChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+      this.validate();
+    }
+  }
+
+  /**
+   * Indicates that this element should get focus after the page finishes loading. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute} for more information.
+   * @public
+   * @remarks
+   * HTML Attribute: autofocus
+   */
+  @attr({ mode: 'boolean' })
+  public autofocus!: boolean;
+  protected autofocusChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.autofocus = this.autofocus;
+      this.validate();
+    }
+  }
+
+  /**
+   * Sets the placeholder value of the element, generally used to provide a hint to the user.
+   * @public
+   * @remarks
+   * HTML Attribute: placeholder
+   * Using this attribute does is not a valid substitute for a labeling element.
+   */
+  @attr
+  public placeholder!: string;
+  protected placeholderChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.placeholder = this.placeholder;
+    }
+  }
+
+  /**
+   * Allows setting a type or mode of text.
+   * @public
+   * @remarks
+   * HTML Attribute: type
+   */
+  @attr
+  public type: TextFieldType = TextFieldType.text;
+  private typeChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.type = this.type;
+      this.validate();
+    }
+  }
+
+  /**
+   * Allows associating a {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist} to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}.
+   * @public
+   * @remarks
+   * HTML Attribute: list
+   */
+  @attr
+  public list!: string;
+  protected listChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.setAttribute('list', this.list);
+      this.validate();
+    }
+  }
+
+  /**
+   * The maximum number of characters a user can enter.
+   * @public
+   * @remarks
+   * HTMLAttribute: maxlength
+   */
+  @attr({ converter: nullableNumberConverter })
+  public maxlength!: number;
+  protected maxlengthChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.maxLength = this.maxlength;
+      this.validate();
+    }
+  }
+
+  /**
+   * The minimum number of characters a user can enter.
+   * @public
+   * @remarks
+   * HTMLAttribute: minlength
+   */
+  @attr({ converter: nullableNumberConverter })
+  public minlength!: number;
+  protected minlengthChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.minLength = this.minlength;
+      this.validate();
+    }
+  }
+
+  /**
+   * A regular expression that the value must match to pass validation.
+   * @public
+   * @remarks
+   * HTMLAttribute: pattern
+   */
+  @attr
+  public pattern!: string;
+  protected patternChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.pattern = this.pattern;
+      this.validate();
+    }
+  }
+
+  /**
+   * Sets the width of the element to a specified number of characters.
+   * @public
+   * @remarks
+   * HTMLAttribute: size
+   */
+  @attr({ converter: nullableNumberConverter })
+  public size!: number;
+  protected sizeChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.size = this.size;
+    }
+  }
+
+  /**
+   * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+   * @public
+   * @remarks
+   * HTMLAttribute: size
+   */
+  @attr({ mode: 'boolean' })
+  public spellcheck!: boolean;
+  protected spellcheckChanged(): void {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.spellcheck = this.spellcheck;
+    }
+  }
+
+  /**
+   * @internal
+   */
+  @observable
+  public defaultSlottedNodes!: Node[];
+
+  /**
+   * A reference to the internal input element
+   * @internal
+   */
+  public control!: HTMLInputElement;
+
+  /**
+   * @internal
+   */
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    this.proxy.setAttribute('type', this.type);
+    this.validate();
+
+    if (this.autofocus) {
+      Updates.enqueue(() => {
+        this.focus();
+      });
+    }
+  }
+
+  /**
+   * Selects all the text in the text field
+   *
+   * @public
+   */
+  public select(): void {
+    this.control.select();
+
+    /**
+     * The select event does not permeate the shadow DOM boundary.
+     * This fn effectively proxies the select event,
+     * emitting a `select` event whenever the internal
+     * control emits a `select` event
+     */
+    this.$emit('select');
+  }
+
+  /**
+   * Handles the internal control's `input` event
+   * @internal
+   */
+  public handleTextInput(): void {
+    this.value = this.control.value;
+  }
+
+  /**
+   * Change event handler for inner control.
+   * @remarks
+   * "Change" events are not `composable` so they will not
+   * permeate the shadow DOM boundary. This fn effectively proxies
+   * the change event, emitting a `change` event whenever the internal
+   * control emits a `change` event
+   * @internal
+   */
+  public handleChange(): void {
+    this.$emit('change');
+  }
+
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+  public validate(): void {
+    super.validate(this.control);
+  }
 }
+
+/**
+ * Includes ARIA states and properties relating to the ARIA textbox role
+ *
+ * @public
+ */
+export class DelegatesARIATextbox {}
+
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+export interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {}
+applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
+
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+export interface TextInput extends StartEnd, DelegatesARIATextbox {}
+applyMixins(TextInput, StartEnd, DelegatesARIATextbox);
diff --git a/packages/web-components/src/text/text.options.ts b/packages/web-components/src/text/text.options.ts
index 61f471e63eab32..e1c444f6887490 100644
--- a/packages/web-components/src/text/text.options.ts
+++ b/packages/web-components/src/text/text.options.ts
@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * TextSize constants
diff --git a/packages/web-components/src/toggle-button/toggle-button.definition.ts b/packages/web-components/src/toggle-button/toggle-button.definition.ts
index ad1d8e5026b1dd..b88f6fdbf90572 100644
--- a/packages/web-components/src/toggle-button/toggle-button.definition.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.definition.ts
@@ -4,8 +4,6 @@ import { styles } from './toggle-button.styles.js';
 import { template } from './toggle-button.template.js';
 
 /**
- * The Fluent Toggle Button Element. Implements {@link @microsoft/fast-foundation#Button },
- * {@link @microsoft/fast-foundation#buttonTemplate}
  *
  * @public
  * @remarks
diff --git a/packages/web-components/src/toggle-button/toggle-button.options.ts b/packages/web-components/src/toggle-button/toggle-button.options.ts
index 8a39c6c3567468..bb4628833cd3c4 100644
--- a/packages/web-components/src/toggle-button/toggle-button.options.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.options.ts
@@ -1,6 +1,6 @@
-import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';
+import type { ButtonOptions } from '../button/index.js';
+import type { ValuesOf } from '../utils/index.js';
 
 /**
  * Toggle Button Appearance constants
diff --git a/packages/web-components/src/toggle-button/toggle-button.template.ts b/packages/web-components/src/toggle-button/toggle-button.template.ts
index c60f70c3e1def8..bd9de49545bc56 100644
--- a/packages/web-components/src/toggle-button/toggle-button.template.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.template.ts
@@ -1,5 +1,5 @@
 import { ElementViewTemplate } from '@microsoft/fast-element';
-import { buttonTemplate } from '@microsoft/fast-foundation/button.js';
+import { buttonTemplate } from '../button/button.template.js';
 import type { ToggleButton } from './toggle-button.js';
 
 /**
diff --git a/packages/web-components/src/utils/direction.ts b/packages/web-components/src/utils/direction.ts
new file mode 100644
index 00000000000000..b68d3d5755aab4
--- /dev/null
+++ b/packages/web-components/src/utils/direction.ts
@@ -0,0 +1,15 @@
+//Copied from @microsoft/fast-foundation
+
+import { Direction } from '@microsoft/fast-web-utilities';
+
+/**
+ * Determines the current localization direction of an element.
+ *
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @returns the localization direction of the element
+ *
+ * @public
+ */
+export const getDirection = (rootNode: HTMLElement): Direction => {
+  return rootNode.closest<HTMLElement>('[dir]')?.dir === 'rtl' ? Direction.rtl : Direction.ltr;
+};
diff --git a/packages/web-components/src/utils/index.ts b/packages/web-components/src/utils/index.ts
new file mode 100644
index 00000000000000..dda8c5a4db5d8c
--- /dev/null
+++ b/packages/web-components/src/utils/index.ts
@@ -0,0 +1,4 @@
+export * from './direction.js';
+export * from './typings.js';
+export * from './template-helpers.js';
+export * from './whitespace-filter.js';
diff --git a/packages/web-components/src/utils/template-helpers.ts b/packages/web-components/src/utils/template-helpers.ts
new file mode 100644
index 00000000000000..f9e8d19f45618a
--- /dev/null
+++ b/packages/web-components/src/utils/template-helpers.ts
@@ -0,0 +1,40 @@
+//Copied from @microsoft/fast-foundation
+
+import { CaptureType, HTMLDirective, InlineTemplateDirective } from '@microsoft/fast-element';
+import type { SyntheticViewTemplate } from '@microsoft/fast-element';
+
+/**
+ * A value that can be statically composed into a
+ * foundation template.
+ * @remarks
+ * When providing a string, take care to ensure that it is
+ * safe and will not enable an XSS attack.
+ * @public
+ */
+export type StaticallyComposableHTML<TSource = any, TParent = any> =
+  | string
+  | HTMLDirective
+  | SyntheticViewTemplate<TSource, TParent>
+  | undefined;
+
+/**
+ * A function to compose template options.
+ * @public
+ */
+export function staticallyCompose<TSource = any, TParent = any>(
+  item: StaticallyComposableHTML<TSource, TParent>,
+): CaptureType<TSource, TParent> {
+  if (!item) {
+    return InlineTemplateDirective.empty;
+  }
+
+  if (typeof item === 'string') {
+    return new InlineTemplateDirective(item);
+  }
+
+  if ('inline' in item) {
+    return item.inline();
+  }
+
+  return item;
+}
diff --git a/packages/web-components/src/utils/typings.ts b/packages/web-components/src/utils/typings.ts
new file mode 100644
index 00000000000000..0d8726e13d07d7
--- /dev/null
+++ b/packages/web-components/src/utils/typings.ts
@@ -0,0 +1,8 @@
+//Copied from @microsoft/fast-foundation
+
+/**
+ * Helper for enumerating a type from a const object
+ * Example: export type Foo = ValuesOf\<typeof Foo\>
+ * @public
+ */
+export type ValuesOf<T> = T[keyof T];
diff --git a/packages/web-components/src/utils/whitespace-filter.ts b/packages/web-components/src/utils/whitespace-filter.ts
new file mode 100644
index 00000000000000..b5f2614091fa5d
--- /dev/null
+++ b/packages/web-components/src/utils/whitespace-filter.ts
@@ -0,0 +1,16 @@
+//Copied from @microsoft/fast-foundation
+
+import type { ElementsFilter } from '@microsoft/fast-element';
+
+/**
+ * filters out any whitespace-only nodes, to be used inside a template.
+ *
+ * @param value - The Node that is being inspected
+ * @param index - The index of the node within the array
+ * @param array - The Node array that is being filtered
+ * @returns true if the node is not a whitespace-only node, false otherwise
+ *
+ * @public
+ */
+export const whitespaceFilter: ElementsFilter = value =>
+  value.nodeType !== Node.TEXT_NODE || !!value.nodeValue?.trim().length;