From 4b5aae2a74047a51aac3e1fbb8fb845f5fd78957 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 12 Oct 2021 15:33:02 -0400
Subject: [PATCH 001/135] feat(compiler): remove tree walker & switch to
 structural target lookup

---
 .../fast-element/docs/api-report.md           |  56 ++--
 .../web-components/fast-element/src/dom.ts    |  13 -
 .../src/templating/binding.spec.ts            |   5 +-
 .../fast-element/src/templating/binding.ts    |  20 +-
 .../src/templating/children.spec.ts           |  32 +-
 .../fast-element/src/templating/children.ts   |  14 +-
 .../src/templating/compiler.spec.ts           |  94 +++---
 .../fast-element/src/templating/compiler.ts   | 305 +++++++++++++-----
 .../src/templating/html-directive.ts          |  44 ++-
 .../fast-element/src/templating/ref.ts        |  17 +-
 .../src/templating/repeat.spec.ts             |  83 +++--
 .../fast-element/src/templating/repeat.ts     |  25 +-
 .../src/templating/slotted.spec.ts            |  29 +-
 .../fast-element/src/templating/slotted.ts    |  15 +-
 .../src/templating/template.spec.ts           |   3 +-
 .../fast-element/src/templating/template.ts   |  66 ++--
 16 files changed, 493 insertions(+), 328 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 8417389c9ce..3a878652f8e 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -17,12 +17,12 @@ export interface Accessor {
 // @public
 export class AttachedBehaviorHTMLDirective<T = any> extends HTMLDirective {
     constructor(name: string, behavior: AttachedBehaviorType<T>, options: T);
-    createBehavior(target: Node): Behavior;
+    createBehavior(targets: BehaviorTargets): Behavior;
     createPlaceholder(index: number): string;
     }
 
 // @public
-export type AttachedBehaviorType<T = any> = new (target: any, options: T) => Behavior;
+export type AttachedBehaviorType<T = any> = new (targets: BehaviorTargets, targetId: string, options: T) => Behavior;
 
 // @public
 export function attr(config?: DecoratorAttributeConfiguration): (target: {}, property: string) => void;
@@ -63,6 +63,11 @@ export interface Behavior {
     unbind(source: unknown): void;
 }
 
+// @public
+export type BehaviorTargets = {
+    [id: string]: Node;
+};
+
 // @public
 export type Binding<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
 
@@ -131,7 +136,7 @@ export function children<T = any>(propertyOrOptions: (keyof T & string) | Childr
 //
 // @public
 export class ChildrenBehavior extends NodeObservationBehavior<ChildrenBehaviorOptions> {
-    constructor(target: HTMLElement, options: ChildrenBehaviorOptions);
+    constructor(targets: BehaviorTargets, targetId: string, options: ChildrenBehaviorOptions);
     disconnect(): void;
     protected getNodes(): ChildNode[];
     observe(): void;
@@ -140,18 +145,8 @@ export class ChildrenBehavior extends NodeObservationBehavior<ChildrenBehaviorOp
 // @public
 export type ChildrenBehaviorOptions<T = any> = ChildListBehaviorOptions<T> | SubtreeBehaviorOptions<T>;
 
-// @beta
-export interface CompilationResult {
-    fragment: DocumentFragment;
-    hostBehaviorFactories: NodeBehaviorFactory[];
-    targetOffset: number;
-    viewBehaviorFactories: NodeBehaviorFactory[];
-}
-
-// Warning: (ae-incompatible-release-tags) The symbol "compileTemplate" is marked as @public, but its signature references "CompilationResult" which is marked as @beta
-//
 // @public
-export function compileTemplate(template: HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): CompilationResult;
+export function compileTemplate(template: HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): HTMLTemplateCompilationResult;
 
 // @public
 export type ComposableStyles = string | ElementStyles | CSSStyleSheet;
@@ -221,7 +216,6 @@ export const DOM: Readonly<{
     setAttribute(element: HTMLElement, attributeName: string, value: any): void;
     setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
     removeChildNodes(parent: Node): void;
-    createTemplateWalker(fragment: DocumentFragment): TreeWalker;
 }>;
 
 // @public
@@ -348,7 +342,7 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
     constructor(binding: Binding);
     // (undocumented)
     binding: Binding;
-    createBehavior(target: Node): BindingBehavior;
+    createBehavior(targets: BehaviorTargets): BindingBehavior;
     targetAtContent(): void;
     get targetName(): string | undefined;
     set targetName(value: string | undefined);
@@ -356,9 +350,25 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
 
 // @public
 export abstract class HTMLDirective implements NodeBehaviorFactory {
-    abstract createBehavior(target: Node): Behavior;
+    abstract createBehavior(targets: BehaviorTargets): Behavior;
     abstract createPlaceholder(index: number): string;
-    targetIndex: number;
+    targetId: string;
+}
+
+// @public
+export class HTMLTemplateCompilationResult {
+    constructor(fragment: DocumentFragment, viewBehaviorFactories: NodeBehaviorFactory[], hostBehaviorFactories: NodeBehaviorFactory[], targetIds: string[]);
+    // (undocumented)
+    get behaviorCount(): number;
+    createTargets(root: Node, host?: Node): BehaviorTargets;
+    // (undocumented)
+    readonly fragment: DocumentFragment;
+    // (undocumented)
+    get hasHostBehaviors(): boolean;
+    // (undocumented)
+    readonly hostBehaviorFactories: NodeBehaviorFactory[];
+    // (undocumented)
+    readonly viewBehaviorFactories: NodeBehaviorFactory[];
 }
 
 // @public
@@ -400,8 +410,8 @@ export type Mutable<T> = {
 
 // @public
 export interface NodeBehaviorFactory {
-    createBehavior(target: Node): Behavior;
-    targetIndex: number;
+    createBehavior(targets: BehaviorTargets): Behavior;
+    targetId: string;
 }
 
 // @public
@@ -467,7 +477,7 @@ export function ref<T = any>(propertyName: keyof T & string): CaptureType<T>;
 
 // @public
 export class RefBehavior implements Behavior {
-    constructor(target: HTMLElement, propertyName: string);
+    constructor(targets: BehaviorTargets, targetId: string, propertyName: string);
     bind(source: any): void;
     unbind(): void;
 }
@@ -487,7 +497,7 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
 // @public
 export class RepeatDirective<TSource = any> extends HTMLDirective {
     constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
-    createBehavior(target: Node): RepeatBehavior<TSource>;
+    createBehavior(targets: BehaviorTargets): RepeatBehavior<TSource>;
     createPlaceholder: (index: number) => string;
     }
 
@@ -502,7 +512,7 @@ export function slotted<T = any>(propertyOrOptions: (keyof T & string) | Slotted
 
 // @public
 export class SlottedBehavior extends NodeObservationBehavior<SlottedBehaviorOptions> {
-    constructor(target: HTMLSlotElement, options: SlottedBehaviorOptions);
+    constructor(targets: BehaviorTargets, targetId: string, options: SlottedBehaviorOptions);
     disconnect(): void;
     protected getNodes(): Node[];
     observe(): void;
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index a004bafdd68..b458cdbf5b4 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -234,17 +234,4 @@ export const DOM = Object.freeze({
             parent.removeChild(child);
         }
     },
-
-    /**
-     * Creates a TreeWalker configured to walk a template fragment.
-     * @param fragment - The fragment to walk.
-     */
-    createTemplateWalker(fragment: DocumentFragment): TreeWalker {
-        return document.createTreeWalker(
-            fragment,
-            133, // element, text, comment
-            null,
-            false
-        );
-    },
 });
diff --git a/packages/web-components/fast-element/src/templating/binding.spec.ts b/packages/web-components/fast-element/src/templating/binding.spec.ts
index 6e7e3c56a91..5d381d67777 100644
--- a/packages/web-components/fast-element/src/templating/binding.spec.ts
+++ b/packages/web-components/fast-element/src/templating/binding.spec.ts
@@ -29,9 +29,12 @@ describe("The HTML binding directive", () => {
     function contentBinding(propertyName: keyof Model = "value") {
         const directive = new HTMLBindingDirective(x => x[propertyName]);
         directive.targetAtContent();
+        directive.targetId = 'r';
 
         const node = document.createTextNode(" ");
-        const behavior = directive.createBehavior(node);
+        const targets = { r: node };
+
+        const behavior = directive.createBehavior(targets);
         const parentNode = document.createElement("div");
 
         parentNode.appendChild(node);
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 90726419e8f..a2176d51720 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,13 +1,15 @@
-import { DOM } from "../dom.js";
-import type { Behavior } from "../observation/behavior.js";
+import type { BehaviorTargets } from "..";
+import { DOM } from "../dom";
+import type { Behavior } from "../observation/behavior";
 import {
     Binding,
     BindingObserver,
     ExecutionContext,
     Observable,
-} from "../observation/observable.js";
-import { TargetedHTMLDirective } from "./html-directive.js";
-import type { SyntheticView } from "./view.js";
+    setCurrentEvent,
+} from "../observation/observable";
+import { TargetedHTMLDirective } from "./html-directive";
+import type { SyntheticView } from "./view";
 
 function normalBind(
     this: BindingBehavior,
@@ -261,10 +263,10 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
      * information stored in the BindingDirective.
      * @param target - The target node that the binding behavior should attach to.
      */
-    createBehavior(target: Node): BindingBehavior {
+    createBehavior(targets: BehaviorTargets): BindingBehavior {
         /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
         return new BindingBehavior(
-            target,
+            targets[this.targetId],
             this.binding,
             this.isBindingVolatile,
             this.bind,
@@ -359,9 +361,9 @@ export class BindingBehavior implements Behavior {
 
     /** @internal */
     public handleEvent(event: Event): void {
-        ExecutionContext.setEvent(event);
+        setCurrentEvent(event);
         const result = this.binding(this.source, this.context!);
-        ExecutionContext.setEvent(null);
+        setCurrentEvent(null);
 
         if (result !== true) {
             event.preventDefault();
diff --git a/packages/web-components/fast-element/src/templating/children.spec.ts b/packages/web-components/fast-element/src/templating/children.spec.ts
index d513640ccd4..0689e7f7f5e 100644
--- a/packages/web-components/fast-element/src/templating/children.spec.ts
+++ b/packages/web-components/fast-element/src/templating/children.spec.ts
@@ -15,9 +15,11 @@ describe("The children", () => {
 
     context("directive", () => {
         it("creates a ChildrenBehavior", () => {
+            const targetId = 'r';
             const directive = children("test") as AttachedBehaviorHTMLDirective;
             const target = document.createElement("div");
-            const behavior = directive.createBehavior(target);
+            const targets = { [targetId]: target };
+            const behavior = directive.createBehavior(targets);
 
             expect(behavior).to.be.instanceOf(ChildrenBehavior);
         });
@@ -43,13 +45,15 @@ describe("The children", () => {
         function createDOM(elementName: string = "div") {
             const host = document.createElement("div");
             const children = createAndAppendChildren(host, elementName);
+            const targetId = 'r';
+            const targets = { [targetId]: host };
 
-            return { host, children };
+            return { host, children, targets, targetId };
         }
 
         it("gathers child nodes", () => {
-            const { host, children } = createDOM();
-            const behavior = new ChildrenBehavior(host, {
+            const { host, children, targets, targetId } = createDOM();
+            const behavior = new ChildrenBehavior(targets, targetId, {
                 property: "nodes",
             });
             const model = new Model();
@@ -60,8 +64,8 @@ describe("The children", () => {
         });
 
         it("gathers child nodes with a filter", () => {
-            const { host, children } = createDOM("foo-bar");
-            const behavior = new ChildrenBehavior(host, {
+            const { host, children, targets, targetId } = createDOM("foo-bar");
+            const behavior = new ChildrenBehavior(targets, targetId, {
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
@@ -73,8 +77,8 @@ describe("The children", () => {
         });
 
         it("updates child nodes when they change", async () => {
-            const { host, children } = createDOM("foo-bar");
-            const behavior = new ChildrenBehavior(host, {
+            const { host, children, targets, targetId } = createDOM("foo-bar");
+            const behavior = new ChildrenBehavior(targets, targetId, {
                 property: "nodes",
             });
             const model = new Model();
@@ -91,8 +95,8 @@ describe("The children", () => {
         });
 
         it("updates child nodes when they change with a filter", async () => {
-            const { host, children } = createDOM("foo-bar");
-            const behavior = new ChildrenBehavior(host, {
+            const { host, children, targets, targetId } = createDOM("foo-bar");
+            const behavior = new ChildrenBehavior(targets, targetId, {
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
@@ -110,7 +114,7 @@ describe("The children", () => {
         });
 
         it("updates subtree nodes when they change with a selector", async () => {
-            const { host, children } = createDOM("foo-bar");
+            const { host, children, targets, targetId } = createDOM("foo-bar");
             const subtreeElement = "foo-bar-baz";
             const subtreeChildren: HTMLElement[] = [];
 
@@ -122,7 +126,7 @@ describe("The children", () => {
                 }
             }
 
-            const behavior = new ChildrenBehavior(host, {
+            const behavior = new ChildrenBehavior(targets, targetId, {
                 property: "nodes",
                 subtree: true,
                 selector: subtreeElement,
@@ -150,8 +154,8 @@ describe("The children", () => {
         });
 
         it("clears and unwatches when unbound", async () => {
-            const { host, children } = createDOM("foo-bar");
-            const behavior = new ChildrenBehavior(host, {
+            const { host, children, targets, targetId } = createDOM("foo-bar");
+            const behavior = new ChildrenBehavior(targets, targetId, {
                 property: "nodes",
             });
             const model = new Model();
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index 649841ae90e..00f872378f5 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -1,6 +1,6 @@
-import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
-import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation.js";
-import type { CaptureType } from "./template.js";
+import { AttachedBehaviorHTMLDirective, BehaviorTargets } from "./html-directive";
+import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
+import type { CaptureType } from "./template";
 
 /**
  * The options used to configure child list observation.
@@ -49,8 +49,12 @@ export class ChildrenBehavior extends NodeObservationBehavior<ChildrenBehaviorOp
      * @param target - The element target to observe children on.
      * @param options - The options to use when observing the element children.
      */
-    public constructor(target: HTMLElement, options: ChildrenBehaviorOptions) {
-        super(target, options);
+    public constructor(
+        targets: BehaviorTargets,
+        targetId: string,
+        options: ChildrenBehaviorOptions
+    ) {
+        super(targets[targetId] as HTMLElement, options);
         (options as MutationObserverInit).childList = true;
     }
 
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index 323d453ec62..26fc7b5fe4d 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -41,7 +41,7 @@ describe("The template compiler", () => {
                 html: `${inline(0)}`,
                 directives: [binding()],
                 fragment: ` `,
-                targetIndexes: [0],
+                targetIds: ['r.1'],
                 childCount: 2,
             },
             {
@@ -49,88 +49,88 @@ describe("The template compiler", () => {
                 html: `${inline(0)} end`,
                 directives: [binding()],
                 fragment: `  end`,
-                targetIndexes: [0],
-                childCount: 2,
+                targetIds: ['r.1'],
+                childCount: 3,
             },
             {
                 type: "a single middle",
                 html: `beginning ${inline(0)} end`,
                 directives: [binding()],
                 fragment: `beginning   end`,
-                targetIndexes: [1],
-                childCount: 3,
+                targetIds: ['r.2'],
+                childCount: 4,
             },
             {
                 type: "a single ending",
                 html: `${inline(0)} end`,
                 directives: [binding()],
                 fragment: `  end`,
-                targetIndexes: [0],
-                childCount: 2,
+                targetIds: ['r.1'],
+                childCount: 3,
             },
             {
                 type: "back-to-back",
                 html: `${inline(0)}${inline(1)}`,
                 directives: [binding(), binding()],
                 fragment: `  `,
-                targetIndexes: [0, 1],
-                childCount: 2,
+                targetIds: ['r.1', 'r.2'],
+                childCount: 3,
             },
             {
                 type: "back-to-back starting",
                 html: `${inline(0)}${inline(1)} end`,
                 directives: [binding(), binding()],
                 fragment: `   end`,
-                targetIndexes: [0, 1],
-                childCount: 3,
+                targetIds: ['r.1', 'r.2'],
+                childCount: 4,
             },
             {
                 type: "back-to-back middle",
                 html: `beginning ${inline(0)}${inline(1)} end`,
                 directives: [binding(), binding()],
                 fragment: `beginning    end`,
-                targetIndexes: [1, 2],
-                childCount: 4,
+                targetIds: ['r.2', 'r.3'],
+                childCount: 5,
             },
             {
                 type: "back-to-back ending",
                 html: `start ${inline(0)}${inline(1)}`,
                 directives: [binding(), binding()],
                 fragment: `start   `,
-                targetIndexes: [1, 2],
-                childCount: 3,
+                targetIds: ['r.2', 'r.3'],
+                childCount: 4,
             },
             {
                 type: "separated",
                 html: `${inline(0)}separator${inline(1)}`,
                 directives: [binding(), binding()],
                 fragment: ` separator `,
-                targetIndexes: [0, 2],
-                childCount: 3,
+                targetIds: ['r.1', 'r.3'],
+                childCount: 4,
             },
             {
                 type: "separated starting",
                 html: `${inline(0)}separator${inline(1)} end`,
                 directives: [binding(), binding()],
                 fragment: ` separator  end`,
-                targetIndexes: [0, 2],
-                childCount: 4,
+                targetIds: ['r.1', 'r.3'],
+                childCount: 5,
             },
             {
                 type: "separated middle",
                 html: `beginning ${inline(0)}separator${inline(1)} end`,
                 directives: [binding(), binding()],
                 fragment: `beginning  separator  end`,
-                targetIndexes: [1, 3],
-                childCount: 5,
+                targetIds: ['r.2', 'r.4'],
+                childCount: 6,
             },
             {
                 type: "separated ending",
                 html: `beginning ${inline(0)}separator${inline(1)}`,
                 directives: [binding(), binding()],
                 fragment: `beginning  separator `,
-                targetIndexes: [1, 3],
-                childCount: 4,
+                targetIds: ['r.2', 'r.4'],
+                childCount: 5,
             },
             {
                 type: "mixed content",
@@ -139,7 +139,7 @@ describe("The template compiler", () => {
                 )}</a> ${inline(3)} end`,
                 directives: [binding(), binding(), binding(), binding()],
                 fragment: "<div>start   end</div><a> </a>   end",
-                targetIndexes: [2, 4, 5, 7],
+                targetIds: ['r.0.1', 'r.1', 'r.1.0', 'r.3'],
                 childCount: 5,
             },
         ];
@@ -164,12 +164,12 @@ describe("The template compiler", () => {
 
                 expect(length).to.equal(x.directives.length);
 
-                if (x.targetIndexes) {
-                    expect(length).to.equal(x.targetIndexes.length);
+                if (x.targetIds) {
+                    expect(length).to.equal(x.targetIds.length);
 
                     for (let i = 0; i < length; ++i) {
-                        expect(viewBehaviorFactories[i].targetIndex).to.equal(
-                            x.targetIndexes[i]
+                        expect(viewBehaviorFactories[i].targetId).to.equal(
+                            x.targetIds[i]
                         );
                     }
                 }
@@ -191,7 +191,7 @@ describe("The template compiler", () => {
                 directives: [binding()],
                 fragment: `<a>Link</a>`,
                 result: "result",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "a single starting",
@@ -199,7 +199,7 @@ describe("The template compiler", () => {
                 directives: [binding()],
                 fragment: `<a>Link</a>`,
                 result: "result end",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "a single middle",
@@ -207,7 +207,7 @@ describe("The template compiler", () => {
                 directives: [binding()],
                 fragment: `<a>Link</a>`,
                 result: "beginning result end",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "a single ending",
@@ -215,7 +215,7 @@ describe("The template compiler", () => {
                 directives: [binding()],
                 fragment: `<a>Link</a>`,
                 result: "result end",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "back-to-back",
@@ -223,7 +223,7 @@ describe("The template compiler", () => {
                 directives: [binding(), binding()],
                 fragment: `<a>Link</a>`,
                 result: "resultresult",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "back-to-back starting",
@@ -231,7 +231,7 @@ describe("The template compiler", () => {
                 directives: [binding(), binding()],
                 fragment: `<a>Link</a>`,
                 result: "resultresult end",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "back-to-back middle",
@@ -239,7 +239,7 @@ describe("The template compiler", () => {
                 directives: [binding(), binding()],
                 fragment: `<a>Link</a>`,
                 result: "beginning resultresult end",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "back-to-back ending",
@@ -247,7 +247,7 @@ describe("The template compiler", () => {
                 directives: [binding(), binding()],
                 fragment: `<a>Link</a>`,
                 result: "start resultresult",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "separated",
@@ -255,7 +255,7 @@ describe("The template compiler", () => {
                 directives: [binding(), binding()],
                 fragment: `<a>Link</a>`,
                 result: "resultseparatorresult",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "separated starting",
@@ -263,7 +263,7 @@ describe("The template compiler", () => {
                 directives: [binding(), binding()],
                 fragment: `<a>Link</a>`,
                 result: "resultseparatorresult end",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "separated middle",
@@ -273,7 +273,7 @@ describe("The template compiler", () => {
                 directives: [binding(), binding()],
                 fragment: `<a>Link</a>`,
                 result: "beginning resultseparatorresult end",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "separated ending",
@@ -281,21 +281,21 @@ describe("The template compiler", () => {
                 directives: [binding(), binding()],
                 fragment: `<a>Link</a>`,
                 result: "beginning resultseparatorresult",
-                targetIndexes: [0],
+                targetIds: ['r.1'],
             },
             {
                 type: "multiple attributes on the same element with",
                 html: `<a href="${inline(0)}" target="${inline(1)}">Link</a>`,
                 directives: [binding(), binding()],
                 fragment: `<a>Link</a>`,
-                targetIndexes: [0, 0],
+                targetIds: ['r.1', 'r.1'],
             },
             {
                 type: "attributes on different elements with",
                 html: `<a href="${inline(0)}">Link</a><a href="${inline(1)}">Link</a>`,
                 directives: [binding(), binding()],
                 fragment: `<a>Link</a><a>Link</a>`,
-                targetIndexes: [0, 2],
+                targetIds: ['r.0', 'r.1'],
             },
             {
                 type: "multiple attributes on different elements with",
@@ -308,7 +308,7 @@ describe("The template compiler", () => {
           <a>Link</a>
           <a>Link</a>
         `,
-                targetIndexes: [1, 1, 4, 4],
+                targetIds: ['r.1', 'r.1', 'r.3', 'r.3'],
             },
         ];
 
@@ -330,14 +330,14 @@ describe("The template compiler", () => {
                     ).to.equal(x.result);
                 }
 
-                if (x.targetIndexes) {
+                if (x.targetIds) {
                     const length = viewBehaviorFactories.length;
 
-                    expect(length).to.equal(x.targetIndexes.length);
+                    expect(length).to.equal(x.targetIds.length);
 
                     for (let i = 0; i < length; ++i) {
-                        expect(viewBehaviorFactories[i].targetIndex).to.equal(
-                            x.targetIndexes[i]
+                        expect(viewBehaviorFactories[i].targetId).to.equal(
+                            x.targetIds[i]
                         );
                     }
                 }
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 090b2e8e8b5..2f3fd01db41 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,7 +1,8 @@
-import { _interpolationEnd, _interpolationStart, DOM } from "../dom.js";
-import type { Binding, ExecutionContext } from "../observation/observable.js";
-import { HTMLBindingDirective } from "./binding.js";
-import type { HTMLDirective, NodeBehaviorFactory } from "./html-directive.js";
+import type { BehaviorTargets } from "..";
+import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
+import type { Binding, ExecutionContext } from "../observation/observable";
+import { HTMLBindingDirective } from "./binding";
+import type { HTMLDirective, NodeBehaviorFactory } from "./html-directive";
 
 type InlineDirective = HTMLDirective & {
     targetName?: string;
@@ -9,26 +10,86 @@ type InlineDirective = HTMLDirective & {
     targetAtContent(): void;
 };
 
+const descriptors: PropertyDescriptorMap = {};
+
+function addTargetDescriptor(parentId: string, targetId: string, targetIndex: number) {
+    if (
+        targetId === "r" || // root
+        targetId === "h" || // host
+        descriptors[targetId]
+    ) {
+        return;
+    }
+
+    if (!descriptors[parentId]) {
+        const index = parentId.lastIndexOf(".");
+
+        if (index !== -1) {
+            const grandparentId = parentId.substr(0, index);
+            const childIndex = parseInt(parentId.substr(index));
+            addTargetDescriptor(grandparentId, parentId, childIndex);
+        }
+    }
+
+    descriptors[targetId] = createTargetDescriptor(parentId, targetId, targetIndex);
+}
+
+function createTargetDescriptor(
+    parentId: string,
+    targetId: string,
+    targetIndex: number
+): PropertyDescriptor {
+    const field = `_${targetId}`;
+
+    return {
+        configurable: false,
+        get: function () {
+            return this[field] || (this[field] = this[parentId].childNodes[targetIndex]);
+        },
+    };
+}
+
 let sharedContext: CompilationContext | null = null;
 
+// used to prevent creating lots of objects just to track node and index while compiling
+const next = {
+    index: 0,
+    node: null as ChildNode | null,
+};
+
 class CompilationContext {
-    public targetIndex!: number;
     public behaviorFactories!: NodeBehaviorFactory[];
     public directives: ReadonlyArray<HTMLDirective>;
+    public targetIds!: string[];
+
+    public addFactory(
+        factory: NodeBehaviorFactory,
+        parentId: string,
+        targetId: string,
+        targetIndex: number
+    ): void {
+        if (this.targetIds.indexOf(targetId) === -1) {
+            this.targetIds.push(targetId);
+        }
 
-    public addFactory(factory: NodeBehaviorFactory): void {
-        factory.targetIndex = this.targetIndex;
+        addTargetDescriptor(parentId, targetId, targetIndex);
+        factory.targetId = targetId;
         this.behaviorFactories.push(factory);
     }
 
-    public captureContentBinding(directive: HTMLBindingDirective): void {
+    public captureContentBinding(
+        directive: HTMLBindingDirective,
+        parentId: string,
+        targetId: string,
+        targetIndex: number
+    ): void {
         directive.targetAtContent();
-        this.addFactory(directive);
+        this.addFactory(directive, parentId, targetId, targetIndex);
     }
 
     public reset(): void {
         this.behaviorFactories = [];
-        this.targetIndex = -1;
+        this.targetIds = [];
     }
 
     public release(): void {
@@ -49,7 +110,7 @@ function createAggregateBinding(
     parts: (string | InlineDirective)[]
 ): HTMLBindingDirective {
     if (parts.length === 1) {
-        return parts[0] as HTMLBindingDirective;
+        return (parts[0] as any) as HTMLBindingDirective;
     }
 
     let targetName: string | undefined;
@@ -115,7 +176,10 @@ function parseContent(
 
 function compileAttributes(
     context: CompilationContext,
+    parentId: string,
     node: HTMLElement,
+    nodeId: string,
+    nodeIndex: number,
     includeBasicValues: boolean = false
 ): void {
     const attributes = node.attributes;
@@ -139,7 +203,7 @@ function compileAttributes(
             node.removeAttributeNode(attr);
             i--;
             ii--;
-            context.addFactory(result);
+            context.addFactory(result, parentId, nodeId, nodeIndex);
         }
     }
 }
@@ -147,64 +211,146 @@ function compileAttributes(
 function compileContent(
     context: CompilationContext,
     node: Text,
-    walker: TreeWalker
-): void {
+    parentId,
+    nodeId,
+    nodeIndex
+) {
     const parseResult = parseContent(context, node.textContent!);
+    if (parseResult === null) {
+        next.node = node.nextSibling;
+        next.index = nodeIndex + 1;
+        return next;
+    }
 
-    if (parseResult !== null) {
-        let lastNode = node;
-        for (let i = 0, ii = parseResult.length; i < ii; ++i) {
-            const currentPart = parseResult[i];
-            const currentNode =
-                i === 0
-                    ? node
-                    : lastNode.parentNode!.insertBefore(
-                          document.createTextNode(""),
-                          lastNode.nextSibling
-                      );
-
-            if (typeof currentPart === "string") {
-                currentNode.textContent = currentPart;
-            } else {
-                currentNode.textContent = " ";
-                context.captureContentBinding(currentPart as HTMLBindingDirective);
-            }
+    let lastNode = node;
+    for (let i = 0, ii = parseResult.length; i < ii; ++i) {
+        const currentPart = parseResult[i];
+        let currentNode: Text;
 
-            lastNode = currentNode;
-            context.targetIndex++;
+        if (i === 0) {
+            currentNode = node;
+        } else {
+            nodeIndex++;
+            nodeId = `${parentId}.${nodeIndex}`;
+            currentNode = lastNode.parentNode!.insertBefore(
+                document.createTextNode(""),
+                lastNode.nextSibling
+            );
+        }
 
-            if (currentNode !== node) {
-                walker.nextNode();
-            }
+        if (typeof currentPart === "string") {
+            currentNode.textContent = currentPart;
+        } else {
+            currentNode.textContent = " ";
+            context.captureContentBinding(
+                currentPart as HTMLBindingDirective,
+                parentId,
+                nodeId,
+                nodeIndex
+            );
         }
 
-        context.targetIndex--;
+        lastNode = currentNode;
     }
+
+    next.index = nodeIndex + 1;
+    next.node = lastNode.nextSibling;
+    return next;
+}
+
+function compileNode(
+    context: CompilationContext,
+    parentId: string,
+    node: Node,
+    nodeIndex: number
+) {
+    const nodeId = `${parentId}.${nodeIndex}`;
+
+    switch (node.nodeType) {
+        case 1: // element node
+            compileAttributes(context, parentId, node as HTMLElement, nodeId, nodeIndex);
+
+            let child = node.firstChild;
+            let childIndex = 0;
+
+            while (child) {
+                const result = compileNode(context, nodeId, child, childIndex);
+                child = result.node;
+                childIndex = result.index;
+            }
+
+            break;
+        case 3: // text node
+            return compileContent(context, node as Text, parentId, nodeId, nodeIndex);
+        case 8: // comment
+            if (DOM.isMarker(node)) {
+                context.addFactory(
+                    context.directives[DOM.extractDirectiveIndexFromMarker(node)],
+                    parentId,
+                    nodeId,
+                    nodeIndex
+                );
+            }
+            break;
+    }
+
+    next.index = nodeIndex + 1;
+    next.node = node.nextSibling;
+    return next;
 }
 
 /**
  * The result of compiling a template and its directives.
- * @beta
+ * @public
  */
-export interface CompilationResult {
-    /**
-     * A cloneable DocumentFragment representing the compiled HTML.
-     */
-    fragment: DocumentFragment;
-    /**
-     * The behaviors that should be applied to the template's HTML.
-     */
-    viewBehaviorFactories: NodeBehaviorFactory[];
+export class HTMLTemplateCompilationResult {
+    private proto: any;
+
     /**
-     * The behaviors that should be applied to the host element that
+     *
+     * @param fragment - A cloneable DocumentFragment representing the compiled HTML.
+     * @param viewBehaviorFactories - The behaviors that should be applied to the template's HTML.
+     * @param hostBehaviorFactories - The behaviors that should be applied to the host element that
      * the template is rendered into.
+     * @param targetIds - The structural ids used by the behavior factories.
      */
-    hostBehaviorFactories: NodeBehaviorFactory[];
+    public constructor(
+        public readonly fragment: DocumentFragment,
+        public readonly viewBehaviorFactories: NodeBehaviorFactory[],
+        public readonly hostBehaviorFactories: NodeBehaviorFactory[],
+        private targetIds: string[]
+    ) {
+        this.proto = Object.create(null, descriptors);
+    }
+
+    get hasHostBehaviors() {
+        return this.hostBehaviorFactories.length > 0;
+    }
+
+    get behaviorCount() {
+        return this.viewBehaviorFactories.length + this.hostBehaviorFactories.length;
+    }
+
     /**
-     * An index offset to apply to BehaviorFactory target indexes when
-     * matching factories to targets.
+     * Creates a behavior target lookup object.
+     * @param host - The host element.
+     * @param root - The root element.
+     * @returns A lookup object for behavior targets.
      */
-    targetOffset: number;
+    public createTargets(root: Node, host?: Node): BehaviorTargets {
+        const targets = Object.create(this.proto, {
+            r: { value: root },
+            h: { value: host || root },
+        });
+
+        const ids = this.targetIds;
+
+        for (let i = 0, ii = ids.length; i < ii; ++i) {
+            targets[ids[i]]; // trigger locators
+        }
+
+        return targets;
+    }
 }
 
 /**
@@ -222,63 +368,50 @@ export interface CompilationResult {
 export function compileTemplate(
     template: HTMLTemplateElement,
     directives: ReadonlyArray<HTMLDirective>
-): CompilationResult {
+): HTMLTemplateCompilationResult {
     const fragment = template.content;
     // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
     document.adoptNode(fragment);
 
     const context = CompilationContext.borrow(directives);
-    compileAttributes(context, template, true);
+    compileAttributes(context, "", template, /* host */ "h", 0, true);
     const hostBehaviorFactories = context.behaviorFactories;
     context.reset();
 
-    const walker = DOM.createTemplateWalker(fragment);
-
-    let node: Node | null;
-
-    while ((node = walker.nextNode())) {
-        context.targetIndex++;
-
-        switch (node.nodeType) {
-            case 1: // element node
-                compileAttributes(context, node as HTMLElement);
-                break;
-            case 3: // text node
-                compileContent(context, node as Text, walker);
-                break;
-            case 8: // comment
-                if (DOM.isMarker(node)) {
-                    context.addFactory(
-                        directives[DOM.extractDirectiveIndexFromMarker(node)]
-                    );
-                }
-        }
-    }
-
-    let targetOffset = 0;
-
     if (
         // If the first node in a fragment is a marker, that means it's an unstable first node,
         // because something like a when, repeat, etc. could add nodes before the marker.
         // To mitigate this, we insert a stable first node. However, if we insert a node,
         // that will alter the result of the TreeWalker. So, we also need to offset the target index.
         DOM.isMarker(fragment.firstChild!) ||
-        // Or if there is only one node and a directive, it means the template's content
+        // Or if there is only one node, it means the template's content
         // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
         // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
-        (fragment.childNodes.length === 1 && directives.length)
+        fragment.childNodes.length === 1
     ) {
         fragment.insertBefore(document.createComment(""), fragment.firstChild);
-        targetOffset = -1;
     }
 
+    let node = fragment.firstChild;
+    let nodeIndex = 0;
+    const parentId = "r"; //root
+
+    while (node) {
+        const result = compileNode(context, parentId, node, nodeIndex);
+        node = result.node;
+        nodeIndex = result.index;
+    }
+
+    next.node = null; // prevent leaks
+
     const viewBehaviorFactories = context.behaviorFactories;
+    const targetIds = context.targetIds;
     context.release();
 
-    return {
+    return new HTMLTemplateCompilationResult(
         fragment,
         viewBehaviorFactories,
         hostBehaviorFactories,
-        targetOffset,
-    };
+        targetIds
+    );
 }
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 30f69b5a50b..9ac9aae3314 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -1,6 +1,14 @@
 import { DOM } from "../dom.js";
 import type { Behavior } from "../observation/behavior.js";
 
+/**
+ * The target nodes available to a behavior.
+ * @public
+ */
+export type BehaviorTargets = {
+    [id: string]: Node;
+};
+
 /**
  * A factory that can create a {@link Behavior} associated with a particular
  * location within a DOM fragment.
@@ -8,15 +16,15 @@ import type { Behavior } from "../observation/behavior.js";
  */
 export interface NodeBehaviorFactory {
     /**
-     * The index of the DOM node to which the created behavior will apply.
+     * The structural id of the DOM node to which the created behavior will apply.
      */
-    targetIndex: number;
+    targetId: string;
 
     /**
-     * Creates a behavior for the provided target node.
-     * @param target - The node instance to create the behavior for.
+     * Creates a behavior.
+     * @param target - The targets available for behaviors to be attached to.
      */
-    createBehavior(target: Node): Behavior;
+    createBehavior(targets: BehaviorTargets): Behavior;
 }
 
 /**
@@ -25,9 +33,9 @@ export interface NodeBehaviorFactory {
  */
 export abstract class HTMLDirective implements NodeBehaviorFactory {
     /**
-     * The index of the DOM node to which the created behavior will apply.
+     * The structural id of the DOM node to which the created behavior will apply.
      */
-    public targetIndex: number = 0;
+    public targetId: string = "h";
 
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -36,10 +44,10 @@ export abstract class HTMLDirective implements NodeBehaviorFactory {
     public abstract createPlaceholder(index: number): string;
 
     /**
-     * Creates a behavior for the provided target node.
-     * @param target - The node instance to create the behavior for.
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
      */
-    public abstract createBehavior(target: Node): Behavior;
+    public abstract createBehavior(targets: BehaviorTargets): Behavior;
 }
 
 /**
@@ -66,7 +74,11 @@ export abstract class TargetedHTMLDirective extends HTMLDirective {
  * an {@link AttachedBehaviorHTMLDirective}.
  * @public
  */
-export type AttachedBehaviorType<T = any> = new (target: any, options: T) => Behavior;
+export type AttachedBehaviorType<T = any> = new (
+    targets: BehaviorTargets,
+    targetId: string,
+    options: T
+) => Behavior;
 
 /**
  * A directive that attaches special behavior to an element via a custom attribute.
@@ -98,13 +110,13 @@ export class AttachedBehaviorHTMLDirective<T = any> extends HTMLDirective {
     }
 
     /**
-     * Creates a behavior for the provided target node.
-     * @param target - The node instance to create the behavior for.
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
      * @remarks
      * Creates an instance of the `behavior` type this directive was constructed with
-     * and passes the target and options to that `behavior`'s constructor.
+     * and passes the targets, targetId, and options to that `behavior`'s constructor.
      */
-    public createBehavior(target: Node): Behavior {
-        return new this.behavior(target, this.options);
+    public createBehavior(targets: BehaviorTargets): Behavior {
+        return new this.behavior(targets, this.targetId, this.options);
     }
 }
diff --git a/packages/web-components/fast-element/src/templating/ref.ts b/packages/web-components/fast-element/src/templating/ref.ts
index 96a65cb026d..a3d90e9db41 100644
--- a/packages/web-components/fast-element/src/templating/ref.ts
+++ b/packages/web-components/fast-element/src/templating/ref.ts
@@ -1,18 +1,27 @@
-import type { Behavior } from "../observation/behavior.js";
-import type { CaptureType } from "./template.js";
-import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
+import type { Behavior } from "../observation/behavior";
+import type { CaptureType } from "./template";
+import { AttachedBehaviorHTMLDirective } from "./html-directive";
+import type { BehaviorTargets } from "..";
 
 /**
  * The runtime behavior for template references.
  * @public
  */
 export class RefBehavior implements Behavior {
+    private target: Node;
+
     /**
      * Creates an instance of RefBehavior.
      * @param target - The element to reference.
      * @param propertyName - The name of the property to assign the reference to.
      */
-    public constructor(private target: HTMLElement, private propertyName: string) {}
+    public constructor(
+        targets: BehaviorTargets,
+        targetId: string,
+        private propertyName: string
+    ) {
+        this.target = targets[targetId];
+    }
 
     /**
      * Bind this behavior to the source.
diff --git a/packages/web-components/fast-element/src/templating/repeat.spec.ts b/packages/web-components/fast-element/src/templating/repeat.spec.ts
index e5b03b2f6b9..f4094de7514 100644
--- a/packages/web-components/fast-element/src/templating/repeat.spec.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.spec.ts
@@ -6,6 +6,17 @@ import { DOM } from "../dom";
 import { toHTML } from "../__test__/helpers";
 
 describe("The repeat", () => {
+    function createLocation() {
+        const parent = document.createElement("div");
+        const location = document.createComment("");
+        const targetId = 'r';
+        const targets = { [targetId]: location };
+
+        parent.appendChild(location);
+
+        return { parent, targets, targetId };
+    }
+
     context("template function", () => {
         it("returns a RepeatDirective", () => {
             const directive = repeat(
@@ -18,12 +29,14 @@ describe("The repeat", () => {
 
     context("directive", () => {
         it("creates a RepeatBehavior", () => {
+            const { parent, targets, targetId } = createLocation();
             const directive = repeat(
                 () => [],
                 html`test`
             ) as RepeatDirective;
-            const target = document.createComment("");
-            const behavior = directive.createBehavior(target);
+            directive.targetId = targetId;
+
+            const behavior = directive.createBehavior(targets);
 
             expect(behavior).to.be.instanceOf(RepeatBehavior);
         });
@@ -65,15 +78,6 @@ describe("The repeat", () => {
             }
         }
 
-        function createLocation() {
-            const parent = document.createElement("div");
-            const location = document.createComment("");
-
-            parent.appendChild(location);
-
-            return { parent, location };
-        }
-
         function createOutput(
             size: number,
             filter: (index: number) => boolean = () => true,
@@ -93,12 +97,14 @@ describe("The repeat", () => {
 
         zeroThroughTen.forEach(size => {
             it(`renders a template for each item in array of size ${size}`, () => {
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+
+                const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
                 behavior.bind(vm, defaultExecutionContext);
@@ -109,12 +115,13 @@ describe("The repeat", () => {
 
         zeroThroughTen.forEach(size => {
             it(`renders empty when an array of size ${size} is replaced with an empty array`, async () => {
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     wrappedItemTemplate
                 ) as RepeatDirective;
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+                const behavior = directive.createBehavior(targets);
                 const data = new ViewModel(size);
 
                 behavior.bind(data, defaultExecutionContext);
@@ -141,12 +148,13 @@ describe("The repeat", () => {
 
         zeroThroughTen.forEach(size => {
             it(`updates rendered HTML when a new item is pushed into an array of size ${size}`, async () => {
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+                const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
                 behavior.bind(vm, defaultExecutionContext);
@@ -160,12 +168,13 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`updates rendered HTML when a single item is spliced from the end of an array of size ${size}`, async () => {
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+                const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
                 behavior.bind(vm, defaultExecutionContext);
@@ -183,12 +192,13 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`updates rendered HTML when a single item is spliced from the beginning of an array of size ${size}`, async () => {
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+                const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
                 behavior.bind(vm, defaultExecutionContext);
@@ -203,12 +213,13 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`updates rendered HTML when a single item is replaced from the end of an array of size ${size}`, async () => {
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+                const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
                 behavior.bind(vm, defaultExecutionContext);
@@ -226,12 +237,13 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`updates rendered HTML when a single item is replaced from the beginning of an array of size ${size}`, async () => {
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+                const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
                 behavior.bind(vm, defaultExecutionContext);
@@ -248,12 +260,13 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`updates all when the template changes for an array of size ${size}`, async () => {
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     x => vm.template
                 ) as RepeatDirective;
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+                const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
                 behavior.bind(vm, defaultExecutionContext);
@@ -277,13 +290,13 @@ describe("The repeat", () => {
                     )}
                 `;
 
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     deepItemTemplate
                 ) as RepeatDirective;
-
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+                const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size, true);
 
                 behavior.bind(vm, defaultExecutionContext);
@@ -299,12 +312,13 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`handles back to back shift operations for arrays of size ${size}`, async () => {
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+                const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
                 behavior.bind(vm, defaultExecutionContext);
@@ -322,12 +336,13 @@ describe("The repeat", () => {
 
         zeroThroughTen.forEach(size => {
             it(`updates rendered HTML when a new item is pushed into an array of size ${size} after it has been unbound and rebound`, async () => {
-                const { parent, location } = createLocation();
+                const { parent, targets, targetId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                const behavior = directive.createBehavior(location);
+                directive.targetId = targetId;
+                const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
                 behavior.bind(vm, defaultExecutionContext);
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index 6e4fa2fa3c8..19a9c5d07d3 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -1,18 +1,19 @@
-import { DOM } from "../dom.js";
+import { DOM } from "../dom";
 import {
     Binding,
     BindingObserver,
     ExecutionContext,
     Observable,
-} from "../observation/observable.js";
-import type { Notifier, Subscriber } from "../observation/notifier.js";
-import { enableArrayObservation } from "../observation/array-observer.js";
-import type { Splice } from "../observation/array-change-records.js";
-import type { Behavior } from "../observation/behavior.js";
-import { emptyArray } from "../platform.js";
-import { HTMLDirective } from "./html-directive.js";
-import { HTMLView, SyntheticView } from "./view.js";
-import type { CaptureType, SyntheticViewTemplate } from "./template.js";
+} from "../observation/observable";
+import type { Notifier, Subscriber } from "../observation/notifier";
+import { enableArrayObservation } from "../observation/array-observer";
+import type { Splice } from "../observation/array-change-records";
+import type { Behavior } from "../observation/behavior";
+import { emptyArray } from "../platform";
+import { HTMLDirective } from "./html-directive";
+import { HTMLView, SyntheticView } from "./view";
+import type { CaptureType, SyntheticViewTemplate } from "./template";
+import type { BehaviorTargets } from "..";
 
 /**
  * Options for configuring repeat behavior.
@@ -329,9 +330,9 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.
      */
-    public createBehavior(target: Node): RepeatBehavior<TSource> {
+    public createBehavior(targets: BehaviorTargets): RepeatBehavior<TSource> {
         return new RepeatBehavior<TSource>(
-            target,
+            targets[this.targetId],
             this.itemsBinding,
             this.isItemsBindingVolatile,
             this.templateBinding,
diff --git a/packages/web-components/fast-element/src/templating/slotted.spec.ts b/packages/web-components/fast-element/src/templating/slotted.spec.ts
index e5593fc3004..bfcbd4c448f 100644
--- a/packages/web-components/fast-element/src/templating/slotted.spec.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.spec.ts
@@ -15,9 +15,12 @@ describe("The slotted", () => {
 
     context("directive", () => {
         it("creates a SlottedBehavior", () => {
+            const targetId = 'r';
             const directive = slotted("test") as AttachedBehaviorHTMLDirective;
+            directive.targetId = targetId;
             const target = document.createElement("slot");
-            const behavior = directive.createBehavior(target);
+            const targets = { [targetId]: target }
+            const behavior = directive.createBehavior(targets);
 
             expect(behavior).to.be.instanceOf(SlottedBehavior);
         });
@@ -45,15 +48,17 @@ describe("The slotted", () => {
             const slot = document.createElement("slot");
             const shadowRoot = host.attachShadow({ mode: "open" });
             const children = createAndAppendChildren(host, elementName);
+            const targetId = 'r';
+            const targets = { [targetId]: slot };
 
             shadowRoot.appendChild(slot);
 
-            return { host, slot, children };
+            return { host, slot, children, targets, targetId };
         }
 
         it("gathers nodes from a slot", () => {
-            const { host, slot, children } = createDOM();
-            const behavior = new SlottedBehavior(slot, { property: "nodes" });
+            const { children, targets, targetId } = createDOM();
+            const behavior = new SlottedBehavior(targets, targetId, { property: "nodes" });
             const model = new Model();
 
             behavior.bind(model);
@@ -62,8 +67,8 @@ describe("The slotted", () => {
         });
 
         it("gathers nodes from a slot with a filter", () => {
-            const { host, slot, children } = createDOM("foo-bar");
-            const behavior = new SlottedBehavior(slot, {
+            const { targets, targetId, children } = createDOM("foo-bar");
+            const behavior = new SlottedBehavior(targets, targetId, {
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
@@ -75,8 +80,8 @@ describe("The slotted", () => {
         });
 
         it("updates when slotted nodes change", async () => {
-            const { host, slot, children } = createDOM("foo-bar");
-            const behavior = new SlottedBehavior(slot, { property: "nodes" });
+            const { host, slot, children, targets, targetId } = createDOM("foo-bar");
+            const behavior = new SlottedBehavior(targets, targetId, { property: "nodes" });
             const model = new Model();
 
             behavior.bind(model);
@@ -91,8 +96,8 @@ describe("The slotted", () => {
         });
 
         it("updates when slotted nodes change with a filter", async () => {
-            const { host, slot, children } = createDOM("foo-bar");
-            const behavior = new SlottedBehavior(slot, {
+            const { host, slot, children, targets, targetId } = createDOM("foo-bar");
+            const behavior = new SlottedBehavior(targets, targetId, {
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
@@ -110,8 +115,8 @@ describe("The slotted", () => {
         });
 
         it("clears and unwatches when unbound", async () => {
-            const { host, slot, children } = createDOM("foo-bar");
-            const behavior = new SlottedBehavior(slot, { property: "nodes" });
+            const { host, slot, children, targets, targetId } = createDOM("foo-bar");
+            const behavior = new SlottedBehavior(targets, targetId, { property: "nodes" });
             const model = new Model();
 
             behavior.bind(model);
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index 16af54c6a1b..880e2f0cf67 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -1,6 +1,7 @@
-import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
-import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation.js";
-import type { CaptureType } from "./template.js";
+import type { BehaviorTargets } from "..";
+import { AttachedBehaviorHTMLDirective } from "./html-directive";
+import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
+import type { CaptureType } from "./template";
 
 /**
  * The options used to configure slotted node observation.
@@ -20,8 +21,12 @@ export class SlottedBehavior extends NodeObservationBehavior<SlottedBehaviorOpti
      * @param target - The slot element target to observe.
      * @param options - The options to use when observing the slot.
      */
-    public constructor(target: HTMLSlotElement, options: SlottedBehaviorOptions) {
-        super(target, options);
+    public constructor(
+        targets: BehaviorTargets,
+        targetId: string,
+        options: SlottedBehaviorOptions
+    ) {
+        super(targets[targetId] as HTMLElement, options);
     }
 
     /**
diff --git a/packages/web-components/fast-element/src/templating/template.spec.ts b/packages/web-components/fast-element/src/templating/template.spec.ts
index dde4de8c72d..23e547302ad 100644
--- a/packages/web-components/fast-element/src/templating/template.spec.ts
+++ b/packages/web-components/fast-element/src/templating/template.spec.ts
@@ -3,6 +3,7 @@ import { html, ViewTemplate } from "./template";
 import { DOM } from "../dom";
 import { HTMLBindingDirective } from "./binding";
 import { HTMLDirective, TargetedHTMLDirective } from "./html-directive";
+import type { BehaviorTargets } from "..";
 
 describe(`The html tag template helper`, () => {
     it(`transforms a string into a ViewTemplate.`, () => {
@@ -230,7 +231,7 @@ describe(`The html tag template helper`, () => {
     it(`captures a case-sensitive property name when used with a named target directive`, () => {
         class TestDirective extends TargetedHTMLDirective {
             targetName: string | undefined;
-            createBehavior(target: Node) {
+            createBehavior(targets: BehaviorTargets) {
                 return { bind() {}, unbind() {} };
             }
         }
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index f05b4079f49..626414713ce 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -1,14 +1,15 @@
-import { DOM } from "../dom.js";
-import type { Behavior } from "../observation/behavior.js";
-import { Binding, defaultExecutionContext } from "../observation/observable.js";
-import { compileTemplate } from "./compiler.js";
-import { ElementView, HTMLView, SyntheticView } from "./view.js";
+import { DOM } from "../dom";
+import type { Behavior } from "../observation/behavior";
+import { Binding, defaultExecutionContext } from "../observation/observable";
+import { compileTemplate } from "./compiler";
+import { ElementView, HTMLView, SyntheticView } from "./view";
 import {
     HTMLDirective,
     NodeBehaviorFactory,
     TargetedHTMLDirective,
-} from "./html-directive.js";
-import { HTMLBindingDirective } from "./binding.js";
+} from "./html-directive";
+import { HTMLBindingDirective } from "./binding";
+import type { HTMLTemplateCompilationResult } from "..";
 
 /**
  * A template capable of creating views specifically for rendering custom elements.
@@ -50,12 +51,7 @@ export interface SyntheticViewTemplate<TSource = any, TParent = any> {
 /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 export class ViewTemplate<TSource = any, TParent = any>
     implements ElementViewTemplate, SyntheticViewTemplate {
-    private behaviorCount: number = 0;
-    private hasHostBehaviors: boolean = false;
-    private fragment: DocumentFragment | null = null;
-    private targetOffset: number = 0;
-    private viewBehaviorFactories: NodeBehaviorFactory[] | null = null;
-    private hostBehaviorFactories: NodeBehaviorFactory[] | null = null;
+    private result: HTMLTemplateCompilationResult | null = null;
 
     /**
      * The html representing what this template will
@@ -86,7 +82,7 @@ export class ViewTemplate<TSource = any, TParent = any>
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
     public create(hostBindingTarget?: Element): HTMLView {
-        if (this.fragment === null) {
+        if (this.result === null) {
             let template: HTMLTemplateElement;
             const html = this.html;
 
@@ -103,48 +99,26 @@ export class ViewTemplate<TSource = any, TParent = any>
                 template = html;
             }
 
-            const result = compileTemplate(template, this.directives);
-
-            this.fragment = result.fragment;
-            this.viewBehaviorFactories = result.viewBehaviorFactories;
-            this.hostBehaviorFactories = result.hostBehaviorFactories;
-            this.targetOffset = result.targetOffset;
-            this.behaviorCount =
-                this.viewBehaviorFactories.length + this.hostBehaviorFactories.length;
-            this.hasHostBehaviors = this.hostBehaviorFactories.length > 0;
+            this.result = compileTemplate(template, this.directives);
         }
 
-        const fragment = this.fragment.cloneNode(true) as DocumentFragment;
-        const viewFactories = this.viewBehaviorFactories!;
-        const behaviors = new Array<Behavior>(this.behaviorCount);
-        const walker = DOM.createTemplateWalker(fragment);
-
+        const result = this.result;
+        const fragment = result.fragment.cloneNode(true) as DocumentFragment;
+        const viewFactories = result.viewBehaviorFactories;
+        const behaviors = new Array<Behavior>(result.behaviorCount);
+        const targets = result.createTargets(fragment, hostBindingTarget);
         let behaviorIndex = 0;
-        let targetIndex = this.targetOffset;
-        let node = walker.nextNode();
 
         for (let ii = viewFactories.length; behaviorIndex < ii; ++behaviorIndex) {
             const factory = viewFactories[behaviorIndex];
-            const factoryIndex = factory.targetIndex;
-
-            while (node !== null) {
-                if (targetIndex === factoryIndex) {
-                    behaviors[behaviorIndex] = factory.createBehavior(node);
-                    break;
-                } else {
-                    node = walker.nextNode();
-                    targetIndex++;
-                }
-            }
+            behaviors[behaviorIndex] = factory.createBehavior(targets);
         }
 
-        if (this.hasHostBehaviors) {
-            const hostFactories = this.hostBehaviorFactories!;
+        if (result.hasHostBehaviors) {
+            const hostFactories = result.hostBehaviorFactories;
 
             for (let i = 0, ii = hostFactories.length; i < ii; ++i, ++behaviorIndex) {
-                behaviors[behaviorIndex] = hostFactories[i].createBehavior(
-                    hostBindingTarget!
-                );
+                behaviors[behaviorIndex] = hostFactories[i].createBehavior(targets);
             }
         }
 

From c1b2c76e5ebdbbec90be6b91e6140341896dd290 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 12 Oct 2021 15:43:55 -0400
Subject: [PATCH 002/135] fix(compiler): don't add unnecessary descriptors to
 compile result

---
 .../fast-element/docs/api-report.md           |  2 +-
 .../fast-element/src/templating/compiler.ts   | 44 +++++++++++++------
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 3a878652f8e..e0f872c35aa 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -357,7 +357,7 @@ export abstract class HTMLDirective implements NodeBehaviorFactory {
 
 // @public
 export class HTMLTemplateCompilationResult {
-    constructor(fragment: DocumentFragment, viewBehaviorFactories: NodeBehaviorFactory[], hostBehaviorFactories: NodeBehaviorFactory[], targetIds: string[]);
+    constructor(fragment: DocumentFragment, viewBehaviorFactories: NodeBehaviorFactory[], hostBehaviorFactories: NodeBehaviorFactory[], targetIds: string[], descriptors: PropertyDescriptorMap);
     // (undocumented)
     get behaviorCount(): number;
     createTargets(root: Node, host?: Node): BehaviorTargets;
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 2f3fd01db41..1a61fff87c2 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -10,9 +10,14 @@ type InlineDirective = HTMLDirective & {
     targetAtContent(): void;
 };
 
-const descriptors: PropertyDescriptorMap = {};
+const descriptorCache: PropertyDescriptorMap = {};
 
-function addTargetDescriptor(parentId: string, targetId: string, targetIndex: number) {
+function addTargetDescriptor(
+    descriptors: PropertyDescriptorMap,
+    parentId: string,
+    targetId: string,
+    targetIndex: number
+) {
     if (
         targetId === "r" || // root
         targetId === "h" || // host
@@ -27,7 +32,7 @@ function addTargetDescriptor(parentId: string, targetId: string, targetIndex: nu
         if (index !== -1) {
             const grandparentId = parentId.substr(0, index);
             const childIndex = parseInt(parentId.substr(index));
-            addTargetDescriptor(grandparentId, parentId, childIndex);
+            addTargetDescriptor(descriptors, grandparentId, parentId, childIndex);
         }
     }
 
@@ -39,14 +44,22 @@ function createTargetDescriptor(
     targetId: string,
     targetIndex: number
 ): PropertyDescriptor {
-    const field = `_${targetId}`;
+    let descriptor = descriptorCache[targetId];
 
-    return {
-        configurable: false,
-        get: function () {
-            return this[field] || (this[field] = this[parentId].childNodes[targetIndex]);
-        },
-    };
+    if (!descriptor) {
+        const field = `_${targetId}`;
+
+        descriptorCache[targetId] = descriptor = {
+            configurable: false,
+            get: function () {
+                return (
+                    this[field] || (this[field] = this[parentId].childNodes[targetIndex])
+                );
+            },
+        };
+    }
+
+    return descriptor;
 }
 
 let sharedContext: CompilationContext | null = null;
@@ -61,6 +74,7 @@ class CompilationContext {
     public behaviorFactories!: NodeBehaviorFactory[];
     public directives: ReadonlyArray<HTMLDirective>;
     public targetIds!: string[];
+    public descriptors: PropertyDescriptorMap;
 
     public addFactory(
         factory: NodeBehaviorFactory,
@@ -72,7 +86,7 @@ class CompilationContext {
             this.targetIds.push(targetId);
         }
 
-        addTargetDescriptor(parentId, targetId, targetIndex);
+        addTargetDescriptor(this.descriptors, parentId, targetId, targetIndex);
         factory.targetId = targetId;
         this.behaviorFactories.push(factory);
     }
@@ -90,6 +104,7 @@ class CompilationContext {
     public reset(): void {
         this.behaviorFactories = [];
         this.targetIds = [];
+        this.descriptors = {};
     }
 
     public release(): void {
@@ -318,7 +333,8 @@ export class HTMLTemplateCompilationResult {
         public readonly fragment: DocumentFragment,
         public readonly viewBehaviorFactories: NodeBehaviorFactory[],
         public readonly hostBehaviorFactories: NodeBehaviorFactory[],
-        private targetIds: string[]
+        private targetIds: string[],
+        descriptors: PropertyDescriptorMap
     ) {
         this.proto = Object.create(null, descriptors);
     }
@@ -406,12 +422,14 @@ export function compileTemplate(
 
     const viewBehaviorFactories = context.behaviorFactories;
     const targetIds = context.targetIds;
+    const descriptors = context.descriptors;
     context.release();
 
     return new HTMLTemplateCompilationResult(
         fragment,
         viewBehaviorFactories,
         hostBehaviorFactories,
-        targetIds
+        targetIds,
+        descriptors
     );
 }

From 924fda799c2cb656f9adfe954a69c3d6d7eabca7 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 12 Oct 2021 22:44:08 -0400
Subject: [PATCH 003/135] fix(compiler): correct extraction of child index from
 parent id

---
 .../web-components/fast-element/src/templating/compiler.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 1a61fff87c2..e1534a1595a 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,4 +1,4 @@
-import type { BehaviorTargets } from "..";
+import type { BehaviorTargets } from "./html-directive";
 import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
 import type { Binding, ExecutionContext } from "../observation/observable";
 import { HTMLBindingDirective } from "./binding";
@@ -31,7 +31,7 @@ function addTargetDescriptor(
 
         if (index !== -1) {
             const grandparentId = parentId.substr(0, index);
-            const childIndex = parseInt(parentId.substr(index));
+            const childIndex = parseInt(parentId.substr(index + 1));
             addTargetDescriptor(descriptors, grandparentId, parentId, childIndex);
         }
     }

From c689dcb9650deff4fdc0d77ea63dc0e7ba46570c Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 12 Oct 2021 23:07:05 -0400
Subject: [PATCH 004/135] feat(compiler): unify host and view factories

---
 .../fast-element/docs/api-report.md           | 14 ++-----
 .../src/templating/compiler.spec.ts           | 14 +++----
 .../fast-element/src/templating/compiler.ts   | 38 +++++--------------
 .../fast-element/src/templating/template.ts   | 18 ++-------
 4 files changed, 24 insertions(+), 60 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index e0f872c35aa..a90e65c97ec 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -357,19 +357,13 @@ export abstract class HTMLDirective implements NodeBehaviorFactory {
 
 // @public
 export class HTMLTemplateCompilationResult {
-    constructor(fragment: DocumentFragment, viewBehaviorFactories: NodeBehaviorFactory[], hostBehaviorFactories: NodeBehaviorFactory[], targetIds: string[], descriptors: PropertyDescriptorMap);
-    // (undocumented)
-    get behaviorCount(): number;
+    constructor(fragment: DocumentFragment, factories: NodeBehaviorFactory[], targetIds: string[], descriptors: PropertyDescriptorMap);
     createTargets(root: Node, host?: Node): BehaviorTargets;
     // (undocumented)
-    readonly fragment: DocumentFragment;
-    // (undocumented)
-    get hasHostBehaviors(): boolean;
-    // (undocumented)
-    readonly hostBehaviorFactories: NodeBehaviorFactory[];
+    readonly factories: NodeBehaviorFactory[];
     // (undocumented)
-    readonly viewBehaviorFactories: NodeBehaviorFactory[];
-}
+    readonly fragment: DocumentFragment;
+    }
 
 // @public
 export class HTMLView implements ElementView, SyntheticView {
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index 26fc7b5fe4d..4e80842363f 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -146,7 +146,7 @@ describe("The template compiler", () => {
 
         scenarios.forEach(x => {
             it(`handles ${x.type} binding expression(s)`, () => {
-                const { fragment, viewBehaviorFactories } = compile(x.html, x.directives);
+                const { fragment, factories } = compile(x.html, x.directives);
 
                 expect(toHTML(fragment)).to.equal(x.fragment);
                 expect(toHTML(fragment.cloneNode(true) as DocumentFragment)).to.equal(
@@ -160,7 +160,7 @@ describe("The template compiler", () => {
                     );
                 }
 
-                const length = viewBehaviorFactories.length;
+                const length = factories.length;
 
                 expect(length).to.equal(x.directives.length);
 
@@ -168,7 +168,7 @@ describe("The template compiler", () => {
                     expect(length).to.equal(x.targetIds.length);
 
                     for (let i = 0; i < length; ++i) {
-                        expect(viewBehaviorFactories[i].targetId).to.equal(
+                        expect(factories[i].targetId).to.equal(
                             x.targetIds[i]
                         );
                     }
@@ -314,7 +314,7 @@ describe("The template compiler", () => {
 
         scenarios.forEach(x => {
             it(`handles ${x.type} binding expression(s)`, () => {
-                const { fragment, viewBehaviorFactories } = compile(x.html, x.directives);
+                const { fragment, factories } = compile(x.html, x.directives);
 
                 expect(toHTML(fragment)).to.equal(x.fragment);
                 expect(toHTML(fragment.cloneNode(true) as DocumentFragment)).to.equal(
@@ -323,7 +323,7 @@ describe("The template compiler", () => {
 
                 if (x.result) {
                     expect(
-                        (viewBehaviorFactories[0] as HTMLBindingDirective).binding(
+                        (factories[0] as HTMLBindingDirective).binding(
                             scope,
                             defaultExecutionContext
                         )
@@ -331,12 +331,12 @@ describe("The template compiler", () => {
                 }
 
                 if (x.targetIds) {
-                    const length = viewBehaviorFactories.length;
+                    const length = factories.length;
 
                     expect(length).to.equal(x.targetIds.length);
 
                     for (let i = 0; i < length; ++i) {
-                        expect(viewBehaviorFactories[i].targetId).to.equal(
+                        expect(factories[i].targetId).to.equal(
                             x.targetIds[i]
                         );
                     }
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index e1534a1595a..b2523311103 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -28,12 +28,9 @@ function addTargetDescriptor(
 
     if (!descriptors[parentId]) {
         const index = parentId.lastIndexOf(".");
-
-        if (index !== -1) {
-            const grandparentId = parentId.substr(0, index);
-            const childIndex = parseInt(parentId.substr(index + 1));
-            addTargetDescriptor(descriptors, grandparentId, parentId, childIndex);
-        }
+        const grandparentId = parentId.substr(0, index);
+        const childIndex = parseInt(parentId.substr(index + 1));
+        addTargetDescriptor(descriptors, grandparentId, parentId, childIndex);
     }
 
     descriptors[targetId] = createTargetDescriptor(parentId, targetId, targetIndex);
@@ -71,7 +68,7 @@ const next = {
 };
 
 class CompilationContext {
-    public behaviorFactories!: NodeBehaviorFactory[];
+    public factories!: NodeBehaviorFactory[];
     public directives: ReadonlyArray<HTMLDirective>;
     public targetIds!: string[];
     public descriptors: PropertyDescriptorMap;
@@ -88,7 +85,7 @@ class CompilationContext {
 
         addTargetDescriptor(this.descriptors, parentId, targetId, targetIndex);
         factory.targetId = targetId;
-        this.behaviorFactories.push(factory);
+        this.factories.push(factory);
     }
 
     public captureContentBinding(
@@ -102,7 +99,7 @@ class CompilationContext {
     }
 
     public reset(): void {
-        this.behaviorFactories = [];
+        this.factories = [];
         this.targetIds = [];
         this.descriptors = {};
     }
@@ -331,22 +328,13 @@ export class HTMLTemplateCompilationResult {
      */
     public constructor(
         public readonly fragment: DocumentFragment,
-        public readonly viewBehaviorFactories: NodeBehaviorFactory[],
-        public readonly hostBehaviorFactories: NodeBehaviorFactory[],
+        public readonly factories: NodeBehaviorFactory[],
         private targetIds: string[],
         descriptors: PropertyDescriptorMap
     ) {
         this.proto = Object.create(null, descriptors);
     }
 
-    get hasHostBehaviors() {
-        return this.hostBehaviorFactories.length > 0;
-    }
-
-    get behaviorCount() {
-        return this.viewBehaviorFactories.length + this.hostBehaviorFactories.length;
-    }
-
     /**
      * Creates a behavior target lookup object.
      * @param host - The host element.
@@ -391,8 +379,6 @@ export function compileTemplate(
 
     const context = CompilationContext.borrow(directives);
     compileAttributes(context, "", template, /* host */ "h", 0, true);
-    const hostBehaviorFactories = context.behaviorFactories;
-    context.reset();
 
     if (
         // If the first node in a fragment is a marker, that means it's an unstable first node,
@@ -420,16 +406,10 @@ export function compileTemplate(
 
     next.node = null; // prevent leaks
 
-    const viewBehaviorFactories = context.behaviorFactories;
+    const factories = context.factories;
     const targetIds = context.targetIds;
     const descriptors = context.descriptors;
     context.release();
 
-    return new HTMLTemplateCompilationResult(
-        fragment,
-        viewBehaviorFactories,
-        hostBehaviorFactories,
-        targetIds,
-        descriptors
-    );
+    return new HTMLTemplateCompilationResult(fragment, factories, targetIds, descriptors);
 }
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 626414713ce..4cf3724a459 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -104,22 +104,12 @@ export class ViewTemplate<TSource = any, TParent = any>
 
         const result = this.result;
         const fragment = result.fragment.cloneNode(true) as DocumentFragment;
-        const viewFactories = result.viewBehaviorFactories;
-        const behaviors = new Array<Behavior>(result.behaviorCount);
+        const factories = result.factories;
+        const behaviors = new Array<Behavior>(factories.length);
         const targets = result.createTargets(fragment, hostBindingTarget);
-        let behaviorIndex = 0;
 
-        for (let ii = viewFactories.length; behaviorIndex < ii; ++behaviorIndex) {
-            const factory = viewFactories[behaviorIndex];
-            behaviors[behaviorIndex] = factory.createBehavior(targets);
-        }
-
-        if (result.hasHostBehaviors) {
-            const hostFactories = result.hostBehaviorFactories;
-
-            for (let i = 0, ii = hostFactories.length; i < ii; ++i, ++behaviorIndex) {
-                behaviors[behaviorIndex] = hostFactories[i].createBehavior(targets);
-            }
+        for (let i = 0, ii = factories.length; i < ii; ++i) {
+            behaviors[i] = factories[i].createBehavior(targets);
         }
 
         return new HTMLView(fragment, behaviors);

From 1240f77aa7bba507b509309f76e9aa0a8f87c3ee Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Wed, 13 Oct 2021 11:42:40 -0400
Subject: [PATCH 005/135] feat(view): unify behavior creation with first bind;
 clean up compiler

---
 .../fast-element/docs/api-report.md           |  2 +-
 .../fast-element/src/templating/compiler.ts   | 94 +++++++++----------
 .../fast-element/src/templating/template.ts   | 13 +--
 .../fast-element/src/templating/view.ts       | 48 +++++++---
 4 files changed, 82 insertions(+), 75 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index a90e65c97ec..88d13a0023e 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -367,7 +367,7 @@ export class HTMLTemplateCompilationResult {
 
 // @public
 export class HTMLView implements ElementView, SyntheticView {
-    constructor(fragment: DocumentFragment, behaviors: Behavior[]);
+    constructor(fragment: DocumentFragment, factories: NodeBehaviorFactory[], targets: BehaviorTargets);
     appendTo(node: Node): void;
     bind(source: unknown, context: ExecutionContext): void;
     context: ExecutionContext | null;
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index b2523311103..0c802ecd9d0 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -10,6 +10,7 @@ type InlineDirective = HTMLDirective & {
     targetAtContent(): void;
 };
 
+const targetIdFrom = (parentId: string, nodeIndex: number) => `${parentId}.${nodeIndex}`;
 const descriptorCache: PropertyDescriptorMap = {};
 
 function addTargetDescriptor(
@@ -47,10 +48,9 @@ function createTargetDescriptor(
         const field = `_${targetId}`;
 
         descriptorCache[targetId] = descriptor = {
-            configurable: false,
-            get: function () {
+            get() {
                 return (
-                    this[field] || (this[field] = this[parentId].childNodes[targetIndex])
+                    this[field] ?? (this[field] = this[parentId].childNodes[targetIndex])
                 );
             },
         };
@@ -68,10 +68,10 @@ const next = {
 };
 
 class CompilationContext {
-    public factories!: NodeBehaviorFactory[];
+    public factories: NodeBehaviorFactory[] = [];
+    public targetIds: string[] = [];
+    public descriptors: PropertyDescriptorMap = {};
     public directives: ReadonlyArray<HTMLDirective>;
-    public targetIds!: string[];
-    public descriptors: PropertyDescriptorMap;
 
     public addFactory(
         factory: NodeBehaviorFactory,
@@ -81,9 +81,9 @@ class CompilationContext {
     ): void {
         if (this.targetIds.indexOf(targetId) === -1) {
             this.targetIds.push(targetId);
+            addTargetDescriptor(this.descriptors, parentId, targetId, targetIndex);
         }
 
-        addTargetDescriptor(this.descriptors, parentId, targetId, targetIndex);
         factory.targetId = targetId;
         this.factories.push(factory);
     }
@@ -98,23 +98,27 @@ class CompilationContext {
         this.addFactory(directive, parentId, targetId, targetIndex);
     }
 
-    public reset(): void {
+    public close(fragment: DocumentFragment): HTMLTemplateCompilationResult {
+        const result = new HTMLTemplateCompilationResult(
+            fragment,
+            this.factories,
+            this.targetIds,
+            this.descriptors
+        );
+
         this.factories = [];
         this.targetIds = [];
         this.descriptors = {};
-    }
-
-    public release(): void {
-        /* eslint-disable-next-line @typescript-eslint/no-this-alias */
         sharedContext = this;
+
+        return result;
     }
 
-    public static borrow(directives: ReadonlyArray<HTMLDirective>): CompilationContext {
-        const shareable = sharedContext || new CompilationContext();
-        shareable.directives = directives;
-        shareable.reset();
+    public static open(directives: ReadonlyArray<HTMLDirective>): CompilationContext {
+        const context = sharedContext ?? new CompilationContext();
+        context.directives = directives;
         sharedContext = null;
-        return shareable;
+        return context;
     }
 }
 
@@ -234,16 +238,15 @@ function compileContent(
         return next;
     }
 
-    let lastNode = node;
+    let currentNode: Text;
+    let lastNode = (currentNode = node);
+
     for (let i = 0, ii = parseResult.length; i < ii; ++i) {
         const currentPart = parseResult[i];
-        let currentNode: Text;
 
-        if (i === 0) {
-            currentNode = node;
-        } else {
+        if (i !== 0) {
             nodeIndex++;
-            nodeId = `${parentId}.${nodeIndex}`;
+            nodeId = targetIdFrom(parentId, nodeIndex);
             currentNode = lastNode.parentNode!.insertBefore(
                 document.createTextNode(""),
                 lastNode.nextSibling
@@ -270,27 +273,29 @@ function compileContent(
     return next;
 }
 
+function compileChildren(context: CompilationContext, parent: Node, parentId: string) {
+    let nodeIndex = 0;
+    let childNode = parent.firstChild;
+
+    while (childNode) {
+        const result = compileNode(context, parentId, childNode, nodeIndex);
+        childNode = result.node;
+        nodeIndex = result.index;
+    }
+}
+
 function compileNode(
     context: CompilationContext,
     parentId: string,
     node: Node,
     nodeIndex: number
 ) {
-    const nodeId = `${parentId}.${nodeIndex}`;
+    const nodeId = targetIdFrom(parentId, nodeIndex);
 
     switch (node.nodeType) {
         case 1: // element node
             compileAttributes(context, parentId, node as HTMLElement, nodeId, nodeIndex);
-
-            let child = node.firstChild;
-            let childIndex = 0;
-
-            while (child) {
-                const result = compileNode(context, nodeId, child, childIndex);
-                child = result.node;
-                childIndex = result.index;
-            }
-
+            compileChildren(context, node, nodeId);
             break;
         case 3: // text node
             return compileContent(context, node as Text, parentId, nodeId, nodeIndex);
@@ -377,7 +382,7 @@ export function compileTemplate(
     // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
     document.adoptNode(fragment);
 
-    const context = CompilationContext.borrow(directives);
+    const context = CompilationContext.open(directives);
     compileAttributes(context, "", template, /* host */ "h", 0, true);
 
     if (
@@ -394,22 +399,7 @@ export function compileTemplate(
         fragment.insertBefore(document.createComment(""), fragment.firstChild);
     }
 
-    let node = fragment.firstChild;
-    let nodeIndex = 0;
-    const parentId = "r"; //root
-
-    while (node) {
-        const result = compileNode(context, parentId, node, nodeIndex);
-        node = result.node;
-        nodeIndex = result.index;
-    }
-
+    compileChildren(context, fragment, "r");
     next.node = null; // prevent leaks
-
-    const factories = context.factories;
-    const targetIds = context.targetIds;
-    const descriptors = context.descriptors;
-    context.release();
-
-    return new HTMLTemplateCompilationResult(fragment, factories, targetIds, descriptors);
+    return context.close(fragment);
 }
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 4cf3724a459..347d0f998a5 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -104,15 +104,12 @@ export class ViewTemplate<TSource = any, TParent = any>
 
         const result = this.result;
         const fragment = result.fragment.cloneNode(true) as DocumentFragment;
-        const factories = result.factories;
-        const behaviors = new Array<Behavior>(factories.length);
-        const targets = result.createTargets(fragment, hostBindingTarget);
 
-        for (let i = 0, ii = factories.length; i < ii; ++i) {
-            behaviors[i] = factories[i].createBehavior(targets);
-        }
-
-        return new HTMLView(fragment, behaviors);
+        return new HTMLView(
+            fragment,
+            result.factories,
+            result.createTargets(fragment, hostBindingTarget)
+        );
     }
 
     /**
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index a99a05298f0..4591f7d69ba 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -1,5 +1,6 @@
-import type { Behavior } from "../observation/behavior.js";
-import type { ExecutionContext } from "../observation/observable.js";
+import type { BehaviorTargets, NodeBehaviorFactory } from "..";
+import type { Behavior } from "../observation/behavior";
+import type { ExecutionContext } from "../observation/observable";
 
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.
@@ -90,6 +91,8 @@ const range = document.createRange();
  * @public
  */
 export class HTMLView implements ElementView, SyntheticView {
+    private behaviors: Behavior[] | null = null;
+
     /**
      * The data that the view is bound to.
      */
@@ -117,7 +120,8 @@ export class HTMLView implements ElementView, SyntheticView {
      */
     public constructor(
         private fragment: DocumentFragment,
-        private behaviors: Behavior[]
+        private factories: NodeBehaviorFactory[],
+        private targets: BehaviorTargets
     ) {
         this.firstChild = fragment.firstChild!;
         this.lastChild = fragment.lastChild!;
@@ -192,10 +196,13 @@ export class HTMLView implements ElementView, SyntheticView {
         parent.removeChild(end);
 
         const behaviors = this.behaviors;
-        const oldSource = this.source;
 
-        for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-            behaviors[i].unbind(oldSource);
+        if (behaviors !== null) {
+            const oldSource = this.source;
+
+            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                behaviors[i].unbind(oldSource);
+            }
         }
     }
 
@@ -205,7 +212,7 @@ export class HTMLView implements ElementView, SyntheticView {
      * @param context - The execution context to run the behaviors within.
      */
     public bind(source: unknown, context: ExecutionContext): void {
-        const behaviors = this.behaviors;
+        let behaviors = this.behaviors;
 
         if (this.source === source) {
             return;
@@ -215,8 +222,8 @@ export class HTMLView implements ElementView, SyntheticView {
             this.source = source;
             this.context = context;
 
-            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                const current = behaviors[i];
+            for (let i = 0, ii = behaviors!.length; i < ii; ++i) {
+                const current = behaviors![i];
                 current.unbind(oldSource);
                 current.bind(source, context);
             }
@@ -224,8 +231,20 @@ export class HTMLView implements ElementView, SyntheticView {
             this.source = source;
             this.context = context;
 
-            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                behaviors[i].bind(source, context);
+            if (behaviors === null) {
+                this.behaviors = behaviors = new Array<Behavior>(this.factories.length);
+                const targets = this.targets;
+                const factories = this.factories;
+
+                for (let i = 0, ii = factories.length; i < ii; ++i) {
+                    const behavior = factories[i].createBehavior(targets);
+                    behavior.bind(source, context);
+                    behaviors[i] = behavior;
+                }
+            } else {
+                for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                    behaviors[i].bind(source, context);
+                }
             }
         }
     }
@@ -234,12 +253,13 @@ export class HTMLView implements ElementView, SyntheticView {
      * Unbinds a view's behaviors from its binding source.
      */
     public unbind(): void {
-        if (this.source === null) {
+        const oldSource = this.source;
+
+        if (oldSource === null) {
             return;
         }
 
-        const behaviors = this.behaviors;
-        const oldSource = this.source;
+        const behaviors = this.behaviors!;
 
         for (let i = 0, ii = behaviors.length; i < ii; ++i) {
             behaviors[i].unbind(oldSource);

From 709cf77f1b93006777dc87e28f9118ef9ee7d1b2 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Wed, 13 Oct 2021 11:48:44 -0400
Subject: [PATCH 006/135] chore(template): clean up imports

---
 .../fast-element/src/templating/template.ts              | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 347d0f998a5..51565f7e5d9 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -1,15 +1,10 @@
 import { DOM } from "../dom";
-import type { Behavior } from "../observation/behavior";
 import { Binding, defaultExecutionContext } from "../observation/observable";
 import { compileTemplate } from "./compiler";
+import type { HTMLTemplateCompilationResult } from "./compiler";
 import { ElementView, HTMLView, SyntheticView } from "./view";
-import {
-    HTMLDirective,
-    NodeBehaviorFactory,
-    TargetedHTMLDirective,
-} from "./html-directive";
+import { HTMLDirective, TargetedHTMLDirective } from "./html-directive";
 import { HTMLBindingDirective } from "./binding";
-import type { HTMLTemplateCompilationResult } from "..";
 
 /**
  * A template capable of creating views specifically for rendering custom elements.

From b40ba561cf25ea35408e07fcb2de6ada8dda4081 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Wed, 13 Oct 2021 11:54:51 -0400
Subject: [PATCH 007/135] chore(templating): clean up imports

---
 packages/web-components/fast-element/src/templating/binding.ts | 3 +--
 packages/web-components/fast-element/src/templating/ref.ts     | 3 +--
 packages/web-components/fast-element/src/templating/repeat.ts  | 3 +--
 packages/web-components/fast-element/src/templating/slotted.ts | 3 +--
 packages/web-components/fast-element/src/templating/view.ts    | 2 +-
 5 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index a2176d51720..62cf0458b6a 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,4 +1,3 @@
-import type { BehaviorTargets } from "..";
 import { DOM } from "../dom";
 import type { Behavior } from "../observation/behavior";
 import {
@@ -8,7 +7,7 @@ import {
     Observable,
     setCurrentEvent,
 } from "../observation/observable";
-import { TargetedHTMLDirective } from "./html-directive";
+import { BehaviorTargets, TargetedHTMLDirective } from "./html-directive";
 import type { SyntheticView } from "./view";
 
 function normalBind(
diff --git a/packages/web-components/fast-element/src/templating/ref.ts b/packages/web-components/fast-element/src/templating/ref.ts
index a3d90e9db41..4371edbbdb7 100644
--- a/packages/web-components/fast-element/src/templating/ref.ts
+++ b/packages/web-components/fast-element/src/templating/ref.ts
@@ -1,7 +1,6 @@
 import type { Behavior } from "../observation/behavior";
 import type { CaptureType } from "./template";
-import { AttachedBehaviorHTMLDirective } from "./html-directive";
-import type { BehaviorTargets } from "..";
+import { AttachedBehaviorHTMLDirective, BehaviorTargets } from "./html-directive";
 
 /**
  * The runtime behavior for template references.
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index 19a9c5d07d3..a2c2cccbdac 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -10,10 +10,9 @@ import { enableArrayObservation } from "../observation/array-observer";
 import type { Splice } from "../observation/array-change-records";
 import type { Behavior } from "../observation/behavior";
 import { emptyArray } from "../platform";
-import { HTMLDirective } from "./html-directive";
+import { BehaviorTargets, HTMLDirective } from "./html-directive";
 import { HTMLView, SyntheticView } from "./view";
 import type { CaptureType, SyntheticViewTemplate } from "./template";
-import type { BehaviorTargets } from "..";
 
 /**
  * Options for configuring repeat behavior.
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index 880e2f0cf67..7b452bd64af 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -1,5 +1,4 @@
-import type { BehaviorTargets } from "..";
-import { AttachedBehaviorHTMLDirective } from "./html-directive";
+import { AttachedBehaviorHTMLDirective, BehaviorTargets } from "./html-directive";
 import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
 import type { CaptureType } from "./template";
 
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index 4591f7d69ba..e88a8e7db39 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -1,6 +1,6 @@
-import type { BehaviorTargets, NodeBehaviorFactory } from "..";
 import type { Behavior } from "../observation/behavior";
 import type { ExecutionContext } from "../observation/observable";
+import type { BehaviorTargets, NodeBehaviorFactory } from "./html-directive";
 
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.

From c9a0365d052944b8c5f2f855d0c25022822962b3 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Wed, 13 Oct 2021 16:16:06 -0400
Subject: [PATCH 008/135] refactor(view): cleanup view internals and remove
 range

---
 .../fast-element/docs/api-report.md           |  1 -
 .../fast-element/src/components/controller.ts |  4 +-
 .../web-components/fast-element/src/dom.ts    | 10 --
 .../fast-element/src/templating/view.ts       | 92 +++++++------------
 4 files changed, 38 insertions(+), 69 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 88d13a0023e..15f12d527fc 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -215,7 +215,6 @@ export const DOM: Readonly<{
     nextUpdate(): Promise<void>;
     setAttribute(element: HTMLElement, attributeName: string, value: any): void;
     setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
-    removeChildNodes(parent: Node): void;
 }>;
 
 // @public
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index 41d1e4b3c2d..08ca4165e43 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -434,7 +434,9 @@ export class Controller extends PropertyChangeNotifier {
             (this as Mutable<this>).view = null;
         } else if (!this.needsInitialization) {
             // If there was previous custom rendering, we need to clear out the host.
-            DOM.removeChildNodes(host);
+            for (let child = host.firstChild; child !== null; child = host.firstChild) {
+                host.removeChild(child);
+            }
         }
 
         if (template) {
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index b458cdbf5b4..db2cdbcef3c 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -224,14 +224,4 @@ export const DOM = Object.freeze({
             ? element.setAttribute(attributeName, "")
             : element.removeAttribute(attributeName);
     },
-
-    /**
-     * Removes all the child nodes of the provided parent node.
-     * @param parent - The node to remove the children from.
-     */
-    removeChildNodes(parent: Node) {
-        for (let child = parent.firstChild; child !== null; child = parent.firstChild) {
-            parent.removeChild(child);
-        }
-    },
 });
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index e88a8e7db39..811d5738f55 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -82,9 +82,19 @@ export interface SyntheticView extends View {
     dispose(): void;
 }
 
-// A singleton Range instance used to efficiently remove ranges of DOM nodes.
-// See the implementation of HTMLView below for further details.
-const range = document.createRange();
+function removeNodeSequence(firstNode: Node, lastNode: Node) {
+    const parent = firstNode.parentNode!;
+    let current = firstNode;
+    let next: ChildNode | null;
+
+    while (current !== lastNode) {
+        next = current.nextSibling;
+        parent.removeChild(current);
+        current = next!;
+    }
+
+    parent.removeChild(lastNode);
+}
 
 /**
  * The standard View implementation, which also implements ElementView and SyntheticView.
@@ -182,28 +192,8 @@ export class HTMLView implements ElementView, SyntheticView {
      * Once a view has been disposed, it cannot be inserted or bound again.
      */
     public dispose(): void {
-        const parent = this.firstChild.parentNode!;
-        const end = this.lastChild!;
-        let current = this.firstChild!;
-        let next;
-
-        while (current !== end) {
-            next = current.nextSibling;
-            parent.removeChild(current);
-            current = next!;
-        }
-
-        parent.removeChild(end);
-
-        const behaviors = this.behaviors;
-
-        if (behaviors !== null) {
-            const oldSource = this.source;
-
-            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                behaviors[i].unbind(oldSource);
-            }
-        }
+        removeNodeSequence(this.firstChild, this.lastChild);
+        this.unbind();
     }
 
     /**
@@ -213,38 +203,34 @@ export class HTMLView implements ElementView, SyntheticView {
      */
     public bind(source: unknown, context: ExecutionContext): void {
         let behaviors = this.behaviors;
+        const oldSource = this.source;
 
-        if (this.source === source) {
+        if (oldSource === source) {
             return;
-        } else if (this.source !== null) {
-            const oldSource = this.source;
+        }
 
-            this.source = source;
-            this.context = context;
+        this.source = source;
+        this.context = context;
 
+        if (oldSource !== null) {
             for (let i = 0, ii = behaviors!.length; i < ii; ++i) {
                 const current = behaviors![i];
                 current.unbind(oldSource);
                 current.bind(source, context);
             }
+        } else if (behaviors === null) {
+            this.behaviors = behaviors = new Array<Behavior>(this.factories.length);
+            const targets = this.targets;
+            const factories = this.factories;
+
+            for (let i = 0, ii = factories.length; i < ii; ++i) {
+                const behavior = factories[i].createBehavior(targets);
+                behavior.bind(source, context);
+                behaviors[i] = behavior;
+            }
         } else {
-            this.source = source;
-            this.context = context;
-
-            if (behaviors === null) {
-                this.behaviors = behaviors = new Array<Behavior>(this.factories.length);
-                const targets = this.targets;
-                const factories = this.factories;
-
-                for (let i = 0, ii = factories.length; i < ii; ++i) {
-                    const behavior = factories[i].createBehavior(targets);
-                    behavior.bind(source, context);
-                    behaviors[i] = behavior;
-                }
-            } else {
-                for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                    behaviors[i].bind(source, context);
-                }
+            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                behaviors[i].bind(source, context);
             }
         }
     }
@@ -277,18 +263,10 @@ export class HTMLView implements ElementView, SyntheticView {
             return;
         }
 
-        range.setStartBefore(views[0].firstChild);
-        range.setEndAfter(views[views.length - 1].lastChild);
-        range.deleteContents();
+        removeNodeSequence(views[0].firstChild, views[views.length - 1].lastChild);
 
         for (let i = 0, ii = views.length; i < ii; ++i) {
-            const view = views[i] as any;
-            const behaviors = view.behaviors as Behavior[];
-            const oldSource = view.source;
-
-            for (let j = 0, jj = behaviors.length; j < jj; ++j) {
-                behaviors[j].unbind(oldSource);
-            }
+            views[i].unbind();
         }
     }
 }

From 38e7d5f43b0e4159b2672778427922ed2d1a422b Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Wed, 13 Oct 2021 17:10:11 -0400
Subject: [PATCH 009/135] feat(binding): enable control over className vs.
 classList behavior

---
 .../fast-element/docs/api-report.md           |  2 +
 .../fast-element/src/templating/binding.ts    | 41 +++++++++++++++----
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 15f12d527fc..21276fff559 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -103,6 +103,8 @@ export class BindingBehavior implements Behavior {
     // @internal (undocumented)
     updateTarget: typeof updatePropertyTarget;
     // @internal (undocumented)
+    value: any;
+    // @internal (undocumented)
     version: number;
 }
 
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 62cf0458b6a..054c0aee4de 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -26,7 +26,7 @@ function normalBind(
         );
     }
 
-    this.updateTarget(this.bindingObserver!.observe(source, context));
+    this.handleChange();
 }
 
 function triggerBind(
@@ -43,6 +43,7 @@ function normalUnbind(this: BindingBehavior): void {
     this.bindingObserver!.disconnect();
     this.source = null;
     this.context = null;
+    this.value = null;
 }
 
 type ComposableView = SyntheticView & {
@@ -51,9 +52,7 @@ type ComposableView = SyntheticView & {
 };
 
 function contentUnbind(this: BindingBehavior): void {
-    this.bindingObserver!.disconnect();
-    this.source = null;
-    this.context = null;
+    normalUnbind.call(this);
 
     const view = this.target.$fastView as ComposableView;
 
@@ -145,6 +144,10 @@ function updatePropertyTarget(this: BindingBehavior, value: unknown): void {
 }
 
 function updateClassTarget(this: BindingBehavior, value: string): void {
+    this.target.className = value;
+}
+
+function updateClassListTarget(this: BindingBehavior, value: string): void {
     const classVersions = this.classVersions || Object.create(null);
     const target = this.target;
     let version = this.version || 0;
@@ -222,10 +225,22 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
         switch (value[0]) {
             case ":":
                 this.cleanedTargetName = value.substr(1);
-                this.updateTarget = updatePropertyTarget;
-                if (this.cleanedTargetName === "innerHTML") {
-                    const binding = this.binding;
-                    this.binding = (s, c) => DOM.createHTML(binding(s, c));
+                switch (this.cleanedTargetName) {
+                    case "innerHTML":
+                        const binding = this.binding;
+                        /* eslint-disable-next-line */
+                        this.binding = (s, c) => DOM.createHTML(binding(s, c));
+                        this.updateTarget = updatePropertyTarget;
+                        break;
+                    case "classList":
+                        this.updateTarget = updateClassListTarget;
+                        break;
+                    case "className":
+                        this.updateTarget = updateClassTarget;
+                        break;
+                    default:
+                        this.updateTarget = updatePropertyTarget;
+                        break;
                 }
                 break;
             case "?":
@@ -282,6 +297,9 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
  * @public
  */
 export class BindingBehavior implements Behavior {
+    /** @internal */
+    public value: any = null;
+
     /** @internal */
     public source: unknown = null;
 
@@ -355,7 +373,12 @@ export class BindingBehavior implements Behavior {
 
     /** @internal */
     public handleChange(): void {
-        this.updateTarget(this.bindingObserver!.observe(this.source, this.context!));
+        const newValue = this.bindingObserver!.observe(this.source, this.context!);
+
+        if (this.value !== newValue) {
+            this.value = newValue;
+            this.updateTarget(newValue);
+        }
     }
 
     /** @internal */

From ba8e1c0ee9cafaf7c06116bc8e1598b7ce7ab20c Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Wed, 13 Oct 2021 17:20:22 -0400
Subject: [PATCH 010/135] docs: add notes on changes in FAST Element 2

---
 .../fast-element/docs/fast-element-2-changes.md          | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 packages/web-components/fast-element/docs/fast-element-2-changes.md

diff --git a/packages/web-components/fast-element/docs/fast-element-2-changes.md b/packages/web-components/fast-element/docs/fast-element-2-changes.md
new file mode 100644
index 00000000000..a4fb9e96b0c
--- /dev/null
+++ b/packages/web-components/fast-element/docs/fast-element-2-changes.md
@@ -0,0 +1,9 @@
+# Changes in FASTElement 2.0
+
+## Breaking Changes
+
+* `HTMLDirective` - The `targetIndex: number` property has been replaced by a `targetId: string` property. The `createBehavior` method no longer takes a target `Node` but instead takes a `BehaviorTargets` instance. The actual target can be looked up on the `BehaviorTargets` instance by indexing with the `targetId` property.
+* `compileTemplate()` - Internals have been significantly changed. The implementation no longer uses a TreeWalker. The return type has change to an `HTMLTemplateCompilationResult` with different properties.
+* `HTMLView` - The constructor has a new signature based on changes to the compiler's output. Internals have been cleaned up and no longer rely on the Range type.
+* `DOM` - Tree Walker methods are no longer used and are thus removed. The API for removing child nodes has been removed as well since it was only used in one place and could be inlined.
+* `class` - Bindings to `class` are now more nuanced. Binding directly to `class` will simply set the `className` property. If you need to bind to `class` knowing that manual JS will also manipulate the `classList` in addition to the binding, then you should now bind to `:classList` instead. This allows for performance optimizations in the simple, most common case.
\ No newline at end of file

From c5aed2e421f57368cba019aa607f95ea6c0debc8 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 14 Oct 2021 10:10:57 -0400
Subject: [PATCH 011/135] feat: add generic types to views and templates

---
 .../fast-element/docs/api-report.md           | 40 +++++++++----------
 .../docs/fast-element-2-changes.md            |  3 +-
 .../fast-element/src/templating/template.ts   | 40 ++++++++++---------
 .../fast-element/src/templating/view.ts       | 25 +++++++-----
 4 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 21276fff559..b053e8cb05e 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -245,14 +245,14 @@ export abstract class ElementStyles {
 }
 
 // @public
-export interface ElementView extends View {
+export interface ElementView<TSource = any, TParent = any, TGrandparent = any> extends View<TSource, TParent, TGrandparent> {
     appendTo(node: Node): void;
 }
 
 // @public
-export interface ElementViewTemplate {
-    create(hostBindingTarget: Element): ElementView;
-    render(source: any, host: Node, hostBindingTarget?: Element): HTMLView;
+export interface ElementViewTemplate<TSource = any, TParent = any, TGrandparent = any> {
+    create(hostBindingTarget: Element): ElementView<TSource, TParent, TGrandparent>;
+    render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
 }
 
 // Warning: (ae-internal-missing-underscore) The name "emptyArray" should be prefixed with an underscore because the declaration is marked as @internal
@@ -336,7 +336,7 @@ export type Global = typeof globalThis & {
 };
 
 // @public
-export function html<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]): ViewTemplate<TSource, TParent>;
+export function html<TSource = any, TParent = any, TGrandparent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]): ViewTemplate<TSource, TParent, TGrandparent>;
 
 // @public
 export class HTMLBindingDirective extends TargetedHTMLDirective {
@@ -367,18 +367,18 @@ export class HTMLTemplateCompilationResult {
     }
 
 // @public
-export class HTMLView implements ElementView, SyntheticView {
+export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implements ElementView<TSource, TParent, TGrandparent>, SyntheticView<TSource, TParent, TGrandparent> {
     constructor(fragment: DocumentFragment, factories: NodeBehaviorFactory[], targets: BehaviorTargets);
     appendTo(node: Node): void;
-    bind(source: unknown, context: ExecutionContext): void;
-    context: ExecutionContext | null;
+    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
+    context: ExecutionContext<TParent, TGrandparent> | null;
     dispose(): void;
     static disposeContiguousBatch(views: SyntheticView[]): void;
     firstChild: Node;
     insertBefore(node: Node): void;
     lastChild: Node;
     remove(): void;
-    source: any | null;
+    source: TSource | null;
     unbind(): void;
 }
 
@@ -556,7 +556,7 @@ export interface SubtreeBehaviorOptions<T = any> extends Omit<NodeBehaviorOption
 }
 
 // @public
-export interface SyntheticView extends View {
+export interface SyntheticView<TSource = any, TParent = any, TGrandparent = any> extends View<TSource, TParent, TGrandparent> {
     dispose(): void;
     readonly firstChild: Node;
     insertBefore(node: Node): void;
@@ -565,8 +565,8 @@ export interface SyntheticView extends View {
 }
 
 // @public
-export interface SyntheticViewTemplate<TSource = any, TParent = any> {
-    create(): SyntheticView;
+export interface SyntheticViewTemplate<TSource = any, TParent = any, TGrandparent = any> {
+    create(): SyntheticView<TSource, TParent, TGrandparent>;
 }
 
 // @public
@@ -576,7 +576,7 @@ export abstract class TargetedHTMLDirective extends HTMLDirective {
 }
 
 // @public
-export type TemplateValue<TScope, TParent = any> = Binding<TScope, any, TParent> | string | number | HTMLDirective | CaptureType<TScope>;
+export type TemplateValue<TSource, TParent = any> = Binding<TSource, any, TParent> | string | number | HTMLDirective | CaptureType<TSource>;
 
 // @public
 export type TrustedTypes = {
@@ -595,21 +595,21 @@ export interface ValueConverter {
 }
 
 // @public
-export interface View {
-    bind(source: unknown, context: ExecutionContext): void;
-    readonly context: ExecutionContext | null;
+export interface View<TSource = any, TParent = any, TGrandparent = any> {
+    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
+    readonly context: ExecutionContext<TParent, TGrandparent> | null;
     dispose(): void;
-    readonly source: any | null;
+    readonly source: TSource | null;
     unbind(): void;
 }
 
 // @public
-export class ViewTemplate<TSource = any, TParent = any> implements ElementViewTemplate, SyntheticViewTemplate {
+export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any> implements ElementViewTemplate<TSource, TParent, TGrandparent>, SyntheticViewTemplate<TSource, TParent, TGrandparent> {
     constructor(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>);
-    create(hostBindingTarget?: Element): HTMLView;
+    create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
     readonly directives: ReadonlyArray<HTMLDirective>;
     readonly html: string | HTMLTemplateElement;
-    render(source: TSource, host: Node | string, hostBindingTarget?: Element): HTMLView;
+    render(source: TSource, host: Node | string, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
     }
 
 // @public
diff --git a/packages/web-components/fast-element/docs/fast-element-2-changes.md b/packages/web-components/fast-element/docs/fast-element-2-changes.md
index a4fb9e96b0c..0c69a7bcc72 100644
--- a/packages/web-components/fast-element/docs/fast-element-2-changes.md
+++ b/packages/web-components/fast-element/docs/fast-element-2-changes.md
@@ -4,6 +4,7 @@
 
 * `HTMLDirective` - The `targetIndex: number` property has been replaced by a `targetId: string` property. The `createBehavior` method no longer takes a target `Node` but instead takes a `BehaviorTargets` instance. The actual target can be looked up on the `BehaviorTargets` instance by indexing with the `targetId` property.
 * `compileTemplate()` - Internals have been significantly changed. The implementation no longer uses a TreeWalker. The return type has change to an `HTMLTemplateCompilationResult` with different properties.
-* `HTMLView` - The constructor has a new signature based on changes to the compiler's output. Internals have been cleaned up and no longer rely on the Range type.
+* `View` and `HTMLView` - Type parameters added to enable strongly typed views based on their data source. The constructor of `HTMLView` has a new signature based on changes to the compiler's output. Internals have been cleaned up and no longer rely on the Range type.
+* `ElementViewTemplate`, `SyntheticViewTemplate`, and `ViewTemplate` - Added type parameters throughout. Logic to instantiate and apply behaviors moved out of the template and into the view where it can be lazily executed.
 * `DOM` - Tree Walker methods are no longer used and are thus removed. The API for removing child nodes has been removed as well since it was only used in one place and could be inlined.
 * `class` - Bindings to `class` are now more nuanced. Binding directly to `class` will simply set the `className` property. If you need to bind to `class` knowing that manual JS will also manipulate the `classList` in addition to the binding, then you should now bind to `:classList` instead. This allows for performance optimizations in the simple, most common case.
\ No newline at end of file
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 51565f7e5d9..9a44ea872ba 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -10,12 +10,12 @@ import { HTMLBindingDirective } from "./binding";
  * A template capable of creating views specifically for rendering custom elements.
  * @public
  */
-export interface ElementViewTemplate {
+export interface ElementViewTemplate<TSource = any, TParent = any, TGrandparent = any> {
     /**
      * Creates an ElementView instance based on this template definition.
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
-    create(hostBindingTarget: Element): ElementView;
+    create(hostBindingTarget: Element): ElementView<TSource, TParent, TGrandparent>;
 
     /**
      * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
@@ -24,28 +24,32 @@ export interface ElementViewTemplate {
      * @param hostBindingTarget - An HTML element to target the host bindings at if different from the
      * host that the template is being attached to.
      */
-    render(source: any, host: Node, hostBindingTarget?: Element): HTMLView;
+    render(
+        source: TSource,
+        host: Node,
+        hostBindingTarget?: Element
+    ): HTMLView<TSource, TParent, TGrandparent>;
 }
 
 /**
  * A template capable of rendering views not specifically connected to custom elements.
  * @public
  */
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-export interface SyntheticViewTemplate<TSource = any, TParent = any> {
+export interface SyntheticViewTemplate<TSource = any, TParent = any, TGrandparent = any> {
     /**
      * Creates a SyntheticView instance based on this template definition.
      */
-    create(): SyntheticView;
+    create(): SyntheticView<TSource, TParent, TGrandparent>;
 }
 
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
  */
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-export class ViewTemplate<TSource = any, TParent = any>
-    implements ElementViewTemplate, SyntheticViewTemplate {
+export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any>
+    implements
+        ElementViewTemplate<TSource, TParent, TGrandparent>,
+        SyntheticViewTemplate<TSource, TParent, TGrandparent> {
     private result: HTMLTemplateCompilationResult | null = null;
 
     /**
@@ -76,7 +80,7 @@ export class ViewTemplate<TSource = any, TParent = any>
      * Creates an HTMLView instance based on this template definition.
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
-    public create(hostBindingTarget?: Element): HTMLView {
+    public create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent> {
         if (this.result === null) {
             let template: HTMLTemplateElement;
             const html = this.html;
@@ -100,7 +104,7 @@ export class ViewTemplate<TSource = any, TParent = any>
         const result = this.result;
         const fragment = result.fragment.cloneNode(true) as DocumentFragment;
 
-        return new HTMLView(
+        return new HTMLView<TSource, TParent, TGrandparent>(
             fragment,
             result.factories,
             result.createTargets(fragment, hostBindingTarget)
@@ -118,7 +122,7 @@ export class ViewTemplate<TSource = any, TParent = any>
         source: TSource,
         host: Node | string,
         hostBindingTarget?: Element
-    ): HTMLView {
+    ): HTMLView<TSource, TParent, TGrandparent> {
         if (typeof host === "string") {
             host = document.getElementById(host)!;
         }
@@ -152,12 +156,12 @@ export interface CaptureType<TSource> {}
  * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export type TemplateValue<TScope, TParent = any> =
-    | Binding<TScope, any, TParent>
+export type TemplateValue<TSource, TParent = any> =
+    | Binding<TSource, any, TParent>
     | string
     | number
     | HTMLDirective
-    | CaptureType<TScope>;
+    | CaptureType<TSource>;
 
 /**
  * Transforms a template literal string into a renderable ViewTemplate.
@@ -168,10 +172,10 @@ export type TemplateValue<TScope, TParent = any> =
  * other template instances, and Directive instances.
  * @public
  */
-export function html<TSource = any, TParent = any>(
+export function html<TSource = any, TParent = any, TGrandparent = any>(
     strings: TemplateStringsArray,
     ...values: TemplateValue<TSource, TParent>[]
-): ViewTemplate<TSource, TParent> {
+): ViewTemplate<TSource, TParent, TGrandparent> {
     const directives: HTMLDirective[] = [];
     let html = "";
 
@@ -210,5 +214,5 @@ export function html<TSource = any, TParent = any>(
 
     html += strings[strings.length - 1];
 
-    return new ViewTemplate(html, directives);
+    return new ViewTemplate<TSource, TParent, TGrandparent>(html, directives);
 }
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index 811d5738f55..09d02257cb6 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -6,23 +6,23 @@ import type { BehaviorTargets, NodeBehaviorFactory } from "./html-directive";
  * Represents a collection of DOM nodes which can be bound to a data source.
  * @public
  */
-export interface View {
+export interface View<TSource = any, TParent = any, TGrandparent = any> {
     /**
      * The execution context the view is running within.
      */
-    readonly context: ExecutionContext | null;
+    readonly context: ExecutionContext<TParent, TGrandparent> | null;
 
     /**
      * The data that the view is bound to.
      */
-    readonly source: any | null;
+    readonly source: TSource | null;
 
     /**
      * Binds a view's behaviors to its binding source.
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the view within.
      */
-    bind(source: unknown, context: ExecutionContext): void;
+    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
 
     /**
      * Unbinds a view's behaviors from its binding source and context.
@@ -40,7 +40,8 @@ export interface View {
  * A View representing DOM nodes specifically for rendering the view of a custom element.
  * @public
  */
-export interface ElementView extends View {
+export interface ElementView<TSource = any, TParent = any, TGrandparent = any>
+    extends View<TSource, TParent, TGrandparent> {
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -52,7 +53,8 @@ export interface ElementView extends View {
  * A view representing a range of DOM nodes which can be added/removed ad hoc.
  * @public
  */
-export interface SyntheticView extends View {
+export interface SyntheticView<TSource = any, TParent = any, TGrandparent = any>
+    extends View<TSource, TParent, TGrandparent> {
     /**
      * The first DOM node in the range of nodes that make up the view.
      */
@@ -100,18 +102,21 @@ function removeNodeSequence(firstNode: Node, lastNode: Node) {
  * The standard View implementation, which also implements ElementView and SyntheticView.
  * @public
  */
-export class HTMLView implements ElementView, SyntheticView {
+export class HTMLView<TSource = any, TParent = any, TGrandparent = any>
+    implements
+        ElementView<TSource, TParent, TGrandparent>,
+        SyntheticView<TSource, TParent, TGrandparent> {
     private behaviors: Behavior[] | null = null;
 
     /**
      * The data that the view is bound to.
      */
-    public source: any | null = null;
+    public source: TSource | null = null;
 
     /**
      * The execution context the view is running within.
      */
-    public context: ExecutionContext | null = null;
+    public context: ExecutionContext<TParent, TGrandparent> | null = null;
 
     /**
      * The first DOM node in the range of nodes that make up the view.
@@ -201,7 +206,7 @@ export class HTMLView implements ElementView, SyntheticView {
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the behaviors within.
      */
-    public bind(source: unknown, context: ExecutionContext): void {
+    public bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void {
         let behaviors = this.behaviors;
         const oldSource = this.source;
 

From 36622336aad1ab449e60c027f32cca3b698eaeaa Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 14 Oct 2021 11:09:19 -0400
Subject: [PATCH 012/135] refactor: internal cleanup and fixing router to match
 new APIs.

---
 .../fast-element/docs/api-report.md           |  51 ++-----
 .../web-components/fast-element/src/dom.ts    | 144 ++++++++----------
 .../fast-router/src/commands.ts               |   9 +-
 .../fast-router/src/contributors.ts           |   9 +-
 4 files changed, 89 insertions(+), 124 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index b053e8cb05e..f30a13a791f 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -111,7 +111,7 @@ export class BindingBehavior implements Behavior {
 // @public
 export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier {
     disconnect(): void;
-    observe(source: TSource, context: ExecutionContext<TParent>): TReturn;
+    observe(source: TSource, context: ExecutionContext): TReturn;
     records(): IterableIterator<ObservationRecord>;
 }
 
@@ -212,9 +212,9 @@ export const DOM: Readonly<{
     createInterpolationPlaceholder(index: number): string;
     createCustomAttributePlaceholder(attributeName: string, index: number): string;
     createBlockPlaceholder(index: number): string;
-    queueUpdate: (callable: Callable) => void;
-    processUpdates: () => void;
+    queueUpdate(callable: Callable): void;
     nextUpdate(): Promise<void>;
+    processUpdates(): void;
     setAttribute(element: HTMLElement, attributeName: string, value: any): void;
     setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
 }>;
@@ -275,15 +275,8 @@ export class ExecutionContext<TParent = any, TGrandparent = any> {
     length: number;
     parent: TParent;
     parentContext: ExecutionContext<TGrandparent>;
-    // @internal
-    static setEvent(event: Event | null): void;
 }
 
-// Warning: (ae-internal-missing-underscore) The name "FAST" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export const FAST: FASTGlobal;
-
 // @public
 export interface FASTElement {
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -309,8 +302,8 @@ export class FASTElementDefinition<TType extends Function = Function> {
     readonly attributes: ReadonlyArray<AttributeDefinition>;
     define(registry?: CustomElementRegistry): this;
     readonly elementOptions?: ElementDefinitionOptions;
-    static readonly forType: <TType_1 extends Function>(key: TType_1) => FASTElementDefinition<Function> | undefined;
-    get isDefined(): boolean;
+    static forType<TType extends Function>(type: TType): FASTElementDefinition | undefined;
+    readonly isDefined: boolean;
     readonly name: string;
     readonly propertyLookup: Record<string, AttributeDefinition>;
     readonly shadowOptions?: ShadowRootInit;
@@ -319,20 +312,9 @@ export class FASTElementDefinition<TType extends Function = Function> {
     readonly type: TType;
 }
 
-// Warning: (ae-internal-missing-underscore) The name "FASTGlobal" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export interface FASTGlobal {
-    getById<T>(id: string | number): T | null;
-    // (undocumented)
-    getById<T>(id: string | number, initialize: () => T): T;
-    readonly versions: string[];
-}
-
 // @public
 export type Global = typeof globalThis & {
     trustedTypes: TrustedTypes;
-    readonly FAST: FASTGlobal;
 };
 
 // @public
@@ -382,20 +364,6 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implemen
     unbind(): void;
 }
 
-// Warning: (ae-internal-missing-underscore) The name "KernelServiceId" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export const enum KernelServiceId {
-    // (undocumented)
-    contextEvent = 3,
-    // (undocumented)
-    elementRegistry = 4,
-    // (undocumented)
-    observable = 2,
-    // (undocumented)
-    updateQueue = 1
-}
-
 // Warning: (ae-internal-missing-underscore) The name "Mutable" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
@@ -429,12 +397,12 @@ export const nullableNumberConverter: ValueConverter;
 // @public
 export const Observable: Readonly<{
     setArrayObserverFactory(factory: (collection: any[]) => Notifier): void;
-    getNotifier: (source: any) => Notifier;
+    getNotifier(source: any): Notifier;
     track(source: unknown, propertyName: string): void;
     trackVolatile(): void;
     notify(source: unknown, args: any): void;
     defineProperty(target: {}, nameOrAccessor: string | Accessor): void;
-    getAccessors: (target: {}) => Accessor[];
+    getAccessors(target: {}): Accessor[];
     binding<TSource = any, TReturn = any, TParent = any>(binding: Binding<TSource, TReturn, TParent>, initialSubscriber?: Subscriber | undefined, isVolatileBinding?: boolean): BindingObserver<TSource, TReturn, TParent>;
     isVolatileBinding<TSource_1 = any, TReturn_1 = any, TParent_1 = any>(binding: Binding<TSource_1, TReturn_1, TParent_1>): boolean;
 }>;
@@ -502,6 +470,11 @@ export interface RepeatOptions {
     recycle?: boolean;
 }
 
+// Warning: (ae-internal-missing-underscore) The name "setCurrentEvent" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export function setCurrentEvent(event: Event | null): void;
+
 // @public
 export function slotted<T = any>(propertyOrOptions: (keyof T & string) | SlottedBehaviorOptions<keyof T & string>): CaptureType<T>;
 
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index db2cdbcef3c..9f583f95aec 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -1,70 +1,5 @@
-import type { Callable } from "./interfaces.js";
-import { $global, KernelServiceId, TrustedTypesPolicy } from "./platform.js";
-
-const updateQueue = $global.FAST.getById(KernelServiceId.updateQueue, () => {
-    const tasks = [] as Callable[];
-    const pendingErrors: any[] = [];
-
-    function throwFirstError(): void {
-        if (pendingErrors.length) {
-            throw pendingErrors.shift();
-        }
-    }
-
-    function tryRunTask(task: Callable): void {
-        try {
-            (task as any).call();
-        } catch (error) {
-            pendingErrors.push(error);
-            setTimeout(throwFirstError, 0);
-        }
-    }
-
-    function process(): void {
-        const capacity = 1024;
-        let index = 0;
-
-        while (index < tasks.length) {
-            tryRunTask(tasks[index]);
-            index++;
-
-            // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
-            // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
-            // grow, but to avoid an O(n) walk for every task we execute, we don't
-            // shift tasks off the queue after they have been executed.
-            // Instead, we periodically shift 1024 tasks off the queue.
-            if (index > capacity) {
-                // Manually shift all values starting at the index back to the
-                // beginning of the queue.
-                for (
-                    let scan = 0, newLength = tasks.length - index;
-                    scan < newLength;
-                    scan++
-                ) {
-                    tasks[scan] = tasks[scan + index];
-                }
-
-                tasks.length -= index;
-                index = 0;
-            }
-        }
-
-        tasks.length = 0;
-    }
-
-    function enqueue(callable: Callable): void {
-        if (tasks.length < 1) {
-            $global.requestAnimationFrame(process);
-        }
-
-        tasks.push(callable);
-    }
-
-    return Object.freeze({
-        enqueue,
-        process,
-    });
-});
+import type { Callable } from "./interfaces";
+import { $global, TrustedTypesPolicy } from "./platform";
 
 /* eslint-disable */
 const fastHTMLPolicy: TrustedTypesPolicy = $global.trustedTypes.createPolicy(
@@ -76,6 +11,23 @@ const fastHTMLPolicy: TrustedTypesPolicy = $global.trustedTypes.createPolicy(
 /* eslint-enable */
 
 let htmlPolicy: TrustedTypesPolicy = fastHTMLPolicy;
+const updateQueue: Callable[] = [];
+const pendingErrors: any[] = [];
+
+function throwFirstError(): void {
+    if (pendingErrors.length) {
+        throw pendingErrors.shift();
+    }
+}
+
+function tryRunTask(task: Callable): void {
+    try {
+        (task as any).call();
+    } catch (error) {
+        pendingErrors.push(error);
+        setTimeout(throwFirstError, 0);
+    }
+}
 
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 
@@ -176,7 +128,20 @@ export const DOM = Object.freeze({
      * Schedules DOM update work in the next async batch.
      * @param callable - The callable function or object to queue.
      */
-    queueUpdate: updateQueue.enqueue,
+    queueUpdate(callable: Callable) {
+        if (updateQueue.length < 1) {
+            $global.requestAnimationFrame(DOM.processUpdates);
+        }
+
+        updateQueue.push(callable);
+    },
+
+    /**
+     * Resolves with the next DOM update.
+     */
+    nextUpdate(): Promise<void> {
+        return new Promise(DOM.queueUpdate);
+    },
 
     /**
      * Immediately processes all work previously scheduled
@@ -185,13 +150,36 @@ export const DOM = Object.freeze({
      * This also forces nextUpdate promises
      * to resolve.
      */
-    processUpdates: updateQueue.process,
+    processUpdates(): void {
+        const capacity = 1024;
+        let index = 0;
 
-    /**
-     * Resolves with the next DOM update.
-     */
-    nextUpdate(): Promise<void> {
-        return new Promise(updateQueue.enqueue);
+        while (index < updateQueue.length) {
+            tryRunTask(updateQueue[index]);
+            index++;
+
+            // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
+            // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
+            // grow, but to avoid an O(n) walk for every task we execute, we don't
+            // shift tasks off the queue after they have been executed.
+            // Instead, we periodically shift 1024 tasks off the queue.
+            if (index > capacity) {
+                // Manually shift all values starting at the index back to the
+                // beginning of the queue.
+                for (
+                    let scan = 0, newLength = updateQueue.length - index;
+                    scan < newLength;
+                    scan++
+                ) {
+                    updateQueue[scan] = updateQueue[scan + index];
+                }
+
+                updateQueue.length -= index;
+                index = 0;
+            }
+        }
+
+        updateQueue.length = 0;
     },
 
     /**
@@ -204,11 +192,9 @@ export const DOM = Object.freeze({
      * it is set to the provided value using the standard `setAttribute` API.
      */
     setAttribute(element: HTMLElement, attributeName: string, value: any) {
-        if (value === null || value === undefined) {
-            element.removeAttribute(attributeName);
-        } else {
-            element.setAttribute(attributeName, value);
-        }
+        value === null || value === undefined
+            ? element.removeAttribute(attributeName)
+            : element.setAttribute(attributeName, value);
     },
 
     /**
diff --git a/packages/web-components/fast-router/src/commands.ts b/packages/web-components/fast-router/src/commands.ts
index f80e7495235..5add86956d1 100644
--- a/packages/web-components/fast-router/src/commands.ts
+++ b/packages/web-components/fast-router/src/commands.ts
@@ -90,9 +90,12 @@ function factoryFromElementInstance(element: HTMLElement): ViewFactory {
     const fragment = document.createDocumentFragment();
     fragment.appendChild(element);
 
-    const view = new HTMLView(fragment, [
-        navigationContributor().createBehavior(element),
-    ]);
+    const factory = navigationContributor();
+    factory.targetId = "h";
+
+    const view = new HTMLView(fragment, [factory], {
+        [factory.targetId]: element,
+    });
 
     return {
         create() {
diff --git a/packages/web-components/fast-router/src/contributors.ts b/packages/web-components/fast-router/src/contributors.ts
index 9a1db47381e..9d5c77b695d 100644
--- a/packages/web-components/fast-router/src/contributors.ts
+++ b/packages/web-components/fast-router/src/contributors.ts
@@ -1,4 +1,4 @@
-import { Behavior, DOM, HTMLDirective } from "@microsoft/fast-element";
+import { Behavior, HTMLDirective, DOM, BehaviorTargets } from "@microsoft/fast-element";
 import {
     NavigationCommitPhaseHook,
     NavigationPhaseHook,
@@ -48,8 +48,11 @@ class NavigationContributorDirective extends HTMLDirective {
         return DOM.createCustomAttributePlaceholder("fast-navigation-contributor", index);
     }
 
-    createBehavior(target: HTMLElement) {
-        return new NavigationContributorBehavior(target, this.options);
+    createBehavior(targets: BehaviorTargets) {
+        return new NavigationContributorBehavior(
+            targets[this.targetId] as HTMLElement & NavigationContributor,
+            this.options
+        );
     }
 }
 

From 56a14ee13219dd8b4aab00b44d46d60ffd8bbeba Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 14 Oct 2021 12:40:48 -0400
Subject: [PATCH 013/135] feat: improve types related to behaviors

---
 .../fast-element/docs/api-report.md           | 18 +++++-----
 .../fast-element/src/components/controller.ts | 10 +++---
 .../src/components/fast-element.ts            |  4 +--
 .../fast-element/src/observation/behavior.ts  |  6 ++--
 .../fast-element/src/styles/css-directive.ts  |  2 +-
 .../fast-element/src/styles/css.ts            | 10 +++---
 .../fast-element/src/styles/element-styles.ts | 34 +++++++++++--------
 .../fast-element/src/styles/styles.spec.ts    |  7 ++--
 8 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index f30a13a791f..3e1374ddbaf 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -58,9 +58,9 @@ export class AttributeDefinition implements Accessor {
 export type AttributeMode = "reflect" | "boolean" | "fromView";
 
 // @public
-export interface Behavior {
-    bind(source: unknown, context: ExecutionContext): void;
-    unbind(source: unknown): void;
+export interface Behavior<TSource = any, TParent = any, TGrandparent = any> {
+    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
+    unbind(source: TSource): void;
 }
 
 // @public
@@ -162,7 +162,7 @@ export type Constructable<T = {}> = {
 export class Controller extends PropertyChangeNotifier {
     // @internal
     constructor(element: HTMLElement, definition: FASTElementDefinition);
-    addBehaviors(behaviors: ReadonlyArray<Behavior>): void;
+    addBehaviors(behaviors: ReadonlyArray<Behavior<HTMLElement>>): void;
     addStyles(styles: ElementStyles | HTMLStyleElement): void;
     readonly definition: FASTElementDefinition;
     readonly element: HTMLElement;
@@ -172,7 +172,7 @@ export class Controller extends PropertyChangeNotifier {
     onAttributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     onConnectedCallback(): void;
     onDisconnectedCallback(): void;
-    removeBehaviors(behaviors: ReadonlyArray<Behavior>, force?: boolean): void;
+    removeBehaviors(behaviors: ReadonlyArray<Behavior<HTMLElement>>, force?: boolean): void;
     removeStyles(styles: ElementStyles | HTMLStyleElement): void;
     get styles(): ElementStyles | null;
     set styles(value: ElementStyles | null);
@@ -186,7 +186,7 @@ export function css(strings: TemplateStringsArray, ...values: (ComposableStyles
 
 // @public
 export class CSSDirective {
-    createBehavior(): Behavior | undefined;
+    createBehavior(): Behavior<HTMLElement> | undefined;
     createCSS(): ComposableStyles;
 }
 
@@ -233,7 +233,7 @@ export abstract class ElementStyles {
     // @internal (undocumented)
     addStylesTo(target: StyleTarget): void;
     // @internal (undocumented)
-    abstract readonly behaviors: ReadonlyArray<Behavior> | null;
+    abstract readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
     static readonly create: ElementStyleFactory;
     // @internal (undocumented)
     isAttachedTo(target: StyleTarget): boolean;
@@ -241,7 +241,7 @@ export abstract class ElementStyles {
     removeStylesFrom(target: StyleTarget): void;
     // @internal (undocumented)
     abstract readonly styles: ReadonlyArray<ComposableStyles>;
-    withBehaviors(...behaviors: Behavior[]): this;
+    withBehaviors(...behaviors: Behavior<HTMLElement>[]): this;
 }
 
 // @public
@@ -278,7 +278,7 @@ export class ExecutionContext<TParent = any, TGrandparent = any> {
 }
 
 // @public
-export interface FASTElement {
+export interface FASTElement extends HTMLElement {
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
     readonly $fastController: Controller;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index 08ca4165e43..357319d15f7 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -25,7 +25,7 @@ function getShadowRoot(element: HTMLElement): ShadowRoot | null {
  */
 export class Controller extends PropertyChangeNotifier {
     private boundObservables: Record<string, any> | null = null;
-    private behaviors: Map<Behavior, number> | null = null;
+    private behaviors: Map<Behavior<HTMLElement>, number> | null = null;
     private needsInitialization: boolean = true;
     private _template: ElementViewTemplate | null = null;
     private _styles: ElementStyles | null = null;
@@ -209,10 +209,10 @@ export class Controller extends PropertyChangeNotifier {
      * Adds behaviors to this element.
      * @param behaviors - The behaviors to add.
      */
-    public addBehaviors(behaviors: ReadonlyArray<Behavior>): void {
+    public addBehaviors(behaviors: ReadonlyArray<Behavior<HTMLElement>>): void {
         const targetBehaviors = this.behaviors || (this.behaviors = new Map());
         const length = behaviors.length;
-        const behaviorsToBind: Behavior[] = [];
+        const behaviorsToBind: Behavior<HTMLElement>[] = [];
 
         for (let i = 0; i < length; ++i) {
             const behavior = behaviors[i];
@@ -240,7 +240,7 @@ export class Controller extends PropertyChangeNotifier {
      * @param force - Forces unbinding of behaviors.
      */
     public removeBehaviors(
-        behaviors: ReadonlyArray<Behavior>,
+        behaviors: ReadonlyArray<Behavior<HTMLElement>>,
         force: boolean = false
     ): void {
         const targetBehaviors = this.behaviors;
@@ -250,7 +250,7 @@ export class Controller extends PropertyChangeNotifier {
         }
 
         const length = behaviors.length;
-        const behaviorsToUnbind: Behavior[] = [];
+        const behaviorsToUnbind: Behavior<HTMLElement>[] = [];
 
         for (let i = 0; i < length; ++i) {
             const behavior = behaviors[i];
diff --git a/packages/web-components/fast-element/src/components/fast-element.ts b/packages/web-components/fast-element/src/components/fast-element.ts
index 14ccf6ab538..71946541456 100644
--- a/packages/web-components/fast-element/src/components/fast-element.ts
+++ b/packages/web-components/fast-element/src/components/fast-element.ts
@@ -8,7 +8,7 @@ import {
  * Represents a custom element based on the FASTElement infrastructure.
  * @public
  */
-export interface FASTElement {
+export interface FASTElement extends HTMLElement {
     /**
      * The underlying controller that handles the lifecycle and rendering of
      * this FASTElement.
@@ -61,7 +61,7 @@ export interface FASTElement {
 function createFASTElement<T extends typeof HTMLElement>(
     BaseType: T
 ): { new (): InstanceType<T> & FASTElement } {
-    return class extends (BaseType as any) implements FASTElement {
+    return class extends (BaseType as any) {
         public readonly $fastController!: Controller;
 
         public constructor() {
diff --git a/packages/web-components/fast-element/src/observation/behavior.ts b/packages/web-components/fast-element/src/observation/behavior.ts
index 7ebbf0078bb..7cac2d93dd5 100644
--- a/packages/web-components/fast-element/src/observation/behavior.ts
+++ b/packages/web-components/fast-element/src/observation/behavior.ts
@@ -5,17 +5,17 @@ import type { ExecutionContext } from "./observable.js";
  * element's bind/unbind operations.
  * @public
  */
-export interface Behavior {
+export interface Behavior<TSource = any, TParent = any, TGrandparent = any> {
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
      * @param context - The execution context that the binding is operating within.
      */
-    bind(source: unknown, context: ExecutionContext): void;
+    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
 
     /**
      * Unbinds this behavior from the source.
      * @param source - The source to unbind from.
      */
-    unbind(source: unknown): void;
+    unbind(source: TSource): void;
 }
diff --git a/packages/web-components/fast-element/src/styles/css-directive.ts b/packages/web-components/fast-element/src/styles/css-directive.ts
index d498865aca4..0e51a85c995 100644
--- a/packages/web-components/fast-element/src/styles/css-directive.ts
+++ b/packages/web-components/fast-element/src/styles/css-directive.ts
@@ -19,7 +19,7 @@ export class CSSDirective {
      * Creates a behavior to bind to the host element.
      * @returns - the behavior to bind to the host element, or undefined.
      */
-    public createBehavior(): Behavior | undefined {
+    public createBehavior(): Behavior<HTMLElement> | undefined {
         return undefined;
     }
 }
diff --git a/packages/web-components/fast-element/src/styles/css.ts b/packages/web-components/fast-element/src/styles/css.ts
index f1ba966b79e..e97968abf3f 100644
--- a/packages/web-components/fast-element/src/styles/css.ts
+++ b/packages/web-components/fast-element/src/styles/css.ts
@@ -6,10 +6,10 @@ import { ComposableStyles, ElementStyles } from "./element-styles.js";
 function collectStyles(
     strings: TemplateStringsArray,
     values: (ComposableStyles | CSSDirective)[]
-): { styles: ComposableStyles[]; behaviors: Behavior[] } {
+): { styles: ComposableStyles[]; behaviors: Behavior<HTMLElement>[] } {
     const styles: ComposableStyles[] = [];
     let cssString = "";
-    const behaviors: Behavior[] = [];
+    const behaviors: Behavior<HTMLElement>[] = [];
 
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         cssString += strings[i];
@@ -71,10 +71,10 @@ export function css(
     return elementStyles;
 }
 
-class CSSPartial extends CSSDirective implements Behavior {
+class CSSPartial extends CSSDirective implements Behavior<HTMLElement> {
     private css: string = "";
     private styles?: ElementStyles;
-    constructor(styles: ComposableStyles[], private behaviors: Behavior[]) {
+    constructor(styles: ComposableStyles[], private behaviors: Behavior<HTMLElement>[]) {
         super();
 
         const stylesheets: ReadonlyArray<Exclude<
@@ -100,7 +100,7 @@ class CSSPartial extends CSSDirective implements Behavior {
         }
     }
 
-    createBehavior(): Behavior {
+    createBehavior(): Behavior<HTMLElement> {
         return this;
     }
 
diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index cfe9b6cd4d5..58e578162de 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -62,7 +62,7 @@ export abstract class ElementStyles {
     public abstract readonly styles: ReadonlyArray<ComposableStyles>;
 
     /** @internal */
-    public abstract readonly behaviors: ReadonlyArray<Behavior> | null;
+    public abstract readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
 
     /** @internal */
     public addStylesTo(target: StyleTarget): void {
@@ -83,7 +83,7 @@ export abstract class ElementStyles {
      * Associates behaviors with this set of styles.
      * @param behaviors - The behaviors to associate.
      */
-    public withBehaviors(...behaviors: Behavior[]): this {
+    public withBehaviors(...behaviors: Behavior<HTMLElement>[]): this {
         (this.behaviors as any) =
             this.behaviors === null ? behaviors : this.behaviors.concat(behaviors);
 
@@ -118,20 +118,26 @@ function reduceStyles(
 
 function reduceBehaviors(
     styles: ReadonlyArray<ComposableStyles>
-): ReadonlyArray<Behavior> | null {
+): ReadonlyArray<Behavior<HTMLElement>> | null {
     return styles
         .map((x: ComposableStyles) => (x instanceof ElementStyles ? x.behaviors : null))
-        .reduce((prev: Behavior[] | null, curr: Behavior[] | null) => {
-            if (curr === null) {
-                return prev;
-            }
+        .reduce(
+            (
+                prev: Behavior<HTMLElement>[] | null,
+                curr: Behavior<HTMLElement>[] | null
+            ) => {
+                if (curr === null) {
+                    return prev;
+                }
 
-            if (prev === null) {
-                prev = [];
-            }
+                if (prev === null) {
+                    prev = [];
+                }
 
-            return prev.concat(curr);
-        }, null as Behavior[] | null);
+                return prev.concat(curr);
+            },
+            null as Behavior<HTMLElement>[] | null
+        );
 }
 
 /**
@@ -167,7 +173,7 @@ export class AdoptedStyleSheetsStyles extends ElementStyles {
         return this._styleSheets;
     }
 
-    public readonly behaviors: ReadonlyArray<Behavior> | null;
+    public readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
 
     public constructor(
         public styles: ComposableStyles[],
@@ -203,7 +209,7 @@ function getNextStyleClass(): string {
 export class StyleElementStyles extends ElementStyles {
     private readonly styleSheets: string[];
     private readonly styleClass: string;
-    public readonly behaviors: ReadonlyArray<Behavior> | null = null;
+    public readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null = null;
 
     public constructor(public styles: ComposableStyles[]) {
         super();
diff --git a/packages/web-components/fast-element/src/styles/styles.spec.ts b/packages/web-components/fast-element/src/styles/styles.spec.ts
index cd6612d4682..9814ddb0037 100644
--- a/packages/web-components/fast-element/src/styles/styles.spec.ts
+++ b/packages/web-components/fast-element/src/styles/styles.spec.ts
@@ -10,6 +10,7 @@ import { CSSDirective } from "./css-directive";
 import { css, cssPartial } from "./css";
 import type { Behavior } from "../observation/behavior";
 import { defaultExecutionContext } from "../observation/observable";
+import type { FASTElement } from "..";
 
 if (DOM.supportsAdoptedStyleSheets) {
     describe("AdoptedStyleSheetsStyles", () => {
@@ -331,12 +332,12 @@ describe("cssPartial", () => {
         const partial = cssPartial`${new directive}${new directive2}`;
         const el = {
             $fastController: {
-                addBehaviors(behaviors: Behavior[]) {
+                addBehaviors(behaviors: Behavior<HTMLElement>[]) {
                     expect(behaviors[0]).to.equal(behavior);
                     expect(behaviors[1]).to.equal(behavior2);
                 }
             }
-        }
+        } as FASTElement;
 
         partial.createBehavior()?.bind(el, defaultExecutionContext)
     });
@@ -352,7 +353,7 @@ describe("cssPartial", () => {
                     called = true;
                 }
             }
-        }
+        } as FASTElement;
 
         partial.createBehavior()?.bind(el, defaultExecutionContext)
 

From 104a663418057f08dade37ef36bc30e1582dada4 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 14 Oct 2021 12:57:47 -0400
Subject: [PATCH 014/135] refactor: clean up styles code a bit

---
 .../fast-element/docs/api-report.md           |  7 ++++--
 .../fast-element/src/styles/element-styles.ts | 24 ++++++++-----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 3e1374ddbaf..234d1e888cf 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -230,17 +230,20 @@ export type ElementStyleFactory = (styles: ReadonlyArray<ComposableStyles>) => E
 
 // @public
 export abstract class ElementStyles {
+    constructor(
+    styles: ReadonlyArray<ComposableStyles>,
+    behaviors: ReadonlyArray<Behavior<HTMLElement>> | null);
     // @internal (undocumented)
     addStylesTo(target: StyleTarget): void;
     // @internal (undocumented)
-    abstract readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
+    readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
     static readonly create: ElementStyleFactory;
     // @internal (undocumented)
     isAttachedTo(target: StyleTarget): boolean;
     // @internal (undocumented)
     removeStylesFrom(target: StyleTarget): void;
     // @internal (undocumented)
-    abstract readonly styles: ReadonlyArray<ComposableStyles>;
+    readonly styles: ReadonlyArray<ComposableStyles>;
     withBehaviors(...behaviors: Behavior<HTMLElement>[]): this;
 }
 
diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index 58e578162de..95f22f5703f 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -58,11 +58,12 @@ export type ElementStyleFactory = (
 export abstract class ElementStyles {
     private targets: WeakSet<StyleTarget> = new WeakSet();
 
-    /** @internal */
-    public abstract readonly styles: ReadonlyArray<ComposableStyles>;
-
-    /** @internal */
-    public abstract readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
+    constructor(
+        /** @internal */
+        public readonly styles: ReadonlyArray<ComposableStyles>,
+        /** @internal */
+        public readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null
+    ) {}
 
     /** @internal */
     public addStylesTo(target: StyleTarget): void {
@@ -173,14 +174,11 @@ export class AdoptedStyleSheetsStyles extends ElementStyles {
         return this._styleSheets;
     }
 
-    public readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
-
     public constructor(
-        public styles: ComposableStyles[],
+        styles: ComposableStyles[],
         private styleSheetCache: Map<string, CSSStyleSheet>
     ) {
-        super();
-        this.behaviors = reduceBehaviors(styles);
+        super(styles, reduceBehaviors(styles));
     }
 
     public addStylesTo(target: StyleTarget): void {
@@ -209,11 +207,9 @@ function getNextStyleClass(): string {
 export class StyleElementStyles extends ElementStyles {
     private readonly styleSheets: string[];
     private readonly styleClass: string;
-    public readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null = null;
 
-    public constructor(public styles: ComposableStyles[]) {
-        super();
-        this.behaviors = reduceBehaviors(styles);
+    public constructor(styles: ComposableStyles[]) {
+        super(styles, reduceBehaviors(styles));
         this.styleSheets = reduceStyles(styles) as string[];
         this.styleClass = getNextStyleClass();
     }

From 9591df4b4724a1fdc0a726acd15de7bce353966c Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 14 Oct 2021 16:10:15 -0400
Subject: [PATCH 015/135] feat: introduce ViewBehavior to enable stateless
 behaviors

---
 .../fast-element/docs/api-report.md           | 56 ++++++++++---------
 .../fast-element/src/components/controller.ts |  4 +-
 .../fast-element/src/observation/behavior.ts  |  4 +-
 .../fast-element/src/templating/binding.ts    |  4 +-
 .../fast-element/src/templating/children.ts   |  4 +-
 .../fast-element/src/templating/compiler.ts   | 12 ++--
 .../src/templating/html-directive.ts          | 49 +++++++++++++---
 .../fast-element/src/templating/ref.ts        |  4 +-
 .../fast-element/src/templating/repeat.ts     |  4 +-
 .../fast-element/src/templating/slotted.ts    |  4 +-
 .../src/templating/template.spec.ts           |  4 +-
 .../fast-element/src/templating/view.ts       | 24 ++++----
 12 files changed, 107 insertions(+), 66 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 234d1e888cf..fd8f8051544 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -17,12 +17,12 @@ export interface Accessor {
 // @public
 export class AttachedBehaviorHTMLDirective<T = any> extends HTMLDirective {
     constructor(name: string, behavior: AttachedBehaviorType<T>, options: T);
-    createBehavior(targets: BehaviorTargets): Behavior;
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
     createPlaceholder(index: number): string;
     }
 
 // @public
-export type AttachedBehaviorType<T = any> = new (targets: BehaviorTargets, targetId: string, options: T) => Behavior;
+export type AttachedBehaviorType<T = any> = new (targets: ViewBehaviorTargets, targetId: string, options: T) => Behavior;
 
 // @public
 export function attr(config?: DecoratorAttributeConfiguration): (target: {}, property: string) => void;
@@ -60,14 +60,9 @@ export type AttributeMode = "reflect" | "boolean" | "fromView";
 // @public
 export interface Behavior<TSource = any, TParent = any, TGrandparent = any> {
     bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
-    unbind(source: TSource): void;
+    unbind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
 }
 
-// @public
-export type BehaviorTargets = {
-    [id: string]: Node;
-};
-
 // @public
 export type Binding<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
 
@@ -138,7 +133,7 @@ export function children<T = any>(propertyOrOptions: (keyof T & string) | Childr
 //
 // @public
 export class ChildrenBehavior extends NodeObservationBehavior<ChildrenBehaviorOptions> {
-    constructor(targets: BehaviorTargets, targetId: string, options: ChildrenBehaviorOptions);
+    constructor(targets: ViewBehaviorTargets, targetId: string, options: ChildrenBehaviorOptions);
     disconnect(): void;
     protected getNodes(): ChildNode[];
     observe(): void;
@@ -328,32 +323,32 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
     constructor(binding: Binding);
     // (undocumented)
     binding: Binding;
-    createBehavior(targets: BehaviorTargets): BindingBehavior;
+    createBehavior(targets: ViewBehaviorTargets): BindingBehavior;
     targetAtContent(): void;
     get targetName(): string | undefined;
     set targetName(value: string | undefined);
     }
 
 // @public
-export abstract class HTMLDirective implements NodeBehaviorFactory {
-    abstract createBehavior(targets: BehaviorTargets): Behavior;
+export abstract class HTMLDirective implements ViewBehaviorFactory {
+    abstract createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
     abstract createPlaceholder(index: number): string;
     targetId: string;
 }
 
 // @public
 export class HTMLTemplateCompilationResult {
-    constructor(fragment: DocumentFragment, factories: NodeBehaviorFactory[], targetIds: string[], descriptors: PropertyDescriptorMap);
-    createTargets(root: Node, host?: Node): BehaviorTargets;
+    constructor(fragment: DocumentFragment, factories: ViewBehaviorFactory[], targetIds: string[], descriptors: PropertyDescriptorMap);
+    createTargets(root: Node, host?: Node): ViewBehaviorTargets;
     // (undocumented)
-    readonly factories: NodeBehaviorFactory[];
+    readonly factories: ViewBehaviorFactory[];
     // (undocumented)
     readonly fragment: DocumentFragment;
     }
 
 // @public
 export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implements ElementView<TSource, TParent, TGrandparent>, SyntheticView<TSource, TParent, TGrandparent> {
-    constructor(fragment: DocumentFragment, factories: NodeBehaviorFactory[], targets: BehaviorTargets);
+    constructor(fragment: DocumentFragment, factories: ViewBehaviorFactory[], targets: ViewBehaviorTargets);
     appendTo(node: Node): void;
     bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
     context: ExecutionContext<TParent, TGrandparent> | null;
@@ -374,12 +369,6 @@ export type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
 
-// @public
-export interface NodeBehaviorFactory {
-    createBehavior(targets: BehaviorTargets): Behavior;
-    targetId: string;
-}
-
 // @public
 export interface NodeBehaviorOptions<T = any> {
     filter?: ElementsFilter;
@@ -443,7 +432,7 @@ export function ref<T = any>(propertyName: keyof T & string): CaptureType<T>;
 
 // @public
 export class RefBehavior implements Behavior {
-    constructor(targets: BehaviorTargets, targetId: string, propertyName: string);
+    constructor(targets: ViewBehaviorTargets, targetId: string, propertyName: string);
     bind(source: any): void;
     unbind(): void;
 }
@@ -463,7 +452,7 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
 // @public
 export class RepeatDirective<TSource = any> extends HTMLDirective {
     constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
-    createBehavior(targets: BehaviorTargets): RepeatBehavior<TSource>;
+    createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource>;
     createPlaceholder: (index: number) => string;
     }
 
@@ -483,7 +472,7 @@ export function slotted<T = any>(propertyOrOptions: (keyof T & string) | Slotted
 
 // @public
 export class SlottedBehavior extends NodeObservationBehavior<SlottedBehaviorOptions> {
-    constructor(targets: BehaviorTargets, targetId: string, options: SlottedBehaviorOptions);
+    constructor(targets: ViewBehaviorTargets, targetId: string, options: SlottedBehaviorOptions);
     disconnect(): void;
     protected getNodes(): Node[];
     observe(): void;
@@ -579,6 +568,23 @@ export interface View<TSource = any, TParent = any, TGrandparent = any> {
     unbind(): void;
 }
 
+// @public
+export interface ViewBehavior<TSource = any, TParent = any, TGrandparent = any> {
+    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>, targets: ViewBehaviorTargets): void;
+    unbind(source: TSource, context: ExecutionContext<TParent, TGrandparent>, targets: ViewBehaviorTargets): void;
+}
+
+// @public
+export interface ViewBehaviorFactory {
+    createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
+    targetId: string;
+}
+
+// @public
+export type ViewBehaviorTargets = {
+    [id: string]: Node;
+};
+
 // @public
 export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any> implements ElementViewTemplate<TSource, TParent, TGrandparent>, SyntheticViewTemplate<TSource, TParent, TGrandparent> {
     constructor(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>);
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index 357319d15f7..150911fb744 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -268,7 +268,7 @@ export class Controller extends PropertyChangeNotifier {
             const element = this.element;
 
             for (let i = 0; i < behaviorsToUnbind.length; ++i) {
-                behaviorsToUnbind[i].unbind(element);
+                behaviorsToUnbind[i].unbind(element, defaultExecutionContext);
             }
         }
     }
@@ -321,7 +321,7 @@ export class Controller extends PropertyChangeNotifier {
         if (behaviors !== null) {
             const element = this.element;
             for (const [behavior] of behaviors) {
-                behavior.unbind(element);
+                behavior.unbind(element, defaultExecutionContext);
             }
         }
     }
diff --git a/packages/web-components/fast-element/src/observation/behavior.ts b/packages/web-components/fast-element/src/observation/behavior.ts
index 7cac2d93dd5..b1eea785632 100644
--- a/packages/web-components/fast-element/src/observation/behavior.ts
+++ b/packages/web-components/fast-element/src/observation/behavior.ts
@@ -1,7 +1,7 @@
 import type { ExecutionContext } from "./observable.js";
 
 /**
- * Represents and object that can contribute behavior to a view or
+ * Represents an object that can contribute behavior to a view or
  * element's bind/unbind operations.
  * @public
  */
@@ -17,5 +17,5 @@ export interface Behavior<TSource = any, TParent = any, TGrandparent = any> {
      * Unbinds this behavior from the source.
      * @param source - The source to unbind from.
      */
-    unbind(source: TSource): void;
+    unbind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
 }
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 054c0aee4de..0f8831d6630 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -7,7 +7,7 @@ import {
     Observable,
     setCurrentEvent,
 } from "../observation/observable";
-import { BehaviorTargets, TargetedHTMLDirective } from "./html-directive";
+import { ViewBehaviorTargets, TargetedHTMLDirective } from "./html-directive";
 import type { SyntheticView } from "./view";
 
 function normalBind(
@@ -277,7 +277,7 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
      * information stored in the BindingDirective.
      * @param target - The target node that the binding behavior should attach to.
      */
-    createBehavior(targets: BehaviorTargets): BindingBehavior {
+    createBehavior(targets: ViewBehaviorTargets): BindingBehavior {
         /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
         return new BindingBehavior(
             targets[this.targetId],
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index 00f872378f5..aeb797810cc 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -1,4 +1,4 @@
-import { AttachedBehaviorHTMLDirective, BehaviorTargets } from "./html-directive";
+import { AttachedBehaviorHTMLDirective, ViewBehaviorTargets } from "./html-directive";
 import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
 import type { CaptureType } from "./template";
 
@@ -50,7 +50,7 @@ export class ChildrenBehavior extends NodeObservationBehavior<ChildrenBehaviorOp
      * @param options - The options to use when observing the element children.
      */
     public constructor(
-        targets: BehaviorTargets,
+        targets: ViewBehaviorTargets,
         targetId: string,
         options: ChildrenBehaviorOptions
     ) {
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 0c802ecd9d0..1417a0c658f 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,8 +1,8 @@
-import type { BehaviorTargets } from "./html-directive";
+import type { ViewBehaviorTargets } from "./html-directive";
 import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
 import type { Binding, ExecutionContext } from "../observation/observable";
 import { HTMLBindingDirective } from "./binding";
-import type { HTMLDirective, NodeBehaviorFactory } from "./html-directive";
+import type { HTMLDirective, ViewBehaviorFactory } from "./html-directive";
 
 type InlineDirective = HTMLDirective & {
     targetName?: string;
@@ -68,13 +68,13 @@ const next = {
 };
 
 class CompilationContext {
-    public factories: NodeBehaviorFactory[] = [];
+    public factories: ViewBehaviorFactory[] = [];
     public targetIds: string[] = [];
     public descriptors: PropertyDescriptorMap = {};
     public directives: ReadonlyArray<HTMLDirective>;
 
     public addFactory(
-        factory: NodeBehaviorFactory,
+        factory: ViewBehaviorFactory,
         parentId: string,
         targetId: string,
         targetIndex: number
@@ -333,7 +333,7 @@ export class HTMLTemplateCompilationResult {
      */
     public constructor(
         public readonly fragment: DocumentFragment,
-        public readonly factories: NodeBehaviorFactory[],
+        public readonly factories: ViewBehaviorFactory[],
         private targetIds: string[],
         descriptors: PropertyDescriptorMap
     ) {
@@ -346,7 +346,7 @@ export class HTMLTemplateCompilationResult {
      * @param root - The root element.
      * @returns A lookup object for behavior targets.
      */
-    public createTargets(root: Node, host?: Node): BehaviorTargets {
+    public createTargets(root: Node, host?: Node): ViewBehaviorTargets {
         const targets = Object.create(this.proto, {
             r: { value: root },
             h: { value: host || root },
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 9ac9aae3314..fe63a78ed14 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -1,20 +1,51 @@
-import { DOM } from "../dom.js";
-import type { Behavior } from "../observation/behavior.js";
+import { DOM } from "../dom";
+import type { Behavior } from "../observation/behavior";
+import type { ExecutionContext } from "../observation/observable";
 
 /**
  * The target nodes available to a behavior.
  * @public
  */
-export type BehaviorTargets = {
+export type ViewBehaviorTargets = {
     [id: string]: Node;
 };
 
+/**
+ * Represents an object that can contribute behavior to a view.
+ * @public
+ */
+export interface ViewBehavior<TSource = any, TParent = any, TGrandparent = any> {
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(
+        source: TSource,
+        context: ExecutionContext<TParent, TGrandparent>,
+        targets: ViewBehaviorTargets
+    ): void;
+
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(
+        source: TSource,
+        context: ExecutionContext<TParent, TGrandparent>,
+        targets: ViewBehaviorTargets
+    ): void;
+}
+
 /**
  * A factory that can create a {@link Behavior} associated with a particular
  * location within a DOM fragment.
  * @public
  */
-export interface NodeBehaviorFactory {
+export interface ViewBehaviorFactory {
     /**
      * The structural id of the DOM node to which the created behavior will apply.
      */
@@ -24,14 +55,14 @@ export interface NodeBehaviorFactory {
      * Creates a behavior.
      * @param target - The targets available for behaviors to be attached to.
      */
-    createBehavior(targets: BehaviorTargets): Behavior;
+    createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
 }
 
 /**
  * Instructs the template engine to apply behavior to a node.
  * @public
  */
-export abstract class HTMLDirective implements NodeBehaviorFactory {
+export abstract class HTMLDirective implements ViewBehaviorFactory {
     /**
      * The structural id of the DOM node to which the created behavior will apply.
      */
@@ -47,7 +78,7 @@ export abstract class HTMLDirective implements NodeBehaviorFactory {
      * Creates a behavior.
      * @param targets - The targets available for behaviors to be attached to.
      */
-    public abstract createBehavior(targets: BehaviorTargets): Behavior;
+    public abstract createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
 }
 
 /**
@@ -75,7 +106,7 @@ export abstract class TargetedHTMLDirective extends HTMLDirective {
  * @public
  */
 export type AttachedBehaviorType<T = any> = new (
-    targets: BehaviorTargets,
+    targets: ViewBehaviorTargets,
     targetId: string,
     options: T
 ) => Behavior;
@@ -116,7 +147,7 @@ export class AttachedBehaviorHTMLDirective<T = any> extends HTMLDirective {
      * Creates an instance of the `behavior` type this directive was constructed with
      * and passes the targets, targetId, and options to that `behavior`'s constructor.
      */
-    public createBehavior(targets: BehaviorTargets): Behavior {
+    public createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
         return new this.behavior(targets, this.targetId, this.options);
     }
 }
diff --git a/packages/web-components/fast-element/src/templating/ref.ts b/packages/web-components/fast-element/src/templating/ref.ts
index 4371edbbdb7..4a97e2487ba 100644
--- a/packages/web-components/fast-element/src/templating/ref.ts
+++ b/packages/web-components/fast-element/src/templating/ref.ts
@@ -1,6 +1,6 @@
 import type { Behavior } from "../observation/behavior";
 import type { CaptureType } from "./template";
-import { AttachedBehaviorHTMLDirective, BehaviorTargets } from "./html-directive";
+import { AttachedBehaviorHTMLDirective, ViewBehaviorTargets } from "./html-directive";
 
 /**
  * The runtime behavior for template references.
@@ -15,7 +15,7 @@ export class RefBehavior implements Behavior {
      * @param propertyName - The name of the property to assign the reference to.
      */
     public constructor(
-        targets: BehaviorTargets,
+        targets: ViewBehaviorTargets,
         targetId: string,
         private propertyName: string
     ) {
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index a2c2cccbdac..ce9193fe98c 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -10,7 +10,7 @@ import { enableArrayObservation } from "../observation/array-observer";
 import type { Splice } from "../observation/array-change-records";
 import type { Behavior } from "../observation/behavior";
 import { emptyArray } from "../platform";
-import { BehaviorTargets, HTMLDirective } from "./html-directive";
+import { ViewBehaviorTargets, HTMLDirective } from "./html-directive";
 import { HTMLView, SyntheticView } from "./view";
 import type { CaptureType, SyntheticViewTemplate } from "./template";
 
@@ -329,7 +329,7 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.
      */
-    public createBehavior(targets: BehaviorTargets): RepeatBehavior<TSource> {
+    public createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource> {
         return new RepeatBehavior<TSource>(
             targets[this.targetId],
             this.itemsBinding,
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index 7b452bd64af..38beb15f8eb 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -1,4 +1,4 @@
-import { AttachedBehaviorHTMLDirective, BehaviorTargets } from "./html-directive";
+import { AttachedBehaviorHTMLDirective, ViewBehaviorTargets } from "./html-directive";
 import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
 import type { CaptureType } from "./template";
 
@@ -21,7 +21,7 @@ export class SlottedBehavior extends NodeObservationBehavior<SlottedBehaviorOpti
      * @param options - The options to use when observing the slot.
      */
     public constructor(
-        targets: BehaviorTargets,
+        targets: ViewBehaviorTargets,
         targetId: string,
         options: SlottedBehaviorOptions
     ) {
diff --git a/packages/web-components/fast-element/src/templating/template.spec.ts b/packages/web-components/fast-element/src/templating/template.spec.ts
index 23e547302ad..c81a1d13530 100644
--- a/packages/web-components/fast-element/src/templating/template.spec.ts
+++ b/packages/web-components/fast-element/src/templating/template.spec.ts
@@ -3,7 +3,7 @@ import { html, ViewTemplate } from "./template";
 import { DOM } from "../dom";
 import { HTMLBindingDirective } from "./binding";
 import { HTMLDirective, TargetedHTMLDirective } from "./html-directive";
-import type { BehaviorTargets } from "..";
+import type { ViewBehaviorTargets } from "..";
 
 describe(`The html tag template helper`, () => {
     it(`transforms a string into a ViewTemplate.`, () => {
@@ -231,7 +231,7 @@ describe(`The html tag template helper`, () => {
     it(`captures a case-sensitive property name when used with a named target directive`, () => {
         class TestDirective extends TargetedHTMLDirective {
             targetName: string | undefined;
-            createBehavior(targets: BehaviorTargets) {
+            createBehavior(targets: ViewBehaviorTargets) {
                 return { bind() {}, unbind() {} };
             }
         }
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index 09d02257cb6..a4c85dec7ae 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -1,6 +1,7 @@
+import type { ViewBehavior } from "..";
 import type { Behavior } from "../observation/behavior";
 import type { ExecutionContext } from "../observation/observable";
-import type { BehaviorTargets, NodeBehaviorFactory } from "./html-directive";
+import type { ViewBehaviorTargets, ViewBehaviorFactory } from "./html-directive";
 
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.
@@ -106,7 +107,7 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any>
     implements
         ElementView<TSource, TParent, TGrandparent>,
         SyntheticView<TSource, TParent, TGrandparent> {
-    private behaviors: Behavior[] | null = null;
+    private behaviors: ViewBehavior[] | null = null;
 
     /**
      * The data that the view is bound to.
@@ -135,8 +136,8 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any>
      */
     public constructor(
         private fragment: DocumentFragment,
-        private factories: NodeBehaviorFactory[],
-        private targets: BehaviorTargets
+        private factories: ViewBehaviorFactory[],
+        private targets: ViewBehaviorTargets
     ) {
         this.firstChild = fragment.firstChild!;
         this.lastChild = fragment.lastChild!;
@@ -216,26 +217,26 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any>
 
         this.source = source;
         this.context = context;
+        const targets = this.targets;
 
         if (oldSource !== null) {
             for (let i = 0, ii = behaviors!.length; i < ii; ++i) {
                 const current = behaviors![i];
-                current.unbind(oldSource);
-                current.bind(source, context);
+                current.unbind(oldSource, context, targets);
+                current.bind(source, context, targets);
             }
         } else if (behaviors === null) {
             this.behaviors = behaviors = new Array<Behavior>(this.factories.length);
-            const targets = this.targets;
             const factories = this.factories;
 
             for (let i = 0, ii = factories.length; i < ii; ++i) {
                 const behavior = factories[i].createBehavior(targets);
-                behavior.bind(source, context);
+                behavior.bind(source, context, targets);
                 behaviors[i] = behavior;
             }
         } else {
             for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                behaviors[i].bind(source, context);
+                behaviors[i].bind(source, context, targets);
             }
         }
     }
@@ -250,13 +251,16 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any>
             return;
         }
 
+        const targets = this.targets;
+        const context = this.context;
         const behaviors = this.behaviors!;
 
         for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-            behaviors[i].unbind(oldSource);
+            behaviors[i].unbind(oldSource, context!, targets);
         }
 
         this.source = null;
+        this.context = null;
     }
 
     /**

From 605e2cdba7901e3b80fa3c0b108739b5af77ca9f Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 14 Oct 2021 19:52:43 -0400
Subject: [PATCH 016/135] fix: remove unnecessary render based on element id

---
 .../web-components/fast-element/docs/api-report.md  |  2 +-
 .../fast-element/docs/fast-element-2-changes.md     |  5 +++--
 .../fast-element/src/templating/template.ts         | 13 ++-----------
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index fd8f8051544..35f84ab2846 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -591,7 +591,7 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any> impl
     create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
     readonly directives: ReadonlyArray<HTMLDirective>;
     readonly html: string | HTMLTemplateElement;
-    render(source: TSource, host: Node | string, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
+    render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
     }
 
 // @public
diff --git a/packages/web-components/fast-element/docs/fast-element-2-changes.md b/packages/web-components/fast-element/docs/fast-element-2-changes.md
index 0c69a7bcc72..8937c3003ae 100644
--- a/packages/web-components/fast-element/docs/fast-element-2-changes.md
+++ b/packages/web-components/fast-element/docs/fast-element-2-changes.md
@@ -5,6 +5,7 @@
 * `HTMLDirective` - The `targetIndex: number` property has been replaced by a `targetId: string` property. The `createBehavior` method no longer takes a target `Node` but instead takes a `BehaviorTargets` instance. The actual target can be looked up on the `BehaviorTargets` instance by indexing with the `targetId` property.
 * `compileTemplate()` - Internals have been significantly changed. The implementation no longer uses a TreeWalker. The return type has change to an `HTMLTemplateCompilationResult` with different properties.
 * `View` and `HTMLView` - Type parameters added to enable strongly typed views based on their data source. The constructor of `HTMLView` has a new signature based on changes to the compiler's output. Internals have been cleaned up and no longer rely on the Range type.
-* `ElementViewTemplate`, `SyntheticViewTemplate`, and `ViewTemplate` - Added type parameters throughout. Logic to instantiate and apply behaviors moved out of the template and into the view where it can be lazily executed.
+* `ElementViewTemplate`, `SyntheticViewTemplate`, and `ViewTemplate` - Added type parameters throughout. Logic to instantiate and apply behaviors moved out of the template and into the view where it can be lazily executed. Removed the ability of the `render` method to take a string id of the node to render to. You must provide a node.
 * `DOM` - Tree Walker methods are no longer used and are thus removed. The API for removing child nodes has been removed as well since it was only used in one place and could be inlined.
-* `class` - Bindings to `class` are now more nuanced. Binding directly to `class` will simply set the `className` property. If you need to bind to `class` knowing that manual JS will also manipulate the `classList` in addition to the binding, then you should now bind to `:classList` instead. This allows for performance optimizations in the simple, most common case.
\ No newline at end of file
+* `class` - Bindings to `class` are now more nuanced. Binding directly to `class` will simply set the `className` property. If you need to bind to `class` knowing that manual JS will also manipulate the `classList` in addition to the binding, then you should now bind to `:classList` instead. This allows for performance optimizations in the simple, most common case.
+* `Behavior` and `ViewBehavior` - `Behavior` now requires an `ExecutionContext` for `unbind`. Behaviors can be used for elements or views. `ViewBehavior` has been introduced for use exclusively with views, and provides some optimization opportunities.
\ No newline at end of file
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 9a44ea872ba..3157a0a7dc7 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -120,21 +120,12 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any>
      */
     public render(
         source: TSource,
-        host: Node | string,
+        host: Node,
         hostBindingTarget?: Element
     ): HTMLView<TSource, TParent, TGrandparent> {
-        if (typeof host === "string") {
-            host = document.getElementById(host)!;
-        }
-
-        if (hostBindingTarget === void 0) {
-            hostBindingTarget = host as Element;
-        }
-
-        const view = this.create(hostBindingTarget);
+        const view = this.create(hostBindingTarget ?? (host as any));
         view.bind(source, defaultExecutionContext);
         view.appendTo(host);
-
         return view;
     }
 }

From e9e59cd09184428b7afce0349fe95970265fd114 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 14 Oct 2021 21:12:18 -0400
Subject: [PATCH 017/135] perf: switch targetId to set and use normal props for
 r/h lookups

---
 .../fast-element/docs/api-report.md           |  2 +-
 .../web-components/fast-element/src/dom.ts    |  4 +--
 .../fast-element/src/templating/compiler.ts   | 29 ++++++++-----------
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 35f84ab2846..2effc538026 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -338,7 +338,7 @@ export abstract class HTMLDirective implements ViewBehaviorFactory {
 
 // @public
 export class HTMLTemplateCompilationResult {
-    constructor(fragment: DocumentFragment, factories: ViewBehaviorFactory[], targetIds: string[], descriptors: PropertyDescriptorMap);
+    constructor(fragment: DocumentFragment, factories: ViewBehaviorFactory[], targetIds: Set<string>, descriptors: PropertyDescriptorMap);
     createTargets(root: Node, host?: Node): ViewBehaviorTargets;
     // (undocumented)
     readonly factories: ViewBehaviorFactory[];
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index 9f583f95aec..60a880f7082 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -110,7 +110,7 @@ export const DOM = Object.freeze({
      * @remarks
      * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
      */
-    createCustomAttributePlaceholder(attributeName: string, index: number) {
+    createCustomAttributePlaceholder(attributeName: string, index: number): string {
         return `${attributeName}="${this.createInterpolationPlaceholder(index)}"`;
     },
 
@@ -120,7 +120,7 @@ export const DOM = Object.freeze({
      * @remarks
      * Used internally by structural directives such as `repeat`.
      */
-    createBlockPlaceholder(index: number) {
+    createBlockPlaceholder(index: number): string {
         return `<!--${marker}:${index}-->`;
     },
 
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 1417a0c658f..e8a67b203ff 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -69,7 +69,7 @@ const next = {
 
 class CompilationContext {
     public factories: ViewBehaviorFactory[] = [];
-    public targetIds: string[] = [];
+    public targetIds = new Set<string>();
     public descriptors: PropertyDescriptorMap = {};
     public directives: ReadonlyArray<HTMLDirective>;
 
@@ -79,8 +79,8 @@ class CompilationContext {
         targetId: string,
         targetIndex: number
     ): void {
-        if (this.targetIds.indexOf(targetId) === -1) {
-            this.targetIds.push(targetId);
+        if (!this.targetIds.has(targetId)) {
+            this.targetIds.add(targetId);
             addTargetDescriptor(this.descriptors, parentId, targetId, targetIndex);
         }
 
@@ -107,7 +107,7 @@ class CompilationContext {
         );
 
         this.factories = [];
-        this.targetIds = [];
+        this.targetIds = new Set<string>();
         this.descriptors = {};
         sharedContext = this;
 
@@ -334,7 +334,7 @@ export class HTMLTemplateCompilationResult {
     public constructor(
         public readonly fragment: DocumentFragment,
         public readonly factories: ViewBehaviorFactory[],
-        private targetIds: string[],
+        private targetIds: Set<string>,
         descriptors: PropertyDescriptorMap
     ) {
         this.proto = Object.create(null, descriptors);
@@ -347,15 +347,12 @@ export class HTMLTemplateCompilationResult {
      * @returns A lookup object for behavior targets.
      */
     public createTargets(root: Node, host?: Node): ViewBehaviorTargets {
-        const targets = Object.create(this.proto, {
-            r: { value: root },
-            h: { value: host || root },
-        });
+        const targets = Object.create(this.proto);
+        targets.r = root;
+        targets.h = host ?? root;
 
-        const ids = this.targetIds;
-
-        for (let i = 0, ii = ids.length; i < ii; ++i) {
-            targets[ids[i]]; // trigger locators
+        for (const id of this.targetIds) {
+            targets[id]; // trigger locator
         }
 
         return targets;
@@ -378,10 +375,8 @@ export function compileTemplate(
     template: HTMLTemplateElement,
     directives: ReadonlyArray<HTMLDirective>
 ): HTMLTemplateCompilationResult {
-    const fragment = template.content;
     // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
-    document.adoptNode(fragment);
-
+    const fragment = document.adoptNode(template.content);
     const context = CompilationContext.open(directives);
     compileAttributes(context, "", template, /* host */ "h", 0, true);
 
@@ -399,7 +394,7 @@ export function compileTemplate(
         fragment.insertBefore(document.createComment(""), fragment.firstChild);
     }
 
-    compileChildren(context, fragment, "r");
+    compileChildren(context, fragment, /* root */ "r");
     next.node = null; // prevent leaks
     return context.close(fragment);
 }

From ce417cbe7fca98864f388f731123a8cc9820908f Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 14 Oct 2021 21:42:30 -0400
Subject: [PATCH 018/135] refactor(observable): tighten up some code

---
 .../src/observation/observable.ts             | 681 +++++++++---------
 1 file changed, 325 insertions(+), 356 deletions(-)

diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index 353b560e9a5..7032f270427 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -1,7 +1,14 @@
-import { DOM } from "../dom.js";
-import { FAST, KernelServiceId } from "../platform.js";
-import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
-import type { Notifier, Subscriber } from "./notifier.js";
+import { DOM } from "../dom";
+import { PropertyChangeNotifier, SubscriberSet } from "./notifier";
+import type { Notifier, Subscriber } from "./notifier";
+
+const volatileRegex = /(:|&&|\|\||if)/;
+const notifierLookup = new WeakMap<any, Notifier>();
+const accessorLookup = new WeakMap<any, Accessor[]>();
+let watcher: BindingObserverImplementation | undefined = void 0;
+let createArrayObserver = (array: any[]): Notifier => {
+    throw new Error("Must call enableArrayObservation before observing arrays.");
+};
 
 /**
  * Represents a getter/setter property accessor on an object.
@@ -27,92 +34,131 @@ export interface Accessor {
     setValue(source: any, value: any): void;
 }
 
-/**
- * The signature of an arrow function capable of being evaluated
- * as part of a template binding update.
- * @public
- */
-export type Binding<TSource = any, TReturn = any, TParent = any> = (
-    source: TSource,
-    context: ExecutionContext<TParent>
-) => TReturn;
+class DefaultObservableAccessor implements Accessor {
+    private field: string;
+    private callback: string;
+
+    constructor(public name: string) {
+        this.field = `_${name}`;
+        this.callback = `${name}Changed`;
+    }
+
+    getValue(source: any): any {
+        if (watcher !== void 0) {
+            watcher.watch(source, this.name);
+        }
+
+        return source[this.field];
+    }
+
+    setValue(source: any, newValue: any): void {
+        const field = this.field;
+        const oldValue = source[field];
+
+        if (oldValue !== newValue) {
+            source[field] = newValue;
+
+            const callback = source[this.callback];
+
+            if (typeof callback === "function") {
+                callback.call(source, oldValue, newValue);
+            }
+
+            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+            getNotifier(source).notify(this.name);
+        }
+    }
+}
 
 /**
- * A record of observable property access.
+ * Common Observable APIs.
  * @public
  */
-export interface ObservationRecord {
+export const Observable = Object.freeze({
     /**
-     * The source object with an observable property that was accessed.
+     * @internal
+     * @param factory - The factory used to create array observers.
      */
-    propertySource: any;
+    setArrayObserverFactory(factory: (collection: any[]) => Notifier): void {
+        createArrayObserver = factory;
+    },
 
     /**
-     * The name of the observable property on {@link ObservationRecord.propertySource} that was accessed.
+     * Gets a notifier for an object or Array.
+     * @param source - The object or Array to get the notifier for.
      */
-    propertyName: string;
-}
+    getNotifier(source: any): Notifier {
+        let found = source.$fastController ?? notifierLookup.get(source);
 
-interface SubscriptionRecord extends ObservationRecord {
-    notifier: Notifier;
-    next: SubscriptionRecord | undefined;
-}
+        if (found === void 0) {
+            Array.isArray(source)
+                ? (found = createArrayObserver(source))
+                : notifierLookup.set(
+                      source,
+                      (found = new PropertyChangeNotifier(source))
+                  );
+        }
+
+        return found;
+    },
 
-/**
- * Enables evaluation of and subscription to a binding.
- * @public
- */
-export interface BindingObserver<TSource = any, TReturn = any, TParent = any>
-    extends Notifier {
     /**
-     * Begins observing the binding for the source and returns the current value.
-     * @param source - The source that the binding is based on.
-     * @param context - The execution context to execute the binding within.
-     * @returns The value of the binding.
+     * Records a property change for a source object.
+     * @param source - The object to record the change against.
+     * @param propertyName - The property to track as changed.
      */
-    observe(source: TSource, context: ExecutionContext<TParent>): TReturn;
+    track(source: unknown, propertyName: string): void {
+        watcher && watcher.watch(source, propertyName);
+    },
 
     /**
-     * Unsubscribe from all dependent observables of the binding.
+     * Notifies watchers that the currently executing property getter or function is volatile
+     * with respect to its observable dependencies.
      */
-    disconnect(): void;
+    trackVolatile(): void {
+        watcher && (watcher.needsRefresh = true);
+    },
 
     /**
-     * Gets {@link ObservationRecord|ObservationRecords} that the {@link BindingObserver}
-     * is observing.
+     * Notifies subscribers of a source object of changes.
+     * @param source - the object to notify of changes.
+     * @param args - The change args to pass to subscribers.
      */
-    records(): IterableIterator<ObservationRecord>;
-}
+    notify(source: unknown, args: any): void {
+        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+        getNotifier(source).notify(args);
+    },
 
-/**
- * Common Observable APIs.
- * @public
- */
-export const Observable = FAST.getById(KernelServiceId.observable, () => {
-    const volatileRegex = /(:|&&|\|\||if)/;
-    const notifierLookup = new WeakMap<any, Notifier>();
-    const accessorLookup = new WeakMap<any, Accessor[]>();
-    const queueUpdate = DOM.queueUpdate;
-    let watcher: BindingObserverImplementation | undefined = void 0;
-    let createArrayObserver = (array: any[]): Notifier => {
-        throw new Error("Must call enableArrayObservation before observing arrays.");
-    };
-
-    function getNotifier(source: any): Notifier {
-        let found = source.$fastController || notifierLookup.get(source);
-
-        if (found === void 0) {
-            if (Array.isArray(source)) {
-                found = createArrayObserver(source);
-            } else {
-                notifierLookup.set(source, (found = new PropertyChangeNotifier(source)));
-            }
+    /**
+     * Defines an observable property on an object or prototype.
+     * @param target - The target object to define the observable on.
+     * @param nameOrAccessor - The name of the property to define as observable;
+     * or a custom accessor that specifies the property name and accessor implementation.
+     */
+    defineProperty(target: {}, nameOrAccessor: string | Accessor): void {
+        if (typeof nameOrAccessor === "string") {
+            nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
         }
 
-        return found;
-    }
+        this.getAccessors(target).push(nameOrAccessor);
 
-    function getAccessors(target: {}): Accessor[] {
+        Reflect.defineProperty(target, nameOrAccessor.name, {
+            enumerable: true,
+            get(this: any) {
+                return (nameOrAccessor as Accessor).getValue(this);
+            },
+            set(this: any, newValue: any) {
+                (nameOrAccessor as Accessor).setValue(this, newValue);
+            },
+        });
+    },
+
+    /**
+     * Finds all the observable accessors defined on the target,
+     * including its prototype chain.
+     * @param target - The target object to search for accessor on.
+     */
+    getAccessors(target: {}): Accessor[] {
         let accessors = accessorLookup.get(target);
 
         if (accessors === void 0) {
@@ -123,282 +169,50 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
                 currentTarget = Reflect.getPrototypeOf(currentTarget);
             }
 
-            if (accessors === void 0) {
-                accessors = [];
-            } else {
-                accessors = accessors.slice(0);
-            }
+            accessors = accessors === void 0 ? [] : accessors.slice(0);
 
             accessorLookup.set(target, accessors);
         }
 
         return accessors;
-    }
-
-    class DefaultObservableAccessor implements Accessor {
-        private field: string;
-        private callback: string;
-
-        constructor(public name: string) {
-            this.field = `_${name}`;
-            this.callback = `${name}Changed`;
-        }
-
-        getValue(source: any): any {
-            if (watcher !== void 0) {
-                watcher.watch(source, this.name);
-            }
-
-            return source[this.field];
-        }
-
-        setValue(source: any, newValue: any): void {
-            const field = this.field;
-            const oldValue = source[field];
-
-            if (oldValue !== newValue) {
-                source[field] = newValue;
-
-                const callback = source[this.callback];
-
-                if (typeof callback === "function") {
-                    callback.call(source, oldValue, newValue);
-                }
-
-                getNotifier(source).notify(this.name);
-            }
-        }
-    }
-
-    class BindingObserverImplementation<TSource = any, TReturn = any, TParent = any>
-        extends SubscriberSet
-        implements BindingObserver<TSource, TReturn, TParent> {
-        public needsRefresh: boolean = true;
-        private needsQueue: boolean = true;
-
-        private first: SubscriptionRecord = this as any;
-        private last: SubscriptionRecord | null = null;
-        private propertySource: any = void 0;
-        private propertyName: string | undefined = void 0;
-        private notifier: Notifier | undefined = void 0;
-        private next: SubscriptionRecord | undefined = void 0;
-
-        constructor(
-            private binding: Binding<TSource, TReturn, TParent>,
-            initialSubscriber?: Subscriber,
-            private isVolatileBinding: boolean = false
-        ) {
-            super(binding, initialSubscriber);
-        }
-
-        public observe(source: TSource, context: ExecutionContext): TReturn {
-            if (this.needsRefresh && this.last !== null) {
-                this.disconnect();
-            }
-
-            const previousWatcher = watcher;
-            watcher = this.needsRefresh ? this : void 0;
-            this.needsRefresh = this.isVolatileBinding;
-            const result = this.binding(source, context);
-            watcher = previousWatcher;
-
-            return result;
-        }
-
-        public disconnect(): void {
-            if (this.last !== null) {
-                let current = this.first;
-
-                while (current !== void 0) {
-                    current.notifier.unsubscribe(this, current.propertyName);
-                    current = current.next!;
-                }
-
-                this.last = null;
-                this.needsRefresh = this.needsQueue = true;
-            }
-        }
-
-        public watch(propertySource: unknown, propertyName: string): void {
-            const prev = this.last;
-            const notifier = getNotifier(propertySource);
-            const current: SubscriptionRecord = prev === null ? this.first : ({} as any);
-
-            current.propertySource = propertySource;
-            current.propertyName = propertyName;
-            current.notifier = notifier;
-
-            notifier.subscribe(this, propertyName);
-
-            if (prev !== null) {
-                if (!this.needsRefresh) {
-                    // Declaring the variable prior to assignment below circumvents
-                    // a bug in Angular's optimization process causing infinite recursion
-                    // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
-                    let prevValue;
-                    watcher = void 0;
-                    /* eslint-disable-next-line */
-                    prevValue = prev.propertySource[prev.propertyName];
-                    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
-                    watcher = this;
-
-                    if (propertySource === prevValue) {
-                        this.needsRefresh = true;
-                    }
-                }
-
-                prev.next = current;
-            }
-
-            this.last = current!;
-        }
-
-        handleChange(): void {
-            if (this.needsQueue) {
-                this.needsQueue = false;
-                queueUpdate(this);
-            }
-        }
-
-        call(): void {
-            if (this.last !== null) {
-                this.needsQueue = true;
-                this.notify(this);
-            }
-        }
-
-        public records(): IterableIterator<ObservationRecord> {
-            let next = this.first;
-
-            return {
-                next: () => {
-                    const current = next;
-
-                    if (current === undefined) {
-                        return { value: void 0, done: true };
-                    } else {
-                        next = next.next!;
-                        return {
-                            value: current,
-                            done: false,
-                        };
-                    }
-                },
-                [Symbol.iterator]: function () {
-                    return this;
-                },
-            };
-        }
-    }
-
-    return Object.freeze({
-        /**
-         * @internal
-         * @param factory - The factory used to create array observers.
-         */
-        setArrayObserverFactory(factory: (collection: any[]) => Notifier): void {
-            createArrayObserver = factory;
-        },
+    },
 
-        /**
-         * Gets a notifier for an object or Array.
-         * @param source - The object or Array to get the notifier for.
-         */
-        getNotifier,
-
-        /**
-         * Records a property change for a source object.
-         * @param source - The object to record the change against.
-         * @param propertyName - The property to track as changed.
-         */
-        track(source: unknown, propertyName: string): void {
-            if (watcher !== void 0) {
-                watcher.watch(source, propertyName);
-            }
-        },
-
-        /**
-         * Notifies watchers that the currently executing property getter or function is volatile
-         * with respect to its observable dependencies.
-         */
-        trackVolatile(): void {
-            if (watcher !== void 0) {
-                watcher.needsRefresh = true;
-            }
-        },
-
-        /**
-         * Notifies subscribers of a source object of changes.
-         * @param source - the object to notify of changes.
-         * @param args - The change args to pass to subscribers.
-         */
-        notify(source: unknown, args: any): void {
-            getNotifier(source).notify(args);
-        },
-
-        /**
-         * Defines an observable property on an object or prototype.
-         * @param target - The target object to define the observable on.
-         * @param nameOrAccessor - The name of the property to define as observable;
-         * or a custom accessor that specifies the property name and accessor implementation.
-         */
-        defineProperty(target: {}, nameOrAccessor: string | Accessor): void {
-            if (typeof nameOrAccessor === "string") {
-                nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
-            }
-
-            getAccessors(target).push(nameOrAccessor);
-
-            Reflect.defineProperty(target, nameOrAccessor.name, {
-                enumerable: true,
-                get: function (this: any) {
-                    return (nameOrAccessor as Accessor).getValue(this);
-                },
-                set: function (this: any, newValue: any) {
-                    (nameOrAccessor as Accessor).setValue(this, newValue);
-                },
-            });
-        },
-
-        /**
-         * Finds all the observable accessors defined on the target,
-         * including its prototype chain.
-         * @param target - The target object to search for accessor on.
-         */
-        getAccessors,
-
-        /**
-         * Creates a {@link BindingObserver} that can watch the
-         * provided {@link Binding} for changes.
-         * @param binding - The binding to observe.
-         * @param initialSubscriber - An initial subscriber to changes in the binding value.
-         * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
-         */
-        binding<TSource = any, TReturn = any, TParent = any>(
-            binding: Binding<TSource, TReturn, TParent>,
-            initialSubscriber?: Subscriber,
-            isVolatileBinding: boolean = this.isVolatileBinding(binding)
-        ): BindingObserver<TSource, TReturn, TParent> {
-            return new BindingObserverImplementation(
-                binding,
-                initialSubscriber,
-                isVolatileBinding
-            );
-        },
+    /**
+     * Creates a {@link BindingObserver} that can watch the
+     * provided {@link Binding} for changes.
+     * @param binding - The binding to observe.
+     * @param initialSubscriber - An initial subscriber to changes in the binding value.
+     * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
+     */
+    binding<TSource = any, TReturn = any, TParent = any>(
+        binding: Binding<TSource, TReturn, TParent>,
+        initialSubscriber?: Subscriber,
+        isVolatileBinding: boolean = this.isVolatileBinding(binding)
+    ): BindingObserver<TSource, TReturn, TParent> {
+        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+        return new BindingObserverImplementation(
+            binding,
+            initialSubscriber,
+            isVolatileBinding
+        );
+    },
 
-        /**
-         * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
-         * on every evaluation of the value.
-         * @param binding - The binding to inspect.
-         */
-        isVolatileBinding<TSource = any, TReturn = any, TParent = any>(
-            binding: Binding<TSource, TReturn, TParent>
-        ): boolean {
-            return volatileRegex.test(binding.toString());
-        },
-    });
+    /**
+     * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
+     * on every evaluation of the value.
+     * @param binding - The binding to inspect.
+     */
+    isVolatileBinding<TSource = any, TReturn = any, TParent = any>(
+        binding: Binding<TSource, TReturn, TParent>
+    ): boolean {
+        return volatileRegex.test(binding.toString());
+    },
 });
 
+const getNotifier = Observable.getNotifier;
+const trackVolatile = Observable.trackVolatile;
+const queueUpdate = DOM.queueUpdate;
+
 /**
  * Decorator: Defines an observable property on the target.
  * @param target - The target to define the observable on.
@@ -423,24 +237,21 @@ export function volatile(
 ): PropertyDescriptor {
     return Object.assign({}, descriptor, {
         get: function (this: any) {
-            Observable.trackVolatile();
+            trackVolatile();
             return descriptor.get!.apply(this);
         },
     });
 }
 
-const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
-    let current: Event | null = null;
+let currentEvent: Event | null = null;
 
-    return {
-        get() {
-            return current;
-        },
-        set(event: Event | null) {
-            current = event;
-        },
-    };
-});
+/**
+ * @param event - The event to set as current for the context.
+ * @internal
+ */
+export function setCurrentEvent(event: Event | null): void {
+    currentEvent = event;
+}
 
 /**
  * Provides additional contextual information available to behaviors and expressions.
@@ -471,7 +282,7 @@ export class ExecutionContext<TParent = any, TGrandparent = any> {
      * The current event within an event handler.
      */
     public get event(): Event {
-        return contextEvent.get()!;
+        return currentEvent!;
     }
 
     /**
@@ -513,15 +324,6 @@ export class ExecutionContext<TParent = any, TGrandparent = any> {
     public get isLast(): boolean {
         return this.index === this.length - 1;
     }
-
-    /**
-     * Sets the event for the current execution context.
-     * @param event - The event to set.
-     * @internal
-     */
-    public static setEvent(event: Event | null): void {
-        contextEvent.set(event);
-    }
 }
 
 Observable.defineProperty(ExecutionContext.prototype, "index");
@@ -532,3 +334,170 @@ Observable.defineProperty(ExecutionContext.prototype, "length");
  * @public
  */
 export const defaultExecutionContext = Object.seal(new ExecutionContext());
+
+/**
+ * The signature of an arrow function capable of being evaluated
+ * as part of a template binding update.
+ * @public
+ */
+export type Binding<TSource = any, TReturn = any, TParent = any> = (
+    source: TSource,
+    context: ExecutionContext<TParent>
+) => TReturn;
+
+/**
+ * A record of observable property access.
+ * @public
+ */
+export interface ObservationRecord {
+    /**
+     * The source object with an observable property that was accessed.
+     */
+    propertySource: any;
+
+    /**
+     * The name of the observable property on {@link ObservationRecord.propertySource} that was accessed.
+     */
+    propertyName: string;
+}
+
+interface SubscriptionRecord extends ObservationRecord {
+    notifier: Notifier;
+    next: SubscriptionRecord | undefined;
+}
+
+/**
+ * Enables evaluation of and subscription to a binding.
+ * @public
+ */
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+export interface BindingObserver<TSource = any, TReturn = any, TParent = any>
+    extends Notifier {
+    /**
+     * Begins observing the binding for the source and returns the current value.
+     * @param source - The source that the binding is based on.
+     * @param context - The execution context to execute the binding within.
+     * @returns The value of the binding.
+     */
+    observe(source: TSource, context: ExecutionContext): TReturn;
+
+    /**
+     * Unsubscribe from all dependent observables of the binding.
+     */
+    disconnect(): void;
+
+    /**
+     * Gets {@link ObservationRecord|ObservationRecords} that the {@link BindingObserver}
+     * is observing.
+     */
+    records(): IterableIterator<ObservationRecord>;
+}
+
+class BindingObserverImplementation<TSource = any, TReturn = any, TParent = any>
+    extends SubscriberSet
+    implements BindingObserver<TSource, TReturn, TParent> {
+    public needsRefresh: boolean = true;
+    private needsQueue: boolean = true;
+
+    private first: SubscriptionRecord = this as any;
+    private last: SubscriptionRecord | null = null;
+    private propertySource: any = void 0;
+    private propertyName: string | undefined = void 0;
+    private notifier: Notifier | undefined = void 0;
+    private next: SubscriptionRecord | undefined = void 0;
+
+    constructor(
+        private binding: Binding<TSource, TReturn, TParent>,
+        initialSubscriber?: Subscriber,
+        private isVolatileBinding: boolean = false
+    ) {
+        super(binding, initialSubscriber);
+    }
+
+    public observe(source: TSource, context: ExecutionContext): TReturn {
+        if (this.needsRefresh && this.last !== null) {
+            this.disconnect();
+        }
+
+        const previousWatcher = watcher;
+        watcher = this.needsRefresh ? this : void 0;
+        this.needsRefresh = this.isVolatileBinding;
+        const result = this.binding(source, context);
+        watcher = previousWatcher;
+
+        return result;
+    }
+
+    public disconnect(): void {
+        if (this.last !== null) {
+            let current = this.first;
+
+            while (current !== void 0) {
+                current.notifier.unsubscribe(this, current.propertyName);
+                current = current.next!;
+            }
+
+            this.last = null;
+            this.needsRefresh = this.needsQueue = true;
+        }
+    }
+
+    /** @internal */
+    public watch(propertySource: unknown, propertyName: string): void {
+        const prev = this.last;
+        const notifier = getNotifier(propertySource);
+        const current: SubscriptionRecord = prev === null ? this.first : ({} as any);
+
+        current.propertySource = propertySource;
+        current.propertyName = propertyName;
+        current.notifier = notifier;
+
+        notifier.subscribe(this, propertyName);
+
+        if (prev !== null) {
+            if (!this.needsRefresh) {
+                // Declaring the variable prior to assignment below circumvents
+                // a bug in Angular's optimization process causing infinite recursion
+                // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
+                let prevValue;
+                watcher = void 0;
+                /* eslint-disable-next-line */
+                prevValue = prev.propertySource[prev.propertyName];
+                watcher = this;
+
+                if (propertySource === prevValue) {
+                    this.needsRefresh = true;
+                }
+            }
+
+            prev.next = current;
+        }
+
+        this.last = current!;
+    }
+
+    /** @internal */
+    handleChange(): void {
+        if (this.needsQueue) {
+            this.needsQueue = false;
+            queueUpdate(this);
+        }
+    }
+
+    /** @internal */
+    call(): void {
+        if (this.last !== null) {
+            this.needsQueue = true;
+            this.notify(this);
+        }
+    }
+
+    public *records(): IterableIterator<ObservationRecord> {
+        let next = this.first;
+
+        while (next !== void 0) {
+            yield next;
+            next = next.next!;
+        }
+    }
+}

From e87dcfb5e908d339b28bae6e7764375d1199ffa1 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 14 Oct 2021 23:12:49 -0400
Subject: [PATCH 019/135] refactor: tighten up notifier

---
 .../fast-element/src/observation/notifier.ts  | 35 +++++++------------
 1 file changed, 12 insertions(+), 23 deletions(-)

diff --git a/packages/web-components/fast-element/src/observation/notifier.ts b/packages/web-components/fast-element/src/observation/notifier.ts
index 483521a0419..62912188caa 100644
--- a/packages/web-components/fast-element/src/observation/notifier.ts
+++ b/packages/web-components/fast-element/src/observation/notifier.ts
@@ -198,12 +198,7 @@ export class PropertyChangeNotifier implements Notifier {
      * @param propertyName - The property name, passed along to subscribers during notification.
      */
     public notify(propertyName: string): void {
-        const subscribers = this.subscribers[propertyName];
-
-        if (subscribers !== void 0) {
-            subscribers.notify(propertyName);
-        }
-
+        this.subscribers[propertyName]?.notify(propertyName);
         this.sourceSubscribers?.notify(propertyName);
     }
 
@@ -213,22 +208,19 @@ export class PropertyChangeNotifier implements Notifier {
      * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
      */
     public subscribe(subscriber: Subscriber, propertyToWatch?: string): void {
-        if (propertyToWatch) {
-            let subscribers = this.subscribers[propertyToWatch];
-
-            if (subscribers === void 0) {
-                this.subscribers[propertyToWatch] = subscribers = new SubscriberSet(
-                    this.source
-                );
-            }
+        let subscribers: SubscriberSet;
 
-            subscribers.subscribe(subscriber);
+        if (propertyToWatch) {
+            subscribers =
+                this.subscribers[propertyToWatch] ??
+                (this.subscribers[propertyToWatch] = new SubscriberSet(this.source));
         } else {
-            this.sourceSubscribers =
-                this.sourceSubscribers ?? new SubscriberSet(this.source);
-
-            this.sourceSubscribers.subscribe(subscriber);
+            subscribers =
+                this.sourceSubscribers ??
+                (this.sourceSubscribers = new SubscriberSet(this.source));
         }
+
+        subscribers.subscribe(subscriber);
     }
 
     /**
@@ -238,10 +230,7 @@ export class PropertyChangeNotifier implements Notifier {
      */
     public unsubscribe(subscriber: Subscriber, propertyToUnwatch?: string): void {
         if (propertyToUnwatch) {
-            const subscribers = this.subscribers[propertyToUnwatch];
-            if (subscribers !== void 0) {
-                subscribers.unsubscribe(subscriber);
-            }
+            this.subscribers[propertyToUnwatch]?.unsubscribe(subscriber);
         } else {
             this.sourceSubscribers?.unsubscribe(subscriber);
         }

From fdc4373b8b1b497a12a6dc520bab5da45c717bd4 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Fri, 15 Oct 2021 09:08:36 -0400
Subject: [PATCH 020/135] refactor: clean up array observer

---
 .../src/observation/array-observer.ts         | 177 ++++++++----------
 1 file changed, 81 insertions(+), 96 deletions(-)

diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index 453378c0c14..06c88dcd025 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -5,8 +5,6 @@ import { Subscriber, SubscriberSet } from "./notifier.js";
 import type { Notifier } from "./notifier.js";
 import { Observable } from "./observable.js";
 
-let arrayObservationEnabled = false;
-
 function adjustIndex(changeRecord: Splice, array: any[]): Splice {
     let index = changeRecord.index;
     const arrayLength = array.length;
@@ -34,11 +32,7 @@ class ArrayObserver extends SubscriberSet {
 
     constructor(source: any[]) {
         super(source);
-
-        Reflect.defineProperty(source, "$fastController", {
-            value: this,
-            enumerable: false,
-        });
+        (source as any).$fastController = this;
     }
 
     public subscribe(subscriber: Subscriber): void {
@@ -53,19 +47,12 @@ class ArrayObserver extends SubscriberSet {
             this.splices.push(splice);
         }
 
-        if (this.needsQueue) {
-            this.needsQueue = false;
-            DOM.queueUpdate(this);
-        }
+        this.enqueue();
     }
 
     public reset(oldCollection: any[] | undefined): void {
         this.oldCollection = oldCollection;
-
-        if (this.needsQueue) {
-            this.needsQueue = false;
-            DOM.queueUpdate(this);
-        }
+        this.enqueue();
     }
 
     public flush(): void {
@@ -94,67 +81,39 @@ class ArrayObserver extends SubscriberSet {
 
         this.notify(finalSplices);
     }
-}
 
-/* eslint-disable prefer-rest-params */
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-/**
- * Enables the array observation mechanism.
- * @remarks
- * Array observation is enabled automatically when using the
- * {@link RepeatDirective}, so calling this API manually is
- * not typically necessary.
- * @public
- */
-export function enableArrayObservation(): void {
-    if (arrayObservationEnabled) {
-        return;
-    }
-
-    arrayObservationEnabled = true;
-
-    Observable.setArrayObserverFactory(
-        (collection: any[]): Notifier => {
-            return new ArrayObserver(collection);
+    private enqueue() {
+        if (this.needsQueue) {
+            this.needsQueue = false;
+            DOM.queueUpdate(this);
         }
-    );
-
-    const proto = Array.prototype;
-
-    // Don't patch Array if it has already been patched
-    // by another copy of fast-element.
-    if ((proto as any).$fastPatch) {
-        return;
     }
+}
 
-    Reflect.defineProperty(proto, "$fastPatch", {
-        value: 1,
-        enumerable: false,
-    });
-
-    const pop = proto.pop;
-    const push = proto.push;
-    const reverse = proto.reverse;
-    const shift = proto.shift;
-    const sort = proto.sort;
-    const splice = proto.splice;
-    const unshift = proto.unshift;
-
-    proto.pop = function () {
+const proto = Array.prototype;
+const pop = proto.pop;
+const push = proto.push;
+const reverse = proto.reverse;
+const shift = proto.shift;
+const sort = proto.sort;
+const splice = proto.splice;
+const unshift = proto.unshift;
+const arrayOverrides = {
+    pop() {
         const notEmpty = this.length > 0;
-        const methodCallResult = pop.apply(this, arguments as any);
-        const o = (this as any).$fastController as ArrayObserver;
+        const result = pop.apply(this, arguments);
+        const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0 && notEmpty) {
-            o.addSplice(newSplice(this.length, [methodCallResult], 0));
+            o.addSplice(newSplice(this.length, [result], 0));
         }
 
-        return methodCallResult;
-    };
+        return result;
+    },
 
-    proto.push = function () {
-        const methodCallResult = push.apply(this, arguments as any);
-        const o = (this as any).$fastController as ArrayObserver;
+    push() {
+        const result = push.apply(this, arguments);
+        const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
             o.addSplice(
@@ -165,67 +124,67 @@ export function enableArrayObservation(): void {
             );
         }
 
-        return methodCallResult;
-    };
+        return result;
+    },
 
-    proto.reverse = function () {
+    reverse() {
         let oldArray;
-        const o = (this as any).$fastController as ArrayObserver;
+        const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
             o.flush();
             oldArray = this.slice();
         }
 
-        const methodCallResult = reverse.apply(this, arguments as any);
+        const result = reverse.apply(this, arguments);
 
         if (o !== void 0) {
             o.reset(oldArray);
         }
 
-        return methodCallResult;
-    };
+        return result;
+    },
 
-    proto.shift = function () {
+    shift() {
         const notEmpty = this.length > 0;
-        const methodCallResult = shift.apply(this, arguments as any);
-        const o = (this as any).$fastController as ArrayObserver;
+        const result = shift.apply(this, arguments);
+        const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0 && notEmpty) {
-            o.addSplice(newSplice(0, [methodCallResult], 0));
+            o.addSplice(newSplice(0, [result], 0));
         }
 
-        return methodCallResult;
-    };
+        return result;
+    },
 
-    proto.sort = function () {
+    sort() {
         let oldArray;
-        const o = (this as any).$fastController as ArrayObserver;
+        const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
             o.flush();
             oldArray = this.slice();
         }
 
-        const methodCallResult = sort.apply(this, arguments as any);
+        const result = sort.apply(this, arguments);
 
         if (o !== void 0) {
             o.reset(oldArray);
         }
 
-        return methodCallResult;
-    };
+        return result;
+    },
 
-    proto.splice = function () {
-        const methodCallResult = splice.apply(this, arguments as any);
-        const o = (this as any).$fastController as ArrayObserver;
+    splice() {
+        const result = splice.apply(this, arguments);
+        const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
             o.addSplice(
                 adjustIndex(
                     newSplice(
                         +arguments[0],
-                        methodCallResult,
+                        result,
                         arguments.length > 2 ? arguments.length - 2 : 0
                     ),
                     this
@@ -233,19 +192,45 @@ export function enableArrayObservation(): void {
             );
         }
 
-        return methodCallResult;
-    };
+        return result;
+    },
 
-    proto.unshift = function () {
-        const methodCallResult = unshift.apply(this, arguments as any);
-        const o = (this as any).$fastController as ArrayObserver;
+    unshift() {
+        const result = unshift.apply(this, arguments);
+        const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
             o.addSplice(adjustIndex(newSplice(0, [], arguments.length), this));
         }
 
-        return methodCallResult;
-    };
+        return result;
+    },
+};
+
+/* eslint-disable prefer-rest-params */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/**
+ * Enables the array observation mechanism.
+ * @remarks
+ * Array observation is enabled automatically when using the
+ * {@link RepeatDirective}, so calling this API manually is
+ * not typically necessary.
+ * @public
+ */
+export function enableArrayObservation(): void {
+    if ((proto as any).$fastObservation) {
+        return;
+    }
+
+    (proto as any).$fastObservation = true;
+
+    Observable.setArrayObserverFactory(
+        (collection: any[]): Notifier => {
+            return new ArrayObserver(collection);
+        }
+    );
+
+    Object.assign(proto, arrayOverrides);
 }
 /* eslint-enable prefer-rest-params */
 /* eslint-enable @typescript-eslint/explicit-function-return-type */

From a29f9514cd9fa15a8600413c0040e5bd98841641 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Fri, 15 Oct 2021 15:12:09 -0400
Subject: [PATCH 021/135] refactor: clean up class binding scenarios

---
 .../fast-element/src/observation/array-observer.ts     |  4 +++-
 .../fast-element/src/templating/binding.ts             | 10 ++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index 06c88dcd025..eea12acf01d 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -69,7 +69,9 @@ class ArrayObserver extends SubscriberSet {
 
         const finalSplices =
             oldCollection === void 0
-                ? projectArraySplices(this.source, splices!)
+                ? splices!.length > 1
+                    ? projectArraySplices(this.source, splices!)
+                    : splices
                 : calcSplices(
                       this.source,
                       0,
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 0f8831d6630..fa619a40105 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -143,10 +143,6 @@ function updatePropertyTarget(this: BindingBehavior, value: unknown): void {
     this.target[this.targetName!] = value;
 }
 
-function updateClassTarget(this: BindingBehavior, value: string): void {
-    this.target.className = value;
-}
-
 function updateClassListTarget(this: BindingBehavior, value: string): void {
     const classVersions = this.classVersions || Object.create(null);
     const target = this.target;
@@ -235,9 +231,6 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
                     case "classList":
                         this.updateTarget = updateClassListTarget;
                         break;
-                    case "className":
-                        this.updateTarget = updateClassTarget;
-                        break;
                     default:
                         this.updateTarget = updatePropertyTarget;
                         break;
@@ -256,7 +249,8 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
                 this.cleanedTargetName = value;
 
                 if (value === "class") {
-                    this.updateTarget = updateClassTarget;
+                    this.cleanedTargetName = "className";
+                    this.updateTarget = updatePropertyTarget;
                 }
 
                 break;

From cffaa0499fb0bae6a88382a511ce0443e472bc94 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Fri, 15 Oct 2021 15:47:44 -0400
Subject: [PATCH 022/135] refactor: clean up more internal of css and
 observable

---
 .../fast-element/src/observation/observable.ts           | 2 +-
 packages/web-components/fast-element/src/styles/css.ts   | 9 +--------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index 7032f270427..bea3a8016bf 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -236,7 +236,7 @@ export function volatile(
     descriptor: PropertyDescriptor
 ): PropertyDescriptor {
     return Object.assign({}, descriptor, {
-        get: function (this: any) {
+        get(this: any) {
             trackVolatile();
             return descriptor.get!.apply(this);
         },
diff --git a/packages/web-components/fast-element/src/styles/css.ts b/packages/web-components/fast-element/src/styles/css.ts
index e97968abf3f..da413894150 100644
--- a/packages/web-components/fast-element/src/styles/css.ts
+++ b/packages/web-components/fast-element/src/styles/css.ts
@@ -61,14 +61,8 @@ export function css(
     ...values: (ComposableStyles | CSSDirective)[]
 ): ElementStyles {
     const { styles, behaviors } = collectStyles(strings, values);
-
     const elementStyles = ElementStyles.create(styles);
-
-    if (behaviors.length) {
-        elementStyles.withBehaviors(...behaviors);
-    }
-
-    return elementStyles;
+    return behaviors.length ? elementStyles.withBehaviors(...behaviors) : elementStyles;
 }
 
 class CSSPartial extends CSSDirective implements Behavior<HTMLElement> {
@@ -140,6 +134,5 @@ export function cssPartial(
     ...values: (ComposableStyles | CSSDirective)[]
 ): CSSDirective {
     const { styles, behaviors } = collectStyles(strings, values);
-
     return new CSSPartial(styles, behaviors);
 }

From 7f665146482b4462c49b0ee4664b729ae7e8567f Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Fri, 15 Oct 2021 16:06:32 -0400
Subject: [PATCH 023/135] feat: switch ref over to the new stateless model for
 view behaviors

---
 .../fast-element/docs/api-report.md           |  8 ++--
 .../docs/fast-element-2-changes.md            |  3 +-
 .../fast-element/src/templating/ref.ts        | 48 ++++++++++++-------
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 2effc538026..4d8413edb5d 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -431,9 +431,11 @@ export class PropertyChangeNotifier implements Notifier {
 export function ref<T = any>(propertyName: keyof T & string): CaptureType<T>;
 
 // @public
-export class RefBehavior implements Behavior {
-    constructor(targets: ViewBehaviorTargets, targetId: string, propertyName: string);
-    bind(source: any): void;
+export class RefDirective extends HTMLDirective implements ViewBehavior {
+    constructor(propertyName: string);
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    createBehavior(): this;
+    createPlaceholder(index: number): string;
     unbind(): void;
 }
 
diff --git a/packages/web-components/fast-element/docs/fast-element-2-changes.md b/packages/web-components/fast-element/docs/fast-element-2-changes.md
index 8937c3003ae..a7a1baed71b 100644
--- a/packages/web-components/fast-element/docs/fast-element-2-changes.md
+++ b/packages/web-components/fast-element/docs/fast-element-2-changes.md
@@ -8,4 +8,5 @@
 * `ElementViewTemplate`, `SyntheticViewTemplate`, and `ViewTemplate` - Added type parameters throughout. Logic to instantiate and apply behaviors moved out of the template and into the view where it can be lazily executed. Removed the ability of the `render` method to take a string id of the node to render to. You must provide a node.
 * `DOM` - Tree Walker methods are no longer used and are thus removed. The API for removing child nodes has been removed as well since it was only used in one place and could be inlined.
 * `class` - Bindings to `class` are now more nuanced. Binding directly to `class` will simply set the `className` property. If you need to bind to `class` knowing that manual JS will also manipulate the `classList` in addition to the binding, then you should now bind to `:classList` instead. This allows for performance optimizations in the simple, most common case.
-* `Behavior` and `ViewBehavior` - `Behavior` now requires an `ExecutionContext` for `unbind`. Behaviors can be used for elements or views. `ViewBehavior` has been introduced for use exclusively with views, and provides some optimization opportunities.
\ No newline at end of file
+* `Behavior` and `ViewBehavior` - `Behavior` now requires an `ExecutionContext` for `unbind`. Behaviors can be used for elements or views. `ViewBehavior` has been introduced for use exclusively with views, and provides some optimization opportunities.
+* `RefBehavior` has been replaced with `RefDirective`. The directive also implements `ViewBehavior` allowing a single directive instance to be shared across all template instances that use the ref.
\ No newline at end of file
diff --git a/packages/web-components/fast-element/src/templating/ref.ts b/packages/web-components/fast-element/src/templating/ref.ts
index 4a97e2487ba..cc750666d0f 100644
--- a/packages/web-components/fast-element/src/templating/ref.ts
+++ b/packages/web-components/fast-element/src/templating/ref.ts
@@ -1,34 +1,50 @@
-import type { Behavior } from "../observation/behavior";
 import type { CaptureType } from "./template";
-import { AttachedBehaviorHTMLDirective, ViewBehaviorTargets } from "./html-directive";
+import { HTMLDirective, ViewBehavior, ViewBehaviorTargets } from "./html-directive";
+import type { ExecutionContext } from "../observation/observable";
+import { DOM } from "../dom";
 
 /**
  * The runtime behavior for template references.
  * @public
  */
-export class RefBehavior implements Behavior {
-    private target: Node;
-
+export class RefDirective extends HTMLDirective implements ViewBehavior {
     /**
-     * Creates an instance of RefBehavior.
-     * @param target - The element to reference.
+     * Creates an instance of RefDirective.
      * @param propertyName - The name of the property to assign the reference to.
      */
-    public constructor(
-        targets: ViewBehaviorTargets,
-        targetId: string,
-        private propertyName: string
-    ) {
-        this.target = targets[targetId];
+    public constructor(private propertyName: string) {
+        super();
+    }
+
+    /**
+     * Creates a behavior.
+     */
+    createBehavior() {
+        return this;
+    }
+
+    /**
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
+     * @remarks
+     * Creates a custom attribute placeholder.
+     */
+    public createPlaceholder(index: number): string {
+        return DOM.createCustomAttributePlaceholder("fast-ref", index);
     }
 
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
      * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
      */
-    public bind(source: any): void {
-        source[this.propertyName] = this.target;
+    public bind(
+        source: any,
+        context: ExecutionContext,
+        targets: ViewBehaviorTargets
+    ): void {
+        source[this.propertyName] = targets[this.targetId];
     }
 
     /**
@@ -45,5 +61,5 @@ export class RefBehavior implements Behavior {
  * @public
  */
 export function ref<T = any>(propertyName: keyof T & string): CaptureType<T> {
-    return new AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
+    return new RefDirective(propertyName);
 }

From 61a4e28cce2c85e7d98682e736a37fcba755ba40 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Fri, 15 Oct 2021 16:19:45 -0400
Subject: [PATCH 024/135] refactor: cleanup in node observation

---
 .../src/templating/node-observation.ts             | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index c3e136eae37..f20d98c197b 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -29,21 +29,17 @@ export interface NodeBehaviorOptions<T = any> {
  */
 export type ElementsFilter = (value: Node, index: number, array: Node[]) => boolean;
 
+const selectElements = value => value.nodeType === 1;
+
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
  * @param selector - An optional selector to restrict the filter to.
  * @public
  */
 export function elements(selector?: string): ElementsFilter {
-    if (selector) {
-        return function (value: Node, index: number, array: Node[]): boolean {
-            return value.nodeType === 1 && (value as HTMLElement).matches(selector);
-        };
-    }
-
-    return function (value: Node, index: number, array: Node[]): boolean {
-        return value.nodeType === 1;
-    };
+    return selector
+        ? value => value.nodeType === 1 && (value as HTMLElement).matches(selector)
+        : selectElements;
 }
 
 /**

From ab57fa54450edb15ea1249e5b445bb6a71198c59 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Mon, 18 Oct 2021 10:31:27 -0400
Subject: [PATCH 025/135] feat: createCustomAttributePlaceholder no longer
 requires an attr name

---
 packages/web-components/fast-element/docs/api-report.md  | 4 ++--
 .../fast-element/docs/fast-element-2-changes.md          | 2 +-
 packages/web-components/fast-element/src/dom.ts          | 5 +++--
 .../fast-element/src/templating/children.ts              | 6 +-----
 .../fast-element/src/templating/html-directive.ts        | 9 ++-------
 .../web-components/fast-element/src/templating/ref.ts    | 2 +-
 .../fast-element/src/templating/slotted.ts               | 6 +-----
 7 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 4d8413edb5d..387866dd636 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -16,7 +16,7 @@ export interface Accessor {
 
 // @public
 export class AttachedBehaviorHTMLDirective<T = any> extends HTMLDirective {
-    constructor(name: string, behavior: AttachedBehaviorType<T>, options: T);
+    constructor(behavior: AttachedBehaviorType<T>, options: T);
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
     createPlaceholder(index: number): string;
     }
@@ -205,7 +205,7 @@ export const DOM: Readonly<{
     isMarker(node: Node): node is Comment;
     extractDirectiveIndexFromMarker(node: Comment): number;
     createInterpolationPlaceholder(index: number): string;
-    createCustomAttributePlaceholder(attributeName: string, index: number): string;
+    createCustomAttributePlaceholder(index: number): string;
     createBlockPlaceholder(index: number): string;
     queueUpdate(callable: Callable): void;
     nextUpdate(): Promise<void>;
diff --git a/packages/web-components/fast-element/docs/fast-element-2-changes.md b/packages/web-components/fast-element/docs/fast-element-2-changes.md
index a7a1baed71b..6d5ff5f77da 100644
--- a/packages/web-components/fast-element/docs/fast-element-2-changes.md
+++ b/packages/web-components/fast-element/docs/fast-element-2-changes.md
@@ -6,7 +6,7 @@
 * `compileTemplate()` - Internals have been significantly changed. The implementation no longer uses a TreeWalker. The return type has change to an `HTMLTemplateCompilationResult` with different properties.
 * `View` and `HTMLView` - Type parameters added to enable strongly typed views based on their data source. The constructor of `HTMLView` has a new signature based on changes to the compiler's output. Internals have been cleaned up and no longer rely on the Range type.
 * `ElementViewTemplate`, `SyntheticViewTemplate`, and `ViewTemplate` - Added type parameters throughout. Logic to instantiate and apply behaviors moved out of the template and into the view where it can be lazily executed. Removed the ability of the `render` method to take a string id of the node to render to. You must provide a node.
-* `DOM` - Tree Walker methods are no longer used and are thus removed. The API for removing child nodes has been removed as well since it was only used in one place and could be inlined.
+* `DOM` - Tree Walker methods are no longer used and are thus removed. The API for removing child nodes has been removed as well since it was only used in one place and could be inlined. The helper `createCustomAttributePlaceholder()` no longer requires an attribute name. It will be uniquely generated internally.
 * `class` - Bindings to `class` are now more nuanced. Binding directly to `class` will simply set the `className` property. If you need to bind to `class` knowing that manual JS will also manipulate the `classList` in addition to the binding, then you should now bind to `:classList` instead. This allows for performance optimizations in the simple, most common case.
 * `Behavior` and `ViewBehavior` - `Behavior` now requires an `ExecutionContext` for `unbind`. Behaviors can be used for elements or views. `ViewBehavior` has been introduced for use exclusively with views, and provides some optimization opportunities.
 * `RefBehavior` has been replaced with `RefDirective`. The directive also implements `ViewBehavior` allowing a single directive instance to be shared across all template instances that use the ref.
\ No newline at end of file
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index 60a880f7082..a47d2e20d30 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -30,6 +30,7 @@ function tryRunTask(task: Callable): void {
 }
 
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
+let attrId = 0;
 
 /** @internal */
 export const _interpolationStart = `${marker}{`;
@@ -110,8 +111,8 @@ export const DOM = Object.freeze({
      * @remarks
      * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
      */
-    createCustomAttributePlaceholder(attributeName: string, index: number): string {
-        return `${attributeName}="${this.createInterpolationPlaceholder(index)}"`;
+    createCustomAttributePlaceholder(index: number): string {
+        return `${marker}-${++attrId}="${this.createInterpolationPlaceholder(index)}"`;
     },
 
     /**
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index aeb797810cc..b10c1dbe875 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -103,9 +103,5 @@ export function children<T = any>(
         };
     }
 
-    return new AttachedBehaviorHTMLDirective(
-        "fast-children",
-        ChildrenBehavior,
-        propertyOrOptions as any
-    );
+    return new AttachedBehaviorHTMLDirective(ChildrenBehavior, propertyOrOptions as any);
 }
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index fe63a78ed14..a193269ddc9 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -118,15 +118,10 @@ export type AttachedBehaviorType<T = any> = new (
 export class AttachedBehaviorHTMLDirective<T = any> extends HTMLDirective {
     /**
      *
-     * @param name - The name of the behavior; used as a custom attribute on the element.
      * @param behavior - The behavior to instantiate and attach to the element.
      * @param options - Options to pass to the behavior during creation.
      */
-    public constructor(
-        private name: string,
-        private behavior: AttachedBehaviorType<T>,
-        private options: T
-    ) {
+    public constructor(private behavior: AttachedBehaviorType<T>, private options: T) {
         super();
     }
 
@@ -137,7 +132,7 @@ export class AttachedBehaviorHTMLDirective<T = any> extends HTMLDirective {
      * Creates a custom attribute placeholder.
      */
     public createPlaceholder(index: number): string {
-        return DOM.createCustomAttributePlaceholder(this.name, index);
+        return DOM.createCustomAttributePlaceholder(index);
     }
 
     /**
diff --git a/packages/web-components/fast-element/src/templating/ref.ts b/packages/web-components/fast-element/src/templating/ref.ts
index cc750666d0f..3da12b67960 100644
--- a/packages/web-components/fast-element/src/templating/ref.ts
+++ b/packages/web-components/fast-element/src/templating/ref.ts
@@ -30,7 +30,7 @@ export class RefDirective extends HTMLDirective implements ViewBehavior {
      * Creates a custom attribute placeholder.
      */
     public createPlaceholder(index: number): string {
-        return DOM.createCustomAttributePlaceholder("fast-ref", index);
+        return DOM.createCustomAttributePlaceholder(index);
     }
 
     /**
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index 38beb15f8eb..947857db410 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -63,9 +63,5 @@ export function slotted<T = any>(
         propertyOrOptions = { property: propertyOrOptions };
     }
 
-    return new AttachedBehaviorHTMLDirective(
-        "fast-slotted",
-        SlottedBehavior,
-        propertyOrOptions as any
-    );
+    return new AttachedBehaviorHTMLDirective(SlottedBehavior, propertyOrOptions as any);
 }

From f3fb0b798ddedea1d3eebaad3c0d93dfd0af3f65 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Mon, 18 Oct 2021 14:22:56 -0400
Subject: [PATCH 026/135] feat: update children and slotted to share instances

---
 .../fast-element/docs/api-report.md           |  47 +++----
 .../docs/fast-element-2-changes.md            |   4 +-
 .../src/templating/children.spec.ts           |  48 ++++---
 .../fast-element/src/templating/children.ts   |  75 ++++++-----
 .../src/templating/html-directive.ts          |  47 -------
 .../src/templating/node-observation.ts        | 125 +++++++++++-------
 .../src/templating/slotted.spec.ts            |  42 +++---
 .../fast-element/src/templating/slotted.ts    |  50 ++++---
 8 files changed, 215 insertions(+), 223 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 387866dd636..374e4fddf20 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -14,16 +14,6 @@ export interface Accessor {
     setValue(source: any, value: any): void;
 }
 
-// @public
-export class AttachedBehaviorHTMLDirective<T = any> extends HTMLDirective {
-    constructor(behavior: AttachedBehaviorType<T>, options: T);
-    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
-    createPlaceholder(index: number): string;
-    }
-
-// @public
-export type AttachedBehaviorType<T = any> = new (targets: ViewBehaviorTargets, targetId: string, options: T) => Behavior;
-
 // @public
 export function attr(config?: DecoratorAttributeConfiguration): (target: {}, property: string) => void;
 
@@ -123,24 +113,24 @@ export interface CaptureType<TSource> {
 }
 
 // @public
-export interface ChildListBehaviorOptions<T = any> extends NodeBehaviorOptions<T>, Omit<MutationObserverInit, "subtree" | "childList"> {
+export interface ChildListDirectiveOptions<T = any> extends NodeBehaviorOptions<T>, Omit<MutationObserverInit, "subtree" | "childList"> {
 }
 
 // @public
-export function children<T = any>(propertyOrOptions: (keyof T & string) | ChildrenBehaviorOptions<keyof T & string>): CaptureType<T>;
+export function children<T = any>(propertyOrOptions: (keyof T & string) | ChildListDirectiveOptions<keyof T & string>): CaptureType<T>;
 
-// Warning: (ae-forgotten-export) The symbol "NodeObservationBehavior" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "NodeObservationDirective" needs to be exported by the entry point index.d.ts
 //
 // @public
-export class ChildrenBehavior extends NodeObservationBehavior<ChildrenBehaviorOptions> {
-    constructor(targets: ViewBehaviorTargets, targetId: string, options: ChildrenBehaviorOptions);
-    disconnect(): void;
-    protected getNodes(): ChildNode[];
-    observe(): void;
-    }
+export class ChildrenDirective extends NodeObservationDirective<ChildrenDirectiveOptions> {
+    constructor(options: ChildrenDirectiveOptions);
+    disconnect(target: any): void;
+    getNodes(target: Element): Node[];
+    observe(target: any): void;
+}
 
 // @public
-export type ChildrenBehaviorOptions<T = any> = ChildListBehaviorOptions<T> | SubtreeBehaviorOptions<T>;
+export type ChildrenDirectiveOptions<T = any> = ChildListDirectiveOptions<T> | SubtreeDirectiveOptions<T>;
 
 // @public
 export function compileTemplate(template: HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): HTMLTemplateCompilationResult;
@@ -470,18 +460,19 @@ export interface RepeatOptions {
 export function setCurrentEvent(event: Event | null): void;
 
 // @public
-export function slotted<T = any>(propertyOrOptions: (keyof T & string) | SlottedBehaviorOptions<keyof T & string>): CaptureType<T>;
+export function slotted<T = any>(propertyOrOptions: (keyof T & string) | SlottedDirectiveOptions<keyof T & string>): CaptureType<T>;
 
 // @public
-export class SlottedBehavior extends NodeObservationBehavior<SlottedBehaviorOptions> {
-    constructor(targets: ViewBehaviorTargets, targetId: string, options: SlottedBehaviorOptions);
-    disconnect(): void;
-    protected getNodes(): Node[];
-    observe(): void;
+export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveOptions> {
+    disconnect(target: EventSource): void;
+    getNodes(target: HTMLSlotElement): Node[];
+    // @internal (undocumented)
+    handleEvent(event: Event): void;
+    observe(target: EventSource): void;
 }
 
 // @public
-export interface SlottedBehaviorOptions<T = any> extends NodeBehaviorOptions<T>, AssignedNodesOptions {
+export interface SlottedDirectiveOptions<T = any> extends NodeBehaviorOptions<T>, AssignedNodesOptions {
 }
 
 // @public
@@ -517,7 +508,7 @@ export class SubscriberSet implements Notifier {
 }
 
 // @public
-export interface SubtreeBehaviorOptions<T = any> extends Omit<NodeBehaviorOptions<T>, "filter">, Omit<MutationObserverInit, "subtree" | "childList"> {
+export interface SubtreeDirectiveOptions<T = any> extends Omit<NodeBehaviorOptions<T>, "filter">, Omit<MutationObserverInit, "subtree" | "childList"> {
     selector: string;
     subtree: boolean;
 }
diff --git a/packages/web-components/fast-element/docs/fast-element-2-changes.md b/packages/web-components/fast-element/docs/fast-element-2-changes.md
index 6d5ff5f77da..ef65794c438 100644
--- a/packages/web-components/fast-element/docs/fast-element-2-changes.md
+++ b/packages/web-components/fast-element/docs/fast-element-2-changes.md
@@ -9,4 +9,6 @@
 * `DOM` - Tree Walker methods are no longer used and are thus removed. The API for removing child nodes has been removed as well since it was only used in one place and could be inlined. The helper `createCustomAttributePlaceholder()` no longer requires an attribute name. It will be uniquely generated internally.
 * `class` - Bindings to `class` are now more nuanced. Binding directly to `class` will simply set the `className` property. If you need to bind to `class` knowing that manual JS will also manipulate the `classList` in addition to the binding, then you should now bind to `:classList` instead. This allows for performance optimizations in the simple, most common case.
 * `Behavior` and `ViewBehavior` - `Behavior` now requires an `ExecutionContext` for `unbind`. Behaviors can be used for elements or views. `ViewBehavior` has been introduced for use exclusively with views, and provides some optimization opportunities.
-* `RefBehavior` has been replaced with `RefDirective`. The directive also implements `ViewBehavior` allowing a single directive instance to be shared across all template instances that use the ref.
\ No newline at end of file
+* `RefBehavior` has been replaced with `RefDirective`. The directive also implements `ViewBehavior` allowing a single directive instance to be shared across all template instances that use the ref.
+* Removed `SlottedBehavior` and `ChildrenBehavior` have been replaced with `SlottedDirective` and `ChildrenDirective`. These directives allow a single directive instance to be shared across all template instances that use the ref.
+* Removed `AttachedBehaviorHTMLDirective` and `AttachedBehaviorType` since they are no longer used in the new directive/behavior architecture for ref, slotted, and children.
\ No newline at end of file
diff --git a/packages/web-components/fast-element/src/templating/children.spec.ts b/packages/web-components/fast-element/src/templating/children.spec.ts
index 0689e7f7f5e..0b68b60a665 100644
--- a/packages/web-components/fast-element/src/templating/children.spec.ts
+++ b/packages/web-components/fast-element/src/templating/children.spec.ts
@@ -1,27 +1,25 @@
 import { expect } from "chai";
-import { children, ChildrenBehavior } from "./children";
-import { AttachedBehaviorHTMLDirective } from "./html-directive";
-import { observable } from "../observation/observable";
+import { children, ChildrenDirective } from "./children";
+import { defaultExecutionContext, observable } from "../observation/observable";
 import { elements } from "./node-observation";
 import { DOM } from "../dom";
 
 describe("The children", () => {
     context("template function", () => {
-        it("returns an AttachedBehaviorDirective", () => {
+        it("returns an ChildrenDirective", () => {
             const directive = children("test");
-            expect(directive).to.be.instanceOf(AttachedBehaviorHTMLDirective);
+            expect(directive).to.be.instanceOf(ChildrenDirective);
         });
     });
 
     context("directive", () => {
-        it("creates a ChildrenBehavior", () => {
+        it("creates a behavior by returning itself", () => {
             const targetId = 'r';
-            const directive = children("test") as AttachedBehaviorHTMLDirective;
+            const directive = children("test") as ChildrenDirective;
             const target = document.createElement("div");
             const targets = { [targetId]: target };
             const behavior = directive.createBehavior(targets);
-
-            expect(behavior).to.be.instanceOf(ChildrenBehavior);
+            expect(behavior).to.equal(behavior);
         });
     });
 
@@ -53,37 +51,40 @@ describe("The children", () => {
 
         it("gathers child nodes", () => {
             const { host, children, targets, targetId } = createDOM();
-            const behavior = new ChildrenBehavior(targets, targetId, {
+            const behavior = new ChildrenDirective({
                 property: "nodes",
             });
+            behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(children);
         });
 
         it("gathers child nodes with a filter", () => {
             const { host, children, targets, targetId } = createDOM("foo-bar");
-            const behavior = new ChildrenBehavior(targets, targetId, {
+            const behavior = new ChildrenDirective({
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
+            behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(children.filter(elements("foo-bar")));
         });
 
         it("updates child nodes when they change", async () => {
             const { host, children, targets, targetId } = createDOM("foo-bar");
-            const behavior = new ChildrenBehavior(targets, targetId, {
+            const behavior = new ChildrenDirective({
                 property: "nodes",
             });
+            behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(children);
 
@@ -96,13 +97,14 @@ describe("The children", () => {
 
         it("updates child nodes when they change with a filter", async () => {
             const { host, children, targets, targetId } = createDOM("foo-bar");
-            const behavior = new ChildrenBehavior(targets, targetId, {
+            const behavior = new ChildrenDirective({
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
+            behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(children);
 
@@ -126,15 +128,16 @@ describe("The children", () => {
                 }
             }
 
-            const behavior = new ChildrenBehavior(targets, targetId, {
+            const behavior = new ChildrenDirective({
                 property: "nodes",
                 subtree: true,
                 selector: subtreeElement,
             });
+            behavior.targetId = targetId;
 
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(subtreeChildren);
 
@@ -155,16 +158,17 @@ describe("The children", () => {
 
         it("clears and unwatches when unbound", async () => {
             const { host, children, targets, targetId } = createDOM("foo-bar");
-            const behavior = new ChildrenBehavior(targets, targetId, {
+            const behavior = new ChildrenDirective({
                 property: "nodes",
             });
+            behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(children);
 
-            behavior.unbind();
+            behavior.unbind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members([]);
 
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index b10c1dbe875..437f8097cfa 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -1,12 +1,11 @@
-import { AttachedBehaviorHTMLDirective, ViewBehaviorTargets } from "./html-directive";
-import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
+import { NodeObservationDirective, NodeBehaviorOptions } from "./node-observation";
 import type { CaptureType } from "./template";
 
 /**
  * The options used to configure child list observation.
  * @public
  */
-export interface ChildListBehaviorOptions<T = any>
+export interface ChildListDirectiveOptions<T = any>
     extends NodeBehaviorOptions<T>,
         Omit<MutationObserverInit, "subtree" | "childList"> {}
 
@@ -14,7 +13,7 @@ export interface ChildListBehaviorOptions<T = any>
  * The options used to configure subtree observation.
  * @public
  */
-export interface SubtreeBehaviorOptions<T = any>
+export interface SubtreeDirectiveOptions<T = any>
     extends Omit<NodeBehaviorOptions<T>, "filter">,
         Omit<MutationObserverInit, "subtree" | "childList"> {
     /**
@@ -33,59 +32,67 @@ export interface SubtreeBehaviorOptions<T = any>
  * The options used to configure child/subtree node observation.
  * @public
  */
-export type ChildrenBehaviorOptions<T = any> =
-    | ChildListBehaviorOptions<T>
-    | SubtreeBehaviorOptions<T>;
+export type ChildrenDirectiveOptions<T = any> =
+    | ChildListDirectiveOptions<T>
+    | SubtreeDirectiveOptions<T>;
 
 /**
  * The runtime behavior for child node observation.
  * @public
  */
-export class ChildrenBehavior extends NodeObservationBehavior<ChildrenBehaviorOptions> {
-    private observer: MutationObserver | null = null;
-
+export class ChildrenDirective extends NodeObservationDirective<
+    ChildrenDirectiveOptions
+> {
     /**
-     * Creates an instance of ChildrenBehavior.
-     * @param target - The element target to observe children on.
-     * @param options - The options to use when observing the element children.
+     * Creates an instance of ChildrenDirective.
+     * @param options - The options to use in configuring the child observation behavior.
      */
-    public constructor(
-        targets: ViewBehaviorTargets,
-        targetId: string,
-        options: ChildrenBehaviorOptions
-    ) {
-        super(targets[targetId] as HTMLElement, options);
+    constructor(options: ChildrenDirectiveOptions) {
+        super(options);
         (options as MutationObserverInit).childList = true;
     }
 
     /**
      * Begins observation of the nodes.
+     * @param target - The target to observe.
      */
-    public observe(): void {
-        if (this.observer === null) {
-            this.observer = new MutationObserver(this.handleEvent.bind(this));
-        }
-
-        this.observer.observe(this.target, this.options);
+    observe(target: any) {
+        const observerId = `${this.targetId}-observer`;
+        const observer =
+            target[observerId] ??
+            (target[observerId] = new MutationObserver(this.handleEvent));
+        observer.$fastTarget = target;
+        observer.observe(target, this.options);
     }
 
     /**
      * Disconnects observation of the nodes.
+     * @param target - The target to unobserve.
      */
-    public disconnect(): void {
-        this.observer!.disconnect();
+    disconnect(target: any) {
+        const observerId = `${this.targetId}-observer`;
+        const observer = target[observerId];
+        observer.$fastTarget = null;
+        observer.disconnect();
     }
 
     /**
-     * Retrieves the nodes that should be assigned to the target.
+     * Retrieves the raw nodes that should be assigned to the source property.
+     * @param target - The target to get the node to.
      */
-    protected getNodes(): ChildNode[] {
+    getNodes(target: Element): Node[] {
         if ("subtree" in this.options) {
-            return Array.from(this.target.querySelectorAll(this.options.selector));
+            return Array.from(target.querySelectorAll(this.options.selector));
         }
 
-        return Array.from(this.target.childNodes);
+        return Array.from(target.childNodes);
     }
+
+    private handleEvent = (mutations: MutationRecord[], observer: any): void => {
+        const target = observer.$fastTarget;
+        const source = target.$fastSource;
+        this.updateTarget(source, this.computeNodes(target));
+    };
 }
 
 /**
@@ -95,7 +102,7 @@ export class ChildrenBehavior extends NodeObservationBehavior<ChildrenBehaviorOp
  * @public
  */
 export function children<T = any>(
-    propertyOrOptions: (keyof T & string) | ChildrenBehaviorOptions<keyof T & string>
+    propertyOrOptions: (keyof T & string) | ChildListDirectiveOptions<keyof T & string>
 ): CaptureType<T> {
     if (typeof propertyOrOptions === "string") {
         propertyOrOptions = {
@@ -103,5 +110,7 @@ export function children<T = any>(
         };
     }
 
-    return new AttachedBehaviorHTMLDirective(ChildrenBehavior, propertyOrOptions as any);
+    return new ChildrenDirective(
+        propertyOrOptions as ChildListDirectiveOptions<keyof T & string>
+    );
 }
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index a193269ddc9..b08affb38db 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -99,50 +99,3 @@ export abstract class TargetedHTMLDirective extends HTMLDirective {
     public createPlaceholder: (index: number) => string =
         DOM.createInterpolationPlaceholder;
 }
-
-/**
- * Describes the shape of a behavior constructor that can be created by
- * an {@link AttachedBehaviorHTMLDirective}.
- * @public
- */
-export type AttachedBehaviorType<T = any> = new (
-    targets: ViewBehaviorTargets,
-    targetId: string,
-    options: T
-) => Behavior;
-
-/**
- * A directive that attaches special behavior to an element via a custom attribute.
- * @public
- */
-export class AttachedBehaviorHTMLDirective<T = any> extends HTMLDirective {
-    /**
-     *
-     * @param behavior - The behavior to instantiate and attach to the element.
-     * @param options - Options to pass to the behavior during creation.
-     */
-    public constructor(private behavior: AttachedBehaviorType<T>, private options: T) {
-        super();
-    }
-
-    /**
-     * Creates a placeholder string based on the directive's index within the template.
-     * @param index - The index of the directive within the template.
-     * @remarks
-     * Creates a custom attribute placeholder.
-     */
-    public createPlaceholder(index: number): string {
-        return DOM.createCustomAttributePlaceholder(index);
-    }
-
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     * @remarks
-     * Creates an instance of the `behavior` type this directive was constructed with
-     * and passes the targets, targetId, and options to that `behavior`'s constructor.
-     */
-    public createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
-        return new this.behavior(targets, this.targetId, this.options);
-    }
-}
diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index f20d98c197b..05f9b87dfc4 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -1,6 +1,7 @@
-import type { Behavior } from "../observation/behavior.js";
-import { Accessor, Observable } from "../observation/observable.js";
-import { emptyArray } from "../platform.js";
+import { DOM } from "../dom";
+import type { ExecutionContext } from "../observation/observable";
+import { emptyArray } from "../platform";
+import { HTMLDirective, ViewBehavior, ViewBehaviorTargets } from "./html-directive";
 
 /**
  * Options for configuring node observation behavior.
@@ -46,80 +47,110 @@ export function elements(selector?: string): ElementsFilter {
  * A base class for node observation.
  * @internal
  */
-export abstract class NodeObservationBehavior<T extends NodeBehaviorOptions>
-    implements Behavior {
-    private source: any = null;
-    private shouldUpdate!: boolean;
-
+export abstract class NodeObservationDirective<T extends NodeBehaviorOptions>
+    extends HTMLDirective
+    implements ViewBehavior {
     /**
-     * Creates an instance of NodeObservationBehavior.
-     * @param target - The target to assign the nodes property on.
+     * Creates an instance of NodeObservationDirective.
      * @param options - The options to use in configuring node observation.
      */
-    constructor(protected target: HTMLElement, protected options: T) {}
-
-    /**
-     * Begins observation of the nodes.
-     */
-    public abstract observe(): void;
+    constructor(protected options: T) {
+        super();
+    }
 
     /**
-     * Disconnects observation of the nodes.
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
+     * @remarks
+     * Creates a custom attribute placeholder.
      */
-    public abstract disconnect(): void;
+    createPlaceholder(index: number): string {
+        return DOM.createCustomAttributePlaceholder(index);
+    }
 
     /**
-     * Retrieves the nodes that should be assigned to the target.
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
      */
-    protected abstract getNodes(): Node[];
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior<any, any, any> {
+        return this;
+    }
 
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
      * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
      */
-    public bind(source: any): void {
-        const name = this.options.property;
-        this.shouldUpdate = Observable.getAccessors(source).some(
-            (x: Accessor) => x.name === name
-        );
-        this.source = source;
-        this.updateTarget(this.computeNodes());
-
-        if (this.shouldUpdate) {
-            this.observe();
-        }
+    bind(
+        source: any,
+        context: ExecutionContext<any, any>,
+        targets: ViewBehaviorTargets
+    ): void {
+        const target = targets[this.targetId] as any;
+        target.$fastSource = source;
+        this.updateTarget(source, this.computeNodes(target));
+        this.observe(target);
     }
 
     /**
      * Unbinds this behavior from the source.
      * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
      */
-    public unbind(): void {
-        this.updateTarget(emptyArray);
-        this.source = null;
-
-        if (this.shouldUpdate) {
-            this.disconnect();
-        }
+    unbind(
+        source: any,
+        context: ExecutionContext<any, any>,
+        targets: ViewBehaviorTargets
+    ): void {
+        const target = targets[this.targetId] as any;
+        this.updateTarget(source, emptyArray);
+        this.disconnect(target);
+        target.$fastSource = null;
     }
 
-    /** @internal */
-    public handleEvent(): void {
-        this.updateTarget(this.computeNodes());
+    /**
+     * Updates the source property with the computed nodes.
+     * @param source - The source object to assign the nodes property to.
+     * @param value - The nodes to assign to the source object property.
+     */
+    protected updateTarget(source: any, value: ReadonlyArray<any>): void {
+        source[this.options.property] = value;
     }
 
-    private computeNodes(): Node[] {
-        let nodes = this.getNodes();
+    /**
+     * Computes the set of nodes that should be assigned to the source property.
+     * @param target - The target to compute the nodes for.
+     * @returns The computed nodes.
+     * @remarks
+     * Applies filters if provided.
+     */
+    protected computeNodes(target: any): Node[] {
+        let nodes = this.getNodes(target);
 
-        if (this.options.filter !== void 0) {
+        if ("filter" in this.options) {
             nodes = nodes.filter(this.options.filter!);
         }
 
         return nodes;
     }
 
-    private updateTarget(value: ReadonlyArray<any>): void {
-        this.source[this.options.property] = value;
-    }
+    /**
+     * Begins observation of the nodes.
+     * @param target - The target to observe.
+     */
+    protected abstract observe(target: any): void;
+
+    /**
+     * Disconnects observation of the nodes.
+     * @param target - The target to unobserve.
+     */
+    protected abstract disconnect(target: any): void;
+
+    /**
+     * Retrieves the raw nodes that should be assigned to the source property.
+     * @param target - The target to get the node to.
+     */
+    protected abstract getNodes(target: any): Node[];
 }
diff --git a/packages/web-components/fast-element/src/templating/slotted.spec.ts b/packages/web-components/fast-element/src/templating/slotted.spec.ts
index bfcbd4c448f..6b1969e23b0 100644
--- a/packages/web-components/fast-element/src/templating/slotted.spec.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.spec.ts
@@ -1,28 +1,27 @@
 import { expect } from "chai";
-import { slotted, SlottedBehavior } from "./slotted";
-import { AttachedBehaviorHTMLDirective } from "./html-directive";
-import { observable } from "../observation/observable";
+import { slotted, SlottedDirective } from "./slotted";
+import { defaultExecutionContext, observable } from "../observation/observable";
 import { elements } from "./node-observation";
 import { DOM } from "../dom";
 
 describe("The slotted", () => {
     context("template function", () => {
-        it("returns an AttachedBehaviorDirective", () => {
+        it("returns an ChildrenDirective", () => {
             const directive = slotted("test");
-            expect(directive).to.be.instanceOf(AttachedBehaviorHTMLDirective);
+            expect(directive).to.be.instanceOf(SlottedDirective);
         });
     });
 
     context("directive", () => {
-        it("creates a SlottedBehavior", () => {
+        it("creates a behavior by returning itself", () => {
             const targetId = 'r';
-            const directive = slotted("test") as AttachedBehaviorHTMLDirective;
+            const directive = slotted("test") as SlottedDirective;
             directive.targetId = targetId;
             const target = document.createElement("slot");
             const targets = { [targetId]: target }
             const behavior = directive.createBehavior(targets);
 
-            expect(behavior).to.be.instanceOf(SlottedBehavior);
+            expect(behavior).to.equal(directive);
         });
     });
 
@@ -58,33 +57,36 @@ describe("The slotted", () => {
 
         it("gathers nodes from a slot", () => {
             const { children, targets, targetId } = createDOM();
-            const behavior = new SlottedBehavior(targets, targetId, { property: "nodes" });
+            const behavior = new SlottedDirective({ property: "nodes" });
+            behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(children);
         });
 
         it("gathers nodes from a slot with a filter", () => {
             const { targets, targetId, children } = createDOM("foo-bar");
-            const behavior = new SlottedBehavior(targets, targetId, {
+            const behavior = new SlottedDirective({
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
+            behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(children.filter(elements("foo-bar")));
         });
 
         it("updates when slotted nodes change", async () => {
             const { host, slot, children, targets, targetId } = createDOM("foo-bar");
-            const behavior = new SlottedBehavior(targets, targetId, { property: "nodes" });
+            const behavior = new SlottedDirective({ property: "nodes" });
+            behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(children);
 
@@ -97,13 +99,14 @@ describe("The slotted", () => {
 
         it("updates when slotted nodes change with a filter", async () => {
             const { host, slot, children, targets, targetId } = createDOM("foo-bar");
-            const behavior = new SlottedBehavior(targets, targetId, {
+            const behavior = new SlottedDirective({
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
+            behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(children);
 
@@ -116,14 +119,15 @@ describe("The slotted", () => {
 
         it("clears and unwatches when unbound", async () => {
             const { host, slot, children, targets, targetId } = createDOM("foo-bar");
-            const behavior = new SlottedBehavior(targets, targetId, { property: "nodes" });
+            const behavior = new SlottedDirective({ property: "nodes" });
+            behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members(children);
 
-            behavior.unbind();
+            behavior.unbind(model, defaultExecutionContext, targets);
 
             expect(model.nodes).members([]);
 
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index 947857db410..a7feff6c71a 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -1,12 +1,11 @@
-import { AttachedBehaviorHTMLDirective, ViewBehaviorTargets } from "./html-directive";
-import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
+import { NodeObservationDirective, NodeBehaviorOptions } from "./node-observation";
 import type { CaptureType } from "./template";
 
 /**
  * The options used to configure slotted node observation.
  * @public
  */
-export interface SlottedBehaviorOptions<T = any>
+export interface SlottedDirectiveOptions<T = any>
     extends NodeBehaviorOptions<T>,
         AssignedNodesOptions {}
 
@@ -14,39 +13,36 @@ export interface SlottedBehaviorOptions<T = any>
  * The runtime behavior for slotted node observation.
  * @public
  */
-export class SlottedBehavior extends NodeObservationBehavior<SlottedBehaviorOptions> {
-    /**
-     * Creates an instance of SlottedBehavior.
-     * @param target - The slot element target to observe.
-     * @param options - The options to use when observing the slot.
-     */
-    public constructor(
-        targets: ViewBehaviorTargets,
-        targetId: string,
-        options: SlottedBehaviorOptions
-    ) {
-        super(targets[targetId] as HTMLElement, options);
-    }
-
+export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveOptions> {
     /**
      * Begins observation of the nodes.
+     * @param target - The target to observe.
      */
-    public observe(): void {
-        this.target.addEventListener("slotchange", this);
+    observe(target: EventSource) {
+        target.addEventListener("slotchange", this);
     }
 
     /**
      * Disconnects observation of the nodes.
+     * @param target - The target to unobserve.
      */
-    public disconnect(): void {
-        this.target.removeEventListener("slotchange", this);
+    disconnect(target: EventSource) {
+        target.removeEventListener("slotchange", this);
     }
 
     /**
-     * Retrieves the nodes that should be assigned to the target.
+     * Retrieves the raw nodes that should be assigned to the source property.
+     * @param target - The target to get the node to.
      */
-    protected getNodes(): Node[] {
-        return (this.target as HTMLSlotElement).assignedNodes(this.options);
+    getNodes(target: HTMLSlotElement): Node[] {
+        return target.assignedNodes(this.options);
+    }
+
+    /** @internal */
+    handleEvent(event: Event): void {
+        const target = event.currentTarget as any;
+        const source = target.$fastSource;
+        this.updateTarget(source, this.computeNodes(target));
     }
 }
 
@@ -57,11 +53,13 @@ export class SlottedBehavior extends NodeObservationBehavior<SlottedBehaviorOpti
  * @public
  */
 export function slotted<T = any>(
-    propertyOrOptions: (keyof T & string) | SlottedBehaviorOptions<keyof T & string>
+    propertyOrOptions: (keyof T & string) | SlottedDirectiveOptions<keyof T & string>
 ): CaptureType<T> {
     if (typeof propertyOrOptions === "string") {
         propertyOrOptions = { property: propertyOrOptions };
     }
 
-    return new AttachedBehaviorHTMLDirective(SlottedBehavior, propertyOrOptions as any);
+    return new SlottedDirective(
+        propertyOrOptions as SlottedDirectiveOptions<keyof T & string>
+    );
 }

From 37e0cfd2e787106bde512dfd258e3b7583f6bf6e Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Mon, 18 Oct 2021 15:21:46 -0400
Subject: [PATCH 027/135] refactor: dry up ref and node observation directives

---
 .../fast-element/docs/api-report.md           | 20 +++++--
 .../src/templating/html-directive.ts          | 52 +++++++++++++++++++
 .../src/templating/node-observation.ts        | 38 +++-----------
 .../fast-element/src/templating/ref.ts        | 35 +++----------
 4 files changed, 81 insertions(+), 64 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 374e4fddf20..1254e449d55 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -420,12 +420,11 @@ export class PropertyChangeNotifier implements Notifier {
 // @public
 export function ref<T = any>(propertyName: keyof T & string): CaptureType<T>;
 
+// Warning: (ae-incompatible-release-tags) The symbol "RefDirective" is marked as @public, but its signature references "StatelessAttachedAttributeDirective" which is marked as @internal
+//
 // @public
-export class RefDirective extends HTMLDirective implements ViewBehavior {
-    constructor(propertyName: string);
+export class RefDirective extends StatelessAttachedAttributeDirective<string> {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
-    createBehavior(): this;
-    createPlaceholder(index: number): string;
     unbind(): void;
 }
 
@@ -482,6 +481,19 @@ export interface Splice {
     removed: any[];
 }
 
+// Warning: (ae-internal-missing-underscore) The name "StatelessAttachedAttributeDirective" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirective implements ViewBehavior {
+    constructor(options: T);
+    abstract bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
+    createPlaceholder(index: number): string;
+    // (undocumented)
+    protected options: T;
+    abstract unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+}
+
 // @public
 export interface StyleTarget {
     adoptedStyleSheets?: CSSStyleSheet[];
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index b08affb38db..954a5094166 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -99,3 +99,55 @@ export abstract class TargetedHTMLDirective extends HTMLDirective {
     public createPlaceholder: (index: number) => string =
         DOM.createInterpolationPlaceholder;
 }
+
+/** @internal */
+export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirective
+    implements ViewBehavior {
+    /**
+     * Creates an instance of RefDirective.
+     * @param options - The options to use in configuring the directive.
+     */
+    public constructor(protected options: T) {
+        super();
+    }
+
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
+        return this;
+    }
+
+    /**
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
+     * @remarks
+     * Creates a custom attribute placeholder.
+     */
+    public createPlaceholder(index: number): string {
+        return DOM.createCustomAttributePlaceholder(index);
+    }
+
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    abstract bind(
+        source: any,
+        context: ExecutionContext,
+        targets: ViewBehaviorTargets
+    ): void;
+
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    abstract unbind(
+        source: any,
+        context: ExecutionContext,
+        targets: ViewBehaviorTargets
+    ): void;
+}
diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index 05f9b87dfc4..76e222dbdeb 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -1,7 +1,9 @@
-import { DOM } from "../dom";
 import type { ExecutionContext } from "../observation/observable";
 import { emptyArray } from "../platform";
-import { HTMLDirective, ViewBehavior, ViewBehaviorTargets } from "./html-directive";
+import {
+    StatelessAttachedAttributeDirective,
+    ViewBehaviorTargets,
+} from "./html-directive";
 
 /**
  * Options for configuring node observation behavior.
@@ -47,35 +49,9 @@ export function elements(selector?: string): ElementsFilter {
  * A base class for node observation.
  * @internal
  */
-export abstract class NodeObservationDirective<T extends NodeBehaviorOptions>
-    extends HTMLDirective
-    implements ViewBehavior {
-    /**
-     * Creates an instance of NodeObservationDirective.
-     * @param options - The options to use in configuring node observation.
-     */
-    constructor(protected options: T) {
-        super();
-    }
-
-    /**
-     * Creates a placeholder string based on the directive's index within the template.
-     * @param index - The index of the directive within the template.
-     * @remarks
-     * Creates a custom attribute placeholder.
-     */
-    createPlaceholder(index: number): string {
-        return DOM.createCustomAttributePlaceholder(index);
-    }
-
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets: ViewBehaviorTargets): ViewBehavior<any, any, any> {
-        return this;
-    }
-
+export abstract class NodeObservationDirective<
+    T extends NodeBehaviorOptions
+> extends StatelessAttachedAttributeDirective<T> {
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
diff --git a/packages/web-components/fast-element/src/templating/ref.ts b/packages/web-components/fast-element/src/templating/ref.ts
index 3da12b67960..e0c176b7795 100644
--- a/packages/web-components/fast-element/src/templating/ref.ts
+++ b/packages/web-components/fast-element/src/templating/ref.ts
@@ -1,38 +1,15 @@
 import type { CaptureType } from "./template";
-import { HTMLDirective, ViewBehavior, ViewBehaviorTargets } from "./html-directive";
+import {
+    StatelessAttachedAttributeDirective,
+    ViewBehaviorTargets,
+} from "./html-directive";
 import type { ExecutionContext } from "../observation/observable";
-import { DOM } from "../dom";
 
 /**
  * The runtime behavior for template references.
  * @public
  */
-export class RefDirective extends HTMLDirective implements ViewBehavior {
-    /**
-     * Creates an instance of RefDirective.
-     * @param propertyName - The name of the property to assign the reference to.
-     */
-    public constructor(private propertyName: string) {
-        super();
-    }
-
-    /**
-     * Creates a behavior.
-     */
-    createBehavior() {
-        return this;
-    }
-
-    /**
-     * Creates a placeholder string based on the directive's index within the template.
-     * @param index - The index of the directive within the template.
-     * @remarks
-     * Creates a custom attribute placeholder.
-     */
-    public createPlaceholder(index: number): string {
-        return DOM.createCustomAttributePlaceholder(index);
-    }
-
+export class RefDirective extends StatelessAttachedAttributeDirective<string> {
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
@@ -44,7 +21,7 @@ export class RefDirective extends HTMLDirective implements ViewBehavior {
         context: ExecutionContext,
         targets: ViewBehaviorTargets
     ): void {
-        source[this.propertyName] = targets[this.targetId];
+        source[this.options] = targets[this.targetId];
     }
 
     /**

From e6d71e9a5d84eb59e47bb60c6735f12d6c5f9dae Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 19 Oct 2021 09:53:35 -0400
Subject: [PATCH 028/135] refactor: improve compiler internals by combining
 context and result

---
 .../fast-element/docs/api-report.md           |  11 +-
 .../fast-element/src/templating/compiler.ts   | 200 ++++++++----------
 .../fast-element/src/templating/view.ts       |   2 +-
 3 files changed, 89 insertions(+), 124 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 1254e449d55..ca19c6f02c6 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -327,18 +327,15 @@ export abstract class HTMLDirective implements ViewBehaviorFactory {
 }
 
 // @public
-export class HTMLTemplateCompilationResult {
-    constructor(fragment: DocumentFragment, factories: ViewBehaviorFactory[], targetIds: Set<string>, descriptors: PropertyDescriptorMap);
+export interface HTMLTemplateCompilationResult {
     createTargets(root: Node, host?: Node): ViewBehaviorTargets;
-    // (undocumented)
-    readonly factories: ViewBehaviorFactory[];
-    // (undocumented)
+    readonly factories: ReadonlyArray<ViewBehaviorFactory>;
     readonly fragment: DocumentFragment;
-    }
+}
 
 // @public
 export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implements ElementView<TSource, TParent, TGrandparent>, SyntheticView<TSource, TParent, TGrandparent> {
-    constructor(fragment: DocumentFragment, factories: ViewBehaviorFactory[], targets: ViewBehaviorTargets);
+    constructor(fragment: DocumentFragment, factories: ReadonlyArray<ViewBehaviorFactory>, targets: ViewBehaviorTargets);
     appendTo(node: Node): void;
     bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
     context: ExecutionContext<TParent, TGrandparent> | null;
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index e8a67b203ff..31dc22cc3a1 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -13,65 +13,46 @@ type InlineDirective = HTMLDirective & {
 const targetIdFrom = (parentId: string, nodeIndex: number) => `${parentId}.${nodeIndex}`;
 const descriptorCache: PropertyDescriptorMap = {};
 
-function addTargetDescriptor(
-    descriptors: PropertyDescriptorMap,
-    parentId: string,
-    targetId: string,
-    targetIndex: number
-) {
-    if (
-        targetId === "r" || // root
-        targetId === "h" || // host
-        descriptors[targetId]
-    ) {
-        return;
-    }
-
-    if (!descriptors[parentId]) {
-        const index = parentId.lastIndexOf(".");
-        const grandparentId = parentId.substr(0, index);
-        const childIndex = parseInt(parentId.substr(index + 1));
-        addTargetDescriptor(descriptors, grandparentId, parentId, childIndex);
-    }
-
-    descriptors[targetId] = createTargetDescriptor(parentId, targetId, targetIndex);
-}
-
-function createTargetDescriptor(
-    parentId: string,
-    targetId: string,
-    targetIndex: number
-): PropertyDescriptor {
-    let descriptor = descriptorCache[targetId];
-
-    if (!descriptor) {
-        const field = `_${targetId}`;
-
-        descriptorCache[targetId] = descriptor = {
-            get() {
-                return (
-                    this[field] ?? (this[field] = this[parentId].childNodes[targetIndex])
-                );
-            },
-        };
-    }
-
-    return descriptor;
-}
-
-let sharedContext: CompilationContext | null = null;
-
 // used to prevent creating lots of objects just to track node and index while compiling
 const next = {
     index: 0,
     node: null as ChildNode | null,
 };
 
-class CompilationContext {
-    public factories: ViewBehaviorFactory[] = [];
-    public targetIds = new Set<string>();
-    public descriptors: PropertyDescriptorMap = {};
-    public directives: ReadonlyArray<HTMLDirective>;
+/**
+ * The result of compiling a template and its directives.
+ * @public
+ */
+export interface HTMLTemplateCompilationResult {
+    /**
+     * A cloneable DocumentFragment representing the compiled HTML.
+     */
+    readonly fragment: DocumentFragment;
+
+    /**
+     * The behaviors that should be applied to the template's HTML.
+     */
+    readonly factories: ReadonlyArray<ViewBehaviorFactory>;
+
+    /**
+     * Creates a behavior target lookup object.
+     * @param host - The host element.
+     * @param root - The root element.
+     * @returns A lookup object for behavior targets.
+     */
+    createTargets(root: Node, host?: Node): ViewBehaviorTargets;
+}
+
+class CompilationContext implements HTMLTemplateCompilationResult {
+    private proto: any = null;
+    private targetIds = new Set<string>();
+    private descriptors: PropertyDescriptorMap = {};
+    public readonly factories: ViewBehaviorFactory[] = [];
+
+    constructor(
+        public readonly fragment: DocumentFragment,
+        public readonly directives: ReadonlyArray<HTMLDirective>
+    ) {}
 
     public addFactory(
         factory: ViewBehaviorFactory,
@@ -81,7 +62,7 @@ class CompilationContext {
     ): void {
         if (!this.targetIds.has(targetId)) {
             this.targetIds.add(targetId);
-            addTargetDescriptor(this.descriptors, parentId, targetId, targetIndex);
+            this.addTargetDescriptor(parentId, targetId, targetIndex);
         }
 
         factory.targetId = targetId;
@@ -98,27 +79,57 @@ class CompilationContext {
         this.addFactory(directive, parentId, targetId, targetIndex);
     }
 
-    public close(fragment: DocumentFragment): HTMLTemplateCompilationResult {
-        const result = new HTMLTemplateCompilationResult(
-            fragment,
-            this.factories,
-            this.targetIds,
-            this.descriptors
-        );
+    public freeze(): HTMLTemplateCompilationResult {
+        this.proto = Object.create(null, this.descriptors);
+        return this;
+    }
+
+    public createTargets(root: Node, host?: Node): ViewBehaviorTargets {
+        const targets = Object.create(this.proto);
+        targets.r = root;
+        targets.h = host ?? root;
 
-        this.factories = [];
-        this.targetIds = new Set<string>();
-        this.descriptors = {};
-        sharedContext = this;
+        for (const id of this.targetIds) {
+            targets[id]; // trigger locator
+        }
 
-        return result;
+        return targets;
     }
 
-    public static open(directives: ReadonlyArray<HTMLDirective>): CompilationContext {
-        const context = sharedContext ?? new CompilationContext();
-        context.directives = directives;
-        sharedContext = null;
-        return context;
+    private addTargetDescriptor(parentId: string, targetId: string, targetIndex: number) {
+        const descriptors = this.descriptors;
+
+        if (
+            targetId === "r" || // root
+            targetId === "h" || // host
+            descriptors[targetId]
+        ) {
+            return;
+        }
+
+        if (!descriptors[parentId]) {
+            const index = parentId.lastIndexOf(".");
+            const grandparentId = parentId.substr(0, index);
+            const childIndex = parseInt(parentId.substr(index + 1));
+            this.addTargetDescriptor(grandparentId, parentId, childIndex);
+        }
+
+        let descriptor = descriptorCache[targetId];
+
+        if (!descriptor) {
+            const field = `_${targetId}`;
+
+            descriptorCache[targetId] = descriptor = {
+                get() {
+                    return (
+                        this[field] ??
+                        (this[field] = this[parentId].childNodes[targetIndex])
+                    );
+                },
+            };
+        }
+
+        descriptors[targetId] = descriptor;
     }
 }
 
@@ -316,49 +327,6 @@ function compileNode(
     return next;
 }
 
-/**
- * The result of compiling a template and its directives.
- * @public
- */
-export class HTMLTemplateCompilationResult {
-    private proto: any;
-
-    /**
-     *
-     * @param fragment - A cloneable DocumentFragment representing the compiled HTML.
-     * @param viewBehaviorFactories - The behaviors that should be applied to the template's HTML.
-     * @param hostBehaviorFactories - The behaviors that should be applied to the host element that
-     * the template is rendered into.
-     * @param targetIds - The structural ids used by the behavior factories.
-     */
-    public constructor(
-        public readonly fragment: DocumentFragment,
-        public readonly factories: ViewBehaviorFactory[],
-        private targetIds: Set<string>,
-        descriptors: PropertyDescriptorMap
-    ) {
-        this.proto = Object.create(null, descriptors);
-    }
-
-    /**
-     * Creates a behavior target lookup object.
-     * @param host - The host element.
-     * @param root - The root element.
-     * @returns A lookup object for behavior targets.
-     */
-    public createTargets(root: Node, host?: Node): ViewBehaviorTargets {
-        const targets = Object.create(this.proto);
-        targets.r = root;
-        targets.h = host ?? root;
-
-        for (const id of this.targetIds) {
-            targets[id]; // trigger locator
-        }
-
-        return targets;
-    }
-}
-
 /**
  * Compiles a template and associated directives into a raw compilation
  * result which include a cloneable DocumentFragment and factories capable
@@ -377,7 +345,7 @@ export function compileTemplate(
 ): HTMLTemplateCompilationResult {
     // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
     const fragment = document.adoptNode(template.content);
-    const context = CompilationContext.open(directives);
+    const context = new CompilationContext(fragment, directives);
     compileAttributes(context, "", template, /* host */ "h", 0, true);
 
     if (
@@ -396,5 +364,5 @@ export function compileTemplate(
 
     compileChildren(context, fragment, /* root */ "r");
     next.node = null; // prevent leaks
-    return context.close(fragment);
+    return context.freeze();
 }
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index a4c85dec7ae..3f255367e51 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -136,7 +136,7 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any>
      */
     public constructor(
         private fragment: DocumentFragment,
-        private factories: ViewBehaviorFactory[],
+        private factories: ReadonlyArray<ViewBehaviorFactory>,
         private targets: ViewBehaviorTargets
     ) {
         this.firstChild = fragment.firstChild!;

From b7b17f3f4f2c4c36dad87c234208a361db46589e Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 19 Oct 2021 17:45:22 -0400
Subject: [PATCH 029/135] feat: wip updating binding system to support modes
 and configs

---
 .../fast-element/docs/api-report.md           |  96 +--
 .../src/templating/binding.spec.ts            |  56 +-
 .../fast-element/src/templating/binding.ts    | 655 +++++++++++-------
 .../src/templating/compiler.spec.ts           |   4 +-
 .../fast-element/src/templating/compiler.ts   |   7 +-
 .../src/templating/template.spec.ts           |   4 +-
 .../fast-element/src/templating/template.ts   |   4 +-
 7 files changed, 482 insertions(+), 344 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index ca19c6f02c6..8ed280b7e09 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -53,44 +53,43 @@ export interface Behavior<TSource = any, TParent = any, TGrandparent = any> {
     unbind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
 }
 
+// @public (undocumented)
+export function bind<T = any>(binding: Binding, config?: BindingConfig | DefaultBindingOptions): CaptureType<T>;
+
 // @public
 export type Binding<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
 
-// @public
-export class BindingBehavior implements Behavior {
-    constructor(target: any, binding: Binding, isBindingVolatile: boolean, bind: typeof normalBind, unbind: typeof normalUnbind, updateTarget: typeof updatePropertyTarget, targetName?: string);
-    // Warning: (ae-forgotten-export) The symbol "normalBind" needs to be exported by the entry point index.d.ts
-    bind: typeof normalBind;
-    // @internal (undocumented)
-    binding: Binding;
-    // @internal (undocumented)
-    bindingObserver: BindingObserver | null;
-    // @internal (undocumented)
-    classVersions: Record<string, number>;
-    // @internal (undocumented)
-    context: ExecutionContext | null;
-    // @internal (undocumented)
-    handleChange(): void;
-    // @internal (undocumented)
-    handleEvent(event: Event): void;
-    // @internal (undocumented)
-    isBindingVolatile: boolean;
-    // @internal (undocumented)
-    source: unknown;
-    // @internal (undocumented)
-    target: any;
-    // @internal (undocumented)
-    targetName?: string;
-    // Warning: (ae-forgotten-export) The symbol "normalUnbind" needs to be exported by the entry point index.d.ts
-    unbind: typeof normalUnbind;
-    // Warning: (ae-forgotten-export) The symbol "updatePropertyTarget" needs to be exported by the entry point index.d.ts
-    //
-    // @internal (undocumented)
-    updateTarget: typeof updatePropertyTarget;
-    // @internal (undocumented)
-    value: any;
-    // @internal (undocumented)
-    version: number;
+// @public (undocumented)
+export type BindingBehaviorFactory = {
+    readonly directive: HTMLBindingDirective;
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
+};
+
+// @public (undocumented)
+export interface BindingConfig {
+    // (undocumented)
+    mode: BindingMode;
+    // (undocumented)
+    options: any;
+}
+
+// @public (undocumented)
+export type BindingFactory = new (directive: HTMLBindingDirective) => BindingBehaviorFactory;
+
+// @public (undocumented)
+export interface BindingMode {
+    // (undocumented)
+    attribute?: BindingFactory;
+    // (undocumented)
+    booleanAttribute?: BindingFactory;
+    // (undocumented)
+    content?: BindingFactory;
+    // (undocumented)
+    event?: BindingFactory;
+    // (undocumented)
+    property?: BindingFactory;
+    // (undocumented)
+    tokenList?: BindingFactory;
 }
 
 // @public
@@ -184,6 +183,11 @@ export function customElement(nameOrDef: string | PartialFASTElementDefinition):
 // @public
 export type DecoratorAttributeConfiguration = Omit<AttributeConfiguration, "property">;
 
+// @public (undocumented)
+export type DefaultBindingOptions = {
+    capture?: boolean;
+};
+
 // @public
 export const defaultExecutionContext: ExecutionContext<any, any>;
 
@@ -308,16 +312,24 @@ export type Global = typeof globalThis & {
 // @public
 export function html<TSource = any, TParent = any, TGrandparent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]): ViewTemplate<TSource, TParent, TGrandparent>;
 
-// @public
+// @public (undocumented)
 export class HTMLBindingDirective extends TargetedHTMLDirective {
-    constructor(binding: Binding);
+    constructor(binding: Binding, mode: BindingMode, options: any);
     // (undocumented)
     binding: Binding;
-    createBehavior(targets: ViewBehaviorTargets): BindingBehavior;
+    // (undocumented)
+    cleanedTargetName?: string;
+    // (undocumented)
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
+    // (undocumented)
+    mode: BindingMode;
+    // (undocumented)
+    options: any;
+    // (undocumented)
     targetAtContent(): void;
     get targetName(): string | undefined;
     set targetName(value: string | undefined);
-    }
+}
 
 // @public
 export abstract class HTMLDirective implements ViewBehaviorFactory {
@@ -395,6 +407,9 @@ export interface ObservationRecord {
     propertySource: any;
 }
 
+// @public (undocumented)
+export const oneTime: BindingConfig & ((options?: DefaultBindingOptions) => BindingConfig);
+
 // @public
 export interface PartialFASTElementDefinition {
     readonly attributes?: (AttributeConfiguration | string)[];
@@ -555,6 +570,9 @@ export type TrustedTypesPolicy = {
     createHTML(html: string): string;
 };
 
+// @public (undocumented)
+export const updateView: BindingConfig & ((options?: DefaultBindingOptions) => BindingConfig);
+
 // @public
 export interface ValueConverter {
     fromView(value: any): any;
diff --git a/packages/web-components/fast-element/src/templating/binding.spec.ts b/packages/web-components/fast-element/src/templating/binding.spec.ts
index 5d381d67777..f6e0c1bf8c0 100644
--- a/packages/web-components/fast-element/src/templating/binding.spec.ts
+++ b/packages/web-components/fast-element/src/templating/binding.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { HTMLBindingDirective } from "./binding";
+import { bind, HTMLBindingDirective } from "./binding";
 import { observable, defaultExecutionContext } from "../observation/observable";
 import { DOM } from "../dom";
 import { html, ViewTemplate } from "./template";
@@ -27,7 +27,7 @@ describe("The HTML binding directive", () => {
     }
 
     function contentBinding(propertyName: keyof Model = "value") {
-        const directive = new HTMLBindingDirective(x => x[propertyName]);
+        const directive = bind(x => x[propertyName]) as HTMLBindingDirective;
         directive.targetAtContent();
         directive.targetId = 'r';
 
@@ -39,24 +39,24 @@ describe("The HTML binding directive", () => {
 
         parentNode.appendChild(node);
 
-        return { directive, behavior, node, parentNode };
+        return { directive, behavior, node, parentNode, targets };
     }
 
     context("when binding text content", () => {
         it("initially sets the text of a node", () => {
-            const { behavior, node } = contentBinding();
+            const { behavior, node, targets } = contentBinding();
             const model = new Model("This is a test");
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(node.textContent).to.equal(model.value);
         });
 
         it("updates the text of a node when the expression changes", async () => {
-            const { behavior, node } = contentBinding();
+            const { behavior, node, targets } = contentBinding();
             const model = new Model("This is a test");
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(node.textContent).to.equal(model.value);
 
@@ -70,21 +70,21 @@ describe("The HTML binding directive", () => {
 
     context("when binding template content", () => {
         it("initially inserts a view based on the template", () => {
-            const { behavior, parentNode } = contentBinding();
+            const { behavior, parentNode, targets } = contentBinding();
             const template = html<Model>`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
         });
 
         it("removes an inserted view when the value changes to plain text", async () => {
-            const { behavior, parentNode } = contentBinding();
+            const { behavior, parentNode, targets } = contentBinding();
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
@@ -96,11 +96,11 @@ describe("The HTML binding directive", () => {
         });
 
         it("removes an inserted view when the value changes to null", async () => {
-            const { behavior, parentNode } = contentBinding();
+            const { behavior, parentNode, targets } = contentBinding();
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
@@ -112,11 +112,11 @@ describe("The HTML binding directive", () => {
         });
 
         it("removes an inserted view when the value changes to undefined", async () => {
-            const { behavior, parentNode } = contentBinding();
+            const { behavior, parentNode, targets } = contentBinding();
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
@@ -128,11 +128,11 @@ describe("The HTML binding directive", () => {
         });
 
         it("updates an inserted view when the value changes to a new template", async () => {
-            const { behavior, parentNode } = contentBinding();
+            const { behavior, parentNode, targets } = contentBinding();
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
@@ -145,11 +145,11 @@ describe("The HTML binding directive", () => {
         });
 
         it("reuses a previous view when the value changes back from a string", async () => {
-            const { behavior, parentNode, node } = contentBinding();
+            const { behavior, parentNode, node, targets } = contentBinding();
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             const view = (node as any).$fastView as SyntheticView;
             const capturedTemplate = (node as any).$fastTemplate as ViewTemplate;
@@ -177,11 +177,11 @@ describe("The HTML binding directive", () => {
         });
 
         it("doesn't compose an already composed view", async () => {
-            const { behavior, parentNode } = contentBinding("computedValue");
+            const { behavior, parentNode, targets } = contentBinding("computedValue");
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
@@ -213,37 +213,37 @@ describe("The HTML binding directive", () => {
 
     context("when unbinding template content", () => {
         it("unbinds a composed view", () => {
-            const { behavior, node, parentNode } = contentBinding();
+            const { behavior, node, parentNode, targets } = contentBinding();
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             const newView = (node as any).$fastView as SyntheticView;
             expect(newView.source).to.equal(model);
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
-            behavior.unbind();
+            behavior.unbind(model, defaultExecutionContext, targets);
 
             expect(newView.source).to.equal(null);
         });
 
         it("rebinds a previously unbound composed view", () => {
-            const { behavior, node, parentNode } = contentBinding();
+            const { behavior, node, parentNode, targets } = contentBinding();
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             const view = (node as any).$fastView as SyntheticView;
             expect(view.source).to.equal(model);
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
-            behavior.unbind();
+            behavior.unbind(model, defaultExecutionContext, targets);
 
             expect(view.source).to.equal(null);
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, defaultExecutionContext, targets);
 
             const newView = (node as any).$fastView as SyntheticView;
             expect(newView.source).to.equal(model);
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index fa619a40105..ef18d8a6044 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,5 +1,5 @@
 import { DOM } from "../dom";
-import type { Behavior } from "../observation/behavior";
+import type { Constructable } from "../interfaces";
 import {
     Binding,
     BindingObserver,
@@ -7,200 +7,428 @@ import {
     Observable,
     setCurrentEvent,
 } from "../observation/observable";
-import { ViewBehaviorTargets, TargetedHTMLDirective } from "./html-directive";
+import {
+    TargetedHTMLDirective,
+    ViewBehavior,
+    ViewBehaviorTargets,
+} from "./html-directive";
+import type { CaptureType } from "./template";
 import type { SyntheticView } from "./view";
 
-function normalBind(
-    this: BindingBehavior,
-    source: unknown,
-    context: ExecutionContext
-): void {
-    this.source = source;
-    this.context = context;
-
-    if (this.bindingObserver === null) {
-        this.bindingObserver = Observable.binding(
-            this.binding,
-            this,
-            this.isBindingVolatile
-        );
-    }
+export type BindingBehaviorFactory = {
+    readonly directive: HTMLBindingDirective;
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
+};
 
-    this.handleChange();
+export type BindingFactory = new (
+    directive: HTMLBindingDirective
+) => BindingBehaviorFactory;
+
+export interface BindingMode {
+    attribute?: BindingFactory;
+    booleanAttribute?: BindingFactory;
+    property?: BindingFactory;
+    content?: BindingFactory;
+    tokenList?: BindingFactory;
+    event?: BindingFactory;
 }
 
-function triggerBind(
-    this: BindingBehavior,
-    source: unknown,
-    context: ExecutionContext
-): void {
-    this.source = source;
-    this.context = context;
-    this.target.addEventListener(this.targetName!, this);
+export interface BindingConfig {
+    mode: BindingMode;
+    options: any;
 }
 
-function normalUnbind(this: BindingBehavior): void {
-    this.bindingObserver!.disconnect();
-    this.source = null;
-    this.context = null;
-    this.value = null;
+interface ViewBinding extends BindingBehaviorFactory, ViewBehavior {
+    updateTarget(target: Node, value: any, source: any, context: ExecutionContext): void;
 }
 
-type ComposableView = SyntheticView & {
-    isComposed?: boolean;
-    needsBindOnly?: boolean;
-};
+abstract class ViewSetBinding implements ViewBinding {
+    constructor(public readonly directive: HTMLBindingDirective) {}
 
-function contentUnbind(this: BindingBehavior): void {
-    normalUnbind.call(this);
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
+        const target = targets[this.directive.targetId];
+        this.updateTarget(
+            target,
+            this.directive.binding(source, context),
+            source,
+            context
+        );
+    }
 
-    const view = this.target.$fastView as ComposableView;
+    unbind(): void {}
 
-    if (view !== void 0 && view.isComposed) {
-        view.unbind();
-        view.needsBindOnly = true;
+    createBehavior(): ViewBehavior {
+        return this;
     }
+
+    abstract updateTarget(
+        target: Node,
+        value: any,
+        source: any,
+        context: ExecutionContext
+    ): void;
 }
 
-function triggerUnbind(this: BindingBehavior): void {
-    this.target.removeEventListener(this.targetName!, this);
-    this.source = null;
-    this.context = null;
+abstract class ViewUpdateBinding implements ViewBinding {
+    private isBindingVolatile: boolean;
+
+    constructor(public readonly directive: HTMLBindingDirective) {
+        this.isBindingVolatile = Observable.isVolatileBinding(directive.binding);
+    }
+
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
+        const target = targets[this.directive.targetId];
+        const observer: BindingObserver =
+            target[this.directive.targetId] ??
+            (target[this.directive.targetId] = Observable.binding(
+                this.directive.binding,
+                this,
+                this.isBindingVolatile
+            ));
+
+        (observer as any).target = target;
+        (observer as any).source = source;
+        (observer as any).context = context;
+
+        this.updateTarget(target, observer.observe(source, context), source, context);
+    }
+
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
+        const target = targets[this.directive.targetId];
+        const observer = target[this.directive.targetId];
+        observer.disconnect();
+        observer.target = null;
+        observer.source = null;
+        observer.context = null;
+    }
+
+    /** @internal */
+    public handleChange(observer: BindingObserver): void {
+        const target = (observer as any).target;
+        const source = (observer as any).source;
+        const context = (observer as any).context;
+        this.updateTarget(target, observer.observe(source, context!), source, context);
+    }
+
+    abstract updateTarget(
+        target: Node,
+        value: any,
+        source: any,
+        context: ExecutionContext
+    ): void;
+
+    createBehavior(): ViewBehavior {
+        return this;
+    }
 }
 
-function updateAttributeTarget(this: BindingBehavior, value: unknown): void {
-    DOM.setAttribute(this.target, this.targetName!, value);
+function createPropertyBindingFactory<
+    T extends Constructable<BindingFactory & ViewBinding>
+>(BindingBase: T): BindingFactory {
+    return class extends BindingBase {
+        updateTarget(target: Node, value: any): void {
+            target[this.directive.cleanedTargetName!] = value;
+        }
+    };
 }
 
-function updateBooleanAttributeTarget(this: BindingBehavior, value: unknown): void {
-    DOM.setBooleanAttribute(this.target, this.targetName!, value as boolean);
+function createAttributeBindingFactory<
+    T extends Constructable<BindingFactory & ViewBinding>
+>(BindingBase: T): BindingFactory {
+    return class extends BindingBase {
+        updateTarget(target: Node, value: any): void {
+            DOM.setAttribute(
+                target as HTMLElement,
+                this.directive.cleanedTargetName!,
+                value
+            );
+        }
+    };
 }
 
-function updateContentTarget(this: BindingBehavior, value: any): void {
-    // If there's no actual value, then this equates to the
-    // empty string for the purposes of content bindings.
-    if (value === null || value === undefined) {
-        value = "";
-    }
+function createBooleanAttributeBindingFactory<
+    T extends Constructable<BindingFactory & ViewBinding>
+>(BindingBase: T): BindingFactory {
+    return class extends BindingBase {
+        updateTarget(target: Node, value: any): void {
+            DOM.setBooleanAttribute(
+                target as HTMLElement,
+                this.directive.cleanedTargetName!,
+                value as boolean
+            );
+        }
+    };
+}
 
-    // If the value has a "create" method, then it's a template-like.
-    if (value.create) {
-        this.target.textContent = "";
-        let view = this.target.$fastView as ComposableView;
-
-        // If there's no previous view that we might be able to
-        // reuse then create a new view from the template.
-        if (view === void 0) {
-            view = value.create() as SyntheticView;
-        } else {
-            // If there is a previous view, but it wasn't created
-            // from the same template as the new value, then we
-            // need to remove the old view if it's still in the DOM
-            // and create a new view from the template.
-            if (this.target.$fastTemplate !== value) {
-                if (view.isComposed) {
-                    view.remove();
-                    view.unbind();
+function createTokenListBindingFactory<T extends Constructable<ViewBinding>>(
+    BindingBase: T
+): BindingFactory {
+    class TokenListBinding extends BindingBase {
+        classVersions = Object.create(null);
+        version = 0;
+
+        updateTarget(target: Element, value: any): void {
+            const classVersions = this.classVersions;
+            const tokenList = target[this.directive.cleanedTargetName!] as DOMTokenList;
+            let version = this.version;
+
+            // Add the classes, tracking the version at which they were added.
+            if (value !== null && value !== undefined && value.length) {
+                const names = value.split(/\s+/);
+
+                for (let i = 0, ii = names.length; i < ii; ++i) {
+                    const currentName = names[i];
+
+                    if (currentName === "") {
+                        continue;
+                    }
+
+                    classVersions[currentName] = version;
+                    tokenList.add(currentName);
                 }
+            }
 
-                view = value.create() as SyntheticView;
+            this.classVersions = classVersions;
+            this.version = version + 1;
+
+            // If this is the first call to add classes, there's no need to remove old ones.
+            if (version === 0) {
+                return;
+            }
+
+            // Remove classes from the previous version.
+            version -= 1;
+
+            for (const name in classVersions) {
+                if (classVersions[name] === version) {
+                    tokenList.remove(name);
+                }
             }
         }
+    }
 
-        // It's possible that the value is the same as the previous template
-        // and that there's actually no need to compose it.
-        if (!view.isComposed) {
-            view.isComposed = true;
-            view.bind(this.source, this.context!);
-            view.insertBefore(this.target);
-            this.target.$fastView = view;
-            this.target.$fastTemplate = value;
-        } else if (view.needsBindOnly) {
-            view.needsBindOnly = false;
-            view.bind(this.source, this.context!);
+    return class implements BindingBehaviorFactory {
+        constructor(public directive: HTMLBindingDirective) {}
+        createBehavior() {
+            return new TokenListBinding(this.directive);
         }
-    } else {
-        const view = this.target.$fastView as ComposableView;
+    };
+}
 
-        // If there is a view and it's currently composed into
-        // the DOM, then we need to remove it.
-        if (view !== void 0 && view.isComposed) {
-            view.isComposed = false;
-            view.remove();
+type ComposableView = SyntheticView & {
+    isComposed?: boolean;
+    needsBindOnly?: boolean;
+};
 
-            if (view.needsBindOnly) {
-                view.needsBindOnly = false;
-            } else {
+type ContentTarget = Node & {
+    $fastView?: ComposableView;
+    $fastTemplate?: { create(): SyntheticView };
+};
+
+function createContentBindingFactory<
+    T extends Constructable<BindingFactory & ViewBinding>
+>(BindingBase: T): BindingFactory {
+    return class extends BindingBase {
+        unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets) {
+            super.unbind(source, context, targets);
+
+            const target = targets[this.directive.targetId] as ContentTarget;
+            const view = target.$fastView as ComposableView;
+
+            if (view !== void 0 && view.isComposed) {
                 view.unbind();
+                view.needsBindOnly = true;
             }
         }
 
-        this.target.textContent = value;
-    }
-}
+        updateTarget(
+            target: ContentTarget,
+            value: any,
+            source: any,
+            context: ExecutionContext
+        ): void {
+            // If there's no actual value, then this equates to the
+            // empty string for the purposes of content bindings.
+            if (value === null || value === undefined) {
+                value = "";
+            }
 
-function updatePropertyTarget(this: BindingBehavior, value: unknown): void {
-    this.target[this.targetName!] = value;
-}
+            // If the value has a "create" method, then it's a template-like.
+            if (value.create) {
+                target.textContent = "";
+                let view = target.$fastView as ComposableView;
+
+                // If there's no previous view that we might be able to
+                // reuse then create a new view from the template.
+                if (view === void 0) {
+                    view = value.create() as SyntheticView;
+                } else {
+                    // If there is a previous view, but it wasn't created
+                    // from the same template as the new value, then we
+                    // need to remove the old view if it's still in the DOM
+                    // and create a new view from the template.
+                    if (target.$fastTemplate !== value) {
+                        if (view.isComposed) {
+                            view.remove();
+                            view.unbind();
+                        }
+
+                        view = value.create() as SyntheticView;
+                    }
+                }
 
-function updateClassListTarget(this: BindingBehavior, value: string): void {
-    const classVersions = this.classVersions || Object.create(null);
-    const target = this.target;
-    let version = this.version || 0;
+                // It's possible that the value is the same as the previous template
+                // and that there's actually no need to compose it.
+                if (!view.isComposed) {
+                    view.isComposed = true;
+                    view.bind(source, context!);
+                    view.insertBefore(target);
+                    target.$fastView = view;
+                    target.$fastTemplate = value;
+                } else if (view.needsBindOnly) {
+                    view.needsBindOnly = false;
+                    view.bind(source, context!);
+                }
+            } else {
+                const view = target.$fastView as ComposableView;
 
-    // Add the classes, tracking the version at which they were added.
-    if (value !== null && value !== undefined && value.length) {
-        const names = value.split(/\s+/);
+                // If there is a view and it's currently composed into
+                // the DOM, then we need to remove it.
+                if (view !== void 0 && view.isComposed) {
+                    view.isComposed = false;
+                    view.remove();
 
-        for (let i = 0, ii = names.length; i < ii; ++i) {
-            const currentName = names[i];
+                    if (view.needsBindOnly) {
+                        view.needsBindOnly = false;
+                    } else {
+                        view.unbind();
+                    }
+                }
 
-            if (currentName === "") {
-                continue;
+                target.textContent = value;
             }
-
-            classVersions[currentName] = version;
-            target.classList.add(currentName);
         }
-    }
+    };
+}
 
-    this.classVersions = classVersions;
-    this.version = version + 1;
+class EventListener implements BindingBehaviorFactory {
+    constructor(public directive: HTMLBindingDirective) {}
 
-    // If this is the first call to add classes, there's no need to remove old ones.
-    if (version === 0) {
-        return;
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
+        const target = targets[this.directive.targetId] as any;
+        target.$fastSource = source;
+        target.$fastContext = context;
+        target.addEventListener(
+            this.directive.cleanedTargetName!,
+            this,
+            this.directive.options
+        );
     }
 
-    // Remove classes from the previous version.
-    version -= 1;
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
+        const target = targets[this.directive.targetId] as any;
+        target.$fastSource = null;
+        target.$fastContext = null;
+        target.removeEventListener(
+            this.directive.cleanedTargetName!,
+            this,
+            this.directive.options
+        );
+    }
+
+    handleEvent(event: Event): void {
+        const target = event.currentTarget as any;
+        const source = target.$fastSource;
+        const context = target.$fastContext;
+
+        setCurrentEvent(event);
+        const result = this.directive.binding(source, context);
+        setCurrentEvent(null);
 
-    for (const name in classVersions) {
-        if (classVersions[name] === version) {
-            target.classList.remove(name);
+        if (result !== true) {
+            event.preventDefault();
         }
     }
+
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
+        return this;
+    }
+}
+
+class OneTimeEventListener extends EventListener {
+    handleEvent(event: Event) {
+        super.handleEvent(event);
+        const target = event.currentTarget as any;
+        target.$fastSource = null;
+        target.$fastContext = null;
+        target.removeEventListener(
+            this.directive.cleanedTargetName!,
+            this,
+            this.directive.options
+        );
+    }
 }
 
-/**
- * A directive that configures data binding to element content and attributes.
- * @public
- */
+export type DefaultBindingOptions = {
+    capture?: boolean;
+};
+
+const defaultBindingOptions: DefaultBindingOptions = {
+    capture: false,
+};
+
+export const updateView: BindingConfig &
+    ((options?: DefaultBindingOptions) => BindingConfig) = (
+    options: DefaultBindingOptions
+): BindingConfig => {
+    return {
+        mode: updateView.mode,
+        options: Object.assign({}, defaultBindingOptions, options),
+    };
+};
+
+updateView.options = defaultBindingOptions;
+updateView.mode = Object.freeze({
+    attribute: createAttributeBindingFactory(ViewUpdateBinding as any),
+    booleanAttribute: createBooleanAttributeBindingFactory(ViewUpdateBinding as any),
+    property: createPropertyBindingFactory(ViewUpdateBinding as any),
+    content: createContentBindingFactory(ViewUpdateBinding as any),
+    tokenList: createTokenListBindingFactory(ViewUpdateBinding as any),
+    event: EventListener,
+});
+
+export const oneTime: BindingConfig &
+    ((options?: DefaultBindingOptions) => BindingConfig) = (
+    options: DefaultBindingOptions
+): BindingConfig => {
+    return {
+        mode: oneTime.mode,
+        options: Object.assign({}, defaultBindingOptions, options),
+    };
+};
+
+oneTime.options = defaultBindingOptions;
+oneTime.mode = Object.freeze({
+    attribute: createAttributeBindingFactory(ViewSetBinding as any),
+    booleanAttribute: createBooleanAttributeBindingFactory(ViewSetBinding as any),
+    property: createPropertyBindingFactory(ViewSetBinding as any),
+    content: createContentBindingFactory(ViewSetBinding as any),
+    tokenList: createTokenListBindingFactory(ViewSetBinding as any),
+    event: OneTimeEventListener,
+});
+
 export class HTMLBindingDirective extends TargetedHTMLDirective {
-    private cleanedTargetName?: string;
     private originalTargetName?: string;
-    private bind: typeof normalBind = normalBind;
-    private unbind: typeof normalUnbind = normalUnbind;
-    private updateTarget: typeof updateAttributeTarget = updateAttributeTarget;
-    private isBindingVolatile: boolean;
+    private factory!: BindingBehaviorFactory;
 
-    /**
-     * Creates an instance of BindingDirective.
-     * @param binding - A binding that returns the data used to update the DOM.
-     */
-    public constructor(public binding: Binding) {
+    public cleanedTargetName?: string;
+
+    public constructor(
+        public binding: Binding,
+        public mode: BindingMode,
+        public options: any
+    ) {
         super();
-        this.isBindingVolatile = Observable.isVolatileBinding(this.binding);
     }
 
     /**
@@ -226,163 +454,54 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
                         const binding = this.binding;
                         /* eslint-disable-next-line */
                         this.binding = (s, c) => DOM.createHTML(binding(s, c));
-                        this.updateTarget = updatePropertyTarget;
+                        this.factory = new this.mode.property!(this);
                         break;
                     case "classList":
-                        this.updateTarget = updateClassListTarget;
+                        this.factory = new this.mode.tokenList!(this);
                         break;
                     default:
-                        this.updateTarget = updatePropertyTarget;
+                        this.factory = new this.mode.property!(this);
                         break;
                 }
                 break;
             case "?":
                 this.cleanedTargetName = value.substr(1);
-                this.updateTarget = updateBooleanAttributeTarget;
+                this.factory = new this.mode.booleanAttribute!(this);
                 break;
             case "@":
                 this.cleanedTargetName = value.substr(1);
-                this.bind = triggerBind;
-                this.unbind = triggerUnbind;
+                this.factory = new this.mode.event!(this);
                 break;
             default:
                 this.cleanedTargetName = value;
 
                 if (value === "class") {
                     this.cleanedTargetName = "className";
-                    this.updateTarget = updatePropertyTarget;
+                    this.factory = new this.mode.property!(this);
+                } else {
+                    this.factory = new this.mode.attribute!(this);
                 }
 
                 break;
         }
     }
 
-    /**
-     * Makes this binding target the content of an element rather than
-     * a particular attribute or property.
-     */
     public targetAtContent(): void {
-        this.updateTarget = updateContentTarget;
-        this.unbind = contentUnbind;
+        this.factory = new this.mode.content!(this);
     }
 
-    /**
-     * Creates the runtime BindingBehavior instance based on the configuration
-     * information stored in the BindingDirective.
-     * @param target - The target node that the binding behavior should attach to.
-     */
-    createBehavior(targets: ViewBehaviorTargets): BindingBehavior {
-        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-        return new BindingBehavior(
-            targets[this.targetId],
-            this.binding,
-            this.isBindingVolatile,
-            this.bind,
-            this.unbind,
-            this.updateTarget,
-            this.cleanedTargetName
-        );
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
+        return this.factory.createBehavior(targets);
     }
 }
 
-/**
- * A behavior that updates content and attributes based on a configured
- * BindingDirective.
- * @public
- */
-export class BindingBehavior implements Behavior {
-    /** @internal */
-    public value: any = null;
-
-    /** @internal */
-    public source: unknown = null;
-
-    /** @internal */
-    public context: ExecutionContext | null = null;
-
-    /** @internal */
-    public bindingObserver: BindingObserver | null = null;
-
-    /** @internal */
-    public classVersions: Record<string, number>;
-
-    /** @internal */
-    public version: number;
-
-    /** @internal */
-    public target: any;
-
-    /** @internal */
-    public binding: Binding;
-
-    /** @internal */
-    public isBindingVolatile: boolean;
-
-    /** @internal */
-    public updateTarget: typeof updatePropertyTarget;
-
-    /** @internal */
-    public targetName?: string;
-
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     */
-    public bind: typeof normalBind;
-
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    public unbind: typeof normalUnbind;
-
-    /**
-     * Creates an instance of BindingBehavior.
-     * @param target - The target of the data updates.
-     * @param binding - The binding that returns the latest value for an update.
-     * @param isBindingVolatile - Indicates whether the binding has volatile dependencies.
-     * @param bind - The operation to perform during binding.
-     * @param unbind - The operation to perform during unbinding.
-     * @param updateTarget - The operation to perform when updating.
-     * @param targetName - The name of the target attribute or property to update.
-     */
-    public constructor(
-        target: any,
-        binding: Binding,
-        isBindingVolatile: boolean,
-        bind: typeof normalBind,
-        unbind: typeof normalUnbind,
-        updateTarget: typeof updatePropertyTarget,
-        targetName?: string
-    ) {
-        this.target = target;
-        this.binding = binding;
-        this.isBindingVolatile = isBindingVolatile;
-        this.bind = bind;
-        this.unbind = unbind;
-        this.updateTarget = updateTarget;
-        this.targetName = targetName;
-    }
-
-    /** @internal */
-    public handleChange(): void {
-        const newValue = this.bindingObserver!.observe(this.source, this.context!);
-
-        if (this.value !== newValue) {
-            this.value = newValue;
-            this.updateTarget(newValue);
-        }
+export function bind<T = any>(
+    binding: Binding,
+    config: BindingConfig | DefaultBindingOptions = updateView
+): CaptureType<T> {
+    if (!("mode" in config)) {
+        config = updateView(config);
     }
 
-    /** @internal */
-    public handleEvent(event: Event): void {
-        setCurrentEvent(event);
-        const result = this.binding(this.source, this.context!);
-        setCurrentEvent(null);
-
-        if (result !== true) {
-            event.preventDefault();
-        }
-    }
+    return new HTMLBindingDirective(binding, config.mode, config.options);
 }
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index 4e80842363f..cfeca6b29be 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -5,7 +5,7 @@ import { defaultExecutionContext } from "../observation/observable";
 import { css } from "../styles/css";
 import type { StyleTarget } from "../styles/element-styles";
 import { toHTML, uniqueElementName } from "../__test__/helpers";
-import { HTMLBindingDirective } from "./binding";
+import { bind, HTMLBindingDirective } from "./binding";
 import { compileTemplate } from "./compiler";
 import type { HTMLDirective } from "./html-directive";
 import { html } from "./template";
@@ -22,7 +22,7 @@ describe("The template compiler", () => {
     }
 
     function binding(result = "result") {
-        return new HTMLBindingDirective(() => result);
+        return bind(() => result) as HTMLBindingDirective;
     }
 
     const scope = {};
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 31dc22cc3a1..6b21959740b 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,8 +1,9 @@
 import type { ViewBehaviorTargets } from "./html-directive";
 import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
 import type { Binding, ExecutionContext } from "../observation/observable";
-import { HTMLBindingDirective } from "./binding";
+import { bind, HTMLBindingDirective } from "./binding";
 import type { HTMLDirective, ViewBehaviorFactory } from "./html-directive";
+import { oneTime } from "..";
 
 type InlineDirective = HTMLDirective & {
     targetName?: string;
@@ -161,7 +162,7 @@ function createAggregateBinding(
         return output;
     };
 
-    const directive = new HTMLBindingDirective(binding);
+    const directive = bind(binding) as HTMLBindingDirective;
     directive.targetName = targetName;
     return directive;
 }
@@ -219,7 +220,7 @@ function compileAttributes(
 
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = new HTMLBindingDirective(() => attrValue);
+                result = bind(() => attrValue, oneTime) as HTMLBindingDirective;
                 result.targetName = attr.name;
             }
         } else {
diff --git a/packages/web-components/fast-element/src/templating/template.spec.ts b/packages/web-components/fast-element/src/templating/template.spec.ts
index c81a1d13530..6cfa93e2abf 100644
--- a/packages/web-components/fast-element/src/templating/template.spec.ts
+++ b/packages/web-components/fast-element/src/templating/template.spec.ts
@@ -3,7 +3,7 @@ import { html, ViewTemplate } from "./template";
 import { DOM } from "../dom";
 import { HTMLBindingDirective } from "./binding";
 import { HTMLDirective, TargetedHTMLDirective } from "./html-directive";
-import type { ViewBehaviorTargets } from "..";
+import { bind, ViewBehaviorTargets } from "..";
 
 describe(`The html tag template helper`, () => {
     it(`transforms a string into a ViewTemplate.`, () => {
@@ -217,7 +217,7 @@ describe(`The html tag template helper`, () => {
     });
 
     it(`captures a case-sensitive property name when used with a binding`, () => {
-        const template = html<Model>`<my-element :someAttribute=${new HTMLBindingDirective(x => x.value)}></my-element>`;
+        const template = html<Model>`<my-element :someAttribute=${bind(x => x.value)}></my-element>`;
         const placeholder = DOM.createInterpolationPlaceholder(0);
 
         expect(template.html).to.equal(
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 3157a0a7dc7..350cadfe9be 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -4,7 +4,7 @@ import { compileTemplate } from "./compiler";
 import type { HTMLTemplateCompilationResult } from "./compiler";
 import { ElementView, HTMLView, SyntheticView } from "./view";
 import { HTMLDirective, TargetedHTMLDirective } from "./html-directive";
-import { HTMLBindingDirective } from "./binding";
+import { bind } from "./binding";
 
 /**
  * A template capable of creating views specifically for rendering custom elements.
@@ -182,7 +182,7 @@ export function html<TSource = any, TParent = any, TGrandparent = any>(
         }
 
         if (typeof value === "function") {
-            value = new HTMLBindingDirective(value as Binding);
+            value = bind(value as Binding);
         }
 
         if (value instanceof TargetedHTMLDirective) {

From abf54c7fcda77695b9b6252d34fd18dd5f8c1254 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Wed, 20 Oct 2021 17:59:00 -0400
Subject: [PATCH 030/135] fix: correct handle change signature for content
 binding

---
 packages/web-components/fast-element/src/templating/binding.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index ef18d8a6044..8332e78cfd7 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -103,7 +103,7 @@ abstract class ViewUpdateBinding implements ViewBinding {
     }
 
     /** @internal */
-    public handleChange(observer: BindingObserver): void {
+    public handleChange(binding: Binding, observer: BindingObserver): void {
         const target = (observer as any).target;
         const source = (observer as any).source;
         const context = (observer as any).context;

From e4a1548ac64e2d451302e3e9c45f389664570ac0 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 21 Oct 2021 21:49:26 -0400
Subject: [PATCH 031/135] feat: enable interpolating non-strings as one time
 bindings in templates

---
 .../fast-element/docs/api-report.md           |  2 +-
 .../src/templating/template.spec.ts           | 54 +++++++++++--------
 .../fast-element/src/templating/template.ts   | 37 ++++++-------
 3 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 8ed280b7e09..4fb56954272 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -558,7 +558,7 @@ export abstract class TargetedHTMLDirective extends HTMLDirective {
 }
 
 // @public
-export type TemplateValue<TSource, TParent = any> = Binding<TSource, any, TParent> | string | number | HTMLDirective | CaptureType<TSource>;
+export type TemplateValue<TSource, TParent = any> = Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource>;
 
 // @public
 export type TrustedTypes = {
diff --git a/packages/web-components/fast-element/src/templating/template.spec.ts b/packages/web-components/fast-element/src/templating/template.spec.ts
index 6cfa93e2abf..6db413bc341 100644
--- a/packages/web-components/fast-element/src/templating/template.spec.ts
+++ b/packages/web-components/fast-element/src/templating/template.spec.ts
@@ -51,19 +51,19 @@ describe(`The html tag template helper`, () => {
             type: "number",
             location: "at the beginning",
             template: html`${numberValue} end`,
-            result: `${numberValue} end`,
+            result: `${DOM.createInterpolationPlaceholder(0)} end`,
         },
         {
             type: "number",
             location: "in the middle",
             template: html`beginning ${numberValue} end`,
-            result: `beginning ${numberValue} end`,
+            result: `beginning ${DOM.createInterpolationPlaceholder(0)} end`,
         },
         {
             type: "number",
             location: "at the end",
             template: html`beginning ${numberValue}`,
-            result: `beginning ${numberValue}`,
+            result: `beginning ${DOM.createInterpolationPlaceholder(0)}`,
         },
         // expression interpolation
         {
@@ -136,58 +136,70 @@ describe(`The html tag template helper`, () => {
             type: "mixed, back-to-back string, number, expression, and directive",
             location: "at the beginning",
             template: html<Model>`${stringValue}${numberValue}${x => x.value}${new TestDirective()} end`,
-            result: `${stringValue}${numberValue}${DOM.createInterpolationPlaceholder(
+            result: `${stringValue}${DOM.createInterpolationPlaceholder(
                 0
-            )}${DOM.createBlockPlaceholder(1)} end`,
-            expectDirectives: [HTMLBindingDirective, TestDirective],
+            )}${DOM.createInterpolationPlaceholder(
+                1
+            )}${DOM.createBlockPlaceholder(2)} end`,
+            expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
             type: "mixed, back-to-back string, number, expression, and directive",
             location: "in the middle",
             template: html<Model>`beginning ${stringValue}${numberValue}${x => x.value}${new TestDirective()} end`,
-            result: `beginning ${stringValue}${numberValue}${DOM.createInterpolationPlaceholder(
+            result: `beginning ${stringValue}${DOM.createInterpolationPlaceholder(
                 0
-            )}${DOM.createBlockPlaceholder(1)} end`,
-            expectDirectives: [HTMLBindingDirective, TestDirective],
+            )}${DOM.createInterpolationPlaceholder(
+                1
+            )}${DOM.createBlockPlaceholder(2)} end`,
+            expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
             type: "mixed, back-to-back string, number, expression, and directive",
             location: "at the end",
             template: html<Model>`beginning ${stringValue}${numberValue}${x => x.value}${new TestDirective()}`,
-            result: `beginning ${stringValue}${numberValue}${DOM.createInterpolationPlaceholder(
+            result: `beginning ${stringValue}${DOM.createInterpolationPlaceholder(
                 0
-            )}${DOM.createBlockPlaceholder(1)}`,
-            expectDirectives: [HTMLBindingDirective, TestDirective],
+            )}${DOM.createInterpolationPlaceholder(
+                1
+            )}${DOM.createBlockPlaceholder(2)}`,
+            expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
             type: "mixed, separated string, number, expression, and directive",
             location: "at the beginning",
             template: html<Model>`${stringValue}separator${numberValue}separator${x =>
                     x.value}separator${new TestDirective()} end`,
-            result: `${stringValue}separator${numberValue}separator${DOM.createInterpolationPlaceholder(
+            result: `${stringValue}separator${DOM.createInterpolationPlaceholder(
                 0
-            )}separator${DOM.createBlockPlaceholder(1)} end`,
-            expectDirectives: [HTMLBindingDirective, TestDirective],
+            )}separator${DOM.createInterpolationPlaceholder(
+                1
+            )}separator${DOM.createBlockPlaceholder(2)} end`,
+            expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
             type: "mixed, separated string, number, expression, and directive",
             location: "in the middle",
             template: html<Model>`beginning ${stringValue}separator${numberValue}separator${x =>
                     x.value}separator${new TestDirective()} end`,
-            result: `beginning ${stringValue}separator${numberValue}separator${DOM.createInterpolationPlaceholder(
+            result: `beginning ${stringValue}separator${DOM.createInterpolationPlaceholder(
                 0
-            )}separator${DOM.createBlockPlaceholder(1)} end`,
-            expectDirectives: [HTMLBindingDirective, TestDirective],
+            )}separator${DOM.createInterpolationPlaceholder(
+                1
+            )}separator${DOM.createBlockPlaceholder(2)} end`,
+            expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
             type: "mixed, separated string, number, expression, and directive",
             location: "at the end",
             template: html<Model>`beginning ${stringValue}separator${numberValue}separator${x =>
                     x.value}separator${new TestDirective()}`,
-            result: `beginning ${stringValue}separator${numberValue}separator${DOM.createInterpolationPlaceholder(
+            result: `beginning ${stringValue}separator${DOM.createInterpolationPlaceholder(
                 0
-            )}separator${DOM.createBlockPlaceholder(1)}`,
-            expectDirectives: [HTMLBindingDirective, TestDirective],
+            )}separator${DOM.createInterpolationPlaceholder(
+                1
+            )}separator${DOM.createBlockPlaceholder(2)}`,
+            expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
     ];
 
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 350cadfe9be..0d706e7bab7 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -4,7 +4,7 @@ import { compileTemplate } from "./compiler";
 import type { HTMLTemplateCompilationResult } from "./compiler";
 import { ElementView, HTMLView, SyntheticView } from "./view";
 import { HTMLDirective, TargetedHTMLDirective } from "./html-directive";
-import { bind } from "./binding";
+import { bind, oneTime } from "./binding";
 
 /**
  * A template capable of creating views specifically for rendering custom elements.
@@ -149,8 +149,6 @@ export interface CaptureType<TSource> {}
  */
 export type TemplateValue<TSource, TParent = any> =
     | Binding<TSource, any, TParent>
-    | string
-    | number
     | HTMLDirective
     | CaptureType<TSource>;
 
@@ -172,34 +170,33 @@ export function html<TSource = any, TParent = any, TGrandparent = any>(
 
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         const currentString = strings[i];
-        let value = values[i];
+        let currentValue = values[i];
+        const valueType = typeof currentValue;
 
         html += currentString;
 
-        if (value instanceof ViewTemplate) {
-            const template = value;
-            value = (): ViewTemplate => template;
+        if (valueType === "function") {
+            currentValue = bind(currentValue as Binding);
+        } else if (valueType !== "string" && !(currentValue instanceof HTMLDirective)) {
+            const capturedValue = currentValue;
+            currentValue = bind(() => capturedValue, oneTime);
         }
 
-        if (typeof value === "function") {
-            value = bind(value as Binding);
-        }
-
-        if (value instanceof TargetedHTMLDirective) {
-            const match = lastAttributeNameRegex.exec(currentString);
-            if (match !== null) {
-                value.targetName = match[2];
+        if (currentValue instanceof HTMLDirective) {
+            if (currentValue instanceof TargetedHTMLDirective) {
+                const match = lastAttributeNameRegex.exec(currentString);
+                if (match !== null) {
+                    currentValue.targetName = match[2];
+                }
             }
-        }
 
-        if (value instanceof HTMLDirective) {
             // Since not all values are directives, we can't use i
             // as the index for the placeholder. Instead, we need to
             // use directives.length to get the next index.
-            html += value.createPlaceholder(directives.length);
-            directives.push(value);
+            html += currentValue.createPlaceholder(directives.length);
+            directives.push(currentValue);
         } else {
-            html += value;
+            html += currentValue;
         }
     }
 

From 68d575605e011f88104bd4a9a27b0623bcdc2be1 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 21 Oct 2021 21:59:47 -0400
Subject: [PATCH 032/135] refactor: remove duplication in one time event

---
 .../fast-element/src/templating/binding.ts    | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 8332e78cfd7..0ceb3b4ae3f 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -311,11 +311,16 @@ function createContentBindingFactory<
     };
 }
 
+type FASTEventSource = Node & {
+    $fastSource: any;
+    $fastContext: ExecutionContext | null;
+};
+
 class EventListener implements BindingBehaviorFactory {
     constructor(public directive: HTMLBindingDirective) {}
 
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        const target = targets[this.directive.targetId] as any;
+        const target = targets[this.directive.targetId] as FASTEventSource;
         target.$fastSource = source;
         target.$fastContext = context;
         target.addEventListener(
@@ -326,7 +331,10 @@ class EventListener implements BindingBehaviorFactory {
     }
 
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        const target = targets[this.directive.targetId] as any;
+        this.removeEventListener(targets[this.directive.targetId] as FASTEventSource);
+    }
+
+    protected removeEventListener(target: FASTEventSource) {
         target.$fastSource = null;
         target.$fastContext = null;
         target.removeEventListener(
@@ -358,14 +366,7 @@ class EventListener implements BindingBehaviorFactory {
 class OneTimeEventListener extends EventListener {
     handleEvent(event: Event) {
         super.handleEvent(event);
-        const target = event.currentTarget as any;
-        target.$fastSource = null;
-        target.$fastContext = null;
-        target.removeEventListener(
-            this.directive.cleanedTargetName!,
-            this,
-            this.directive.options
-        );
+        this.removeEventListener(event.currentTarget as FASTEventSource);
     }
 }
 

From 84661eeb6c127a321f48ccb0da41dd9ce929676f Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 21 Oct 2021 23:31:22 -0400
Subject: [PATCH 033/135] refactor: reduce some duplication when creating
 binding configs

---
 .../fast-element/docs/api-report.md           |  4 +-
 .../fast-element/src/templating/binding.ts    | 61 ++++++++-----------
 2 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 4fb56954272..c79024f6700 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -408,7 +408,7 @@ export interface ObservationRecord {
 }
 
 // @public (undocumented)
-export const oneTime: BindingConfig & ((options?: DefaultBindingOptions) => BindingConfig);
+export const oneTime: BindingConfig & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
 
 // @public
 export interface PartialFASTElementDefinition {
@@ -571,7 +571,7 @@ export type TrustedTypesPolicy = {
 };
 
 // @public (undocumented)
-export const updateView: BindingConfig & ((options?: DefaultBindingOptions) => BindingConfig);
+export const updateView: BindingConfig & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
 
 // @public
 export interface ValueConverter {
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 0ceb3b4ae3f..0dca3ec2e86 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -378,45 +378,34 @@ const defaultBindingOptions: DefaultBindingOptions = {
     capture: false,
 };
 
-export const updateView: BindingConfig &
-    ((options?: DefaultBindingOptions) => BindingConfig) = (
-    options: DefaultBindingOptions
-): BindingConfig => {
-    return {
-        mode: updateView.mode,
-        options: Object.assign({}, defaultBindingOptions, options),
+function createBindingConfig<T extends Constructable<BindingFactory & ViewBinding>>(
+    BindingBase: T,
+    EventListener: Constructable<EventListener>
+) {
+    const config: BindingConfig & ((options?: DefaultBindingOptions) => BindingConfig) = (
+        options: DefaultBindingOptions
+    ): BindingConfig => {
+        return {
+            mode: config.mode,
+            options: Object.assign({}, defaultBindingOptions, options),
+        };
     };
-};
 
-updateView.options = defaultBindingOptions;
-updateView.mode = Object.freeze({
-    attribute: createAttributeBindingFactory(ViewUpdateBinding as any),
-    booleanAttribute: createBooleanAttributeBindingFactory(ViewUpdateBinding as any),
-    property: createPropertyBindingFactory(ViewUpdateBinding as any),
-    content: createContentBindingFactory(ViewUpdateBinding as any),
-    tokenList: createTokenListBindingFactory(ViewUpdateBinding as any),
-    event: EventListener,
-});
-
-export const oneTime: BindingConfig &
-    ((options?: DefaultBindingOptions) => BindingConfig) = (
-    options: DefaultBindingOptions
-): BindingConfig => {
-    return {
-        mode: oneTime.mode,
-        options: Object.assign({}, defaultBindingOptions, options),
-    };
-};
+    config.options = defaultBindingOptions;
+    config.mode = Object.freeze({
+        attribute: createAttributeBindingFactory(BindingBase),
+        booleanAttribute: createBooleanAttributeBindingFactory(BindingBase),
+        property: createPropertyBindingFactory(BindingBase),
+        content: createContentBindingFactory(BindingBase),
+        tokenList: createTokenListBindingFactory(BindingBase),
+        event: EventListener,
+    });
+
+    return config;
+}
 
-oneTime.options = defaultBindingOptions;
-oneTime.mode = Object.freeze({
-    attribute: createAttributeBindingFactory(ViewSetBinding as any),
-    booleanAttribute: createBooleanAttributeBindingFactory(ViewSetBinding as any),
-    property: createPropertyBindingFactory(ViewSetBinding as any),
-    content: createContentBindingFactory(ViewSetBinding as any),
-    tokenList: createTokenListBindingFactory(ViewSetBinding as any),
-    event: OneTimeEventListener,
-});
+export const updateView = createBindingConfig(ViewUpdateBinding as any, EventListener);
+export const oneTime = createBindingConfig(ViewSetBinding as any, OneTimeEventListener);
 
 export class HTMLBindingDirective extends TargetedHTMLDirective {
     private originalTargetName?: string;

From 9a96946a9b986182f2a6dd69fcb4bdcb33baf352 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Sat, 23 Oct 2021 13:50:43 -0400
Subject: [PATCH 034/135] refactor: reduce duplication and simplify new binding
 system

---
 .../fast-element/docs/api-report.md           |  29 +-
 .../fast-element/src/templating/binding.ts    | 413 ++++++++----------
 2 files changed, 205 insertions(+), 237 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index c79024f6700..a054b9827ba 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -61,7 +61,6 @@ export type Binding<TSource = any, TReturn = any, TParent = any> = (source: TSou
 
 // @public (undocumented)
 export type BindingBehaviorFactory = {
-    readonly directive: HTMLBindingDirective;
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
 };
 
@@ -73,23 +72,20 @@ export interface BindingConfig {
     options: any;
 }
 
-// @public (undocumented)
-export type BindingFactory = new (directive: HTMLBindingDirective) => BindingBehaviorFactory;
-
 // @public (undocumented)
 export interface BindingMode {
     // (undocumented)
-    attribute?: BindingFactory;
+    attribute?: BindingType;
     // (undocumented)
-    booleanAttribute?: BindingFactory;
+    booleanAttribute?: BindingType;
     // (undocumented)
-    content?: BindingFactory;
+    content?: BindingType;
     // (undocumented)
-    event?: BindingFactory;
+    event?: BindingType;
     // (undocumented)
-    property?: BindingFactory;
+    property?: BindingType;
     // (undocumented)
-    tokenList?: BindingFactory;
+    tokenList?: BindingType;
 }
 
 // @public
@@ -99,6 +95,9 @@ export interface BindingObserver<TSource = any, TReturn = any, TParent = any> ex
     records(): IterableIterator<ObservationRecord>;
 }
 
+// @public (undocumented)
+export type BindingType = (directive: HTMLBindingDirective) => BindingBehaviorFactory;
+
 // @public
 export const booleanConverter: ValueConverter;
 
@@ -318,14 +317,14 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
     // (undocumented)
     binding: Binding;
     // (undocumented)
-    cleanedTargetName?: string;
-    // (undocumented)
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
     // (undocumented)
     mode: BindingMode;
     // (undocumented)
     options: any;
     // (undocumented)
+    targetAspect?: string;
+    // (undocumented)
     targetAtContent(): void;
     get targetName(): string | undefined;
     set targetName(value: string | undefined);
@@ -407,6 +406,9 @@ export interface ObservationRecord {
     propertySource: any;
 }
 
+// @public (undocumented)
+export const onChange: BindingConfig & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
+
 // @public (undocumented)
 export const oneTime: BindingConfig & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
 
@@ -570,9 +572,6 @@ export type TrustedTypesPolicy = {
     createHTML(html: string): string;
 };
 
-// @public (undocumented)
-export const updateView: BindingConfig & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
-
 // @public
 export interface ValueConverter {
     fromView(value: any): any;
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 0dca3ec2e86..a94e383edcc 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -16,21 +16,18 @@ import type { CaptureType } from "./template";
 import type { SyntheticView } from "./view";
 
 export type BindingBehaviorFactory = {
-    readonly directive: HTMLBindingDirective;
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
 };
 
-export type BindingFactory = new (
-    directive: HTMLBindingDirective
-) => BindingBehaviorFactory;
+export type BindingType = (directive: HTMLBindingDirective) => BindingBehaviorFactory;
 
 export interface BindingMode {
-    attribute?: BindingFactory;
-    booleanAttribute?: BindingFactory;
-    property?: BindingFactory;
-    content?: BindingFactory;
-    tokenList?: BindingFactory;
-    event?: BindingFactory;
+    attribute?: BindingType;
+    booleanAttribute?: BindingType;
+    property?: BindingType;
+    content?: BindingType;
+    tokenList?: BindingType;
+    event?: BindingType;
 }
 
 export interface BindingConfig {
@@ -38,13 +35,40 @@ export interface BindingConfig {
     options: any;
 }
 
-interface ViewBinding extends BindingBehaviorFactory, ViewBehavior {
-    updateTarget(target: Node, value: any, source: any, context: ExecutionContext): void;
+interface UpdateTargetThis {
+    directive: HTMLBindingDirective;
 }
 
-abstract class ViewSetBinding implements ViewBinding {
+type UpdateTarget = (
+    this: UpdateTargetThis,
+    target,
+    value,
+    source: any,
+    context: ExecutionContext
+) => void;
+
+class BindingBase {
     constructor(public readonly directive: HTMLBindingDirective) {}
 
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {}
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {}
+
+    createBehavior(): ViewBehavior {
+        return this;
+    }
+}
+
+class TargetUpdateBinding extends BindingBase {
+    constructor(directive: HTMLBindingDirective, protected updateTarget: UpdateTarget) {
+        super(directive);
+    }
+
+    static createType(updateTarget: UpdateTarget) {
+        return directive => new this(directive, updateTarget);
+    }
+}
+
+class OneTimeBinding extends TargetUpdateBinding {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const target = targets[this.directive.targetId];
         this.updateTarget(
@@ -54,25 +78,13 @@ abstract class ViewSetBinding implements ViewBinding {
             context
         );
     }
-
-    unbind(): void {}
-
-    createBehavior(): ViewBehavior {
-        return this;
-    }
-
-    abstract updateTarget(
-        target: Node,
-        value: any,
-        source: any,
-        context: ExecutionContext
-    ): void;
 }
 
-abstract class ViewUpdateBinding implements ViewBinding {
+class OnChangeBinding extends TargetUpdateBinding {
     private isBindingVolatile: boolean;
 
-    constructor(public readonly directive: HTMLBindingDirective) {
+    constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget) {
+        super(directive, updateTarget);
         this.isBindingVolatile = Observable.isVolatileBinding(directive.binding);
     }
 
@@ -109,109 +121,76 @@ abstract class ViewUpdateBinding implements ViewBinding {
         const context = (observer as any).context;
         this.updateTarget(target, observer.observe(source, context!), source, context);
     }
-
-    abstract updateTarget(
-        target: Node,
-        value: any,
-        source: any,
-        context: ExecutionContext
-    ): void;
-
-    createBehavior(): ViewBehavior {
-        return this;
-    }
 }
 
-function createPropertyBindingFactory<
-    T extends Constructable<BindingFactory & ViewBinding>
->(BindingBase: T): BindingFactory {
-    return class extends BindingBase {
-        updateTarget(target: Node, value: any): void {
-            target[this.directive.cleanedTargetName!] = value;
-        }
-    };
+function setPropertyTarget(this: UpdateTargetThis, target, value) {
+    target[this.directive.targetAspect!] = value;
 }
 
-function createAttributeBindingFactory<
-    T extends Constructable<BindingFactory & ViewBinding>
->(BindingBase: T): BindingFactory {
-    return class extends BindingBase {
-        updateTarget(target: Node, value: any): void {
-            DOM.setAttribute(
-                target as HTMLElement,
-                this.directive.cleanedTargetName!,
-                value
-            );
-        }
-    };
+function setAttributeTarget(this: UpdateTargetThis, target, value) {
+    DOM.setAttribute(target as HTMLElement, this.directive.targetAspect!, value);
 }
 
-function createBooleanAttributeBindingFactory<
-    T extends Constructable<BindingFactory & ViewBinding>
->(BindingBase: T): BindingFactory {
-    return class extends BindingBase {
-        updateTarget(target: Node, value: any): void {
-            DOM.setBooleanAttribute(
-                target as HTMLElement,
-                this.directive.cleanedTargetName!,
-                value as boolean
-            );
-        }
-    };
+function setBooleanAttributeTarget(this: UpdateTargetThis, target, value) {
+    DOM.setBooleanAttribute(
+        target as HTMLElement,
+        this.directive.targetAspect!,
+        value as boolean
+    );
 }
 
-function createTokenListBindingFactory<T extends Constructable<ViewBinding>>(
-    BindingBase: T
-): BindingFactory {
-    class TokenListBinding extends BindingBase {
-        classVersions = Object.create(null);
-        version = 0;
-
-        updateTarget(target: Element, value: any): void {
-            const classVersions = this.classVersions;
-            const tokenList = target[this.directive.cleanedTargetName!] as DOMTokenList;
-            let version = this.version;
+interface UpdateTokenListThis extends UpdateTargetThis {
+    classVersions: any;
+    version: number;
+}
 
-            // Add the classes, tracking the version at which they were added.
-            if (value !== null && value !== undefined && value.length) {
-                const names = value.split(/\s+/);
+function updateTokenListTarget(
+    this: UpdateTokenListThis,
+    target: Element,
+    value: any
+): void {
+    const classVersions = this.classVersions;
+    const tokenList = target[this.directive.targetAspect!] as DOMTokenList;
+    let version = this.version;
 
-                for (let i = 0, ii = names.length; i < ii; ++i) {
-                    const currentName = names[i];
+    // Add the classes, tracking the version at which they were added.
+    if (value !== null && value !== undefined && value.length) {
+        const names = value.split(/\s+/);
 
-                    if (currentName === "") {
-                        continue;
-                    }
+        for (let i = 0, ii = names.length; i < ii; ++i) {
+            const currentName = names[i];
 
-                    classVersions[currentName] = version;
-                    tokenList.add(currentName);
-                }
+            if (currentName === "") {
+                continue;
             }
 
-            this.classVersions = classVersions;
-            this.version = version + 1;
+            classVersions[currentName] = version;
+            tokenList.add(currentName);
+        }
+    }
 
-            // If this is the first call to add classes, there's no need to remove old ones.
-            if (version === 0) {
-                return;
-            }
+    this.classVersions = classVersions;
+    this.version = version + 1;
 
-            // Remove classes from the previous version.
-            version -= 1;
+    // If this is the first call to add classes, there's no need to remove old ones.
+    if (version === 0) {
+        return;
+    }
 
-            for (const name in classVersions) {
-                if (classVersions[name] === version) {
-                    tokenList.remove(name);
-                }
-            }
+    // Remove classes from the previous version.
+    version -= 1;
+
+    for (const name in classVersions) {
+        if (classVersions[name] === version) {
+            tokenList.remove(name);
         }
     }
+}
 
-    return class implements BindingBehaviorFactory {
-        constructor(public directive: HTMLBindingDirective) {}
-        createBehavior() {
-            return new TokenListBinding(this.directive);
-        }
+function createTokenListBinding(BaseType: typeof TargetUpdateBinding) {
+    return class TokenListBinding extends BaseType implements UpdateTokenListThis {
+        classVersions = Object.create(null);
+        version = 0;
     };
 }
 
@@ -225,87 +204,85 @@ type ContentTarget = Node & {
     $fastTemplate?: { create(): SyntheticView };
 };
 
-function createContentBindingFactory<
-    T extends Constructable<BindingFactory & ViewBinding>
->(BindingBase: T): BindingFactory {
-    return class extends BindingBase {
-        unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets) {
-            super.unbind(source, context, targets);
+function updateContentTarget(
+    target: ContentTarget,
+    value: any,
+    source: any,
+    context: ExecutionContext
+): void {
+    // If there's no actual value, then this equates to the
+    // empty string for the purposes of content bindings.
+    if (value === null || value === undefined) {
+        value = "";
+    }
 
-            const target = targets[this.directive.targetId] as ContentTarget;
-            const view = target.$fastView as ComposableView;
+    // If the value has a "create" method, then it's a template-like.
+    if (value.create) {
+        target.textContent = "";
+        let view = target.$fastView as ComposableView;
+
+        // If there's no previous view that we might be able to
+        // reuse then create a new view from the template.
+        if (view === void 0) {
+            view = value.create() as SyntheticView;
+        } else {
+            // If there is a previous view, but it wasn't created
+            // from the same template as the new value, then we
+            // need to remove the old view if it's still in the DOM
+            // and create a new view from the template.
+            if (target.$fastTemplate !== value) {
+                if (view.isComposed) {
+                    view.remove();
+                    view.unbind();
+                }
 
-            if (view !== void 0 && view.isComposed) {
-                view.unbind();
-                view.needsBindOnly = true;
+                view = value.create() as SyntheticView;
             }
         }
 
-        updateTarget(
-            target: ContentTarget,
-            value: any,
-            source: any,
-            context: ExecutionContext
-        ): void {
-            // If there's no actual value, then this equates to the
-            // empty string for the purposes of content bindings.
-            if (value === null || value === undefined) {
-                value = "";
-            }
-
-            // If the value has a "create" method, then it's a template-like.
-            if (value.create) {
-                target.textContent = "";
-                let view = target.$fastView as ComposableView;
+        // It's possible that the value is the same as the previous template
+        // and that there's actually no need to compose it.
+        if (!view.isComposed) {
+            view.isComposed = true;
+            view.bind(source, context!);
+            view.insertBefore(target);
+            target.$fastView = view;
+            target.$fastTemplate = value;
+        } else if (view.needsBindOnly) {
+            view.needsBindOnly = false;
+            view.bind(source, context!);
+        }
+    } else {
+        const view = target.$fastView as ComposableView;
 
-                // If there's no previous view that we might be able to
-                // reuse then create a new view from the template.
-                if (view === void 0) {
-                    view = value.create() as SyntheticView;
-                } else {
-                    // If there is a previous view, but it wasn't created
-                    // from the same template as the new value, then we
-                    // need to remove the old view if it's still in the DOM
-                    // and create a new view from the template.
-                    if (target.$fastTemplate !== value) {
-                        if (view.isComposed) {
-                            view.remove();
-                            view.unbind();
-                        }
-
-                        view = value.create() as SyntheticView;
-                    }
-                }
+        // If there is a view and it's currently composed into
+        // the DOM, then we need to remove it.
+        if (view !== void 0 && view.isComposed) {
+            view.isComposed = false;
+            view.remove();
 
-                // It's possible that the value is the same as the previous template
-                // and that there's actually no need to compose it.
-                if (!view.isComposed) {
-                    view.isComposed = true;
-                    view.bind(source, context!);
-                    view.insertBefore(target);
-                    target.$fastView = view;
-                    target.$fastTemplate = value;
-                } else if (view.needsBindOnly) {
-                    view.needsBindOnly = false;
-                    view.bind(source, context!);
-                }
+            if (view.needsBindOnly) {
+                view.needsBindOnly = false;
             } else {
-                const view = target.$fastView as ComposableView;
+                view.unbind();
+            }
+        }
 
-                // If there is a view and it's currently composed into
-                // the DOM, then we need to remove it.
-                if (view !== void 0 && view.isComposed) {
-                    view.isComposed = false;
-                    view.remove();
+        target.textContent = value;
+    }
+}
 
-                    if (view.needsBindOnly) {
-                        view.needsBindOnly = false;
-                    } else {
-                        view.unbind();
-                    }
-                }
+function createContentBinding(BaseType: typeof TargetUpdateBinding) {
+    return class extends BaseType {
+        unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets) {
+            super.unbind(source, context, targets);
+
+            const target = targets[this.directive.targetId] as ContentTarget;
+            const view = target.$fastView as ComposableView;
 
-                target.textContent = value;
+            if (view !== void 0 && view.isComposed) {
+                view.unbind();
+                view.needsBindOnly = true;
             }
         }
     };
@@ -316,15 +293,13 @@ type FASTEventSource = Node & {
     $fastContext: ExecutionContext | null;
 };
 
-class EventListener implements BindingBehaviorFactory {
-    constructor(public directive: HTMLBindingDirective) {}
-
+class EventListener extends BindingBase {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const target = targets[this.directive.targetId] as FASTEventSource;
         target.$fastSource = source;
         target.$fastContext = context;
         target.addEventListener(
-            this.directive.cleanedTargetName!,
+            this.directive.targetAspect!,
             this,
             this.directive.options
         );
@@ -338,7 +313,7 @@ class EventListener implements BindingBehaviorFactory {
         target.$fastSource = null;
         target.$fastContext = null;
         target.removeEventListener(
-            this.directive.cleanedTargetName!,
+            this.directive.targetAspect!,
             this,
             this.directive.options
         );
@@ -357,10 +332,6 @@ class EventListener implements BindingBehaviorFactory {
             event.preventDefault();
         }
     }
-
-    createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
-        return this;
-    }
 }
 
 class OneTimeEventListener extends EventListener {
@@ -378,8 +349,8 @@ const defaultBindingOptions: DefaultBindingOptions = {
     capture: false,
 };
 
-function createBindingConfig<T extends Constructable<BindingFactory & ViewBinding>>(
-    BindingBase: T,
+function createBindingConfig(
+    BaseType: typeof TargetUpdateBinding,
     EventListener: Constructable<EventListener>
 ) {
     const config: BindingConfig & ((options?: DefaultBindingOptions) => BindingConfig) = (
@@ -393,25 +364,25 @@ function createBindingConfig<T extends Constructable<BindingFactory & ViewBindin
 
     config.options = defaultBindingOptions;
     config.mode = Object.freeze({
-        attribute: createAttributeBindingFactory(BindingBase),
-        booleanAttribute: createBooleanAttributeBindingFactory(BindingBase),
-        property: createPropertyBindingFactory(BindingBase),
-        content: createContentBindingFactory(BindingBase),
-        tokenList: createTokenListBindingFactory(BindingBase),
-        event: EventListener,
+        attribute: BaseType.createType(setAttributeTarget),
+        booleanAttribute: BaseType.createType(setBooleanAttributeTarget),
+        property: BaseType.createType(setPropertyTarget),
+        content: createContentBinding(BaseType).createType(updateContentTarget),
+        tokenList: createTokenListBinding(BaseType).createType(updateTokenListTarget),
+        event: directive => new EventListener(directive),
     });
 
     return config;
 }
 
-export const updateView = createBindingConfig(ViewUpdateBinding as any, EventListener);
-export const oneTime = createBindingConfig(ViewSetBinding as any, OneTimeEventListener);
+export const onChange = createBindingConfig(OnChangeBinding, EventListener);
+export const oneTime = createBindingConfig(OneTimeBinding, OneTimeEventListener);
 
 export class HTMLBindingDirective extends TargetedHTMLDirective {
-    private originalTargetName?: string;
+    private originalTargetAspect?: string;
     private factory!: BindingBehaviorFactory;
 
-    public cleanedTargetName?: string;
+    public targetAspect?: string;
 
     public constructor(
         public binding: Binding,
@@ -426,11 +397,11 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
      * binding is targeting.
      */
     public get targetName(): string | undefined {
-        return this.originalTargetName;
+        return this.originalTargetAspect;
     }
 
     public set targetName(value: string | undefined) {
-        this.originalTargetName = value;
+        this.originalTargetAspect = value;
 
         if (value === void 0) {
             return;
@@ -438,46 +409,44 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
 
         switch (value[0]) {
             case ":":
-                this.cleanedTargetName = value.substr(1);
-                switch (this.cleanedTargetName) {
+                this.targetAspect = value.substr(1);
+                switch (this.targetAspect) {
                     case "innerHTML":
                         const binding = this.binding;
                         /* eslint-disable-next-line */
                         this.binding = (s, c) => DOM.createHTML(binding(s, c));
-                        this.factory = new this.mode.property!(this);
+                        this.factory = this.mode.property!(this);
                         break;
                     case "classList":
-                        this.factory = new this.mode.tokenList!(this);
+                        this.factory = this.mode.tokenList!(this);
                         break;
                     default:
-                        this.factory = new this.mode.property!(this);
+                        this.factory = this.mode.property!(this);
                         break;
                 }
                 break;
             case "?":
-                this.cleanedTargetName = value.substr(1);
-                this.factory = new this.mode.booleanAttribute!(this);
+                this.targetAspect = value.substr(1);
+                this.factory = this.mode.booleanAttribute!(this);
                 break;
             case "@":
-                this.cleanedTargetName = value.substr(1);
-                this.factory = new this.mode.event!(this);
+                this.targetAspect = value.substr(1);
+                this.factory = this.mode.event!(this);
                 break;
             default:
-                this.cleanedTargetName = value;
-
                 if (value === "class") {
-                    this.cleanedTargetName = "className";
-                    this.factory = new this.mode.property!(this);
+                    this.targetAspect = "className";
+                    this.factory = this.mode.property!(this);
                 } else {
-                    this.factory = new this.mode.attribute!(this);
+                    this.targetAspect = value;
+                    this.factory = this.mode.attribute!(this);
                 }
-
                 break;
         }
     }
 
     public targetAtContent(): void {
-        this.factory = new this.mode.content!(this);
+        this.factory = this.mode.content!(this);
     }
 
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
@@ -487,10 +456,10 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
 
 export function bind<T = any>(
     binding: Binding,
-    config: BindingConfig | DefaultBindingOptions = updateView
+    config: BindingConfig | DefaultBindingOptions = onChange
 ): CaptureType<T> {
     if (!("mode" in config)) {
-        config = updateView(config);
+        config = onChange(config);
     }
 
     return new HTMLBindingDirective(binding, config.mode, config.options);

From f6cf90b8c776ef2662d4b4f7e3c7f686e88a6680 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Sat, 23 Oct 2021 15:09:21 -0400
Subject: [PATCH 035/135] refactor: improve compiler/directive protocol

---
 .../fast-element/docs/api-report.md           | 31 ++++++----
 .../src/templating/binding.spec.ts            |  1 -
 .../fast-element/src/templating/binding.ts    | 62 +++++++------------
 .../fast-element/src/templating/compiler.ts   | 45 ++++----------
 .../src/templating/html-directive.ts          | 18 +++---
 .../src/templating/template.spec.ts           | 22 ++++---
 .../fast-element/src/templating/template.ts   |  6 +-
 7 files changed, 81 insertions(+), 104 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index a054b9827ba..ad0736e38f6 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -14,6 +14,13 @@ export interface Accessor {
     setValue(source: any, value: any): void;
 }
 
+// @public
+export abstract class AspectedHTMLDirective extends HTMLDirective {
+    createPlaceholder: (index: number) => string;
+    // (undocumented)
+    abstract setAspect(value: string): void;
+}
+
 // @public
 export function attr(config?: DecoratorAttributeConfiguration): (target: {}, property: string) => void;
 
@@ -312,9 +319,11 @@ export type Global = typeof globalThis & {
 export function html<TSource = any, TParent = any, TGrandparent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]): ViewTemplate<TSource, TParent, TGrandparent>;
 
 // @public (undocumented)
-export class HTMLBindingDirective extends TargetedHTMLDirective {
+export class HTMLBindingDirective extends InlinableHTMLDirective {
     constructor(binding: Binding, mode: BindingMode, options: any);
     // (undocumented)
+    readonly aspect?: string;
+    // (undocumented)
     binding: Binding;
     // (undocumented)
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
@@ -323,11 +332,9 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
     // (undocumented)
     options: any;
     // (undocumented)
-    targetAspect?: string;
+    readonly rawAspect?: string;
     // (undocumented)
-    targetAtContent(): void;
-    get targetName(): string | undefined;
-    set targetName(value: string | undefined);
+    setAspect(value: string): void;
 }
 
 // @public
@@ -360,6 +367,14 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implemen
     unbind(): void;
 }
 
+// @public (undocumented)
+export abstract class InlinableHTMLDirective extends AspectedHTMLDirective {
+    // (undocumented)
+    abstract binding: Binding;
+    // (undocumented)
+    abstract rawAspect?: string;
+}
+
 // Warning: (ae-internal-missing-underscore) The name "Mutable" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
@@ -553,12 +568,6 @@ export interface SyntheticViewTemplate<TSource = any, TParent = any, TGrandparen
     create(): SyntheticView<TSource, TParent, TGrandparent>;
 }
 
-// @public
-export abstract class TargetedHTMLDirective extends HTMLDirective {
-    createPlaceholder: (index: number) => string;
-    abstract targetName: string | undefined;
-}
-
 // @public
 export type TemplateValue<TSource, TParent = any> = Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource>;
 
diff --git a/packages/web-components/fast-element/src/templating/binding.spec.ts b/packages/web-components/fast-element/src/templating/binding.spec.ts
index f6e0c1bf8c0..d0eb2b18dde 100644
--- a/packages/web-components/fast-element/src/templating/binding.spec.ts
+++ b/packages/web-components/fast-element/src/templating/binding.spec.ts
@@ -28,7 +28,6 @@ describe("The HTML binding directive", () => {
 
     function contentBinding(propertyName: keyof Model = "value") {
         const directive = bind(x => x[propertyName]) as HTMLBindingDirective;
-        directive.targetAtContent();
         directive.targetId = 'r';
 
         const node = document.createTextNode(" ");
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index a94e383edcc..09e2fa2bae7 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,5 +1,5 @@
 import { DOM } from "../dom";
-import type { Constructable } from "../interfaces";
+import type { Constructable, Mutable } from "../interfaces";
 import {
     Binding,
     BindingObserver,
@@ -8,7 +8,7 @@ import {
     setCurrentEvent,
 } from "../observation/observable";
 import {
-    TargetedHTMLDirective,
+    InlinableHTMLDirective,
     ViewBehavior,
     ViewBehaviorTargets,
 } from "./html-directive";
@@ -124,17 +124,17 @@ class OnChangeBinding extends TargetUpdateBinding {
 }
 
 function setPropertyTarget(this: UpdateTargetThis, target, value) {
-    target[this.directive.targetAspect!] = value;
+    target[this.directive.aspect!] = value;
 }
 
 function setAttributeTarget(this: UpdateTargetThis, target, value) {
-    DOM.setAttribute(target as HTMLElement, this.directive.targetAspect!, value);
+    DOM.setAttribute(target as HTMLElement, this.directive.aspect!, value);
 }
 
 function setBooleanAttributeTarget(this: UpdateTargetThis, target, value) {
     DOM.setBooleanAttribute(
         target as HTMLElement,
-        this.directive.targetAspect!,
+        this.directive.aspect!,
         value as boolean
     );
 }
@@ -150,7 +150,7 @@ function updateTokenListTarget(
     value: any
 ): void {
     const classVersions = this.classVersions;
-    const tokenList = target[this.directive.targetAspect!] as DOMTokenList;
+    const tokenList = target[this.directive.aspect!] as DOMTokenList;
     let version = this.version;
 
     // Add the classes, tracking the version at which they were added.
@@ -298,11 +298,7 @@ class EventListener extends BindingBase {
         const target = targets[this.directive.targetId] as FASTEventSource;
         target.$fastSource = source;
         target.$fastContext = context;
-        target.addEventListener(
-            this.directive.targetAspect!,
-            this,
-            this.directive.options
-        );
+        target.addEventListener(this.directive.aspect!, this, this.directive.options);
     }
 
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
@@ -312,11 +308,7 @@ class EventListener extends BindingBase {
     protected removeEventListener(target: FASTEventSource) {
         target.$fastSource = null;
         target.$fastContext = null;
-        target.removeEventListener(
-            this.directive.targetAspect!,
-            this,
-            this.directive.options
-        );
+        target.removeEventListener(this.directive.aspect!, this, this.directive.options);
     }
 
     handleEvent(event: Event): void {
@@ -378,11 +370,11 @@ function createBindingConfig(
 export const onChange = createBindingConfig(OnChangeBinding, EventListener);
 export const oneTime = createBindingConfig(OneTimeBinding, OneTimeEventListener);
 
-export class HTMLBindingDirective extends TargetedHTMLDirective {
-    private originalTargetAspect?: string;
+export class HTMLBindingDirective extends InlinableHTMLDirective {
     private factory!: BindingBehaviorFactory;
 
-    public targetAspect?: string;
+    public readonly rawAspect?: string;
+    public readonly aspect?: string;
 
     public constructor(
         public binding: Binding,
@@ -392,25 +384,17 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
         super();
     }
 
-    /**
-     * Gets/sets the name of the attribute or property that this
-     * binding is targeting.
-     */
-    public get targetName(): string | undefined {
-        return this.originalTargetAspect;
-    }
-
-    public set targetName(value: string | undefined) {
-        this.originalTargetAspect = value;
+    public setAspect(value: string) {
+        (this as Mutable<this>).rawAspect = value;
 
-        if (value === void 0) {
+        if (!value) {
             return;
         }
 
         switch (value[0]) {
             case ":":
-                this.targetAspect = value.substr(1);
-                switch (this.targetAspect) {
+                (this as Mutable<this>).aspect = value.substr(1);
+                switch (this.aspect) {
                     case "innerHTML":
                         const binding = this.binding;
                         /* eslint-disable-next-line */
@@ -426,31 +410,27 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
                 }
                 break;
             case "?":
-                this.targetAspect = value.substr(1);
+                (this as Mutable<this>).aspect = value.substr(1);
                 this.factory = this.mode.booleanAttribute!(this);
                 break;
             case "@":
-                this.targetAspect = value.substr(1);
+                (this as Mutable<this>).aspect = value.substr(1);
                 this.factory = this.mode.event!(this);
                 break;
             default:
                 if (value === "class") {
-                    this.targetAspect = "className";
+                    (this as Mutable<this>).aspect = "className";
                     this.factory = this.mode.property!(this);
                 } else {
-                    this.targetAspect = value;
+                    (this as Mutable<this>).aspect = value;
                     this.factory = this.mode.attribute!(this);
                 }
                 break;
         }
     }
 
-    public targetAtContent(): void {
-        this.factory = this.mode.content!(this);
-    }
-
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
-        return this.factory.createBehavior(targets);
+        return (this.factory ?? this.mode.content!(this)).createBehavior(targets);
     }
 }
 
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 6b21959740b..a07dc81e750 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,15 +1,8 @@
-import type { ViewBehaviorTargets } from "./html-directive";
+import type { InlinableHTMLDirective, ViewBehaviorTargets } from "./html-directive";
 import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
-import type { Binding, ExecutionContext } from "../observation/observable";
-import { bind, HTMLBindingDirective } from "./binding";
+import type { ExecutionContext } from "../observation/observable";
+import { bind, HTMLBindingDirective, oneTime } from "./binding";
 import type { HTMLDirective, ViewBehaviorFactory } from "./html-directive";
-import { oneTime } from "..";
-
-type InlineDirective = HTMLDirective & {
-    targetName?: string;
-    binding: Binding;
-    targetAtContent(): void;
-};
 
 const targetIdFrom = (parentId: string, nodeIndex: number) => `${parentId}.${nodeIndex}`;
 const descriptorCache: PropertyDescriptorMap = {};
@@ -70,16 +63,6 @@ class CompilationContext implements HTMLTemplateCompilationResult {
         this.factories.push(factory);
     }
 
-    public captureContentBinding(
-        directive: HTMLBindingDirective,
-        parentId: string,
-        targetId: string,
-        targetIndex: number
-    ): void {
-        directive.targetAtContent();
-        this.addFactory(directive, parentId, targetId, targetIndex);
-    }
-
     public freeze(): HTMLTemplateCompilationResult {
         this.proto = Object.create(null, this.descriptors);
         return this;
@@ -134,21 +117,19 @@ class CompilationContext implements HTMLTemplateCompilationResult {
     }
 }
 
-function createAggregateBinding(
-    parts: (string | InlineDirective)[]
-): HTMLBindingDirective {
+function createAggregateBinding(parts: (string | HTMLDirective)[]): HTMLDirective {
     if (parts.length === 1) {
-        return (parts[0] as any) as HTMLBindingDirective;
+        return parts[0] as HTMLDirective;
     }
 
-    let targetName: string | undefined;
+    let aspect: string | undefined;
     const partCount = parts.length;
-    const finalParts = parts.map((x: string | InlineDirective) => {
+    const finalParts = parts.map((x: string | InlinableHTMLDirective) => {
         if (typeof x === "string") {
             return (): string => x;
         }
 
-        targetName = x.targetName || targetName;
+        aspect = x.rawAspect || aspect;
         return x.binding;
     });
 
@@ -163,7 +144,7 @@ function createAggregateBinding(
     };
 
     const directive = bind(binding) as HTMLBindingDirective;
-    directive.targetName = targetName;
+    directive.setAspect(aspect!);
     return directive;
 }
 
@@ -172,7 +153,7 @@ const interpolationEndLength = _interpolationEnd.length;
 function parseContent(
     context: CompilationContext,
     value: string
-): (string | InlineDirective)[] | null {
+): (string | HTMLDirective)[] | null {
     const valueParts = value.split(_interpolationStart);
 
     if (valueParts.length === 1) {
@@ -216,12 +197,12 @@ function compileAttributes(
         const attr = attributes[i];
         const attrValue = attr.value;
         const parseResult = parseContent(context, attrValue);
-        let result: HTMLBindingDirective | null = null;
+        let result: HTMLDirective | null = null;
 
         if (parseResult === null) {
             if (includeBasicValues) {
                 result = bind(() => attrValue, oneTime) as HTMLBindingDirective;
-                result.targetName = attr.name;
+                (result as HTMLBindingDirective).setAspect(attr.name);
             }
         } else {
             result = createAggregateBinding(parseResult);
@@ -269,7 +250,7 @@ function compileContent(
             currentNode.textContent = currentPart;
         } else {
             currentNode.textContent = " ";
-            context.captureContentBinding(
+            context.addFactory(
                 currentPart as HTMLBindingDirective,
                 parentId,
                 nodeId,
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 954a5094166..dc175fc3b14 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -1,6 +1,6 @@
 import { DOM } from "../dom";
 import type { Behavior } from "../observation/behavior";
-import type { ExecutionContext } from "../observation/observable";
+import type { Binding, ExecutionContext } from "../observation/observable";
 
 /**
  * The target nodes available to a behavior.
@@ -82,15 +82,12 @@ export abstract class HTMLDirective implements ViewBehaviorFactory {
 }
 
 /**
- * A {@link HTMLDirective} that targets a named attribute or property on a node.
+ * A {@link HTMLDirective} that targets a particular aspect
+ * (attribute, property, event, etc.) of a node.
  * @public
  */
-export abstract class TargetedHTMLDirective extends HTMLDirective {
-    /**
-     * Gets/sets the name of the attribute or property that this
-     * directive is targeting on the associated node.
-     */
-    public abstract targetName: string | undefined;
+export abstract class AspectedHTMLDirective extends HTMLDirective {
+    abstract setAspect(value: string): void;
 
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -100,6 +97,11 @@ export abstract class TargetedHTMLDirective extends HTMLDirective {
         DOM.createInterpolationPlaceholder;
 }
 
+export abstract class InlinableHTMLDirective extends AspectedHTMLDirective {
+    abstract binding: Binding;
+    abstract rawAspect?: string;
+}
+
 /** @internal */
 export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirective
     implements ViewBehavior {
diff --git a/packages/web-components/fast-element/src/templating/template.spec.ts b/packages/web-components/fast-element/src/templating/template.spec.ts
index 6db413bc341..f436b932716 100644
--- a/packages/web-components/fast-element/src/templating/template.spec.ts
+++ b/packages/web-components/fast-element/src/templating/template.spec.ts
@@ -2,8 +2,8 @@ import { expect } from "chai";
 import { html, ViewTemplate } from "./template";
 import { DOM } from "../dom";
 import { HTMLBindingDirective } from "./binding";
-import { HTMLDirective, TargetedHTMLDirective } from "./html-directive";
-import { bind, ViewBehaviorTargets } from "..";
+import { HTMLDirective, AspectedHTMLDirective } from "./html-directive";
+import { bind, Binding, InlinableHTMLDirective, ViewBehaviorTargets } from "..";
 
 describe(`The html tag template helper`, () => {
     it(`transforms a string into a ViewTemplate.`, () => {
@@ -223,7 +223,7 @@ describe(`The html tag template helper`, () => {
         expect(template.html).to.equal(
             `<my-element :someAttribute=${placeholder}></my-element>`
         );
-        expect((template.directives[0] as HTMLBindingDirective).targetName).to.equal(
+        expect((template.directives[0] as HTMLBindingDirective).rawAspect).to.equal(
             ":someAttribute"
         );
     });
@@ -235,14 +235,20 @@ describe(`The html tag template helper`, () => {
         expect(template.html).to.equal(
             `<my-element :someAttribute=${placeholder}></my-element>`
         );
-        expect((template.directives[0] as TargetedHTMLDirective).targetName).to.equal(
+        expect((template.directives[0] as HTMLBindingDirective).rawAspect).to.equal(
             ":someAttribute"
         );
     });
 
-    it(`captures a case-sensitive property name when used with a named target directive`, () => {
-        class TestDirective extends TargetedHTMLDirective {
-            targetName: string | undefined;
+    it(`captures a case-sensitive property name when used with an inline directive`, () => {
+        class TestDirective extends InlinableHTMLDirective {
+            binding: Binding;
+            rawAspect: string;
+
+            setAspect(value) {
+                this.rawAspect = value;
+            }
+
             createBehavior(targets: ViewBehaviorTargets) {
                 return { bind() {}, unbind() {} };
             }
@@ -254,7 +260,7 @@ describe(`The html tag template helper`, () => {
         expect(template.html).to.equal(
             `<my-element :someAttribute=${placeholder}></my-element>`
         );
-        expect((template.directives[0] as TargetedHTMLDirective).targetName).to.equal(
+        expect((template.directives[0] as TestDirective).rawAspect).to.equal(
             ":someAttribute"
         );
     });
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 0d706e7bab7..fab81e91a91 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -3,7 +3,7 @@ import { Binding, defaultExecutionContext } from "../observation/observable";
 import { compileTemplate } from "./compiler";
 import type { HTMLTemplateCompilationResult } from "./compiler";
 import { ElementView, HTMLView, SyntheticView } from "./view";
-import { HTMLDirective, TargetedHTMLDirective } from "./html-directive";
+import { HTMLDirective, AspectedHTMLDirective } from "./html-directive";
 import { bind, oneTime } from "./binding";
 
 /**
@@ -183,10 +183,10 @@ export function html<TSource = any, TParent = any, TGrandparent = any>(
         }
 
         if (currentValue instanceof HTMLDirective) {
-            if (currentValue instanceof TargetedHTMLDirective) {
+            if (currentValue instanceof AspectedHTMLDirective) {
                 const match = lastAttributeNameRegex.exec(currentString);
                 if (match !== null) {
-                    currentValue.targetName = match[2];
+                    currentValue.setAspect(match[2]);
                 }
             }
 

From 1568401bf04f602a7b441746a74121a1a9d9d674 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Sat, 23 Oct 2021 16:01:07 -0400
Subject: [PATCH 036/135] refactor: rename Notifier#source to Notifier#subject

---
 .../fast-element/docs/api-report.md           | 12 ++---
 .../docs/fast-element-2-changes.md            |  3 +-
 .../src/observation/array-observer.ts         | 12 ++---
 .../fast-element/src/observation/notifier.ts  | 50 +++++++++----------
 4 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index ad0736e38f6..43e56f3a029 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -391,7 +391,7 @@ export interface NodeBehaviorOptions<T = any> {
 // @public
 export interface Notifier {
     notify(args: any): void;
-    readonly source: any;
+    readonly subject: any;
     subscribe(subscriber: Subscriber, propertyToWatch?: any): void;
     unsubscribe(subscriber: Subscriber, propertyToUnwatch?: any): void;
 }
@@ -439,9 +439,9 @@ export interface PartialFASTElementDefinition {
 
 // @public
 export class PropertyChangeNotifier implements Notifier {
-    constructor(source: any);
+    constructor(subject: any);
     notify(propertyName: string): void;
-    readonly source: any;
+    readonly subject: any;
     subscribe(subscriber: Subscriber, propertyToWatch?: string): void;
     unsubscribe(subscriber: Subscriber, propertyToUnwatch?: string): void;
 }
@@ -535,15 +535,15 @@ export interface StyleTarget {
 
 // @public
 export interface Subscriber {
-    handleChange(source: any, args: any): void;
+    handleChange(subject: any, args: any): void;
 }
 
 // @public
 export class SubscriberSet implements Notifier {
-    constructor(source: any, initialSubscriber?: Subscriber);
+    constructor(subject: any, initialSubscriber?: Subscriber);
     has(subscriber: Subscriber): boolean;
     notify(args: any): void;
-    readonly source: any;
+    readonly subject: any;
     subscribe(subscriber: Subscriber): void;
     unsubscribe(subscriber: Subscriber): void;
 }
diff --git a/packages/web-components/fast-element/docs/fast-element-2-changes.md b/packages/web-components/fast-element/docs/fast-element-2-changes.md
index ef65794c438..c78b27acbdb 100644
--- a/packages/web-components/fast-element/docs/fast-element-2-changes.md
+++ b/packages/web-components/fast-element/docs/fast-element-2-changes.md
@@ -11,4 +11,5 @@
 * `Behavior` and `ViewBehavior` - `Behavior` now requires an `ExecutionContext` for `unbind`. Behaviors can be used for elements or views. `ViewBehavior` has been introduced for use exclusively with views, and provides some optimization opportunities.
 * `RefBehavior` has been replaced with `RefDirective`. The directive also implements `ViewBehavior` allowing a single directive instance to be shared across all template instances that use the ref.
 * Removed `SlottedBehavior` and `ChildrenBehavior` have been replaced with `SlottedDirective` and `ChildrenDirective`. These directives allow a single directive instance to be shared across all template instances that use the ref.
-* Removed `AttachedBehaviorHTMLDirective` and `AttachedBehaviorType` since they are no longer used in the new directive/behavior architecture for ref, slotted, and children.
\ No newline at end of file
+* Removed `AttachedBehaviorHTMLDirective` and `AttachedBehaviorType` since they are no longer used in the new directive/behavior architecture for ref, slotted, and children.
+* Renamed `Notifier#source` to `Notifier#subject` to align with other observable terminology and prevent name clashes with `BindingObserver` properties.
\ No newline at end of file
diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index eea12acf01d..33af938c546 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -30,9 +30,9 @@ class ArrayObserver extends SubscriberSet {
     private needsQueue: boolean = true;
     call: () => void = this.flush;
 
-    constructor(source: any[]) {
-        super(source);
-        (source as any).$fastController = this;
+    constructor(subject: any[]) {
+        super(subject);
+        (subject as any).$fastController = this;
     }
 
     public subscribe(subscriber: Subscriber): void {
@@ -70,12 +70,12 @@ class ArrayObserver extends SubscriberSet {
         const finalSplices =
             oldCollection === void 0
                 ? splices!.length > 1
-                    ? projectArraySplices(this.source, splices!)
+                    ? projectArraySplices(this.subject, splices!)
                     : splices
                 : calcSplices(
-                      this.source,
+                      this.subject,
                       0,
-                      this.source.length,
+                      this.subject.length,
                       oldCollection,
                       0,
                       oldCollection.length
diff --git a/packages/web-components/fast-element/src/observation/notifier.ts b/packages/web-components/fast-element/src/observation/notifier.ts
index 62912188caa..c885ff918ce 100644
--- a/packages/web-components/fast-element/src/observation/notifier.ts
+++ b/packages/web-components/fast-element/src/observation/notifier.ts
@@ -4,22 +4,22 @@
  */
 export interface Subscriber {
     /**
-     * Called when a source this instance has subscribed to changes.
-     * @param source - The source of the change.
+     * Called when a subject this instance has subscribed to changes.
+     * @param subject - The subject of the change.
      * @param args - The event args detailing the change that occurred.
      */
-    handleChange(source: any, args: any): void;
+    handleChange(subject: any, args: any): void;
 }
 
 /**
- * Provides change notification for a source object.
+ * Provides change notifications for an observed subject.
  * @public
  */
 export interface Notifier {
     /**
-     * The source object that this notifier provides change notification for.
+     * The object that subscribers will receive notifications for.
      */
-    readonly source: any;
+    readonly subject: any;
 
     /**
      * Notifies all subscribers, based on the args.
@@ -52,7 +52,7 @@ export interface Notifier {
 /**
  * An implementation of {@link Notifier} that efficiently keeps track of
  * subscribers interested in a specific change notification on an
- * observable source.
+ * observable subject.
  *
  * @remarks
  * This set is optimized for the most common scenario of 1 or 2 subscribers.
@@ -66,17 +66,17 @@ export class SubscriberSet implements Notifier {
     private spillover: Subscriber[] | undefined = void 0;
 
     /**
-     * The source that this subscriber set is reporting changes for.
+     * The object that subscribers will receive notifications for.
      */
-    public readonly source: any;
+    public readonly subject: any;
 
     /**
-     * Creates an instance of SubscriberSet for the specified source.
-     * @param source - The object source that subscribers will receive notifications from.
+     * Creates an instance of SubscriberSet for the specified subject.
+     * @param subject - The subject that subscribers will receive notifications from.
      * @param initialSubscriber - An initial subscriber to changes.
      */
-    public constructor(source: any, initialSubscriber?: Subscriber) {
-        this.source = source;
+    public constructor(subject: any, initialSubscriber?: Subscriber) {
+        this.subject = subject;
         this.sub1 = initialSubscriber;
     }
 
@@ -178,19 +178,19 @@ export class SubscriberSet implements Notifier {
  */
 export class PropertyChangeNotifier implements Notifier {
     private subscribers: Record<string, SubscriberSet> = {};
-    private sourceSubscribers: SubscriberSet | null = null;
+    private subjectSubscribers: SubscriberSet | null = null;
 
     /**
-     * The source that property changes are being notified for.
+     * The subject that property changes are being notified for.
      */
-    public readonly source: any;
+    public readonly subject: any;
 
     /**
-     * Creates an instance of PropertyChangeNotifier for the specified source.
-     * @param source - The object source that subscribers will receive notifications from.
+     * Creates an instance of PropertyChangeNotifier for the specified subject.
+     * @param subject - The object that subscribers will receive notifications for.
      */
-    public constructor(source: any) {
-        this.source = source;
+    public constructor(subject: any) {
+        this.subject = subject;
     }
 
     /**
@@ -199,7 +199,7 @@ export class PropertyChangeNotifier implements Notifier {
      */
     public notify(propertyName: string): void {
         this.subscribers[propertyName]?.notify(propertyName);
-        this.sourceSubscribers?.notify(propertyName);
+        this.subjectSubscribers?.notify(propertyName);
     }
 
     /**
@@ -213,11 +213,11 @@ export class PropertyChangeNotifier implements Notifier {
         if (propertyToWatch) {
             subscribers =
                 this.subscribers[propertyToWatch] ??
-                (this.subscribers[propertyToWatch] = new SubscriberSet(this.source));
+                (this.subscribers[propertyToWatch] = new SubscriberSet(this.subject));
         } else {
             subscribers =
-                this.sourceSubscribers ??
-                (this.sourceSubscribers = new SubscriberSet(this.source));
+                this.subjectSubscribers ??
+                (this.subjectSubscribers = new SubscriberSet(this.subject));
         }
 
         subscribers.subscribe(subscriber);
@@ -232,7 +232,7 @@ export class PropertyChangeNotifier implements Notifier {
         if (propertyToUnwatch) {
             this.subscribers[propertyToUnwatch]?.unsubscribe(subscriber);
         } else {
-            this.sourceSubscribers?.unsubscribe(subscriber);
+            this.subjectSubscribers?.unsubscribe(subscriber);
         }
     }
 }

From bddaad5b15814370f56bd296994d3f8df4b9d3a4 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Sat, 23 Oct 2021 23:05:52 -0400
Subject: [PATCH 037/135] refactor: reduce duplication

---
 .../fast-element/docs/api-report.md           |  1 +
 .../fast-element/src/templating/binding.ts    | 75 ++++++++++---------
 .../src/templating/html-directive.ts          | 13 +++-
 3 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 43e56f3a029..9b506b25477 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -342,6 +342,7 @@ export abstract class HTMLDirective implements ViewBehaviorFactory {
     abstract createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
     abstract createPlaceholder(index: number): string;
     targetId: string;
+    uniqueId: string;
 }
 
 // @public
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 09e2fa2bae7..47e78e1ae4b 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -42,6 +42,7 @@ interface UpdateTargetThis {
 type UpdateTarget = (
     this: UpdateTargetThis,
     target,
+    aspect: string,
     value,
     source: any,
     context: ExecutionContext
@@ -70,10 +71,12 @@ class TargetUpdateBinding extends BindingBase {
 
 class OneTimeBinding extends TargetUpdateBinding {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        const target = targets[this.directive.targetId];
+        const directive = this.directive;
+        const target = targets[directive.targetId];
         this.updateTarget(
             target,
-            this.directive.binding(source, context),
+            directive.aspect!,
+            directive.binding(source, context),
             source,
             context
         );
@@ -89,11 +92,12 @@ class OnChangeBinding extends TargetUpdateBinding {
     }
 
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        const target = targets[this.directive.targetId];
+        const directive = this.directive;
+        const target = targets[directive.targetId];
         const observer: BindingObserver =
-            target[this.directive.targetId] ??
-            (target[this.directive.targetId] = Observable.binding(
-                this.directive.binding,
+            target[directive.uniqueId] ??
+            (target[directive.uniqueId] = Observable.binding(
+                directive.binding,
                 this,
                 this.isBindingVolatile
             ));
@@ -102,12 +106,18 @@ class OnChangeBinding extends TargetUpdateBinding {
         (observer as any).source = source;
         (observer as any).context = context;
 
-        this.updateTarget(target, observer.observe(source, context), source, context);
+        this.updateTarget(
+            target,
+            directive.aspect!,
+            observer.observe(source, context),
+            source,
+            context
+        );
     }
 
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const target = targets[this.directive.targetId];
-        const observer = target[this.directive.targetId];
+        const observer = target[this.directive.uniqueId];
         observer.disconnect();
         observer.target = null;
         observer.source = null;
@@ -119,26 +129,16 @@ class OnChangeBinding extends TargetUpdateBinding {
         const target = (observer as any).target;
         const source = (observer as any).source;
         const context = (observer as any).context;
-        this.updateTarget(target, observer.observe(source, context!), source, context);
+        this.updateTarget(
+            target,
+            this.directive.aspect!,
+            observer.observe(source, context!),
+            source,
+            context
+        );
     }
 }
 
-function setPropertyTarget(this: UpdateTargetThis, target, value) {
-    target[this.directive.aspect!] = value;
-}
-
-function setAttributeTarget(this: UpdateTargetThis, target, value) {
-    DOM.setAttribute(target as HTMLElement, this.directive.aspect!, value);
-}
-
-function setBooleanAttributeTarget(this: UpdateTargetThis, target, value) {
-    DOM.setBooleanAttribute(
-        target as HTMLElement,
-        this.directive.aspect!,
-        value as boolean
-    );
-}
-
 interface UpdateTokenListThis extends UpdateTargetThis {
     classVersions: any;
     version: number;
@@ -147,10 +147,11 @@ interface UpdateTokenListThis extends UpdateTargetThis {
 function updateTokenListTarget(
     this: UpdateTokenListThis,
     target: Element,
+    aspect: string,
     value: any
 ): void {
     const classVersions = this.classVersions;
-    const tokenList = target[this.directive.aspect!] as DOMTokenList;
+    const tokenList = target[aspect] as DOMTokenList;
     let version = this.version;
 
     // Add the classes, tracking the version at which they were added.
@@ -206,6 +207,7 @@ type ContentTarget = Node & {
 
 function updateContentTarget(
     target: ContentTarget,
+    aspect: string,
     value: any,
     source: any,
     context: ExecutionContext
@@ -295,10 +297,11 @@ type FASTEventSource = Node & {
 
 class EventListener extends BindingBase {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        const target = targets[this.directive.targetId] as FASTEventSource;
+        const directive = this.directive;
+        const target = targets[directive.targetId] as FASTEventSource;
         target.$fastSource = source;
         target.$fastContext = context;
-        target.addEventListener(this.directive.aspect!, this, this.directive.options);
+        target.addEventListener(directive.aspect!, this, directive.options);
     }
 
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
@@ -342,8 +345,8 @@ const defaultBindingOptions: DefaultBindingOptions = {
 };
 
 function createBindingConfig(
-    BaseType: typeof TargetUpdateBinding,
-    EventListener: Constructable<EventListener>
+    Base: typeof TargetUpdateBinding,
+    Listener: Constructable<EventListener>
 ) {
     const config: BindingConfig & ((options?: DefaultBindingOptions) => BindingConfig) = (
         options: DefaultBindingOptions
@@ -356,12 +359,12 @@ function createBindingConfig(
 
     config.options = defaultBindingOptions;
     config.mode = Object.freeze({
-        attribute: BaseType.createType(setAttributeTarget),
-        booleanAttribute: BaseType.createType(setBooleanAttributeTarget),
-        property: BaseType.createType(setPropertyTarget),
-        content: createContentBinding(BaseType).createType(updateContentTarget),
-        tokenList: createTokenListBinding(BaseType).createType(updateTokenListTarget),
-        event: directive => new EventListener(directive),
+        attribute: Base.createType(DOM.setAttribute),
+        booleanAttribute: Base.createType(DOM.setBooleanAttribute),
+        property: Base.createType((target, aspect, value) => (target[aspect] = value)),
+        content: createContentBinding(Base).createType(updateContentTarget),
+        tokenList: createTokenListBinding(Base).createType(updateTokenListTarget),
+        event: directive => new Listener(directive),
     });
 
     return config;
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index dc175fc3b14..d321e5dad8a 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -58,16 +58,27 @@ export interface ViewBehaviorFactory {
     createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
 }
 
+let directiveId = 0;
+function nextId() {
+    return `fast-${++directiveId}`;
+}
+
 /**
  * Instructs the template engine to apply behavior to a node.
  * @public
  */
 export abstract class HTMLDirective implements ViewBehaviorFactory {
     /**
-     * The structural id of the DOM node to which the created behavior will apply.
+     * The structural id of the directive based on the DOM node
+     * that it applies to.
      */
     public targetId: string = "h";
 
+    /**
+     * The unique id of the directive instance.
+     */
+    public uniqueId: string = nextId();
+
     /**
      * Creates a placeholder string based on the directive's index within the template.
      * @param index - The index of the directive within the template.

From db654ab09fa9f521bac2f6563bcc9e604860b343 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Sat, 23 Oct 2021 23:16:23 -0400
Subject: [PATCH 038/135] fix: state issue with token list bindings

---
 .../fast-element/src/templating/binding.ts    | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 47e78e1ae4b..27309364b74 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -139,20 +139,24 @@ class OnChangeBinding extends TargetUpdateBinding {
     }
 }
 
-interface UpdateTokenListThis extends UpdateTargetThis {
-    classVersions: any;
-    version: number;
+interface TokenListState {
+    v: {};
+    c: number;
 }
 
 function updateTokenListTarget(
-    this: UpdateTokenListThis,
+    this: UpdateTargetThis,
     target: Element,
     aspect: string,
     value: any
 ): void {
-    const classVersions = this.classVersions;
+    const directive = this.directive;
+    const state: TokenListState =
+        target[directive.uniqueId] ??
+        (target[directive.uniqueId] = { c: 0, v: Object.create(null) });
+    const versions = state.v;
+    let currentVersion = state.c;
     const tokenList = target[aspect] as DOMTokenList;
-    let version = this.version;
 
     // Add the classes, tracking the version at which they were added.
     if (value !== null && value !== undefined && value.length) {
@@ -165,36 +169,28 @@ function updateTokenListTarget(
                 continue;
             }
 
-            classVersions[currentName] = version;
+            versions[currentName] = currentVersion;
             tokenList.add(currentName);
         }
     }
 
-    this.classVersions = classVersions;
-    this.version = version + 1;
+    state.v = currentVersion + 1;
 
     // If this is the first call to add classes, there's no need to remove old ones.
-    if (version === 0) {
+    if (currentVersion === 0) {
         return;
     }
 
     // Remove classes from the previous version.
-    version -= 1;
+    currentVersion -= 1;
 
-    for (const name in classVersions) {
-        if (classVersions[name] === version) {
+    for (const name in versions) {
+        if (versions[name] === currentVersion) {
             tokenList.remove(name);
         }
     }
 }
 
-function createTokenListBinding(BaseType: typeof TargetUpdateBinding) {
-    return class TokenListBinding extends BaseType implements UpdateTokenListThis {
-        classVersions = Object.create(null);
-        version = 0;
-    };
-}
-
 type ComposableView = SyntheticView & {
     isComposed?: boolean;
     needsBindOnly?: boolean;
@@ -363,7 +359,7 @@ function createBindingConfig(
         booleanAttribute: Base.createType(DOM.setBooleanAttribute),
         property: Base.createType((target, aspect, value) => (target[aspect] = value)),
         content: createContentBinding(Base).createType(updateContentTarget),
-        tokenList: createTokenListBinding(Base).createType(updateTokenListTarget),
+        tokenList: Base.createType(updateTokenListTarget),
         event: directive => new Listener(directive),
     });
 

From b25775bb94a85378fc6773f840da5395909689ce Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Sun, 24 Oct 2021 14:11:42 -0400
Subject: [PATCH 039/135] refactor: clean up types and remove internals from
 public export

---
 .../fast-element/docs/api-report.md           | 21 +------
 .../web-components/fast-element/src/index.ts  | 61 +++++++++++--------
 .../fast-element/src/templating/binding.ts    |  3 +
 .../fast-element/src/templating/compiler.ts   | 24 ++++----
 4 files changed, 52 insertions(+), 57 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 9b506b25477..70cfec1bb69 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -102,6 +102,8 @@ export interface BindingObserver<TSource = any, TReturn = any, TParent = any> ex
     records(): IterableIterator<ObservationRecord>;
 }
 
+// Warning: (ae-forgotten-export) The symbol "HTMLBindingDirective" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
 export type BindingType = (directive: HTMLBindingDirective) => BindingBehaviorFactory;
 
@@ -318,25 +320,6 @@ export type Global = typeof globalThis & {
 // @public
 export function html<TSource = any, TParent = any, TGrandparent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]): ViewTemplate<TSource, TParent, TGrandparent>;
 
-// @public (undocumented)
-export class HTMLBindingDirective extends InlinableHTMLDirective {
-    constructor(binding: Binding, mode: BindingMode, options: any);
-    // (undocumented)
-    readonly aspect?: string;
-    // (undocumented)
-    binding: Binding;
-    // (undocumented)
-    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
-    // (undocumented)
-    mode: BindingMode;
-    // (undocumented)
-    options: any;
-    // (undocumented)
-    readonly rawAspect?: string;
-    // (undocumented)
-    setAspect(value: string): void;
-}
-
 // @public
 export abstract class HTMLDirective implements ViewBehaviorFactory {
     abstract createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index c0e9a072962..dfaf540b099 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -1,38 +1,47 @@
-export * from "./platform.js";
-export * from "./templating/template.js";
-export * from "./components/fast-element.js";
+export * from "./platform";
+export * from "./templating/template";
+export * from "./components/fast-element";
 export {
     FASTElementDefinition,
     PartialFASTElementDefinition,
-} from "./components/fast-definitions.js";
-export * from "./components/attributes.js";
-export * from "./components/controller.js";
-export type { Callable, Constructable, Mutable } from "./interfaces.js";
-export * from "./templating/compiler.js";
+} from "./components/fast-definitions";
+export * from "./components/attributes";
+export * from "./components/controller";
+export type { Callable, Constructable, Mutable } from "./interfaces";
+export * from "./templating/compiler";
 export {
     ElementStyles,
     ElementStyleFactory,
     ComposableStyles,
     StyleTarget,
-} from "./styles/element-styles.js";
-export { css, cssPartial } from "./styles/css.js";
-export { CSSDirective } from "./styles/css-directive.js";
-export * from "./templating/view.js";
-export * from "./observation/observable.js";
-export * from "./observation/notifier.js";
-export { Splice } from "./observation/array-change-records.js";
-export { enableArrayObservation } from "./observation/array-observer.js";
-export { DOM } from "./dom.js";
-export type { Behavior } from "./observation/behavior.js";
-export * from "./templating/binding.js";
-export * from "./templating/html-directive.js";
-export * from "./templating/ref.js";
-export * from "./templating/when.js";
-export * from "./templating/repeat.js";
-export * from "./templating/slotted.js";
-export * from "./templating/children.js";
+} from "./styles/element-styles";
+export { css, cssPartial } from "./styles/css";
+export { CSSDirective } from "./styles/css-directive";
+export * from "./templating/view";
+export * from "./observation/observable";
+export * from "./observation/notifier";
+export { Splice } from "./observation/array-change-records";
+export { enableArrayObservation } from "./observation/array-observer";
+export { DOM } from "./dom";
+export type { Behavior } from "./observation/behavior";
+export {
+    bind,
+    oneTime,
+    onChange,
+    BindingConfig,
+    BindingMode,
+    BindingType,
+    BindingBehaviorFactory,
+    DefaultBindingOptions,
+} from "./templating/binding";
+export * from "./templating/html-directive";
+export * from "./templating/ref";
+export * from "./templating/when";
+export * from "./templating/repeat";
+export * from "./templating/slotted";
+export * from "./templating/children";
 export {
     elements,
     ElementsFilter,
     NodeBehaviorOptions,
-} from "./templating/node-observation.js";
+} from "./templating/node-observation";
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 27309364b74..72cfffb71aa 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -369,6 +369,9 @@ function createBindingConfig(
 export const onChange = createBindingConfig(OnChangeBinding, EventListener);
 export const oneTime = createBindingConfig(OneTimeBinding, OneTimeEventListener);
 
+/**
+ * @internal
+ */
 export class HTMLBindingDirective extends InlinableHTMLDirective {
     private factory!: BindingBehaviorFactory;
 
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index a07dc81e750..e2fc9263df1 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,8 +1,13 @@
-import type { InlinableHTMLDirective, ViewBehaviorTargets } from "./html-directive";
+import type {
+    AspectedHTMLDirective,
+    HTMLDirective,
+    InlinableHTMLDirective,
+    ViewBehaviorFactory,
+    ViewBehaviorTargets,
+} from "./html-directive";
 import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
 import type { ExecutionContext } from "../observation/observable";
-import { bind, HTMLBindingDirective, oneTime } from "./binding";
-import type { HTMLDirective, ViewBehaviorFactory } from "./html-directive";
+import { bind, oneTime } from "./binding";
 
 const targetIdFrom = (parentId: string, nodeIndex: number) => `${parentId}.${nodeIndex}`;
 const descriptorCache: PropertyDescriptorMap = {};
@@ -143,7 +148,7 @@ function createAggregateBinding(parts: (string | HTMLDirective)[]): HTMLDirectiv
         return output;
     };
 
-    const directive = bind(binding) as HTMLBindingDirective;
+    const directive = bind(binding) as AspectedHTMLDirective;
     directive.setAspect(aspect!);
     return directive;
 }
@@ -201,8 +206,8 @@ function compileAttributes(
 
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = bind(() => attrValue, oneTime) as HTMLBindingDirective;
-                (result as HTMLBindingDirective).setAspect(attr.name);
+                result = bind(() => attrValue, oneTime) as AspectedHTMLDirective;
+                (result as AspectedHTMLDirective).setAspect(attr.name);
             }
         } else {
             result = createAggregateBinding(parseResult);
@@ -250,12 +255,7 @@ function compileContent(
             currentNode.textContent = currentPart;
         } else {
             currentNode.textContent = " ";
-            context.addFactory(
-                currentPart as HTMLBindingDirective,
-                parentId,
-                nodeId,
-                nodeIndex
-            );
+            context.addFactory(currentPart, parentId, nodeId, nodeIndex);
         }
 
         lastNode = currentNode;

From 35f1cc22f0a8e2789b13efed7449f91f0ec14ecc Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Sun, 24 Oct 2021 20:32:14 -0400
Subject: [PATCH 040/135] refactor: centralize common type checks

---
 .../fast-element/src/components/attributes.ts        |  9 +++++----
 .../fast-element/src/components/fast-definitions.ts  | 12 ++++++------
 .../web-components/fast-element/src/interfaces.ts    | 11 +++++++++++
 .../fast-element/src/observation/observable.ts       |  5 +++--
 .../web-components/fast-element/src/styles/css.ts    | 11 ++++++-----
 .../fast-element/src/templating/children.ts          |  3 ++-
 .../fast-element/src/templating/compiler.ts          |  5 +++--
 .../fast-element/src/templating/repeat.ts            |  8 ++++----
 .../fast-element/src/templating/slotted.ts           |  3 ++-
 .../fast-element/src/templating/template.ts          |  9 ++++-----
 .../fast-element/src/templating/when.ts              | 12 ++++++------
 11 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/packages/web-components/fast-element/src/components/attributes.ts b/packages/web-components/fast-element/src/components/attributes.ts
index 21b8fffa39f..b9e0fb24510 100644
--- a/packages/web-components/fast-element/src/components/attributes.ts
+++ b/packages/web-components/fast-element/src/components/attributes.ts
@@ -1,6 +1,7 @@
-import { Accessor, Observable } from "../observation/observable.js";
-import { DOM } from "../dom.js";
-import type { Notifier } from "../observation/notifier.js";
+import { Accessor, Observable } from "../observation/observable";
+import { DOM } from "../dom";
+import type { Notifier } from "../observation/notifier";
+import { isString } from "../interfaces";
 
 /**
  * Represents objects that can convert values to and from
@@ -271,7 +272,7 @@ export class AttributeDefinition implements Accessor {
             for (let j = 0, jj = list.length; j < jj; ++j) {
                 const config = list[j];
 
-                if (typeof config === "string") {
+                if (isString(config)) {
                     attributes.push(new AttributeDefinition(Owner, config));
                 } else {
                     attributes.push(
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.ts b/packages/web-components/fast-element/src/components/fast-definitions.ts
index 4de8fc4f80e..9c698fbfb87 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.ts
@@ -1,8 +1,8 @@
-import { FAST, KernelServiceId } from "../platform.js";
-import { Observable } from "../observation/observable.js";
-import { ComposableStyles, ElementStyles } from "../styles/element-styles.js";
-import type { ElementViewTemplate } from "../templating/template.js";
-import { AttributeConfiguration, AttributeDefinition } from "./attributes.js";
+import { isString, Mutable } from "../interfaces";
+import { Observable } from "../observation/observable";
+import { ComposableStyles, ElementStyles } from "../styles/element-styles";
+import type { ElementViewTemplate } from "../templating/template";
+import { AttributeConfiguration, AttributeDefinition } from "./attributes";
 
 const defaultShadowOptions: ShadowRootInit = { mode: "open" };
 const defaultElementOptions: ElementDefinitionOptions = {};
@@ -129,7 +129,7 @@ export class FASTElementDefinition<TType extends Function = Function> {
         type: TType,
         nameOrConfig: PartialFASTElementDefinition | string = (type as any).definition
     ) {
-        if (typeof nameOrConfig === "string") {
+        if (isString(nameOrConfig)) {
             nameOrConfig = { name: nameOrConfig };
         }
 
diff --git a/packages/web-components/fast-element/src/interfaces.ts b/packages/web-components/fast-element/src/interfaces.ts
index 4e842abc9aa..4a7991af745 100644
--- a/packages/web-components/fast-element/src/interfaces.ts
+++ b/packages/web-components/fast-element/src/interfaces.ts
@@ -20,3 +20,14 @@ export type Constructable<T = {}> = {
 export type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
+
+/**
+ * @internal
+ */
+export const isFunction = (object: any): object is Function =>
+    typeof object === "function";
+
+/**
+ * @internal
+ */
+export const isString = (object: any): object is string => typeof object === "string";
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index bea3a8016bf..c243f78262b 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -1,6 +1,7 @@
 import { DOM } from "../dom";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier";
 import type { Notifier, Subscriber } from "./notifier";
+import { isFunction, isString } from "../interfaces";
 
 const volatileRegex = /(:|&&|\|\||if)/;
 const notifierLookup = new WeakMap<any, Notifier>();
@@ -60,7 +61,7 @@ class DefaultObservableAccessor implements Accessor {
 
             const callback = source[this.callback];
 
-            if (typeof callback === "function") {
+            if (isFunction(callback)) {
                 callback.call(source, oldValue, newValue);
             }
 
@@ -136,7 +137,7 @@ export const Observable = Object.freeze({
      * or a custom accessor that specifies the property name and accessor implementation.
      */
     defineProperty(target: {}, nameOrAccessor: string | Accessor): void {
-        if (typeof nameOrAccessor === "string") {
+        if (isString(nameOrAccessor)) {
             nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
         }
 
diff --git a/packages/web-components/fast-element/src/styles/css.ts b/packages/web-components/fast-element/src/styles/css.ts
index da413894150..dc94edfb349 100644
--- a/packages/web-components/fast-element/src/styles/css.ts
+++ b/packages/web-components/fast-element/src/styles/css.ts
@@ -1,7 +1,8 @@
-import type { FASTElement } from "../components/fast-element.js";
-import type { Behavior } from "../observation/behavior.js";
-import { CSSDirective } from "./css-directive.js";
-import { ComposableStyles, ElementStyles } from "./element-styles.js";
+import type { FASTElement } from "../components/fast-element";
+import { isString } from "../interfaces";
+import type { Behavior } from "../observation/behavior";
+import { CSSDirective } from "./css-directive";
+import { ComposableStyles, ElementStyles } from "./element-styles";
 
 function collectStyles(
     strings: TemplateStringsArray,
@@ -79,7 +80,7 @@ class CSSPartial extends CSSDirective implements Behavior<HTMLElement> {
                 accumulated: Exclude<ComposableStyles, string>[],
                 current: ComposableStyles
             ) => {
-                if (typeof current === "string") {
+                if (isString(current)) {
                     this.css += current;
                 } else {
                     accumulated.push(current);
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index 437f8097cfa..0d9b24722ee 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -1,3 +1,4 @@
+import { isString } from "../interfaces";
 import { NodeObservationDirective, NodeBehaviorOptions } from "./node-observation";
 import type { CaptureType } from "./template";
 
@@ -104,7 +105,7 @@ export class ChildrenDirective extends NodeObservationDirective<
 export function children<T = any>(
     propertyOrOptions: (keyof T & string) | ChildListDirectiveOptions<keyof T & string>
 ): CaptureType<T> {
-    if (typeof propertyOrOptions === "string") {
+    if (isString(propertyOrOptions)) {
         propertyOrOptions = {
             property: propertyOrOptions,
         };
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index e2fc9263df1..8fe9274aa2f 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -8,6 +8,7 @@ import type {
 import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
 import type { ExecutionContext } from "../observation/observable";
 import { bind, oneTime } from "./binding";
+import { isString } from "../interfaces";
 
 const targetIdFrom = (parentId: string, nodeIndex: number) => `${parentId}.${nodeIndex}`;
 const descriptorCache: PropertyDescriptorMap = {};
@@ -130,7 +131,7 @@ function createAggregateBinding(parts: (string | HTMLDirective)[]): HTMLDirectiv
     let aspect: string | undefined;
     const partCount = parts.length;
     const finalParts = parts.map((x: string | InlinableHTMLDirective) => {
-        if (typeof x === "string") {
+        if (isString(x)) {
             return (): string => x;
         }
 
@@ -251,7 +252,7 @@ function compileContent(
             );
         }
 
-        if (typeof currentPart === "string") {
+        if (isString(currentPart)) {
             currentNode.textContent = currentPart;
         } else {
             currentNode.textContent = " ";
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index ce9193fe98c..c1748ce96f2 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -13,6 +13,7 @@ import { emptyArray } from "../platform";
 import { ViewBehaviorTargets, HTMLDirective } from "./html-directive";
 import { HTMLView, SyntheticView } from "./view";
 import type { CaptureType, SyntheticViewTemplate } from "./template";
+import { isFunction } from "../interfaces";
 
 /**
  * Options for configuring repeat behavior.
@@ -356,10 +357,9 @@ export function repeat<TSource = any, TItem = any>(
         | Binding<TSource, SyntheticViewTemplate>,
     options: RepeatOptions = defaultRepeatOptions
 ): CaptureType<TSource> {
-    const templateBinding =
-        typeof templateOrTemplateBinding === "function"
-            ? templateOrTemplateBinding
-            : (): SyntheticViewTemplate => templateOrTemplateBinding;
+    const templateBinding = isFunction(templateOrTemplateBinding)
+        ? templateOrTemplateBinding
+        : (): SyntheticViewTemplate => templateOrTemplateBinding;
 
     return new RepeatDirective<TSource>(itemsBinding, templateBinding, options);
 }
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index a7feff6c71a..c65e4491c5d 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -1,3 +1,4 @@
+import { isString } from "../interfaces";
 import { NodeObservationDirective, NodeBehaviorOptions } from "./node-observation";
 import type { CaptureType } from "./template";
 
@@ -55,7 +56,7 @@ export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveO
 export function slotted<T = any>(
     propertyOrOptions: (keyof T & string) | SlottedDirectiveOptions<keyof T & string>
 ): CaptureType<T> {
-    if (typeof propertyOrOptions === "string") {
+    if (isString(propertyOrOptions)) {
         propertyOrOptions = { property: propertyOrOptions };
     }
 
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index fab81e91a91..97ab51fefad 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -5,6 +5,7 @@ import type { HTMLTemplateCompilationResult } from "./compiler";
 import { ElementView, HTMLView, SyntheticView } from "./view";
 import { HTMLDirective, AspectedHTMLDirective } from "./html-directive";
 import { bind, oneTime } from "./binding";
+import { isFunction, isString } from "../interfaces";
 
 /**
  * A template capable of creating views specifically for rendering custom elements.
@@ -85,7 +86,7 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any>
             let template: HTMLTemplateElement;
             const html = this.html;
 
-            if (typeof html === "string") {
+            if (isString(html)) {
                 template = document.createElement("template");
                 template.innerHTML = DOM.createHTML(html);
 
@@ -171,13 +172,11 @@ export function html<TSource = any, TParent = any, TGrandparent = any>(
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         const currentString = strings[i];
         let currentValue = values[i];
-        const valueType = typeof currentValue;
-
         html += currentString;
 
-        if (valueType === "function") {
+        if (isFunction(currentValue)) {
             currentValue = bind(currentValue as Binding);
-        } else if (valueType !== "string" && !(currentValue instanceof HTMLDirective)) {
+        } else if (!isString(currentValue) && !(currentValue instanceof HTMLDirective)) {
             const capturedValue = currentValue;
             currentValue = bind(() => capturedValue, oneTime);
         }
diff --git a/packages/web-components/fast-element/src/templating/when.ts b/packages/web-components/fast-element/src/templating/when.ts
index dd22bfec978..b2a5cdca59a 100644
--- a/packages/web-components/fast-element/src/templating/when.ts
+++ b/packages/web-components/fast-element/src/templating/when.ts
@@ -1,5 +1,6 @@
-import type { Binding, ExecutionContext } from "../observation/observable.js";
-import type { CaptureType, SyntheticViewTemplate } from "./template.js";
+import { isFunction } from "../interfaces";
+import type { Binding, ExecutionContext } from "../observation/observable";
+import type { CaptureType, SyntheticViewTemplate } from "./template";
 
 /**
  * A directive that enables basic conditional rendering in a template.
@@ -14,10 +15,9 @@ export function when<TSource = any, TReturn = any>(
         | SyntheticViewTemplate
         | Binding<TSource, SyntheticViewTemplate>
 ): CaptureType<TSource> {
-    const getTemplate =
-        typeof templateOrTemplateBinding === "function"
-            ? templateOrTemplateBinding
-            : (): SyntheticViewTemplate => templateOrTemplateBinding;
+    const getTemplate = isFunction(templateOrTemplateBinding)
+        ? templateOrTemplateBinding
+        : (): SyntheticViewTemplate => templateOrTemplateBinding;
 
     return (source: TSource, context: ExecutionContext): SyntheticViewTemplate | null =>
         binding(source, context) ? getTemplate(source, context) : null;

From 2afec8ef1fc6c21c5c3308edff428de244f77c0b Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Sun, 24 Oct 2021 20:41:14 -0400
Subject: [PATCH 041/135] refactor: centralize id generation

---
 packages/web-components/fast-element/src/dom.ts            | 7 +++++--
 packages/web-components/fast-element/src/platform.ts       | 2 +-
 .../fast-element/src/templating/html-directive.ts          | 7 +------
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index a47d2e20d30..a478147b26a 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -30,7 +30,10 @@ function tryRunTask(task: Callable): void {
 }
 
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
-let attrId = 0;
+let id = 0;
+
+/** @internal */
+export const nextId = () => `${marker}-${++id}`;
 
 /** @internal */
 export const _interpolationStart = `${marker}{`;
@@ -112,7 +115,7 @@ export const DOM = Object.freeze({
      * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
      */
     createCustomAttributePlaceholder(index: number): string {
-        return `${marker}-${++attrId}="${this.createInterpolationPlaceholder(index)}"`;
+        return `${nextId()}="${this.createInterpolationPlaceholder(index)}"`;
     },
 
     /**
diff --git a/packages/web-components/fast-element/src/platform.ts b/packages/web-components/fast-element/src/platform.ts
index 4b108898d72..83fbc6a45dc 100644
--- a/packages/web-components/fast-element/src/platform.ts
+++ b/packages/web-components/fast-element/src/platform.ts
@@ -100,7 +100,7 @@ export const $global: Global = (function () {
 })();
 
 // API-only Polyfill for trustedTypes
-if ($global.trustedTypes === void 0) {
+if (!$global.trustedTypes) {
     $global.trustedTypes = { createPolicy: (n: string, r: TrustedTypesPolicy) => r };
 }
 
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index d321e5dad8a..11e7cd7c827 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -1,4 +1,4 @@
-import { DOM } from "../dom";
+import { DOM, nextId } from "../dom";
 import type { Behavior } from "../observation/behavior";
 import type { Binding, ExecutionContext } from "../observation/observable";
 
@@ -58,11 +58,6 @@ export interface ViewBehaviorFactory {
     createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
 }
 
-let directiveId = 0;
-function nextId() {
-    return `fast-${++directiveId}`;
-}
-
 /**
  * Instructs the template engine to apply behavior to a node.
  * @public

From 975d5db28e4383315b24363d5eab58d9d466ffdf Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Sun, 24 Oct 2021 20:48:22 -0400
Subject: [PATCH 042/135] refactor: only export intended types for directives

---
 .../fast-element/docs/api-report.md               | 15 +--------------
 packages/web-components/fast-element/src/index.ts |  9 ++++++++-
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 70cfec1bb69..a4309fed780 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -433,7 +433,7 @@ export class PropertyChangeNotifier implements Notifier {
 // @public
 export function ref<T = any>(propertyName: keyof T & string): CaptureType<T>;
 
-// Warning: (ae-incompatible-release-tags) The symbol "RefDirective" is marked as @public, but its signature references "StatelessAttachedAttributeDirective" which is marked as @internal
+// Warning: (ae-forgotten-export) The symbol "StatelessAttachedAttributeDirective" needs to be exported by the entry point index.d.ts
 //
 // @public
 export class RefDirective extends StatelessAttachedAttributeDirective<string> {
@@ -494,19 +494,6 @@ export interface Splice {
     removed: any[];
 }
 
-// Warning: (ae-internal-missing-underscore) The name "StatelessAttachedAttributeDirective" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal (undocumented)
-export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirective implements ViewBehavior {
-    constructor(options: T);
-    abstract bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
-    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
-    createPlaceholder(index: number): string;
-    // (undocumented)
-    protected options: T;
-    abstract unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
-}
-
 // @public
 export interface StyleTarget {
     adoptedStyleSheets?: CSSStyleSheet[];
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index dfaf540b099..e7ea35b8a32 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -34,7 +34,14 @@ export {
     BindingBehaviorFactory,
     DefaultBindingOptions,
 } from "./templating/binding";
-export * from "./templating/html-directive";
+export {
+    ViewBehaviorTargets,
+    ViewBehavior,
+    ViewBehaviorFactory,
+    HTMLDirective,
+    AspectedHTMLDirective,
+    InlinableHTMLDirective,
+} from "./templating/html-directive";
 export * from "./templating/ref";
 export * from "./templating/when";
 export * from "./templating/repeat";

From c7cf771cf584b3ee65a128182ef6c58950cfabcc Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Sun, 24 Oct 2021 23:14:47 -0400
Subject: [PATCH 043/135] refactor: internal code reduction

---
 .../web-components/fast-element/docs/api-report.md     | 10 +++++-----
 .../fast-element/src/templating/children.ts            |  8 +++-----
 .../fast-element/src/templating/html-directive.ts      |  6 +++---
 .../fast-element/src/templating/node-observation.ts    |  5 ++---
 .../web-components/fast-element/src/templating/ref.ts  |  5 ++---
 5 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index a4309fed780..c29fba09785 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -217,7 +217,7 @@ export const DOM: Readonly<{
 }>;
 
 // @public
-export function elements(selector?: string): ElementsFilter;
+export const elements: (selector?: string | undefined) => ElementsFilter;
 
 // @public
 export type ElementsFilter = (value: Node, index: number, array: Node[]) => boolean;
@@ -325,7 +325,7 @@ export abstract class HTMLDirective implements ViewBehaviorFactory {
     abstract createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
     abstract createPlaceholder(index: number): string;
     targetId: string;
-    uniqueId: string;
+    readonly uniqueId: string;
 }
 
 // @public
@@ -354,9 +354,9 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implemen
 // @public (undocumented)
 export abstract class InlinableHTMLDirective extends AspectedHTMLDirective {
     // (undocumented)
-    abstract binding: Binding;
+    abstract readonly binding: Binding;
     // (undocumented)
-    abstract rawAspect?: string;
+    abstract readonly rawAspect?: string;
 }
 
 // Warning: (ae-internal-missing-underscore) The name "Mutable" should be prefixed with an underscore because the declaration is marked as @internal
@@ -431,7 +431,7 @@ export class PropertyChangeNotifier implements Notifier {
 }
 
 // @public
-export function ref<T = any>(propertyName: keyof T & string): CaptureType<T>;
+export const ref: <T = any>(propertyName: keyof T & string) => CaptureType<T>;
 
 // Warning: (ae-forgotten-export) The symbol "StatelessAttachedAttributeDirective" needs to be exported by the entry point index.d.ts
 //
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index 0d9b24722ee..85419d018eb 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -58,10 +58,9 @@ export class ChildrenDirective extends NodeObservationDirective<
      * @param target - The target to observe.
      */
     observe(target: any) {
-        const observerId = `${this.targetId}-observer`;
         const observer =
-            target[observerId] ??
-            (target[observerId] = new MutationObserver(this.handleEvent));
+            target[this.uniqueId] ??
+            (target[this.uniqueId] = new MutationObserver(this.handleEvent));
         observer.$fastTarget = target;
         observer.observe(target, this.options);
     }
@@ -71,8 +70,7 @@ export class ChildrenDirective extends NodeObservationDirective<
      * @param target - The target to unobserve.
      */
     disconnect(target: any) {
-        const observerId = `${this.targetId}-observer`;
-        const observer = target[observerId];
+        const observer = target[this.uniqueId];
         observer.$fastTarget = null;
         observer.disconnect();
     }
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 11e7cd7c827..d7cc532c76c 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -72,7 +72,7 @@ export abstract class HTMLDirective implements ViewBehaviorFactory {
     /**
      * The unique id of the directive instance.
      */
-    public uniqueId: string = nextId();
+    public readonly uniqueId: string = nextId();
 
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -104,8 +104,8 @@ export abstract class AspectedHTMLDirective extends HTMLDirective {
 }
 
 export abstract class InlinableHTMLDirective extends AspectedHTMLDirective {
-    abstract binding: Binding;
-    abstract rawAspect?: string;
+    abstract readonly binding: Binding;
+    abstract readonly rawAspect?: string;
 }
 
 /** @internal */
diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index 76e222dbdeb..489b3e6569c 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -39,11 +39,10 @@ const selectElements = value => value.nodeType === 1;
  * @param selector - An optional selector to restrict the filter to.
  * @public
  */
-export function elements(selector?: string): ElementsFilter {
-    return selector
+export const elements = (selector?: string): ElementsFilter =>
+    selector
         ? value => value.nodeType === 1 && (value as HTMLElement).matches(selector)
         : selectElements;
-}
 
 /**
  * A base class for node observation.
diff --git a/packages/web-components/fast-element/src/templating/ref.ts b/packages/web-components/fast-element/src/templating/ref.ts
index e0c176b7795..fb4d47a795e 100644
--- a/packages/web-components/fast-element/src/templating/ref.ts
+++ b/packages/web-components/fast-element/src/templating/ref.ts
@@ -37,6 +37,5 @@ export class RefDirective extends StatelessAttachedAttributeDirective<string> {
  * @param propertyName - The name of the property to assign the reference to.
  * @public
  */
-export function ref<T = any>(propertyName: keyof T & string): CaptureType<T> {
-    return new RefDirective(propertyName);
-}
+export const ref = <T = any>(propertyName: keyof T & string): CaptureType<T> =>
+    new RefDirective(propertyName);

From dadcc40e5b50d8f4d4f9e5b79c7a4efe566c01e2 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Mon, 25 Oct 2021 23:10:56 -0400
Subject: [PATCH 044/135] refactor: consolidate more unique id logic

---
 .../fast-element/src/styles/element-styles.ts        | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index 95f22f5703f..57dc196b334 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior.js";
-import { DOM } from "../dom.js";
+import type { Behavior } from "../observation/behavior";
+import { DOM, nextId } from "../dom";
 
 /**
  * A node that can be targeted by styles.
@@ -195,12 +195,6 @@ export class AdoptedStyleSheetsStyles extends ElementStyles {
     }
 }
 
-let styleClassId = 0;
-
-function getNextStyleClass(): string {
-    return `fast-style-class-${++styleClassId}`;
-}
-
 /**
  * @internal
  */
@@ -211,7 +205,7 @@ export class StyleElementStyles extends ElementStyles {
     public constructor(styles: ComposableStyles[]) {
         super(styles, reduceBehaviors(styles));
         this.styleSheets = reduceStyles(styles) as string[];
-        this.styleClass = getNextStyleClass();
+        this.styleClass = nextId();
     }
 
     public addStylesTo(target: StyleTarget): void {

From 97b4b9a0448f2a89d7fa74e065ab200de7c7b2e6 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 26 Oct 2021 09:51:25 -0400
Subject: [PATCH 045/135] chore: fix module import path

---
 .../web-components/fast-element/src/templating/view.ts     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index 3f255367e51..36eca6e8cf0 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -1,7 +1,10 @@
-import type { ViewBehavior } from "..";
 import type { Behavior } from "../observation/behavior";
 import type { ExecutionContext } from "../observation/observable";
-import type { ViewBehaviorTargets, ViewBehaviorFactory } from "./html-directive";
+import type {
+    ViewBehaviorTargets,
+    ViewBehaviorFactory,
+    ViewBehavior,
+} from "./html-directive";
 
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.

From d7cbe1153d42964076377c43d42710b54b2d4887 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 28 Oct 2021 23:56:06 -0400
Subject: [PATCH 046/135] feat: signal bindings and refactoring of binding type
 APIs

---
 .../fast-element/docs/api-report.md           |  20 +-
 .../fast-element/src/templating/binding.ts    | 176 +++++++++++++-----
 2 files changed, 141 insertions(+), 55 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index c29fba09785..34174aa7810 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -61,7 +61,7 @@ export interface Behavior<TSource = any, TParent = any, TGrandparent = any> {
 }
 
 // @public (undocumented)
-export function bind<T = any>(binding: Binding, config?: BindingConfig | DefaultBindingOptions): CaptureType<T>;
+export function bind<T = any>(binding: Binding<T>, config?: BindingConfig<T> | DefaultBindingOptions): CaptureType<T>;
 
 // @public
 export type Binding<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
@@ -72,7 +72,7 @@ export type BindingBehaviorFactory = {
 };
 
 // @public (undocumented)
-export interface BindingConfig {
+export interface BindingConfig<T = any> {
     // (undocumented)
     mode: BindingMode;
     // (undocumented)
@@ -82,17 +82,17 @@ export interface BindingConfig {
 // @public (undocumented)
 export interface BindingMode {
     // (undocumented)
-    attribute?: BindingType;
+    attribute: BindingType;
     // (undocumented)
-    booleanAttribute?: BindingType;
+    booleanAttribute: BindingType;
     // (undocumented)
-    content?: BindingType;
+    content: BindingType;
     // (undocumented)
-    event?: BindingType;
+    event: BindingType;
     // (undocumented)
-    property?: BindingType;
+    property: BindingType;
     // (undocumented)
-    tokenList?: BindingType;
+    tokenList: BindingType;
 }
 
 // @public
@@ -406,10 +406,10 @@ export interface ObservationRecord {
 }
 
 // @public (undocumented)
-export const onChange: BindingConfig & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
+export const onChange: BindingConfig<any> & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
 
 // @public (undocumented)
-export const oneTime: BindingConfig & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
+export const oneTime: BindingConfig<any> & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
 
 // @public
 export interface PartialFASTElementDefinition {
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 72cfffb71aa..a0a443fe8f7 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,5 +1,6 @@
 import { DOM } from "../dom";
-import type { Constructable, Mutable } from "../interfaces";
+import { isString, Mutable } from "../interfaces";
+import { PropertyChangeNotifier } from "../observation/notifier";
 import {
     Binding,
     BindingObserver,
@@ -20,17 +21,20 @@ export type BindingBehaviorFactory = {
 };
 
 export type BindingType = (directive: HTMLBindingDirective) => BindingBehaviorFactory;
+export const notSupportedBindingType: BindingType = () => {
+    throw new Error();
+};
 
 export interface BindingMode {
-    attribute?: BindingType;
-    booleanAttribute?: BindingType;
-    property?: BindingType;
-    content?: BindingType;
-    tokenList?: BindingType;
-    event?: BindingType;
+    attribute: BindingType;
+    booleanAttribute: BindingType;
+    property: BindingType;
+    content: BindingType;
+    tokenList: BindingType;
+    event: BindingType;
 }
 
-export interface BindingConfig {
+export interface BindingConfig<T = any> {
     mode: BindingMode;
     options: any;
 }
@@ -64,7 +68,39 @@ class TargetUpdateBinding extends BindingBase {
         super(directive);
     }
 
-    static createType(updateTarget: UpdateTarget) {
+    static createBindingConfig<T>(defaultOptions: T, eventType?: BindingType) {
+        const config: BindingConfig &
+            ((options?: typeof defaultOptions) => BindingConfig) = (
+            options: typeof defaultOptions
+        ): BindingConfig => {
+            return {
+                mode: config.mode,
+                options: Object.assign({}, defaultOptions, options),
+            };
+        };
+
+        config.options = defaultOptions;
+        config.mode = this.createBindingMode(eventType);
+
+        return config;
+    }
+
+    static createBindingMode(
+        eventType: BindingType = notSupportedBindingType
+    ): BindingMode {
+        return Object.freeze({
+            attribute: this.createType(DOM.setAttribute),
+            booleanAttribute: this.createType(DOM.setBooleanAttribute),
+            property: this.createType(
+                (target, aspect, value) => (target[aspect] = value)
+            ),
+            content: createContentBinding(this).createType(updateContentTarget),
+            tokenList: this.createType(updateTokenListTarget),
+            event: eventType,
+        });
+    }
+
+    private static createType(updateTarget: UpdateTarget) {
         return directive => new this(directive, updateTarget);
     }
 }
@@ -83,6 +119,69 @@ class OneTimeBinding extends TargetUpdateBinding {
     }
 }
 
+const signals = new PropertyChangeNotifier({});
+
+export function sendSignal(signal: string) {
+    signals.notify(signal);
+}
+
+class OnSignalBinding extends TargetUpdateBinding {
+    bind(
+        source: any,
+        context: ExecutionContext<any, any>,
+        targets: ViewBehaviorTargets
+    ): void {
+        const handler = this.getOrCreateHandler(source, context, targets);
+        handler.handleChange();
+        signals.subscribe(handler, this.getSignal(source, context));
+    }
+
+    unbind(
+        source: any,
+        context: ExecutionContext<any, any>,
+        targets: ViewBehaviorTargets
+    ): void {
+        const directive = this.directive;
+        const target = targets[directive.targetId];
+        signals.unsubscribe(target[directive.uniqueId], this.getSignal(source, context));
+    }
+
+    private getSignal(source: any, context: ExecutionContext<any, any>) {
+        const options = this.directive.options;
+        return isString(options) ? options : options(source, context);
+    }
+
+    private getOrCreateHandler(
+        source: any,
+        context: ExecutionContext<any, any>,
+        targets: ViewBehaviorTargets
+    ) {
+        const directive = this.directive;
+        const target = targets[directive.targetId];
+        let handler = target[directive.uniqueId];
+
+        if (!handler) {
+            handler = {
+                target,
+                directive,
+                handleChange() {
+                    this.directive.updateTarget(
+                        this.target,
+                        this.directive.aspect,
+                        this.directive.binding(this.source, this.context),
+                        this.source,
+                        this.context
+                    );
+                },
+            };
+        }
+
+        handler.source = source;
+        handler.context = context;
+        return handler;
+    }
+}
+
 class OnChangeBinding extends TargetUpdateBinding {
     private isBindingVolatile: boolean;
 
@@ -340,34 +439,21 @@ const defaultBindingOptions: DefaultBindingOptions = {
     capture: false,
 };
 
-function createBindingConfig(
-    Base: typeof TargetUpdateBinding,
-    Listener: Constructable<EventListener>
-) {
-    const config: BindingConfig & ((options?: DefaultBindingOptions) => BindingConfig) = (
-        options: DefaultBindingOptions
-    ): BindingConfig => {
-        return {
-            mode: config.mode,
-            options: Object.assign({}, defaultBindingOptions, options),
-        };
-    };
+export const onChange = OnChangeBinding.createBindingConfig(
+    defaultBindingOptions,
+    directive => new EventListener(directive)
+);
 
-    config.options = defaultBindingOptions;
-    config.mode = Object.freeze({
-        attribute: Base.createType(DOM.setAttribute),
-        booleanAttribute: Base.createType(DOM.setBooleanAttribute),
-        property: Base.createType((target, aspect, value) => (target[aspect] = value)),
-        content: createContentBinding(Base).createType(updateContentTarget),
-        tokenList: Base.createType(updateTokenListTarget),
-        event: directive => new Listener(directive),
-    });
-
-    return config;
-}
+export const oneTime = OneTimeBinding.createBindingConfig(
+    defaultBindingOptions,
+    directive => new OneTimeEventListener(directive)
+);
 
-export const onChange = createBindingConfig(OnChangeBinding, EventListener);
-export const oneTime = createBindingConfig(OneTimeBinding, OneTimeEventListener);
+const signalMode: BindingMode = OnSignalBinding.createBindingMode();
+
+export const signal = <T = any>(options: string | Binding<T>): BindingConfig<T> => {
+    return { mode: signalMode, options };
+};
 
 /**
  * @internal
@@ -401,44 +487,44 @@ export class HTMLBindingDirective extends InlinableHTMLDirective {
                         const binding = this.binding;
                         /* eslint-disable-next-line */
                         this.binding = (s, c) => DOM.createHTML(binding(s, c));
-                        this.factory = this.mode.property!(this);
+                        this.factory = this.mode.property(this);
                         break;
                     case "classList":
-                        this.factory = this.mode.tokenList!(this);
+                        this.factory = this.mode.tokenList(this);
                         break;
                     default:
-                        this.factory = this.mode.property!(this);
+                        this.factory = this.mode.property(this);
                         break;
                 }
                 break;
             case "?":
                 (this as Mutable<this>).aspect = value.substr(1);
-                this.factory = this.mode.booleanAttribute!(this);
+                this.factory = this.mode.booleanAttribute(this);
                 break;
             case "@":
                 (this as Mutable<this>).aspect = value.substr(1);
-                this.factory = this.mode.event!(this);
+                this.factory = this.mode.event(this);
                 break;
             default:
                 if (value === "class") {
                     (this as Mutable<this>).aspect = "className";
-                    this.factory = this.mode.property!(this);
+                    this.factory = this.mode.property(this);
                 } else {
                     (this as Mutable<this>).aspect = value;
-                    this.factory = this.mode.attribute!(this);
+                    this.factory = this.mode.attribute(this);
                 }
                 break;
         }
     }
 
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
-        return (this.factory ?? this.mode.content!(this)).createBehavior(targets);
+        return (this.factory ?? this.mode.content(this)).createBehavior(targets);
     }
 }
 
 export function bind<T = any>(
-    binding: Binding,
-    config: BindingConfig | DefaultBindingOptions = onChange
+    binding: Binding<T>,
+    config: BindingConfig<T> | DefaultBindingOptions = onChange
 ): CaptureType<T> {
     if (!("mode" in config)) {
         config = onChange(config);

From 7adbf894963592bae2eb4abd028e3f3bf77aa1a8 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 2 Nov 2021 10:36:49 -0400
Subject: [PATCH 047/135] refactor(controller): minor internal improvements

---
 .../fast-element/src/components/controller.ts      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index 150911fb744..1eb174f272d 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -16,7 +16,7 @@ const defaultEventOptions: CustomEventInit = {
 };
 
 function getShadowRoot(element: HTMLElement): ShadowRoot | null {
-    return element.shadowRoot || shadowRoots.get(element) || null;
+    return element.shadowRoot ?? shadowRoots.get(element) ?? null;
 }
 
 /**
@@ -210,7 +210,7 @@ export class Controller extends PropertyChangeNotifier {
      * @param behaviors - The behaviors to add.
      */
     public addBehaviors(behaviors: ReadonlyArray<Behavior<HTMLElement>>): void {
-        const targetBehaviors = this.behaviors || (this.behaviors = new Map());
+        const targetBehaviors = this.behaviors ?? (this.behaviors = new Map());
         const length = behaviors.length;
         const behaviorsToBind: Behavior<HTMLElement>[] = [];
 
@@ -292,7 +292,7 @@ export class Controller extends PropertyChangeNotifier {
         const behaviors = this.behaviors;
 
         if (behaviors !== null) {
-            for (const [behavior] of behaviors) {
+            for (const behavior of behaviors.keys()) {
                 behavior.bind(element, defaultExecutionContext);
             }
         }
@@ -320,7 +320,7 @@ export class Controller extends PropertyChangeNotifier {
 
         if (behaviors !== null) {
             const element = this.element;
-            for (const [behavior] of behaviors) {
+            for (const behavior of behaviors.keys()) {
                 behavior.unbind(element, defaultExecutionContext);
             }
         }
@@ -391,7 +391,7 @@ export class Controller extends PropertyChangeNotifier {
                 this._template = (this.element as any).resolveTemplate();
             } else if (definition.template) {
                 // 3. Default to the static definition.
-                this._template = definition.template || null;
+                this._template = definition.template ?? null;
             }
         }
 
@@ -409,7 +409,7 @@ export class Controller extends PropertyChangeNotifier {
                 this._styles = (this.element as any).resolveStyles();
             } else if (definition.styles) {
                 // 3. Default to the static definition.
-                this._styles = definition.styles || null;
+                this._styles = definition.styles ?? null;
             }
         }
 
@@ -426,7 +426,7 @@ export class Controller extends PropertyChangeNotifier {
         // When getting the host to render to, we start by looking
         // up the shadow root. If there isn't one, then that means
         // we're doing a Light DOM render to the element's direct children.
-        const host = getShadowRoot(element) || element;
+        const host = getShadowRoot(element) ?? element;
 
         if (this.view !== null) {
             // If there's already a view, we need to unbind and remove through dispose.

From 4a5152318a37bf6ff9d5a5474f918306e8bcbaee Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 2 Nov 2021 12:38:24 -0400
Subject: [PATCH 048/135] refactor(attributes): reduce some duplication

---
 .../fast-element/src/components/attributes.ts | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/web-components/fast-element/src/components/attributes.ts b/packages/web-components/fast-element/src/components/attributes.ts
index b9e0fb24510..e70ce543b02 100644
--- a/packages/web-components/fast-element/src/components/attributes.ts
+++ b/packages/web-components/fast-element/src/components/attributes.ts
@@ -64,20 +64,24 @@ export const booleanConverter: ValueConverter = {
     },
 
     fromView(value: any): any {
-        if (
-            value === null ||
+        return value === null ||
             value === void 0 ||
             value === "false" ||
             value === false ||
             value === 0
-        ) {
-            return false;
-        }
-
-        return true;
+            ? false
+            : true;
     },
 };
 
+function toNumber(value: any): any {
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const number: number = value * 1;
+    return isNaN(number) ? null : number;
+}
+
 /**
  * A {@link ValueConverter} that converts to and from `number` values.
  * @remarks
@@ -87,20 +91,11 @@ export const booleanConverter: ValueConverter = {
  */
 export const nullableNumberConverter: ValueConverter = {
     toView(value: any): string | null {
-        if (value === null || value === undefined) {
-            return null;
-        }
-        const number: number = value * 1;
-        return isNaN(number) ? null : number.toString();
+        const output = toNumber(value);
+        return output ? output.toString() : output;
     },
 
-    fromView(value: any): any {
-        if (value === null || value === undefined) {
-            return null;
-        }
-        const number: number = value * 1;
-        return isNaN(number) ? null : number;
-    },
+    fromView: toNumber,
 };
 
 /**

From 913f6214f75ec9b85e681e0d7e73a3e2ebd68f4e Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 2 Nov 2021 13:15:52 -0400
Subject: [PATCH 049/135] fix(binding): bug in location of update target

---
 .../fast-element/src/observation/array-change-records.ts       | 2 +-
 packages/web-components/fast-element/src/templating/binding.ts | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/fast-element/src/observation/array-change-records.ts b/packages/web-components/fast-element/src/observation/array-change-records.ts
index aad738b58ac..33d416e966c 100644
--- a/packages/web-components/fast-element/src/observation/array-change-records.ts
+++ b/packages/web-components/fast-element/src/observation/array-change-records.ts
@@ -245,7 +245,7 @@ export function calcSplices(
     oldEnd -= suffixCount;
 
     if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
-        return emptyArray;
+        return emptyArray as any;
     }
 
     if (currentStart === currentEnd) {
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index a0a443fe8f7..bd55b687160 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -164,8 +164,9 @@ class OnSignalBinding extends TargetUpdateBinding {
             handler = {
                 target,
                 directive,
+                updateTarget: this.updateTarget,
                 handleChange() {
-                    this.directive.updateTarget(
+                    this.updateTarget(
                         this.target,
                         this.directive.aspect,
                         this.directive.binding(this.source, this.context),

From d3d32bad2a4b3d34929cec2521c97757cbf6435e Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Thu, 4 Nov 2021 17:34:10 -0400
Subject: [PATCH 050/135] refactor: modernize the splice code

---
 .../fast-element/docs/api-report.md           |   8 +-
 .../src/observation/array-change-records.ts   | 169 ++++++++----------
 .../src/observation/array-observer.ts         |  34 +---
 3 files changed, 91 insertions(+), 120 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 34174aa7810..bfb4247549b 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -488,9 +488,15 @@ export interface SlottedDirectiveOptions<T = any> extends NodeBehaviorOptions<T>
 }
 
 // @public
-export interface Splice {
+export class Splice {
+    constructor(
+    index: number,
+    removed: any[],
+    addedCount: number);
     addedCount: number;
     index: number;
+    // (undocumented)
+    static normalize(previous: unknown[] | undefined, current: unknown[], changes: Splice[] | undefined): Splice[] | undefined;
     removed: any[];
 }
 
diff --git a/packages/web-components/fast-element/src/observation/array-change-records.ts b/packages/web-components/fast-element/src/observation/array-change-records.ts
index 33d416e966c..695b0312bf9 100644
--- a/packages/web-components/fast-element/src/observation/array-change-records.ts
+++ b/packages/web-components/fast-element/src/observation/array-change-records.ts
@@ -1,40 +1,12 @@
 import { emptyArray } from "../platform.js";
 
-/**
- * Represents a set of splice-based changes against an Array.
- * @public
- */
-export interface Splice {
-    /**
-     * The index that the splice occurs at.
-     */
-    index: number;
-
-    /**
-     * The items that were removed.
-     */
-    removed: any[];
-
-    /**
-     * The  number of items that were added.
-     */
-    addedCount: number;
+const enum Edit {
+    leave = 0,
+    update = 1,
+    add = 2,
+    delete = 3,
 }
 
-/** @internal */
-export function newSplice(index: number, removed: any[], addedCount: number): Splice {
-    return {
-        index: index,
-        removed: removed,
-        addedCount: addedCount,
-    };
-}
-
-const EDIT_LEAVE = 0;
-const EDIT_UPDATE = 1;
-const EDIT_ADD = 2;
-const EDIT_DELETE = 3;
-
 // Note: This function is *based* on the computation of the Levenshtein
 // "edit" distance. The one change is that "updates" are treated as two
 // edits - not one. With Array splices, an update is really a delete
@@ -98,12 +70,12 @@ function spliceOperationsFromEditDistances(distances: number[][]): number[] {
 
     while (i > 0 || j > 0) {
         if (i === 0) {
-            edits.push(EDIT_ADD);
+            edits.push(Edit.add);
             j--;
             continue;
         }
         if (j === 0) {
-            edits.push(EDIT_DELETE);
+            edits.push(Edit.delete);
             i--;
             continue;
         }
@@ -121,19 +93,19 @@ function spliceOperationsFromEditDistances(distances: number[][]): number[] {
 
         if (min === northWest) {
             if (northWest === current) {
-                edits.push(EDIT_LEAVE);
+                edits.push(Edit.leave);
             } else {
-                edits.push(EDIT_UPDATE);
+                edits.push(Edit.update);
                 current = northWest;
             }
             i--;
             j--;
         } else if (min === west) {
-            edits.push(EDIT_DELETE);
+            edits.push(Edit.delete);
             i--;
             current = west;
         } else {
-            edits.push(EDIT_ADD);
+            edits.push(Edit.add);
             j--;
             current = north;
         }
@@ -194,21 +166,6 @@ function intersect(start1: number, end1: number, start2: number, end2: number):
 }
 
 /**
- * Splice Projection functions:
- *
- * A splice map is a representation of how a previous array of items
- * was transformed into a new array of items. Conceptually it is a list of
- * tuples of
- *
- *   <index, removed, addedCount>
- *
- * which are kept in ascending index order of. The tuple represents that at
- * the |index|, |removed| sequence of items were removed, and counting forward
- * from |index|, |addedCount| items were added.
- */
-
-/**
- * @internal
  * @remarks
  * Lacking individual splice mutation information, the minimal set of
  * splices can be synthesized given the previous state and final state of an
@@ -219,14 +176,14 @@ function intersect(start1: number, end1: number, start2: number, end2: number):
  *   l: The length of the current array
  *   p: The length of the old array
  */
-export function calcSplices(
-    current: any[],
+function calc(
+    current: unknown[],
     currentStart: number,
     currentEnd: number,
-    old: any[],
+    old: unknown[],
     oldStart: number,
     oldEnd: number
-): ReadonlyArray<never> | Splice[] {
+): Splice[] {
     let prefixCount = 0;
     let suffixCount = 0;
 
@@ -249,7 +206,7 @@ export function calcSplices(
     }
 
     if (currentStart === currentEnd) {
-        const splice = newSplice(currentStart, [], 0);
+        const splice = new Splice(currentStart, [], 0);
 
         while (oldStart < oldEnd) {
             splice.removed.push(old[oldStart++]);
@@ -257,7 +214,7 @@ export function calcSplices(
 
         return [splice];
     } else if (oldStart === oldEnd) {
-        return [newSplice(currentStart, [], currentEnd - currentStart)];
+        return [new Splice(currentStart, [], currentEnd - currentStart)];
     }
 
     const ops = spliceOperationsFromEditDistances(
@@ -271,7 +228,7 @@ export function calcSplices(
 
     for (let i = 0; i < ops.length; ++i) {
         switch (ops[i]) {
-            case EDIT_LEAVE:
+            case Edit.leave:
                 if (splice !== void 0) {
                     splices.push(splice);
                     splice = void 0;
@@ -280,9 +237,9 @@ export function calcSplices(
                 index++;
                 oldIndex++;
                 break;
-            case EDIT_UPDATE:
+            case Edit.update:
                 if (splice === void 0) {
-                    splice = newSplice(index, [], 0);
+                    splice = new Splice(index, [], 0);
                 }
 
                 splice.addedCount++;
@@ -291,17 +248,17 @@ export function calcSplices(
                 splice.removed.push(old[oldIndex]);
                 oldIndex++;
                 break;
-            case EDIT_ADD:
+            case Edit.add:
                 if (splice === void 0) {
-                    splice = newSplice(index, [], 0);
+                    splice = new Splice(index, [], 0);
                 }
 
                 splice.addedCount++;
                 index++;
                 break;
-            case EDIT_DELETE:
+            case Edit.delete:
                 if (splice === void 0) {
-                    splice = newSplice(index, [], 0);
+                    splice = new Splice(index, [], 0);
                 }
 
                 splice.removed.push(old[oldIndex]);
@@ -318,15 +275,7 @@ export function calcSplices(
     return splices;
 }
 
-const $push = Array.prototype.push;
-
-function mergeSplice(
-    splices: Splice[],
-    index: number,
-    removed: any[],
-    addedCount: number
-): void {
-    const splice = newSplice(index, removed, addedCount);
+function merge(splice: Splice, splices: Splice[]): void {
     let inserted = false;
     let insertionOffset = 0;
 
@@ -366,7 +315,7 @@ function mergeSplice(
                 if (splice.index < current.index) {
                     // some prefix of splice.removed is prepended to current.removed.
                     const prepend = splice.removed.slice(0, current.index - splice.index);
-                    $push.apply(prepend, currentRemoved);
+                    prepend.push(...currentRemoved);
                     currentRemoved = prepend;
                 }
 
@@ -378,7 +327,7 @@ function mergeSplice(
                     const append = splice.removed.slice(
                         current.index + current.addedCount - splice.index
                     );
-                    $push.apply(currentRemoved, append);
+                    currentRemoved.push(...append);
                 }
 
                 splice.removed = currentRemoved;
@@ -389,7 +338,6 @@ function mergeSplice(
             }
         } else if (splice.index < current.index) {
             // Insert splice here.
-
             inserted = true;
 
             splices.splice(i, 0, splice);
@@ -406,22 +354,14 @@ function mergeSplice(
     }
 }
 
-function createInitialSplices(changeRecords: Splice[]): Splice[] {
-    const splices: Splice[] = [];
+function project(array: unknown[], changes: Splice[]): Splice[] {
+    let splices: Splice[] = [];
+    const initialSplices: Splice[] = [];
 
-    for (let i = 0, ii = changeRecords.length; i < ii; i++) {
-        const record = changeRecords[i];
-        mergeSplice(splices, record.index, record.removed, record.addedCount);
+    for (let i = 0, ii = changes.length; i < ii; i++) {
+        merge(changes[i], initialSplices);
     }
 
-    return splices;
-}
-
-/** @internal */
-export function projectArraySplices(array: any[], changeRecords: any[]): Splice[] {
-    let splices: Splice[] = [];
-    const initialSplices = createInitialSplices(changeRecords);
-
     for (let i = 0, ii = initialSplices.length; i < ii; ++i) {
         const splice = initialSplices[i];
 
@@ -434,7 +374,7 @@ export function projectArraySplices(array: any[], changeRecords: any[]): Splice[
         }
 
         splices = splices.concat(
-            calcSplices(
+            calc(
                 array,
                 splice.index,
                 splice.index + splice.addedCount,
@@ -447,3 +387,46 @@ export function projectArraySplices(array: any[], changeRecords: any[]): Splice[
 
     return splices;
 }
+
+/**
+ * A splice map is a representation of how a previous array of items
+ * was transformed into a new array of items. Conceptually it is a list of
+ * tuples of
+ *
+ *   <index, removed, addedCount>
+ *
+ * which are kept in ascending index order of. The tuple represents that at
+ * the |index|, |removed| sequence of items were removed, and counting forward
+ * from |index|, |addedCount| items were added.
+ * @public
+ */
+export class Splice {
+    constructor(
+        /**
+         * The index that the splice occurs at.
+         */
+        public index: number,
+
+        /**
+         * The items that were removed.
+         */
+        public removed: any[],
+
+        /**
+         * The  number of items that were added.
+         */
+        public addedCount: number
+    ) {}
+
+    static normalize(
+        previous: unknown[] | undefined,
+        current: unknown[],
+        changes: Splice[] | undefined
+    ) {
+        return previous === void 0
+            ? changes!.length > 1
+                ? project(current, changes!)
+                : changes
+            : calc(current, 0, current.length, previous, 0, previous.length);
+    }
+}
diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index 33af938c546..0ba48efe0d0 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -16,17 +16,13 @@ function adjustIndex(changeRecord: Splice, array: any[]): Splice {
             arrayLength + changeRecord.removed.length + index - changeRecord.addedCount;
     }
 
-    if (index < 0) {
-        index = 0;
-    }
-
-    changeRecord.index = index;
+    changeRecord.index = index < 0 ? 0 : index;
     return changeRecord;
 }
 
 class ArrayObserver extends SubscriberSet {
     private oldCollection: any[] | undefined = void 0;
-    private splices: any[] | undefined = void 0;
+    private splices: Splice[] | undefined = void 0;
     private needsQueue: boolean = true;
     call: () => void = this.flush;
 
@@ -67,21 +63,7 @@ class ArrayObserver extends SubscriberSet {
         this.splices = void 0;
         this.oldCollection = void 0;
 
-        const finalSplices =
-            oldCollection === void 0
-                ? splices!.length > 1
-                    ? projectArraySplices(this.subject, splices!)
-                    : splices
-                : calcSplices(
-                      this.subject,
-                      0,
-                      this.subject.length,
-                      oldCollection,
-                      0,
-                      oldCollection.length
-                  );
-
-        this.notify(finalSplices);
+        this.notify(Splice.normalize(oldCollection, this.subject, splices));
     }
 
     private enqueue() {
@@ -107,7 +89,7 @@ const arrayOverrides = {
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0 && notEmpty) {
-            o.addSplice(newSplice(this.length, [result], 0));
+            o.addSplice(new Splice(this.length, [result], 0));
         }
 
         return result;
@@ -120,7 +102,7 @@ const arrayOverrides = {
         if (o !== void 0) {
             o.addSplice(
                 adjustIndex(
-                    newSplice(this.length - arguments.length, [], arguments.length),
+                    new Splice(this.length - arguments.length, [], arguments.length),
                     this
                 )
             );
@@ -153,7 +135,7 @@ const arrayOverrides = {
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0 && notEmpty) {
-            o.addSplice(newSplice(0, [result], 0));
+            o.addSplice(new Splice(0, [result], 0));
         }
 
         return result;
@@ -184,7 +166,7 @@ const arrayOverrides = {
         if (o !== void 0) {
             o.addSplice(
                 adjustIndex(
-                    newSplice(
+                    new Splice(
                         +arguments[0],
                         result,
                         arguments.length > 2 ? arguments.length - 2 : 0
@@ -202,7 +184,7 @@ const arrayOverrides = {
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
-            o.addSplice(adjustIndex(newSplice(0, [], arguments.length), this));
+            o.addSplice(adjustIndex(new Splice(0, [], arguments.length), this));
         }
 
         return result;

From 4e88dd70fa8ff8746d99c194ac1db55e0f64f0f7 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Fri, 5 Nov 2021 09:41:18 -0400
Subject: [PATCH 051/135] refactor: small simplification in array change
 records

---
 .../fast-element/src/observation/array-change-records.ts       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/web-components/fast-element/src/observation/array-change-records.ts b/packages/web-components/fast-element/src/observation/array-change-records.ts
index 695b0312bf9..46194a9e1e4 100644
--- a/packages/web-components/fast-element/src/observation/array-change-records.ts
+++ b/packages/web-components/fast-element/src/observation/array-change-records.ts
@@ -111,8 +111,7 @@ function spliceOperationsFromEditDistances(distances: number[][]): number[] {
         }
     }
 
-    edits.reverse();
-    return edits;
+    return edits.reverse();
 }
 
 function sharedPrefix(current: any[], old: any[], searchLength: number): number {

From 9453999b0eb9a1ad9568a113a5b1fe3dcc797f8b Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Fri, 5 Nov 2021 10:34:09 -0400
Subject: [PATCH 052/135] perf: use less memory and reduce code for signal
 bindings

---
 .../fast-element/src/templating/binding.ts    | 83 ++++++++++---------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index bd55b687160..28d75cf4df6 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,6 +1,5 @@
 import { DOM } from "../dom";
 import { isString, Mutable } from "../interfaces";
-import { PropertyChangeNotifier } from "../observation/notifier";
 import {
     Binding,
     BindingObserver,
@@ -119,10 +118,13 @@ class OneTimeBinding extends TargetUpdateBinding {
     }
 }
 
-const signals = new PropertyChangeNotifier({});
+const signals: Record<string, undefined | Function | Function[]> = Object.create(null);
 
 export function sendSignal(signal: string) {
-    signals.notify(signal);
+    const found = signals[signal];
+    if (found) {
+        Array.isArray(found) ? found.forEach(x => x()) : found();
+    }
 }
 
 class OnSignalBinding extends TargetUpdateBinding {
@@ -131,9 +133,30 @@ class OnSignalBinding extends TargetUpdateBinding {
         context: ExecutionContext<any, any>,
         targets: ViewBehaviorTargets
     ): void {
-        const handler = this.getOrCreateHandler(source, context, targets);
-        handler.handleChange();
-        signals.subscribe(handler, this.getSignal(source, context));
+        const directive = this.directive;
+        const target = targets[directive.targetId];
+        const signal = this.getSignal(source, context);
+        const handler = (target[directive.uniqueId] = () => {
+            this.updateTarget(
+                target,
+                directive.aspect!,
+                directive.binding(source, context),
+                source,
+                context
+            );
+        });
+
+        handler();
+
+        const found = signals[signal];
+
+        if (found) {
+            Array.isArray(found)
+                ? found.push(handler)
+                : (signals[signal] = [found, handler]);
+        } else {
+            signals[signal] = handler;
+        }
     }
 
     unbind(
@@ -141,46 +164,26 @@ class OnSignalBinding extends TargetUpdateBinding {
         context: ExecutionContext<any, any>,
         targets: ViewBehaviorTargets
     ): void {
-        const directive = this.directive;
-        const target = targets[directive.targetId];
-        signals.unsubscribe(target[directive.uniqueId], this.getSignal(source, context));
+        const signal = this.getSignal(source, context);
+        const found = signals[signal];
+
+        if (found && Array.isArray(found)) {
+            const directive = this.directive;
+            const target = targets[directive.targetId];
+            const handler = target[directive.uniqueId];
+            const index = found.indexOf(handler);
+            if (index !== -1) {
+                found.splice(index, 1);
+            }
+        } else {
+            signals[signal] = void 0;
+        }
     }
 
     private getSignal(source: any, context: ExecutionContext<any, any>) {
         const options = this.directive.options;
         return isString(options) ? options : options(source, context);
     }
-
-    private getOrCreateHandler(
-        source: any,
-        context: ExecutionContext<any, any>,
-        targets: ViewBehaviorTargets
-    ) {
-        const directive = this.directive;
-        const target = targets[directive.targetId];
-        let handler = target[directive.uniqueId];
-
-        if (!handler) {
-            handler = {
-                target,
-                directive,
-                updateTarget: this.updateTarget,
-                handleChange() {
-                    this.updateTarget(
-                        this.target,
-                        this.directive.aspect,
-                        this.directive.binding(this.source, this.context),
-                        this.source,
-                        this.context
-                    );
-                },
-            };
-        }
-
-        handler.source = source;
-        handler.context = context;
-        return handler;
-    }
 }
 
 class OnChangeBinding extends TargetUpdateBinding {

From 40aeff34ce5e54f416afb62b7bee2c10e1586e49 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Fri, 11 Feb 2022 13:27:33 -0800
Subject: [PATCH 053/135] chore: set up SSR package (#5589)

* project files and starting to set up test infrastructure

* incorporating ts project references and getting tests working

* adding .npmignore to ingore tests and server

* adding readmes

* Update packages/web-components/fast-ssr/package.json

Co-authored-by: Chris Holt <chhol@microsoft.com>

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
Co-authored-by: Chris Holt <chhol@microsoft.com>
---
 packages/web-components/fast-ssr/.npmignore   |  2 +
 packages/web-components/fast-ssr/README.md    |  7 ++++
 packages/web-components/fast-ssr/package.json | 40 +++++++++++++++++++
 .../web-components/fast-ssr/server/README.md  |  2 +
 .../web-components/fast-ssr/server/server.ts  | 25 ++++++++++++
 .../fast-ssr/server/tsconfig.json             |  9 +++++
 packages/web-components/fast-ssr/src/index.ts |  1 +
 .../web-components/fast-ssr/src/tsconfig.json | 12 ++++++
 .../fast-ssr/test/example.spec.ts             | 10 +++++
 .../web-components/fast-ssr/test/package.json |  5 +++
 .../fast-ssr/test/playwright.config.ts        | 11 +++++
 .../fast-ssr/test/tsconfig.json               |  9 +++++
 .../web-components/fast-ssr/tsconfig.json     | 17 ++++++++
 13 files changed, 150 insertions(+)
 create mode 100644 packages/web-components/fast-ssr/.npmignore
 create mode 100644 packages/web-components/fast-ssr/README.md
 create mode 100644 packages/web-components/fast-ssr/package.json
 create mode 100644 packages/web-components/fast-ssr/server/README.md
 create mode 100644 packages/web-components/fast-ssr/server/server.ts
 create mode 100644 packages/web-components/fast-ssr/server/tsconfig.json
 create mode 100644 packages/web-components/fast-ssr/src/index.ts
 create mode 100644 packages/web-components/fast-ssr/src/tsconfig.json
 create mode 100644 packages/web-components/fast-ssr/test/example.spec.ts
 create mode 100644 packages/web-components/fast-ssr/test/package.json
 create mode 100644 packages/web-components/fast-ssr/test/playwright.config.ts
 create mode 100644 packages/web-components/fast-ssr/test/tsconfig.json
 create mode 100644 packages/web-components/fast-ssr/tsconfig.json

diff --git a/packages/web-components/fast-ssr/.npmignore b/packages/web-components/fast-ssr/.npmignore
new file mode 100644
index 00000000000..4037e8e7be9
--- /dev/null
+++ b/packages/web-components/fast-ssr/.npmignore
@@ -0,0 +1,2 @@
+test
+server
diff --git a/packages/web-components/fast-ssr/README.md b/packages/web-components/fast-ssr/README.md
new file mode 100644
index 00000000000..c9302b92748
--- /dev/null
+++ b/packages/web-components/fast-ssr/README.md
@@ -0,0 +1,7 @@
+# FAST SSR
+This package contains tools to render FAST components outside the browser. More details to follow...
+
+## Testing
+This package uses Playwright and a lightweight web server for running tests. You can run the tests by running `npm run test`.
+
+> Playwright may prompt you to install browsers to run the tests. If so, follow the instructions provided or run `npm run install-playwright-browsers`.
\ No newline at end of file
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
new file mode 100644
index 00000000000..cdcb62fa1ec
--- /dev/null
+++ b/packages/web-components/fast-ssr/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@microsoft/fast-ssr",
+  "version": "0.1.0",
+  "type": "module",
+  "author": {
+    "name": "Microsoft",
+    "url": "https://discord.gg/FcSNfg4"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Microsoft/fast.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Microsoft/fast/issues/new/choose"
+  },
+  "scripts": {
+    "build": "tsc -b --clean src && tsc -b src",
+    "build-server": "tsc -b server",
+    "pretest": "npm run build-server",
+    "test": "playwright test -c test",
+    "test-server": "node server/dist/server.js",
+    "install-playwright-browsers": "npx playwright install"
+  },
+  "description": "A package for rendering FAST components outside the browser.",
+  "main": "index.js",
+  "private": true,
+  "dependencies": {
+    "@lit-labs/ssr": "^1.0.0-rc.2",
+    "@microsoft/fast-element": "^1.5.0",
+    "tslib": "^1.11.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.18.0",
+    "@types/express": "^4.17.13",
+    "@types/node": "^17.0.17",
+    "express": "^4.17.1",
+    "typescript": "^3.8.3"
+  }
+}
diff --git a/packages/web-components/fast-ssr/server/README.md b/packages/web-components/fast-ssr/server/README.md
new file mode 100644
index 00000000000..c41dd618a80
--- /dev/null
+++ b/packages/web-components/fast-ssr/server/README.md
@@ -0,0 +1,2 @@
+# Server
+This project contains the web server that playwright tests are run against. To build, run `npm run build-server`.
\ No newline at end of file
diff --git a/packages/web-components/fast-ssr/server/server.ts b/packages/web-components/fast-ssr/server/server.ts
new file mode 100644
index 00000000000..e47e01fad16
--- /dev/null
+++ b/packages/web-components/fast-ssr/server/server.ts
@@ -0,0 +1,25 @@
+import { Readable } from "stream";
+import express, { Request, Response } from "express";
+
+const PORT = 8080;
+function handleRequest(req: Request, res: Response) {
+    res.set("Content-Type", "text/html");
+    const stream = (Readable as any).from("hello world");
+    stream.on("readable", function (this: any) {
+        let data: string;
+
+        while ((data = this.read())) {
+            res.write(data);
+        }
+    });
+
+    stream.on("close", () => res.end());
+    stream.on("error", (e: Error) => {
+        console.error(e);
+        process.exit(1);
+    });
+}
+
+const app = express();
+app.get("/", handleRequest);
+app.listen(PORT);
diff --git a/packages/web-components/fast-ssr/server/tsconfig.json b/packages/web-components/fast-ssr/server/tsconfig.json
new file mode 100644
index 00000000000..fc7f3f2b6e1
--- /dev/null
+++ b/packages/web-components/fast-ssr/server/tsconfig.json
@@ -0,0 +1,9 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"composite": true,
+		"rootDir": ".",
+		"outDir": "dist"
+	},
+	"references": [{ "path": "../src"}]
+}
diff --git a/packages/web-components/fast-ssr/src/index.ts b/packages/web-components/fast-ssr/src/index.ts
new file mode 100644
index 00000000000..62073af2a0f
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/index.ts
@@ -0,0 +1 @@
+export default "fast-ssr";
diff --git a/packages/web-components/fast-ssr/src/tsconfig.json b/packages/web-components/fast-ssr/src/tsconfig.json
new file mode 100644
index 00000000000..8b2f5bed380
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": ".",
+    "outDir": "../dist",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+  },
+}
diff --git a/packages/web-components/fast-ssr/test/example.spec.ts b/packages/web-components/fast-ssr/test/example.spec.ts
new file mode 100644
index 00000000000..73c85108fa9
--- /dev/null
+++ b/packages/web-components/fast-ssr/test/example.spec.ts
@@ -0,0 +1,10 @@
+import { test, expect, ElementHandle } from '@playwright/test';
+import fastSSR from "../src";
+
+test("example module test", async () => {
+	expect(fastSSR).toBe("fast-ssr");
+})
+test("example server test", async ({ page }) => {
+	await page.goto("/");
+	expect(await page.innerText('body')).toBe("hello world");
+});
diff --git a/packages/web-components/fast-ssr/test/package.json b/packages/web-components/fast-ssr/test/package.json
new file mode 100644
index 00000000000..890f891f972
--- /dev/null
+++ b/packages/web-components/fast-ssr/test/package.json
@@ -0,0 +1,5 @@
+{
+	"type": "commonjs",
+	"comment": "This allows Playwright to handle TS compilation for us",
+	"private": true
+}
\ No newline at end of file
diff --git a/packages/web-components/fast-ssr/test/playwright.config.ts b/packages/web-components/fast-ssr/test/playwright.config.ts
new file mode 100644
index 00000000000..4b048b7ff22
--- /dev/null
+++ b/packages/web-components/fast-ssr/test/playwright.config.ts
@@ -0,0 +1,11 @@
+// playwright.config.ts
+import { PlaywrightTestConfig } from "@playwright/test";
+const config: PlaywrightTestConfig = {
+    webServer: {
+        command: "npm run test-server",
+        port: 8080,
+        timeout: 120 * 1000,
+        reuseExistingServer: false,
+    },
+};
+export default config;
diff --git a/packages/web-components/fast-ssr/test/tsconfig.json b/packages/web-components/fast-ssr/test/tsconfig.json
new file mode 100644
index 00000000000..2ba585452cf
--- /dev/null
+++ b/packages/web-components/fast-ssr/test/tsconfig.json
@@ -0,0 +1,9 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"rootDir": ".",
+		"outDir": "dist",
+		"declaration": false
+	},
+	"references": [{ "path": "../src"}]
+}
diff --git a/packages/web-components/fast-ssr/tsconfig.json b/packages/web-components/fast-ssr/tsconfig.json
new file mode 100644
index 00000000000..cf4cd344bc2
--- /dev/null
+++ b/packages/web-components/fast-ssr/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "target": "ES2015",
+    "module": "ES2015",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noEmitOnError": true,
+    "strict": true,
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+  },
+}

From bc897f98e0fdde1a719d63416f69420d72ea260a Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Tue, 15 Feb 2022 10:11:55 -0800
Subject: [PATCH 054/135] feat: expose fast-element as a module package to
 NodeJS (#5601)

* add lint rule to enforce file extensions in imports

* declare fast-element as a ESModule package

* convert eslintrc to a commonjs module

* adding file extensions to import paths

* fixing accidently modified string

* fixing build processes

* revert change

* Change files

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...-b1805a85-fe36-49d9-b65a-2484ae0eaab0.json |  7 +++
 .../web-components/fast-element/.eslintrc.cjs | 19 +++++++
 .../fast-element/.eslintrc.json               | 30 -----------
 .../web-components/fast-element/.npmignore    |  4 +-
 .../web-components/fast-element/package.json  |  1 +
 .../fast-element/rollup.config.js             |  2 +-
 .../fast-element/src/components/attributes.ts |  8 +--
 .../fast-element/src/components/controller.ts |  1 -
 .../src/components/fast-definitions.ts        | 10 ++--
 .../web-components/fast-element/src/dom.ts    |  4 +-
 .../web-components/fast-element/src/index.ts  | 52 +++++++++----------
 .../src/observation/observable.ts             |  8 +--
 .../fast-element/src/styles/css.ts            | 10 ++--
 .../fast-element/src/styles/element-styles.ts |  4 +-
 .../fast-element/src/templating/binding.ts    | 12 ++---
 .../fast-element/src/templating/children.ts   |  6 +--
 .../fast-element/src/templating/compiler.ts   | 10 ++--
 .../src/templating/html-directive.ts          |  6 +--
 .../src/templating/node-observation.ts        |  6 +--
 .../fast-element/src/templating/ref.ts        |  6 +--
 .../fast-element/src/templating/repeat.ts     | 22 ++++----
 .../fast-element/src/templating/slotted.ts    |  6 +--
 .../fast-element/src/templating/template.ts   | 16 +++---
 .../fast-element/src/templating/view.ts       | 10 ++--
 .../fast-element/src/templating/when.ts       |  6 +--
 25 files changed, 131 insertions(+), 135 deletions(-)
 create mode 100644 change/@microsoft-fast-element-b1805a85-fe36-49d9-b65a-2484ae0eaab0.json
 create mode 100644 packages/web-components/fast-element/.eslintrc.cjs
 delete mode 100644 packages/web-components/fast-element/.eslintrc.json

diff --git a/change/@microsoft-fast-element-b1805a85-fe36-49d9-b65a-2484ae0eaab0.json b/change/@microsoft-fast-element-b1805a85-fe36-49d9-b65a-2484ae0eaab0.json
new file mode 100644
index 00000000000..f34f3764ec9
--- /dev/null
+++ b/change/@microsoft-fast-element-b1805a85-fe36-49d9-b65a-2484ae0eaab0.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "enumerate fast-element package as a ES module package",
+  "packageName": "@microsoft/fast-element",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/.eslintrc.cjs b/packages/web-components/fast-element/.eslintrc.cjs
new file mode 100644
index 00000000000..d5ea064f67e
--- /dev/null
+++ b/packages/web-components/fast-element/.eslintrc.cjs
@@ -0,0 +1,19 @@
+module.exports = {
+    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
+    rules: {
+        "import/extensions": ["error", "always"],
+        "max-classes-per-file": "off",
+        "no-case-declarations": "off",
+        "@typescript-eslint/ban-types": [
+            "error",
+            {
+                types: {
+                    "{}": false,
+                    Function: false,
+                    Object: false,
+                },
+                extendDefaults: true,
+            },
+        ],
+    },
+};
diff --git a/packages/web-components/fast-element/.eslintrc.json b/packages/web-components/fast-element/.eslintrc.json
deleted file mode 100644
index cb11089e167..00000000000
--- a/packages/web-components/fast-element/.eslintrc.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
-    "rules": {
-        "max-classes-per-file": "off",
-        "no-case-declarations": "off",
-        "@typescript-eslint/ban-types": [
-            "error",
-            {
-                "types": {
-                    "{}": false,
-                    "Function": false,
-                    "Object": false
-                },
-                "extendDefaults": true
-            }
-        ],
-        "@typescript-eslint/no-use-before-define": ["error", { "typedefs": false }],
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/explicit-function-return-type": [
-            "error",
-            {
-                "allowExpressions": true
-            }
-        ],
-        "import/extensions": [
-            "error",
-            "always"
-        ]
-    }
-}
diff --git a/packages/web-components/fast-element/.npmignore b/packages/web-components/fast-element/.npmignore
index 08e9c472ee9..79b219206fb 100644
--- a/packages/web-components/fast-element/.npmignore
+++ b/packages/web-components/fast-element/.npmignore
@@ -9,7 +9,7 @@ src/
 
 # config files
 .eslintignore
-.eslintrc.js
+.eslintrc.cjs
 .mocharc.json
 .prettierignore
 api-extractor.json
@@ -19,4 +19,4 @@ tsconfig.json
 
 # cache
 .rollupcache
-temp
\ No newline at end of file
+temp
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index 595446d3b57..b812544567c 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -16,6 +16,7 @@
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
   },
   "main": "dist/esm/index.js",
+  "type": "module",
   "types": "dist/fast-element.d.ts",
   "type": "module",
   "unpkg": "dist/fast-element.min.js",
diff --git a/packages/web-components/fast-element/rollup.config.js b/packages/web-components/fast-element/rollup.config.js
index 1f5b65ed616..0bf491c43ac 100644
--- a/packages/web-components/fast-element/rollup.config.js
+++ b/packages/web-components/fast-element/rollup.config.js
@@ -7,7 +7,7 @@ import typescript from "rollup-plugin-typescript2";
 import {
     transformCSSFragment,
     transformHTMLFragment,
-} from "../../../build/transform-fragments";
+} from "../../../build/transform-fragments.js";
 
 const parserOptions = {
     sourceType: "module",
diff --git a/packages/web-components/fast-element/src/components/attributes.ts b/packages/web-components/fast-element/src/components/attributes.ts
index e70ce543b02..cb3051f44f4 100644
--- a/packages/web-components/fast-element/src/components/attributes.ts
+++ b/packages/web-components/fast-element/src/components/attributes.ts
@@ -1,7 +1,7 @@
-import { Accessor, Observable } from "../observation/observable";
-import { DOM } from "../dom";
-import type { Notifier } from "../observation/notifier";
-import { isString } from "../interfaces";
+import { Accessor, Observable } from "../observation/observable.js";
+import { DOM } from "../dom.js";
+import type { Notifier } from "../observation/notifier.js";
+import { isString } from "../interfaces.js";
 
 /**
  * Represents objects that can convert values to and from
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index 1eb174f272d..c6d1aeef58d 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -1,4 +1,3 @@
-import { DOM } from "../dom.js";
 import type { Mutable } from "../interfaces.js";
 import type { Behavior } from "../observation/behavior.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.ts b/packages/web-components/fast-element/src/components/fast-definitions.ts
index 9c698fbfb87..154b00edc1a 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.ts
@@ -1,8 +1,8 @@
-import { isString, Mutable } from "../interfaces";
-import { Observable } from "../observation/observable";
-import { ComposableStyles, ElementStyles } from "../styles/element-styles";
-import type { ElementViewTemplate } from "../templating/template";
-import { AttributeConfiguration, AttributeDefinition } from "./attributes";
+import { isString, Mutable } from "../interfaces.js";
+import { Observable } from "../observation/observable.js";
+import { ComposableStyles, ElementStyles } from "../styles/element-styles.js";
+import type { ElementViewTemplate } from "../templating/template.js";
+import { AttributeConfiguration, AttributeDefinition } from "./attributes.js";
 
 const defaultShadowOptions: ShadowRootInit = { mode: "open" };
 const defaultElementOptions: ElementDefinitionOptions = {};
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index a478147b26a..f95cd66af56 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -1,5 +1,5 @@
-import type { Callable } from "./interfaces";
-import { $global, TrustedTypesPolicy } from "./platform";
+import type { Callable } from "./interfaces.js";
+import { $global, TrustedTypesPolicy } from "./platform.js";
 
 /* eslint-disable */
 const fastHTMLPolicy: TrustedTypesPolicy = $global.trustedTypes.createPolicy(
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index e7ea35b8a32..178aea730f3 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -1,29 +1,28 @@
-export * from "./platform";
-export * from "./templating/template";
-export * from "./components/fast-element";
+export * from "./platform.js";
+export * from "./templating/template.js";
+export * from "./components/fast-element.js";
 export {
     FASTElementDefinition,
     PartialFASTElementDefinition,
-} from "./components/fast-definitions";
-export * from "./components/attributes";
-export * from "./components/controller";
-export type { Callable, Constructable, Mutable } from "./interfaces";
-export * from "./templating/compiler";
+} from "./components/fast-definitions.js";
+export * from "./components/attributes.js";
+export * from "./components/controller.js";
+export type { Callable, Constructable, Mutable } from "./interfaces.js";
+export * from "./templating/compiler.js";
 export {
     ElementStyles,
     ElementStyleFactory,
     ComposableStyles,
     StyleTarget,
-} from "./styles/element-styles";
-export { css, cssPartial } from "./styles/css";
-export { CSSDirective } from "./styles/css-directive";
-export * from "./templating/view";
-export * from "./observation/observable";
-export * from "./observation/notifier";
-export { Splice } from "./observation/array-change-records";
-export { enableArrayObservation } from "./observation/array-observer";
-export { DOM } from "./dom";
-export type { Behavior } from "./observation/behavior";
+} from "./styles/element-styles.js";
+export { css, cssPartial } from "./styles/css.js";
+export { CSSDirective } from "./styles/css-directive.js";
+export * from "./observation/observable.js";
+export * from "./observation/notifier.js";
+export { Splice } from "./observation/array-change-records.js";
+export { enableArrayObservation } from "./observation/array-observer.js";
+export { DOM } from "./dom.js";
+export type { Behavior } from "./observation/behavior.js";
 export {
     bind,
     oneTime,
@@ -33,7 +32,7 @@ export {
     BindingType,
     BindingBehaviorFactory,
     DefaultBindingOptions,
-} from "./templating/binding";
+} from "./templating/binding.js";
 export {
     ViewBehaviorTargets,
     ViewBehavior,
@@ -41,14 +40,15 @@ export {
     HTMLDirective,
     AspectedHTMLDirective,
     InlinableHTMLDirective,
-} from "./templating/html-directive";
-export * from "./templating/ref";
-export * from "./templating/when";
-export * from "./templating/repeat";
-export * from "./templating/slotted";
-export * from "./templating/children";
+} from "./templating/html-directive.js";
+export * from "./templating/ref.js";
+export * from "./templating/when.js";
+export * from "./templating/repeat.js";
+export * from "./templating/slotted.js";
+export * from "./templating/children.js";
+export * from "./templating/view.js";
 export {
     elements,
     ElementsFilter,
     NodeBehaviorOptions,
-} from "./templating/node-observation";
+} from "./templating/node-observation.js";
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index c243f78262b..e4e10c9aea6 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -1,7 +1,7 @@
-import { DOM } from "../dom";
-import { PropertyChangeNotifier, SubscriberSet } from "./notifier";
-import type { Notifier, Subscriber } from "./notifier";
-import { isFunction, isString } from "../interfaces";
+import { DOM } from "../dom.js";
+import { isFunction, isString } from "../interfaces.js";
+import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
+import type { Notifier, Subscriber } from "./notifier.js";
 
 const volatileRegex = /(:|&&|\|\||if)/;
 const notifierLookup = new WeakMap<any, Notifier>();
diff --git a/packages/web-components/fast-element/src/styles/css.ts b/packages/web-components/fast-element/src/styles/css.ts
index dc94edfb349..195741cd5dc 100644
--- a/packages/web-components/fast-element/src/styles/css.ts
+++ b/packages/web-components/fast-element/src/styles/css.ts
@@ -1,8 +1,8 @@
-import type { FASTElement } from "../components/fast-element";
-import { isString } from "../interfaces";
-import type { Behavior } from "../observation/behavior";
-import { CSSDirective } from "./css-directive";
-import { ComposableStyles, ElementStyles } from "./element-styles";
+import type { FASTElement } from "../components/fast-element.js";
+import { isString } from "../interfaces.js";
+import type { Behavior } from "../observation/behavior.js";
+import { CSSDirective } from "./css-directive.js";
+import { ComposableStyles, ElementStyles } from "./element-styles.js";
 
 function collectStyles(
     strings: TemplateStringsArray,
diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index 57dc196b334..b8dfed97f22 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior";
-import { DOM, nextId } from "../dom";
+import type { Behavior } from "../observation/behavior.js";
+import { DOM, nextId } from "../dom.js";
 
 /**
  * A node that can be targeted by styles.
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 28d75cf4df6..03af099c526 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,19 +1,19 @@
-import { DOM } from "../dom";
-import { isString, Mutable } from "../interfaces";
+import { DOM } from "../dom.js";
+import { isString, Mutable } from "../interfaces.js";
 import {
     Binding,
     BindingObserver,
     ExecutionContext,
     Observable,
     setCurrentEvent,
-} from "../observation/observable";
+} from "../observation/observable.js";
 import {
     InlinableHTMLDirective,
     ViewBehavior,
     ViewBehaviorTargets,
-} from "./html-directive";
-import type { CaptureType } from "./template";
-import type { SyntheticView } from "./view";
+} from "./html-directive.js";
+import type { CaptureType } from "./template.js";
+import type { SyntheticView } from "./view.js";
 
 export type BindingBehaviorFactory = {
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index 85419d018eb..9ba2a32c9b0 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -1,6 +1,6 @@
-import { isString } from "../interfaces";
-import { NodeObservationDirective, NodeBehaviorOptions } from "./node-observation";
-import type { CaptureType } from "./template";
+import { isString } from "../interfaces.js";
+import { NodeBehaviorOptions, NodeObservationDirective } from "./node-observation.js";
+import type { CaptureType } from "./template.js";
 
 /**
  * The options used to configure child list observation.
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 8fe9274aa2f..211284ac28a 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,14 +1,14 @@
+import { _interpolationEnd, _interpolationStart, DOM } from "../dom.js";
+import { isString } from "../interfaces.js";
+import type { ExecutionContext } from "../observation/observable.js";
+import { bind, oneTime } from "./binding.js";
 import type {
     AspectedHTMLDirective,
     HTMLDirective,
     InlinableHTMLDirective,
     ViewBehaviorFactory,
     ViewBehaviorTargets,
-} from "./html-directive";
-import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
-import type { ExecutionContext } from "../observation/observable";
-import { bind, oneTime } from "./binding";
-import { isString } from "../interfaces";
+} from "./html-directive.js";
 
 const targetIdFrom = (parentId: string, nodeIndex: number) => `${parentId}.${nodeIndex}`;
 const descriptorCache: PropertyDescriptorMap = {};
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index d7cc532c76c..47071acc2d3 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -1,6 +1,6 @@
-import { DOM, nextId } from "../dom";
-import type { Behavior } from "../observation/behavior";
-import type { Binding, ExecutionContext } from "../observation/observable";
+import { DOM, nextId } from "../dom.js";
+import type { Behavior } from "../observation/behavior.js";
+import type { Binding, ExecutionContext } from "../observation/observable.js";
 
 /**
  * The target nodes available to a behavior.
diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index 489b3e6569c..0b4e5ee6ef3 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -1,9 +1,9 @@
-import type { ExecutionContext } from "../observation/observable";
-import { emptyArray } from "../platform";
+import type { ExecutionContext } from "../observation/observable.js";
+import { emptyArray } from "../platform.js";
 import {
     StatelessAttachedAttributeDirective,
     ViewBehaviorTargets,
-} from "./html-directive";
+} from "./html-directive.js";
 
 /**
  * Options for configuring node observation behavior.
diff --git a/packages/web-components/fast-element/src/templating/ref.ts b/packages/web-components/fast-element/src/templating/ref.ts
index fb4d47a795e..af0b647077a 100644
--- a/packages/web-components/fast-element/src/templating/ref.ts
+++ b/packages/web-components/fast-element/src/templating/ref.ts
@@ -1,9 +1,9 @@
-import type { CaptureType } from "./template";
+import type { ExecutionContext } from "../observation/observable.js";
 import {
     StatelessAttachedAttributeDirective,
     ViewBehaviorTargets,
-} from "./html-directive";
-import type { ExecutionContext } from "../observation/observable";
+} from "./html-directive.js";
+import type { CaptureType } from "./template.js";
 
 /**
  * The runtime behavior for template references.
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index c1748ce96f2..fce7b46d902 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -1,19 +1,19 @@
-import { DOM } from "../dom";
+import { DOM } from "../dom.js";
+import { isFunction } from "../interfaces.js";
+import type { Splice } from "../observation/array-change-records.js";
+import { enableArrayObservation } from "../observation/array-observer.js";
+import type { Behavior } from "../observation/behavior.js";
+import type { Notifier, Subscriber } from "../observation/notifier.js";
 import {
     Binding,
     BindingObserver,
     ExecutionContext,
     Observable,
-} from "../observation/observable";
-import type { Notifier, Subscriber } from "../observation/notifier";
-import { enableArrayObservation } from "../observation/array-observer";
-import type { Splice } from "../observation/array-change-records";
-import type { Behavior } from "../observation/behavior";
-import { emptyArray } from "../platform";
-import { ViewBehaviorTargets, HTMLDirective } from "./html-directive";
-import { HTMLView, SyntheticView } from "./view";
-import type { CaptureType, SyntheticViewTemplate } from "./template";
-import { isFunction } from "../interfaces";
+} from "../observation/observable.js";
+import { emptyArray } from "../platform.js";
+import { HTMLDirective, ViewBehaviorTargets } from "./html-directive.js";
+import type { CaptureType, SyntheticViewTemplate } from "./template.js";
+import { HTMLView, SyntheticView } from "./view.js";
 
 /**
  * Options for configuring repeat behavior.
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index c65e4491c5d..d34b334b1ec 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -1,6 +1,6 @@
-import { isString } from "../interfaces";
-import { NodeObservationDirective, NodeBehaviorOptions } from "./node-observation";
-import type { CaptureType } from "./template";
+import { isString } from "../interfaces.js";
+import { NodeBehaviorOptions, NodeObservationDirective } from "./node-observation.js";
+import type { CaptureType } from "./template.js";
 
 /**
  * The options used to configure slotted node observation.
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 97ab51fefad..4d9da0160c1 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -1,11 +1,11 @@
-import { DOM } from "../dom";
-import { Binding, defaultExecutionContext } from "../observation/observable";
-import { compileTemplate } from "./compiler";
-import type { HTMLTemplateCompilationResult } from "./compiler";
-import { ElementView, HTMLView, SyntheticView } from "./view";
-import { HTMLDirective, AspectedHTMLDirective } from "./html-directive";
-import { bind, oneTime } from "./binding";
-import { isFunction, isString } from "../interfaces";
+import { DOM } from "../dom.js";
+import { isFunction, isString } from "../interfaces.js";
+import { Binding, defaultExecutionContext } from "../observation/observable.js";
+import { bind, oneTime } from "./binding.js";
+import { compileTemplate } from "./compiler.js";
+import type { HTMLTemplateCompilationResult } from "./compiler.js";
+import { AspectedHTMLDirective, HTMLDirective } from "./html-directive.js";
+import { ElementView, HTMLView, SyntheticView } from "./view.js";
 
 /**
  * A template capable of creating views specifically for rendering custom elements.
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index 36eca6e8cf0..135cee099af 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -1,10 +1,10 @@
-import type { Behavior } from "../observation/behavior";
-import type { ExecutionContext } from "../observation/observable";
+import type { Behavior } from "../observation/behavior.js";
+import type { ExecutionContext } from "../observation/observable.js";
 import type {
-    ViewBehaviorTargets,
-    ViewBehaviorFactory,
     ViewBehavior,
-} from "./html-directive";
+    ViewBehaviorFactory,
+    ViewBehaviorTargets,
+} from "./html-directive.js";
 
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.
diff --git a/packages/web-components/fast-element/src/templating/when.ts b/packages/web-components/fast-element/src/templating/when.ts
index b2a5cdca59a..bd2c1ac3fcc 100644
--- a/packages/web-components/fast-element/src/templating/when.ts
+++ b/packages/web-components/fast-element/src/templating/when.ts
@@ -1,6 +1,6 @@
-import { isFunction } from "../interfaces";
-import type { Binding, ExecutionContext } from "../observation/observable";
-import type { CaptureType, SyntheticViewTemplate } from "./template";
+import { isFunction } from "../interfaces.js";
+import type { Binding, ExecutionContext } from "../observation/observable.js";
+import type { CaptureType, SyntheticViewTemplate } from "./template.js";
 
 /**
  * A directive that enables basic conditional rendering in a template.

From 7d63f3201502787f24baa1994bccc23f7050581f Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 15 Feb 2022 13:13:51 -0800
Subject: [PATCH 055/135] Add the fast-style web component (#5600)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This branch adds the following:

- A FAST Style element that will hydrate styles client side
- A webpack config that will build the minimal JS for the logic for this web component so that the file `fast-style.min.js` can be referred to in server side generated HTML

### 🎫 Issues

<!---
* List and link relevant issues here.
-->
Closes #5575

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->
If you run the test server after building all the necessary files, you can navigate to `localhost:8080/fast-style` and see the component working there. One thing is the fixture uses `shadowroot="open"` to be able to see which styles are applied to nested elements during Playwright testing. This does not need the case for actual implementation, the shadowroot can be closed, this has been manually verified.

## 📑 Test Plan

<!---
Please provide a summary of the tests affected by this work and any unique strategies employed in testing the features/fixes.
-->
The added tests are Playwright tests, I'll let reviewers comment as to whether more tests are needed, this however tests the base case of applying styles to the container of the fast-style web component.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [ ] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

## ⏭ Next Steps

<!---
If there is relevant follow-up work to this PR, please list any existing issues or provide brief descriptions of what you would like to do next.
-->
- Integrate the FASTStyle wc to the HTML renderer #5576
---
 .../web-components/fast-ssr/server/server.ts  |  47 ++
 .../src/fast-style/index.fixture.html         | 436 ++++++++++++++++++
 .../fast-ssr/src/fast-style/index.ts          |  79 ++++
 .../fast-ssr/test/fast-style.spec.ts          |  62 +++
 4 files changed, 624 insertions(+)
 create mode 100644 packages/web-components/fast-ssr/src/fast-style/index.fixture.html
 create mode 100644 packages/web-components/fast-ssr/src/fast-style/index.ts
 create mode 100644 packages/web-components/fast-ssr/test/fast-style.spec.ts

diff --git a/packages/web-components/fast-ssr/server/server.ts b/packages/web-components/fast-ssr/server/server.ts
index e47e01fad16..866fa10b5e8 100644
--- a/packages/web-components/fast-ssr/server/server.ts
+++ b/packages/web-components/fast-ssr/server/server.ts
@@ -1,6 +1,9 @@
 import { Readable } from "stream";
 import express, { Request, Response } from "express";
+import fs from "fs";
+import path from "path";
 
+const __dirname = path.resolve(path.dirname(""));
 const PORT = 8080;
 function handleRequest(req: Request, res: Response) {
     res.set("Content-Type", "text/html");
@@ -20,6 +23,50 @@ function handleRequest(req: Request, res: Response) {
     });
 }
 
+function handleStyleRequest(req: Request, res: Response) {
+    res.set("Content-Type", "text/html");
+    fs.readFile(
+        path.resolve(__dirname, "./src/fast-style/index.fixture.html"),
+        { encoding: "utf8" },
+        (err, data) => {
+            const stream = (Readable as any).from(data);
+            stream.on("readable", function (this: any) {
+                while ((data = this.read())) {
+                    res.write(data);
+                }
+            });
+            stream.on("close", () => res.end());
+            stream.on("error", (e: Error) => {
+                console.error(e);
+                process.exit(1);
+            });
+        }
+    );
+}
+
+function handleStyleScriptRequest(req: Request, res: Response) {
+    res.set("Content-Type", "application/javascript");
+    fs.readFile(
+        path.resolve(__dirname, "./dist/fast-style/index.js"),
+        { encoding: "utf8" },
+        (err, data) => {
+            const stream = (Readable as any).from(data);
+            stream.on("readable", function (this: any) {
+                while ((data = this.read())) {
+                    res.write(data);
+                }
+            });
+            stream.on("close", () => res.end());
+            stream.on("error", (e: Error) => {
+                console.error(e);
+                process.exit(1);
+            });
+        }
+    );
+}
+
 const app = express();
 app.get("/", handleRequest);
+app.get("/fast-style", handleStyleRequest);
+app.get("/fast-style.js", handleStyleScriptRequest);
 app.listen(PORT);
diff --git a/packages/web-components/fast-ssr/src/fast-style/index.fixture.html b/packages/web-components/fast-ssr/src/fast-style/index.fixture.html
new file mode 100644
index 00000000000..92820fa5ab9
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/fast-style/index.fixture.html
@@ -0,0 +1,436 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8" />
+        <title></title>
+    </head>
+
+    <body
+        style="
+            background-color: var(--fill-color);
+            --body-font: aktiv-grotesk, 'Segoe UI', Arial, Helvetica, sans-serif;
+            --base-height-multiplier: 10;
+            --base-horizontal-spacing-multiplier: 3;
+            --control-corner-radius: 4;
+            --density: 0;
+            --design-unit: 4;
+            --direction: ltr;
+            --disabled-opacity: 0.3;
+            --stroke-width: 1;
+            --focus-stroke-width: 2;
+            --type-ramp-base-font-size: 14px;
+            --type-ramp-base-line-height: 20px;
+            --type-ramp-minus-1-font-size: 12px;
+            --type-ramp-minus-1-line-height: 16px;
+            --type-ramp-minus-2-font-size: 10px;
+            --type-ramp-minus-2-line-height: 16px;
+            --type-ramp-plus-1-font-size: 16px;
+            --type-ramp-plus-1-line-height: 24px;
+            --type-ramp-plus-2-font-size: 20px;
+            --type-ramp-plus-2-line-height: 28px;
+            --type-ramp-plus-3-font-size: 28px;
+            --type-ramp-plus-3-line-height: 36px;
+            --type-ramp-plus-4-font-size: 34px;
+            --type-ramp-plus-4-line-height: 44px;
+            --type-ramp-plus-5-font-size: 46px;
+            --type-ramp-plus-5-line-height: 56px;
+            --type-ramp-plus-6-font-size: 60px;
+            --type-ramp-plus-6-line-height: 72px;
+            --accent-fill-rest-delta: 0;
+            --accent-fill-hover-delta: 4;
+            --accent-fill-active-delta: -5;
+            --accent-fill-focus-delta: 0;
+            --accent-foreground-rest-delta: 0;
+            --accent-foreground-hover-delta: 6;
+            --accent-foreground-active-delta: -4;
+            --accent-foreground-focus-delta: 0;
+            --neutral-fill-rest-delta: 7;
+            --neutral-fill-hover-delta: 10;
+            --neutral-fill-active-delta: 5;
+            --neutral-fill-focus-delta: 0;
+            --neutral-fill-input-rest-delta: 0;
+            --neutral-fill-input-hover-delta: 0;
+            --neutral-fill-input-active-delta: 0;
+            --neutral-fill-input-focus-delta: 0;
+            --neutral-fill-stealth-rest-delta: 0;
+            --neutral-fill-stealth-hover-delta: 5;
+            --neutral-fill-stealth-active-delta: 3;
+            --neutral-fill-stealth-focus-delta: 0;
+            --neutral-fill-strong-rest-delta: 0;
+            --neutral-fill-strong-hover-delta: 8;
+            --neutral-fill-strong-active-delta: -5;
+            --neutral-fill-strong-focus-delta: 0;
+            --neutral-fill-layer-rest-delta: 3;
+            --neutral-stroke-rest-delta: 25;
+            --neutral-stroke-hover-delta: 40;
+            --neutral-stroke-active-delta: 16;
+            --neutral-stroke-focus-delta: 25;
+            --neutral-stroke-divider-rest-delta: 8;
+            --base-layer-luminance: 0.1;
+            --neutral-layer-card-container: #101010;
+            --neutral-layer-floating: #292929;
+            --neutral-layer-1: #181818;
+            --neutral-layer-2: #101010;
+            --neutral-layer-3: #000000;
+            --neutral-layer-4: #000000;
+            --fill-color: #1a1a1a;
+            --accent-fill-rest: #c01754;
+            --accent-fill-hover: #da1a5f;
+            --accent-fill-active: #a01346;
+            --accent-fill-focus: #c01754;
+            --accent-foreground-rest: #e1477e;
+            --accent-foreground-hover: #e55e8e;
+            --accent-foreground-active: #df3874;
+            --accent-foreground-focus: #e1477e;
+            --neutral-fill-rest: #2b2b2b;
+            --neutral-fill-hover: #333333;
+            --neutral-fill-active: #262626;
+            --neutral-fill-focus: #181818;
+            --neutral-fill-input-rest: #181818;
+            --neutral-fill-input-hover: #181818;
+            --neutral-fill-input-active: #181818;
+            --neutral-fill-input-focus: #181818;
+            --neutral-fill-stealth-rest: #181818;
+            --neutral-fill-stealth-hover: #262626;
+            --neutral-fill-stealth-active: #212121;
+            --neutral-fill-stealth-focus: #181818;
+            --neutral-fill-strong-rest: #828282;
+            --neutral-fill-strong-hover: #979797;
+            --neutral-fill-strong-active: #757575;
+            --neutral-fill-strong-focus: #828282;
+            --neutral-fill-layer-rest: #212121;
+            --focus-stroke-outer: #707070;
+            --focus-stroke-inner: #350617;
+            --neutral-foreground-hint: #828282;
+            --neutral-foreground-rest: #e8e8e8;
+            --neutral-stroke-rest: #595959;
+            --neutral-stroke-hover: #808080;
+            --neutral-stroke-active: #424242;
+            --neutral-stroke-focus: #595959;
+            --neutral-stroke-divider-rest: #2e2e2e;
+            --tree-item-expand-collapse-hover: #333333;
+            --tree-item-expand-collapse-selected-hover: #383838;
+            --foreground-on-accent-rest: #ffffff;
+            --foreground-on-accent-rest-large: #000000;
+            --foreground-on-accent-hover: #ffffff;
+            --foreground-on-accent-hover-large: #000000;
+            --foreground-on-accent-active: #ffffff;
+            --foreground-on-accent-active-large: #ffffff;
+            --foreground-on-accent-focus: #ffffff;
+            --foreground-on-accent-focus-large: #000000;
+            display: flex;
+        "
+    >
+        <script type="module" src="/fast-style.js"></script>
+        <fast-card style="width: 300px;">
+            <!-- shadowroots must remain open for testing contained elements -->
+            <template shadowroot="open">
+                <fast-style
+                    data-style-id="fast-card"
+                    css=":host {
+                    --elevation: 4;
+                    display: block;
+                    contain: content;
+                    height: var(--card-height, 100%);
+                    width: var(--card-width, 100%);
+                    box-sizing: border-box;
+                    background: var(--fill-color);
+                    border-radius: calc(var(--control-corner-radius) * 1px);
+                    box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(0.11 * (2 - var(--background-luminance, 1)))), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(0.13 * (2 - var(--background-luminance, 1))));}"
+                ></fast-style>
+                <img src="https://via.placeholder.com/300x200/414141" />
+                <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
+                    <h2>Heading</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                        scelerisque.Maecenas in velit vehicula, aliquet orci et, consequat
+                        purus. Donec egetsodales lectus, vel sollicitudin ligula.
+                        Suspendisse volutpat auctor diam,vel mattis lorem venenatis in.
+                    </p>
+                    <fast-button>
+                        <template shadowroot="open">
+                            <fast-style
+                                data-style-id="fast-button"
+                                css=":host {
+                                font-family: var(--body-font);
+                                outline: none;
+                                font-size: var(--type-ramp-base-font-size);
+                                line-height: var(--type-ramp-base-line-height);
+                                height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
+                                min-width: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
+                                background-color: var(--neutral-fill-rest);
+                                color: var(--neutral-foreground-rest);
+                                border-radius: calc(var(--control-corner-radius) * 1px);
+                                fill: currentcolor;
+                                cursor: pointer;
+                            }
+                            .control {
+                                background: transparent;
+                                background: red;
+                                height: inherit;
+                                flex-grow: 1;
+                                box-sizing: border-box;
+                                display: inline-flex;
+                                justify-content: center;
+                                align-items: center;
+                                padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
+                                white-space: nowrap;
+                                outline: none;
+                                text-decoration: none;
+                                border: calc(var(--stroke-width) * 1px) solid transparent;
+                                color: inherit;
+                                border-radius: inherit;
+                                fill: inherit;
+                                cursor: inherit;
+                                font-family: inherit;
+                                font-size: inherit;
+                                line-height: inherit;
+                            }"
+                            ></fast-style>
+                            <button class="control">
+                                <span>
+                                    Button
+                                </span>
+                            </button>
+                        </template>
+                    </fast-button>
+                </div>
+            </template>
+        </fast-card>
+        <fast-card style="width: 300px;">
+            <template shadowroot="open">
+                <fast-style data-style-id="fast-card"></fast-style>
+                <img src="https://via.placeholder.com/300x200/414141" />
+                <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
+                    <h2>Heading</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                        scelerisque.Maecenas in velit vehicula, aliquet orci et, consequat
+                        purus. Donec egetsodales lectus, vel sollicitudin ligula.
+                        Suspendisse volutpat auctor diam,vel mattis lorem venenatis in.
+                    </p>
+                    <fast-button>
+                        <template shadowroot="open">
+                            <fast-style data-style-id="fast-button"></fast-style>
+                            <button class="control">
+                                <span>
+                                    Button
+                                </span>
+                            </button>
+                        </template>
+                    </fast-button>
+                </div>
+            </template>
+        </fast-card>
+        <fast-card style="width: 300px;">
+            <template shadowroot="open">
+                <fast-style data-style-id="fast-card"></fast-style>
+                <img src="https://via.placeholder.com/300x200/414141" />
+                <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
+                    <h2>Heading</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                        scelerisque.Maecenas in velit vehicula, aliquet orci et, consequat
+                        purus. Donec egetsodales lectus, vel sollicitudin ligula.
+                        Suspendisse volutpat auctor diam,vel mattis lorem venenatis in.
+                    </p>
+                    <fast-button>
+                        <template shadowroot="open">
+                            <fast-style data-style-id="fast-button"></fast-style>
+                            <button class="control">
+                                <span>
+                                    Button
+                                </span>
+                            </button>
+                        </template>
+                    </fast-button>
+                </div>
+            </template>
+        </fast-card>
+        <fast-card style="width: 300px;">
+            <template shadowroot="open">
+                <fast-style data-style-id="fast-card"></fast-style>
+                <img src="https://via.placeholder.com/300x200/414141" />
+                <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
+                    <h2>Heading</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                        scelerisque.Maecenas in velit vehicula, aliquet orci et, consequat
+                        purus. Donec egetsodales lectus, vel sollicitudin ligula.
+                        Suspendisse volutpat auctor diam,vel mattis lorem venenatis in.
+                    </p>
+                    <fast-button>
+                        <template shadowroot="open">
+                            <fast-style data-style-id="fast-button"></fast-style>
+                            <button class="control">
+                                <span>
+                                    Button
+                                </span>
+                            </button>
+                        </template>
+                    </fast-button>
+                </div>
+            </template>
+        </fast-card>
+        <fast-card style="width: 300px;">
+            <template shadowroot="open">
+                <fast-style data-style-id="fast-card"></fast-style>
+                <img src="https://via.placeholder.com/300x200/414141" />
+                <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
+                    <h2>Heading</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                        scelerisque.Maecenas in velit vehicula, aliquet orci et, consequat
+                        purus. Donec egetsodales lectus, vel sollicitudin ligula.
+                        Suspendisse volutpat auctor diam,vel mattis lorem venenatis in.
+                    </p>
+                    <fast-button>
+                        <template shadowroot="open">
+                            <fast-style data-style-id="fast-button"></fast-style>
+                            <button class="control">
+                                <span>
+                                    Button
+                                </span>
+                            </button>
+                        </template>
+                    </fast-button>
+                </div>
+            </template>
+        </fast-card>
+        <fast-card style="width: 300px;">
+            <template shadowroot="open">
+                <fast-style data-style-id="fast-card"></fast-style>
+                <img src="https://via.placeholder.com/300x200/414141" />
+                <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
+                    <h2>Heading</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                        scelerisque.Maecenas in velit vehicula, aliquet orci et, consequat
+                        purus. Donec egetsodales lectus, vel sollicitudin ligula.
+                        Suspendisse volutpat auctor diam,vel mattis lorem venenatis in.
+                    </p>
+                    <fast-button>
+                        <template shadowroot="open">
+                            <fast-style data-style-id="fast-button"></fast-style>
+                            <button class="control">
+                                <span>
+                                    Button
+                                </span>
+                            </button>
+                        </template>
+                    </fast-button>
+                </div>
+            </template>
+        </fast-card>
+        <fast-card style="width: 300px;">
+            <template shadowroot="open">
+                <fast-style data-style-id="fast-card"></fast-style>
+                <img src="https://via.placeholder.com/300x200/414141" />
+                <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
+                    <h2>Heading</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                        scelerisque.Maecenas in velit vehicula, aliquet orci et, consequat
+                        purus. Donec egetsodales lectus, vel sollicitudin ligula.
+                        Suspendisse volutpat auctor diam,vel mattis lorem venenatis in.
+                    </p>
+                    <fast-button>
+                        <template shadowroot="open">
+                            <fast-style data-style-id="fast-button"></fast-style>
+                            <button class="control">
+                                <span>
+                                    Button
+                                </span>
+                            </button>
+                        </template>
+                    </fast-button>
+                </div>
+            </template>
+        </fast-card>
+        <fast-card style="width: 300px;">
+            <template shadowroot="open">
+                <fast-style data-style-id="fast-card"></fast-style>
+                <img src="https://via.placeholder.com/300x200/414141" />
+                <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
+                    <h2>Heading</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                        scelerisque.Maecenas in velit vehicula, aliquet orci et, consequat
+                        purus. Donec egetsodales lectus, vel sollicitudin ligula.
+                        Suspendisse volutpat auctor diam,vel mattis lorem venenatis in.
+                    </p>
+                    <fast-button>
+                        <template shadowroot="open">
+                            <fast-style data-style-id="fast-button"></fast-style>
+                            <button class="control">
+                                <span>
+                                    Button
+                                </span>
+                            </button>
+                        </template>
+                    </fast-button>
+                </div>
+            </template>
+        </fast-card>
+        <fast-card style="width: 300px;">
+            <template shadowroot="open">
+                <fast-style data-style-id="fast-card"></fast-style>
+                <img src="https://via.placeholder.com/300x200/414141" />
+                <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
+                    <h2>Heading</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                        scelerisque.Maecenas in velit vehicula, aliquet orci et, consequat
+                        purus. Donec egetsodales lectus, vel sollicitudin ligula.
+                        Suspendisse volutpat auctor diam,vel mattis lorem venenatis in.
+                    </p>
+                    <fast-button>
+                        <template shadowroot="open">
+                            <fast-style data-style-id="fast-button"></fast-style>
+                            <button class="control">
+                                <span>
+                                    Button
+                                </span>
+                            </button>
+                        </template>
+                    </fast-button>
+                </div>
+            </template>
+        </fast-card>
+        <fast-card style="width: 300px;">
+            <template shadowroot="open">
+                <fast-style data-style-id="fast-card"></fast-style>
+                <img src="https://via.placeholder.com/300x200/414141" />
+                <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
+                    <h2>Heading</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                        scelerisque.Maecenas in velit vehicula, aliquet orci et, consequat
+                        purus. Donec egetsodales lectus, vel sollicitudin ligula.
+                        Suspendisse volutpat auctor diam,vel mattis lorem venenatis in.
+                    </p>
+                    <fast-button>
+                        <template shadowroot="open">
+                            <fast-style data-style-id="fast-button"></fast-style>
+                            <button class="control">
+                                <span>
+                                    Button
+                                </span>
+                            </button>
+                        </template>
+                    </fast-button>
+                </div>
+            </template>
+        </fast-card>
+    </body>
+</html>
diff --git a/packages/web-components/fast-ssr/src/fast-style/index.ts b/packages/web-components/fast-ssr/src/fast-style/index.ts
new file mode 100644
index 00000000000..cb480301651
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/fast-style/index.ts
@@ -0,0 +1,79 @@
+interface StyleCache {
+    [key: string]: CSSStyleSheet | string;
+}
+
+/**
+ * The FASTStyle web component that takes attributes:
+ * - css - a string version of the CSS to be applied to the parent web component, this can be omitted if the data-style-id has been used in the DOM as the cached value will be fetched
+ * - data-style-id - a dataset attribute used as an identifier for the CSS attr string
+ */
+export default class FASTStyle extends HTMLElement {
+    private static cache: StyleCache = {};
+    private static hashIdDataSetName: string = "data-style-id";
+    private static supportsAdoptedStyleSheets: boolean =
+        Array.isArray((document as any).adoptedStyleSheets) &&
+        "replace" in CSSStyleSheet.prototype;
+
+    /**
+     * @internal
+     */
+    public connectedCallback(): void {
+        const hashId: string = this.getAttribute(FASTStyle.hashIdDataSetName) as string;
+        const css: string = this.getAttribute("css") as string;
+        this.registerStyles(hashId, css);
+    }
+
+    /**
+     * Register styles if they are not part of the cache and attach them
+     */
+    private registerStyles = (hashId: string, css: string): void => {
+        if (FASTStyle.supportsAdoptedStyleSheets) {
+            if (!(hashId in FASTStyle.cache)) {
+                this.memoizeAdoptedStylesheetStyles(hashId, css);
+            }
+            this.attachAdoptedStylesheetStyles(this.parentNode as ShadowRoot, hashId);
+        } else {
+            if (!(hashId in FASTStyle.cache)) {
+                this.memoizeStyleElementStyles(hashId, css);
+            }
+            this.attachStyleElementStyles(this.parentNode as ShadowRoot, hashId);
+        }
+    };
+
+    /**
+     * Memoize CSSStyleSheets
+     */
+    private memoizeAdoptedStylesheetStyles(hashId: string, css: string) {
+        const sheet = new CSSStyleSheet();
+        (sheet as any).replaceSync(css);
+        FASTStyle.cache[hashId] = sheet;
+    }
+
+    /**
+     * Attach CSSStyleSheets
+     */
+    private attachAdoptedStylesheetStyles(shadowRoot: ShadowRoot, hashId: string) {
+        (shadowRoot as any).adoptedStyleSheets = [
+            ...(shadowRoot as any).adoptedStyleSheets!,
+            FASTStyle.cache[hashId] as CSSStyleSheet,
+        ];
+    }
+
+    /**
+     * Memoize css strings
+     */
+    private memoizeStyleElementStyles(hashId: string, css: string) {
+        FASTStyle.cache[hashId] = css;
+    }
+
+    /**
+     * Attach style elements
+     */
+    private attachStyleElementStyles(shadowRoot: ShadowRoot, hashId: string) {
+        const element = document.createElement("style");
+        element.innerHTML = FASTStyle.cache[hashId] as string;
+        shadowRoot.append(element);
+    }
+}
+
+customElements.define("fast-style", FASTStyle);
diff --git a/packages/web-components/fast-ssr/test/fast-style.spec.ts b/packages/web-components/fast-ssr/test/fast-style.spec.ts
new file mode 100644
index 00000000000..08f74b18e39
--- /dev/null
+++ b/packages/web-components/fast-ssr/test/fast-style.spec.ts
@@ -0,0 +1,62 @@
+import { expect, test } from "@playwright/test"
+
+test("Check that the first element has styles assigned", async ({ page }) => {
+	await page.goto("/fast-style");
+
+	const cards = page.locator("fast-card");
+	const styles = await cards.evaluateAll((cardList) => {
+		return cardList.map((card) => {
+			return window.getComputedStyle(card, null).getPropertyValue("background-color");
+		});
+	});
+
+	expect(styles[0]).toEqual("rgb(26, 26, 26)");
+});
+test("Check that the nested element in the first element has styles assigned", async ({ page }) => {
+	await page.goto("/fast-style");
+
+	const cards = page.locator("fast-card");
+	const styles = await cards.evaluateAll((cardList) => {
+		return cardList.map((card) => {
+			return window.getComputedStyle(
+					(card.shadowRoot?.querySelector("fast-button") as Element), null
+				).getPropertyValue("background-color");
+		});
+	});
+
+	expect(styles[0]).toEqual("rgb(43, 43, 43)");
+});
+test("Check that all elements have styles assigned", async ({ page }) => {
+	await page.goto("/fast-style");
+
+	const cards = page.locator("fast-card");
+	const styles = await cards.evaluateAll((cardList) => {
+		return cardList.map((card) => {
+			return window.getComputedStyle(card, null).getPropertyValue("background-color");
+		});
+	});
+
+	expect(styles).toHaveLength(10);
+
+	styles.forEach((style) => {
+		expect(style).toEqual("rgb(26, 26, 26)");
+	});
+});
+test("Check that all nested elements have styles assigned", async ({ page}) => {
+	await page.goto("/fast-style");
+
+	const cards = page.locator("fast-card");
+	const styles = await cards.evaluateAll((cardList) => {
+		return cardList.map((card) => {
+			return window.getComputedStyle(
+					(card.shadowRoot?.querySelector("fast-button") as Element), null
+				).getPropertyValue("background-color");
+		});
+	});
+
+	expect(styles).toHaveLength(10);
+
+	styles.forEach((style) => {
+		expect(style).toEqual("rgb(43, 43, 43)");
+	});
+});

From ed63ade378d9a542e000a5b202647d1f977dcfdb Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Wed, 16 Feb 2022 14:17:27 -0800
Subject: [PATCH 056/135] Pin the checkchange to the feature branch (#5611)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This change will pin the `checkchange` check in the github workflow to check for changes against the `features/fast-element-2` branch. Since the branch should only be checking PRs against its contents and not the default branch this is the current workaround for checking for changefiles against non-default branches. This change must be removed prior to inclusion to the default branch.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

## ⏭ Next Steps

<!---
If there is relevant follow-up work to this PR, please list any existing issues or provide brief descriptions of what you would like to do next.
-->
- Add an issue to remove this change in the feature branch tracking project (https://github.com/microsoft/fast/issues/5612)
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d73c55edd5c..345133ced39 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   "scripts": {
     "bump": "beachball bump",
     "change": "beachball change",
-    "checkchange": "beachball check  --scope \"!sites/*\" --changehint \"Run 'yarn change' to generate a change file\"",
+    "checkchange": "beachball check  --scope \"!sites/*\" --changehint \"Run 'yarn change' to generate a change file\" -b origin/features/fast-element-2",
     "check": "beachball check ",
     "publish": "beachball publish",
     "publish-ci": "beachball publish -y --access public",

From 37da7a77e26caa375df7ae007629d022ad8b9e13 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Wed, 16 Feb 2022 14:19:41 -0800
Subject: [PATCH 057/135] Added change files for FAST Element 2 (#5610)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
These are the necessary change files for the current state of work for FAST Element 2.0. Subsequent changes will require a change file after a PR has been added to pin the `checkchange` to the feature branch.

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->
Read the change files carefully and see if you agree with the wording/change type/package/etc.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [x] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [ ] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

## ⏭ Next Steps

<!---
If there is relevant follow-up work to this PR, please list any existing issues or provide brief descriptions of what you would like to do next.
-->
- Add a PR to pin `checkchange` to the feature branch (#5611)
- Add an issue to remove `checkchange` pinning once feature branch work is complete (https://github.com/microsoft/fast/issues/5612)
---
 ...-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869a.json | 7 +++++++
 ...-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869b.json | 7 +++++++
 ...-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869c.json | 7 +++++++
 ...-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869e.json | 7 +++++++
 ...-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869f.json | 7 +++++++
 ...-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869g.json | 7 +++++++
 ...-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869h.json | 7 +++++++
 ...-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869i.json | 7 +++++++
 ...-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869j.json | 7 +++++++
 ...-fast-element-422bda9e-1e66-46b2-a665-ca4e8a685cbc.json | 7 +++++++
 ...-fast-element-422bda9e-1e66-46b2-a665-ca4e8a685cbd.json | 7 +++++++
 11 files changed, 77 insertions(+)
 create mode 100644 change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869a.json
 create mode 100644 change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869b.json
 create mode 100644 change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869c.json
 create mode 100644 change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869e.json
 create mode 100644 change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869f.json
 create mode 100644 change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869g.json
 create mode 100644 change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869h.json
 create mode 100644 change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869i.json
 create mode 100644 change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869j.json
 create mode 100644 change/@microsoft-fast-element-422bda9e-1e66-46b2-a665-ca4e8a685cbc.json
 create mode 100644 change/@microsoft-fast-element-422bda9e-1e66-46b2-a665-ca4e8a685cbd.json

diff --git a/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869a.json b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869a.json
new file mode 100644
index 00000000000..7bf0ffe70c9
--- /dev/null
+++ b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869a.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "`View` and `HTMLView` - Type parameters added to enable strongly typed views based on their data source. The constructor of `HTMLView` has a new signature based on changes to the compiler's output. Internals have been cleaned up and no longer rely on the Range type.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869b.json b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869b.json
new file mode 100644
index 00000000000..34ada7b73be
--- /dev/null
+++ b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869b.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "`ElementViewTemplate`, `SyntheticViewTemplate`, and `ViewTemplate` - Added type parameters throughout. Logic to instantiate and apply behaviors moved out of the template and into the view where it can be lazily executed. Removed the ability of the `render` method to take a string id of the node to render to. You must provide a node.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
\ No newline at end of file
diff --git a/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869c.json b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869c.json
new file mode 100644
index 00000000000..74a147fe307
--- /dev/null
+++ b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869c.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "`DOM` - Tree Walker methods are no longer used and are thus removed. The API for removing child nodes has been removed as well since it was only used in one place and could be inlined. The helper `createCustomAttributePlaceholder()` no longer requires an attribute name. It will be uniquely generated internally.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
\ No newline at end of file
diff --git a/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869e.json b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869e.json
new file mode 100644
index 00000000000..a83663e4297
--- /dev/null
+++ b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869e.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "`class` - Bindings to `class` are now more nuanced. Binding directly to `class` will simply set the `className` property. If you need to bind to `class` knowing that manual JS will also manipulate the `classList` in addition to the binding, then you should now bind to `:classList` instead. This allows for performance optimizations in the simple, most common case.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
\ No newline at end of file
diff --git a/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869f.json b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869f.json
new file mode 100644
index 00000000000..d74aeaf826b
--- /dev/null
+++ b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869f.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "`Behavior` and `ViewBehavior` - `Behavior` now requires an `ExecutionContext` for `unbind`. Behaviors can be used for elements or views. `ViewBehavior` has been introduced for use exclusively with views, and provides some optimization opportunities.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
\ No newline at end of file
diff --git a/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869g.json b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869g.json
new file mode 100644
index 00000000000..4dc8866a841
--- /dev/null
+++ b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869g.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "`RefBehavior` has been replaced with `RefDirective`. The directive also implements `ViewBehavior` allowing a single directive instance to be shared across all template instances that use the ref.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
\ No newline at end of file
diff --git a/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869h.json b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869h.json
new file mode 100644
index 00000000000..1e8f21753ee
--- /dev/null
+++ b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869h.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "Removed `SlottedBehavior` and `ChildrenBehavior` have been replaced with `SlottedDirective` and `ChildrenDirective`. These directives allow a single directive instance to be shared across all template instances that use the ref.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
\ No newline at end of file
diff --git a/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869i.json b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869i.json
new file mode 100644
index 00000000000..54067b1c944
--- /dev/null
+++ b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869i.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "Removed `AttachedBehaviorHTMLDirective` and `AttachedBehaviorType` since they are no longer used in the new directive/behavior architecture for ref, slotted, and children.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
\ No newline at end of file
diff --git a/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869j.json b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869j.json
new file mode 100644
index 00000000000..711102a95c7
--- /dev/null
+++ b/change/@microsoft-fast-element-08318f12-b72b-4832-b3d2-093ab5a7869j.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "Renamed `Notifier#source` to `Notifier#subject` to align with other observable terminology and prevent name clashes with `BindingObserver` properties.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
\ No newline at end of file
diff --git a/change/@microsoft-fast-element-422bda9e-1e66-46b2-a665-ca4e8a685cbc.json b/change/@microsoft-fast-element-422bda9e-1e66-46b2-a665-ca4e8a685cbc.json
new file mode 100644
index 00000000000..34b693b231f
--- /dev/null
+++ b/change/@microsoft-fast-element-422bda9e-1e66-46b2-a665-ca4e8a685cbc.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "`HTMLDirective` - The `targetIndex: number` property has been replaced by a `targetId: string` property. The `createBehavior` method no longer takes a target `Node` but instead takes a `BehaviorTargets` instance. The actual target can be looked up on the `BehaviorTargets` instance by indexing with the `targetId` property.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
\ No newline at end of file
diff --git a/change/@microsoft-fast-element-422bda9e-1e66-46b2-a665-ca4e8a685cbd.json b/change/@microsoft-fast-element-422bda9e-1e66-46b2-a665-ca4e8a685cbd.json
new file mode 100644
index 00000000000..7ca02e25ea9
--- /dev/null
+++ b/change/@microsoft-fast-element-422bda9e-1e66-46b2-a665-ca4e8a685cbd.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "`compileTemplate()` - Internals have been significantly changed. The implementation no longer uses a TreeWalker. The return type has change to an `HTMLTemplateCompilationResult` with different properties.",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
\ No newline at end of file

From 2936dcff62b1b81ddd5d7d8bb546ef6a77910bbc Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 17 Feb 2022 08:26:27 -0800
Subject: [PATCH 058/135] Add branch pointing to config instead of package
 scripts (#5616)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This change moves the branch specificity to beachball config to allow `yarn change` to target the feature branch and also removes the restriction on "major" change updates.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
---
 beachball.config.js | 2 +-
 package.json        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/beachball.config.js b/beachball.config.js
index 5d2838343b0..220c756cc6f 100644
--- a/beachball.config.js
+++ b/beachball.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-    disallowedChangeTypes: ["major"],
+    branch: "origin/features/fast-element-2",
     ignorePatterns: [
         ".ignore",
         ".github/",
diff --git a/package.json b/package.json
index 345133ced39..d73c55edd5c 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   "scripts": {
     "bump": "beachball bump",
     "change": "beachball change",
-    "checkchange": "beachball check  --scope \"!sites/*\" --changehint \"Run 'yarn change' to generate a change file\" -b origin/features/fast-element-2",
+    "checkchange": "beachball check  --scope \"!sites/*\" --changehint \"Run 'yarn change' to generate a change file\"",
     "check": "beachball check ",
     "publish": "beachball publish",
     "publish-ci": "beachball publish -y --access public",

From 34f17e3fb4d7b7c9af51721aa661e8986758438c Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Thu, 17 Feb 2022 13:07:13 -0500
Subject: [PATCH 059/135] feat: enable synchronous dom updates for SSR (#5615)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: enable synchronous dom updates for SSR

* Add branch pointing to config instead of package scripts (#5616)

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This change moves the branch specificity to beachball config to allow `yarn change` to target the feature branch and also removes the restriction on "major" change updates.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

* feat: enable synchronous dom updates for SSR

* Change files

* Change files

Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>
Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-ecbe6511-b19c-4312-91f2-1c354ebd5245.json |  7 ++
 ...-08a4dedc-a404-44ca-ac6a-fe3b4b22a2a1.json |  7 ++
 .../fast-element/docs/api-report.md           |  1 +
 .../fast-element/src/dom.spec.ts              | 98 ++++++++++++++++++-
 .../web-components/fast-element/src/dom.ts    | 33 +++++--
 5 files changed, 139 insertions(+), 7 deletions(-)
 create mode 100644 change/@microsoft-fast-element-ecbe6511-b19c-4312-91f2-1c354ebd5245.json
 create mode 100644 change/@microsoft-fast-router-08a4dedc-a404-44ca-ac6a-fe3b4b22a2a1.json

diff --git a/change/@microsoft-fast-element-ecbe6511-b19c-4312-91f2-1c354ebd5245.json b/change/@microsoft-fast-element-ecbe6511-b19c-4312-91f2-1c354ebd5245.json
new file mode 100644
index 00000000000..6d5e05205b9
--- /dev/null
+++ b/change/@microsoft-fast-element-ecbe6511-b19c-4312-91f2-1c354ebd5245.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: enable synchronous dom updates for SSR",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-router-08a4dedc-a404-44ca-ac6a-fe3b4b22a2a1.json b/change/@microsoft-fast-router-08a4dedc-a404-44ca-ac6a-fe3b4b22a2a1.json
new file mode 100644
index 00000000000..1a0e4e6db55
--- /dev/null
+++ b/change/@microsoft-fast-router-08a4dedc-a404-44ca-ac6a-fe3b4b22a2a1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update router to work with new template primitives",
+  "packageName": "@microsoft/fast-router",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index bfb4247549b..fa09944427e 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -209,6 +209,7 @@ export const DOM: Readonly<{
     createInterpolationPlaceholder(index: number): string;
     createCustomAttributePlaceholder(index: number): string;
     createBlockPlaceholder(index: number): string;
+    setUpdateMode(isAsync: boolean): void;
     queueUpdate(callable: Callable): void;
     nextUpdate(): Promise<void>;
     processUpdates(): void;
diff --git a/packages/web-components/fast-element/src/dom.spec.ts b/packages/web-components/fast-element/src/dom.spec.ts
index eec75bb63d4..a201d7808e5 100644
--- a/packages/web-components/fast-element/src/dom.spec.ts
+++ b/packages/web-components/fast-element/src/dom.spec.ts
@@ -25,7 +25,7 @@ function watchSetTimeoutForErrors<TError = any>() {
 }
 
 describe("The DOM facade", () => {
-    context("when updating DOM", () => {
+    context("when updating DOM asynchronously", () => {
         it("calls task in a future turn", done => {
             let called = false;
 
@@ -430,4 +430,100 @@ describe("The DOM facade", () => {
             }, waitMilliseconds);
         });
     });
+
+    context("when updating DOM synchronously", () => {
+        beforeEach(() => {
+            DOM.setUpdateMode(false);
+        });
+
+        afterEach(() => {
+            DOM.setUpdateMode(true);
+        });
+
+        it("calls task immediately", () => {
+            let called = false;
+
+            DOM.queueUpdate(() => {
+                called = true;
+            });
+
+            expect(called).to.equal(true);
+        });
+
+        it("calls task.call method immediately", () => {
+            let called = false;
+
+            DOM.queueUpdate({
+                call: () => {
+                    called = true;
+                }
+            });
+
+            expect(called).to.equal(true);
+        });
+
+        it("calls multiple tasks in order", () => {
+            const calls:number[] = [];
+
+            DOM.queueUpdate(() =>  {
+                calls.push(0);
+            });
+            DOM.queueUpdate(() =>  {
+                calls.push(1);
+            });
+            DOM.queueUpdate(() =>  {
+                calls.push(2);
+            });
+
+            expect(calls).to.eql([0, 1, 2]);
+        });
+
+        it("can schedule tasks recursively", () => {
+            const steps: number[] = [];
+
+            DOM.queueUpdate(() => {
+                steps.push(0);
+                DOM.queueUpdate(() => {
+                    steps.push(2);
+                    DOM.queueUpdate(() => {
+                        steps.push(4);
+                    });
+                    steps.push(3);
+                });
+                steps.push(1);
+            });
+
+            expect(steps).to.eql([0, 1, 2, 3, 4]);
+        });
+
+        it(`can recurse ${maxRecursion} tasks deep`, () => {
+            let recurseCount = 0;
+            function go() {
+                if (++recurseCount < maxRecursion) {
+                    DOM.queueUpdate(go);
+                }
+            }
+
+            DOM.queueUpdate(go);
+
+            expect(recurseCount).to.equal(maxRecursion);
+        });
+
+        it("throws errors immediately", () => {
+            const calls: number[] = [];
+            let caught: any;
+
+            try {
+                DOM.queueUpdate(() => {
+                    calls.push(0);
+                    throw 0;
+                });
+            } catch(error) {
+                caught = error;
+            }
+
+            expect(calls).to.eql([0]);
+            expect(caught).to.eql(0);
+        });
+    });
 });
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index f95cd66af56..45942985dbf 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -13,6 +13,8 @@ const fastHTMLPolicy: TrustedTypesPolicy = $global.trustedTypes.createPolicy(
 let htmlPolicy: TrustedTypesPolicy = fastHTMLPolicy;
 const updateQueue: Callable[] = [];
 const pendingErrors: any[] = [];
+const rAF = $global.requestAnimationFrame;
+let updateAsync = true;
 
 function throwFirstError(): void {
     if (pendingErrors.length) {
@@ -24,8 +26,13 @@ function tryRunTask(task: Callable): void {
     try {
         (task as any).call();
     } catch (error) {
-        pendingErrors.push(error);
-        setTimeout(throwFirstError, 0);
+        if (updateAsync) {
+            pendingErrors.push(error);
+            setTimeout(throwFirstError, 0);
+        } else {
+            updateQueue.length = 0;
+            throw error;
+        }
     }
 }
 
@@ -128,16 +135,30 @@ export const DOM = Object.freeze({
         return `<!--${marker}:${index}-->`;
     },
 
+    /**
+     * Sets the update mode used by queueUpdate.
+     * @param isAsync Indicates whether DOM updates should be asynchronous.
+     * @remarks
+     * By default, the update mode is asynchronous, since that provides the best
+     * performance in the browser. Passing false to setUpdateMode will instead cause
+     * the queue to be immediately processed for each call to queueUpdate. However,
+     * ordering will still be preserved so that nested tasks do not run until
+     * after parent tasks complete.
+     */
+    setUpdateMode(isAsync: boolean) {
+        updateAsync = isAsync;
+    },
+
     /**
      * Schedules DOM update work in the next async batch.
      * @param callable - The callable function or object to queue.
      */
     queueUpdate(callable: Callable) {
-        if (updateQueue.length < 1) {
-            $global.requestAnimationFrame(DOM.processUpdates);
-        }
-
         updateQueue.push(callable);
+
+        if (updateQueue.length < 2) {
+            updateAsync ? rAF(DOM.processUpdates) : DOM.processUpdates();
+        }
     },
 
     /**

From 307f7d974ac8bbdea7fdb5df6553ab5441cff22d Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Thu, 17 Feb 2022 10:17:41 -0800
Subject: [PATCH 060/135] feat: adds FASTElementRenderer to fast-ssr (#5613)

* adds FASTElementRenderer as a ElementRenderer implementation

* adding test

* adding eslint for file extensions

* re-structure tests to better support dependency structures

* Fixing tests for FASTElementRenderer.matchesClass

* adding code comments

* Update packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts

Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>
---
 .../web-components/fast-ssr/.eslintrc.cjs     |  6 ++
 packages/web-components/fast-ssr/package.json |  9 ++-
 ...wright.config.ts => playwright.config.cjs} |  6 +-
 .../web-components/fast-ssr/server/server.ts  |  2 +-
 .../elemenent-renderer.spec.ts                | 17 +++++
 .../src/element-renderer/element-renderer.ts  | 74 +++++++++++++++++++
 .../fast-style}/fast-style.spec.ts            |  0
 packages/web-components/fast-ssr/src/index.ts |  2 +-
 .../web-components/fast-ssr/src/tsconfig.json |  3 +-
 .../fast-ssr/test/example.spec.ts             | 10 ---
 .../web-components/fast-ssr/test/package.json |  5 --
 .../fast-ssr/test/tsconfig.json               |  9 ---
 .../web-components/fast-ssr/tsconfig.json     |  1 +
 13 files changed, 110 insertions(+), 34 deletions(-)
 create mode 100644 packages/web-components/fast-ssr/.eslintrc.cjs
 rename packages/web-components/fast-ssr/{test/playwright.config.ts => playwright.config.cjs} (51%)
 create mode 100644 packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
 create mode 100644 packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
 rename packages/web-components/fast-ssr/{test => src/fast-style}/fast-style.spec.ts (100%)
 delete mode 100644 packages/web-components/fast-ssr/test/example.spec.ts
 delete mode 100644 packages/web-components/fast-ssr/test/package.json
 delete mode 100644 packages/web-components/fast-ssr/test/tsconfig.json

diff --git a/packages/web-components/fast-ssr/.eslintrc.cjs b/packages/web-components/fast-ssr/.eslintrc.cjs
new file mode 100644
index 00000000000..82074b3cb5e
--- /dev/null
+++ b/packages/web-components/fast-ssr/.eslintrc.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
+    rules: {
+        "import/extensions": ["error", "always"],
+    },
+};
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index cdcb62fa1ec..a9cf3c7a1d3 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -17,13 +17,16 @@
   "scripts": {
     "build": "tsc -b --clean src && tsc -b src",
     "build-server": "tsc -b server",
-    "pretest": "npm run build-server",
-    "test": "playwright test -c test",
+    "eslint": "eslint . --ext .ts",
+    "eslint:fix": "eslint . --ext .ts --fix",
+    "pretest": "npm run build-server && npm run build",
+    "test": "playwright test --config=playwright.config.cjs",
     "test-server": "node server/dist/server.js",
     "install-playwright-browsers": "npx playwright install"
   },
   "description": "A package for rendering FAST components outside the browser.",
-  "main": "index.js",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/dts/index.d.ts",
   "private": true,
   "dependencies": {
     "@lit-labs/ssr": "^1.0.0-rc.2",
diff --git a/packages/web-components/fast-ssr/test/playwright.config.ts b/packages/web-components/fast-ssr/playwright.config.cjs
similarity index 51%
rename from packages/web-components/fast-ssr/test/playwright.config.ts
rename to packages/web-components/fast-ssr/playwright.config.cjs
index 4b048b7ff22..3bd6075cf09 100644
--- a/packages/web-components/fast-ssr/test/playwright.config.ts
+++ b/packages/web-components/fast-ssr/playwright.config.cjs
@@ -1,6 +1,5 @@
-// playwright.config.ts
-import { PlaywrightTestConfig } from "@playwright/test";
-const config: PlaywrightTestConfig = {
+module.exports = {
+    testDir: "./dist/esm",
     webServer: {
         command: "npm run test-server",
         port: 8080,
@@ -8,4 +7,3 @@ const config: PlaywrightTestConfig = {
         reuseExistingServer: false,
     },
 };
-export default config;
diff --git a/packages/web-components/fast-ssr/server/server.ts b/packages/web-components/fast-ssr/server/server.ts
index 866fa10b5e8..0507d622326 100644
--- a/packages/web-components/fast-ssr/server/server.ts
+++ b/packages/web-components/fast-ssr/server/server.ts
@@ -47,7 +47,7 @@ function handleStyleRequest(req: Request, res: Response) {
 function handleStyleScriptRequest(req: Request, res: Response) {
     res.set("Content-Type", "application/javascript");
     fs.readFile(
-        path.resolve(__dirname, "./dist/fast-style/index.js"),
+        path.resolve(__dirname, "./dist/esm/fast-style/index.js"),
         { encoding: "utf8" },
         (err, data) => {
             const stream = (Readable as any).from(data);
diff --git a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
new file mode 100644
index 00000000000..717eb76599f
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
@@ -0,0 +1,17 @@
+import "@lit-labs/ssr/lib/install-global-dom-shim.js";
+import { FASTElement } from "@microsoft/fast-element";
+import { expect, test } from '@playwright/test';
+import { FASTElementRenderer } from "./element-renderer.js";
+
+test.describe("FASTElementRenderer", () => {
+    test.describe("should have a 'matchesClass' method", () => {
+        test("that returns true when invoked with a class that extends FASTElement ",  () => {
+            class MyElement extends FASTElement {}
+            expect(FASTElementRenderer.matchesClass(MyElement)).toBe(true);
+        });
+        test("that returns false when invoked with a class that does not extend FASTElement ", () => {
+            class MyElement extends HTMLElement {}
+            expect(FASTElementRenderer.matchesClass(MyElement)).toBe(false);
+        });
+    })
+})
diff --git a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
new file mode 100644
index 00000000000..11980a038f7
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
@@ -0,0 +1,74 @@
+import { ElementRenderer, RenderInfo } from "@lit-labs/ssr";
+import { FASTElement } from "@microsoft/fast-element";
+
+export class FASTElementRenderer extends ElementRenderer {
+    /**
+     * The element instance represented by the {@link FASTElementRenderer}.
+     */
+    public readonly element!: FASTElement;
+
+    /**
+     * Tests a constructor to determine if it should be managed by a {@link FASTElementRenderer}.
+     * @param ctor - The constructor to test.
+     */
+    public static matchesClass(ctor: typeof HTMLElement): boolean {
+        return ctor.prototype instanceof FASTElement;
+    }
+
+    /**
+     * Indicate to the {@link FASTElementRenderer} that the instance should execute DOM connection behavior.
+     */
+    public connectedCallback(): void {
+        this.element.connectedCallback();
+    }
+
+    /**
+     * Constructs a new {@link FASTElementRenderer}.
+     * @param tagName - the tag-name of the element to create.
+     */
+    constructor(tagName: string) {
+        super(tagName);
+
+        const ctor: typeof FASTElement | null = customElements.get(this.tagName);
+
+        if (ctor) {
+            this.element = new ctor();
+        } else {
+            throw new Error(
+                `FASTElementRenderer was unable to find a constructor for a custom element with the tag name '${tagName}'.`
+            );
+        }
+    }
+
+    /**
+     * Renders the component internals to light DOM instead of shadow DOM.
+     * @param renderInfo - information about the current rendering context.
+     */
+    *renderLight(renderInfo: RenderInfo): IterableIterator<string> {
+        // TODO - this will yield out the element's template using the template renderer, skipping any shadow-DOM specific emission.
+        yield "";
+    }
+
+    /**
+     * Render the component internals to shadow DOM.
+     * @param renderInfo - information about the current rendering context.
+     */
+    *renderShadow(renderInfo: RenderInfo): IterableIterator<string> {
+        // TODO - this will yield out the element's template using the template renderer
+        yield "";
+    }
+
+    /**
+     * Indicate to the {@link FASTElementRenderer} that an attribute has been changed.
+     * @param name - The name of the changed attribute
+     * @param old - The old attribute value
+     * @param value - The new attribute value
+     */
+    attributeChangedCallback(
+        name: string,
+        old: string | null,
+        value: string | null
+    ): void {
+        this.element.attributeChangedCallback(name, old, value);
+    }
+}
diff --git a/packages/web-components/fast-ssr/test/fast-style.spec.ts b/packages/web-components/fast-ssr/src/fast-style/fast-style.spec.ts
similarity index 100%
rename from packages/web-components/fast-ssr/test/fast-style.spec.ts
rename to packages/web-components/fast-ssr/src/fast-style/fast-style.spec.ts
diff --git a/packages/web-components/fast-ssr/src/index.ts b/packages/web-components/fast-ssr/src/index.ts
index 62073af2a0f..09491d50f08 100644
--- a/packages/web-components/fast-ssr/src/index.ts
+++ b/packages/web-components/fast-ssr/src/index.ts
@@ -1 +1 @@
-export default "fast-ssr";
+export { FASTElementRenderer } from "./element-renderer/element-renderer.js";
diff --git a/packages/web-components/fast-ssr/src/tsconfig.json b/packages/web-components/fast-ssr/src/tsconfig.json
index 8b2f5bed380..d7363176aab 100644
--- a/packages/web-components/fast-ssr/src/tsconfig.json
+++ b/packages/web-components/fast-ssr/src/tsconfig.json
@@ -3,7 +3,8 @@
   "compilerOptions": {
     "composite": true,
     "rootDir": ".",
-    "outDir": "../dist",
+    "outDir": "../dist/esm",
+    "declarationDir": "../dist/dts",
     "lib": [
       "dom",
       "esnext"
diff --git a/packages/web-components/fast-ssr/test/example.spec.ts b/packages/web-components/fast-ssr/test/example.spec.ts
deleted file mode 100644
index 73c85108fa9..00000000000
--- a/packages/web-components/fast-ssr/test/example.spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test, expect, ElementHandle } from '@playwright/test';
-import fastSSR from "../src";
-
-test("example module test", async () => {
-	expect(fastSSR).toBe("fast-ssr");
-})
-test("example server test", async ({ page }) => {
-	await page.goto("/");
-	expect(await page.innerText('body')).toBe("hello world");
-});
diff --git a/packages/web-components/fast-ssr/test/package.json b/packages/web-components/fast-ssr/test/package.json
deleted file mode 100644
index 890f891f972..00000000000
--- a/packages/web-components/fast-ssr/test/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-	"type": "commonjs",
-	"comment": "This allows Playwright to handle TS compilation for us",
-	"private": true
-}
\ No newline at end of file
diff --git a/packages/web-components/fast-ssr/test/tsconfig.json b/packages/web-components/fast-ssr/test/tsconfig.json
deleted file mode 100644
index 2ba585452cf..00000000000
--- a/packages/web-components/fast-ssr/test/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-	"extends": "../tsconfig.json",
-	"compilerOptions": {
-		"rootDir": ".",
-		"outDir": "dist",
-		"declaration": false
-	},
-	"references": [{ "path": "../src"}]
-}
diff --git a/packages/web-components/fast-ssr/tsconfig.json b/packages/web-components/fast-ssr/tsconfig.json
index cf4cd344bc2..4cd3f5779d5 100644
--- a/packages/web-components/fast-ssr/tsconfig.json
+++ b/packages/web-components/fast-ssr/tsconfig.json
@@ -9,6 +9,7 @@
     "emitDecoratorMetadata": true,
     "noEmitOnError": true,
     "strict": true,
+    "skipLibCheck": true,
     "lib": [
       "dom",
       "esnext"

From ad21701fdfddb42c7fa8a71846c1ddf5baf75ac9 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 17 Feb 2022 15:02:33 -0800
Subject: [PATCH 061/135] Added prettier to fast-ssr package (#5617)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This change adds prettier to the `@microsoft/fast-ssr` package.

Note: I ran prettier after the changes and it looks like the current files are gtg. This is more for future proofing.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
---
 packages/web-components/fast-ssr/.prettierignore | 3 +++
 packages/web-components/fast-ssr/package.json    | 2 ++
 2 files changed, 5 insertions(+)
 create mode 100644 packages/web-components/fast-ssr/.prettierignore

diff --git a/packages/web-components/fast-ssr/.prettierignore b/packages/web-components/fast-ssr/.prettierignore
new file mode 100644
index 00000000000..28c7caee553
--- /dev/null
+++ b/packages/web-components/fast-ssr/.prettierignore
@@ -0,0 +1,3 @@
+coverage/*
+dist/*
+*.spec.ts
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index a9cf3c7a1d3..840d00ab066 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -20,6 +20,8 @@
     "eslint": "eslint . --ext .ts",
     "eslint:fix": "eslint . --ext .ts --fix",
     "pretest": "npm run build-server && npm run build",
+    "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.{ts,html}\" --list-different",
+    "prettier": "prettier --config ../../../.prettierrc --write \"**/*.{ts,html}\"",
     "test": "playwright test --config=playwright.config.cjs",
     "test-server": "node server/dist/server.js",
     "install-playwright-browsers": "npx playwright install"

From 2bc4c7aa16779b3b88b3b981dacd730b3e7e59cc Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 17 Feb 2022 18:14:36 -0800
Subject: [PATCH 062/135] Fixed linting errors and warnings (#5619)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This change does the following:
- Allow `no-non-null-assertion`
- Fixes all other warnings and errors

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->
@EisenbergEffect since these changes affect your work please take a close look, most of the changes are benign but I did move code around to best minimize ignoring the no-use-before-define issues.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
---
 ...-486e25bf-0f0b-42c6-adcc-8a0e99ed88a3.json |   7 +
 .../web-components/fast-element/.eslintrc.cjs |   1 +
 .../web-components/fast-element/src/dom.ts    |   2 +-
 .../src/observation/array-change-records.ts   |  88 ++---
 .../src/observation/array-observer.ts         |  43 ++-
 .../fast-element/src/templating/binding.ts    | 305 +++++++++---------
 .../fast-element/src/templating/children.ts   |   4 +-
 .../fast-element/src/templating/compiler.ts   |  27 +-
 .../src/templating/node-observation.ts        |   2 +-
 .../fast-element/src/templating/slotted.ts    |   4 +-
 .../fast-element/src/templating/view.ts       |   2 +-
 11 files changed, 257 insertions(+), 228 deletions(-)
 create mode 100644 change/@microsoft-fast-element-486e25bf-0f0b-42c6-adcc-8a0e99ed88a3.json

diff --git a/change/@microsoft-fast-element-486e25bf-0f0b-42c6-adcc-8a0e99ed88a3.json b/change/@microsoft-fast-element-486e25bf-0f0b-42c6-adcc-8a0e99ed88a3.json
new file mode 100644
index 00000000000..b96487b1cff
--- /dev/null
+++ b/change/@microsoft-fast-element-486e25bf-0f0b-42c6-adcc-8a0e99ed88a3.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fixed linting errors and warnings",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/web-components/fast-element/.eslintrc.cjs b/packages/web-components/fast-element/.eslintrc.cjs
index d5ea064f67e..4b5f0dd67d2 100644
--- a/packages/web-components/fast-element/.eslintrc.cjs
+++ b/packages/web-components/fast-element/.eslintrc.cjs
@@ -4,6 +4,7 @@ module.exports = {
         "import/extensions": ["error", "always"],
         "max-classes-per-file": "off",
         "no-case-declarations": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/ban-types": [
             "error",
             {
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index 45942985dbf..34d5fc660eb 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -40,7 +40,7 @@ const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 let id = 0;
 
 /** @internal */
-export const nextId = () => `${marker}-${++id}`;
+export const nextId = (): string => `${marker}-${++id}`;
 
 /** @internal */
 export const _interpolationStart = `${marker}{`;
diff --git a/packages/web-components/fast-element/src/observation/array-change-records.ts b/packages/web-components/fast-element/src/observation/array-change-records.ts
index 46194a9e1e4..2dfe6ce5221 100644
--- a/packages/web-components/fast-element/src/observation/array-change-records.ts
+++ b/packages/web-components/fast-element/src/observation/array-change-records.ts
@@ -164,6 +164,51 @@ function intersect(start1: number, end1: number, start2: number, end2: number):
     return end1 - start1; // Contained
 }
 
+/**
+ * A splice map is a representation of how a previous array of items
+ * was transformed into a new array of items. Conceptually it is a list of
+ * tuples of
+ *
+ *   <index, removed, addedCount>
+ *
+ * which are kept in ascending index order of. The tuple represents that at
+ * the |index|, |removed| sequence of items were removed, and counting forward
+ * from |index|, |addedCount| items were added.
+ * @public
+ */
+export class Splice {
+    constructor(
+        /**
+         * The index that the splice occurs at.
+         */
+        public index: number,
+
+        /**
+         * The items that were removed.
+         */
+        public removed: any[],
+
+        /**
+         * The  number of items that were added.
+         */
+        public addedCount: number
+    ) {}
+
+    static normalize(
+        previous: unknown[] | undefined,
+        current: unknown[],
+        changes: Splice[] | undefined
+    ): Splice[] | undefined {
+        return previous === void 0
+            ? changes!.length > 1
+                ? /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+                  project(current, changes!)
+                : changes
+            : /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+              calc(current, 0, current.length, previous, 0, previous.length);
+    }
+}
+
 /**
  * @remarks
  * Lacking individual splice mutation information, the minimal set of
@@ -386,46 +431,3 @@ function project(array: unknown[], changes: Splice[]): Splice[] {
 
     return splices;
 }
-
-/**
- * A splice map is a representation of how a previous array of items
- * was transformed into a new array of items. Conceptually it is a list of
- * tuples of
- *
- *   <index, removed, addedCount>
- *
- * which are kept in ascending index order of. The tuple represents that at
- * the |index|, |removed| sequence of items were removed, and counting forward
- * from |index|, |addedCount| items were added.
- * @public
- */
-export class Splice {
-    constructor(
-        /**
-         * The index that the splice occurs at.
-         */
-        public index: number,
-
-        /**
-         * The items that were removed.
-         */
-        public removed: any[],
-
-        /**
-         * The  number of items that were added.
-         */
-        public addedCount: number
-    ) {}
-
-    static normalize(
-        previous: unknown[] | undefined,
-        current: unknown[],
-        changes: Splice[] | undefined
-    ) {
-        return previous === void 0
-            ? changes!.length > 1
-                ? project(current, changes!)
-                : changes
-            : calc(current, 0, current.length, previous, 0, previous.length);
-    }
-}
diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index 0ba48efe0d0..8572c89ee67 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -66,7 +66,7 @@ class ArrayObserver extends SubscriberSet {
         this.notify(Splice.normalize(oldCollection, this.subject, splices));
     }
 
-    private enqueue() {
+    private enqueue(): void {
         if (this.needsQueue) {
             this.needsQueue = false;
             DOM.queueUpdate(this);
@@ -83,9 +83,9 @@ const sort = proto.sort;
 const splice = proto.splice;
 const unshift = proto.unshift;
 const arrayOverrides = {
-    pop() {
+    pop(...args) {
         const notEmpty = this.length > 0;
-        const result = pop.apply(this, arguments);
+        const result = pop.apply(this, args);
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0 && notEmpty) {
@@ -95,23 +95,20 @@ const arrayOverrides = {
         return result;
     },
 
-    push() {
-        const result = push.apply(this, arguments);
+    push(...args) {
+        const result = push.apply(this, args);
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
             o.addSplice(
-                adjustIndex(
-                    new Splice(this.length - arguments.length, [], arguments.length),
-                    this
-                )
+                adjustIndex(new Splice(this.length - args.length, [], args.length), this)
             );
         }
 
         return result;
     },
 
-    reverse() {
+    reverse(...args) {
         let oldArray;
         const o = this.$fastController as ArrayObserver;
 
@@ -120,7 +117,7 @@ const arrayOverrides = {
             oldArray = this.slice();
         }
 
-        const result = reverse.apply(this, arguments);
+        const result = reverse.apply(this, args);
 
         if (o !== void 0) {
             o.reset(oldArray);
@@ -129,9 +126,9 @@ const arrayOverrides = {
         return result;
     },
 
-    shift() {
+    shift(...args) {
         const notEmpty = this.length > 0;
-        const result = shift.apply(this, arguments);
+        const result = shift.apply(this, args);
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0 && notEmpty) {
@@ -141,7 +138,7 @@ const arrayOverrides = {
         return result;
     },
 
-    sort() {
+    sort(...args) {
         let oldArray;
         const o = this.$fastController as ArrayObserver;
 
@@ -150,7 +147,7 @@ const arrayOverrides = {
             oldArray = this.slice();
         }
 
-        const result = sort.apply(this, arguments);
+        const result = sort.apply(this, args);
 
         if (o !== void 0) {
             o.reset(oldArray);
@@ -159,18 +156,14 @@ const arrayOverrides = {
         return result;
     },
 
-    splice() {
-        const result = splice.apply(this, arguments);
+    splice(...args) {
+        const result = splice.apply(this, args);
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
             o.addSplice(
                 adjustIndex(
-                    new Splice(
-                        +arguments[0],
-                        result,
-                        arguments.length > 2 ? arguments.length - 2 : 0
-                    ),
+                    new Splice(+args[0], result, args.length > 2 ? args.length - 2 : 0),
                     this
                 )
             );
@@ -179,12 +172,12 @@ const arrayOverrides = {
         return result;
     },
 
-    unshift() {
-        const result = unshift.apply(this, arguments);
+    unshift(...args) {
+        const result = unshift.apply(this, args);
         const o = this.$fastController as ArrayObserver;
 
         if (o !== void 0) {
-            o.addSplice(adjustIndex(new Splice(0, [], arguments.length), this));
+            o.addSplice(adjustIndex(new Splice(0, [], args.length), this));
         }
 
         return result;
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 03af099c526..cefec33ba7e 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -33,6 +33,7 @@ export interface BindingMode {
     event: BindingType;
 }
 
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 export interface BindingConfig<T = any> {
     mode: BindingMode;
     options: any;
@@ -62,16 +63,163 @@ class BindingBase {
     }
 }
 
+function createContentBinding(
+    BaseType: typeof TargetUpdateBinding
+): typeof TargetUpdateBinding {
+    return class extends BaseType {
+        unbind(
+            source: any,
+            context: ExecutionContext,
+            targets: ViewBehaviorTargets
+        ): void {
+            super.unbind(source, context, targets);
+
+            const target = targets[this.directive.targetId] as ContentTarget;
+            const view = target.$fastView as ComposableView;
+
+            if (view !== void 0 && view.isComposed) {
+                view.unbind();
+                view.needsBindOnly = true;
+            }
+        }
+    };
+}
+
+function updateContentTarget(
+    target: ContentTarget,
+    aspect: string,
+    value: any,
+    source: any,
+    context: ExecutionContext
+): void {
+    // If there's no actual value, then this equates to the
+    // empty string for the purposes of content bindings.
+    if (value === null || value === undefined) {
+        value = "";
+    }
+
+    // If the value has a "create" method, then it's a template-like.
+    if (value.create) {
+        target.textContent = "";
+        let view = target.$fastView as ComposableView;
+
+        // If there's no previous view that we might be able to
+        // reuse then create a new view from the template.
+        if (view === void 0) {
+            view = value.create() as SyntheticView;
+        } else {
+            // If there is a previous view, but it wasn't created
+            // from the same template as the new value, then we
+            // need to remove the old view if it's still in the DOM
+            // and create a new view from the template.
+            if (target.$fastTemplate !== value) {
+                if (view.isComposed) {
+                    view.remove();
+                    view.unbind();
+                }
+
+                view = value.create() as SyntheticView;
+            }
+        }
+
+        // It's possible that the value is the same as the previous template
+        // and that there's actually no need to compose it.
+        if (!view.isComposed) {
+            view.isComposed = true;
+            view.bind(source, context!);
+            view.insertBefore(target);
+            target.$fastView = view;
+            target.$fastTemplate = value;
+        } else if (view.needsBindOnly) {
+            view.needsBindOnly = false;
+            view.bind(source, context!);
+        }
+    } else {
+        const view = target.$fastView as ComposableView;
+
+        // If there is a view and it's currently composed into
+        // the DOM, then we need to remove it.
+        if (view !== void 0 && view.isComposed) {
+            view.isComposed = false;
+            view.remove();
+
+            if (view.needsBindOnly) {
+                view.needsBindOnly = false;
+            } else {
+                view.unbind();
+            }
+        }
+
+        target.textContent = value;
+    }
+}
+
+interface TokenListState {
+    v: {};
+    c: number;
+}
+
+function updateTokenListTarget(
+    this: UpdateTargetThis,
+    target: Element,
+    aspect: string,
+    value: any
+): void {
+    const directive = this.directive;
+    const state: TokenListState =
+        target[directive.uniqueId] ??
+        (target[directive.uniqueId] = { c: 0, v: Object.create(null) });
+    const versions = state.v;
+    let currentVersion = state.c;
+    const tokenList = target[aspect] as DOMTokenList;
+
+    // Add the classes, tracking the version at which they were added.
+    if (value !== null && value !== undefined && value.length) {
+        const names = value.split(/\s+/);
+
+        for (let i = 0, ii = names.length; i < ii; ++i) {
+            const currentName = names[i];
+
+            if (currentName === "") {
+                continue;
+            }
+
+            versions[currentName] = currentVersion;
+            tokenList.add(currentName);
+        }
+    }
+
+    state.v = currentVersion + 1;
+
+    // If this is the first call to add classes, there's no need to remove old ones.
+    if (currentVersion === 0) {
+        return;
+    }
+
+    // Remove classes from the previous version.
+    currentVersion -= 1;
+
+    for (const name in versions) {
+        if (versions[name] === currentVersion) {
+            tokenList.remove(name);
+        }
+    }
+}
+
+type BindingConfigResolver<T> = (options: T) => BindingConfig<T>;
+
 class TargetUpdateBinding extends BindingBase {
     constructor(directive: HTMLBindingDirective, protected updateTarget: UpdateTarget) {
         super(directive);
     }
 
-    static createBindingConfig<T>(defaultOptions: T, eventType?: BindingType) {
-        const config: BindingConfig &
-            ((options?: typeof defaultOptions) => BindingConfig) = (
-            options: typeof defaultOptions
-        ): BindingConfig => {
+    static createBindingConfig<T>(
+        defaultOptions: T,
+        eventType?: BindingType
+    ): BindingConfig<T> & BindingConfigResolver<T> {
+        const config: BindingConfig<T> & BindingConfigResolver<T> = (
+            options: T
+        ): BindingConfig<T> => {
             return {
                 mode: config.mode,
                 options: Object.assign({}, defaultOptions, options),
@@ -120,7 +268,7 @@ class OneTimeBinding extends TargetUpdateBinding {
 
 const signals: Record<string, undefined | Function | Function[]> = Object.create(null);
 
-export function sendSignal(signal: string) {
+export function sendSignal(signal: string): void {
     const found = signals[signal];
     if (found) {
         Array.isArray(found) ? found.forEach(x => x()) : found();
@@ -180,7 +328,7 @@ class OnSignalBinding extends TargetUpdateBinding {
         }
     }
 
-    private getSignal(source: any, context: ExecutionContext<any, any>) {
+    private getSignal(source: any, context: ExecutionContext<any, any>): string {
         const options = this.directive.options;
         return isString(options) ? options : options(source, context);
     }
@@ -242,58 +390,6 @@ class OnChangeBinding extends TargetUpdateBinding {
     }
 }
 
-interface TokenListState {
-    v: {};
-    c: number;
-}
-
-function updateTokenListTarget(
-    this: UpdateTargetThis,
-    target: Element,
-    aspect: string,
-    value: any
-): void {
-    const directive = this.directive;
-    const state: TokenListState =
-        target[directive.uniqueId] ??
-        (target[directive.uniqueId] = { c: 0, v: Object.create(null) });
-    const versions = state.v;
-    let currentVersion = state.c;
-    const tokenList = target[aspect] as DOMTokenList;
-
-    // Add the classes, tracking the version at which they were added.
-    if (value !== null && value !== undefined && value.length) {
-        const names = value.split(/\s+/);
-
-        for (let i = 0, ii = names.length; i < ii; ++i) {
-            const currentName = names[i];
-
-            if (currentName === "") {
-                continue;
-            }
-
-            versions[currentName] = currentVersion;
-            tokenList.add(currentName);
-        }
-    }
-
-    state.v = currentVersion + 1;
-
-    // If this is the first call to add classes, there's no need to remove old ones.
-    if (currentVersion === 0) {
-        return;
-    }
-
-    // Remove classes from the previous version.
-    currentVersion -= 1;
-
-    for (const name in versions) {
-        if (versions[name] === currentVersion) {
-            tokenList.remove(name);
-        }
-    }
-}
-
 type ComposableView = SyntheticView & {
     isComposed?: boolean;
     needsBindOnly?: boolean;
@@ -304,91 +400,6 @@ type ContentTarget = Node & {
     $fastTemplate?: { create(): SyntheticView };
 };
 
-function updateContentTarget(
-    target: ContentTarget,
-    aspect: string,
-    value: any,
-    source: any,
-    context: ExecutionContext
-): void {
-    // If there's no actual value, then this equates to the
-    // empty string for the purposes of content bindings.
-    if (value === null || value === undefined) {
-        value = "";
-    }
-
-    // If the value has a "create" method, then it's a template-like.
-    if (value.create) {
-        target.textContent = "";
-        let view = target.$fastView as ComposableView;
-
-        // If there's no previous view that we might be able to
-        // reuse then create a new view from the template.
-        if (view === void 0) {
-            view = value.create() as SyntheticView;
-        } else {
-            // If there is a previous view, but it wasn't created
-            // from the same template as the new value, then we
-            // need to remove the old view if it's still in the DOM
-            // and create a new view from the template.
-            if (target.$fastTemplate !== value) {
-                if (view.isComposed) {
-                    view.remove();
-                    view.unbind();
-                }
-
-                view = value.create() as SyntheticView;
-            }
-        }
-
-        // It's possible that the value is the same as the previous template
-        // and that there's actually no need to compose it.
-        if (!view.isComposed) {
-            view.isComposed = true;
-            view.bind(source, context!);
-            view.insertBefore(target);
-            target.$fastView = view;
-            target.$fastTemplate = value;
-        } else if (view.needsBindOnly) {
-            view.needsBindOnly = false;
-            view.bind(source, context!);
-        }
-    } else {
-        const view = target.$fastView as ComposableView;
-
-        // If there is a view and it's currently composed into
-        // the DOM, then we need to remove it.
-        if (view !== void 0 && view.isComposed) {
-            view.isComposed = false;
-            view.remove();
-
-            if (view.needsBindOnly) {
-                view.needsBindOnly = false;
-            } else {
-                view.unbind();
-            }
-        }
-
-        target.textContent = value;
-    }
-}
-
-function createContentBinding(BaseType: typeof TargetUpdateBinding) {
-    return class extends BaseType {
-        unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets) {
-            super.unbind(source, context, targets);
-
-            const target = targets[this.directive.targetId] as ContentTarget;
-            const view = target.$fastView as ComposableView;
-
-            if (view !== void 0 && view.isComposed) {
-                view.unbind();
-                view.needsBindOnly = true;
-            }
-        }
-    };
-}
-
 type FASTEventSource = Node & {
     $fastSource: any;
     $fastContext: ExecutionContext | null;
@@ -407,7 +418,7 @@ class EventListener extends BindingBase {
         this.removeEventListener(targets[this.directive.targetId] as FASTEventSource);
     }
 
-    protected removeEventListener(target: FASTEventSource) {
+    protected removeEventListener(target: FASTEventSource): void {
         target.$fastSource = null;
         target.$fastContext = null;
         target.removeEventListener(this.directive.aspect!, this, this.directive.options);
@@ -429,7 +440,7 @@ class EventListener extends BindingBase {
 }
 
 class OneTimeEventListener extends EventListener {
-    handleEvent(event: Event) {
+    handleEvent(event: Event): void {
         super.handleEvent(event);
         this.removeEventListener(event.currentTarget as FASTEventSource);
     }
@@ -476,7 +487,7 @@ export class HTMLBindingDirective extends InlinableHTMLDirective {
         super();
     }
 
-    public setAspect(value: string) {
+    public setAspect(value: string): void {
         (this as Mutable<this>).rawAspect = value;
 
         if (!value) {
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index 9ba2a32c9b0..ba6d113bbbd 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -57,7 +57,7 @@ export class ChildrenDirective extends NodeObservationDirective<
      * Begins observation of the nodes.
      * @param target - The target to observe.
      */
-    observe(target: any) {
+    observe(target: any): void {
         const observer =
             target[this.uniqueId] ??
             (target[this.uniqueId] = new MutationObserver(this.handleEvent));
@@ -69,7 +69,7 @@ export class ChildrenDirective extends NodeObservationDirective<
      * Disconnects observation of the nodes.
      * @param target - The target to unobserve.
      */
-    disconnect(target: any) {
+    disconnect(target: any): void {
         const observer = target[this.uniqueId];
         observer.$fastTarget = null;
         observer.disconnect();
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 211284ac28a..bee114952e9 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -10,11 +10,17 @@ import type {
     ViewBehaviorTargets,
 } from "./html-directive.js";
 
-const targetIdFrom = (parentId: string, nodeIndex: number) => `${parentId}.${nodeIndex}`;
+const targetIdFrom = (parentId: string, nodeIndex: number): string =>
+    `${parentId}.${nodeIndex}`;
 const descriptorCache: PropertyDescriptorMap = {};
 
+interface NextNode {
+    index: number;
+    node: ChildNode | null;
+}
+
 // used to prevent creating lots of objects just to track node and index while compiling
-const next = {
+const next: NextNode = {
     index: 0,
     node: null as ChildNode | null,
 };
@@ -86,7 +92,11 @@ class CompilationContext implements HTMLTemplateCompilationResult {
         return targets;
     }
 
-    private addTargetDescriptor(parentId: string, targetId: string, targetIndex: number) {
+    private addTargetDescriptor(
+        parentId: string,
+        targetId: string,
+        targetIndex: number
+    ): void {
         const descriptors = this.descriptors;
 
         if (
@@ -229,7 +239,7 @@ function compileContent(
     parentId,
     nodeId,
     nodeIndex
-) {
+): NextNode {
     const parseResult = parseContent(context, node.textContent!);
     if (parseResult === null) {
         next.node = node.nextSibling;
@@ -267,11 +277,16 @@ function compileContent(
     return next;
 }
 
-function compileChildren(context: CompilationContext, parent: Node, parentId: string) {
+function compileChildren(
+    context: CompilationContext,
+    parent: Node,
+    parentId: string
+): void {
     let nodeIndex = 0;
     let childNode = parent.firstChild;
 
     while (childNode) {
+        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
         const result = compileNode(context, parentId, childNode, nodeIndex);
         childNode = result.node;
         nodeIndex = result.index;
@@ -283,7 +298,7 @@ function compileNode(
     parentId: string,
     node: Node,
     nodeIndex: number
-) {
+): NextNode {
     const nodeId = targetIdFrom(parentId, nodeIndex);
 
     switch (node.nodeType) {
diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index 0b4e5ee6ef3..b87d1bb67d5 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -32,7 +32,7 @@ export interface NodeBehaviorOptions<T = any> {
  */
 export type ElementsFilter = (value: Node, index: number, array: Node[]) => boolean;
 
-const selectElements = value => value.nodeType === 1;
+const selectElements = (value: Node): boolean => value.nodeType === 1;
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index d34b334b1ec..a231041da16 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -19,7 +19,7 @@ export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveO
      * Begins observation of the nodes.
      * @param target - The target to observe.
      */
-    observe(target: EventSource) {
+    observe(target: EventSource): void {
         target.addEventListener("slotchange", this);
     }
 
@@ -27,7 +27,7 @@ export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveO
      * Disconnects observation of the nodes.
      * @param target - The target to unobserve.
      */
-    disconnect(target: EventSource) {
+    disconnect(target: EventSource): void {
         target.removeEventListener("slotchange", this);
     }
 
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index 135cee099af..3af4e1e252c 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -88,7 +88,7 @@ export interface SyntheticView<TSource = any, TParent = any, TGrandparent = any>
     dispose(): void;
 }
 
-function removeNodeSequence(firstNode: Node, lastNode: Node) {
+function removeNodeSequence(firstNode: Node, lastNode: Node): void {
     const parent = firstNode.parentNode!;
     let current = firstNode;
     let next: ChildNode | null;

From 1f124b8a4f2c2cf6989c25c0032cd4b3ea9e78b3 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 22 Feb 2022 11:38:44 -0800
Subject: [PATCH 063/135] Added watch script and chokidar (#5621)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This PR adds `chokidar` so that we can watch files and re-run the playwright tests. Playwright does not currently have a watcher for this purpose so `chokidar-cli` was added to facilitate this.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
---
 packages/web-components/fast-ssr/package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index 840d00ab066..a01f2139ae4 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -23,6 +23,7 @@
     "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.{ts,html}\" --list-different",
     "prettier": "prettier --config ../../../.prettierrc --write \"**/*.{ts,html}\"",
     "test": "playwright test --config=playwright.config.cjs",
+    "test:watch": "chokidar '**/*.spec.ts' -c 'npm run build && npm run test'",
     "test-server": "node server/dist/server.js",
     "install-playwright-browsers": "npx playwright install"
   },
@@ -39,6 +40,7 @@
     "@playwright/test": "^1.18.0",
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.17",
+    "chokidar-cli": "^3.0.0",
     "express": "^4.17.1",
     "typescript": "^3.8.3"
   }

From 121594fde55296b96f9530e1e40c814326f0bd82 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Tue, 22 Feb 2022 15:06:49 -0500
Subject: [PATCH 064/135] feat: enable pluggable style handling strategies
 (#5623)

* feat: enable pluggable style handling strategies

* refactor: move unnecessary internal function

* test: fix up style tests based on new API

* refactor: improve the style strategy interface

* Change files

* refactor: improve strategy factory design via constructible types

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-58e983d2-9c67-4292-b678-88bc265b1fe8.json |   7 +
 .../fast-element/docs/api-report.md           |  25 +-
 .../src/components/fast-definitions.spec.ts   |  10 +-
 .../src/components/fast-definitions.ts        |   4 +-
 .../web-components/fast-element/src/index.ts  |   3 +-
 .../fast-element/src/styles/css.ts            |   4 +-
 .../fast-element/src/styles/element-styles.ts | 247 +++++++++---------
 .../fast-element/src/styles/styles.spec.ts    |  92 ++++---
 8 files changed, 206 insertions(+), 186 deletions(-)
 create mode 100644 change/@microsoft-fast-element-58e983d2-9c67-4292-b678-88bc265b1fe8.json

diff --git a/change/@microsoft-fast-element-58e983d2-9c67-4292-b678-88bc265b1fe8.json b/change/@microsoft-fast-element-58e983d2-9c67-4292-b678-88bc265b1fe8.json
new file mode 100644
index 00000000000..f3e338dda05
--- /dev/null
+++ b/change/@microsoft-fast-element-58e983d2-9c67-4292-b678-88bc265b1fe8.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: enable pluggable style handling strategies",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index fa09944427e..49e5989ee7f 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -150,6 +150,11 @@ export type Constructable<T = {}> = {
     new (...args: any[]): T;
 };
 
+// @public
+export type ConstructibleStyleStrategy = {
+    new (styles: (string | CSSStyleSheet)[]): StyleStrategy;
+};
+
 // @public
 export class Controller extends PropertyChangeNotifier {
     // @internal
@@ -224,25 +229,23 @@ export const elements: (selector?: string | undefined) => ElementsFilter;
 export type ElementsFilter = (value: Node, index: number, array: Node[]) => boolean;
 
 // @public
-export type ElementStyleFactory = (styles: ReadonlyArray<ComposableStyles>) => ElementStyles;
-
-// @public
-export abstract class ElementStyles {
+export class ElementStyles {
     constructor(
-    styles: ReadonlyArray<ComposableStyles>,
-    behaviors: ReadonlyArray<Behavior<HTMLElement>> | null);
+    styles: ReadonlyArray<ComposableStyles>);
     // @internal (undocumented)
     addStylesTo(target: StyleTarget): void;
     // @internal (undocumented)
     readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
-    static readonly create: ElementStyleFactory;
     // @internal (undocumented)
     isAttachedTo(target: StyleTarget): boolean;
     // @internal (undocumented)
     removeStylesFrom(target: StyleTarget): void;
+    static setDefaultStrategy(Strategy: ConstructibleStyleStrategy): void;
+    get strategy(): StyleStrategy;
     // @internal (undocumented)
     readonly styles: ReadonlyArray<ComposableStyles>;
     withBehaviors(...behaviors: Behavior<HTMLElement>[]): this;
+    withStrategy(Strategy: ConstructibleStyleStrategy): this;
 }
 
 // @public
@@ -501,12 +504,16 @@ export class Splice {
     removed: any[];
 }
 
+// @public
+export interface StyleStrategy {
+    addStylesTo(target: StyleTarget): void;
+    removeStylesFrom(target: StyleTarget): void;
+}
+
 // @public
 export interface StyleTarget {
     adoptedStyleSheets?: CSSStyleSheet[];
     append(styles: HTMLStyleElement): void;
-    // @deprecated
-    prepend(styles: HTMLStyleElement): void;
     querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
     removeChild(styles: HTMLStyleElement): void;
 }
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.spec.ts b/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
index f7b19f2a9c7..77754ee3682 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
@@ -33,7 +33,7 @@ describe("FASTElementDefinition", () => {
 
         it("can accept ElementStyles", () => {
             const css = ".class { color: red; }";
-            const styles = ElementStyles.create([css]);
+            const styles = new ElementStyles([css]);
             const options = {
                 name: "test-element",
                 styles,
@@ -45,8 +45,8 @@ describe("FASTElementDefinition", () => {
         it("can accept multiple ElementStyles", () => {
             const css1 = ".class { color: red; }";
             const css2 = ".class2 { color: red; }";
-            const existingStyles1 = ElementStyles.create([css1]);
-            const existingStyles2 = ElementStyles.create([css2]);
+            const existingStyles1 = new ElementStyles([css1]);
+            const existingStyles2 = new ElementStyles([css2]);
             const options = {
                 name: "test-element",
                 styles: [existingStyles1, existingStyles2],
@@ -60,7 +60,7 @@ describe("FASTElementDefinition", () => {
         it("can accept mixed strings and ElementStyles", () => {
             const css1 = ".class { color: red; }";
             const css2 = ".class2 { color: red; }";
-            const existingStyles2 = ElementStyles.create([css2]);
+            const existingStyles2 = new ElementStyles([css2]);
             const options = {
                 name: "test-element",
                 styles: [css1, existingStyles2],
@@ -98,7 +98,7 @@ describe("FASTElementDefinition", () => {
             it("can accept mixed strings, ElementStyles, and CSSStyleSheets", () => {
                 const css1 = ".class { color: red; }";
                 const css2 = ".class2 { color: red; }";
-                const existingStyles2 = ElementStyles.create([css2]);
+                const existingStyles2 = new ElementStyles([css2]);
                 const styleSheet3 = new CSSStyleSheet();
                 const options = {
                     name: "test-element",
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.ts b/packages/web-components/fast-element/src/components/fast-definitions.ts
index 154b00edc1a..3b20062dd54 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.ts
@@ -170,10 +170,10 @@ export class FASTElementDefinition<TType extends Function = Function> {
             nameOrConfig.styles === void 0
                 ? void 0
                 : Array.isArray(nameOrConfig.styles)
-                ? ElementStyles.create(nameOrConfig.styles)
+                ? new ElementStyles(nameOrConfig.styles)
                 : nameOrConfig.styles instanceof ElementStyles
                 ? nameOrConfig.styles
-                : ElementStyles.create([nameOrConfig.styles]);
+                : new ElementStyles([nameOrConfig.styles]);
     }
 
     /**
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index 178aea730f3..ee4218147c8 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -11,7 +11,8 @@ export type { Callable, Constructable, Mutable } from "./interfaces.js";
 export * from "./templating/compiler.js";
 export {
     ElementStyles,
-    ElementStyleFactory,
+    StyleStrategy,
+    ConstructibleStyleStrategy,
     ComposableStyles,
     StyleTarget,
 } from "./styles/element-styles.js";
diff --git a/packages/web-components/fast-element/src/styles/css.ts b/packages/web-components/fast-element/src/styles/css.ts
index 195741cd5dc..73caf675903 100644
--- a/packages/web-components/fast-element/src/styles/css.ts
+++ b/packages/web-components/fast-element/src/styles/css.ts
@@ -62,7 +62,7 @@ export function css(
     ...values: (ComposableStyles | CSSDirective)[]
 ): ElementStyles {
     const { styles, behaviors } = collectStyles(strings, values);
-    const elementStyles = ElementStyles.create(styles);
+    const elementStyles = new ElementStyles(styles);
     return behaviors.length ? elementStyles.withBehaviors(...behaviors) : elementStyles;
 }
 
@@ -91,7 +91,7 @@ class CSSPartial extends CSSDirective implements Behavior<HTMLElement> {
         );
 
         if (stylesheets.length) {
-            this.styles = ElementStyles.create(stylesheets);
+            this.styles = new ElementStyles(stylesheets);
         }
     }
 
diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index b8dfed97f22..2b6e5c61cd3 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -17,13 +17,6 @@ export interface StyleTarget {
      */
     append(styles: HTMLStyleElement): void;
 
-    /**
-     * Adds styles to the target by prepending the styles.
-     * @param styles - The styles element to add.
-     * @deprecated - use append()
-     */
-    prepend(styles: HTMLStyleElement): void;
-
     /**
      * Removes styles from the target.
      * @param styles - The styles element to remove.
@@ -44,34 +37,101 @@ export interface StyleTarget {
 export type ComposableStyles = string | ElementStyles | CSSStyleSheet;
 
 /**
- * Creates an ElementStyles instance for an array of ComposableStyles.
+ * Implemented to provide specific behavior when adding/removing styles
+ * for elements.
  * @public
  */
-export type ElementStyleFactory = (
+export interface StyleStrategy {
+    /**
+     * Adds styles to the target.
+     * @param target - The target to add the styles to.
+     */
+    addStylesTo(target: StyleTarget): void;
+
+    /**
+     * Removes styles from the target.
+     * @param target - The target to remove the styles from.
+     */
+    removeStylesFrom(target: StyleTarget): void;
+}
+
+/**
+ * A type that instantiates a StyleStrategy.
+ * @public
+ */
+export type ConstructibleStyleStrategy = {
+    /**
+     * Creates an instance of the strategy.
+     * @param styles - The styles to initialize the strategy with.
+     */
+    new (styles: (string | CSSStyleSheet)[]): StyleStrategy;
+};
+
+const styleSheetCache = new Map<string, CSSStyleSheet>();
+let DefaultStyleStrategy: ConstructibleStyleStrategy;
+
+function reduceStyles(
     styles: ReadonlyArray<ComposableStyles>
-) => ElementStyles;
+): (string | CSSStyleSheet)[] {
+    return styles
+        .map((x: ComposableStyles) =>
+            x instanceof ElementStyles ? reduceStyles(x.styles) : [x]
+        )
+        .reduce((prev: string[], curr: string[]) => prev.concat(curr), []);
+}
 
 /**
  * Represents styles that can be applied to a custom element.
  * @public
  */
-export abstract class ElementStyles {
+export class ElementStyles {
     private targets: WeakSet<StyleTarget> = new WeakSet();
+    private _strategy: StyleStrategy | null = null;
 
-    constructor(
-        /** @internal */
-        public readonly styles: ReadonlyArray<ComposableStyles>,
+    /** @internal */
+    public readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
+
+    /**
+     * Gets the StyleStrategy associated with these element styles.
+     */
+    public get strategy(): StyleStrategy {
+        if (this._strategy === null) {
+            this.withStrategy(DefaultStyleStrategy);
+        }
+
+        return this._strategy!;
+    }
+
+    /**
+     * Creates an instance of ElementStyles.
+     * @param styles - The styles that will be associated with elements.
+     */
+    public constructor(
         /** @internal */
-        public readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null
-    ) {}
+        public readonly styles: ReadonlyArray<ComposableStyles>
+    ) {
+        this.behaviors = styles
+            .map((x: ComposableStyles) =>
+                x instanceof ElementStyles ? x.behaviors : null
+            )
+            .reduce(
+                (
+                    prev: Behavior<HTMLElement>[] | null,
+                    curr: Behavior<HTMLElement>[] | null
+                ) => (curr === null ? prev : prev === null ? curr : prev.concat(curr)),
+                null as Behavior<HTMLElement>[] | null
+            );
+    }
 
     /** @internal */
     public addStylesTo(target: StyleTarget): void {
+        this.strategy.addStylesTo(target);
         this.targets.add(target);
     }
 
     /** @internal */
     public removeStylesFrom(target: StyleTarget): void {
+        this.strategy.removeStylesFrom(target);
         this.targets.delete(target);
     }
 
@@ -92,53 +152,21 @@ export abstract class ElementStyles {
     }
 
     /**
-     * Create ElementStyles from ComposableStyles.
+     * Sets the strategy that handles adding/removing these styles for an element.
+     * @param strategy - The strategy to use.
      */
-    public static readonly create: ElementStyleFactory = (() => {
-        if (DOM.supportsAdoptedStyleSheets) {
-            const styleSheetCache = new Map();
-            return (styles: ComposableStyles[]) =>
-                // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                new AdoptedStyleSheetsStyles(styles, styleSheetCache);
-        }
-
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        return (styles: ComposableStyles[]) => new StyleElementStyles(styles);
-    })();
-}
-
-function reduceStyles(
-    styles: ReadonlyArray<ComposableStyles>
-): (string | CSSStyleSheet)[] {
-    return styles
-        .map((x: ComposableStyles) =>
-            x instanceof ElementStyles ? reduceStyles(x.styles) : [x]
-        )
-        .reduce((prev: string[], curr: string[]) => prev.concat(curr), []);
-}
+    public withStrategy(Strategy: ConstructibleStyleStrategy): this {
+        this._strategy = new Strategy(reduceStyles(this.styles));
+        return this;
+    }
 
-function reduceBehaviors(
-    styles: ReadonlyArray<ComposableStyles>
-): ReadonlyArray<Behavior<HTMLElement>> | null {
-    return styles
-        .map((x: ComposableStyles) => (x instanceof ElementStyles ? x.behaviors : null))
-        .reduce(
-            (
-                prev: Behavior<HTMLElement>[] | null,
-                curr: Behavior<HTMLElement>[] | null
-            ) => {
-                if (curr === null) {
-                    return prev;
-                }
-
-                if (prev === null) {
-                    prev = [];
-                }
-
-                return prev.concat(curr);
-            },
-            null as Behavior<HTMLElement>[] | null
-        );
+    /**
+     * Sets the default strategy type to use when creating style strategies.
+     * @param Strategy - The strategy type to construct.
+     */
+    public static setDefaultStrategy(Strategy: ConstructibleStyleStrategy) {
+        DefaultStyleStrategy = Strategy;
+    }
 }
 
 /**
@@ -147,102 +175,81 @@ function reduceBehaviors(
  *
  * @internal
  */
-export class AdoptedStyleSheetsStyles extends ElementStyles {
-    private _styleSheets: CSSStyleSheet[] | undefined = void 0;
-
-    private get styleSheets(): CSSStyleSheet[] {
-        if (this._styleSheets === void 0) {
-            const styles = this.styles;
-            const styleSheetCache = this.styleSheetCache;
-            this._styleSheets = reduceStyles(styles).map((x: string | CSSStyleSheet) => {
-                if (x instanceof CSSStyleSheet) {
-                    return x;
-                }
-
-                let sheet = styleSheetCache.get(x);
-
-                if (sheet === void 0) {
-                    sheet = new CSSStyleSheet();
-                    (sheet as any).replaceSync(x);
-                    styleSheetCache.set(x, sheet);
-                }
-
-                return sheet;
-            });
-        }
+export class AdoptedStyleSheetsStrategy implements StyleStrategy {
+    /** @internal */
+    public readonly sheets: CSSStyleSheet[];
 
-        return this._styleSheets;
-    }
+    public constructor(styles: (string | CSSStyleSheet)[]) {
+        this.sheets = styles.map((x: string | CSSStyleSheet) => {
+            if (x instanceof CSSStyleSheet) {
+                return x;
+            }
 
-    public constructor(
-        styles: ComposableStyles[],
-        private styleSheetCache: Map<string, CSSStyleSheet>
-    ) {
-        super(styles, reduceBehaviors(styles));
+            let sheet = styleSheetCache.get(x);
+
+            if (sheet === void 0) {
+                sheet = new CSSStyleSheet();
+                (sheet as any).replaceSync(x);
+                styleSheetCache.set(x, sheet);
+            }
+
+            return sheet;
+        });
     }
 
     public addStylesTo(target: StyleTarget): void {
-        target.adoptedStyleSheets = [...target.adoptedStyleSheets!, ...this.styleSheets];
-        super.addStylesTo(target);
+        target.adoptedStyleSheets = [...target.adoptedStyleSheets!, ...this.sheets];
     }
 
     public removeStylesFrom(target: StyleTarget): void {
-        const sourceSheets = this.styleSheets;
+        const sheets = this.sheets;
         target.adoptedStyleSheets = target.adoptedStyleSheets!.filter(
-            (x: CSSStyleSheet) => sourceSheets.indexOf(x) === -1
+            (x: CSSStyleSheet) => sheets.indexOf(x) === -1
         );
-        super.removeStylesFrom(target);
     }
 }
 
+function usableTarget(target: StyleTarget): StyleTarget {
+    return target === document ? document.body : target;
+}
+
 /**
  * @internal
  */
-export class StyleElementStyles extends ElementStyles {
-    private readonly styleSheets: string[];
+export class StyleElementStrategy implements StyleStrategy {
     private readonly styleClass: string;
 
-    public constructor(styles: ComposableStyles[]) {
-        super(styles, reduceBehaviors(styles));
-        this.styleSheets = reduceStyles(styles) as string[];
+    public constructor(private readonly styles: string[]) {
         this.styleClass = nextId();
     }
 
     public addStylesTo(target: StyleTarget): void {
-        const styleSheets = this.styleSheets;
-        const styleClass = this.styleClass;
+        target = usableTarget(target);
 
-        target = this.normalizeTarget(target);
+        const styles = this.styles;
+        const styleClass = this.styleClass;
 
-        for (let i = 0; i < styleSheets.length; i++) {
+        for (let i = 0; i < styles.length; i++) {
             const element = document.createElement("style");
-            element.innerHTML = styleSheets[i];
+            element.innerHTML = styles[i];
             element.className = styleClass;
             target.append(element);
         }
-
-        super.addStylesTo(target);
     }
 
     public removeStylesFrom(target: StyleTarget): void {
-        target = this.normalizeTarget(target);
-
         const styles: NodeListOf<HTMLStyleElement> = target.querySelectorAll(
             `.${this.styleClass}`
         );
 
+        target = usableTarget(target);
+
         for (let i = 0, ii = styles.length; i < ii; ++i) {
             target.removeChild(styles[i]);
         }
-
-        super.removeStylesFrom(target);
-    }
-
-    public isAttachedTo(target: StyleTarget): boolean {
-        return super.isAttachedTo(this.normalizeTarget(target));
-    }
-
-    private normalizeTarget(target: StyleTarget): StyleTarget {
-        return target === document ? document.body : target;
     }
 }
+
+ElementStyles.setDefaultStrategy(
+    DOM.supportsAdoptedStyleSheets ? AdoptedStyleSheetsStrategy : StyleElementStrategy
+);
diff --git a/packages/web-components/fast-element/src/styles/styles.spec.ts b/packages/web-components/fast-element/src/styles/styles.spec.ts
index 9814ddb0037..19ba0c007bc 100644
--- a/packages/web-components/fast-element/src/styles/styles.spec.ts
+++ b/packages/web-components/fast-element/src/styles/styles.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import {
-    AdoptedStyleSheetsStyles,
-    StyleElementStyles,
+    AdoptedStyleSheetsStrategy,
+    StyleElementStrategy,
     StyleTarget,
     ElementStyles,
 } from "./element-styles";
@@ -13,44 +13,41 @@ import { defaultExecutionContext } from "../observation/observable";
 import type { FASTElement } from "..";
 
 if (DOM.supportsAdoptedStyleSheets) {
-    describe("AdoptedStyleSheetsStyles", () => {
+    describe("AdoptedStyleSheetsStrategy", () => {
         context("when removing styles", () => {
             it("should remove an associated stylesheet", () => {
-                const cache = new Map();
-                const sheet = new AdoptedStyleSheetsStyles([``], cache);
+                const strategy = new AdoptedStyleSheetsStrategy([``]);
                 const target: Pick<StyleTarget, "adoptedStyleSheets"> = {
                     adoptedStyleSheets: [],
                 };
 
-                sheet.addStylesTo(target as StyleTarget);
+                strategy.addStylesTo(target as StyleTarget);
                 expect(target.adoptedStyleSheets!.length).to.equal(1);
 
-                sheet.removeStylesFrom(target as StyleTarget);
+                strategy.removeStylesFrom(target as StyleTarget);
                 expect(target.adoptedStyleSheets!.length).to.equal(0);
             });
 
             it("should not remove unassociated styles", () => {
-                const cache = new Map();
-                const sheet = new AdoptedStyleSheetsStyles(["test"], cache);
+                const strategy = new AdoptedStyleSheetsStrategy(["test"]);
                 const style = new CSSStyleSheet();
                 const target: Pick<StyleTarget, "adoptedStyleSheets"> = {
                     adoptedStyleSheets: [style],
                 };
-                sheet.addStylesTo(target as StyleTarget);
+                strategy.addStylesTo(target as StyleTarget);
 
                 expect(target.adoptedStyleSheets!.length).to.equal(2);
-                expect(target.adoptedStyleSheets).to.contain(cache.get("test"));
+                expect(target.adoptedStyleSheets).to.contain(strategy.sheets[0]);
 
-                sheet.removeStylesFrom(target as StyleTarget);
+                strategy.removeStylesFrom(target as StyleTarget);
 
                 expect(target.adoptedStyleSheets!.length).to.equal(1);
-                expect(target.adoptedStyleSheets).not.to.contain(cache.get("test"));
+                expect(target.adoptedStyleSheets).not.to.contain(strategy.sheets[0]);
             });
 
             it("should track when added and removed from a target", () => {
-                const cache = new Map();
                 const styles = ``;
-                const elementStyles = new AdoptedStyleSheetsStyles([styles], cache);
+                const elementStyles = new ElementStyles([styles]);
                 const target = {
                     adoptedStyleSheets: [],
                 } as unknown as StyleTarget;
@@ -65,9 +62,8 @@ if (DOM.supportsAdoptedStyleSheets) {
             });
 
             it("should order HTMLStyleElement order by addStyleTo() call order", () => {
-                const cache = new Map();
-                const red = new AdoptedStyleSheetsStyles(['r'], cache);
-                const green = new AdoptedStyleSheetsStyles(['g'], cache);
+                const red = new AdoptedStyleSheetsStrategy(['r']);
+                const green = new AdoptedStyleSheetsStrategy(['g']);
                 const target: Pick<StyleTarget, "adoptedStyleSheets"> = {
                     adoptedStyleSheets: [],
                 };
@@ -75,29 +71,29 @@ if (DOM.supportsAdoptedStyleSheets) {
                 red.addStylesTo(target as StyleTarget);
                 green.addStylesTo(target as StyleTarget);
 
-                expect((target.adoptedStyleSheets![0])).to.equal(cache.get('r'));
-                expect((target.adoptedStyleSheets![1])).to.equal(cache.get('g'));
+                expect((target.adoptedStyleSheets![0])).to.equal(red.sheets[0]);
+                expect((target.adoptedStyleSheets![1])).to.equal(green.sheets[0]);
             });
             it("should order HTMLStyleElements in array order of provided sheets", () => {
-                const cache = new Map();
-                const red = new AdoptedStyleSheetsStyles(['r', 'g'], cache);
+                const red = new AdoptedStyleSheetsStrategy(['r', 'g']);
                 const target: Pick<StyleTarget, "adoptedStyleSheets"> = {
                     adoptedStyleSheets: [],
                 };
 
                 red.addStylesTo(target as StyleTarget);
 
-                expect((target.adoptedStyleSheets![0])).to.equal(cache.get('r'));
-                expect((target.adoptedStyleSheets![1])).to.equal(cache.get('g'));
+                expect((target.adoptedStyleSheets![0])).to.equal(red.sheets[0]);
+                expect((target.adoptedStyleSheets![1])).to.equal(red.sheets[1]);
             });
         });
     });
 }
 
-describe("StyleSheetStyles", () => {
+describe("StyleElementStrategy", () => {
     it("can add and remove from the document directly", () => {
-        const styles = ``;
-        const elementStyles = new StyleElementStyles([styles]);
+        const styles = [``];
+        const elementStyles = new ElementStyles(styles)
+            .withStrategy(StyleElementStrategy);
         document.body.innerHTML = "";
 
         elementStyles.addStylesTo(document);
@@ -111,23 +107,24 @@ describe("StyleSheetStyles", () => {
 
     it("can add and remove from a ShadowRoot", () => {
         const styles = ``;
-        const elementStyles = new StyleElementStyles([styles]);
+        const strategy = new StyleElementStrategy([styles]);
         document.body.innerHTML = "";
 
         const element = document.createElement("div");
         const shadowRoot = element.attachShadow({ mode: "open" });
 
-        elementStyles.addStylesTo(shadowRoot);
+        strategy.addStylesTo(shadowRoot);
 
         expect(shadowRoot.childNodes[0]).to.be.instanceof(HTMLStyleElement);
 
-        elementStyles.removeStylesFrom(shadowRoot);
+        strategy.removeStylesFrom(shadowRoot);
 
         expect(shadowRoot.childNodes.length).to.equal(0);
     });
+
     it("should track when added and removed from a target", () => {
         const styles = ``;
-        const elementStyles = new StyleElementStyles([styles]);
+        const elementStyles = new ElementStyles([styles]);
         document.body.innerHTML = "";
 
         expect(elementStyles.isAttachedTo(document)).to.equal(false)
@@ -140,8 +137,8 @@ describe("StyleSheetStyles", () => {
     });
 
     it("should order HTMLStyleElement order by addStyleTo() call order", () => {
-        const red = new StyleElementStyles([`body:{color:red;}`]);
-        const green = new StyleElementStyles([`body:{color:green;}`]);
+        const red = new StyleElementStrategy([`body:{color:red;}`]);
+        const green = new StyleElementStrategy([`body:{color:green;}`]);
         document.body.innerHTML = "";
 
         const element = document.createElement("div");
@@ -152,8 +149,9 @@ describe("StyleSheetStyles", () => {
         expect((shadowRoot.childNodes[0] as HTMLStyleElement).innerHTML).to.equal("body:{color:red;}");
         expect((shadowRoot.childNodes[1] as HTMLStyleElement).innerHTML).to.equal("body:{color:green;}");
     });
+
     it("should order the HTMLStyleElements in array order of provided sheets", () => {
-        const red = new StyleElementStyles([`body:{color:red;}`, `body:{color:green;}`]);
+        const red = new StyleElementStrategy([`body:{color:red;}`, `body:{color:green;}`]);
         document.body.innerHTML = "";
 
         const element = document.createElement("div");
@@ -168,14 +166,14 @@ describe("StyleSheetStyles", () => {
 describe("ElementStyles", () => {
     it("can create from a string", () => {
         const css = ".class { color: red; }";
-        const styles = ElementStyles.create([css]);
+        const styles = new ElementStyles([css]);
         expect(styles.styles).to.contain(css);
     });
 
     it("can create from multiple strings", () => {
         const css1 = ".class { color: red; }";
         const css2 = ".class2 { color: red; }";
-        const styles = ElementStyles.create([css1, css2]);
+        const styles = new ElementStyles([css1, css2]);
         expect(styles.styles).to.contain(css1);
         expect(styles.styles.indexOf(css1)).to.equal(0);
         expect(styles.styles).to.contain(css2);
@@ -183,17 +181,17 @@ describe("ElementStyles", () => {
 
     it("can create from an ElementStyles", () => {
         const css = ".class { color: red; }";
-        const existingStyles = ElementStyles.create([css]);
-        const styles = ElementStyles.create([existingStyles]);
+        const existingStyles = new ElementStyles([css]);
+        const styles = new ElementStyles([existingStyles]);
         expect(styles.styles).to.contain(existingStyles);
     });
 
     it("can create from multiple ElementStyles", () => {
         const css1 = ".class { color: red; }";
         const css2 = ".class2 { color: red; }";
-        const existingStyles1 = ElementStyles.create([css1]);
-        const existingStyles2 = ElementStyles.create([css2]);
-        const styles = ElementStyles.create([existingStyles1, existingStyles2]);
+        const existingStyles1 = new ElementStyles([css1]);
+        const existingStyles2 = new ElementStyles([css2]);
+        const styles = new ElementStyles([existingStyles1, existingStyles2]);
         expect(styles.styles).to.contain(existingStyles1);
         expect(styles.styles.indexOf(existingStyles1)).to.equal(0);
         expect(styles.styles).to.contain(existingStyles2);
@@ -202,8 +200,8 @@ describe("ElementStyles", () => {
     it("can create from mixed strings and ElementStyles", () => {
         const css1 = ".class { color: red; }";
         const css2 = ".class2 { color: red; }";
-        const existingStyles2 = ElementStyles.create([css2]);
-        const styles = ElementStyles.create([css1, existingStyles2]);
+        const existingStyles2 = new ElementStyles([css2]);
+        const styles = new ElementStyles([css1, existingStyles2]);
         expect(styles.styles).to.contain(css1);
         expect(styles.styles.indexOf(css1)).to.equal(0);
         expect(styles.styles).to.contain(existingStyles2);
@@ -212,14 +210,14 @@ describe("ElementStyles", () => {
     if (DOM.supportsAdoptedStyleSheets) {
         it("can create from a CSSStyleSheet", () => {
             const styleSheet = new CSSStyleSheet();
-            const styles = ElementStyles.create([styleSheet]);
+            const styles = new ElementStyles([styleSheet]);
             expect(styles.styles).to.contain(styleSheet);
         });
 
         it("can create from multiple CSSStyleSheets", () => {
             const styleSheet1 = new CSSStyleSheet();
             const styleSheet2 = new CSSStyleSheet();
-            const styles = ElementStyles.create([styleSheet1, styleSheet2]);
+            const styles = new ElementStyles([styleSheet1, styleSheet2]);
             expect(styles.styles).to.contain(styleSheet1);
             expect(styles.styles.indexOf(styleSheet1)).to.equal(0);
             expect(styles.styles).to.contain(styleSheet2);
@@ -228,9 +226,9 @@ describe("ElementStyles", () => {
         it("can create from mixed strings, ElementStyles, and CSSStyleSheets", () => {
             const css1 = ".class { color: red; }";
             const css2 = ".class2 { color: red; }";
-            const existingStyles2 = ElementStyles.create([css2]);
+            const existingStyles2 = new ElementStyles([css2]);
             const styleSheet3 = new CSSStyleSheet();
-            const styles = ElementStyles.create([css1, existingStyles2, styleSheet3]);
+            const styles = new ElementStyles([css1, existingStyles2, styleSheet3]);
             expect(styles.styles).to.contain(css1);
             expect(styles.styles.indexOf(css1)).to.equal(0);
             expect(styles.styles).to.contain(existingStyles2);

From be42c7f2d81545ff672c2d9e211ff8471b411025 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 22 Feb 2022 14:17:35 -0800
Subject: [PATCH 065/135] Updated api-extractor version and exported markdown
 (#5640)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
When running `npm run build` inside `@microsoft/fast-element` package, the following error is encountered:

`Error: Error parsing tsconfig.json content: Unknown compiler option 'importsNotUsedAsValues'.`

This happens because running `api-extractor` happens as a final step in the `build`, and the reason this error occurs is that the currently pinned version `typescript` used by `api-extractor` is below `3.8.0` when `importsNotUsedAsValues` was introduced as a flag. This change updates the version, we now have no errors, but the following warnings with this change:

```
Warning: You have changed the public API signature for this project. Updating docs/api-report.md
Warning: dist/dts/dom.d.ts:70:8 - (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen
Warning: dist/dts/observation/array-change-records.d.ts:6:33 - (tsdoc-escape-greater-than) The ">" character should be escaped using a backslash to avoid confusion with an HTML tag
Warning: dist/dts/observation/array-change-records.d.ts:6:6 - (tsdoc-html-tag-missing-greater-than) The HTML tag has invalid syntax: Expecting an attribute or ">" or "/>"
Warning: dist/dts/templating/binding.d.ts:4:1 - (ae-missing-release-tag) "BindingBehaviorFactory" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
Warning: dist/dts/templating/binding.d.ts:7:1 - (ae-missing-release-tag) "BindingType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
Warning: dist/dts/templating/binding.d.ts:9:1 - (ae-missing-release-tag) "BindingMode" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
Warning: dist/dts/templating/binding.d.ts:17:1 - (ae-missing-release-tag) "BindingConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
Warning: dist/dts/templating/binding.d.ts:23:1 - (ae-missing-release-tag) "DefaultBindingOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
Warning: dist/dts/templating/binding.d.ts:26:22 - (ae-missing-release-tag) "onChange" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
Warning: dist/dts/templating/binding.d.ts:27:22 - (ae-missing-release-tag) "oneTime" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
Warning: dist/dts/templating/binding.d.ts:43:1 - (ae-missing-release-tag) "bind" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
Warning: dist/dts/templating/html-directive.d.ts:84:1 - (ae-missing-release-tag) "InlinableHTMLDirective" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
```

### 🎫 Issues

<!---
* List and link relevant issues here.
-->
Partially addresses #5641

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->
Please take a look at the above warnings and determine if these are legitimate and we should proceed with the version update.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
---
 ...ment-7ca9a49d-04d0-477b-8e6b-23249c19a3f2.json |  7 +++++++
 .../fast-element/docs/api-report.md               | 15 ++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 change/@microsoft-fast-element-7ca9a49d-04d0-477b-8e6b-23249c19a3f2.json

diff --git a/change/@microsoft-fast-element-7ca9a49d-04d0-477b-8e6b-23249c19a3f2.json b/change/@microsoft-fast-element-7ca9a49d-04d0-477b-8e6b-23249c19a3f2.json
new file mode 100644
index 00000000000..082fe1cbb76
--- /dev/null
+++ b/change/@microsoft-fast-element-7ca9a49d-04d0-477b-8e6b-23249c19a3f2.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Updated api-extractor version and exported markdown",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 49e5989ee7f..76e05dc4ee8 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -49,7 +49,7 @@ export class AttributeDefinition implements Accessor {
     onAttributeChangedCallback(element: HTMLElement, value: any): void;
     readonly Owner: Function;
     setValue(source: HTMLElement, newValue: any): void;
-    }
+}
 
 // @public
 export type AttributeMode = "reflect" | "boolean" | "fromView";
@@ -409,11 +409,13 @@ export interface ObservationRecord {
     propertySource: any;
 }
 
+// Warning: (ae-forgotten-export) The symbol "BindingConfigResolver" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
-export const onChange: BindingConfig<any> & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
+export const onChange: BindingConfig<DefaultBindingOptions> & BindingConfigResolver<DefaultBindingOptions>;
 
 // @public (undocumented)
-export const oneTime: BindingConfig<any> & ((options?: DefaultBindingOptions | undefined) => BindingConfig);
+export const oneTime: BindingConfig<DefaultBindingOptions> & BindingConfigResolver<DefaultBindingOptions>;
 
 // @public
 export interface PartialFASTElementDefinition {
@@ -455,14 +457,14 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
     // @internal (undocumented)
     handleChange(source: any, args: Splice[]): void;
     unbind(): void;
-    }
+}
 
 // @public
 export class RepeatDirective<TSource = any> extends HTMLDirective {
     constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
     createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource>;
     createPlaceholder: (index: number) => string;
-    }
+}
 
 // @public
 export interface RepeatOptions {
@@ -605,7 +607,7 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any> impl
     readonly directives: ReadonlyArray<HTMLDirective>;
     readonly html: string | HTMLTemplateElement;
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
-    }
+}
 
 // @public
 export function volatile(target: {}, name: string | Accessor, descriptor: PropertyDescriptor): PropertyDescriptor;
@@ -613,7 +615,6 @@ export function volatile(target: {}, name: string | Accessor, descriptor: Proper
 // @public
 export function when<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn>, templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```

From 375154ff8ca522c629def4857c6bf946b0f485bd Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Wed, 23 Feb 2022 08:54:45 -0800
Subject: [PATCH 066/135] Update the fast-router with the updates to
 fast-element APIs (#5643)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This change updates `@microsoft/fast-router` so that it uses the new APIs available from `@microsoft/fast-element`. This unblocks part of the `yarn install` errors currently happening in the build gate.

### 🎫 Issues

<!---
* List and link relevant issues here.
-->
Relates to #5641

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->
@EisenbergEffect could you take a look at these changes and verify this is the intended use for the updated `ElementStyles` and `ViewBehaviorTargets`.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
---
 ...t-router-aa2ec3e2-c2e1-4b6c-8fbb-d42b1cd8f35a.json |  7 +++++++
 .../web-components/fast-router/src/contributors.ts    | 11 ++++++++---
 packages/web-components/fast-router/src/view.ts       |  4 ++--
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 change/@microsoft-fast-router-aa2ec3e2-c2e1-4b6c-8fbb-d42b1cd8f35a.json

diff --git a/change/@microsoft-fast-router-aa2ec3e2-c2e1-4b6c-8fbb-d42b1cd8f35a.json b/change/@microsoft-fast-router-aa2ec3e2-c2e1-4b6c-8fbb-d42b1cd8f35a.json
new file mode 100644
index 00000000000..f8f40bd2cb9
--- /dev/null
+++ b/change/@microsoft-fast-router-aa2ec3e2-c2e1-4b6c-8fbb-d42b1cd8f35a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update the fast-router with the updates to fast-element 2.0 APIs",
+  "packageName": "@microsoft/fast-router",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-router/src/contributors.ts b/packages/web-components/fast-router/src/contributors.ts
index 9d5c77b695d..5ba154b227c 100644
--- a/packages/web-components/fast-router/src/contributors.ts
+++ b/packages/web-components/fast-router/src/contributors.ts
@@ -1,4 +1,9 @@
-import { Behavior, HTMLDirective, DOM, BehaviorTargets } from "@microsoft/fast-element";
+import {
+    Behavior,
+    HTMLDirective,
+    DOM,
+    ViewBehaviorTargets,
+} from "@microsoft/fast-element";
 import {
     NavigationCommitPhaseHook,
     NavigationPhaseHook,
@@ -45,10 +50,10 @@ class NavigationContributorDirective extends HTMLDirective {
     }
 
     createPlaceholder(index: number) {
-        return DOM.createCustomAttributePlaceholder("fast-navigation-contributor", index);
+        return DOM.createCustomAttributePlaceholder(index);
     }
 
-    createBehavior(targets: BehaviorTargets) {
+    createBehavior(targets: ViewBehaviorTargets) {
         return new NavigationContributorBehavior(
             targets[this.targetId] as HTMLElement & NavigationContributor,
             this.options
diff --git a/packages/web-components/fast-router/src/view.ts b/packages/web-components/fast-router/src/view.ts
index 598975a9f54..834efdaaf41 100644
--- a/packages/web-components/fast-router/src/view.ts
+++ b/packages/web-components/fast-router/src/view.ts
@@ -95,10 +95,10 @@ export class FASTElementLayout implements Layout {
             styles === void 0 || styles === null
                 ? null
                 : Array.isArray(styles)
-                ? ElementStyles.create(styles)
+                ? new ElementStyles(styles)
                 : styles instanceof ElementStyles
                 ? styles
-                : ElementStyles.create([styles]);
+                : new ElementStyles([styles]);
     }
 
     async beforeCommit(routerElement: HTMLElement) {

From 0e38b733b938819bda857c1116874e8eec003dc0 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Wed, 23 Feb 2022 10:29:33 -0800
Subject: [PATCH 067/135] fix: add null value as acceptable value to
 FASTElement.attributeChangedCallback (#5642)

* allow null values in attributeChangedCallback

* Change files

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...lement-11926a01-e901-4013-acaa-a512f7281849.json |  7 +++++++
 .../web-components/fast-element/docs/api-report.md  | 13 +++++++------
 .../fast-element/src/components/controller.ts       |  4 ++--
 .../fast-element/src/components/fast-element.ts     | 10 +++++++---
 4 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 change/@microsoft-fast-element-11926a01-e901-4013-acaa-a512f7281849.json

diff --git a/change/@microsoft-fast-element-11926a01-e901-4013-acaa-a512f7281849.json b/change/@microsoft-fast-element-11926a01-e901-4013-acaa-a512f7281849.json
new file mode 100644
index 00000000000..4bf75ca4b62
--- /dev/null
+++ b/change/@microsoft-fast-element-11926a01-e901-4013-acaa-a512f7281849.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "allow null values in attributeChangedCallback",
+  "packageName": "@microsoft/fast-element",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 76e05dc4ee8..51a51cff553 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -49,7 +49,7 @@ export class AttributeDefinition implements Accessor {
     onAttributeChangedCallback(element: HTMLElement, value: any): void;
     readonly Owner: Function;
     setValue(source: HTMLElement, newValue: any): void;
-}
+    }
 
 // @public
 export type AttributeMode = "reflect" | "boolean" | "fromView";
@@ -166,7 +166,7 @@ export class Controller extends PropertyChangeNotifier {
     emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): void | boolean;
     static forCustomElement(element: HTMLElement): Controller;
     get isConnected(): boolean;
-    onAttributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    onAttributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     onConnectedCallback(): void;
     onDisconnectedCallback(): void;
     removeBehaviors(behaviors: ReadonlyArray<Behavior<HTMLElement>>, force?: boolean): void;
@@ -285,7 +285,7 @@ export class ExecutionContext<TParent = any, TGrandparent = any> {
 export interface FASTElement extends HTMLElement {
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
     readonly $fastController: Controller;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
@@ -457,14 +457,14 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
     // @internal (undocumented)
     handleChange(source: any, args: Splice[]): void;
     unbind(): void;
-}
+    }
 
 // @public
 export class RepeatDirective<TSource = any> extends HTMLDirective {
     constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
     createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource>;
     createPlaceholder: (index: number) => string;
-}
+    }
 
 // @public
 export interface RepeatOptions {
@@ -607,7 +607,7 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any> impl
     readonly directives: ReadonlyArray<HTMLDirective>;
     readonly html: string | HTMLTemplateElement;
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
-}
+    }
 
 // @public
 export function volatile(target: {}, name: string | Accessor, descriptor: PropertyDescriptor): PropertyDescriptor;
@@ -615,6 +615,7 @@ export function volatile(target: {}, name: string | Accessor, descriptor: Proper
 // @public
 export function when<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn>, templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
 
+
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index c6d1aeef58d..5f48328ed1d 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -333,8 +333,8 @@ export class Controller extends PropertyChangeNotifier {
      */
     public onAttributeChangedCallback(
         name: string,
-        oldValue: string,
-        newValue: string
+        oldValue: string | null,
+        newValue: string | null
     ): void {
         const attrDef = this.definition.attributeLookup[name];
 
diff --git a/packages/web-components/fast-element/src/components/fast-element.ts b/packages/web-components/fast-element/src/components/fast-element.ts
index 71946541456..0053801dee8 100644
--- a/packages/web-components/fast-element/src/components/fast-element.ts
+++ b/packages/web-components/fast-element/src/components/fast-element.ts
@@ -54,7 +54,11 @@ export interface FASTElement extends HTMLElement {
      * This method is invoked by the platform whenever an observed
      * attribute of FASTElement has a value change.
      */
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    attributeChangedCallback(
+        name: string,
+        oldValue: string | null,
+        newValue: string | null
+    ): void;
 }
 
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
@@ -88,8 +92,8 @@ function createFASTElement<T extends typeof HTMLElement>(
 
         public attributeChangedCallback(
             name: string,
-            oldValue: string,
-            newValue: string
+            oldValue: string | null,
+            newValue: string | null
         ): void {
             this.$fastController.onAttributeChangedCallback(name, oldValue, newValue);
         }

From 82cb590f66d0c2208faba5ed37863e53ce9d6fba Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Wed, 23 Feb 2022 12:54:01 -0800
Subject: [PATCH 068/135] Updated to use the new FAST element 2.0 APIs for
 creating behaviors and creating element styles (#5648)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This work updates components in `@microsoft/fast-foundation` to use updated APIs from FAST Element 2.0.

### 🎫 Issues

<!---
* List and link relevant issues here.
-->
Relates to #5641

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [x] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
---
 ...ation-3f378ae2-8f62-4b34-a458-937dc73de19e.json |  7 +++++++
 .../fast-foundation/src/data-grid/data-grid-row.ts |  7 +++++--
 .../fast-foundation/src/data-grid/data-grid.ts     |  7 +++++--
 .../src/design-system/component-presentation.ts    |  4 ++--
 .../src/design-token/custom-property-manager.ts    |  2 +-
 .../fast-foundation/src/picker/picker.ts           | 14 ++++++++++----
 6 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-3f378ae2-8f62-4b34-a458-937dc73de19e.json

diff --git a/change/@microsoft-fast-foundation-3f378ae2-8f62-4b34-a458-937dc73de19e.json b/change/@microsoft-fast-foundation-3f378ae2-8f62-4b34-a458-937dc73de19e.json
new file mode 100644
index 00000000000..6c9c50060fe
--- /dev/null
+++ b/change/@microsoft-fast-foundation-3f378ae2-8f62-4b34-a458-937dc73de19e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated to use the new FAST element 2.0 APIs for creating behaviors and creating element styles",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
index 221e5b1e9bd..d3a09b4a895 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
@@ -177,11 +177,14 @@ export class DataGridRow extends FoundationElement {
 
             this.updateItemTemplate();
 
-            this.cellsRepeatBehavior = new RepeatDirective(
+            const cellsRepeatDirective = new RepeatDirective(
                 x => x.columnDefinitions,
                 x => x.activeCellItemTemplate,
                 { positioning: true }
-            ).createBehavior(this.cellsPlaceholder);
+            );
+            this.cellsRepeatBehavior = cellsRepeatDirective.createBehavior({
+                [cellsRepeatDirective.targetId]: this.cellsPlaceholder,
+            });
             /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
             this.$fastController.addBehaviors([this.cellsRepeatBehavior!]);
         }
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
index f022a2c5464..ae2f2ea32ce 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
@@ -340,11 +340,14 @@ export class DataGrid extends FoundationElement {
 
         this.toggleGeneratedHeader();
 
-        this.rowsRepeatBehavior = new RepeatDirective(
+        const rowsRepeatDirective = new RepeatDirective(
             x => x.rowsData,
             x => x.rowItemTemplate,
             { positioning: true }
-        ).createBehavior(this.rowsPlaceholder);
+        );
+        this.rowsRepeatBehavior = rowsRepeatDirective.createBehavior({
+            [rowsRepeatDirective.targetId]: this.rowsPlaceholder,
+        });
 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
         this.$fastController.addBehaviors([this.rowsRepeatBehavior!]);
diff --git a/packages/web-components/fast-foundation/src/design-system/component-presentation.ts b/packages/web-components/fast-foundation/src/design-system/component-presentation.ts
index 1f722a1f14d..ea9a7a138f6 100644
--- a/packages/web-components/fast-foundation/src/design-system/component-presentation.ts
+++ b/packages/web-components/fast-foundation/src/design-system/component-presentation.ts
@@ -109,10 +109,10 @@ export class DefaultComponentPresentation implements ComponentPresentation {
             styles === void 0
                 ? null
                 : Array.isArray(styles)
-                ? ElementStyles.create(styles)
+                ? new ElementStyles(styles)
                 : styles instanceof ElementStyles
                 ? styles
-                : ElementStyles.create([styles]);
+                : new ElementStyles([styles]);
     }
 
     /**
diff --git a/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts b/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts
index c3fe1ed1f9a..2ecb8899f00 100644
--- a/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts
+++ b/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts
@@ -39,7 +39,7 @@ class ConstructableStyleSheetTarget extends QueuedStyleSheetTarget {
 
         const sheet = new CSSStyleSheet();
         this.target = (sheet.cssRules[sheet.insertRule(":host{}")] as CSSStyleRule).style;
-        source.$fastController.addStyles(ElementStyles.create([sheet]));
+        source.$fastController.addStyles(new ElementStyles([sheet]));
     }
 }
 
diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts
index e210b65507d..db046885c2d 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.ts
@@ -539,11 +539,14 @@ export class Picker extends FormAssociatedPicker {
         this.updateListItemTemplate();
         this.updateOptionTemplate();
 
-        this.itemsRepeatBehavior = new RepeatDirective(
+        const itemsRepeatDirective = new RepeatDirective(
             x => x.selectedItems,
             x => x.activeListItemTemplate,
             { positioning: true }
-        ).createBehavior(this.itemsPlaceholderElement);
+        );
+        this.itemsRepeatBehavior = itemsRepeatDirective.createBehavior({
+            [itemsRepeatDirective.targetId]: this.itemsPlaceholderElement,
+        });
 
         this.inputElement.addEventListener("input", this.handleTextInput);
         this.inputElement.addEventListener("click", this.handleInputClick);
@@ -556,11 +559,14 @@ export class Picker extends FormAssociatedPicker {
             this.handleMenuOptionsUpdated
         );
 
-        this.optionsRepeatBehavior = new RepeatDirective(
+        const optionsRepeatDirective = new RepeatDirective(
             x => x.filteredOptionsList,
             x => x.activeMenuOptionTemplate,
             { positioning: true }
-        ).createBehavior(this.optionsPlaceholder);
+        );
+        this.optionsRepeatBehavior = optionsRepeatDirective.createBehavior({
+            [optionsRepeatDirective.targetId]: this.optionsPlaceholder,
+        });
 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
         this.$fastController.addBehaviors([this.optionsRepeatBehavior!]);

From 7303eeeaca2aef5e217c89c1c1ecaf98cc1c7154 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Wed, 23 Feb 2022 13:05:20 -0800
Subject: [PATCH 069/135] Update the API report based on foundation updates for
 FAST element 2.0 (#5650)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This api report update comes after the work in #5648 where the installation was finally able to happen, this now allowed for the updates in FAST element 2.0 to update the api report for `@microsoft/fast-components`.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
---
 ...st-components-45865c97-bd37-4f7e-9658-a87af2ae2a75.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@microsoft-fast-components-45865c97-bd37-4f7e-9658-a87af2ae2a75.json

diff --git a/change/@microsoft-fast-components-45865c97-bd37-4f7e-9658-a87af2ae2a75.json b/change/@microsoft-fast-components-45865c97-bd37-4f7e-9658-a87af2ae2a75.json
new file mode 100644
index 00000000000..d30c60638ec
--- /dev/null
+++ b/change/@microsoft-fast-components-45865c97-bd37-4f7e-9658-a87af2ae2a75.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update the API report based on foundation updates for FAST element 2.0",
+  "packageName": "@microsoft/fast-components",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

From a350e008b8f31287cca0e4ad22699a769b0c3aa1 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Wed, 23 Feb 2022 17:03:02 -0500
Subject: [PATCH 070/135] feat: expose official Markup and Parser APIs (#5649)

* feat: expose official Markup and Parser APIs

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-725e8774-1f96-49df-a63d-64d0b4bf5d6b.json |   7 +
 .../fast-element/docs/api-report.md           |  22 ++-
 .../web-components/fast-element/src/dom.ts    |  63 +-------
 .../web-components/fast-element/src/index.ts  |   1 +
 .../src/observation/array-change-records.ts   |   4 +-
 .../fast-element/src/styles/element-styles.ts |   3 +-
 .../src/templating/compiler.spec.ts           |   5 +-
 .../fast-element/src/templating/compiler.ts   |  83 ++--------
 .../src/templating/html-directive.ts          |  11 +-
 .../fast-element/src/templating/markup.ts     | 150 ++++++++++++++++++
 .../fast-element/src/templating/repeat.ts     |   4 +-
 .../src/templating/template.spec.ts           |  72 ++++-----
 12 files changed, 238 insertions(+), 187 deletions(-)
 create mode 100644 change/@microsoft-fast-element-725e8774-1f96-49df-a63d-64d0b4bf5d6b.json
 create mode 100644 packages/web-components/fast-element/src/templating/markup.ts

diff --git a/change/@microsoft-fast-element-725e8774-1f96-49df-a63d-64d0b4bf5d6b.json b/change/@microsoft-fast-element-725e8774-1f96-49df-a63d-64d0b4bf5d6b.json
new file mode 100644
index 00000000000..e1f521c8323
--- /dev/null
+++ b/change/@microsoft-fast-element-725e8774-1f96-49df-a63d-64d0b4bf5d6b.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: expose official Markup and Parser APIs",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 51a51cff553..e38a9a06d73 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -209,11 +209,6 @@ export const DOM: Readonly<{
     supportsAdoptedStyleSheets: boolean;
     setHTMLPolicy(policy: TrustedTypesPolicy): void;
     createHTML(html: string): string;
-    isMarker(node: Node): node is Comment;
-    extractDirectiveIndexFromMarker(node: Comment): number;
-    createInterpolationPlaceholder(index: number): string;
-    createCustomAttributePlaceholder(index: number): string;
-    createBlockPlaceholder(index: number): string;
     setUpdateMode(isAsync: boolean): void;
     queueUpdate(callable: Callable): void;
     nextUpdate(): Promise<void>;
@@ -355,7 +350,7 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implemen
     unbind(): void;
 }
 
-// @public (undocumented)
+// @public
 export abstract class InlinableHTMLDirective extends AspectedHTMLDirective {
     // (undocumented)
     abstract readonly binding: Binding;
@@ -363,6 +358,15 @@ export abstract class InlinableHTMLDirective extends AspectedHTMLDirective {
     abstract readonly rawAspect?: string;
 }
 
+// @public
+export const Markup: Readonly<{
+    marker: string;
+    interpolation(index: number): string;
+    attribute(index: number): string;
+    comment(index: number): string;
+    indexFromComment(node: Comment): number;
+}>;
+
 // Warning: (ae-internal-missing-underscore) The name "Mutable" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
@@ -417,6 +421,12 @@ export const onChange: BindingConfig<DefaultBindingOptions> & BindingConfigResol
 // @public (undocumented)
 export const oneTime: BindingConfig<DefaultBindingOptions> & BindingConfigResolver<DefaultBindingOptions>;
 
+// @public
+export const Parser: Readonly<{
+    parse(value: string, directives: readonly HTMLDirective[]): (string | HTMLDirective)[] | null;
+    aggregate(parts: (string | HTMLDirective)[]): InlinableHTMLDirective;
+}>;
+
 // @public
 export interface PartialFASTElementDefinition {
     readonly attributes?: (AttributeConfiguration | string)[];
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index 34d5fc660eb..0c9fa1c31ce 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -36,18 +36,6 @@ function tryRunTask(task: Callable): void {
     }
 }
 
-const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
-let id = 0;
-
-/** @internal */
-export const nextId = (): string => `${marker}-${++id}`;
-
-/** @internal */
-export const _interpolationStart = `${marker}{`;
-
-/** @internal */
-export const _interpolationEnd = `}${marker}`;
-
 /**
  * Common DOM APIs.
  * @public
@@ -86,58 +74,9 @@ export const DOM = Object.freeze({
         return htmlPolicy.createHTML(html);
     },
 
-    /**
-     * Determines if the provided node is a template marker used by the runtime.
-     * @param node - The node to test.
-     */
-    isMarker(node: Node): node is Comment {
-        return node && node.nodeType === 8 && (node as Comment).data.startsWith(marker);
-    },
-
-    /**
-     * Given a marker node, extract the {@link HTMLDirective} index from the placeholder.
-     * @param node - The marker node to extract the index from.
-     */
-    extractDirectiveIndexFromMarker(node: Comment): number {
-        return parseInt(node.data.replace(`${marker}:`, ""));
-    },
-
-    /**
-     * Creates a placeholder string suitable for marking out a location *within*
-     * an attribute value or HTML content.
-     * @param index - The directive index to create the placeholder for.
-     * @remarks
-     * Used internally by binding directives.
-     */
-    createInterpolationPlaceholder(index: number): string {
-        return `${_interpolationStart}${index}${_interpolationEnd}`;
-    },
-
-    /**
-     * Creates a placeholder that manifests itself as an attribute on an
-     * element.
-     * @param attributeName - The name of the custom attribute.
-     * @param index - The directive index to create the placeholder for.
-     * @remarks
-     * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
-     */
-    createCustomAttributePlaceholder(index: number): string {
-        return `${nextId()}="${this.createInterpolationPlaceholder(index)}"`;
-    },
-
-    /**
-     * Creates a placeholder that manifests itself as a marker within the DOM structure.
-     * @param index - The directive index to create the placeholder for.
-     * @remarks
-     * Used internally by structural directives such as `repeat`.
-     */
-    createBlockPlaceholder(index: number): string {
-        return `<!--${marker}:${index}-->`;
-    },
-
     /**
      * Sets the update mode used by queueUpdate.
-     * @param isAsync Indicates whether DOM updates should be asynchronous.
+     * @param isAsync - Indicates whether DOM updates should be asynchronous.
      * @remarks
      * By default, the update mode is asynchronous, since that provides the best
      * performance in the browser. Passing false to setUpdateMode will instead cause
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index ee4218147c8..a947c4cb003 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -24,6 +24,7 @@ export { Splice } from "./observation/array-change-records.js";
 export { enableArrayObservation } from "./observation/array-observer.js";
 export { DOM } from "./dom.js";
 export type { Behavior } from "./observation/behavior.js";
+export { Markup, Parser } from "./templating/markup.js";
 export {
     bind,
     oneTime,
diff --git a/packages/web-components/fast-element/src/observation/array-change-records.ts b/packages/web-components/fast-element/src/observation/array-change-records.ts
index 2dfe6ce5221..33bc6ad55ce 100644
--- a/packages/web-components/fast-element/src/observation/array-change-records.ts
+++ b/packages/web-components/fast-element/src/observation/array-change-records.ts
@@ -13,7 +13,7 @@ const enum Edit {
 // followed by an add. By retaining this, we optimize for "keeping" the
 // maximum array items in the original array. For example:
 //
-//   'xxxx123' -> '123yyyy'
+//   'xxxx123' to '123yyyy'
 //
 // With 1-edit updates, the shortest path would be just to update all seven
 // characters. With 2-edit updates, we delete 4, leave 3, and add 4. This
@@ -169,7 +169,7 @@ function intersect(start1: number, end1: number, start2: number, end2: number):
  * was transformed into a new array of items. Conceptually it is a list of
  * tuples of
  *
- *   <index, removed, addedCount>
+ *   (index, removed, addedCount)
  *
  * which are kept in ascending index order of. The tuple represents that at
  * the |index|, |removed| sequence of items were removed, and counting forward
diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index 2b6e5c61cd3..9743105fb72 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -1,5 +1,6 @@
 import type { Behavior } from "../observation/behavior.js";
-import { DOM, nextId } from "../dom.js";
+import { DOM } from "../dom.js";
+import { nextId } from "../templating/markup.js";
 
 /**
  * A node that can be targeted by styles.
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index cfeca6b29be..4b0599d72a1 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -1,6 +1,7 @@
 import { expect } from "chai";
-import { customElement, FASTElement } from "../components/fast-element";
 import { DOM } from "../dom";
+import { customElement, FASTElement } from "../components/fast-element";
+import { Markup } from './markup';
 import { defaultExecutionContext } from "../observation/observable";
 import { css } from "../styles/css";
 import type { StyleTarget } from "../styles/element-styles";
@@ -18,7 +19,7 @@ describe("The template compiler", () => {
     }
 
     function inline(index: number) {
-        return DOM.createInterpolationPlaceholder(index);
+        return Markup.interpolation(index);
     }
 
     function binding(result = "result") {
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index bee114952e9..6c832dad180 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,11 +1,9 @@
-import { _interpolationEnd, _interpolationStart, DOM } from "../dom.js";
+import { Markup, Parser } from "./markup.js";
 import { isString } from "../interfaces.js";
-import type { ExecutionContext } from "../observation/observable.js";
 import { bind, oneTime } from "./binding.js";
 import type {
     AspectedHTMLDirective,
     HTMLDirective,
-    InlinableHTMLDirective,
     ViewBehaviorFactory,
     ViewBehaviorTargets,
 } from "./html-directive.js";
@@ -133,70 +131,10 @@ class CompilationContext implements HTMLTemplateCompilationResult {
     }
 }
 
-function createAggregateBinding(parts: (string | HTMLDirective)[]): HTMLDirective {
-    if (parts.length === 1) {
-        return parts[0] as HTMLDirective;
-    }
-
-    let aspect: string | undefined;
-    const partCount = parts.length;
-    const finalParts = parts.map((x: string | InlinableHTMLDirective) => {
-        if (isString(x)) {
-            return (): string => x;
-        }
-
-        aspect = x.rawAspect || aspect;
-        return x.binding;
-    });
-
-    const binding = (scope: unknown, context: ExecutionContext): string => {
-        let output = "";
-
-        for (let i = 0; i < partCount; ++i) {
-            output += finalParts[i](scope, context);
-        }
-
-        return output;
-    };
-
-    const directive = bind(binding) as AspectedHTMLDirective;
-    directive.setAspect(aspect!);
-    return directive;
-}
-
-const interpolationEndLength = _interpolationEnd.length;
-
-function parseContent(
-    context: CompilationContext,
-    value: string
-): (string | HTMLDirective)[] | null {
-    const valueParts = value.split(_interpolationStart);
-
-    if (valueParts.length === 1) {
-        return null;
-    }
-
-    const bindingParts: any[] = [];
-
-    for (let i = 0, ii = valueParts.length; i < ii; ++i) {
-        const current = valueParts[i];
-        const index = current.indexOf(_interpolationEnd);
-        let literal;
-
-        if (index === -1) {
-            literal = current;
-        } else {
-            const directiveIndex = parseInt(current.substring(0, index));
-            bindingParts.push(context.directives[directiveIndex]);
-            literal = current.substring(index + interpolationEndLength);
-        }
-
-        if (literal !== "") {
-            bindingParts.push(literal);
-        }
-    }
+const marker = Markup.marker;
 
-    return bindingParts;
+function isMarker(node: Node): node is Comment {
+    return node && node.nodeType === 8 && (node as Comment).data.startsWith(marker);
 }
 
 function compileAttributes(
@@ -208,11 +146,12 @@ function compileAttributes(
     includeBasicValues: boolean = false
 ): void {
     const attributes = node.attributes;
+    const directives = context.directives;
 
     for (let i = 0, ii = attributes.length; i < ii; ++i) {
         const attr = attributes[i];
         const attrValue = attr.value;
-        const parseResult = parseContent(context, attrValue);
+        const parseResult = Parser.parse(attrValue, directives);
         let result: HTMLDirective | null = null;
 
         if (parseResult === null) {
@@ -221,7 +160,7 @@ function compileAttributes(
                 (result as AspectedHTMLDirective).setAspect(attr.name);
             }
         } else {
-            result = createAggregateBinding(parseResult);
+            result = Parser.aggregate(parseResult);
         }
 
         if (result !== null) {
@@ -240,7 +179,7 @@ function compileContent(
     nodeId,
     nodeIndex
 ): NextNode {
-    const parseResult = parseContent(context, node.textContent!);
+    const parseResult = Parser.parse(node.textContent!, context.directives);
     if (parseResult === null) {
         next.node = node.nextSibling;
         next.index = nodeIndex + 1;
@@ -309,9 +248,9 @@ function compileNode(
         case 3: // text node
             return compileContent(context, node as Text, parentId, nodeId, nodeIndex);
         case 8: // comment
-            if (DOM.isMarker(node)) {
+            if (isMarker(node)) {
                 context.addFactory(
-                    context.directives[DOM.extractDirectiveIndexFromMarker(node)],
+                    context.directives[Markup.indexFromComment(node)],
                     parentId,
                     nodeId,
                     nodeIndex
@@ -351,7 +290,7 @@ export function compileTemplate(
         // because something like a when, repeat, etc. could add nodes before the marker.
         // To mitigate this, we insert a stable first node. However, if we insert a node,
         // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-        DOM.isMarker(fragment.firstChild!) ||
+        isMarker(fragment.firstChild!) ||
         // Or if there is only one node, it means the template's content
         // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
         // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 47071acc2d3..81a29327c6e 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -1,4 +1,4 @@
-import { DOM, nextId } from "../dom.js";
+import { Markup, nextId } from "./markup.js";
 import type { Behavior } from "../observation/behavior.js";
 import type { Binding, ExecutionContext } from "../observation/observable.js";
 
@@ -99,10 +99,13 @@ export abstract class AspectedHTMLDirective extends HTMLDirective {
      * Creates a placeholder string based on the directive's index within the template.
      * @param index - The index of the directive within the template.
      */
-    public createPlaceholder: (index: number) => string =
-        DOM.createInterpolationPlaceholder;
+    public createPlaceholder: (index: number) => string = Markup.interpolation;
 }
 
+/**
+ * A {@link HTMLDirective} that can be inlined within an attribute or text content.
+ * @public
+ */
 export abstract class InlinableHTMLDirective extends AspectedHTMLDirective {
     abstract readonly binding: Binding;
     abstract readonly rawAspect?: string;
@@ -134,7 +137,7 @@ export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirecti
      * Creates a custom attribute placeholder.
      */
     public createPlaceholder(index: number): string {
-        return DOM.createCustomAttributePlaceholder(index);
+        return Markup.attribute(index);
     }
 
     /**
diff --git a/packages/web-components/fast-element/src/templating/markup.ts b/packages/web-components/fast-element/src/templating/markup.ts
new file mode 100644
index 00000000000..8c66bcf54cd
--- /dev/null
+++ b/packages/web-components/fast-element/src/templating/markup.ts
@@ -0,0 +1,150 @@
+import { isString } from "../interfaces.js";
+import type { ExecutionContext } from "../observation/observable.js";
+import { bind } from "./binding.js";
+import type { HTMLDirective, InlinableHTMLDirective } from "./html-directive.js";
+
+const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
+const interpolationStart = `${marker}{`;
+const interpolationEnd = `}${marker}`;
+const interpolationEndLength = interpolationEnd.length;
+
+let id = 0;
+
+/** @internal */
+export const nextId = (): string => `${marker}-${++id}`;
+
+/**
+ * Common APIs related to markup generation.
+ * @public
+ */
+export const Markup = Object.freeze({
+    /**
+     * Gets the unique marker used by FAST to annotate templates.
+     */
+    marker,
+
+    /**
+     * Creates a placeholder string suitable for marking out a location *within*
+     * an attribute value or HTML content.
+     * @param index - The directive index to create the placeholder for.
+     * @remarks
+     * Used internally by binding directives.
+     */
+    interpolation(index: number): string {
+        return `${interpolationStart}${index}${interpolationEnd}`;
+    },
+
+    /**
+     * Creates a placeholder that manifests itself as an attribute on an
+     * element.
+     * @param attributeName - The name of the custom attribute.
+     * @param index - The directive index to create the placeholder for.
+     * @remarks
+     * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
+     */
+    attribute(index: number): string {
+        return `${nextId()}="${this.interpolation(index)}"`;
+    },
+
+    /**
+     * Creates a placeholder that manifests itself as a marker within the DOM structure.
+     * @param index - The directive index to create the placeholder for.
+     * @remarks
+     * Used internally by structural directives such as `repeat`.
+     */
+    comment(index: number): string {
+        return `<!--${marker}:${index}-->`;
+    },
+
+    /**
+     * Given a marker node, extract the {@link HTMLDirective} index from the placeholder.
+     * @param node - The marker node to extract the index from.
+     */
+    indexFromComment(node: Comment): number {
+        return parseInt(node.data.replace(`${marker}:`, ""));
+    },
+});
+
+/**
+ * Common APIs related to content parsing.
+ * @public
+ */
+export const Parser = Object.freeze({
+    /**
+     * Parses text content or HTML attribute content, separating out the static strings
+     * from the directives.
+     * @param value - The content or attribute string to parse.
+     * @param directives - A list of directives to search for in the string.
+     * @returns A heterogeneous array of static strings interspersed with
+     * directives or null if no directives are found in the string.
+     */
+    parse(
+        value: string,
+        directives: readonly HTMLDirective[]
+    ): (string | HTMLDirective)[] | null {
+        const valueParts = value.split(interpolationStart);
+
+        if (valueParts.length === 1) {
+            return null;
+        }
+
+        const bindingParts: (string | HTMLDirective)[] = [];
+
+        for (let i = 0, ii = valueParts.length; i < ii; ++i) {
+            const current = valueParts[i];
+            const index = current.indexOf(interpolationEnd);
+            let literal: string | HTMLDirective;
+
+            if (index === -1) {
+                literal = current;
+            } else {
+                const directiveIndex = parseInt(current.substring(0, index));
+                bindingParts.push(directives[directiveIndex]);
+                literal = current.substring(index + interpolationEndLength);
+            }
+
+            if (literal !== "") {
+                bindingParts.push(literal);
+            }
+        }
+
+        return bindingParts;
+    },
+
+    /**
+     * Aggregates an array of strings and directives into a single directive.
+     * @param parts - A heterogeneous array of static strings interspersed with
+     * directives.
+     * @returns A single inline directive that aggregates the behavior of all the parts.
+     */
+    aggregate(parts: (string | HTMLDirective)[]): InlinableHTMLDirective {
+        if (parts.length === 1) {
+            return parts[0] as InlinableHTMLDirective;
+        }
+
+        let aspect: string | undefined;
+        const partCount = parts.length;
+        const finalParts = parts.map((x: string | InlinableHTMLDirective) => {
+            if (isString(x)) {
+                return (): string => x;
+            }
+
+            aspect = x.rawAspect || aspect;
+            return x.binding;
+        });
+
+        const binding = (scope: unknown, context: ExecutionContext): string => {
+            let output = "";
+
+            for (let i = 0; i < partCount; ++i) {
+                output += finalParts[i](scope, context);
+            }
+
+            return output;
+        };
+
+        const directive = bind(binding) as InlinableHTMLDirective;
+        directive.setAspect(aspect!);
+        return directive;
+    },
+});
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index fce7b46d902..44c9f3237e2 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -1,4 +1,4 @@
-import { DOM } from "../dom.js";
+import { Markup } from "./markup.js";
 import { isFunction } from "../interfaces.js";
 import type { Splice } from "../observation/array-change-records.js";
 import { enableArrayObservation } from "../observation/array-observer.js";
@@ -307,7 +307,7 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
      * Creates a placeholder string based on the directive's index within the template.
      * @param index - The index of the directive within the template.
      */
-    public createPlaceholder: (index: number) => string = DOM.createBlockPlaceholder;
+    public createPlaceholder: (index: number) => string = Markup.comment;
 
     /**
      * Creates an instance of RepeatDirective.
diff --git a/packages/web-components/fast-element/src/templating/template.spec.ts b/packages/web-components/fast-element/src/templating/template.spec.ts
index f436b932716..01fb18610c1 100644
--- a/packages/web-components/fast-element/src/templating/template.spec.ts
+++ b/packages/web-components/fast-element/src/templating/template.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from "chai";
 import { html, ViewTemplate } from "./template";
-import { DOM } from "../dom";
+import { Markup } from "./markup";
 import { HTMLBindingDirective } from "./binding";
-import { HTMLDirective, AspectedHTMLDirective } from "./html-directive";
+import { HTMLDirective } from "./html-directive";
 import { bind, Binding, InlinableHTMLDirective, ViewBehaviorTargets } from "..";
 
 describe(`The html tag template helper`, () => {
@@ -17,7 +17,7 @@ describe(`The html tag template helper`, () => {
         }
 
         createPlaceholder(index: number) {
-            return DOM.createBlockPlaceholder(index);
+            return Markup.comment(index);
         }
     }
 
@@ -51,40 +51,40 @@ describe(`The html tag template helper`, () => {
             type: "number",
             location: "at the beginning",
             template: html`${numberValue} end`,
-            result: `${DOM.createInterpolationPlaceholder(0)} end`,
+            result: `${Markup.interpolation(0)} end`,
         },
         {
             type: "number",
             location: "in the middle",
             template: html`beginning ${numberValue} end`,
-            result: `beginning ${DOM.createInterpolationPlaceholder(0)} end`,
+            result: `beginning ${Markup.interpolation(0)} end`,
         },
         {
             type: "number",
             location: "at the end",
             template: html`beginning ${numberValue}`,
-            result: `beginning ${DOM.createInterpolationPlaceholder(0)}`,
+            result: `beginning ${Markup.interpolation(0)}`,
         },
         // expression interpolation
         {
             type: "expression",
             location: "at the beginning",
             template: html<Model>`${x => x.value} end`,
-            result: `${DOM.createInterpolationPlaceholder(0)} end`,
+            result: `${Markup.interpolation(0)} end`,
             expectDirectives: [HTMLBindingDirective],
         },
         {
             type: "expression",
             location: "in the middle",
             template: html<Model>`beginning ${x => x.value} end`,
-            result: `beginning ${DOM.createInterpolationPlaceholder(0)} end`,
+            result: `beginning ${Markup.interpolation(0)} end`,
             expectDirectives: [HTMLBindingDirective],
         },
         {
             type: "expression",
             location: "at the end",
             template: html<Model>`beginning ${x => x.value}`,
-            result: `beginning ${DOM.createInterpolationPlaceholder(0)}`,
+            result: `beginning ${Markup.interpolation(0)}`,
             expectDirectives: [HTMLBindingDirective],
         },
         // directive interpolation
@@ -92,21 +92,21 @@ describe(`The html tag template helper`, () => {
             type: "directive",
             location: "at the beginning",
             template: html`${new TestDirective()} end`,
-            result: `${DOM.createBlockPlaceholder(0)} end`,
+            result: `${Markup.comment(0)} end`,
             expectDirectives: [TestDirective],
         },
         {
             type: "directive",
             location: "in the middle",
             template: html`beginning ${new TestDirective()} end`,
-            result: `beginning ${DOM.createBlockPlaceholder(0)} end`,
+            result: `beginning ${Markup.comment(0)} end`,
             expectDirectives: [TestDirective],
         },
         {
             type: "directive",
             location: "at the end",
             template: html`beginning ${new TestDirective()}`,
-            result: `beginning ${DOM.createBlockPlaceholder(0)}`,
+            result: `beginning ${Markup.comment(0)}`,
             expectDirectives: [TestDirective],
         },
         // template interpolation
@@ -114,21 +114,21 @@ describe(`The html tag template helper`, () => {
             type: "template",
             location: "at the beginning",
             template: html`${html`sub-template`} end`,
-            result: `${DOM.createInterpolationPlaceholder(0)} end`,
+            result: `${Markup.interpolation(0)} end`,
             expectDirectives: [HTMLBindingDirective],
         },
         {
             type: "template",
             location: "in the middle",
             template: html`beginning ${html`sub-template`} end`,
-            result: `beginning ${DOM.createInterpolationPlaceholder(0)} end`,
+            result: `beginning ${Markup.interpolation(0)} end`,
             expectDirectives: [HTMLBindingDirective],
         },
         {
             type: "template",
             location: "at the end",
             template: html`beginning ${html`sub-template`}`,
-            result: `beginning ${DOM.createInterpolationPlaceholder(0)}`,
+            result: `beginning ${Markup.interpolation(0)}`,
             expectDirectives: [HTMLBindingDirective],
         },
         // mixed interpolation
@@ -136,33 +136,33 @@ describe(`The html tag template helper`, () => {
             type: "mixed, back-to-back string, number, expression, and directive",
             location: "at the beginning",
             template: html<Model>`${stringValue}${numberValue}${x => x.value}${new TestDirective()} end`,
-            result: `${stringValue}${DOM.createInterpolationPlaceholder(
+            result: `${stringValue}${Markup.interpolation(
                 0
-            )}${DOM.createInterpolationPlaceholder(
+            )}${Markup.interpolation(
                 1
-            )}${DOM.createBlockPlaceholder(2)} end`,
+            )}${Markup.comment(2)} end`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
             type: "mixed, back-to-back string, number, expression, and directive",
             location: "in the middle",
             template: html<Model>`beginning ${stringValue}${numberValue}${x => x.value}${new TestDirective()} end`,
-            result: `beginning ${stringValue}${DOM.createInterpolationPlaceholder(
+            result: `beginning ${stringValue}${Markup.interpolation(
                 0
-            )}${DOM.createInterpolationPlaceholder(
+            )}${Markup.interpolation(
                 1
-            )}${DOM.createBlockPlaceholder(2)} end`,
+            )}${Markup.comment(2)} end`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
             type: "mixed, back-to-back string, number, expression, and directive",
             location: "at the end",
             template: html<Model>`beginning ${stringValue}${numberValue}${x => x.value}${new TestDirective()}`,
-            result: `beginning ${stringValue}${DOM.createInterpolationPlaceholder(
+            result: `beginning ${stringValue}${Markup.interpolation(
                 0
-            )}${DOM.createInterpolationPlaceholder(
+            )}${Markup.interpolation(
                 1
-            )}${DOM.createBlockPlaceholder(2)}`,
+            )}${Markup.comment(2)}`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
@@ -170,11 +170,11 @@ describe(`The html tag template helper`, () => {
             location: "at the beginning",
             template: html<Model>`${stringValue}separator${numberValue}separator${x =>
                     x.value}separator${new TestDirective()} end`,
-            result: `${stringValue}separator${DOM.createInterpolationPlaceholder(
+            result: `${stringValue}separator${Markup.interpolation(
                 0
-            )}separator${DOM.createInterpolationPlaceholder(
+            )}separator${Markup.interpolation(
                 1
-            )}separator${DOM.createBlockPlaceholder(2)} end`,
+            )}separator${Markup.comment(2)} end`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
@@ -182,11 +182,11 @@ describe(`The html tag template helper`, () => {
             location: "in the middle",
             template: html<Model>`beginning ${stringValue}separator${numberValue}separator${x =>
                     x.value}separator${new TestDirective()} end`,
-            result: `beginning ${stringValue}separator${DOM.createInterpolationPlaceholder(
+            result: `beginning ${stringValue}separator${Markup.interpolation(
                 0
-            )}separator${DOM.createInterpolationPlaceholder(
+            )}separator${Markup.interpolation(
                 1
-            )}separator${DOM.createBlockPlaceholder(2)} end`,
+            )}separator${Markup.comment(2)} end`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
@@ -194,11 +194,11 @@ describe(`The html tag template helper`, () => {
             location: "at the end",
             template: html<Model>`beginning ${stringValue}separator${numberValue}separator${x =>
                     x.value}separator${new TestDirective()}`,
-            result: `beginning ${stringValue}separator${DOM.createInterpolationPlaceholder(
+            result: `beginning ${stringValue}separator${Markup.interpolation(
                 0
-            )}separator${DOM.createInterpolationPlaceholder(
+            )}separator${Markup.interpolation(
                 1
-            )}separator${DOM.createBlockPlaceholder(2)}`,
+            )}separator${Markup.comment(2)}`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
     ];
@@ -218,7 +218,7 @@ describe(`The html tag template helper`, () => {
 
     it(`captures a case-sensitive property name when used with an expression`, () => {
         const template = html<Model>`<my-element :someAttribute=${x => x.value}></my-element>`;
-        const placeholder = DOM.createInterpolationPlaceholder(0);
+        const placeholder = Markup.interpolation(0);
 
         expect(template.html).to.equal(
             `<my-element :someAttribute=${placeholder}></my-element>`
@@ -230,7 +230,7 @@ describe(`The html tag template helper`, () => {
 
     it(`captures a case-sensitive property name when used with a binding`, () => {
         const template = html<Model>`<my-element :someAttribute=${bind(x => x.value)}></my-element>`;
-        const placeholder = DOM.createInterpolationPlaceholder(0);
+        const placeholder = Markup.interpolation(0);
 
         expect(template.html).to.equal(
             `<my-element :someAttribute=${placeholder}></my-element>`
@@ -255,7 +255,7 @@ describe(`The html tag template helper`, () => {
         }
 
         const template = html<Model>`<my-element :someAttribute=${new TestDirective()}></my-element>`;
-        const placeholder = DOM.createInterpolationPlaceholder(0);
+        const placeholder = Markup.interpolation(0);
 
         expect(template.html).to.equal(
             `<my-element :someAttribute=${placeholder}></my-element>`

From 5f2fe7d2ae1bfa45e22a8a7098d0a643b6935727 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 24 Feb 2022 07:44:12 -0800
Subject: [PATCH 071/135] Fixed an updated export from FAST element 2.0 (#5653)

* Fixed an updated export from FAST element 2.0

* Change files
---
 ...t-fast-router-d8d52093-fa07-417d-a12d-acdab4a96101.json | 7 +++++++
 packages/web-components/fast-router/src/contributors.ts    | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 change/@microsoft-fast-router-d8d52093-fa07-417d-a12d-acdab4a96101.json

diff --git a/change/@microsoft-fast-router-d8d52093-fa07-417d-a12d-acdab4a96101.json b/change/@microsoft-fast-router-d8d52093-fa07-417d-a12d-acdab4a96101.json
new file mode 100644
index 00000000000..d6e89d4ac48
--- /dev/null
+++ b/change/@microsoft-fast-router-d8d52093-fa07-417d-a12d-acdab4a96101.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed an updated export from FAST element 2.0",
+  "packageName": "@microsoft/fast-router",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-router/src/contributors.ts b/packages/web-components/fast-router/src/contributors.ts
index 5ba154b227c..eb9afd35e0d 100644
--- a/packages/web-components/fast-router/src/contributors.ts
+++ b/packages/web-components/fast-router/src/contributors.ts
@@ -1,7 +1,7 @@
 import {
     Behavior,
     HTMLDirective,
-    DOM,
+    Markup,
     ViewBehaviorTargets,
 } from "@microsoft/fast-element";
 import {
@@ -50,7 +50,7 @@ class NavigationContributorDirective extends HTMLDirective {
     }
 
     createPlaceholder(index: number) {
-        return DOM.createCustomAttributePlaceholder(index);
+        return Markup.attribute(index);
     }
 
     createBehavior(targets: ViewBehaviorTargets) {

From 5be9fd0679ff4684eaccda6aac509849c115e1e0 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Thu, 24 Feb 2022 13:39:08 -0500
Subject: [PATCH 072/135] fix: prevent duplicative array observation patch
 (FE2) (#5656)

* fix: prevent duplicative array observation patch

* Change files

* refactor: re-organize array observer code

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-715828c0-7339-4dde-a445-8a5407f0a3b9.json |   7 +
 .../src/observation/array-observer.ts         | 272 +++++++++---------
 2 files changed, 150 insertions(+), 129 deletions(-)
 create mode 100644 change/@microsoft-fast-element-715828c0-7339-4dde-a445-8a5407f0a3b9.json

diff --git a/change/@microsoft-fast-element-715828c0-7339-4dde-a445-8a5407f0a3b9.json b/change/@microsoft-fast-element-715828c0-7339-4dde-a445-8a5407f0a3b9.json
new file mode 100644
index 00000000000..eb4fa3e0eed
--- /dev/null
+++ b/change/@microsoft-fast-element-715828c0-7339-4dde-a445-8a5407f0a3b9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: prevent duplicative array observation patch",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index 8572c89ee67..172b5a8138c 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -5,21 +5,6 @@ import { Subscriber, SubscriberSet } from "./notifier.js";
 import type { Notifier } from "./notifier.js";
 import { Observable } from "./observable.js";
 
-function adjustIndex(changeRecord: Splice, array: any[]): Splice {
-    let index = changeRecord.index;
-    const arrayLength = array.length;
-
-    if (index > arrayLength) {
-        index = arrayLength - changeRecord.addedCount;
-    } else if (index < 0) {
-        index =
-            arrayLength + changeRecord.removed.length + index - changeRecord.addedCount;
-    }
-
-    changeRecord.index = index < 0 ? 0 : index;
-    return changeRecord;
-}
-
 class ArrayObserver extends SubscriberSet {
     private oldCollection: any[] | undefined = void 0;
     private splices: Splice[] | undefined = void 0;
@@ -74,115 +59,7 @@ class ArrayObserver extends SubscriberSet {
     }
 }
 
-const proto = Array.prototype;
-const pop = proto.pop;
-const push = proto.push;
-const reverse = proto.reverse;
-const shift = proto.shift;
-const sort = proto.sort;
-const splice = proto.splice;
-const unshift = proto.unshift;
-const arrayOverrides = {
-    pop(...args) {
-        const notEmpty = this.length > 0;
-        const result = pop.apply(this, args);
-        const o = this.$fastController as ArrayObserver;
-
-        if (o !== void 0 && notEmpty) {
-            o.addSplice(new Splice(this.length, [result], 0));
-        }
-
-        return result;
-    },
-
-    push(...args) {
-        const result = push.apply(this, args);
-        const o = this.$fastController as ArrayObserver;
-
-        if (o !== void 0) {
-            o.addSplice(
-                adjustIndex(new Splice(this.length - args.length, [], args.length), this)
-            );
-        }
-
-        return result;
-    },
-
-    reverse(...args) {
-        let oldArray;
-        const o = this.$fastController as ArrayObserver;
-
-        if (o !== void 0) {
-            o.flush();
-            oldArray = this.slice();
-        }
-
-        const result = reverse.apply(this, args);
-
-        if (o !== void 0) {
-            o.reset(oldArray);
-        }
-
-        return result;
-    },
-
-    shift(...args) {
-        const notEmpty = this.length > 0;
-        const result = shift.apply(this, args);
-        const o = this.$fastController as ArrayObserver;
-
-        if (o !== void 0 && notEmpty) {
-            o.addSplice(new Splice(0, [result], 0));
-        }
-
-        return result;
-    },
-
-    sort(...args) {
-        let oldArray;
-        const o = this.$fastController as ArrayObserver;
-
-        if (o !== void 0) {
-            o.flush();
-            oldArray = this.slice();
-        }
-
-        const result = sort.apply(this, args);
-
-        if (o !== void 0) {
-            o.reset(oldArray);
-        }
-
-        return result;
-    },
-
-    splice(...args) {
-        const result = splice.apply(this, args);
-        const o = this.$fastController as ArrayObserver;
-
-        if (o !== void 0) {
-            o.addSplice(
-                adjustIndex(
-                    new Splice(+args[0], result, args.length > 2 ? args.length - 2 : 0),
-                    this
-                )
-            );
-        }
-
-        return result;
-    },
-
-    unshift(...args) {
-        const result = unshift.apply(this, args);
-        const o = this.$fastController as ArrayObserver;
-
-        if (o !== void 0) {
-            o.addSplice(adjustIndex(new Splice(0, [], args.length), this));
-        }
-
-        return result;
-    },
-};
+let enabled = false;
 
 /* eslint-disable prefer-rest-params */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
@@ -195,11 +72,11 @@ const arrayOverrides = {
  * @public
  */
 export function enableArrayObservation(): void {
-    if ((proto as any).$fastObservation) {
+    if (enabled) {
         return;
     }
 
-    (proto as any).$fastObservation = true;
+    enabled = true;
 
     Observable.setArrayObserverFactory(
         (collection: any[]): Notifier => {
@@ -207,7 +84,144 @@ export function enableArrayObservation(): void {
         }
     );
 
-    Object.assign(proto, arrayOverrides);
+    const proto = Array.prototype;
+
+    if (!(proto as any).$fastPatch) {
+        (proto as any).$fastPatch = true;
+
+        const pop = proto.pop;
+        const push = proto.push;
+        const reverse = proto.reverse;
+        const shift = proto.shift;
+        const sort = proto.sort;
+        const splice = proto.splice;
+        const unshift = proto.unshift;
+
+        function adjustIndex(changeRecord: Splice, array: any[]): Splice {
+            let index = changeRecord.index;
+            const arrayLength = array.length;
+
+            if (index > arrayLength) {
+                index = arrayLength - changeRecord.addedCount;
+            } else if (index < 0) {
+                index =
+                    arrayLength +
+                    changeRecord.removed.length +
+                    index -
+                    changeRecord.addedCount;
+            }
+
+            changeRecord.index = index < 0 ? 0 : index;
+            return changeRecord;
+        }
+
+        Object.assign(proto, {
+            pop(...args) {
+                const notEmpty = this.length > 0;
+                const result = pop.apply(this, args);
+                const o = this.$fastController as ArrayObserver;
+
+                if (o !== void 0 && notEmpty) {
+                    o.addSplice(new Splice(this.length, [result], 0));
+                }
+
+                return result;
+            },
+
+            push(...args) {
+                const result = push.apply(this, args);
+                const o = this.$fastController as ArrayObserver;
+
+                if (o !== void 0) {
+                    o.addSplice(
+                        adjustIndex(
+                            new Splice(this.length - args.length, [], args.length),
+                            this
+                        )
+                    );
+                }
+
+                return result;
+            },
+
+            reverse(...args) {
+                let oldArray;
+                const o = this.$fastController as ArrayObserver;
+
+                if (o !== void 0) {
+                    o.flush();
+                    oldArray = this.slice();
+                }
+
+                const result = reverse.apply(this, args);
+
+                if (o !== void 0) {
+                    o.reset(oldArray);
+                }
+
+                return result;
+            },
+
+            shift(...args) {
+                const notEmpty = this.length > 0;
+                const result = shift.apply(this, args);
+                const o = this.$fastController as ArrayObserver;
+
+                if (o !== void 0 && notEmpty) {
+                    o.addSplice(new Splice(0, [result], 0));
+                }
+
+                return result;
+            },
+
+            sort(...args) {
+                let oldArray;
+                const o = this.$fastController as ArrayObserver;
+
+                if (o !== void 0) {
+                    o.flush();
+                    oldArray = this.slice();
+                }
+
+                const result = sort.apply(this, args);
+
+                if (o !== void 0) {
+                    o.reset(oldArray);
+                }
+
+                return result;
+            },
+
+            splice(...args) {
+                const result = splice.apply(this, args);
+                const o = this.$fastController as ArrayObserver;
+
+                if (o !== void 0) {
+                    o.addSplice(
+                        adjustIndex(
+                            new Splice(
+                                +args[0],
+                                result,
+                                args.length > 2 ? args.length - 2 : 0
+                            ),
+                            this
+                        )
+                    );
+                }
+
+                return result;
+            },
+
+            unshift(...args) {
+                const result = unshift.apply(this, args);
+                const o = this.$fastController as ArrayObserver;
+
+                if (o !== void 0) {
+                    o.addSplice(adjustIndex(new Splice(0, [], args.length), this));
+                }
+
+                return result;
+            },
+        });
+    }
 }
-/* eslint-enable prefer-rest-params */
-/* eslint-enable @typescript-eslint/explicit-function-return-type */

From 78bbf3d052b6af3faee3b5d874da611f52edaeca Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Fri, 25 Feb 2022 15:34:57 -0500
Subject: [PATCH 073/135] fix: defend against for/in use on arrays (FE2)
 (#5662)

* fix: defend against for/in use on arrays

* Change files

* test: added some basic tests for array observers

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-8e5ad334-ac12-466b-8440-415abd011eb0.json |  7 +++
 .../src/observation/array-observer.spec.ts    | 56 +++++++++++++++++++
 .../src/observation/array-observer.ts         | 15 +++--
 .../src/observation/observable.spec.ts        | 16 ++----
 4 files changed, 77 insertions(+), 17 deletions(-)
 create mode 100644 change/@microsoft-fast-element-8e5ad334-ac12-466b-8440-415abd011eb0.json
 create mode 100644 packages/web-components/fast-element/src/observation/array-observer.spec.ts

diff --git a/change/@microsoft-fast-element-8e5ad334-ac12-466b-8440-415abd011eb0.json b/change/@microsoft-fast-element-8e5ad334-ac12-466b-8440-415abd011eb0.json
new file mode 100644
index 00000000000..92598d2f97c
--- /dev/null
+++ b/change/@microsoft-fast-element-8e5ad334-ac12-466b-8440-415abd011eb0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: defend against for/in use on arrays",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/src/observation/array-observer.spec.ts b/packages/web-components/fast-element/src/observation/array-observer.spec.ts
new file mode 100644
index 00000000000..61411bea639
--- /dev/null
+++ b/packages/web-components/fast-element/src/observation/array-observer.spec.ts
@@ -0,0 +1,56 @@
+import { expect } from "chai";
+import { Observable } from "./observable";
+import { enableArrayObservation } from "./array-observer";
+import { SubscriberSet } from "./notifier";
+
+describe("The ArrayObserver", () => {
+    it("can be retrieved through Observable.getNotifier()", () => {
+        enableArrayObservation();
+        const array = [];
+        const notifier = Observable.getNotifier(array);
+        expect(notifier).to.be.instanceOf(SubscriberSet);
+    });
+
+    it("is the same instance for multiple calls to Observable.getNotifier() on the same array", () => {
+        enableArrayObservation();
+        const array = [];
+        const notifier = Observable.getNotifier(array);
+        const notifier2 = Observable.getNotifier(array);
+        expect(notifier).to.equal(notifier2);
+    });
+
+    it("is different for different arrays", () => {
+        enableArrayObservation();
+        const notifier = Observable.getNotifier([]);
+        const notifier2 = Observable.getNotifier([]);
+        expect(notifier).to.not.equal(notifier2);
+    });
+
+    it("doesn't affect for/in loops on arrays when enabled", () => {
+        enableArrayObservation();
+
+        const array = [1, 2, 3];
+        const keys: string[] = [];
+
+        for (const key in array) {
+            keys.push(key);
+        }
+
+        expect(keys).eql(["0", "1", "2"]);
+    });
+
+    it("doesn't affect for/in loops on arrays when the array is observed", () => {
+        enableArrayObservation();
+
+        const array = [1, 2, 3];
+        const keys: string[] = [];
+        const notifier = Observable.getNotifier(array);
+
+        for (const key in array) {
+            keys.push(key);
+        }
+
+        expect(notifier).to.be.instanceOf(SubscriberSet);
+        expect(keys).eql(["0", "1", "2"])
+    });
+});
diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index 172b5a8138c..4a2a3fb18d1 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -5,6 +5,13 @@ import { Subscriber, SubscriberSet } from "./notifier.js";
 import type { Notifier } from "./notifier.js";
 import { Observable } from "./observable.js";
 
+function setNonEnumerable(target: any, property: string, value: any) {
+    Reflect.defineProperty(target, property, {
+        value,
+        enumerable: false,
+    });
+}
+
 class ArrayObserver extends SubscriberSet {
     private oldCollection: any[] | undefined = void 0;
     private splices: Splice[] | undefined = void 0;
@@ -13,7 +20,7 @@ class ArrayObserver extends SubscriberSet {
 
     constructor(subject: any[]) {
         super(subject);
-        (subject as any).$fastController = this;
+        setNonEnumerable(subject, "$fastController", this);
     }
 
     public subscribe(subscriber: Subscriber): void {
@@ -79,15 +86,13 @@ export function enableArrayObservation(): void {
     enabled = true;
 
     Observable.setArrayObserverFactory(
-        (collection: any[]): Notifier => {
-            return new ArrayObserver(collection);
-        }
+        (collection: any[]): Notifier => new ArrayObserver(collection)
     );
 
     const proto = Array.prototype;
 
     if (!(proto as any).$fastPatch) {
-        (proto as any).$fastPatch = true;
+        setNonEnumerable(proto, "$fastPatch", 1);
 
         const pop = proto.pop;
         const push = proto.push;
diff --git a/packages/web-components/fast-element/src/observation/observable.spec.ts b/packages/web-components/fast-element/src/observation/observable.spec.ts
index f3e90091ac4..c174b52ab0d 100644
--- a/packages/web-components/fast-element/src/observation/observable.spec.ts
+++ b/packages/web-components/fast-element/src/observation/observable.spec.ts
@@ -76,19 +76,11 @@ describe("The Observable", () => {
             expect(notifier).to.equal(notifier2);
         });
 
-        it("can get a notifier for an array", () => {
-            enableArrayObservation();
-            const array = [];
-            const notifier = Observable.getNotifier(array);
-            expect(notifier).to.be.instanceOf(SubscriberSet);
-        });
+        it("gets different notifiers for different objects", () => {
+            const notifier = Observable.getNotifier(new Model());
+            const notifier2 = Observable.getNotifier(new Model());
 
-        it("gets the same notifier for the same array", () => {
-            enableArrayObservation();
-            const array = [];
-            const notifier = Observable.getNotifier(array);
-            const notifier2 = Observable.getNotifier(array);
-            expect(notifier).to.equal(notifier2);
+            expect(notifier).to.not.equal(notifier2);
         });
 
         it("can notify a change on an object", () => {

From aa36cdac92dcc041ba773ff6d87eadd33476ee9e Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Fri, 25 Feb 2022 17:34:52 -0500
Subject: [PATCH 074/135] docs: add alpha tags to unfinished binding APIs
 (#5665)

* docs: add alpha tags to unfinished binding APIs

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-d6062145-f143-437a-ae17-b8a923f1208e.json |  7 ++++
 .../fast-element/docs/api-report.md           | 16 ++++----
 .../fast-element/src/templating/binding.ts    | 37 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 change/@microsoft-fast-element-d6062145-f143-437a-ae17-b8a923f1208e.json

diff --git a/change/@microsoft-fast-element-d6062145-f143-437a-ae17-b8a923f1208e.json b/change/@microsoft-fast-element-d6062145-f143-437a-ae17-b8a923f1208e.json
new file mode 100644
index 00000000000..8c74cab22c6
--- /dev/null
+++ b/change/@microsoft-fast-element-d6062145-f143-437a-ae17-b8a923f1208e.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: add alpha tags to unfinished binding APIs",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index e38a9a06d73..7bdd2112ad4 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -60,18 +60,18 @@ export interface Behavior<TSource = any, TParent = any, TGrandparent = any> {
     unbind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
 }
 
-// @public (undocumented)
+// @alpha (undocumented)
 export function bind<T = any>(binding: Binding<T>, config?: BindingConfig<T> | DefaultBindingOptions): CaptureType<T>;
 
 // @public
 export type Binding<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
 
-// @public (undocumented)
+// @alpha (undocumented)
 export type BindingBehaviorFactory = {
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
 };
 
-// @public (undocumented)
+// @alpha (undocumented)
 export interface BindingConfig<T = any> {
     // (undocumented)
     mode: BindingMode;
@@ -79,7 +79,7 @@ export interface BindingConfig<T = any> {
     options: any;
 }
 
-// @public (undocumented)
+// @alpha (undocumented)
 export interface BindingMode {
     // (undocumented)
     attribute: BindingType;
@@ -104,7 +104,7 @@ export interface BindingObserver<TSource = any, TReturn = any, TParent = any> ex
 
 // Warning: (ae-forgotten-export) The symbol "HTMLBindingDirective" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @alpha (undocumented)
 export type BindingType = (directive: HTMLBindingDirective) => BindingBehaviorFactory;
 
 // @public
@@ -196,7 +196,7 @@ export function customElement(nameOrDef: string | PartialFASTElementDefinition):
 // @public
 export type DecoratorAttributeConfiguration = Omit<AttributeConfiguration, "property">;
 
-// @public (undocumented)
+// @alpha (undocumented)
 export type DefaultBindingOptions = {
     capture?: boolean;
 };
@@ -415,10 +415,10 @@ export interface ObservationRecord {
 
 // Warning: (ae-forgotten-export) The symbol "BindingConfigResolver" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @alpha (undocumented)
 export const onChange: BindingConfig<DefaultBindingOptions> & BindingConfigResolver<DefaultBindingOptions>;
 
-// @public (undocumented)
+// @alpha (undocumented)
 export const oneTime: BindingConfig<DefaultBindingOptions> & BindingConfigResolver<DefaultBindingOptions>;
 
 // @public
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index cefec33ba7e..a333a04969e 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -15,15 +15,30 @@ import {
 import type { CaptureType } from "./template.js";
 import type { SyntheticView } from "./view.js";
 
+// TODO: Fix the code docs in this file.
+
+/**
+ * @alpha
+ */
 export type BindingBehaviorFactory = {
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
 };
 
+/**
+ * @alpha
+ */
 export type BindingType = (directive: HTMLBindingDirective) => BindingBehaviorFactory;
+
+/**
+ * @alpha
+ */
 export const notSupportedBindingType: BindingType = () => {
     throw new Error();
 };
 
+/**
+ * @alpha
+ */
 export interface BindingMode {
     attribute: BindingType;
     booleanAttribute: BindingType;
@@ -33,7 +48,9 @@ export interface BindingMode {
     event: BindingType;
 }
 
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+/**
+ * @alpha
+ */
 export interface BindingConfig<T = any> {
     mode: BindingMode;
     options: any;
@@ -268,6 +285,9 @@ class OneTimeBinding extends TargetUpdateBinding {
 
 const signals: Record<string, undefined | Function | Function[]> = Object.create(null);
 
+/**
+ * @alpha
+ */
 export function sendSignal(signal: string): void {
     const found = signals[signal];
     if (found) {
@@ -446,6 +466,9 @@ class OneTimeEventListener extends EventListener {
     }
 }
 
+/**
+ * @alpha
+ */
 export type DefaultBindingOptions = {
     capture?: boolean;
 };
@@ -454,11 +477,17 @@ const defaultBindingOptions: DefaultBindingOptions = {
     capture: false,
 };
 
+/**
+ * @alpha
+ */
 export const onChange = OnChangeBinding.createBindingConfig(
     defaultBindingOptions,
     directive => new EventListener(directive)
 );
 
+/**
+ * @alpha
+ */
 export const oneTime = OneTimeBinding.createBindingConfig(
     defaultBindingOptions,
     directive => new OneTimeEventListener(directive)
@@ -466,6 +495,9 @@ export const oneTime = OneTimeBinding.createBindingConfig(
 
 const signalMode: BindingMode = OnSignalBinding.createBindingMode();
 
+/**
+ * @alpha
+ */
 export const signal = <T = any>(options: string | Binding<T>): BindingConfig<T> => {
     return { mode: signalMode, options };
 };
@@ -537,6 +569,9 @@ export class HTMLBindingDirective extends InlinableHTMLDirective {
     }
 }
 
+/**
+ * @alpha
+ */
 export function bind<T = any>(
     binding: Binding<T>,
     config: BindingConfig<T> | DefaultBindingOptions = onChange

From ee6aadfffc4d614bb4cead36a882d5e39bd03480 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Fri, 25 Feb 2022 17:54:36 -0500
Subject: [PATCH 075/135] refactor: move template/style resolution to lazy
 getter (#5657)

* refactor: move template/style resolution to lazy getter

Enables access in SSR scenarios to the fully resolved template and styles.

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-47b69b7f-3b12-4084-b343-e7ee172f5539.json |  7 ++
 .../fast-element/docs/api-report.md           |  4 +-
 .../fast-element/src/components/controller.ts | 87 ++++++++++---------
 3 files changed, 54 insertions(+), 44 deletions(-)
 create mode 100644 change/@microsoft-fast-element-47b69b7f-3b12-4084-b343-e7ee172f5539.json

diff --git a/change/@microsoft-fast-element-47b69b7f-3b12-4084-b343-e7ee172f5539.json b/change/@microsoft-fast-element-47b69b7f-3b12-4084-b343-e7ee172f5539.json
new file mode 100644
index 00000000000..bc91855aa59
--- /dev/null
+++ b/change/@microsoft-fast-element-47b69b7f-3b12-4084-b343-e7ee172f5539.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor: move template/style resolution to lazy getter",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 7bdd2112ad4..20d9abd0d0d 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -160,7 +160,7 @@ export class Controller extends PropertyChangeNotifier {
     // @internal
     constructor(element: HTMLElement, definition: FASTElementDefinition);
     addBehaviors(behaviors: ReadonlyArray<Behavior<HTMLElement>>): void;
-    addStyles(styles: ElementStyles | HTMLStyleElement): void;
+    addStyles(styles: ElementStyles | HTMLStyleElement | null | undefined): void;
     readonly definition: FASTElementDefinition;
     readonly element: HTMLElement;
     emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): void | boolean;
@@ -170,7 +170,7 @@ export class Controller extends PropertyChangeNotifier {
     onConnectedCallback(): void;
     onDisconnectedCallback(): void;
     removeBehaviors(behaviors: ReadonlyArray<Behavior<HTMLElement>>, force?: boolean): void;
-    removeStyles(styles: ElementStyles | HTMLStyleElement): void;
+    removeStyles(styles: ElementStyles | HTMLStyleElement | null | undefined): void;
     get styles(): ElementStyles | null;
     set styles(value: ElementStyles | null);
     get template(): ElementViewTemplate | null;
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index 5f48328ed1d..6730134b29f 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -77,11 +77,24 @@ export class Controller extends PropertyChangeNotifier {
      * @remarks
      * This value can only be accurately read after connect but can be set at any time.
      */
-    get template(): ElementViewTemplate | null {
+    public get template(): ElementViewTemplate | null {
+        // 1. Template overrides take top precedence.
+        if (this._template === null) {
+            const definition = this.definition;
+
+            if ((this.element as any).resolveTemplate) {
+                // 2. Allow for element instance overrides next.
+                this._template = (this.element as any).resolveTemplate();
+            } else if (definition.template) {
+                // 3. Default to the static definition.
+                this._template = definition.template ?? null;
+            }
+        }
+
         return this._template;
     }
 
-    set template(value: ElementViewTemplate | null) {
+    public set template(value: ElementViewTemplate | null) {
         if (this._template === value) {
             return;
         }
@@ -98,11 +111,24 @@ export class Controller extends PropertyChangeNotifier {
      * @remarks
      * This value can only be accurately read after connect but can be set at any time.
      */
-    get styles(): ElementStyles | null {
+    public get styles(): ElementStyles | null {
+        // 1. Styles overrides take top precedence.
+        if (this._styles === null) {
+            const definition = this.definition;
+
+            if ((this.element as any).resolveStyles) {
+                // 2. Allow for element instance overrides next.
+                this._styles = (this.element as any).resolveStyles();
+            } else if (definition.styles) {
+                // 3. Default to the static definition.
+                this._styles = definition.styles ?? null;
+            }
+        }
+
         return this._styles;
     }
 
-    set styles(value: ElementStyles | null) {
+    public set styles(value: ElementStyles | null) {
         if (this._styles === value) {
             return;
         }
@@ -113,7 +139,7 @@ export class Controller extends PropertyChangeNotifier {
 
         this._styles = value;
 
-        if (!this.needsInitialization && value !== null) {
+        if (!this.needsInitialization) {
             this.addStyles(value);
         }
     }
@@ -165,7 +191,11 @@ export class Controller extends PropertyChangeNotifier {
      * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
      * @param styles - The styles to add.
      */
-    public addStyles(styles: ElementStyles | HTMLStyleElement): void {
+    public addStyles(styles: ElementStyles | HTMLStyleElement | null | undefined): void {
+        if (!styles) {
+            return;
+        }
+
         const target =
             getShadowRoot(this.element) ||
             ((this.element.getRootNode() as any) as StyleTarget);
@@ -186,7 +216,13 @@ export class Controller extends PropertyChangeNotifier {
      * Removes styles from this element. Providing an HTMLStyleElement will detach the element instance from the shadowRoot.
      * @param styles - the styles to remove.
      */
-    public removeStyles(styles: ElementStyles | HTMLStyleElement): void {
+    public removeStyles(
+        styles: ElementStyles | HTMLStyleElement | null | undefined
+    ): void {
+        if (!styles) {
+            return;
+        }
+
         const target =
             getShadowRoot(this.element) ||
             ((this.element.getRootNode() as any) as StyleTarget);
@@ -381,41 +417,8 @@ export class Controller extends PropertyChangeNotifier {
             this.boundObservables = null;
         }
 
-        const definition = this.definition;
-
-        // 1. Template overrides take top precedence.
-        if (this._template === null) {
-            if ((this.element as any).resolveTemplate) {
-                // 2. Allow for element instance overrides next.
-                this._template = (this.element as any).resolveTemplate();
-            } else if (definition.template) {
-                // 3. Default to the static definition.
-                this._template = definition.template ?? null;
-            }
-        }
-
-        // If we have a template after the above process, render it.
-        // If there's no template, then the element author has opted into
-        // custom rendering and they will managed the shadow root's content themselves.
-        if (this._template !== null) {
-            this.renderTemplate(this._template);
-        }
-
-        // 1. Styles overrides take top precedence.
-        if (this._styles === null) {
-            if ((this.element as any).resolveStyles) {
-                // 2. Allow for element instance overrides next.
-                this._styles = (this.element as any).resolveStyles();
-            } else if (definition.styles) {
-                // 3. Default to the static definition.
-                this._styles = definition.styles ?? null;
-            }
-        }
-
-        // If we have styles after the above process, add them.
-        if (this._styles !== null) {
-            this.addStyles(this._styles);
-        }
+        this.renderTemplate(this.template);
+        this.addStyles(this.styles);
 
         this.needsInitialization = false;
     }

From d733f2809992fe37bc5ccdcbaa9b4bb968d9e53f Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Tue, 1 Mar 2022 14:39:15 -0500
Subject: [PATCH 076/135] feat: handle existing shadow roots when upgrading
 (#5679)

* feat: handle existing shadow roots when upgrading

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-19ee7846-01d0-4dc8-babc-29a4537526a5.json |  7 +++++
 .../src/components/controller.spec.ts         | 27 ++++++++++++++++++-
 .../fast-element/src/components/controller.ts | 17 +++++++++---
 3 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 change/@microsoft-fast-element-19ee7846-01d0-4dc8-babc-29a4537526a5.json

diff --git a/change/@microsoft-fast-element-19ee7846-01d0-4dc8-babc-29a4537526a5.json b/change/@microsoft-fast-element-19ee7846-01d0-4dc8-babc-29a4537526a5.json
new file mode 100644
index 00000000000..adaa1c19fae
--- /dev/null
+++ b/change/@microsoft-fast-element-19ee7846-01d0-4dc8-babc-29a4537526a5.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: handle existing shadow roots when upgrading",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/src/components/controller.spec.ts b/packages/web-components/fast-element/src/components/controller.spec.ts
index 172d741baee..33bcd7a35da 100644
--- a/packages/web-components/fast-element/src/components/controller.spec.ts
+++ b/packages/web-components/fast-element/src/components/controller.spec.ts
@@ -388,6 +388,7 @@ describe("The Controller", () => {
 
         expect(element.shadowRoot?.contains(style)).to.equal(false);
     });
+
     it("should attach and detach the HTMLStyleElement supplied to .addStyles() and .removeStyles() to the shadowRoot", () => {
         const { controller, element } = createController({
             shadowOptions: {
@@ -510,5 +511,29 @@ describe("The Controller", () => {
             controller.removeBehaviors([behavior], true);
             expect(behavior.bound).to.equal(false);
         });
-    })
+    });
+
+    context("with pre-existing shadow dom on the host", () => {
+        it("re-renders the view during connect", async () => {
+            const name = uniqueElementName();
+            const element = document.createElement(name);
+            const root = element.attachShadow({ mode: 'open' });
+            root.innerHTML = 'Test 1';
+
+            document.body.append(element);
+
+            new FASTElementDefinition(
+                class TestElement extends FASTElement {
+                    static definition = {
+                        name,
+                        template: html`Test 2`
+                    };
+                }
+            ).define();
+
+            expect(root.innerHTML).to.equal("<!---->Test 2");
+
+            document.body.removeChild(element);
+        });
+    });
 });
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index 6730134b29f..521d2457a9a 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -26,6 +26,7 @@ export class Controller extends PropertyChangeNotifier {
     private boundObservables: Record<string, any> | null = null;
     private behaviors: Map<Behavior<HTMLElement>, number> | null = null;
     private needsInitialization: boolean = true;
+    private hasExistingShadowRoot = false;
     private _template: ElementViewTemplate | null = null;
     private _styles: ElementStyles | null = null;
     private _isConnected: boolean = false;
@@ -159,10 +160,16 @@ export class Controller extends PropertyChangeNotifier {
         const shadowOptions = definition.shadowOptions;
 
         if (shadowOptions !== void 0) {
-            const shadowRoot = element.attachShadow(shadowOptions);
+            let shadowRoot = element.shadowRoot;
 
-            if (shadowOptions.mode === "closed") {
-                shadowRoots.set(element, shadowRoot);
+            if (shadowRoot) {
+                this.hasExistingShadowRoot = true;
+            } else {
+                shadowRoot = element.attachShadow(shadowOptions);
+
+                if (shadowOptions.mode === "closed") {
+                    shadowRoots.set(element, shadowRoot);
+                }
             }
         }
 
@@ -434,7 +441,9 @@ export class Controller extends PropertyChangeNotifier {
             // If there's already a view, we need to unbind and remove through dispose.
             this.view.dispose();
             (this as Mutable<this>).view = null;
-        } else if (!this.needsInitialization) {
+        } else if (!this.needsInitialization || this.hasExistingShadowRoot) {
+            this.hasExistingShadowRoot = false;
+
             // If there was previous custom rendering, we need to clear out the host.
             for (let child = host.firstChild; child !== null; child = host.firstChild) {
                 host.removeChild(child);

From 60b7861f61e545f411c7dbf805116a1f7977d1be Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Tue, 1 Mar 2022 11:54:38 -0800
Subject: [PATCH 077/135] Adds TemplateParser to SSR package (#5645)

* adding template-renderer feature and spec files

* adding DOM emission configuration to TemplateRenderer

* adding render function to TemplateRenderer

* adding method description to TemplateRenderer.render

* add template parser files and entry functions

* parseTemplateToOpCodes should throw when used with an HTMLTemplateElement template

* change script structure to allow breakpoints to percist in files from build to build

* adding parse5 HTML parser

* generate AST from ViewTemplate

* implement AST traverser

* adding node type checks

* implement parser class that acts as a node visitor for node traversal

* adding flushTo method to TemplateParser

* implement completion method

* writing a few test fixtures for pure HTML templates

* add directive type and parsing test

* move template-parser files to own directory

* adding tests for directive ops

* fix-up after rebase

* emit op-codes for custom elements

* adding attribute binding ops

* formatting

* adding tests for custom element attribute bindings

* organize imports

* fix processing of interpolated bindings and add test

* Change files

* Update packages/web-components/fast-ssr/src/template-parser/template-parser.ts

Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>

* rename ast variable

* remove dependency on Markup.marker

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>
---
 ...-3ee397c7-e268-4a7d-b842-0f5cf799d3db.json |   7 +
 .../fast-element/docs/api-report.md           |   9 +-
 packages/web-components/fast-ssr/package.json |   5 +-
 .../src/template-parser/attributes.ts         |  14 +
 .../fast-ssr/src/template-parser/op-codes.ts  |  91 +++++
 .../template-parser/template-parser.spec.ts   |  97 ++++++
 .../src/template-parser/template-parser.ts    | 311 ++++++++++++++++++
 .../template-renderer.spec.ts                 |  19 ++
 .../template-renderer/template-renderer.ts    |  36 ++
 9 files changed, 583 insertions(+), 6 deletions(-)
 create mode 100644 change/@microsoft-fast-element-3ee397c7-e268-4a7d-b842-0f5cf799d3db.json
 create mode 100644 packages/web-components/fast-ssr/src/template-parser/attributes.ts
 create mode 100644 packages/web-components/fast-ssr/src/template-parser/op-codes.ts
 create mode 100644 packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
 create mode 100644 packages/web-components/fast-ssr/src/template-parser/template-parser.ts
 create mode 100644 packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
 create mode 100644 packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts

diff --git a/change/@microsoft-fast-element-3ee397c7-e268-4a7d-b842-0f5cf799d3db.json b/change/@microsoft-fast-element-3ee397c7-e268-4a7d-b842-0f5cf799d3db.json
new file mode 100644
index 00000000000..e9ed860aaf1
--- /dev/null
+++ b/change/@microsoft-fast-element-3ee397c7-e268-4a7d-b842-0f5cf799d3db.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "automated update of api-report.md",
+  "packageName": "@microsoft/fast-element",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 20d9abd0d0d..31ece83ecda 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -49,7 +49,7 @@ export class AttributeDefinition implements Accessor {
     onAttributeChangedCallback(element: HTMLElement, value: any): void;
     readonly Owner: Function;
     setValue(source: HTMLElement, newValue: any): void;
-    }
+}
 
 // @public
 export type AttributeMode = "reflect" | "boolean" | "fromView";
@@ -467,14 +467,14 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
     // @internal (undocumented)
     handleChange(source: any, args: Splice[]): void;
     unbind(): void;
-    }
+}
 
 // @public
 export class RepeatDirective<TSource = any> extends HTMLDirective {
     constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
     createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource>;
     createPlaceholder: (index: number) => string;
-    }
+}
 
 // @public
 export interface RepeatOptions {
@@ -617,7 +617,7 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any> impl
     readonly directives: ReadonlyArray<HTMLDirective>;
     readonly html: string | HTMLTemplateElement;
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
-    }
+}
 
 // @public
 export function volatile(target: {}, name: string | Accessor, descriptor: PropertyDescriptor): PropertyDescriptor;
@@ -625,7 +625,6 @@ export function volatile(target: {}, name: string | Accessor, descriptor: Proper
 // @public
 export function when<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn>, templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index a01f2139ae4..e650709bc65 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -15,7 +15,9 @@
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
   },
   "scripts": {
-    "build": "tsc -b --clean src && tsc -b src",
+    "clean": "tsc -b --clean src",
+    "build": "tsc -b src",
+    "prepare": "yarn run clean && yarn run build",
     "build-server": "tsc -b server",
     "eslint": "eslint . --ext .ts",
     "eslint:fix": "eslint . --ext .ts --fix",
@@ -34,6 +36,7 @@
   "dependencies": {
     "@lit-labs/ssr": "^1.0.0-rc.2",
     "@microsoft/fast-element": "^1.5.0",
+    "parse5": "^6.0.1",
     "tslib": "^1.11.1"
   },
   "devDependencies": {
diff --git a/packages/web-components/fast-ssr/src/template-parser/attributes.ts b/packages/web-components/fast-ssr/src/template-parser/attributes.ts
new file mode 100644
index 00000000000..8e4f322a44a
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/template-parser/attributes.ts
@@ -0,0 +1,14 @@
+/**
+ * Extracts the attribute type from an attribute name
+ */
+export const attributeTypeRegExp = /([:?@])?(.*)/;
+
+/**
+ * The types of attributes applied in a template
+ */
+export enum AttributeType {
+    content,
+    booleanContent,
+    idl,
+    event,
+}
diff --git a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
new file mode 100644
index 00000000000..78caf4e25fc
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
@@ -0,0 +1,91 @@
+import { InlinableHTMLDirective } from "@microsoft/fast-element";
+import { AttributeType } from "./attributes.js";
+
+/**
+ * Allows fast identification of operation types
+ */
+export enum OpType {
+    customElementOpen,
+    customElementClose,
+    customElementAttributes,
+    customElementShadow,
+    attributeBinding,
+    directive,
+    text,
+}
+
+/**
+ * Operation to emit static text
+ */
+export type TextOp = {
+    type: OpType.text;
+    value: string;
+};
+
+/**
+ * Operation to open a custom element
+ */
+export type CustomElementOpenOp = {
+    type: OpType.customElementOpen;
+    /**
+     * The tagname of the custom element
+     */
+    tagName: string;
+
+    /**
+     * The constructor of the custom element
+     */
+    ctor: typeof HTMLElement;
+
+    /**
+     * Attributes of the custom element, non-inclusive of any attributes
+     * that are the product of bindings
+     */
+    staticAttributes: Map<string, string>;
+};
+
+/**
+ * Operation to close a custom element
+ */
+export type CustomElementCloseOp = {
+    type: OpType.customElementClose;
+};
+
+export type CustomElementShadowOp = {
+    type: OpType.customElementShadow;
+};
+
+/**
+ * Operation to emit static text
+ */
+export type DirectiveOp = {
+    type: OpType.directive;
+    directive: InlinableHTMLDirective;
+};
+
+/**
+ * Operation to emit a bound attribute
+ */
+export type AttributeBindingOp = {
+    type: OpType.attributeBinding;
+    directive: InlinableHTMLDirective;
+    name: string;
+    attributeType: AttributeType;
+    useCustomElementInstance: boolean;
+};
+
+/**
+ * Operation to emit to custom-element attributes
+ */
+export type CustomElementAttributes = {
+    type: OpType.customElementAttributes;
+};
+
+export type Op =
+    | AttributeBindingOp
+    | TextOp
+    | CustomElementOpenOp
+    | CustomElementCloseOp
+    | DirectiveOp
+    | CustomElementAttributes
+    | CustomElementShadowOp;
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
new file mode 100644
index 00000000000..1156c0f51c4
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
@@ -0,0 +1,97 @@
+
+import "@lit-labs/ssr/lib/install-global-dom-shim.js";
+import { test, expect } from "@playwright/test";
+import { parseTemplateToOpCodes} from "./template-parser.js";
+import { ViewTemplate, html, FASTElement, customElement, defaultExecutionContext } from "@microsoft/fast-element"
+import { Op, OpType, CustomElementOpenOp, AttributeBindingOp, DirectiveOp } from "./op-codes.js";
+import { AttributeType } from "./attributes.js";
+
+@customElement("hello-world")
+class HelloWorld extends FASTElement {}
+
+test.describe("parseTemplateToOpCodes", () => {
+    test("should throw when invoked with a ViewTemplate with a HTMLTemplateElement template", () => {
+        expect(() => {
+            parseTemplateToOpCodes(new ViewTemplate(document.createElement("template"), []));
+        }).toThrow();
+    });
+    test("should not throw when invoked with a ViewTemplate with a string template", () => {
+        expect(() => {
+            parseTemplateToOpCodes(new ViewTemplate("", []));
+        }).not.toThrow();
+    });
+
+    test("should emit a single text op for a template with no bindings or directives", () => {
+            expect(parseTemplateToOpCodes(html`<p>Hello world</p>`)).toEqual([{type: OpType.text, value: "<p>Hello world</p>"}])
+    });
+    test("should emit doctype, html, head, and body elements as part of text op", () => {
+        expect(parseTemplateToOpCodes(html`<!DOCTYPE html><html><head></head><body></body></html>`)).toEqual([{type: OpType.text, value: "<!DOCTYPE html><html><head></head><body></body></html>"}])
+    })
+    test("should emit a directive op from a binding", () => {
+            const input = html`${() => "hello world"}`;
+            expect(parseTemplateToOpCodes(input)).toEqual([{ type: OpType.directive, directive: input.directives[0]}])
+    });
+    test("should emit a directive op from text and a binding ", () => {
+            const input = html`Hello ${() => "World"}.`;
+
+            const codes = parseTemplateToOpCodes(input);
+            const code = codes[0] as DirectiveOp;
+            expect(codes.length).toBe(1);
+            expect(code.type).toBe(OpType.directive);
+            expect(code.directive.binding(null, defaultExecutionContext)).toBe("Hello World.")
+    });
+    test("should sandwich directive ops between text ops when binding native element content", () => {
+
+            const input = html`<p>${() => "hello world"}</p>`;
+            expect(parseTemplateToOpCodes(input)).toEqual([
+                    { type: OpType.text, value: "<p>"},
+                    { type: OpType.directive, directive: input.directives[0]},
+                    { type: OpType.text, value: "</p>"},
+            ])
+        });
+    test("should emit a custom element as text if it has not been defined", () => {
+        const input = html`<undefined-element test-attribute="test" test-bool></undefined-element>`;
+        expect(parseTemplateToOpCodes(input)).toEqual([{ type: OpType.text, value: "<undefined-element test-attribute=\"test\" test-bool></undefined-element>"}])
+    })
+
+    test("should emit custom element open, close, attribute, and shadow ops for a defined custom element", () => {
+        const input = html`<hello-world></hello-world>`;
+        expect(parseTemplateToOpCodes(input)).toEqual([
+            {type: OpType.customElementOpen, ctor: HelloWorld, tagName: "hello-world", staticAttributes: new Map()},
+            {type: OpType.text, value: "<hello-world"},
+            {type: OpType.customElementAttributes},
+            {type: OpType.text, value: ">"},
+            {type: OpType.customElementShadow},
+            {type: OpType.customElementClose},
+            {type: OpType.text, value: "</hello-world>"}
+        ])
+    });
+    test("should emit static attributes of a custom element custom element open, close, attribute, and shadow ops for a defined custom element", () => {
+        const input = html`<hello-world string-value="test" bool-value></hello-world>`;
+        const code = parseTemplateToOpCodes(input).find((op) => op.type ===OpType.customElementOpen) as CustomElementOpenOp | undefined ;
+        expect(code).not.toBeUndefined();
+        expect(code?.staticAttributes.get("string-value")).toBe("test");
+        expect(code?.staticAttributes.get("bool-value")).toBe("");
+        expect(code?.staticAttributes.size).toBe(2);
+    });
+    test("should emit attributes binding ops for a native element with attribute bindings", () => {
+        const input = html`<p string-value="${x => "value"}" ?bool-value="${x => false}" :property-value="${x => "value"}" @event="${x => {}}"></p>`;
+        const codes = parseTemplateToOpCodes(input).filter(x => x.type === OpType.attributeBinding) as AttributeBindingOp[];
+
+        expect(codes.length).toBe(4);
+        expect(codes[0].attributeType).toBe(AttributeType.content);
+        expect(codes[1].attributeType).toBe(AttributeType.booleanContent);
+        expect(codes[2].attributeType).toBe(AttributeType.idl);
+        expect(codes[3].attributeType).toBe(AttributeType.event);
+    });
+    test("should emit attributes binding ops for a custom element with attribute bindings", () => {
+        const input = html`<hello-world string-value="${x => "value"}" ?bool-value="${x => false}" :property-value="${x => "value"}" @event="${x => {}}"></hello-world>`;
+        const codes = parseTemplateToOpCodes(input).filter(x => x.type === OpType.attributeBinding) as AttributeBindingOp[];
+
+        expect(codes.length).toBe(4);
+        expect(codes[0].attributeType).toBe(AttributeType.content);
+        expect(codes[1].attributeType).toBe(AttributeType.booleanContent);
+        expect(codes[2].attributeType).toBe(AttributeType.idl);
+        expect(codes[3].attributeType).toBe(AttributeType.event);
+    });
+})
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
new file mode 100644
index 00000000000..83db03d85ab
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
@@ -0,0 +1,311 @@
+/**
+ * This code is largely a fork of lit's rendering implementation: https://github.com/lit/lit/blob/main/packages/labs/ssr/src/lib/render-lit-html.ts
+ * with changes as necessary to render FAST components. A big thank you to those who contributed to lit's code above.
+ */
+import { Parser, ViewTemplate } from "@microsoft/fast-element";
+import {
+    Attribute,
+    DefaultTreeCommentNode,
+    DefaultTreeElement,
+    DefaultTreeNode,
+    DefaultTreeParentNode,
+    DefaultTreeTextNode,
+    parseFragment,
+} from "parse5";
+import { AttributeType, attributeTypeRegExp } from "./attributes.js";
+import { Op, OpType } from "./op-codes.js";
+
+/**
+ * Cache the results of template parsing.
+ */
+const opCache: Map<ViewTemplate, Op[]> = new Map();
+
+interface Visitor {
+    visit?: (node: DefaultTreeNode) => void;
+    leave?: (node: DefaultTreeNode) => void;
+}
+
+declare module "parse5" {
+    interface DefaultTreeElement {
+        isDefinedCustomElement?: boolean;
+    }
+}
+
+/**
+ * Traverses a tree of nodes depth-first, invoking callbacks from visitor for each node as it goes.
+ * @param node - the node to traverse
+ * @param visitor - callbacks to be invoked during node traversal
+ */
+function traverse(node: DefaultTreeNode | DefaultTreeParentNode, visitor: Visitor) {
+    if (visitor.visit) {
+        visitor.visit(node);
+    }
+
+    if ("childNodes" in node) {
+        const { childNodes } = node;
+        for (const child of childNodes) {
+            traverse(child, visitor);
+        }
+    }
+
+    if (visitor.leave) {
+        visitor.leave(node);
+    }
+}
+
+/**
+ * Test if a node is a comment node.
+ * @param node - the node to test
+ */
+function isCommentNode(node: DefaultTreeNode): node is DefaultTreeCommentNode {
+    return node.nodeName === "#comment";
+}
+
+/**
+ * Test if a node is a text node.
+ * @param node - the node to test
+ */
+function isTextNode(node: DefaultTreeNode): node is DefaultTreeTextNode {
+    return node.nodeName === "#text";
+}
+
+/**
+ * Test if a node is an element node
+ * @param node - the node to test
+ */
+function isElementNode(node: DefaultTreeNode): node is DefaultTreeElement {
+    return (node as DefaultTreeElement).tagName !== undefined;
+}
+
+/**
+ * Determines which type of attribute binding an attribute is
+ * @param attr - The attribute to inspect
+ */
+function getAttributeType(attr: Attribute): AttributeType {
+    const result = attributeTypeRegExp.exec(attr.name);
+
+    if (result === null) {
+        throw new Error("Failure to determine attribute binding type");
+    }
+
+    const prefix = result[1];
+
+    return prefix === ":"
+        ? AttributeType.idl
+        : prefix === "?"
+        ? AttributeType.booleanContent
+        : prefix === "@"
+        ? AttributeType.event
+        : AttributeType.content;
+}
+
+/**
+ * Parses a template into a set of operation instructions
+ * @param template - The template to parse
+ */
+export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
+    const cached: Op[] | undefined = opCache.get(template);
+    if (cached !== undefined) {
+        return cached;
+    }
+
+    const { html } = template;
+
+    if (typeof html !== "string") {
+        throw new Error(
+            "@microsoft/fast-ssr only supports rendering a ViewTemplate with a string source."
+        );
+    }
+
+    /**
+     * Typescript thinks that `html` is a string | HTMLTemplateElement inside the functions defined
+     * below, so store in a new var that is just a string type
+     */
+    const templateString = html;
+    const nodeTree = parseFragment(html, { sourceCodeLocationInfo: true });
+
+    if (!("nodeName" in nodeTree)) {
+        // I'm not sure when exactly this is encountered but the type system seems to say it's possible.
+        throw new Error(`Error parsing template:\n${template}`);
+    }
+
+    /**
+     * Tracks the offset location in the source template string where the last
+     * flushing / skip took place.
+     */
+    let lastOffset: number | undefined = 0;
+
+    /**
+     * Collection of op codes
+     */
+    const opCodes: Op[] = [];
+    opCache.set(template, opCodes);
+
+    const { directives } = template;
+
+    /**
+     * Parses an Element node, pushing all op codes for the element into
+     * the collection of ops for the template
+     * @param node - The element node to parse
+     */
+    function parseElementNode(node: DefaultTreeElement): void {
+        // Track whether the opening tag of an element should be augmented.
+        // All constructable custom elements will need to be augmented,
+        // as well as any element with attribute bindings
+        let augmentOpeningTag = false;
+        const { tagName } = node;
+        let ctor: typeof HTMLElement | undefined;
+
+        // Sort attributes by whether they're related to a binding or if they have
+        // static value
+        const attributes: {
+            static: Map<string, string>;
+            dynamic: Attribute[];
+        } = node.attrs.reduce(
+            (prev, current) => {
+                if (Parser.parse(current.value, directives)) {
+                    prev.dynamic.push(current);
+                } else {
+                    prev.static.set(current.name, current.value);
+                }
+
+                return prev;
+            },
+            { static: new Map(), dynamic: [] as Attribute[] }
+        );
+
+        // Special processing for any custom element
+        if (node.tagName.includes("-")) {
+            ctor = customElements.get(tagName);
+
+            if (ctor !== undefined) {
+                augmentOpeningTag = true;
+                node.isDefinedCustomElement = true;
+                opCodes.push({
+                    type: OpType.customElementOpen,
+                    tagName,
+                    ctor,
+                    staticAttributes: attributes.static,
+                });
+            }
+        }
+
+        // Push attribute binding op codes for any attributes that
+        // are dynamic
+        if (attributes.dynamic.length) {
+            for (const attr of attributes.dynamic) {
+                const location = node.sourceCodeLocation!.attrs[attr.name];
+                flushTo(location.startOffset);
+                const attributeType = getAttributeType(attr);
+                const parsed = Parser.parse(attr.value, directives);
+
+                if (parsed !== null) {
+                    augmentOpeningTag = true;
+                    opCodes.push({
+                        type: OpType.attributeBinding,
+                        name: attr.name,
+                        directive: Parser.aggregate(parsed),
+                        attributeType,
+                        useCustomElementInstance: Boolean(node.isDefinedCustomElement),
+                    });
+                    skipTo(location.endOffset);
+                }
+            }
+        }
+
+        if (augmentOpeningTag) {
+            if (ctor) {
+                flushTo(node.sourceCodeLocation!.startTag.endOffset - 1);
+                opCodes.push({ type: OpType.customElementAttributes });
+                flush(">");
+                skipTo(node.sourceCodeLocation!.startTag.endOffset);
+            } else {
+                flushTo(node.sourceCodeLocation!.startTag.endOffset);
+            }
+        }
+
+        if (ctor !== undefined) {
+            opCodes.push({ type: OpType.customElementShadow });
+        }
+    }
+
+    /**
+     * Flushes a string value to op codes
+     * @param value - The value to flush
+     */
+    function flush(value: string): void {
+        const last = opCodes[opCodes.length - 1];
+        if (last?.type === OpType.text) {
+            last.value += value;
+        } else {
+            opCodes.push({ type: OpType.text, value });
+        }
+    }
+
+    /**
+     * Flush template content from lastIndex to provided offset
+     * @param offset - the offset to flush to
+     */
+    function flushTo(offset?: number) {
+        if (lastOffset === undefined) {
+            throw new Error(
+                `Cannot flush template content from a  last offset that is ${typeof lastOffset}.`
+            );
+        }
+
+        const prev = lastOffset;
+        lastOffset = offset;
+        const value = templateString.substring(prev, offset);
+
+        if (value !== "") {
+            flush(value);
+        }
+    }
+
+    function skipTo(offset: number) {
+        if (lastOffset === undefined) {
+            throw new Error("Could not skip from an undefined offset");
+        }
+        if (offset < lastOffset) {
+            throw new Error(`offset must be greater than lastOffset.
+                offset: ${offset}
+                lastOffset: ${lastOffset}
+            `);
+        }
+
+        lastOffset = offset;
+    }
+
+    traverse(nodeTree, {
+        visit(node: DefaultTreeNode): void {
+            if (isCommentNode(node) || isTextNode(node)) {
+                const value =
+                    (node as DefaultTreeCommentNode).data ||
+                    (node as DefaultTreeTextNode).value;
+                const parsed = Parser.parse(value, directives);
+
+                if (parsed) {
+                    flushTo(node.sourceCodeLocation!.startOffset);
+                    opCodes.push({
+                        type: OpType.directive,
+                        directive: Parser.aggregate(parsed),
+                    });
+                    skipTo(node.sourceCodeLocation!.endOffset);
+                }
+            } else if (isElementNode(node)) {
+                parseElementNode(node);
+            }
+        },
+
+        leave(node: DefaultTreeNode): void {
+            if (isElementNode(node) && node.isDefinedCustomElement) {
+                opCodes.push({ type: OpType.customElementClose });
+            }
+        },
+    });
+
+    // Flush the remaining string content before returning op codes.
+    flushTo();
+
+    return opCodes;
+}
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
new file mode 100644
index 00000000000..2d2ccc77056
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from "@playwright/test";
+import { TemplateRenderer } from "./template-renderer.js";
+import { template } from "@babel/core";
+
+test.describe("TemplateRenderer", () => {
+    test.describe("should have an initial configuration", () => {
+        test("that emits to shadow DOM", () => {
+            const instance = new TemplateRenderer();
+            expect(instance.componentDOMEmissionMode).toBe("shadow")
+        });
+    });
+
+    test.describe("should allow configuration", () => {
+        test("that emits to light DOM", () => {
+            const instance = new TemplateRenderer({componentDOMEmissionMode: "light"});
+            expect(instance.componentDOMEmissionMode).toBe("light")
+        });
+    });
+});
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
new file mode 100644
index 00000000000..cc866d94f7c
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
@@ -0,0 +1,36 @@
+import { ViewTemplate } from "@microsoft/fast-element";
+import { RenderInfo } from "@lit-labs/ssr";
+
+export type ComponentDOMEmissionMode = "shadow" | "light";
+export interface TemplateRendererConfiguration {
+    /**
+     * Controls whether the template renderer should emit component template code to the component's shadow DOM or to its light DOM.
+     */
+    componentDOMEmissionMode: ComponentDOMEmissionMode;
+}
+
+export class TemplateRenderer implements Readonly<TemplateRendererConfiguration> {
+    /**
+     * {@inheritDoc TemplateRendererConfiguration.componentDOMEmissionMode}
+     */
+    public readonly componentDOMEmissionMode: ComponentDOMEmissionMode = "shadow";
+    constructor(config?: TemplateRendererConfiguration) {
+        if (config) {
+            Object.assign(this, config);
+        }
+    }
+
+    /**
+     *
+     * @param template - The template to render.
+     * @param renderInfo - Information about the rendering context.
+     * @param source - Any source data to render the template and evaluate bindings with.
+     */
+    public *render(
+        template: ViewTemplate,
+        renderInfo: RenderInfo,
+        source?: unknown
+    ): IterableIterator<string> {
+        yield "";
+    }
+}

From b29a74818167cd8e2223c625b31a95f7a8a4b6be Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 1 Mar 2022 13:38:16 -0800
Subject: [PATCH 078/135] Added specification for a FAST CLI and project
 initialization package (#5669)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This specification is based on the need for FAST to have a CLI for accelerating workflows and provide an easy way to initialize a project.

### 🎫 Issues

<!---
* List and link relevant issues here.
-->
Related to https://github.com/microsoft/fast/issues/5578

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->
I believe some work has been done on this already but the priorities have shifted around, this is my interpretation for what the requirements are and what generally the goals should be. Please give this a thorough read and determine if this captures all requirements, an MVP roadmap is included at the bottom. This is targeting the feature branch including FAST element 2.0 and the server side rendering work as I believe these are related.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [ ] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
---
 specs/fast-cli.md | 164 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100644 specs/fast-cli.md

diff --git a/specs/fast-cli.md b/specs/fast-cli.md
new file mode 100644
index 00000000000..5ff4184cce2
--- /dev/null
+++ b/specs/fast-cli.md
@@ -0,0 +1,164 @@
+- [Abstract](#abstract)
+- [Use Cases](#use-cases)
+- [Requirements](#requirements)
+    - [Configuration](#configuration)
+        - [Project Type](#project-type)
+            - [Application](#application)
+            - [Component Library](#component-library)
+            - [Non-Specific Project Type Options](#non-specific-project-type-options)
+    - [Command Line](#command-line)
+        - [Initialization](#initialization)
+        - [Adding A Component](#adding-a-component)
+            - [Adding A Foundation Based Component](#adding-a-foundation-based-component)
+    - [Structure](#structure)
+        - [Create FAST Project Package](#create-fast-project-package)
+        - [FAST CLI Package](#fast-cli-package)
+    - [Dependencies](#dependencies)
+- [Implementation](#implementation)
+- [Documentation](#documentation)
+    - [System Requirements](#system-requirements)
+    - [Use Of The CLI](#use-of-the-cli)
+    - [How To Create Templates](#how-to-create-templates)
+- [Maintenance](#maintenance)
+    - [Testing](#testing)
+- [Roadmap](#roadmap)
+    - [MVP](#mvp)
+
+## Abstract
+
+This specification describes a CLI used for the creation and running of FAST based applications and component libraries called `@microsoft/fast-cli`, as well as a package leveraging the CLI and allowing `npm` to initialize it called `@microsoft/create-fast-project`. The CLI is intended to accelerate user workflows when using FAST, and the initialization package is intended to assist in a quick setup for projects such as applications and component libraries.
+
+## Use Cases
+
+**Creating a prototype**: Bob is a hobbyist illustrator and wants to create a FAST web component based application quickly to prototype a website for his work. He knows how to write HTML, CSS, and some JavaScript, but does not want to get bogged down with testing or type checking.
+
+**Creating a production application**: April is a developer who has been tasked with creating an application that must run efficiently and is maintainable. She wants a quick setup of an application for a production environment which should include type checking, testing and server side rendering.
+
+**Creating a component library**: Wilhelm is a UI developer, he wants to create a library of FAST web components for his company to use in their application. His companys current application has mismatched design concepts, so he has also been developing a design system and wants the components he creates to conform to it.
+
+## Requirements
+
+### Configuration
+
+The configuration of the project will occur during the setup using `npm init @microsoft/fast-project ./my-project` see [`npm init` documentation](https://docs.npmjs.com/cli/v6/commands/npm-init). This requires the user has npm >=6.0.0. Certain CLI commands can be used depending on the configuration, such as adding boilerplate components with `fast add --component`. The following configuration options will be determined during initialization.
+
+#### Project Type
+
+There will be two project types, `application` and `component-library`. When this is specified, this will allow the CLI to make assumptions about the project. The projects structure will change based on what type of project this is, additionally `webpack` will be added and configured if the project is an application.
+
+##### Application
+
+**Server Side Rendering**
+
+This option will enable SSR (Server Side Rendering).
+
+**End to End Testing**
+
+A user may want some end to end tests. These tests will be scaffolded in Playwright. The will conform to a `*.spec.pw.ts` or `*.spec.pw.js` file name to avoid conflict with unit tests.
+
+An `npm` script will be added `test:e2e`.
+The `npm` script `test` will include this script.
+
+##### Component Library
+
+**Design Tokens**
+
+Design tokens can be added, which will initialize an example design token and integrate it with the first example component.
+
+#### Non-Specific Project Type Options
+
+**Type Checking**
+
+The user will have the option of plain JavaScript of TypeScript. This will facilitate production and prototyping experiences. It will also be more friendly to users who may not be familiar with TypeScript.
+
+Should you use TypeScript, a `npm` script will be added `build:tsc` which will build your project using the TypeScript compiler. If you choose to use JavaScript, further options with `babeljs` will be used to compile the project.
+
+**Manual Component Testing**
+
+Components are often manually tested during the process of component creation which can involve a lot of back and forth to check the component in the browser. For this reason there will be an option to add storybook.
+
+An `npm` script will be added `start:storybook`.
+
+**Unit Testing**
+
+This option will set up Mocha and Chai and when new components are added via the CLI they will create a `*.spec.ts` or `*.spec.js` file.
+
+An `npm` script will be added `test:unit-test`.
+The `npm` script `test` will include this script.
+
+**Linting**
+
+Another more production level feature is linting. We can offer the user configuration and setup for `eslint`.
+
+An `npm` script will be added `eslint`.
+The `npm` script `test` will include this script.
+
+### Command Line
+
+#### Initialization
+
+The first step in configuration is initializing the project, which will create the configuration file for FAST. This will be done via the `npm init @microsoft/fast-project ./my-project`. The `<initializer>` in this instance is `fast-project` which transforms if one were to use `npx` into `create-fast-project`, so the `npx` command becomes `npx @microsoft/create-fast-project`. `npm` will assume that `create-` is to be prepended to the unscoped name of the package.
+
+#### Adding A Component
+
+Adding a component should be performed using the CLI with `fast add --component` which will create scaffolding of the template, styles, class, and any testing or other files based on the FAST configuration file.
+
+##### Adding A Foundation Based Component
+
+Adding a component based on a `@microsoft/fast-foundation` component should be performed using the CLI with `fast add --component --foundation=button`.
+
+### Structure
+
+There should be two packages which enable this project, `@microsoft/create-fast-project` and `@microsoft/fast-cli`. One is for setting up the project via `npm init` and templates, the other is a CLI for additional commands.
+
+#### Create FAST Project Package
+
+The `@microsoft/create-fast-project` package will interact with `npm init`. It will assume that `npm init` is running it and setup all the options via the `@microsof/fast-cli` as specified in the requirements.
+
+#### FAST CLI Package
+
+The `@microsoft/fast-cli` package should be as lightweight as possible, it should also rely on the configuration file for details about how the project has been setup. In this way, if a user were to retro-fit an existing repository to use the CLI as part of their process this would be possible. An example of this is already having a production application, but needing configuration details to use SSR (Server Side Rendering).
+
+### Dependencies
+
+Dependencies are necessary for the following requirements:
+- Command line arguments
+- Colorization of terminal text
+
+## Documentation
+
+Documentation will be required for users and for maintainers. Since this model is plug and play with templates, the documentation must also cover this scenario.
+
+### System Requirements
+
+There should be a list of system requirements for using `@microsoft/fast-cli` and `@microsoft/create-fast-project`. These should primarily be focused on `npm` and NodeJS versions.
+
+### Use Of The CLI
+
+The commands available should be documentated as well as a step-by-step getting started page for all the project types. There should be a dictionary of commands available in a side bar for easy access, though the commands and their documentation may exist on a single page. They may need to be tagged with which project type they can be executed on, additionally documentation may exist in the code, providing users with warnings when they attempt to use commands for a different project type than the one they are configured for.
+
+### How To Create Templates
+
+A few templates will be shipped as defaults with the package, however in future there may be other template creators who will want to specify their own templates instead of the defaults.
+
+**TBD**: Add user stories for template creation.
+
+## Maintenance
+
+As with all projects, this one must undergo maintenance when changes occur in any of the dependencies. There should be a document categorizing what dependencies may need to be updated in future as well as a build script which issue warnings when dependencies go out of date for major versions.
+
+### Testing
+
+This project should have unit tests for:
+- Initialization
+- All configuration options
+- Running the projects test script after intializing a project to ensure FAST does not break the initialized project
+
+## Roadmap
+
+### MVP
+
+- Ability to generate a new application based on a default template
+- One template to start
+- TypeScript/JavaScript option
+- SSR option

From 3622ca02148344a18f9ba4f2126bab2b981250f6 Mon Sep 17 00:00:00 2001
From: William Wagner <44823142+williamw2@users.noreply.github.com>
Date: Mon, 7 Mar 2022 10:08:34 -0800
Subject: [PATCH 079/135] Add fast command buffer (#5708)

---
 .../web-components/fast-ssr/server/server.ts  |  89 ++---
 .../fast-command-buffer/index.fixture.html    | 306 ++++++++++++++++++
 .../fast-ssr/src/fast-command-buffer/index.ts | 149 +++++++++
 3 files changed, 502 insertions(+), 42 deletions(-)
 create mode 100644 packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html
 create mode 100644 packages/web-components/fast-ssr/src/fast-command-buffer/index.ts

diff --git a/packages/web-components/fast-ssr/server/server.ts b/packages/web-components/fast-ssr/server/server.ts
index 0507d622326..b83fdc77a57 100644
--- a/packages/web-components/fast-ssr/server/server.ts
+++ b/packages/web-components/fast-ssr/server/server.ts
@@ -23,50 +23,55 @@ function handleRequest(req: Request, res: Response) {
     });
 }
 
-function handleStyleRequest(req: Request, res: Response) {
-    res.set("Content-Type", "text/html");
-    fs.readFile(
-        path.resolve(__dirname, "./src/fast-style/index.fixture.html"),
-        { encoding: "utf8" },
-        (err, data) => {
-            const stream = (Readable as any).from(data);
-            stream.on("readable", function (this: any) {
-                while ((data = this.read())) {
-                    res.write(data);
-                }
-            });
-            stream.on("close", () => res.end());
-            stream.on("error", (e: Error) => {
-                console.error(e);
-                process.exit(1);
-            });
-        }
-    );
-}
-
-function handleStyleScriptRequest(req: Request, res: Response) {
-    res.set("Content-Type", "application/javascript");
-    fs.readFile(
-        path.resolve(__dirname, "./dist/esm/fast-style/index.js"),
-        { encoding: "utf8" },
-        (err, data) => {
-            const stream = (Readable as any).from(data);
-            stream.on("readable", function (this: any) {
-                while ((data = this.read())) {
-                    res.write(data);
-                }
-            });
-            stream.on("close", () => res.end());
-            stream.on("error", (e: Error) => {
-                console.error(e);
-                process.exit(1);
-            });
-        }
-    );
+function handlePathRequest(
+    mapPath: string,
+    contentType: string,
+    req: Request,
+    res: Response
+) {
+    res.set("Content-Type", contentType);
+    fs.readFile(path.resolve(__dirname, mapPath), { encoding: "utf8" }, (err, data) => {
+        const stream = (Readable as any).from(data);
+        stream.on("readable", function (this: any) {
+            while ((data = this.read())) {
+                res.write(data);
+            }
+        });
+        stream.on("close", () => res.end());
+        stream.on("error", (e: Error) => {
+            console.error(e);
+            process.exit(1);
+        });
+    });
 }
 
 const app = express();
 app.get("/", handleRequest);
-app.get("/fast-style", handleStyleRequest);
-app.get("/fast-style.js", handleStyleScriptRequest);
+app.get("/fast-style", (req: Request, res: Response) =>
+    handlePathRequest("./src/fast-style/index.fixture.html", "text/html", req, res)
+);
+app.get("/fast-style.js", (req: Request, res: Response) =>
+    handlePathRequest(
+        "./dist/esm/fast-style/index.js",
+        "application/javascript",
+        req,
+        res
+    )
+);
+app.get("/fast-command-buffer", (req: Request, res: Response) =>
+    handlePathRequest(
+        "./src/fast-command-buffer/index.fixture.html",
+        "text/html",
+        req,
+        res
+    )
+);
+app.get("/fast-command-buffer.js", (req: Request, res: Response) =>
+    handlePathRequest(
+        "./dist/esm/fast-command-buffer/index.js",
+        "application/javascript",
+        req,
+        res
+    )
+);
 app.listen(PORT);
diff --git a/packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html b/packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html
new file mode 100644
index 00000000000..641b897e4db
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8" />
+        <title></title>
+    </head>
+
+    <body
+        style="
+            background-color: var(--fill-color);
+            --body-font: aktiv-grotesk, 'Segoe UI', Arial, Helvetica, sans-serif;
+            --base-height-multiplier: 10;
+            --base-horizontal-spacing-multiplier: 3;
+            --control-corner-radius: 4;
+            --density: 0;
+            --design-unit: 4;
+            --direction: ltr;
+            --disabled-opacity: 0.3;
+            --stroke-width: 1;
+            --focus-stroke-width: 2;
+            --type-ramp-base-font-size: 14px;
+            --type-ramp-base-line-height: 20px;
+            --type-ramp-minus-1-font-size: 12px;
+            --type-ramp-minus-1-line-height: 16px;
+            --type-ramp-minus-2-font-size: 10px;
+            --type-ramp-minus-2-line-height: 16px;
+            --type-ramp-plus-1-font-size: 16px;
+            --type-ramp-plus-1-line-height: 24px;
+            --type-ramp-plus-2-font-size: 20px;
+            --type-ramp-plus-2-line-height: 28px;
+            --type-ramp-plus-3-font-size: 28px;
+            --type-ramp-plus-3-line-height: 36px;
+            --type-ramp-plus-4-font-size: 34px;
+            --type-ramp-plus-4-line-height: 44px;
+            --type-ramp-plus-5-font-size: 46px;
+            --type-ramp-plus-5-line-height: 56px;
+            --type-ramp-plus-6-font-size: 60px;
+            --type-ramp-plus-6-line-height: 72px;
+            --accent-fill-rest-delta: 0;
+            --accent-fill-hover-delta: 4;
+            --accent-fill-active-delta: -5;
+            --accent-fill-focus-delta: 0;
+            --accent-foreground-rest-delta: 0;
+            --accent-foreground-hover-delta: 6;
+            --accent-foreground-active-delta: -4;
+            --accent-foreground-focus-delta: 0;
+            --neutral-fill-rest-delta: 7;
+            --neutral-fill-hover-delta: 10;
+            --neutral-fill-active-delta: 5;
+            --neutral-fill-focus-delta: 0;
+            --neutral-fill-input-rest-delta: 0;
+            --neutral-fill-input-hover-delta: 0;
+            --neutral-fill-input-active-delta: 0;
+            --neutral-fill-input-focus-delta: 0;
+            --neutral-fill-stealth-rest-delta: 0;
+            --neutral-fill-stealth-hover-delta: 5;
+            --neutral-fill-stealth-active-delta: 3;
+            --neutral-fill-stealth-focus-delta: 0;
+            --neutral-fill-strong-rest-delta: 0;
+            --neutral-fill-strong-hover-delta: 8;
+            --neutral-fill-strong-active-delta: -5;
+            --neutral-fill-strong-focus-delta: 0;
+            --neutral-fill-layer-rest-delta: 3;
+            --neutral-stroke-rest-delta: 25;
+            --neutral-stroke-hover-delta: 40;
+            --neutral-stroke-active-delta: 16;
+            --neutral-stroke-focus-delta: 25;
+            --neutral-stroke-divider-rest-delta: 8;
+            --base-layer-luminance: 0.1;
+            --neutral-layer-card-container: #101010;
+            --neutral-layer-floating: #292929;
+            --neutral-layer-1: #181818;
+            --neutral-layer-2: #101010;
+            --neutral-layer-3: #000000;
+            --neutral-layer-4: #000000;
+            --fill-color: #1a1a1a;
+            --accent-fill-rest: #c01754;
+            --accent-fill-hover: #da1a5f;
+            --accent-fill-active: #a01346;
+            --accent-fill-focus: #c01754;
+            --accent-foreground-rest: #e1477e;
+            --accent-foreground-hover: #e55e8e;
+            --accent-foreground-active: #df3874;
+            --accent-foreground-focus: #e1477e;
+            --neutral-fill-rest: #2b2b2b;
+            --neutral-fill-hover: #333333;
+            --neutral-fill-active: #262626;
+            --neutral-fill-focus: #181818;
+            --neutral-fill-input-rest: #181818;
+            --neutral-fill-input-hover: #181818;
+            --neutral-fill-input-active: #181818;
+            --neutral-fill-input-focus: #181818;
+            --neutral-fill-stealth-rest: #181818;
+            --neutral-fill-stealth-hover: #262626;
+            --neutral-fill-stealth-active: #212121;
+            --neutral-fill-stealth-focus: #181818;
+            --neutral-fill-strong-rest: #828282;
+            --neutral-fill-strong-hover: #979797;
+            --neutral-fill-strong-active: #757575;
+            --neutral-fill-strong-focus: #828282;
+            --neutral-fill-layer-rest: #212121;
+            --focus-stroke-outer: #707070;
+            --focus-stroke-inner: #350617;
+            --neutral-foreground-hint: #828282;
+            --neutral-foreground-rest: #e8e8e8;
+            --neutral-stroke-rest: #595959;
+            --neutral-stroke-hover: #808080;
+            --neutral-stroke-active: #424242;
+            --neutral-stroke-focus: #595959;
+            --neutral-stroke-divider-rest: #2e2e2e;
+            --tree-item-expand-collapse-hover: #333333;
+            --tree-item-expand-collapse-selected-hover: #383838;
+            --foreground-on-accent-rest: #ffffff;
+            --foreground-on-accent-rest-large: #000000;
+            --foreground-on-accent-hover: #ffffff;
+            --foreground-on-accent-hover-large: #000000;
+            --foreground-on-accent-active: #ffffff;
+            --foreground-on-accent-active-large: #ffffff;
+            --foreground-on-accent-focus: #ffffff;
+            --foreground-on-accent-focus-large: #000000;
+        "
+    >
+        <script type="module" src="/fast-style.js"></script>
+        <script type="module" src="/fast-command-buffer.js"></script>
+
+        <div style="display: flex;">
+            <fast-card style="width: 300px;">
+                <!-- shadowroots must remain open for testing contained elements -->
+                <template shadowroot="open">
+                    <fast-command-buffer></fast-command-buffer>
+                    <fast-style
+                        data-style-id="fast-card"
+                        css=":host {
+                    --elevation: 4;
+                    display: block;
+                    contain: content;
+                    height: var(--card-height, 100%);
+                    width: var(--card-width, 100%);
+                    box-sizing: border-box;
+                    background: var(--fill-color);
+                    border-radius: calc(var(--control-corner-radius) * 1px);
+                    box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(0.11 * (2 - var(--background-luminance, 1)))), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(0.13 * (2 - var(--background-luminance, 1))));}"
+                    ></fast-style>
+                    <img src="https://via.placeholder.com/300x200/414141" />
+                    <div
+                        style="
+                            padding: 0 10px 10px;
+                            color: var(--neutral-foreground-rest);
+                        "
+                    >
+                        <h2>Heading</h2>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                            scelerisque.Maecenas in velit vehicula, aliquet orci et,
+                            consequat purus. Donec egetsodales lectus, vel sollicitudin
+                            ligula. Suspendisse volutpat auctor diam,vel mattis lorem
+                            venenatis in.
+                        </p>
+                        <fast-button>
+                            <template shadowroot="open">
+                                <fast-command-buffer></fast-command-buffer>
+                                <fast-style
+                                    data-style-id="fast-button"
+                                    css=":host {
+                                font-family: var(--body-font);
+                                outline: none;
+                                font-size: var(--type-ramp-base-font-size);
+                                line-height: var(--type-ramp-base-line-height);
+                                height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
+                                min-width: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
+                                background-color: var(--neutral-fill-rest);
+                                color: var(--neutral-foreground-rest);
+                                border-radius: calc(var(--control-corner-radius) * 1px);
+                                fill: currentcolor;
+                                cursor: pointer;
+                            }
+                            .control {
+                                background: transparent;
+                                background: red;
+                                height: inherit;
+                                flex-grow: 1;
+                                box-sizing: border-box;
+                                display: inline-flex;
+                                justify-content: center;
+                                align-items: center;
+                                padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
+                                white-space: nowrap;
+                                outline: none;
+                                text-decoration: none;
+                                border: calc(var(--stroke-width) * 1px) solid transparent;
+                                color: inherit;
+                                border-radius: inherit;
+                                fill: inherit;
+                                cursor: inherit;
+                                font-family: inherit;
+                                font-size: inherit;
+                                line-height: inherit;
+                            }"
+                                ></fast-style>
+                                <button
+                                    class="control"
+                                    fast-id="button1"
+                                    data-fast-buffer-events="click"
+                                >
+                                    <span>
+                                        Button
+                                    </span>
+                                </button>
+                                <fake-hydrate-button class="fakeHydrateBtn">
+                                    Fake hydrate
+                                </fake-hydrate-button>
+                            </template>
+                        </fast-button>
+                    </div>
+                </template>
+            </fast-card>
+            <fast-card style="width: 300px;">
+                <template shadowroot="open">
+                    <fast-command-buffer></fast-command-buffer>
+                    <fast-style data-style-id="fast-card"></fast-style>
+                    <img src="https://via.placeholder.com/300x200/414141" />
+                    <div
+                        style="
+                            padding: 0 10px 10px;
+                            color: var(--neutral-foreground-rest);
+                        "
+                    >
+                        <h2>Heading</h2>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                            scelerisque.Maecenas in velit vehicula, aliquet orci et,
+                            consequat purus. Donec egetsodales lectus, vel sollicitudin
+                            ligula. Suspendisse volutpat auctor diam,vel mattis lorem
+                            venenatis in.
+                        </p>
+                        <fast-button>
+                            <template shadowroot="open">
+                                <fast-command-buffer></fast-command-buffer>
+                                <fast-style data-style-id="fast-button"></fast-style>
+                                <button
+                                    class="control"
+                                    fast-id="button2"
+                                    data-fast-buffer-events="click,mouseover"
+                                >
+                                    <span>
+                                        Button
+                                    </span>
+                                </button>
+                                <fake-hydrate-button class="fakeHydrateBtn">
+                                    Fake hydrate
+                                </fake-hydrate-button>
+                            </template>
+                        </fast-button>
+                    </div>
+                </template>
+            </fast-card>
+        </div>
+        <br />
+        <button id="replayBtn">Replay</button>
+        <textarea id="ReplayReadout"></textarea>
+        <script type="module">
+            import {
+                FASTCommandBuffer,
+                FASTCommandBufferAttributeName,
+            } from "/fast-command-buffer.js";
+            document.getElementById("replayBtn").addEventListener("click", ev => {
+                FASTCommandBuffer.replayAll();
+            });
+
+            class FakeHydrateButton extends HTMLElement {
+                connectedCallback() {
+                    this.addEventListener("click", this.fakeHydrate);
+                }
+
+                fakeHydrate() {
+                    var commandbuffer = this.parentNode.querySelectorAll(
+                        "fast-command-buffer"
+                    )[0];
+                    commandbuffer.stopRecording();
+                    var elements = this.parentNode.querySelectorAll(
+                        `[${FASTCommandBufferAttributeName}]`
+                    );
+                    elements.forEach(el => {
+                        var fastId = el.getAttribute("fast-id") || "";
+                        if (fastId !== "") {
+                            var eventlist = el
+                                .getAttribute(FASTCommandBufferAttributeName)
+                                .split(",");
+                            eventlist.forEach(ev => {
+                                el.addEventListener(ev, ev => {
+                                    var id = ev.currentTarget.getAttribute("fast-id");
+                                    document.getElementById("ReplayReadout").value +=
+                                        id + " " + ev.type + "\n";
+                                });
+                            });
+                            FASTCommandBuffer.attachElementToEvents(el, el);
+                        }
+                    });
+                }
+            }
+            customElements.define("fake-hydrate-button", FakeHydrateButton);
+        </script>
+    </body>
+</html>
diff --git a/packages/web-components/fast-ssr/src/fast-command-buffer/index.ts b/packages/web-components/fast-ssr/src/fast-command-buffer/index.ts
new file mode 100644
index 00000000000..a44beeb69f1
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/fast-command-buffer/index.ts
@@ -0,0 +1,149 @@
+const FASTCommandBufferAttributeName: string = "data-fast-buffer-events";
+
+interface CommandCache {
+    originalNode: HTMLElement;
+    event: Event;
+    attachedNode: HTMLElement | null;
+}
+
+/**
+ * Component for recording user events on SSR rendered FAST components which have not yet hydrated and replaying those
+ * events when they have.
+ * During SSR an instance of the <fast-command-buffer/> component should be placed as a direct child within every template
+ * that contains children with behaviors bound to user generated events (click, mouseover, focus, etc). When those child element
+ * tags are rendered FASTCommandBufferAttributeName attribute must be included that lists the events which the element needs to
+ * have recorded as a comma delimited list (i.e. <button data-fast-buffer-events="click,mousedown,mouseup"/>).
+ * Once the page loads the FASTCommandBuffer instances will automatically attach event listeners to the elements with the
+ * FASTCommandBufferAttributeName for the events listed and will record any user generated events to a global static cache.
+ * During hydration of the components FAST-Element will need to stop event recording by removing the FASTCommandBuffer element from
+ * the template or by calling the stopRecording() method. FAST-Element must then identify any elements with behaviors and depending on how the
+ * hydration occurs either map the old element to a new replacing element or confirm to the FASTCommandCache that the element is
+ * the same by calling the FASTCommandBuffer.attachElementToEvents() static method. Once all elements that have recorded events are
+ * matched up then they will be automatically replayed.
+ */
+class FASTCommandBuffer extends HTMLElement {
+    // Global static cache of recorded events
+    private static globalCommandCache: CommandCache[] = [];
+
+    /**
+     * During hydration the original elements with recordable events must be matched up to
+     * the new element, in the case the template is replaced, or simply to the same element
+     * when not being replaced. The hydration process should call this method passing the
+     * original element instance along with the element that is replacing it. All recorded
+     * events will be automatically replayed once all recorded events have had elements
+     * attached.
+     * @param origNode The original element that recorded events.
+     * @param attachNode The new element replacing it or the same element.
+     */
+    public static attachElementToEvents(origNode: HTMLElement, attachNode: HTMLElement) {
+        let unattachedNodes: boolean = false;
+        // Loop through the command cache matching up the elements.
+        FASTCommandBuffer.globalCommandCache.forEach((item: CommandCache) => {
+            if (item.originalNode.isSameNode(origNode)) {
+                item.attachedNode = attachNode;
+            } else if (item.attachedNode === null) {
+                unattachedNodes = true;
+            }
+        });
+        // if all recorded events have been matched then replay the events.
+        if (!unattachedNodes) {
+            FASTCommandBuffer.replayAll();
+        }
+    }
+
+    // Static method for manually replaying events
+    public static replayAll(): void {
+        /**
+         * Loop through cache, replay the event and remove it from the cache.
+         * Loop until we reach the end or there is an event without an attachedNode since there
+         * is a chance that more events could be recorded while we are looping.
+         */
+        while (
+            this.globalCommandCache.length > 0 &&
+            this.globalCommandCache[0].attachedNode !== null
+        ) {
+            this.globalCommandCache[0].attachedNode.dispatchEvent(
+                this.globalCommandCache[0].event
+            );
+            this.globalCommandCache.splice(0, 1);
+        }
+    }
+
+    /**
+     * Cache for the Template element containing the FASTCommandCache instance. Needed when removing event recorders
+     * during disconnectedCallback.
+     */
+    private templateRoot: ShadowRoot | undefined;
+
+    /**
+     * @internal
+     */
+    public connectedCallback(): void {
+        this.templateRoot = this.parentNode as ShadowRoot;
+        this.addEventRecorders();
+    }
+
+    public disconnectedCallback(): void {
+        // Remove recording event listeners
+        this.removeEventRecorders();
+    }
+
+    /**
+     * Records an event to the globalCommandCache.
+     * @param ev The event to be recorded.
+     */
+    public recordEvent(ev: Event) {
+        FASTCommandBuffer.globalCommandCache.push({
+            originalNode: ev.currentTarget as HTMLElement,
+            event: ev,
+            attachedNode: null,
+        });
+    }
+
+    /**
+     * Remove recording event listeners from the template containing this FASTCommandBuffer instance.
+     * Events will no longer be recorded within this template after this is called.
+     */
+    public stopRecording(): void {
+        this.removeEventRecorders();
+    }
+
+    /**
+     * Find all instances of elements with the FASTCommandBufferAttributeName attribute and attach the
+     * recording event listeners for the specified events.
+     */
+    private addEventRecorders() {
+        const elements: NodeListOf<Element> = this.templateRoot!.querySelectorAll(
+            `[${FASTCommandBufferAttributeName}]`
+        );
+        elements.forEach((el: Element) => {
+            const eventlist: string[] = el
+                .getAttribute(FASTCommandBufferAttributeName)!
+                .split(",");
+            eventlist.forEach((ev: string) => {
+                el.addEventListener(ev.trim(), this.recordEvent);
+            });
+        });
+    }
+
+    /**
+     * Find all instances of elements with the FASTCommandBufferAttributeName attribute and remove the
+     * recording event listeners for the specified events.
+     */
+    private removeEventRecorders() {
+        const elements: NodeListOf<Element> = this.templateRoot!.querySelectorAll(
+            `[${FASTCommandBufferAttributeName}]`
+        );
+        elements.forEach((el: Element) => {
+            const eventlist: string[] = el
+                .getAttribute(FASTCommandBufferAttributeName)!
+                .split(",");
+            eventlist.forEach(ev => {
+                el.removeEventListener(ev.trim(), this.recordEvent);
+            });
+        });
+    }
+}
+
+customElements.define("fast-command-buffer", FASTCommandBuffer);
+export { FASTCommandBuffer, FASTCommandBufferAttributeName };

From b95a4186dc5c05be66a5fcb84c8ba20a5e25689f Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Mon, 7 Mar 2022 12:59:32 -0800
Subject: [PATCH 080/135] Adds TemplateOp to SSR template parser (#5706)

* adding template element open and close ops

* emit template open and close codes from template parser

* fleshes out template op emission

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 .../fast-ssr/src/template-parser/op-codes.ts  | 26 +++++-
 .../template-parser/template-parser.spec.ts   | 62 ++++++++++++-
 .../src/template-parser/template-parser.ts    | 90 +++++++++++--------
 3 files changed, 136 insertions(+), 42 deletions(-)

diff --git a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
index 78caf4e25fc..669711ca992 100644
--- a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
@@ -11,6 +11,8 @@ export enum OpType {
     customElementShadow,
     attributeBinding,
     directive,
+    templateElementOpen,
+    templateElementClose,
     text,
 }
 
@@ -74,6 +76,24 @@ export type AttributeBindingOp = {
     useCustomElementInstance: boolean;
 };
 
+/**
+ * Operation to emit a template element open tag
+ */
+export type TemplateElementOpenOp = {
+    type: OpType.templateElementOpen;
+    staticAttributes: Map<string, string>;
+    // We need dynamic attributes here so we can emit the `<template`, all attributes, and then `>`
+    // from one operation
+    dynamicAttributes: Pick<AttributeBindingOp, "name" | "attributeType" | "directive">[];
+};
+
+/**
+ * Operation to emit a template element closing tag
+ */
+export type TemplateElementCloseOp = {
+    type: OpType.templateElementClose;
+};
+
 /**
  * Operation to emit to custom-element attributes
  */
@@ -83,9 +103,11 @@ export type CustomElementAttributes = {
 
 export type Op =
     | AttributeBindingOp
-    | TextOp
     | CustomElementOpenOp
     | CustomElementCloseOp
     | DirectiveOp
     | CustomElementAttributes
-    | CustomElementShadowOp;
+    | CustomElementShadowOp
+    | TemplateElementOpenOp
+    | TemplateElementCloseOp
+    | TextOp;
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
index 1156c0f51c4..dc50af0d681 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
@@ -3,7 +3,7 @@ import "@lit-labs/ssr/lib/install-global-dom-shim.js";
 import { test, expect } from "@playwright/test";
 import { parseTemplateToOpCodes} from "./template-parser.js";
 import { ViewTemplate, html, FASTElement, customElement, defaultExecutionContext } from "@microsoft/fast-element"
-import { Op, OpType, CustomElementOpenOp, AttributeBindingOp, DirectiveOp } from "./op-codes.js";
+import { Op, OpType, CustomElementOpenOp, AttributeBindingOp, DirectiveOp, TemplateElementOpenOp, TextOp } from "./op-codes.js";
 import { AttributeType } from "./attributes.js";
 
 @customElement("hello-world")
@@ -90,8 +90,66 @@ test.describe("parseTemplateToOpCodes", () => {
 
         expect(codes.length).toBe(4);
         expect(codes[0].attributeType).toBe(AttributeType.content);
+        expect(codes[0].name).toBe("string-value");
         expect(codes[1].attributeType).toBe(AttributeType.booleanContent);
+        expect(codes[1].name).toBe("bool-value");
         expect(codes[2].attributeType).toBe(AttributeType.idl);
+        expect(codes[2].name).toBe("property-value");
         expect(codes[3].attributeType).toBe(AttributeType.event);
+        expect(codes[3].name).toBe("event");
     });
-})
+    test("should emit template open and close ops for a template element", () => {
+        const input = html`<template></template>`;
+        const codes = parseTemplateToOpCodes(input);
+
+        expect(codes.length).toBe(2);
+        expect(codes[0].type).toBe(OpType.templateElementOpen);
+        expect(codes[1].type).toBe(OpType.templateElementClose);
+    });
+    test("should emit template open ops with static attributes", () => {
+        const input = html`<template id="foo" boolean></template>`;
+        const open = parseTemplateToOpCodes(input)[0] as TemplateElementOpenOp;
+
+        expect(open.staticAttributes.get("id")).toBe("foo");
+        expect(open.staticAttributes.get("boolean")).toBe("");
+    });
+    test("should emit template open ops with dynamic attributes", () => {
+        const input = html`<template id=${x => "foo"} ?boolean=${x => true} @event=${x => undefined} :property=${x => "value"}></template>`;
+        const open = parseTemplateToOpCodes(input)[0] as TemplateElementOpenOp;
+
+        const attrs = new Map(open.dynamicAttributes.map(x => {
+            return [x.name, x];
+        }))
+
+        expect(attrs.has("id")).toBe(true);
+        expect(attrs.get("id")!.attributeType).toBe(AttributeType.content);
+        expect(attrs.has("boolean")).toBe(true);
+        expect(attrs.get("boolean")!.attributeType).toBe(AttributeType.booleanContent);
+        expect(attrs.has("event")).toBe(true);
+        expect(attrs.get("event")!.attributeType).toBe(AttributeType.event);
+        expect(attrs.has("property")).toBe(true);
+        expect(attrs.get("property")!.attributeType).toBe(AttributeType.idl);
+    });
+    test("should emit template open ops with static and dynamic attributes", () => {
+        const input = html`<template id="foo" ?boolean=${x => true}></template>`;
+        const open = parseTemplateToOpCodes(input)[0] as TemplateElementOpenOp;
+
+        expect(open.staticAttributes.size).toBe(1);
+        expect(open.staticAttributes.get("id")).toBe("foo");
+        expect(open.dynamicAttributes.length).toBe(1);
+        expect(open.dynamicAttributes[0].name).toBe("boolean");
+    });
+
+    test("should emit template template ops between other ops when nested inside of another element", () => {
+        const input = html`<div><template></template></div>`;
+        const codes = parseTemplateToOpCodes(input);
+
+        expect(codes[0].type).toBe(OpType.text);
+        expect((codes[0] as TextOp).value).toBe(`<div>`);
+        expect(codes[1].type).toBe(OpType.templateElementOpen);
+        expect(codes[2].type).toBe(OpType.templateElementClose);
+        expect(codes[3].type).toBe(OpType.text);
+        expect((codes[3] as TextOp).value).toBe(`</div>`);
+    })
+});
+// TODO add test that name for property, bool, and event attrs has the prefix removed.
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
index 83db03d85ab..f2253197d40 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
@@ -13,7 +13,7 @@ import {
     parseFragment,
 } from "parse5";
 import { AttributeType, attributeTypeRegExp } from "./attributes.js";
-import { Op, OpType } from "./op-codes.js";
+import { AttributeBindingOp, Op, OpType } from "./op-codes.js";
 
 /**
  * Cache the results of template parsing.
@@ -154,66 +154,74 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
         // as well as any element with attribute bindings
         let augmentOpeningTag = false;
         const { tagName } = node;
-        let ctor: typeof HTMLElement | undefined;
+        const ctor: typeof HTMLElement | undefined = customElements.get(node.tagName);
 
         // Sort attributes by whether they're related to a binding or if they have
         // static value
         const attributes: {
             static: Map<string, string>;
-            dynamic: Attribute[];
+            dynamic: Map<Attribute, AttributeBindingOp>;
         } = node.attrs.reduce(
             (prev, current) => {
-                if (Parser.parse(current.value, directives)) {
-                    prev.dynamic.push(current);
+                const parsed = Parser.parse(current.value, directives);
+                const attributeType = getAttributeType(current);
+                if (parsed) {
+                    prev.dynamic.set(current, {
+                        type: OpType.attributeBinding,
+                        name:
+                            attributeType === AttributeType.content
+                                ? current.name
+                                : current.name.substring(1),
+                        directive: Parser.aggregate(parsed),
+                        attributeType,
+                        useCustomElementInstance: Boolean(node.isDefinedCustomElement),
+                    });
                 } else {
                     prev.static.set(current.name, current.value);
                 }
 
                 return prev;
             },
-            { static: new Map(), dynamic: [] as Attribute[] }
+            {
+                static: new Map<string, string>(),
+                dynamic: new Map<Attribute, AttributeBindingOp>(),
+            }
         );
 
         // Special processing for any custom element
-        if (node.tagName.includes("-")) {
-            ctor = customElements.get(tagName);
-
-            if (ctor !== undefined) {
-                augmentOpeningTag = true;
-                node.isDefinedCustomElement = true;
-                opCodes.push({
-                    type: OpType.customElementOpen,
-                    tagName,
-                    ctor,
-                    staticAttributes: attributes.static,
-                });
-            }
+        if (ctor !== undefined) {
+            augmentOpeningTag = true;
+            node.isDefinedCustomElement = true;
+            opCodes.push({
+                type: OpType.customElementOpen,
+                tagName,
+                ctor,
+                staticAttributes: attributes.static,
+            });
+        } else if (node.tagName === "template") {
+            flushTo(node.sourceCodeLocation?.startTag.startOffset);
+            opCodes.push({
+                type: OpType.templateElementOpen,
+                staticAttributes: attributes.static,
+                dynamicAttributes: Array.from(attributes.dynamic.values()),
+            });
+            skipTo(node.sourceCodeLocation!.startTag.endOffset);
+            return;
         }
 
         // Push attribute binding op codes for any attributes that
         // are dynamic
-        if (attributes.dynamic.length) {
-            for (const attr of attributes.dynamic) {
+        if (attributes.dynamic.size) {
+            for (const [attr, code] of attributes.dynamic) {
                 const location = node.sourceCodeLocation!.attrs[attr.name];
                 flushTo(location.startOffset);
-                const attributeType = getAttributeType(attr);
-                const parsed = Parser.parse(attr.value, directives);
-
-                if (parsed !== null) {
-                    augmentOpeningTag = true;
-                    opCodes.push({
-                        type: OpType.attributeBinding,
-                        name: attr.name,
-                        directive: Parser.aggregate(parsed),
-                        attributeType,
-                        useCustomElementInstance: Boolean(node.isDefinedCustomElement),
-                    });
-                    skipTo(location.endOffset);
-                }
+                augmentOpeningTag = true;
+                opCodes.push(code);
+                skipTo(location.endOffset);
             }
         }
 
-        if (augmentOpeningTag) {
+        if (augmentOpeningTag && node.tagName !== "template") {
             if (ctor) {
                 flushTo(node.sourceCodeLocation!.startTag.endOffset - 1);
                 opCodes.push({ type: OpType.customElementAttributes });
@@ -298,8 +306,14 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
         },
 
         leave(node: DefaultTreeNode): void {
-            if (isElementNode(node) && node.isDefinedCustomElement) {
-                opCodes.push({ type: OpType.customElementClose });
+            if (isElementNode(node)) {
+                if (node.isDefinedCustomElement) {
+                    opCodes.push({ type: OpType.customElementClose });
+                } else if (node.tagName === "template") {
+                    flushTo(node.sourceCodeLocation?.endTag.startOffset);
+                    opCodes.push({ type: OpType.templateElementClose });
+                    skipTo(node.sourceCodeLocation!.endTag.endOffset);
+                }
             }
         },
     });

From 40a7afdf9930d676e85b4ab2c7dc03ac05ea5fcb Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Tue, 8 Mar 2022 14:59:30 -0500
Subject: [PATCH 081/135] feat: enable multiple instances of fast-element on a
 page at once (#5718)

* feat: enable multiple instances of fast-element on a page at once

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-a472079b-2d1a-4c93-a8e4-786429b46d18.json |   7 +
 .../fast-element/docs/api-report.md           |  60 +-
 .../src/components/fast-definitions.ts        |   3 +-
 .../web-components/fast-element/src/dom.ts    | 143 ++--
 .../src/observation/observable.ts             | 652 +++++++++---------
 .../fast-element/src/templating/binding.ts    |   5 +-
 6 files changed, 467 insertions(+), 403 deletions(-)
 create mode 100644 change/@microsoft-fast-element-a472079b-2d1a-4c93-a8e4-786429b46d18.json

diff --git a/change/@microsoft-fast-element-a472079b-2d1a-4c93-a8e4-786429b46d18.json b/change/@microsoft-fast-element-a472079b-2d1a-4c93-a8e4-786429b46d18.json
new file mode 100644
index 00000000000..8b829a7f6a4
--- /dev/null
+++ b/change/@microsoft-fast-element-a472079b-2d1a-4c93-a8e4-786429b46d18.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: enable multiple instances of fast-element on a page at once",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 31ece83ecda..2fb991b5652 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -49,7 +49,7 @@ export class AttributeDefinition implements Accessor {
     onAttributeChangedCallback(element: HTMLElement, value: any): void;
     readonly Owner: Function;
     setValue(source: HTMLElement, newValue: any): void;
-}
+    }
 
 // @public
 export type AttributeMode = "reflect" | "boolean" | "fromView";
@@ -209,10 +209,10 @@ export const DOM: Readonly<{
     supportsAdoptedStyleSheets: boolean;
     setHTMLPolicy(policy: TrustedTypesPolicy): void;
     createHTML(html: string): string;
-    setUpdateMode(isAsync: boolean): void;
-    queueUpdate(callable: Callable): void;
+    setUpdateMode: (isAsync: boolean) => void;
+    queueUpdate: (callable: Callable) => void;
     nextUpdate(): Promise<void>;
-    processUpdates(): void;
+    processUpdates: () => void;
     setAttribute(element: HTMLElement, attributeName: string, value: any): void;
     setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
 }>;
@@ -274,8 +274,15 @@ export class ExecutionContext<TParent = any, TGrandparent = any> {
     length: number;
     parent: TParent;
     parentContext: ExecutionContext<TGrandparent>;
+    // @internal
+    static setEvent(event: Event | null): void;
 }
 
+// Warning: (ae-internal-missing-underscore) The name "FAST" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export const FAST: FASTGlobal;
+
 // @public
 export interface FASTElement extends HTMLElement {
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -301,8 +308,8 @@ export class FASTElementDefinition<TType extends Function = Function> {
     readonly attributes: ReadonlyArray<AttributeDefinition>;
     define(registry?: CustomElementRegistry): this;
     readonly elementOptions?: ElementDefinitionOptions;
-    static forType<TType extends Function>(type: TType): FASTElementDefinition | undefined;
-    readonly isDefined: boolean;
+    static readonly forType: <TType_1 extends Function>(key: TType_1) => FASTElementDefinition<Function> | undefined;
+    get isDefined(): boolean;
     readonly name: string;
     readonly propertyLookup: Record<string, AttributeDefinition>;
     readonly shadowOptions?: ShadowRootInit;
@@ -311,9 +318,20 @@ export class FASTElementDefinition<TType extends Function = Function> {
     readonly type: TType;
 }
 
+// Warning: (ae-internal-missing-underscore) The name "FASTGlobal" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export interface FASTGlobal {
+    getById<T>(id: string | number): T | null;
+    // (undocumented)
+    getById<T>(id: string | number, initialize: () => T): T;
+    readonly versions: string[];
+}
+
 // @public
 export type Global = typeof globalThis & {
     trustedTypes: TrustedTypes;
+    readonly FAST: FASTGlobal;
 };
 
 // @public
@@ -358,6 +376,20 @@ export abstract class InlinableHTMLDirective extends AspectedHTMLDirective {
     abstract readonly rawAspect?: string;
 }
 
+// Warning: (ae-internal-missing-underscore) The name "KernelServiceId" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export const enum KernelServiceId {
+    // (undocumented)
+    contextEvent = 3,
+    // (undocumented)
+    elementRegistry = 4,
+    // (undocumented)
+    observable = 2,
+    // (undocumented)
+    updateQueue = 1
+}
+
 // @public
 export const Markup: Readonly<{
     marker: string;
@@ -394,12 +426,12 @@ export const nullableNumberConverter: ValueConverter;
 // @public
 export const Observable: Readonly<{
     setArrayObserverFactory(factory: (collection: any[]) => Notifier): void;
-    getNotifier(source: any): Notifier;
+    getNotifier: (source: any) => Notifier;
     track(source: unknown, propertyName: string): void;
     trackVolatile(): void;
     notify(source: unknown, args: any): void;
     defineProperty(target: {}, nameOrAccessor: string | Accessor): void;
-    getAccessors(target: {}): Accessor[];
+    getAccessors: (target: {}) => Accessor[];
     binding<TSource = any, TReturn = any, TParent = any>(binding: Binding<TSource, TReturn, TParent>, initialSubscriber?: Subscriber | undefined, isVolatileBinding?: boolean): BindingObserver<TSource, TReturn, TParent>;
     isVolatileBinding<TSource_1 = any, TReturn_1 = any, TParent_1 = any>(binding: Binding<TSource_1, TReturn_1, TParent_1>): boolean;
 }>;
@@ -467,14 +499,14 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
     // @internal (undocumented)
     handleChange(source: any, args: Splice[]): void;
     unbind(): void;
-}
+    }
 
 // @public
 export class RepeatDirective<TSource = any> extends HTMLDirective {
     constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
     createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource>;
     createPlaceholder: (index: number) => string;
-}
+    }
 
 // @public
 export interface RepeatOptions {
@@ -482,11 +514,6 @@ export interface RepeatOptions {
     recycle?: boolean;
 }
 
-// Warning: (ae-internal-missing-underscore) The name "setCurrentEvent" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal (undocumented)
-export function setCurrentEvent(event: Event | null): void;
-
 // @public
 export function slotted<T = any>(propertyOrOptions: (keyof T & string) | SlottedDirectiveOptions<keyof T & string>): CaptureType<T>;
 
@@ -617,7 +644,7 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any> impl
     readonly directives: ReadonlyArray<HTMLDirective>;
     readonly html: string | HTMLTemplateElement;
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
-}
+    }
 
 // @public
 export function volatile(target: {}, name: string | Accessor, descriptor: PropertyDescriptor): PropertyDescriptor;
@@ -625,6 +652,7 @@ export function volatile(target: {}, name: string | Accessor, descriptor: Proper
 // @public
 export function when<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn>, templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
 
+
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.ts b/packages/web-components/fast-element/src/components/fast-definitions.ts
index 3b20062dd54..0b8737063ab 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.ts
@@ -1,5 +1,6 @@
-import { isString, Mutable } from "../interfaces.js";
+import { isString } from "../interfaces.js";
 import { Observable } from "../observation/observable.js";
+import { FAST, KernelServiceId } from "../platform.js";
 import { ComposableStyles, ElementStyles } from "../styles/element-styles.js";
 import type { ElementViewTemplate } from "../templating/template.js";
 import { AttributeConfiguration, AttributeDefinition } from "./attributes.js";
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index 0c9fa1c31ce..c4686a1a8eb 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -1,5 +1,5 @@
 import type { Callable } from "./interfaces.js";
-import { $global, TrustedTypesPolicy } from "./platform.js";
+import { $global, KernelServiceId, TrustedTypesPolicy } from "./platform.js";
 
 /* eslint-disable */
 const fastHTMLPolicy: TrustedTypesPolicy = $global.trustedTypes.createPolicy(
@@ -10,31 +10,82 @@ const fastHTMLPolicy: TrustedTypesPolicy = $global.trustedTypes.createPolicy(
 );
 /* eslint-enable */
 
-let htmlPolicy: TrustedTypesPolicy = fastHTMLPolicy;
-const updateQueue: Callable[] = [];
-const pendingErrors: any[] = [];
-const rAF = $global.requestAnimationFrame;
-let updateAsync = true;
-
-function throwFirstError(): void {
-    if (pendingErrors.length) {
-        throw pendingErrors.shift();
+const updateQueue = $global.FAST.getById(KernelServiceId.updateQueue, () => {
+    const tasks: Callable[] = [];
+    const pendingErrors: any[] = [];
+    const rAF = $global.requestAnimationFrame;
+    let updateAsync = true;
+
+    function throwFirstError(): void {
+        if (pendingErrors.length) {
+            throw pendingErrors.shift();
+        }
     }
-}
-
-function tryRunTask(task: Callable): void {
-    try {
-        (task as any).call();
-    } catch (error) {
-        if (updateAsync) {
-            pendingErrors.push(error);
-            setTimeout(throwFirstError, 0);
-        } else {
-            updateQueue.length = 0;
-            throw error;
+
+    function tryRunTask(task: Callable): void {
+        try {
+            (task as any).call();
+        } catch (error) {
+            if (updateAsync) {
+                pendingErrors.push(error);
+                setTimeout(throwFirstError, 0);
+            } else {
+                tasks.length = 0;
+                throw error;
+            }
+        }
+    }
+
+    function process(): void {
+        const capacity = 1024;
+        let index = 0;
+
+        while (index < tasks.length) {
+            tryRunTask(tasks[index]);
+            index++;
+
+            // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
+            // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
+            // grow, but to avoid an O(n) walk for every task we execute, we don't
+            // shift tasks off the queue after they have been executed.
+            // Instead, we periodically shift 1024 tasks off the queue.
+            if (index > capacity) {
+                // Manually shift all values starting at the index back to the
+                // beginning of the queue.
+                for (
+                    let scan = 0, newLength = tasks.length - index;
+                    scan < newLength;
+                    scan++
+                ) {
+                    tasks[scan] = tasks[scan + index];
+                }
+
+                tasks.length -= index;
+                index = 0;
+            }
+        }
+
+        tasks.length = 0;
+    }
+
+    function enqueue(callable: Callable): void {
+        tasks.push(callable);
+
+        if (tasks.length < 2) {
+            updateAsync ? rAF(process) : process();
         }
     }
-}
+
+    return Object.freeze({
+        enqueue,
+        process,
+        setUpdateMode(isAsync: boolean) {
+            updateAsync = isAsync;
+        },
+    });
+});
+
+let htmlPolicy: TrustedTypesPolicy = fastHTMLPolicy;
 
 /**
  * Common DOM APIs.
@@ -84,27 +135,19 @@ export const DOM = Object.freeze({
      * ordering will still be preserved so that nested tasks do not run until
      * after parent tasks complete.
      */
-    setUpdateMode(isAsync: boolean) {
-        updateAsync = isAsync;
-    },
+    setUpdateMode: updateQueue.setUpdateMode,
 
     /**
      * Schedules DOM update work in the next async batch.
      * @param callable - The callable function or object to queue.
      */
-    queueUpdate(callable: Callable) {
-        updateQueue.push(callable);
-
-        if (updateQueue.length < 2) {
-            updateAsync ? rAF(DOM.processUpdates) : DOM.processUpdates();
-        }
-    },
+    queueUpdate: updateQueue.enqueue,
 
     /**
      * Resolves with the next DOM update.
      */
     nextUpdate(): Promise<void> {
-        return new Promise(DOM.queueUpdate);
+        return new Promise(updateQueue.enqueue);
     },
 
     /**
@@ -114,37 +157,7 @@ export const DOM = Object.freeze({
      * This also forces nextUpdate promises
      * to resolve.
      */
-    processUpdates(): void {
-        const capacity = 1024;
-        let index = 0;
-
-        while (index < updateQueue.length) {
-            tryRunTask(updateQueue[index]);
-            index++;
-
-            // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
-            // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
-            // grow, but to avoid an O(n) walk for every task we execute, we don't
-            // shift tasks off the queue after they have been executed.
-            // Instead, we periodically shift 1024 tasks off the queue.
-            if (index > capacity) {
-                // Manually shift all values starting at the index back to the
-                // beginning of the queue.
-                for (
-                    let scan = 0, newLength = updateQueue.length - index;
-                    scan < newLength;
-                    scan++
-                ) {
-                    updateQueue[scan] = updateQueue[scan + index];
-                }
-
-                updateQueue.length -= index;
-                index = 0;
-            }
-        }
-
-        updateQueue.length = 0;
-    },
+    processUpdates: updateQueue.process,
 
     /**
      * Sets an attribute value on an element.
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index e4e10c9aea6..01bee669fb7 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -1,16 +1,9 @@
 import { DOM } from "../dom.js";
 import { isFunction, isString } from "../interfaces.js";
+import { FAST, KernelServiceId } from "../platform.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
 import type { Notifier, Subscriber } from "./notifier.js";
 
-const volatileRegex = /(:|&&|\|\||if)/;
-const notifierLookup = new WeakMap<any, Notifier>();
-const accessorLookup = new WeakMap<any, Accessor[]>();
-let watcher: BindingObserverImplementation | undefined = void 0;
-let createArrayObserver = (array: any[]): Notifier => {
-    throw new Error("Must call enableArrayObservation before observing arrays.");
-};
-
 /**
  * Represents a getter/setter property accessor on an object.
  * @public
@@ -35,60 +28,79 @@ export interface Accessor {
     setValue(source: any, value: any): void;
 }
 
-class DefaultObservableAccessor implements Accessor {
-    private field: string;
-    private callback: string;
-
-    constructor(public name: string) {
-        this.field = `_${name}`;
-        this.callback = `${name}Changed`;
-    }
-
-    getValue(source: any): any {
-        if (watcher !== void 0) {
-            watcher.watch(source, this.name);
-        }
-
-        return source[this.field];
-    }
-
-    setValue(source: any, newValue: any): void {
-        const field = this.field;
-        const oldValue = source[field];
-
-        if (oldValue !== newValue) {
-            source[field] = newValue;
+/**
+ * The signature of an arrow function capable of being evaluated
+ * as part of a template binding update.
+ * @public
+ */
+export type Binding<TSource = any, TReturn = any, TParent = any> = (
+    source: TSource,
+    context: ExecutionContext<TParent>
+) => TReturn;
 
-            const callback = source[this.callback];
+/**
+ * A record of observable property access.
+ * @public
+ */
+export interface ObservationRecord {
+    /**
+     * The source object with an observable property that was accessed.
+     */
+    propertySource: any;
 
-            if (isFunction(callback)) {
-                callback.call(source, oldValue, newValue);
-            }
+    /**
+     * The name of the observable property on {@link ObservationRecord.propertySource} that was accessed.
+     */
+    propertyName: string;
+}
 
-            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-            getNotifier(source).notify(this.name);
-        }
-    }
+interface SubscriptionRecord extends ObservationRecord {
+    notifier: Notifier;
+    next: SubscriptionRecord | undefined;
 }
 
 /**
- * Common Observable APIs.
+ * Enables evaluation of and subscription to a binding.
  * @public
  */
-export const Observable = Object.freeze({
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+export interface BindingObserver<TSource = any, TReturn = any, TParent = any>
+    extends Notifier {
     /**
-     * @internal
-     * @param factory - The factory used to create array observers.
+     * Begins observing the binding for the source and returns the current value.
+     * @param source - The source that the binding is based on.
+     * @param context - The execution context to execute the binding within.
+     * @returns The value of the binding.
      */
-    setArrayObserverFactory(factory: (collection: any[]) => Notifier): void {
-        createArrayObserver = factory;
-    },
+    observe(source: TSource, context: ExecutionContext): TReturn;
 
     /**
-     * Gets a notifier for an object or Array.
-     * @param source - The object or Array to get the notifier for.
+     * Unsubscribe from all dependent observables of the binding.
      */
-    getNotifier(source: any): Notifier {
+    disconnect(): void;
+
+    /**
+     * Gets {@link ObservationRecord|ObservationRecords} that the {@link BindingObserver}
+     * is observing.
+     */
+    records(): IterableIterator<ObservationRecord>;
+}
+
+/**
+ * Common Observable APIs.
+ * @public
+ */
+export const Observable = FAST.getById(KernelServiceId.observable, () => {
+    const queueUpdate = DOM.queueUpdate;
+    const volatileRegex = /(:|&&|\|\||if)/;
+    const notifierLookup = new WeakMap<any, Notifier>();
+    const accessorLookup = new WeakMap<any, Accessor[]>();
+    let watcher: BindingObserverImplementation | undefined = void 0;
+    let createArrayObserver = (array: any[]): Notifier => {
+        throw new Error("Must call enableArrayObservation before observing arrays.");
+    };
+
+    function getNotifier(source: any): Notifier {
         let found = source.$fastController ?? notifierLookup.get(source);
 
         if (found === void 0) {
@@ -101,65 +113,9 @@ export const Observable = Object.freeze({
         }
 
         return found;
-    },
-
-    /**
-     * Records a property change for a source object.
-     * @param source - The object to record the change against.
-     * @param propertyName - The property to track as changed.
-     */
-    track(source: unknown, propertyName: string): void {
-        watcher && watcher.watch(source, propertyName);
-    },
-
-    /**
-     * Notifies watchers that the currently executing property getter or function is volatile
-     * with respect to its observable dependencies.
-     */
-    trackVolatile(): void {
-        watcher && (watcher.needsRefresh = true);
-    },
-
-    /**
-     * Notifies subscribers of a source object of changes.
-     * @param source - the object to notify of changes.
-     * @param args - The change args to pass to subscribers.
-     */
-    notify(source: unknown, args: any): void {
-        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-        getNotifier(source).notify(args);
-    },
-
-    /**
-     * Defines an observable property on an object or prototype.
-     * @param target - The target object to define the observable on.
-     * @param nameOrAccessor - The name of the property to define as observable;
-     * or a custom accessor that specifies the property name and accessor implementation.
-     */
-    defineProperty(target: {}, nameOrAccessor: string | Accessor): void {
-        if (isString(nameOrAccessor)) {
-            nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
-        }
-
-        this.getAccessors(target).push(nameOrAccessor);
-
-        Reflect.defineProperty(target, nameOrAccessor.name, {
-            enumerable: true,
-            get(this: any) {
-                return (nameOrAccessor as Accessor).getValue(this);
-            },
-            set(this: any, newValue: any) {
-                (nameOrAccessor as Accessor).setValue(this, newValue);
-            },
-        });
-    },
+    }
 
-    /**
-     * Finds all the observable accessors defined on the target,
-     * including its prototype chain.
-     * @param target - The target object to search for accessor on.
-     */
-    getAccessors(target: {}): Accessor[] {
+    function getAccessors(target: {}): Accessor[] {
         let accessors = accessorLookup.get(target);
 
         if (accessors === void 0) {
@@ -176,43 +132,258 @@ export const Observable = Object.freeze({
         }
 
         return accessors;
-    },
+    }
 
-    /**
-     * Creates a {@link BindingObserver} that can watch the
-     * provided {@link Binding} for changes.
-     * @param binding - The binding to observe.
-     * @param initialSubscriber - An initial subscriber to changes in the binding value.
-     * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
-     */
-    binding<TSource = any, TReturn = any, TParent = any>(
-        binding: Binding<TSource, TReturn, TParent>,
-        initialSubscriber?: Subscriber,
-        isVolatileBinding: boolean = this.isVolatileBinding(binding)
-    ): BindingObserver<TSource, TReturn, TParent> {
-        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-        return new BindingObserverImplementation(
-            binding,
-            initialSubscriber,
-            isVolatileBinding
-        );
-    },
+    class DefaultObservableAccessor implements Accessor {
+        private field: string;
+        private callback: string;
 
-    /**
-     * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
-     * on every evaluation of the value.
-     * @param binding - The binding to inspect.
-     */
-    isVolatileBinding<TSource = any, TReturn = any, TParent = any>(
-        binding: Binding<TSource, TReturn, TParent>
-    ): boolean {
-        return volatileRegex.test(binding.toString());
-    },
-});
+        constructor(public name: string) {
+            this.field = `_${name}`;
+            this.callback = `${name}Changed`;
+        }
+
+        getValue(source: any): any {
+            if (watcher !== void 0) {
+                watcher.watch(source, this.name);
+            }
+
+            return source[this.field];
+        }
+
+        setValue(source: any, newValue: any): void {
+            const field = this.field;
+            const oldValue = source[field];
+
+            if (oldValue !== newValue) {
+                source[field] = newValue;
 
-const getNotifier = Observable.getNotifier;
-const trackVolatile = Observable.trackVolatile;
-const queueUpdate = DOM.queueUpdate;
+                const callback = source[this.callback];
+
+                if (isFunction(callback)) {
+                    callback.call(source, oldValue, newValue);
+                }
+
+                /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+                getNotifier(source).notify(this.name);
+            }
+        }
+    }
+
+    class BindingObserverImplementation<TSource = any, TReturn = any, TParent = any>
+        extends SubscriberSet
+        implements BindingObserver<TSource, TReturn, TParent> {
+        public needsRefresh: boolean = true;
+        private needsQueue: boolean = true;
+
+        private first: SubscriptionRecord = this as any;
+        private last: SubscriptionRecord | null = null;
+        private propertySource: any = void 0;
+        private propertyName: string | undefined = void 0;
+        private notifier: Notifier | undefined = void 0;
+        private next: SubscriptionRecord | undefined = void 0;
+
+        constructor(
+            private binding: Binding<TSource, TReturn, TParent>,
+            initialSubscriber?: Subscriber,
+            private isVolatileBinding: boolean = false
+        ) {
+            super(binding, initialSubscriber);
+        }
+
+        public observe(source: TSource, context: ExecutionContext): TReturn {
+            if (this.needsRefresh && this.last !== null) {
+                this.disconnect();
+            }
+
+            const previousWatcher = watcher;
+            watcher = this.needsRefresh ? this : void 0;
+            this.needsRefresh = this.isVolatileBinding;
+            const result = this.binding(source, context);
+            watcher = previousWatcher;
+
+            return result;
+        }
+
+        public disconnect(): void {
+            if (this.last !== null) {
+                let current = this.first;
+
+                while (current !== void 0) {
+                    current.notifier.unsubscribe(this, current.propertyName);
+                    current = current.next!;
+                }
+
+                this.last = null;
+                this.needsRefresh = this.needsQueue = true;
+            }
+        }
+
+        /** @internal */
+        public watch(propertySource: unknown, propertyName: string): void {
+            const prev = this.last;
+            const notifier = getNotifier(propertySource);
+            const current: SubscriptionRecord = prev === null ? this.first : ({} as any);
+
+            current.propertySource = propertySource;
+            current.propertyName = propertyName;
+            current.notifier = notifier;
+
+            notifier.subscribe(this, propertyName);
+
+            if (prev !== null) {
+                if (!this.needsRefresh) {
+                    // Declaring the variable prior to assignment below circumvents
+                    // a bug in Angular's optimization process causing infinite recursion
+                    // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
+                    let prevValue;
+                    watcher = void 0;
+                    /* eslint-disable-next-line */
+                    prevValue = prev.propertySource[prev.propertyName];
+                    watcher = this;
+
+                    if (propertySource === prevValue) {
+                        this.needsRefresh = true;
+                    }
+                }
+
+                prev.next = current;
+            }
+
+            this.last = current!;
+        }
+
+        /** @internal */
+        handleChange(): void {
+            if (this.needsQueue) {
+                this.needsQueue = false;
+                queueUpdate(this);
+            }
+        }
+
+        /** @internal */
+        call(): void {
+            if (this.last !== null) {
+                this.needsQueue = true;
+                this.notify(this);
+            }
+        }
+
+        public *records(): IterableIterator<ObservationRecord> {
+            let next = this.first;
+
+            while (next !== void 0) {
+                yield next;
+                next = next.next!;
+            }
+        }
+    }
+
+    return Object.freeze({
+        /**
+         * @internal
+         * @param factory - The factory used to create array observers.
+         */
+        setArrayObserverFactory(factory: (collection: any[]) => Notifier): void {
+            createArrayObserver = factory;
+        },
+
+        /**
+         * Gets a notifier for an object or Array.
+         * @param source - The object or Array to get the notifier for.
+         */
+        getNotifier,
+
+        /**
+         * Records a property change for a source object.
+         * @param source - The object to record the change against.
+         * @param propertyName - The property to track as changed.
+         */
+        track(source: unknown, propertyName: string): void {
+            watcher && watcher.watch(source, propertyName);
+        },
+
+        /**
+         * Notifies watchers that the currently executing property getter or function is volatile
+         * with respect to its observable dependencies.
+         */
+        trackVolatile(): void {
+            watcher && (watcher.needsRefresh = true);
+        },
+
+        /**
+         * Notifies subscribers of a source object of changes.
+         * @param source - the object to notify of changes.
+         * @param args - The change args to pass to subscribers.
+         */
+        notify(source: unknown, args: any): void {
+            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+            getNotifier(source).notify(args);
+        },
+
+        /**
+         * Defines an observable property on an object or prototype.
+         * @param target - The target object to define the observable on.
+         * @param nameOrAccessor - The name of the property to define as observable;
+         * or a custom accessor that specifies the property name and accessor implementation.
+         */
+        defineProperty(target: {}, nameOrAccessor: string | Accessor): void {
+            if (isString(nameOrAccessor)) {
+                nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
+            }
+
+            getAccessors(target).push(nameOrAccessor);
+
+            Reflect.defineProperty(target, nameOrAccessor.name, {
+                enumerable: true,
+                get(this: any) {
+                    return (nameOrAccessor as Accessor).getValue(this);
+                },
+                set(this: any, newValue: any) {
+                    (nameOrAccessor as Accessor).setValue(this, newValue);
+                },
+            });
+        },
+
+        /**
+         * Finds all the observable accessors defined on the target,
+         * including its prototype chain.
+         * @param target - The target object to search for accessor on.
+         */
+        getAccessors,
+
+        /**
+         * Creates a {@link BindingObserver} that can watch the
+         * provided {@link Binding} for changes.
+         * @param binding - The binding to observe.
+         * @param initialSubscriber - An initial subscriber to changes in the binding value.
+         * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
+         */
+        binding<TSource = any, TReturn = any, TParent = any>(
+            binding: Binding<TSource, TReturn, TParent>,
+            initialSubscriber?: Subscriber,
+            isVolatileBinding: boolean = this.isVolatileBinding(binding)
+        ): BindingObserver<TSource, TReturn, TParent> {
+            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+            return new BindingObserverImplementation(
+                binding,
+                initialSubscriber,
+                isVolatileBinding
+            );
+        },
+
+        /**
+         * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
+         * on every evaluation of the value.
+         * @param binding - The binding to inspect.
+         */
+        isVolatileBinding<TSource = any, TReturn = any, TParent = any>(
+            binding: Binding<TSource, TReturn, TParent>
+        ): boolean {
+            return volatileRegex.test(binding.toString());
+        },
+    });
+});
 
 /**
  * Decorator: Defines an observable property on the target.
@@ -238,21 +409,24 @@ export function volatile(
 ): PropertyDescriptor {
     return Object.assign({}, descriptor, {
         get(this: any) {
-            trackVolatile();
+            Observable.trackVolatile();
             return descriptor.get!.apply(this);
         },
     });
 }
 
-let currentEvent: Event | null = null;
+const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
+    let current: Event | null = null;
 
-/**
- * @param event - The event to set as current for the context.
- * @internal
- */
-export function setCurrentEvent(event: Event | null): void {
-    currentEvent = event;
-}
+    return {
+        get() {
+            return current;
+        },
+        set(event: Event | null) {
+            current = event;
+        },
+    };
+});
 
 /**
  * Provides additional contextual information available to behaviors and expressions.
@@ -283,7 +457,7 @@ export class ExecutionContext<TParent = any, TGrandparent = any> {
      * The current event within an event handler.
      */
     public get event(): Event {
-        return currentEvent!;
+        return contextEvent.get()!;
     }
 
     /**
@@ -325,6 +499,15 @@ export class ExecutionContext<TParent = any, TGrandparent = any> {
     public get isLast(): boolean {
         return this.index === this.length - 1;
     }
+
+    /**
+     * Sets the event for the current execution context.
+     * @param event - The event to set.
+     * @internal
+     */
+    public static setEvent(event: Event | null): void {
+        contextEvent.set(event);
+    }
 }
 
 Observable.defineProperty(ExecutionContext.prototype, "index");
@@ -335,170 +518,3 @@ Observable.defineProperty(ExecutionContext.prototype, "length");
  * @public
  */
 export const defaultExecutionContext = Object.seal(new ExecutionContext());
-
-/**
- * The signature of an arrow function capable of being evaluated
- * as part of a template binding update.
- * @public
- */
-export type Binding<TSource = any, TReturn = any, TParent = any> = (
-    source: TSource,
-    context: ExecutionContext<TParent>
-) => TReturn;
-
-/**
- * A record of observable property access.
- * @public
- */
-export interface ObservationRecord {
-    /**
-     * The source object with an observable property that was accessed.
-     */
-    propertySource: any;
-
-    /**
-     * The name of the observable property on {@link ObservationRecord.propertySource} that was accessed.
-     */
-    propertyName: string;
-}
-
-interface SubscriptionRecord extends ObservationRecord {
-    notifier: Notifier;
-    next: SubscriptionRecord | undefined;
-}
-
-/**
- * Enables evaluation of and subscription to a binding.
- * @public
- */
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-export interface BindingObserver<TSource = any, TReturn = any, TParent = any>
-    extends Notifier {
-    /**
-     * Begins observing the binding for the source and returns the current value.
-     * @param source - The source that the binding is based on.
-     * @param context - The execution context to execute the binding within.
-     * @returns The value of the binding.
-     */
-    observe(source: TSource, context: ExecutionContext): TReturn;
-
-    /**
-     * Unsubscribe from all dependent observables of the binding.
-     */
-    disconnect(): void;
-
-    /**
-     * Gets {@link ObservationRecord|ObservationRecords} that the {@link BindingObserver}
-     * is observing.
-     */
-    records(): IterableIterator<ObservationRecord>;
-}
-
-class BindingObserverImplementation<TSource = any, TReturn = any, TParent = any>
-    extends SubscriberSet
-    implements BindingObserver<TSource, TReturn, TParent> {
-    public needsRefresh: boolean = true;
-    private needsQueue: boolean = true;
-
-    private first: SubscriptionRecord = this as any;
-    private last: SubscriptionRecord | null = null;
-    private propertySource: any = void 0;
-    private propertyName: string | undefined = void 0;
-    private notifier: Notifier | undefined = void 0;
-    private next: SubscriptionRecord | undefined = void 0;
-
-    constructor(
-        private binding: Binding<TSource, TReturn, TParent>,
-        initialSubscriber?: Subscriber,
-        private isVolatileBinding: boolean = false
-    ) {
-        super(binding, initialSubscriber);
-    }
-
-    public observe(source: TSource, context: ExecutionContext): TReturn {
-        if (this.needsRefresh && this.last !== null) {
-            this.disconnect();
-        }
-
-        const previousWatcher = watcher;
-        watcher = this.needsRefresh ? this : void 0;
-        this.needsRefresh = this.isVolatileBinding;
-        const result = this.binding(source, context);
-        watcher = previousWatcher;
-
-        return result;
-    }
-
-    public disconnect(): void {
-        if (this.last !== null) {
-            let current = this.first;
-
-            while (current !== void 0) {
-                current.notifier.unsubscribe(this, current.propertyName);
-                current = current.next!;
-            }
-
-            this.last = null;
-            this.needsRefresh = this.needsQueue = true;
-        }
-    }
-
-    /** @internal */
-    public watch(propertySource: unknown, propertyName: string): void {
-        const prev = this.last;
-        const notifier = getNotifier(propertySource);
-        const current: SubscriptionRecord = prev === null ? this.first : ({} as any);
-
-        current.propertySource = propertySource;
-        current.propertyName = propertyName;
-        current.notifier = notifier;
-
-        notifier.subscribe(this, propertyName);
-
-        if (prev !== null) {
-            if (!this.needsRefresh) {
-                // Declaring the variable prior to assignment below circumvents
-                // a bug in Angular's optimization process causing infinite recursion
-                // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
-                let prevValue;
-                watcher = void 0;
-                /* eslint-disable-next-line */
-                prevValue = prev.propertySource[prev.propertyName];
-                watcher = this;
-
-                if (propertySource === prevValue) {
-                    this.needsRefresh = true;
-                }
-            }
-
-            prev.next = current;
-        }
-
-        this.last = current!;
-    }
-
-    /** @internal */
-    handleChange(): void {
-        if (this.needsQueue) {
-            this.needsQueue = false;
-            queueUpdate(this);
-        }
-    }
-
-    /** @internal */
-    call(): void {
-        if (this.last !== null) {
-            this.needsQueue = true;
-            this.notify(this);
-        }
-    }
-
-    public *records(): IterableIterator<ObservationRecord> {
-        let next = this.first;
-
-        while (next !== void 0) {
-            yield next;
-            next = next.next!;
-        }
-    }
-}
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index a333a04969e..b6e0ebae64b 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -5,7 +5,6 @@ import {
     BindingObserver,
     ExecutionContext,
     Observable,
-    setCurrentEvent,
 } from "../observation/observable.js";
 import {
     InlinableHTMLDirective,
@@ -449,9 +448,9 @@ class EventListener extends BindingBase {
         const source = target.$fastSource;
         const context = target.$fastContext;
 
-        setCurrentEvent(event);
+        ExecutionContext.setEvent(event);
         const result = this.directive.binding(source, context);
-        setCurrentEvent(null);
+        ExecutionContext.setEvent(null);
 
         if (result !== true) {
             event.preventDefault();

From da31ffb4d60a147bb5cf17fa6e7c37339daa56d9 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Wed, 9 Mar 2022 15:52:30 -0500
Subject: [PATCH 082/135] refactor: enable pluggable template compiler for SSR
 scenarios (#5722)

* refactor: enable pluggable template compiler for SSR scenarios

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-5027f6e6-0686-40b1-965f-adc905136502.json |  7 ++
 .../fast-element/docs/api-report.md           | 14 ++--
 .../fast-element/src/styles/element-styles.ts |  2 +-
 .../src/templating/compiler.spec.ts           | 15 +++-
 .../fast-element/src/templating/compiler.ts   | 84 +++++++++----------
 .../fast-element/src/templating/repeat.ts     |  2 +-
 .../fast-element/src/templating/template.ts   | 76 ++++++++++-------
 7 files changed, 114 insertions(+), 86 deletions(-)
 create mode 100644 change/@microsoft-fast-element-5027f6e6-0686-40b1-965f-adc905136502.json

diff --git a/change/@microsoft-fast-element-5027f6e6-0686-40b1-965f-adc905136502.json b/change/@microsoft-fast-element-5027f6e6-0686-40b1-965f-adc905136502.json
new file mode 100644
index 00000000000..2def93343e3
--- /dev/null
+++ b/change/@microsoft-fast-element-5027f6e6-0686-40b1-965f-adc905136502.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "refactor: enable pluggable template compiler for SSR scenarios",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 2fb991b5652..61d4c91a073 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -140,7 +140,7 @@ export class ChildrenDirective extends NodeObservationDirective<ChildrenDirectiv
 export type ChildrenDirectiveOptions<T = any> = ChildListDirectiveOptions<T> | SubtreeDirectiveOptions<T>;
 
 // @public
-export function compileTemplate(template: HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): HTMLTemplateCompilationResult;
+export function compileTemplate(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): HTMLTemplateCompilationResult;
 
 // @public
 export type ComposableStyles = string | ElementStyles | CSSStyleSheet;
@@ -347,11 +347,14 @@ export abstract class HTMLDirective implements ViewBehaviorFactory {
 
 // @public
 export interface HTMLTemplateCompilationResult {
-    createTargets(root: Node, host?: Node): ViewBehaviorTargets;
-    readonly factories: ReadonlyArray<ViewBehaviorFactory>;
-    readonly fragment: DocumentFragment;
+    createView(hostBindingTarget?: Element): HTMLView;
 }
 
+// @public
+export type HTMLTemplateCompiler = (
+html: string | HTMLTemplateElement,
+directives: readonly HTMLDirective[]) => HTMLTemplateCompilationResult;
+
 // @public
 export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implements ElementView<TSource, TParent, TGrandparent>, SyntheticView<TSource, TParent, TGrandparent> {
     constructor(fragment: DocumentFragment, factories: ReadonlyArray<ViewBehaviorFactory>, targets: ViewBehaviorTargets);
@@ -644,7 +647,8 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any> impl
     readonly directives: ReadonlyArray<HTMLDirective>;
     readonly html: string | HTMLTemplateElement;
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
-    }
+    static setDefaultCompiler(compiler: HTMLTemplateCompiler): void;
+}
 
 // @public
 export function volatile(target: {}, name: string | Accessor, descriptor: PropertyDescriptor): PropertyDescriptor;
diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index 9743105fb72..7bccb8377c2 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -165,7 +165,7 @@ export class ElementStyles {
      * Sets the default strategy type to use when creating style strategies.
      * @param Strategy - The strategy type to construct.
      */
-    public static setDefaultStrategy(Strategy: ConstructibleStyleStrategy) {
+    public static setDefaultStrategy(Strategy: ConstructibleStyleStrategy): void {
         DefaultStyleStrategy = Strategy;
     }
 }
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index 4b0599d72a1..cb7b9a6f1c5 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -8,14 +8,21 @@ import type { StyleTarget } from "../styles/element-styles";
 import { toHTML, uniqueElementName } from "../__test__/helpers";
 import { bind, HTMLBindingDirective } from "./binding";
 import { compileTemplate } from "./compiler";
-import type { HTMLDirective } from "./html-directive";
+import type { HTMLDirective, ViewBehaviorFactory } from "./html-directive";
 import { html } from "./template";
 
+/**
+ * Used to satisfy TS by exposing some internal properties of the
+ * compilation result that we want to make assertions against.
+ */
+interface CompilationResultInternals {
+    readonly fragment: DocumentFragment;
+    readonly factories: ViewBehaviorFactory[];
+}
+
 describe("The template compiler", () => {
     function compile(html: string, directives: HTMLDirective[]) {
-        const template = document.createElement("template");
-        template.innerHTML = html;
-        return compileTemplate(template, directives);
+        return compileTemplate(html, directives) as any as CompilationResultInternals;
     }
 
     function inline(index: number) {
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 6c832dad180..abbfdf8efe9 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,12 +1,14 @@
-import { Markup, Parser } from "./markup.js";
 import { isString } from "../interfaces.js";
+import { DOM } from "../dom.js";
+import { Markup, Parser } from "./markup.js";
 import { bind, oneTime } from "./binding.js";
 import type {
     AspectedHTMLDirective,
     HTMLDirective,
     ViewBehaviorFactory,
-    ViewBehaviorTargets,
 } from "./html-directive.js";
+import type { HTMLTemplateCompilationResult } from "./template.js";
+import { HTMLView } from "./view.js";
 
 const targetIdFrom = (parentId: string, nodeIndex: number): string =>
     `${parentId}.${nodeIndex}`;
@@ -23,30 +25,6 @@ const next: NextNode = {
     node: null as ChildNode | null,
 };
 
-/**
- * The result of compiling a template and its directives.
- * @public
- */
-export interface HTMLTemplateCompilationResult {
-    /**
-     * A cloneable DocumentFragment representing the compiled HTML.
-     */
-    readonly fragment: DocumentFragment;
-
-    /**
-     * The behaviors that should be applied to the template's HTML.
-     */
-    readonly factories: ReadonlyArray<ViewBehaviorFactory>;
-
-    /**
-     * Creates a behavior target lookup object.
-     * @param host - The host element.
-     * @param root - The root element.
-     * @returns A lookup object for behavior targets.
-     */
-    createTargets(root: Node, host?: Node): ViewBehaviorTargets;
-}
-
 class CompilationContext implements HTMLTemplateCompilationResult {
     private proto: any = null;
     private targetIds = new Set<string>();
@@ -78,18 +56,6 @@ class CompilationContext implements HTMLTemplateCompilationResult {
         return this;
     }
 
-    public createTargets(root: Node, host?: Node): ViewBehaviorTargets {
-        const targets = Object.create(this.proto);
-        targets.r = root;
-        targets.h = host ?? root;
-
-        for (const id of this.targetIds) {
-            targets[id]; // trigger locator
-        }
-
-        return targets;
-    }
-
     private addTargetDescriptor(
         parentId: string,
         targetId: string,
@@ -107,8 +73,8 @@ class CompilationContext implements HTMLTemplateCompilationResult {
 
         if (!descriptors[parentId]) {
             const index = parentId.lastIndexOf(".");
-            const grandparentId = parentId.substr(0, index);
-            const childIndex = parseInt(parentId.substr(index + 1));
+            const grandparentId = parentId.substring(0, index);
+            const childIndex = parseInt(parentId.substring(index + 1));
             this.addTargetDescriptor(grandparentId, parentId, childIndex);
         }
 
@@ -129,6 +95,20 @@ class CompilationContext implements HTMLTemplateCompilationResult {
 
         descriptors[targetId] = descriptor;
     }
+
+    public createView(hostBindingTarget?: Element): HTMLView {
+        const fragment = this.fragment.cloneNode(true) as DocumentFragment;
+        const targets = Object.create(this.proto);
+
+        targets.r = fragment;
+        targets.h = hostBindingTarget ?? fragment;
+
+        for (const id of this.targetIds) {
+            targets[id]; // trigger locator
+        }
+
+        return new HTMLView(fragment, this.factories, targets);
+    }
 }
 
 const marker = Markup.marker;
@@ -265,10 +245,9 @@ function compileNode(
 }
 
 /**
- * Compiles a template and associated directives into a raw compilation
- * result which include a cloneable DocumentFragment and factories capable
- * of attaching runtime behavior to nodes within the fragment.
- * @param template - The template to compile.
+ * Compiles a template and associated directives into a compilation
+ * result which can be used to create views.
+ * @param html - The html string or template element to compile.
  * @param directives - The directives referenced by the template.
  * @remarks
  * The template that is provided for compilation is altered in-place
@@ -277,9 +256,24 @@ function compileNode(
  * @public
  */
 export function compileTemplate(
-    template: HTMLTemplateElement,
+    html: string | HTMLTemplateElement,
     directives: ReadonlyArray<HTMLDirective>
 ): HTMLTemplateCompilationResult {
+    let template: HTMLTemplateElement;
+
+    if (isString(html)) {
+        template = document.createElement("template");
+        template.innerHTML = DOM.createHTML(html);
+
+        const fec = template.content.firstElementChild;
+
+        if (fec !== null && fec.tagName === "TEMPLATE") {
+            template = fec as HTMLTemplateElement;
+        }
+    } else {
+        template = html;
+    }
+
     // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
     const fragment = document.adoptNode(template.content);
     const context = new CompilationContext(fragment, directives);
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index 44c9f3237e2..3f466c9f423 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -1,4 +1,3 @@
-import { Markup } from "./markup.js";
 import { isFunction } from "../interfaces.js";
 import type { Splice } from "../observation/array-change-records.js";
 import { enableArrayObservation } from "../observation/array-observer.js";
@@ -11,6 +10,7 @@ import {
     Observable,
 } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
+import { Markup } from "./markup.js";
 import { HTMLDirective, ViewBehaviorTargets } from "./html-directive.js";
 import type { CaptureType, SyntheticViewTemplate } from "./template.js";
 import { HTMLView, SyntheticView } from "./view.js";
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 4d9da0160c1..cedf6b000b3 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -1,11 +1,9 @@
-import { DOM } from "../dom.js";
 import { isFunction, isString } from "../interfaces.js";
 import { Binding, defaultExecutionContext } from "../observation/observable.js";
 import { bind, oneTime } from "./binding.js";
-import { compileTemplate } from "./compiler.js";
-import type { HTMLTemplateCompilationResult } from "./compiler.js";
+import { compileTemplate as compileFASTTemplate } from "./compiler.js";
 import { AspectedHTMLDirective, HTMLDirective } from "./html-directive.js";
-import { ElementView, HTMLView, SyntheticView } from "./view.js";
+import type { ElementView, HTMLView, SyntheticView } from "./view.js";
 
 /**
  * A template capable of creating views specifically for rendering custom elements.
@@ -43,6 +41,36 @@ export interface SyntheticViewTemplate<TSource = any, TParent = any, TGrandparen
     create(): SyntheticView<TSource, TParent, TGrandparent>;
 }
 
+/**
+ * The result of a template compilation operation.
+ * @public
+ */
+export interface HTMLTemplateCompilationResult {
+    /**
+     * Creates a view instance.
+     * @param hostBindingTarget - The host binding target for the view.
+     */
+    createView(hostBindingTarget?: Element): HTMLView;
+}
+
+/**
+ * A function capable of compiling a template from the preprocessed form produced
+ * by the html template function into a result that can instantiate views.
+ * @public
+ */
+export type HTMLTemplateCompiler = (
+    /**
+     * The preprocessed HTML string or template to compile.
+     */
+    html: string | HTMLTemplateElement,
+    /**
+     * The directives used within the html that is being compiled.
+     */
+    directives: readonly HTMLDirective[]
+) => HTMLTemplateCompilationResult;
+
+let compileTemplate: HTMLTemplateCompiler;
+
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
@@ -83,33 +111,10 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any>
      */
     public create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent> {
         if (this.result === null) {
-            let template: HTMLTemplateElement;
-            const html = this.html;
-
-            if (isString(html)) {
-                template = document.createElement("template");
-                template.innerHTML = DOM.createHTML(html);
-
-                const fec = template.content.firstElementChild;
-
-                if (fec !== null && fec.tagName === "TEMPLATE") {
-                    template = fec as HTMLTemplateElement;
-                }
-            } else {
-                template = html;
-            }
-
-            this.result = compileTemplate(template, this.directives);
+            this.result = compileTemplate(this.html, this.directives);
         }
 
-        const result = this.result;
-        const fragment = result.fragment.cloneNode(true) as DocumentFragment;
-
-        return new HTMLView<TSource, TParent, TGrandparent>(
-            fragment,
-            result.factories,
-            result.createTargets(fragment, hostBindingTarget)
-        );
+        return this.result!.createView(hostBindingTarget);
     }
 
     /**
@@ -129,8 +134,19 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any>
         view.appendTo(host);
         return view;
     }
+
+    /**
+     * Sets the default compiler that will be used by the ViewTemplate whenever
+     * it needs to compile a view preprocessed with the html template function.
+     * @param compiler - The compiler to use when compiling templates.
+     */
+    public static setDefaultCompiler(compiler: HTMLTemplateCompiler): void {
+        compileTemplate = compiler;
+    }
 }
 
+ViewTemplate.setDefaultCompiler(compileFASTTemplate);
+
 // Much thanks to LitHTML for working this out!
 const lastAttributeNameRegex =
     /* eslint-disable-next-line no-control-regex */
@@ -154,7 +170,7 @@ export type TemplateValue<TSource, TParent = any> =
     | CaptureType<TSource>;
 
 /**
- * Transforms a template literal string into a renderable ViewTemplate.
+ * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.
  * @param values - The values that are interpolated with the string fragments.
  * @remarks

From 0fa34f8320882412d11bda77ba437f73a421baad Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Mon, 14 Mar 2022 13:29:12 -0400
Subject: [PATCH 083/135] feat: create unified API for parsing markers (#5727)

* feat: create unified API for parsing markers

* fix: correct logic for inserting stable first node

* Change files

* refactor: tersify compiler comment first node check

* fix: correct some API types on the Parser

* change directive op type to use return type of Parser.aggregate()

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...-0e2b9162-79c1-43de-adf5-13989cd29ee1.json |  7 ++++
 .../fast-element/docs/api-report.md           | 11 +++---
 .../src/components/controller.spec.ts         |  2 +-
 .../fast-element/src/templating/compiler.ts   | 32 ++++++++---------
 .../fast-element/src/templating/markup.ts     | 35 ++++++-------------
 .../fast-ssr/src/template-parser/op-codes.ts  |  6 ++--
 .../template-parser/template-parser.spec.ts   |  1 -
 7 files changed, 41 insertions(+), 53 deletions(-)
 create mode 100644 change/@microsoft-fast-element-0e2b9162-79c1-43de-adf5-13989cd29ee1.json

diff --git a/change/@microsoft-fast-element-0e2b9162-79c1-43de-adf5-13989cd29ee1.json b/change/@microsoft-fast-element-0e2b9162-79c1-43de-adf5-13989cd29ee1.json
new file mode 100644
index 00000000000..95d0f81a395
--- /dev/null
+++ b/change/@microsoft-fast-element-0e2b9162-79c1-43de-adf5-13989cd29ee1.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: create unified API for parsing markers",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 61d4c91a073..7a6863579ec 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -49,7 +49,7 @@ export class AttributeDefinition implements Accessor {
     onAttributeChangedCallback(element: HTMLElement, value: any): void;
     readonly Owner: Function;
     setValue(source: HTMLElement, newValue: any): void;
-    }
+}
 
 // @public
 export type AttributeMode = "reflect" | "boolean" | "fromView";
@@ -395,11 +395,9 @@ export const enum KernelServiceId {
 
 // @public
 export const Markup: Readonly<{
-    marker: string;
     interpolation(index: number): string;
     attribute(index: number): string;
     comment(index: number): string;
-    indexFromComment(node: Comment): number;
 }>;
 
 // Warning: (ae-internal-missing-underscore) The name "Mutable" should be prefixed with an underscore because the declaration is marked as @internal
@@ -459,7 +457,7 @@ export const oneTime: BindingConfig<DefaultBindingOptions> & BindingConfigResolv
 // @public
 export const Parser: Readonly<{
     parse(value: string, directives: readonly HTMLDirective[]): (string | HTMLDirective)[] | null;
-    aggregate(parts: (string | HTMLDirective)[]): InlinableHTMLDirective;
+    aggregate(parts: (string | HTMLDirective)[]): HTMLDirective;
 }>;
 
 // @public
@@ -502,14 +500,14 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
     // @internal (undocumented)
     handleChange(source: any, args: Splice[]): void;
     unbind(): void;
-    }
+}
 
 // @public
 export class RepeatDirective<TSource = any> extends HTMLDirective {
     constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
     createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource>;
     createPlaceholder: (index: number) => string;
-    }
+}
 
 // @public
 export interface RepeatOptions {
@@ -656,7 +654,6 @@ export function volatile(target: {}, name: string | Accessor, descriptor: Proper
 // @public
 export function when<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn>, templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/web-components/fast-element/src/components/controller.spec.ts b/packages/web-components/fast-element/src/components/controller.spec.ts
index 33bcd7a35da..953f2418c16 100644
--- a/packages/web-components/fast-element/src/components/controller.spec.ts
+++ b/packages/web-components/fast-element/src/components/controller.spec.ts
@@ -531,7 +531,7 @@ describe("The Controller", () => {
                 }
             ).define();
 
-            expect(root.innerHTML).to.equal("<!---->Test 2");
+            expect(root.innerHTML).to.equal("Test 2");
 
             document.body.removeChild(element);
         });
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index abbfdf8efe9..f2e57322d95 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,6 +1,6 @@
 import { isString } from "../interfaces.js";
 import { DOM } from "../dom.js";
-import { Markup, Parser } from "./markup.js";
+import { Parser } from "./markup.js";
 import { bind, oneTime } from "./binding.js";
 import type {
     AspectedHTMLDirective,
@@ -111,12 +111,6 @@ class CompilationContext implements HTMLTemplateCompilationResult {
     }
 }
 
-const marker = Markup.marker;
-
-function isMarker(node: Node): node is Comment {
-    return node && node.nodeType === 8 && (node as Comment).data.startsWith(marker);
-}
-
 function compileAttributes(
     context: CompilationContext,
     parentId: string,
@@ -228,13 +222,9 @@ function compileNode(
         case 3: // text node
             return compileContent(context, node as Text, parentId, nodeId, nodeIndex);
         case 8: // comment
-            if (isMarker(node)) {
-                context.addFactory(
-                    context.directives[Markup.indexFromComment(node)],
-                    parentId,
-                    nodeId,
-                    nodeIndex
-                );
+            const parts = Parser.parse((node as Comment).data, context.directives);
+            if (parts !== null) {
+                context.addFactory(Parser.aggregate(parts), parentId, nodeId, nodeIndex);
             }
             break;
     }
@@ -244,6 +234,14 @@ function compileNode(
     return next;
 }
 
+function isMarker(node: Node, directives: ReadonlyArray<HTMLDirective>): boolean {
+    return (
+        node &&
+        node.nodeType == 8 &&
+        Parser.parse((node as Comment).data, directives) !== null
+    );
+}
+
 /**
  * Compiles a template and associated directives into a compilation
  * result which can be used to create views.
@@ -284,11 +282,11 @@ export function compileTemplate(
         // because something like a when, repeat, etc. could add nodes before the marker.
         // To mitigate this, we insert a stable first node. However, if we insert a node,
         // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-        isMarker(fragment.firstChild!) ||
-        // Or if there is only one node, it means the template's content
+        isMarker(fragment.firstChild!, directives) ||
+        // Or if there is only one node and a directive, it means the template's content
         // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
         // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
-        fragment.childNodes.length === 1
+        (fragment.childNodes.length === 1 && directives.length)
     ) {
         fragment.insertBefore(document.createComment(""), fragment.firstChild);
     }
diff --git a/packages/web-components/fast-element/src/templating/markup.ts b/packages/web-components/fast-element/src/templating/markup.ts
index 8c66bcf54cd..327c9fe86d5 100644
--- a/packages/web-components/fast-element/src/templating/markup.ts
+++ b/packages/web-components/fast-element/src/templating/markup.ts
@@ -18,11 +18,6 @@ export const nextId = (): string => `${marker}-${++id}`;
  * @public
  */
 export const Markup = Object.freeze({
-    /**
-     * Gets the unique marker used by FAST to annotate templates.
-     */
-    marker,
-
     /**
      * Creates a placeholder string suitable for marking out a location *within*
      * an attribute value or HTML content.
@@ -53,15 +48,7 @@ export const Markup = Object.freeze({
      * Used internally by structural directives such as `repeat`.
      */
     comment(index: number): string {
-        return `<!--${marker}:${index}-->`;
-    },
-
-    /**
-     * Given a marker node, extract the {@link HTMLDirective} index from the placeholder.
-     * @param node - The marker node to extract the index from.
-     */
-    indexFromComment(node: Comment): number {
-        return parseInt(node.data.replace(`${marker}:`, ""));
+        return `<!--${interpolationStart}${index}${interpolationEnd}-->`;
     },
 });
 
@@ -82,16 +69,16 @@ export const Parser = Object.freeze({
         value: string,
         directives: readonly HTMLDirective[]
     ): (string | HTMLDirective)[] | null {
-        const valueParts = value.split(interpolationStart);
+        const parts = value.split(interpolationStart);
 
-        if (valueParts.length === 1) {
+        if (parts.length === 1) {
             return null;
         }
 
-        const bindingParts: (string | HTMLDirective)[] = [];
+        const result: (string | HTMLDirective)[] = [];
 
-        for (let i = 0, ii = valueParts.length; i < ii; ++i) {
-            const current = valueParts[i];
+        for (let i = 0, ii = parts.length; i < ii; ++i) {
+            const current = parts[i];
             const index = current.indexOf(interpolationEnd);
             let literal: string | HTMLDirective;
 
@@ -99,16 +86,16 @@ export const Parser = Object.freeze({
                 literal = current;
             } else {
                 const directiveIndex = parseInt(current.substring(0, index));
-                bindingParts.push(directives[directiveIndex]);
+                result.push(directives[directiveIndex]);
                 literal = current.substring(index + interpolationEndLength);
             }
 
             if (literal !== "") {
-                bindingParts.push(literal);
+                result.push(literal);
             }
         }
 
-        return bindingParts;
+        return result;
     },
 
     /**
@@ -117,9 +104,9 @@ export const Parser = Object.freeze({
      * directives.
      * @returns A single inline directive that aggregates the behavior of all the parts.
      */
-    aggregate(parts: (string | HTMLDirective)[]): InlinableHTMLDirective {
+    aggregate(parts: (string | HTMLDirective)[]): HTMLDirective {
         if (parts.length === 1) {
-            return parts[0] as InlinableHTMLDirective;
+            return parts[0] as HTMLDirective;
         }
 
         let aspect: string | undefined;
diff --git a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
index 669711ca992..18c1ee88d25 100644
--- a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
@@ -1,4 +1,4 @@
-import { InlinableHTMLDirective } from "@microsoft/fast-element";
+import { HTMLDirective } from "@microsoft/fast-element";
 import { AttributeType } from "./attributes.js";
 
 /**
@@ -62,7 +62,7 @@ export type CustomElementShadowOp = {
  */
 export type DirectiveOp = {
     type: OpType.directive;
-    directive: InlinableHTMLDirective;
+    directive: HTMLDirective;
 };
 
 /**
@@ -70,7 +70,7 @@ export type DirectiveOp = {
  */
 export type AttributeBindingOp = {
     type: OpType.attributeBinding;
-    directive: InlinableHTMLDirective;
+    directive: HTMLDirective;
     name: string;
     attributeType: AttributeType;
     useCustomElementInstance: boolean;
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
index dc50af0d681..c6287537b2f 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
@@ -38,7 +38,6 @@ test.describe("parseTemplateToOpCodes", () => {
             const code = codes[0] as DirectiveOp;
             expect(codes.length).toBe(1);
             expect(code.type).toBe(OpType.directive);
-            expect(code.directive.binding(null, defaultExecutionContext)).toBe("Hello World.")
     });
     test("should sandwich directive ops between text ops when binding native element content", () => {
 

From a8b52f5428abeefc79e6ee4187159a483e0042a1 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Tue, 15 Mar 2022 13:22:15 -0400
Subject: [PATCH 084/135] feat: aspected html directive exposes metadata
 (#5739)

* feat: aspected html directive exposes metadata

* test: expand tests around aspected directives

* Change files

* chore: add missing comment to change file

* replace Parser with Compiler

* fix: remove dependency on this from markup helpers

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...-4013c3d3-7d0e-405e-b3d0-c516701f2438.json |   7 +
 .../fast-element/docs/api-report.md           |  55 ++----
 .../web-components/fast-element/src/index.ts  |   1 -
 .../fast-element/src/templating/binding.ts    |  83 ++++-----
 .../src/templating/compiler.spec.ts           |   4 +-
 .../fast-element/src/templating/compiler.ts   | 176 +++++++++++++-----
 .../src/templating/html-directive.ts          |  71 +++++--
 .../fast-element/src/templating/markup.ts     |  55 +-----
 .../src/templating/template.spec.ts           | 125 +++++++++++--
 .../fast-element/src/templating/template.ts   |  35 +---
 .../src/template-parser/template-parser.ts    |   6 +-
 11 files changed, 372 insertions(+), 246 deletions(-)
 create mode 100644 change/@microsoft-fast-element-4013c3d3-7d0e-405e-b3d0-c516701f2438.json

diff --git a/change/@microsoft-fast-element-4013c3d3-7d0e-405e-b3d0-c516701f2438.json b/change/@microsoft-fast-element-4013c3d3-7d0e-405e-b3d0-c516701f2438.json
new file mode 100644
index 00000000000..949fd2a6d79
--- /dev/null
+++ b/change/@microsoft-fast-element-4013c3d3-7d0e-405e-b3d0-c516701f2438.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: aspected html directive exposes metadata",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 7a6863579ec..80789753aad 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -16,9 +16,13 @@ export interface Accessor {
 
 // @public
 export abstract class AspectedHTMLDirective extends HTMLDirective {
+    // Warning: (ae-forgotten-export) The symbol "Aspect" needs to be exported by the entry point index.d.ts
+    abstract readonly aspect: Aspect;
+    abstract readonly binding?: Binding;
+    abstract captureSource(source: string): void;
     createPlaceholder: (index: number) => string;
-    // (undocumented)
-    abstract setAspect(value: string): void;
+    abstract readonly source: string;
+    abstract readonly target: string;
 }
 
 // @public
@@ -80,20 +84,7 @@ export interface BindingConfig<T = any> {
 }
 
 // @alpha (undocumented)
-export interface BindingMode {
-    // (undocumented)
-    attribute: BindingType;
-    // (undocumented)
-    booleanAttribute: BindingType;
-    // (undocumented)
-    content: BindingType;
-    // (undocumented)
-    event: BindingType;
-    // (undocumented)
-    property: BindingType;
-    // (undocumented)
-    tokenList: BindingType;
-}
+export type BindingMode = Record<Aspect, BindingType>;
 
 // @public
 export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier {
@@ -140,7 +131,16 @@ export class ChildrenDirective extends NodeObservationDirective<ChildrenDirectiv
 export type ChildrenDirectiveOptions<T = any> = ChildListDirectiveOptions<T> | SubtreeDirectiveOptions<T>;
 
 // @public
-export function compileTemplate(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): HTMLTemplateCompilationResult;
+export type CompilationStrategy = (
+html: string | HTMLTemplateElement,
+directives: readonly HTMLDirective[]) => HTMLTemplateCompilationResult;
+
+// @public
+export const Compiler: {
+    compile(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): HTMLTemplateCompilationResult;
+    setDefaultStrategy(strategy: CompilationStrategy): void;
+    aggregate(parts: (string | HTMLDirective)[]): HTMLDirective;
+};
 
 // @public
 export type ComposableStyles = string | ElementStyles | CSSStyleSheet;
@@ -350,11 +350,6 @@ export interface HTMLTemplateCompilationResult {
     createView(hostBindingTarget?: Element): HTMLView;
 }
 
-// @public
-export type HTMLTemplateCompiler = (
-html: string | HTMLTemplateElement,
-directives: readonly HTMLDirective[]) => HTMLTemplateCompilationResult;
-
 // @public
 export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implements ElementView<TSource, TParent, TGrandparent>, SyntheticView<TSource, TParent, TGrandparent> {
     constructor(fragment: DocumentFragment, factories: ReadonlyArray<ViewBehaviorFactory>, targets: ViewBehaviorTargets);
@@ -371,14 +366,6 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implemen
     unbind(): void;
 }
 
-// @public
-export abstract class InlinableHTMLDirective extends AspectedHTMLDirective {
-    // (undocumented)
-    abstract readonly binding: Binding;
-    // (undocumented)
-    abstract readonly rawAspect?: string;
-}
-
 // Warning: (ae-internal-missing-underscore) The name "KernelServiceId" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
@@ -395,9 +382,9 @@ export const enum KernelServiceId {
 
 // @public
 export const Markup: Readonly<{
-    interpolation(index: number): string;
-    attribute(index: number): string;
-    comment(index: number): string;
+    interpolation: (index: number) => string;
+    attribute: (index: number) => string;
+    comment: (index: number) => string;
 }>;
 
 // Warning: (ae-internal-missing-underscore) The name "Mutable" should be prefixed with an underscore because the declaration is marked as @internal
@@ -457,7 +444,6 @@ export const oneTime: BindingConfig<DefaultBindingOptions> & BindingConfigResolv
 // @public
 export const Parser: Readonly<{
     parse(value: string, directives: readonly HTMLDirective[]): (string | HTMLDirective)[] | null;
-    aggregate(parts: (string | HTMLDirective)[]): HTMLDirective;
 }>;
 
 // @public
@@ -645,7 +631,6 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any> impl
     readonly directives: ReadonlyArray<HTMLDirective>;
     readonly html: string | HTMLTemplateElement;
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
-    static setDefaultCompiler(compiler: HTMLTemplateCompiler): void;
 }
 
 // @public
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index a947c4cb003..a55722f21a6 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -41,7 +41,6 @@ export {
     ViewBehaviorFactory,
     HTMLDirective,
     AspectedHTMLDirective,
-    InlinableHTMLDirective,
 } from "./templating/html-directive.js";
 export * from "./templating/ref.js";
 export * from "./templating/when.js";
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index b6e0ebae64b..57cae98380a 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -7,7 +7,8 @@ import {
     Observable,
 } from "../observation/observable.js";
 import {
-    InlinableHTMLDirective,
+    Aspect,
+    AspectedHTMLDirective,
     ViewBehavior,
     ViewBehaviorTargets,
 } from "./html-directive.js";
@@ -38,14 +39,7 @@ export const notSupportedBindingType: BindingType = () => {
 /**
  * @alpha
  */
-export interface BindingMode {
-    attribute: BindingType;
-    booleanAttribute: BindingType;
-    property: BindingType;
-    content: BindingType;
-    tokenList: BindingType;
-    event: BindingType;
-}
+export type BindingMode = Record<Aspect, BindingType>;
 
 /**
  * @alpha
@@ -252,14 +246,12 @@ class TargetUpdateBinding extends BindingBase {
         eventType: BindingType = notSupportedBindingType
     ): BindingMode {
         return Object.freeze({
-            attribute: this.createType(DOM.setAttribute),
-            booleanAttribute: this.createType(DOM.setBooleanAttribute),
-            property: this.createType(
-                (target, aspect, value) => (target[aspect] = value)
-            ),
-            content: createContentBinding(this).createType(updateContentTarget),
-            tokenList: this.createType(updateTokenListTarget),
-            event: eventType,
+            [Aspect.attribute]: this.createType(DOM.setAttribute),
+            [Aspect.booleanAttribute]: this.createType(DOM.setBooleanAttribute),
+            [Aspect.property]: this.createType((t, a, v) => (t[a] = v)),
+            [Aspect.content]: createContentBinding(this).createType(updateContentTarget),
+            [Aspect.tokenList]: this.createType(updateTokenListTarget),
+            [Aspect.event]: eventType,
         });
     }
 
@@ -274,7 +266,7 @@ class OneTimeBinding extends TargetUpdateBinding {
         const target = targets[directive.targetId];
         this.updateTarget(
             target,
-            directive.aspect!,
+            directive.target!,
             directive.binding(source, context),
             source,
             context
@@ -306,7 +298,7 @@ class OnSignalBinding extends TargetUpdateBinding {
         const handler = (target[directive.uniqueId] = () => {
             this.updateTarget(
                 target,
-                directive.aspect!,
+                directive.target!,
                 directive.binding(source, context),
                 source,
                 context
@@ -378,7 +370,7 @@ class OnChangeBinding extends TargetUpdateBinding {
 
         this.updateTarget(
             target,
-            directive.aspect!,
+            directive.target!,
             observer.observe(source, context),
             source,
             context
@@ -401,7 +393,7 @@ class OnChangeBinding extends TargetUpdateBinding {
         const context = (observer as any).context;
         this.updateTarget(
             target,
-            this.directive.aspect!,
+            this.directive.target!,
             observer.observe(source, context!),
             source,
             context
@@ -430,7 +422,7 @@ class EventListener extends BindingBase {
         const target = targets[directive.targetId] as FASTEventSource;
         target.$fastSource = source;
         target.$fastContext = context;
-        target.addEventListener(directive.aspect!, this, directive.options);
+        target.addEventListener(directive.target!, this, directive.options);
     }
 
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
@@ -440,7 +432,7 @@ class EventListener extends BindingBase {
     protected removeEventListener(target: FASTEventSource): void {
         target.$fastSource = null;
         target.$fastContext = null;
-        target.removeEventListener(this.directive.aspect!, this, this.directive.options);
+        target.removeEventListener(this.directive.target!, this, this.directive.options);
     }
 
     handleEvent(event: Event): void {
@@ -504,11 +496,12 @@ export const signal = <T = any>(options: string | Binding<T>): BindingConfig<T>
 /**
  * @internal
  */
-export class HTMLBindingDirective extends InlinableHTMLDirective {
-    private factory!: BindingBehaviorFactory;
+export class HTMLBindingDirective extends AspectedHTMLDirective {
+    private factory: BindingBehaviorFactory | null = null;
 
-    public readonly rawAspect?: string;
-    public readonly aspect?: string;
+    public readonly source: string = "";
+    public readonly target: string = "";
+    public readonly aspect: Aspect = Aspect.content;
 
     public constructor(
         public binding: Binding,
@@ -518,8 +511,8 @@ export class HTMLBindingDirective extends InlinableHTMLDirective {
         super();
     }
 
-    public setAspect(value: string): void {
-        (this as Mutable<this>).rawAspect = value;
+    public captureSource(value: string): void {
+        (this as Mutable<this>).source = value;
 
         if (!value) {
             return;
@@ -527,44 +520,48 @@ export class HTMLBindingDirective extends InlinableHTMLDirective {
 
         switch (value[0]) {
             case ":":
-                (this as Mutable<this>).aspect = value.substr(1);
-                switch (this.aspect) {
+                (this as Mutable<this>).target = value.substring(1);
+                switch (this.target) {
                     case "innerHTML":
                         const binding = this.binding;
                         /* eslint-disable-next-line */
                         this.binding = (s, c) => DOM.createHTML(binding(s, c));
-                        this.factory = this.mode.property(this);
+                        (this as Mutable<this>).aspect = Aspect.property;
                         break;
                     case "classList":
-                        this.factory = this.mode.tokenList(this);
+                        (this as Mutable<this>).aspect = Aspect.tokenList;
                         break;
                     default:
-                        this.factory = this.mode.property(this);
+                        (this as Mutable<this>).aspect = Aspect.property;
                         break;
                 }
                 break;
             case "?":
-                (this as Mutable<this>).aspect = value.substr(1);
-                this.factory = this.mode.booleanAttribute(this);
+                (this as Mutable<this>).target = value.substring(1);
+                (this as Mutable<this>).aspect = Aspect.booleanAttribute;
                 break;
             case "@":
-                (this as Mutable<this>).aspect = value.substr(1);
-                this.factory = this.mode.event(this);
+                (this as Mutable<this>).target = value.substring(1);
+                (this as Mutable<this>).aspect = Aspect.event;
                 break;
             default:
                 if (value === "class") {
-                    (this as Mutable<this>).aspect = "className";
-                    this.factory = this.mode.property(this);
+                    (this as Mutable<this>).target = "className";
+                    (this as Mutable<this>).aspect = Aspect.property;
                 } else {
-                    (this as Mutable<this>).aspect = value;
-                    this.factory = this.mode.attribute(this);
+                    (this as Mutable<this>).target = value;
+                    (this as Mutable<this>).aspect = Aspect.attribute;
                 }
                 break;
         }
     }
 
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
-        return (this.factory ?? this.mode.content(this)).createBehavior(targets);
+        if (this.factory == null) {
+            this.factory = this.mode[this.aspect](this);
+        }
+
+        return this.factory.createBehavior(targets);
     }
 }
 
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index cb7b9a6f1c5..3471a0a9724 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -7,7 +7,7 @@ import { css } from "../styles/css";
 import type { StyleTarget } from "../styles/element-styles";
 import { toHTML, uniqueElementName } from "../__test__/helpers";
 import { bind, HTMLBindingDirective } from "./binding";
-import { compileTemplate } from "./compiler";
+import { Compiler } from "./compiler";
 import type { HTMLDirective, ViewBehaviorFactory } from "./html-directive";
 import { html } from "./template";
 
@@ -22,7 +22,7 @@ interface CompilationResultInternals {
 
 describe("The template compiler", () => {
     function compile(html: string, directives: HTMLDirective[]) {
-        return compileTemplate(html, directives) as any as CompilationResultInternals;
+        return Compiler.compile(html, directives) as any as CompilationResultInternals;
     }
 
     function inline(index: number) {
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index f2e57322d95..53f60b724c6 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,5 +1,6 @@
 import { isString } from "../interfaces.js";
 import { DOM } from "../dom.js";
+import type { ExecutionContext } from "../observation/observable.js";
 import { Parser } from "./markup.js";
 import { bind, oneTime } from "./binding.js";
 import type {
@@ -7,7 +8,7 @@ import type {
     HTMLDirective,
     ViewBehaviorFactory,
 } from "./html-directive.js";
-import type { HTMLTemplateCompilationResult } from "./template.js";
+import type { HTMLTemplateCompilationResult as TemplateCompilationResult } from "./template.js";
 import { HTMLView } from "./view.js";
 
 const targetIdFrom = (parentId: string, nodeIndex: number): string =>
@@ -25,7 +26,7 @@ const next: NextNode = {
     node: null as ChildNode | null,
 };
 
-class CompilationContext implements HTMLTemplateCompilationResult {
+class CompilationContext implements TemplateCompilationResult {
     private proto: any = null;
     private targetIds = new Set<string>();
     private descriptors: PropertyDescriptorMap = {};
@@ -51,7 +52,7 @@ class CompilationContext implements HTMLTemplateCompilationResult {
         this.factories.push(factory);
     }
 
-    public freeze(): HTMLTemplateCompilationResult {
+    public freeze(): TemplateCompilationResult {
         this.proto = Object.create(null, this.descriptors);
         return this;
     }
@@ -131,10 +132,11 @@ function compileAttributes(
         if (parseResult === null) {
             if (includeBasicValues) {
                 result = bind(() => attrValue, oneTime) as AspectedHTMLDirective;
-                (result as AspectedHTMLDirective).setAspect(attr.name);
+                (result as AspectedHTMLDirective).captureSource(attr.name);
             }
         } else {
-            result = Parser.aggregate(parseResult);
+            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+            result = Compiler.aggregate(parseResult);
         }
 
         if (result !== null) {
@@ -224,7 +226,13 @@ function compileNode(
         case 8: // comment
             const parts = Parser.parse((node as Comment).data, context.directives);
             if (parts !== null) {
-                context.addFactory(Parser.aggregate(parts), parentId, nodeId, nodeIndex);
+                /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+                context.addFactory(
+                    Compiler.aggregate(parts),
+                    parentId,
+                    nodeId,
+                    nodeIndex
+                );
             }
             break;
     }
@@ -243,55 +251,125 @@ function isMarker(node: Node, directives: ReadonlyArray<HTMLDirective>): boolean
 }
 
 /**
- * Compiles a template and associated directives into a compilation
- * result which can be used to create views.
- * @param html - The html string or template element to compile.
- * @param directives - The directives referenced by the template.
- * @remarks
- * The template that is provided for compilation is altered in-place
- * and cannot be compiled again. If the original template must be preserved,
- * it is recommended that you clone the original and pass the clone to this API.
+ * A function capable of compiling a template from the preprocessed form produced
+ * by the html template function into a result that can instantiate views.
  * @public
  */
-export function compileTemplate(
+export type CompilationStrategy = (
+    /**
+     * The preprocessed HTML string or template to compile.
+     */
     html: string | HTMLTemplateElement,
-    directives: ReadonlyArray<HTMLDirective>
-): HTMLTemplateCompilationResult {
-    let template: HTMLTemplateElement;
+    /**
+     * The directives used within the html that is being compiled.
+     */
+    directives: readonly HTMLDirective[]
+) => TemplateCompilationResult;
 
-    if (isString(html)) {
-        template = document.createElement("template");
-        template.innerHTML = DOM.createHTML(html);
+const templateTag = "TEMPLATE";
 
-        const fec = template.content.firstElementChild;
+/**
+ * Common APIs related to compilation.
+ * @public
+ */
+export const Compiler = {
+    /**
+     * Compiles a template and associated directives into a compilation
+     * result which can be used to create views.
+     * @param html - The html string or template element to compile.
+     * @param directives - The directives referenced by the template.
+     * @remarks
+     * The template that is provided for compilation is altered in-place
+     * and cannot be compiled again. If the original template must be preserved,
+     * it is recommended that you clone the original and pass the clone to this API.
+     * @public
+     */
+    compile(
+        html: string | HTMLTemplateElement,
+        directives: ReadonlyArray<HTMLDirective>
+    ): TemplateCompilationResult {
+        let template: HTMLTemplateElement;
+
+        if (isString(html)) {
+            template = document.createElement(templateTag) as HTMLTemplateElement;
+            template.innerHTML = DOM.createHTML(html);
+
+            const fec = template.content.firstElementChild;
+
+            if (fec !== null && fec.tagName === templateTag) {
+                template = fec as HTMLTemplateElement;
+            }
+        } else {
+            template = html;
+        }
 
-        if (fec !== null && fec.tagName === "TEMPLATE") {
-            template = fec as HTMLTemplateElement;
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
+        const fragment = document.adoptNode(template.content);
+        const context = new CompilationContext(fragment, directives);
+        compileAttributes(context, "", template, /* host */ "h", 0, true);
+
+        if (
+            // If the first node in a fragment is a marker, that means it's an unstable first node,
+            // because something like a when, repeat, etc. could add nodes before the marker.
+            // To mitigate this, we insert a stable first node. However, if we insert a node,
+            // that will alter the result of the TreeWalker. So, we also need to offset the target index.
+            isMarker(fragment.firstChild!, directives) ||
+            // Or if there is only one node and a directive, it means the template's content
+            // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
+            // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
+            (fragment.childNodes.length === 1 && directives.length)
+        ) {
+            fragment.insertBefore(document.createComment(""), fragment.firstChild);
         }
-    } else {
-        template = html;
-    }
 
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
-    const fragment = document.adoptNode(template.content);
-    const context = new CompilationContext(fragment, directives);
-    compileAttributes(context, "", template, /* host */ "h", 0, true);
-
-    if (
-        // If the first node in a fragment is a marker, that means it's an unstable first node,
-        // because something like a when, repeat, etc. could add nodes before the marker.
-        // To mitigate this, we insert a stable first node. However, if we insert a node,
-        // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-        isMarker(fragment.firstChild!, directives) ||
-        // Or if there is only one node and a directive, it means the template's content
-        // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
-        // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
-        (fragment.childNodes.length === 1 && directives.length)
-    ) {
-        fragment.insertBefore(document.createComment(""), fragment.firstChild);
-    }
+        compileChildren(context, fragment, /* root */ "r");
+        next.node = null; // prevent leaks
+        return context.freeze();
+    },
+
+    /**
+     * Sets the default compilation strategy that will be used by the ViewTemplate whenever
+     * it needs to compile a view preprocessed with the html template function.
+     * @param strategy - The compilation strategy to use when compiling templates.
+     */
+    setDefaultStrategy(strategy: CompilationStrategy): void {
+        this.compile = strategy;
+    },
+
+    /**
+     * Aggregates an array of strings and directives into a single directive.
+     * @param parts - A heterogeneous array of static strings interspersed with
+     * directives.
+     * @returns A single inline directive that aggregates the behavior of all the parts.
+     */
+    aggregate(parts: (string | HTMLDirective)[]): HTMLDirective {
+        if (parts.length === 1) {
+            return parts[0] as HTMLDirective;
+        }
 
-    compileChildren(context, fragment, /* root */ "r");
-    next.node = null; // prevent leaks
-    return context.freeze();
-}
+        let source: string | undefined;
+        const partCount = parts.length;
+        const finalParts = parts.map((x: string | AspectedHTMLDirective) => {
+            if (isString(x)) {
+                return (): string => x;
+            }
+
+            source = x.source || source;
+            return x.binding!;
+        });
+
+        const binding = (scope: unknown, context: ExecutionContext): string => {
+            let output = "";
+
+            for (let i = 0; i < partCount; ++i) {
+                output += finalParts[i](scope, context);
+            }
+
+            return output;
+        };
+
+        const directive = bind(binding) as AspectedHTMLDirective;
+        directive.captureSource(source!);
+        return directive;
+    },
+};
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 81a29327c6e..0bb1a532fdd 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -1,6 +1,6 @@
-import { Markup, nextId } from "./markup.js";
 import type { Behavior } from "../observation/behavior.js";
 import type { Binding, ExecutionContext } from "../observation/observable.js";
+import { Markup, nextId } from "./markup.js";
 
 /**
  * The target nodes available to a behavior.
@@ -87,13 +87,67 @@ export abstract class HTMLDirective implements ViewBehaviorFactory {
     public abstract createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
 }
 
+/**
+ * The type of HTML aspect to target.
+ */
+export enum Aspect {
+    /**
+     * An attribute.
+     */
+    attribute = 0,
+    /**
+     * A boolean attribute.
+     */
+    booleanAttribute = 1,
+    /**
+     * A property.
+     */
+    property = 2,
+    /**
+     * Content
+     */
+    content = 3,
+    /**
+     * A token list.
+     */
+    tokenList = 4,
+    /**
+     * An event.
+     */
+    event = 5,
+}
+
 /**
  * A {@link HTMLDirective} that targets a particular aspect
  * (attribute, property, event, etc.) of a node.
  * @public
  */
 export abstract class AspectedHTMLDirective extends HTMLDirective {
-    abstract setAspect(value: string): void;
+    /**
+     * The original source aspect exactly as represented in the HTML.
+     */
+    abstract readonly source: string;
+
+    /**
+     * The evaluated target aspect, determined after processing the source.
+     */
+    abstract readonly target: string;
+
+    /**
+     * The type of aspect to target.
+     */
+    abstract readonly aspect: Aspect;
+
+    /**
+     * A binding to apply to the target, if applicable.
+     */
+    abstract readonly binding?: Binding;
+
+    /**
+     * Captures the original source aspect from HTML.
+     * @param source - The original source aspect.
+     */
+    abstract captureSource(source: string): void;
 
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -102,15 +156,6 @@ export abstract class AspectedHTMLDirective extends HTMLDirective {
     public createPlaceholder: (index: number) => string = Markup.interpolation;
 }
 
-/**
- * A {@link HTMLDirective} that can be inlined within an attribute or text content.
- * @public
- */
-export abstract class InlinableHTMLDirective extends AspectedHTMLDirective {
-    abstract readonly binding: Binding;
-    abstract readonly rawAspect?: string;
-}
-
 /** @internal */
 export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirective
     implements ViewBehavior {
@@ -136,9 +181,7 @@ export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirecti
      * @remarks
      * Creates a custom attribute placeholder.
      */
-    public createPlaceholder(index: number): string {
-        return Markup.attribute(index);
-    }
+    public createPlaceholder: (index: number) => string = Markup.attribute;
 
     /**
      * Bind this behavior to the source.
diff --git a/packages/web-components/fast-element/src/templating/markup.ts b/packages/web-components/fast-element/src/templating/markup.ts
index 327c9fe86d5..71a5b2148ac 100644
--- a/packages/web-components/fast-element/src/templating/markup.ts
+++ b/packages/web-components/fast-element/src/templating/markup.ts
@@ -1,7 +1,4 @@
-import { isString } from "../interfaces.js";
-import type { ExecutionContext } from "../observation/observable.js";
-import { bind } from "./binding.js";
-import type { HTMLDirective, InlinableHTMLDirective } from "./html-directive.js";
+import type { HTMLDirective } from "./html-directive.js";
 
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 const interpolationStart = `${marker}{`;
@@ -25,9 +22,7 @@ export const Markup = Object.freeze({
      * @remarks
      * Used internally by binding directives.
      */
-    interpolation(index: number): string {
-        return `${interpolationStart}${index}${interpolationEnd}`;
-    },
+    interpolation: (index: number) => `${interpolationStart}${index}${interpolationEnd}`,
 
     /**
      * Creates a placeholder that manifests itself as an attribute on an
@@ -37,9 +32,8 @@ export const Markup = Object.freeze({
      * @remarks
      * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
      */
-    attribute(index: number): string {
-        return `${nextId()}="${this.interpolation(index)}"`;
-    },
+    attribute: (index: number) =>
+        `${nextId()}="${interpolationStart}${index}${interpolationEnd}"`,
 
     /**
      * Creates a placeholder that manifests itself as a marker within the DOM structure.
@@ -47,9 +41,7 @@ export const Markup = Object.freeze({
      * @remarks
      * Used internally by structural directives such as `repeat`.
      */
-    comment(index: number): string {
-        return `<!--${interpolationStart}${index}${interpolationEnd}-->`;
-    },
+    comment: (index: number) => `<!--${interpolationStart}${index}${interpolationEnd}-->`,
 });
 
 /**
@@ -97,41 +89,4 @@ export const Parser = Object.freeze({
 
         return result;
     },
-
-    /**
-     * Aggregates an array of strings and directives into a single directive.
-     * @param parts - A heterogeneous array of static strings interspersed with
-     * directives.
-     * @returns A single inline directive that aggregates the behavior of all the parts.
-     */
-    aggregate(parts: (string | HTMLDirective)[]): HTMLDirective {
-        if (parts.length === 1) {
-            return parts[0] as HTMLDirective;
-        }
-
-        let aspect: string | undefined;
-        const partCount = parts.length;
-        const finalParts = parts.map((x: string | InlinableHTMLDirective) => {
-            if (isString(x)) {
-                return (): string => x;
-            }
-
-            aspect = x.rawAspect || aspect;
-            return x.binding;
-        });
-
-        const binding = (scope: unknown, context: ExecutionContext): string => {
-            let output = "";
-
-            for (let i = 0; i < partCount; ++i) {
-                output += finalParts[i](scope, context);
-            }
-
-            return output;
-        };
-
-        const directive = bind(binding) as InlinableHTMLDirective;
-        directive.setAspect(aspect!);
-        return directive;
-    },
 });
diff --git a/packages/web-components/fast-element/src/templating/template.spec.ts b/packages/web-components/fast-element/src/templating/template.spec.ts
index 01fb18610c1..3a950fbc214 100644
--- a/packages/web-components/fast-element/src/templating/template.spec.ts
+++ b/packages/web-components/fast-element/src/templating/template.spec.ts
@@ -2,8 +2,8 @@ import { expect } from "chai";
 import { html, ViewTemplate } from "./template";
 import { Markup } from "./markup";
 import { HTMLBindingDirective } from "./binding";
-import { HTMLDirective } from "./html-directive";
-import { bind, Binding, InlinableHTMLDirective, ViewBehaviorTargets } from "..";
+import { AspectedHTMLDirective, Aspect, HTMLDirective } from "./html-directive";
+import { bind, Binding, ViewBehaviorTargets } from "..";
 
 describe(`The html tag template helper`, () => {
     it(`transforms a string into a ViewTemplate.`, () => {
@@ -23,7 +23,9 @@ describe(`The html tag template helper`, () => {
 
     class Model {
         value: "value";
+        doSomething() {}
     }
+
     const stringValue = "string value";
     const numberValue = 42;
     const interpolationScenarios = [
@@ -210,43 +212,117 @@ describe(`The html tag template helper`, () => {
 
             if (x.expectDirectives) {
                 x.expectDirectives.forEach((type, index) => {
-                    expect(x.template.directives[index]).to.be.instanceOf(type);
+                    const directive = x.template.directives[index];
+
+                    expect(directive).to.be.instanceOf(type);
+
+                    if (directive instanceof HTMLBindingDirective) {
+                        expect(directive.aspect).to.equal(Aspect.content);
+                    }
                 });
             }
         });
     });
 
-    it(`captures a case-sensitive property name when used with an expression`, () => {
+    it(`captures an attribute with an expression`, () => {
+        const template = html<Model>`<my-element some-attribute=${x => x.value}></my-element>`;
+        const placeholder = Markup.interpolation(0);
+        const directive = template.directives[0] as HTMLBindingDirective;
+
+        expect(template.html).to.equal(
+            `<my-element some-attribute=${placeholder}></my-element>`
+        );
+
+        expect(directive).to.be.instanceOf(HTMLBindingDirective);
+        expect(directive.source).to.equal("some-attribute");
+        expect(directive.target).to.equal("some-attribute");
+        expect(directive.aspect).to.equal(Aspect.attribute);
+    });
+
+    it(`captures an attribute with a binding`, () => {
+        const template = html<Model>`<my-element some-attribute=${bind(x => x.value)}></my-element>`;
+        const placeholder = Markup.interpolation(0);
+        const directive = template.directives[0] as HTMLBindingDirective;
+
+        expect(template.html).to.equal(
+            `<my-element some-attribute=${placeholder}></my-element>`
+        );
+
+        expect(directive).to.be.instanceOf(HTMLBindingDirective);
+        expect(directive.source).to.equal("some-attribute");
+        expect(directive.target).to.equal("some-attribute");
+        expect(directive.aspect).to.equal(Aspect.attribute);
+    });
+
+    it(`captures a boolean attribute with an expression`, () => {
+        const template = html<Model>`<my-element ?some-attribute=${x => x.value}></my-element>`;
+        const placeholder = Markup.interpolation(0);
+        const directive = template.directives[0] as HTMLBindingDirective;
+
+        expect(template.html).to.equal(
+            `<my-element ?some-attribute=${placeholder}></my-element>`
+        );
+
+        expect(directive).to.be.instanceOf(HTMLBindingDirective);
+        expect(directive.source).to.equal("?some-attribute");
+        expect(directive.target).to.equal("some-attribute");
+        expect(directive.aspect).to.equal(Aspect.booleanAttribute);
+    });
+
+    it(`captures a boolean attribute with a binding`, () => {
+        const template = html<Model>`<my-element ?some-attribute=${bind(x => x.value)}></my-element>`;
+        const placeholder = Markup.interpolation(0);
+        const directive = template.directives[0] as HTMLBindingDirective;
+
+        expect(template.html).to.equal(
+            `<my-element ?some-attribute=${placeholder}></my-element>`
+        );
+
+        expect(directive).to.be.instanceOf(HTMLBindingDirective);
+        expect(directive.source).to.equal("?some-attribute");
+        expect(directive.target).to.equal("some-attribute");
+        expect(directive.aspect).to.equal(Aspect.booleanAttribute);
+    });
+
+    it(`captures a case-sensitive property with an expression`, () => {
         const template = html<Model>`<my-element :someAttribute=${x => x.value}></my-element>`;
         const placeholder = Markup.interpolation(0);
+        const directive = template.directives[0] as HTMLBindingDirective;
 
         expect(template.html).to.equal(
             `<my-element :someAttribute=${placeholder}></my-element>`
         );
-        expect((template.directives[0] as HTMLBindingDirective).rawAspect).to.equal(
-            ":someAttribute"
-        );
+
+        expect(directive).to.be.instanceOf(HTMLBindingDirective);
+        expect(directive.source).to.equal(":someAttribute");
+        expect(directive.target).to.equal("someAttribute");
+        expect(directive.aspect).to.equal(Aspect.property);
     });
 
-    it(`captures a case-sensitive property name when used with a binding`, () => {
+    it(`captures a case-sensitive property with a binding`, () => {
         const template = html<Model>`<my-element :someAttribute=${bind(x => x.value)}></my-element>`;
         const placeholder = Markup.interpolation(0);
+        const directive = template.directives[0] as HTMLBindingDirective;
 
         expect(template.html).to.equal(
             `<my-element :someAttribute=${placeholder}></my-element>`
         );
-        expect((template.directives[0] as HTMLBindingDirective).rawAspect).to.equal(
-            ":someAttribute"
-        );
+
+        expect(directive).to.be.instanceOf(HTMLBindingDirective);
+        expect(directive.source).to.equal(":someAttribute");
+        expect(directive.target).to.equal("someAttribute");
+        expect(directive.aspect).to.equal(Aspect.property);
     });
 
-    it(`captures a case-sensitive property name when used with an inline directive`, () => {
-        class TestDirective extends InlinableHTMLDirective {
+    it(`captures a case-sensitive property with an inline directive`, () => {
+        class TestDirective extends AspectedHTMLDirective {
             binding: Binding;
-            rawAspect: string;
+            source: string;
+            target: string;
+            aspect = Aspect.property;
 
-            setAspect(value) {
-                this.rawAspect = value;
+            captureSource(value) {
+                this.source = value;
             }
 
             createBehavior(targets: ViewBehaviorTargets) {
@@ -260,11 +336,26 @@ describe(`The html tag template helper`, () => {
         expect(template.html).to.equal(
             `<my-element :someAttribute=${placeholder}></my-element>`
         );
-        expect((template.directives[0] as TestDirective).rawAspect).to.equal(
+        expect((template.directives[0] as TestDirective).source).to.equal(
             ":someAttribute"
         );
     });
 
+    it(`captures a case-sensitive event when used with an expression`, () => {
+        const template = html<Model>`<my-element @someEvent=${x => x.doSomething()}></my-element>`;
+        const placeholder = Markup.interpolation(0);
+        const directive = template.directives[0] as HTMLBindingDirective;
+
+        expect(template.html).to.equal(
+            `<my-element @someEvent=${placeholder}></my-element>`
+        );
+
+        expect(directive).to.be.instanceOf(HTMLBindingDirective);
+        expect(directive.source).to.equal("@someEvent");
+        expect(directive.target).to.equal("someEvent");
+        expect(directive.aspect).to.equal(Aspect.event);
+    });
+
     it("should dispose of embedded ViewTemplate when the rendering template contains *only* the embedded template", () => {
         const embedded = html`<div id="embedded"></div>`
         const template = html`${x => embedded}`;
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index cedf6b000b3..b2f8f367226 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -1,7 +1,7 @@
 import { isFunction, isString } from "../interfaces.js";
 import { Binding, defaultExecutionContext } from "../observation/observable.js";
 import { bind, oneTime } from "./binding.js";
-import { compileTemplate as compileFASTTemplate } from "./compiler.js";
+import { Compiler } from "./compiler.js";
 import { AspectedHTMLDirective, HTMLDirective } from "./html-directive.js";
 import type { ElementView, HTMLView, SyntheticView } from "./view.js";
 
@@ -53,24 +53,6 @@ export interface HTMLTemplateCompilationResult {
     createView(hostBindingTarget?: Element): HTMLView;
 }
 
-/**
- * A function capable of compiling a template from the preprocessed form produced
- * by the html template function into a result that can instantiate views.
- * @public
- */
-export type HTMLTemplateCompiler = (
-    /**
-     * The preprocessed HTML string or template to compile.
-     */
-    html: string | HTMLTemplateElement,
-    /**
-     * The directives used within the html that is being compiled.
-     */
-    directives: readonly HTMLDirective[]
-) => HTMLTemplateCompilationResult;
-
-let compileTemplate: HTMLTemplateCompiler;
-
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
@@ -111,7 +93,7 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any>
      */
     public create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent> {
         if (this.result === null) {
-            this.result = compileTemplate(this.html, this.directives);
+            this.result = Compiler.compile(this.html, this.directives);
         }
 
         return this.result!.createView(hostBindingTarget);
@@ -134,19 +116,8 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any>
         view.appendTo(host);
         return view;
     }
-
-    /**
-     * Sets the default compiler that will be used by the ViewTemplate whenever
-     * it needs to compile a view preprocessed with the html template function.
-     * @param compiler - The compiler to use when compiling templates.
-     */
-    public static setDefaultCompiler(compiler: HTMLTemplateCompiler): void {
-        compileTemplate = compiler;
-    }
 }
 
-ViewTemplate.setDefaultCompiler(compileFASTTemplate);
-
 // Much thanks to LitHTML for working this out!
 const lastAttributeNameRegex =
     /* eslint-disable-next-line no-control-regex */
@@ -201,7 +172,7 @@ export function html<TSource = any, TParent = any, TGrandparent = any>(
             if (currentValue instanceof AspectedHTMLDirective) {
                 const match = lastAttributeNameRegex.exec(currentString);
                 if (match !== null) {
-                    currentValue.setAspect(match[2]);
+                    currentValue.captureSource(match[2]);
                 }
             }
 
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
index f2253197d40..a78cbf6c33e 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
@@ -2,7 +2,7 @@
  * This code is largely a fork of lit's rendering implementation: https://github.com/lit/lit/blob/main/packages/labs/ssr/src/lib/render-lit-html.ts
  * with changes as necessary to render FAST components. A big thank you to those who contributed to lit's code above.
  */
-import { Parser, ViewTemplate } from "@microsoft/fast-element";
+import { Compiler, Parser, ViewTemplate } from "@microsoft/fast-element";
 import {
     Attribute,
     DefaultTreeCommentNode,
@@ -172,7 +172,7 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
                             attributeType === AttributeType.content
                                 ? current.name
                                 : current.name.substring(1),
-                        directive: Parser.aggregate(parsed),
+                        directive: Compiler.aggregate(parsed),
                         attributeType,
                         useCustomElementInstance: Boolean(node.isDefinedCustomElement),
                     });
@@ -296,7 +296,7 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
                     flushTo(node.sourceCodeLocation!.startOffset);
                     opCodes.push({
                         type: OpType.directive,
-                        directive: Parser.aggregate(parsed),
+                        directive: Compiler.aggregate(parsed),
                     });
                     skipTo(node.sourceCodeLocation!.endOffset);
                 }

From 6bd1fbb09eb944090801fad577ec4658bb8da454 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Thu, 17 Mar 2022 09:18:51 -0400
Subject: [PATCH 085/135] refactor: extract polyfill and polyfill-like code to
 an optional module (#5752)

* refactor: extract polyfill and polyfill-like code to an optional module

* Change files

* fix: correct build break in fast-foundation from removing $global

* fix: update templates to use classList and fix classList bug

* Change files

* feat: require trusted types for bindings to innerHtml & move core policy

* fix: bug that arises when there are real trusted types

* refactor: minor internal cleanup in the polyfills

* fix: remove polyfill external module dependency

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-06c5f5c1-f172-4ba0-864e-9d9b494adda5.json |   7 +
 ...-e05243ea-6de7-4694-abe1-2c4b64a25077.json |   7 +
 .../fast-element/docs/api-report.md           |  80 +++++++----
 .../fast-element/src/components/controller.ts |   4 +-
 .../src/components/fast-definitions.ts        |   4 +-
 .../web-components/fast-element/src/dom.ts    |  45 +------
 .../web-components/fast-element/src/index.ts  |  46 +++----
 .../fast-element/src/interfaces.ts            | 104 +++++++++++++++
 .../src/observation/array-observer.ts         |   7 +-
 .../src/observation/observable.ts             |   4 +-
 .../fast-element/src/platform.spec.ts         |   4 +-
 .../fast-element/src/platform.ts              | 124 +-----------------
 .../fast-element/src/polyfills.ts             | 121 +++++++++++++++++
 .../fast-element/src/styles/element-styles.ts |  95 +-------------
 .../fast-element/src/styles/styles.spec.ts    |   4 +-
 .../fast-element/src/templating/binding.ts    |  21 ++-
 .../src/templating/compiler.spec.ts           |   2 +-
 .../fast-element/src/templating/compiler.ts   |  26 +++-
 .../src/templating/html-directive.ts          |   6 +-
 .../src/data-grid/data-grid-cell.template.ts  |   5 +-
 .../src/data-grid/data-grid-row.template.ts   |   2 +-
 .../src/radio/radio.template.ts               |   2 +-
 .../src/utilities/intersection-service.ts     |   4 +-
 23 files changed, 383 insertions(+), 341 deletions(-)
 create mode 100644 change/@microsoft-fast-element-06c5f5c1-f172-4ba0-864e-9d9b494adda5.json
 create mode 100644 change/@microsoft-fast-foundation-e05243ea-6de7-4694-abe1-2c4b64a25077.json
 create mode 100644 packages/web-components/fast-element/src/polyfills.ts

diff --git a/change/@microsoft-fast-element-06c5f5c1-f172-4ba0-864e-9d9b494adda5.json b/change/@microsoft-fast-element-06c5f5c1-f172-4ba0-864e-9d9b494adda5.json
new file mode 100644
index 00000000000..b37308369e8
--- /dev/null
+++ b/change/@microsoft-fast-element-06c5f5c1-f172-4ba0-864e-9d9b494adda5.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "refactor: extract polyfill and polyfill-like code to an optional module",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-e05243ea-6de7-4694-abe1-2c4b64a25077.json b/change/@microsoft-fast-foundation-e05243ea-6de7-4694-abe1-2c4b64a25077.json
new file mode 100644
index 00000000000..9532bc8d531
--- /dev/null
+++ b/change/@microsoft-fast-foundation-e05243ea-6de7-4694-abe1-2c4b64a25077.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update templates to use classList and fix classList bug",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 80789753aad..1f07eca41b9 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -4,9 +4,6 @@
 
 ```ts
 
-// @public
-export const $global: Global;
-
 // @public
 export interface Accessor {
     getValue(source: any): any;
@@ -14,9 +11,31 @@ export interface Accessor {
     setValue(source: any, value: any): void;
 }
 
+// Warning: (ae-internal-missing-underscore) The name "AdoptedStyleSheetsStrategy" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export class AdoptedStyleSheetsStrategy implements StyleStrategy {
+    constructor(styles: (string | CSSStyleSheet)[]);
+    // (undocumented)
+    addStylesTo(target: StyleTarget): void;
+    // (undocumented)
+    removeStylesFrom(target: StyleTarget): void;
+    // (undocumented)
+    readonly sheets: CSSStyleSheet[];
+}
+
+// @public
+export enum Aspect {
+    attribute = 0,
+    booleanAttribute = 1,
+    content = 3,
+    event = 5,
+    property = 2,
+    tokenList = 4
+}
+
 // @public
 export abstract class AspectedHTMLDirective extends HTMLDirective {
-    // Warning: (ae-forgotten-export) The symbol "Aspect" needs to be exported by the entry point index.d.ts
     abstract readonly aspect: Aspect;
     abstract readonly binding?: Binding;
     abstract captureSource(source: string): void;
@@ -117,7 +136,7 @@ export interface ChildListDirectiveOptions<T = any> extends NodeBehaviorOptions<
 // @public
 export function children<T = any>(propertyOrOptions: (keyof T & string) | ChildListDirectiveOptions<keyof T & string>): CaptureType<T>;
 
-// Warning: (ae-forgotten-export) The symbol "NodeObservationDirective" needs to be exported by the entry point index.d.ts
+// Warning: (ae-incompatible-release-tags) The symbol "ChildrenDirective" is marked as @public, but its signature references "NodeObservationDirective" which is marked as @internal
 //
 // @public
 export class ChildrenDirective extends NodeObservationDirective<ChildrenDirectiveOptions> {
@@ -137,6 +156,7 @@ directives: readonly HTMLDirective[]) => HTMLTemplateCompilationResult;
 
 // @public
 export const Compiler: {
+    setHTMLPolicy(policy: TrustedTypesPolicy): void;
     compile(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): HTMLTemplateCompilationResult;
     setDefaultStrategy(strategy: CompilationStrategy): void;
     aggregate(parts: (string | HTMLDirective)[]): HTMLDirective;
@@ -207,8 +227,6 @@ export const defaultExecutionContext: ExecutionContext<any, any>;
 // @public
 export const DOM: Readonly<{
     supportsAdoptedStyleSheets: boolean;
-    setHTMLPolicy(policy: TrustedTypesPolicy): void;
-    createHTML(html: string): string;
     setUpdateMode: (isAsync: boolean) => void;
     queueUpdate: (callable: Callable) => void;
     nextUpdate(): Promise<void>;
@@ -328,12 +346,6 @@ export interface FASTGlobal {
     readonly versions: string[];
 }
 
-// @public
-export type Global = typeof globalThis & {
-    trustedTypes: TrustedTypes;
-    readonly FAST: FASTGlobal;
-};
-
 // @public
 export function html<TSource = any, TParent = any, TGrandparent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]): ViewTemplate<TSource, TParent, TGrandparent>;
 
@@ -366,20 +378,6 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implemen
     unbind(): void;
 }
 
-// Warning: (ae-internal-missing-underscore) The name "KernelServiceId" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export const enum KernelServiceId {
-    // (undocumented)
-    contextEvent = 3,
-    // (undocumented)
-    elementRegistry = 4,
-    // (undocumented)
-    observable = 2,
-    // (undocumented)
-    updateQueue = 1
-}
-
 // @public
 export const Markup: Readonly<{
     interpolation: (index: number) => string;
@@ -400,6 +398,19 @@ export interface NodeBehaviorOptions<T = any> {
     property: T;
 }
 
+// Warning: (ae-internal-missing-underscore) The name "NodeObservationDirective" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export abstract class NodeObservationDirective<T extends NodeBehaviorOptions> extends StatelessAttachedAttributeDirective<T> {
+    bind(source: any, context: ExecutionContext<any, any>, targets: ViewBehaviorTargets): void;
+    protected computeNodes(target: any): Node[];
+    protected abstract disconnect(target: any): void;
+    protected abstract getNodes(target: any): Node[];
+    protected abstract observe(target: any): void;
+    unbind(source: any, context: ExecutionContext<any, any>, targets: ViewBehaviorTargets): void;
+    protected updateTarget(source: any, value: ReadonlyArray<any>): void;
+}
+
 // @public
 export interface Notifier {
     notify(args: any): void;
@@ -468,8 +479,6 @@ export class PropertyChangeNotifier implements Notifier {
 // @public
 export const ref: <T = any>(propertyName: keyof T & string) => CaptureType<T>;
 
-// Warning: (ae-forgotten-export) The symbol "StatelessAttachedAttributeDirective" needs to be exported by the entry point index.d.ts
-//
 // @public
 export class RefDirective extends StatelessAttachedAttributeDirective<string> {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
@@ -504,6 +513,8 @@ export interface RepeatOptions {
 // @public
 export function slotted<T = any>(propertyOrOptions: (keyof T & string) | SlottedDirectiveOptions<keyof T & string>): CaptureType<T>;
 
+// Warning: (ae-incompatible-release-tags) The symbol "SlottedDirective" is marked as @public, but its signature references "NodeObservationDirective" which is marked as @internal
+//
 // @public
 export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveOptions> {
     disconnect(target: EventSource): void;
@@ -530,6 +541,17 @@ export class Splice {
     removed: any[];
 }
 
+// @public
+export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirective implements ViewBehavior {
+    constructor(options: T);
+    abstract bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
+    createPlaceholder: (index: number) => string;
+    // (undocumented)
+    protected options: T;
+    abstract unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+}
+
 // @public
 export interface StyleStrategy {
     addStylesTo(target: StyleTarget): void;
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index 521d2457a9a..c2d2d3c0f75 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -1,8 +1,8 @@
-import type { Mutable } from "../interfaces.js";
+import type { Mutable, StyleTarget } from "../interfaces.js";
 import type { Behavior } from "../observation/behavior.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
 import { defaultExecutionContext, Observable } from "../observation/observable.js";
-import type { ElementStyles, StyleTarget } from "../styles/element-styles.js";
+import type { ElementStyles } from "../styles/element-styles.js";
 import type { ElementViewTemplate } from "../templating/template.js";
 import type { ElementView } from "../templating/view.js";
 import { FASTElementDefinition } from "./fast-definitions.js";
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.ts b/packages/web-components/fast-element/src/components/fast-definitions.ts
index 0b8737063ab..275dd93b7c6 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.ts
@@ -1,6 +1,6 @@
-import { isString } from "../interfaces.js";
+import { isString, KernelServiceId } from "../interfaces.js";
 import { Observable } from "../observation/observable.js";
-import { FAST, KernelServiceId } from "../platform.js";
+import { FAST } from "../platform.js";
 import { ComposableStyles, ElementStyles } from "../styles/element-styles.js";
 import type { ElementViewTemplate } from "../templating/template.js";
 import { AttributeConfiguration, AttributeDefinition } from "./attributes.js";
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index c4686a1a8eb..ebcc1f9fcdd 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -1,19 +1,10 @@
-import type { Callable } from "./interfaces.js";
-import { $global, KernelServiceId, TrustedTypesPolicy } from "./platform.js";
-
-/* eslint-disable */
-const fastHTMLPolicy: TrustedTypesPolicy = $global.trustedTypes.createPolicy(
-    "fast-html",
-    {
-        createHTML: html => html,
-    }
-);
-/* eslint-enable */
+import { Callable, KernelServiceId } from "./interfaces.js";
+import { FAST } from "./platform.js";
 
-const updateQueue = $global.FAST.getById(KernelServiceId.updateQueue, () => {
+const updateQueue = FAST.getById(KernelServiceId.updateQueue, () => {
     const tasks: Callable[] = [];
     const pendingErrors: any[] = [];
-    const rAF = $global.requestAnimationFrame;
+    const rAF = globalThis.requestAnimationFrame;
     let updateAsync = true;
 
     function throwFirstError(): void {
@@ -85,8 +76,6 @@ const updateQueue = $global.FAST.getById(KernelServiceId.updateQueue, () => {
     });
 });
 
-let htmlPolicy: TrustedTypesPolicy = fastHTMLPolicy;
-
 /**
  * Common DOM APIs.
  * @public
@@ -99,32 +88,6 @@ export const DOM = Object.freeze({
         Array.isArray((document as any).adoptedStyleSheets) &&
         "replace" in CSSStyleSheet.prototype,
 
-    /**
-     * Sets the HTML trusted types policy used by the templating engine.
-     * @param policy - The policy to set for HTML.
-     * @remarks
-     * This API can only be called once, for security reasons. It should be
-     * called by the application developer at the start of their program.
-     */
-    setHTMLPolicy(policy: TrustedTypesPolicy) {
-        if (htmlPolicy !== fastHTMLPolicy) {
-            throw new Error("The HTML policy can only be set once.");
-        }
-
-        htmlPolicy = policy;
-    },
-
-    /**
-     * Turns a string into trusted HTML using the configured trusted types policy.
-     * @param html - The string to turn into trusted HTML.
-     * @remarks
-     * Used internally by the template engine when creating templates
-     * and setting innerHTML.
-     */
-    createHTML(html: string): string {
-        return htmlPolicy.createHTML(html);
-    },
-
     /**
      * Sets the update mode used by queueUpdate.
      * @param isAsync - Indicates whether DOM updates should be asynchronous.
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index a55722f21a6..9e0a9ac3e61 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -1,28 +1,28 @@
 export * from "./platform.js";
 export * from "./templating/template.js";
 export * from "./components/fast-element.js";
-export {
-    FASTElementDefinition,
-    PartialFASTElementDefinition,
-} from "./components/fast-definitions.js";
+export * from "./components/fast-definitions.js";
 export * from "./components/attributes.js";
 export * from "./components/controller.js";
-export type { Callable, Constructable, Mutable } from "./interfaces.js";
-export * from "./templating/compiler.js";
-export {
-    ElementStyles,
+export type {
+    Callable,
+    Constructable,
+    FASTGlobal,
+    Mutable,
     StyleStrategy,
-    ConstructibleStyleStrategy,
-    ComposableStyles,
     StyleTarget,
-} from "./styles/element-styles.js";
-export { css, cssPartial } from "./styles/css.js";
-export { CSSDirective } from "./styles/css-directive.js";
+    TrustedTypes,
+    TrustedTypesPolicy,
+} from "./interfaces.js";
+export * from "./templating/compiler.js";
+export * from "./styles/element-styles.js";
+export * from "./styles/css.js";
+export * from "./styles/css-directive.js";
 export * from "./observation/observable.js";
 export * from "./observation/notifier.js";
-export { Splice } from "./observation/array-change-records.js";
-export { enableArrayObservation } from "./observation/array-observer.js";
-export { DOM } from "./dom.js";
+export * from "./observation/array-change-records.js";
+export * from "./observation/array-observer.js";
+export * from "./dom.js";
 export type { Behavior } from "./observation/behavior.js";
 export { Markup, Parser } from "./templating/markup.js";
 export {
@@ -35,21 +35,11 @@ export {
     BindingBehaviorFactory,
     DefaultBindingOptions,
 } from "./templating/binding.js";
-export {
-    ViewBehaviorTargets,
-    ViewBehavior,
-    ViewBehaviorFactory,
-    HTMLDirective,
-    AspectedHTMLDirective,
-} from "./templating/html-directive.js";
+export * from "./templating/html-directive.js";
 export * from "./templating/ref.js";
 export * from "./templating/when.js";
 export * from "./templating/repeat.js";
 export * from "./templating/slotted.js";
 export * from "./templating/children.js";
 export * from "./templating/view.js";
-export {
-    elements,
-    ElementsFilter,
-    NodeBehaviorOptions,
-} from "./templating/node-observation.js";
+export * from "./templating/node-observation.js";
diff --git a/packages/web-components/fast-element/src/interfaces.ts b/packages/web-components/fast-element/src/interfaces.ts
index 4a7991af745..59da7930884 100644
--- a/packages/web-components/fast-element/src/interfaces.ts
+++ b/packages/web-components/fast-element/src/interfaces.ts
@@ -21,6 +21,110 @@ export type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
 
+/**
+ * A policy for use with the standard trustedTypes platform API.
+ * @public
+ */
+export type TrustedTypesPolicy = {
+    /**
+     * Creates trusted HTML.
+     * @param html - The HTML to clear as trustworthy.
+     */
+    createHTML(html: string): string;
+};
+
+/**
+ * Enables working with trusted types.
+ * @public
+ */
+export type TrustedTypes = {
+    /**
+     * Creates a trusted types policy.
+     * @param name - The policy name.
+     * @param rules - The policy rules implementation.
+     */
+    createPolicy(name: string, rules: TrustedTypesPolicy): TrustedTypesPolicy;
+};
+
+/**
+ * The FAST global.
+ * @internal
+ */
+export interface FASTGlobal {
+    /**
+     * The list of loaded versions.
+     */
+    readonly versions: string[];
+
+    /**
+     * Gets a kernel value.
+     * @param id - The id to get the value for.
+     * @param initialize - Creates the initial value for the id if not already existing.
+     */
+    getById<T>(id: string | number): T | null;
+    getById<T>(id: string | number, initialize: () => T): T;
+}
+
+/**
+ * Core services shared across FAST instances.
+ * @internal
+ */
+export const enum KernelServiceId {
+    updateQueue = 1,
+    observable = 2,
+    contextEvent = 3,
+    elementRegistry = 4,
+    styleSheetStrategy = 5,
+}
+
+/**
+ * A node that can be targeted by styles.
+ * @public
+ */
+export interface StyleTarget {
+    /**
+     * Stylesheets to be adopted by the node.
+     */
+    adoptedStyleSheets?: CSSStyleSheet[];
+
+    /**
+     * Adds styles to the target by appending the styles.
+     * @param styles - The styles element to add.
+     */
+    append(styles: HTMLStyleElement): void;
+
+    /**
+     * Removes styles from the target.
+     * @param styles - The styles element to remove.
+     */
+    removeChild(styles: HTMLStyleElement): void;
+
+    /**
+     * Returns all element descendants of node that match selectors.
+     * @param selectors - The CSS selector to use for the query.
+     */
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+}
+
+/**
+ * Implemented to provide specific behavior when adding/removing styles
+ * for elements.
+ * @public
+ */
+export interface StyleStrategy {
+    /**
+     * Adds styles to the target.
+     * @param target - The target to add the styles to.
+     */
+    addStylesTo(target: StyleTarget): void;
+
+    /**
+     * Removes styles from the target.
+     * @param target - The target to remove the styles from.
+     */
+    removeStylesFrom(target: StyleTarget): void;
+}
+
 /**
  * @internal
  */
diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index 4a2a3fb18d1..d4764c9aad5 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -5,7 +5,7 @@ import { Subscriber, SubscriberSet } from "./notifier.js";
 import type { Notifier } from "./notifier.js";
 import { Observable } from "./observable.js";
 
-function setNonEnumerable(target: any, property: string, value: any) {
+function setNonEnumerable(target: any, property: string, value: any): void {
     Reflect.defineProperty(target, property, {
         value,
         enumerable: false,
@@ -101,8 +101,7 @@ export function enableArrayObservation(): void {
         const sort = proto.sort;
         const splice = proto.splice;
         const unshift = proto.unshift;
-
-        function adjustIndex(changeRecord: Splice, array: any[]): Splice {
+        const adjustIndex = (changeRecord: Splice, array: any[]): Splice => {
             let index = changeRecord.index;
             const arrayLength = array.length;
 
@@ -118,7 +117,7 @@ export function enableArrayObservation(): void {
 
             changeRecord.index = index < 0 ? 0 : index;
             return changeRecord;
-        }
+        };
 
         Object.assign(proto, {
             pop(...args) {
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index 01bee669fb7..e07c0571839 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -1,6 +1,6 @@
 import { DOM } from "../dom.js";
-import { isFunction, isString } from "../interfaces.js";
-import { FAST, KernelServiceId } from "../platform.js";
+import { isFunction, isString, KernelServiceId } from "../interfaces.js";
+import { FAST } from "../platform.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
 import type { Notifier, Subscriber } from "./notifier.js";
 
diff --git a/packages/web-components/fast-element/src/platform.spec.ts b/packages/web-components/fast-element/src/platform.spec.ts
index b5b51ec74fd..4e0d7f4e1b7 100644
--- a/packages/web-components/fast-element/src/platform.spec.ts
+++ b/packages/web-components/fast-element/src/platform.spec.ts
@@ -1,5 +1,7 @@
 import { expect } from "chai";
-import { FAST } from './platform';
+import type { FASTGlobal } from "./interfaces";
+
+declare const FAST: FASTGlobal;
 
 describe("The FAST global", () => {
     context("kernel API", () => {
diff --git a/packages/web-components/fast-element/src/platform.ts b/packages/web-components/fast-element/src/platform.ts
index 83fbc6a45dc..38a0c5d06a2 100644
--- a/packages/web-components/fast-element/src/platform.ts
+++ b/packages/web-components/fast-element/src/platform.ts
@@ -1,117 +1,14 @@
-/**
- * A policy for use with the standard trustedTypes platform API.
- * @public
- */
-export type TrustedTypesPolicy = {
-    /**
-     * Creates trusted HTML.
-     * @param html - The HTML to clear as trustworthy.
-     */
-    createHTML(html: string): string;
-};
-
-/**
- * Enables working with trusted types.
- * @public
- */
-export type TrustedTypes = {
-    /**
-     * Creates a trusted types policy.
-     * @param name - The policy name.
-     * @param rules - The policy rules implementation.
-     */
-    createPolicy(name: string, rules: TrustedTypesPolicy): TrustedTypesPolicy;
-};
-
-/**
- * The FAST global.
- * @internal
- */
-export interface FASTGlobal {
-    /**
-     * The list of loaded versions.
-     */
-    readonly versions: string[];
-
-    /**
-     * Gets a kernel value.
-     * @param id - The id to get the value for.
-     * @param initialize - Creates the initial value for the id if not already existing.
-     */
-    getById<T>(id: string | number): T | null;
-    getById<T>(id: string | number, initialize: () => T): T;
-}
-
-/**
- * The platform global type.
- * @public
- */
-export type Global = typeof globalThis & {
-    /**
-     * Enables working with trusted types.
-     */
-    trustedTypes: TrustedTypes;
-
-    /**
-     * The FAST global.
-     * @internal
-     */
-    readonly FAST: FASTGlobal;
-};
-
-declare const global: any;
-
-/**
- * A reference to globalThis, with support
- * for browsers that don't yet support the spec.
- * @public
- */
-export const $global: Global = (function () {
-    if (typeof globalThis !== "undefined") {
-        // We're running in a modern environment.
-        return globalThis;
-    }
-
-    if (typeof global !== "undefined") {
-        // We're running in NodeJS
-        return global;
-    }
-
-    if (typeof self !== "undefined") {
-        // We're running in a worker.
-        return self;
-    }
-
-    if (typeof window !== "undefined") {
-        // We're running in the browser's main thread.
-        return window;
-    }
-
-    try {
-        // Hopefully we never get here...
-        // Not all environments allow eval and Function. Use only as a last resort:
-        // eslint-disable-next-line no-new-func
-        return new Function("return this")();
-    } catch {
-        // If all fails, give up and create an object.
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        return {};
-    }
-})();
-
-// API-only Polyfill for trustedTypes
-if (!$global.trustedTypes) {
-    $global.trustedTypes = { createPolicy: (n: string, r: TrustedTypesPolicy) => r };
-}
+import type { FASTGlobal } from "./interfaces.js";
 
+// ensure FAST global - duplicated in polyfills.ts
 const propConfig = {
     configurable: false,
     enumerable: false,
     writable: false,
 };
 
-if ($global.FAST === void 0) {
-    Reflect.defineProperty($global, "FAST", {
+if (globalThis.FAST === void 0) {
+    Reflect.defineProperty(globalThis, "FAST", {
         value: Object.create(null),
         ...propConfig,
     });
@@ -121,7 +18,7 @@ if ($global.FAST === void 0) {
  * The FAST global.
  * @internal
  */
-export const FAST = $global.FAST;
+export const FAST: FASTGlobal = globalThis.FAST;
 
 if (FAST.getById === void 0) {
     const storage = Object.create(null);
@@ -140,17 +37,6 @@ if (FAST.getById === void 0) {
     });
 }
 
-/**
- * Core services shared across FAST instances.
- * @internal
- */
-export const enum KernelServiceId {
-    updateQueue = 1,
-    observable = 2,
-    contextEvent = 3,
-    elementRegistry = 4,
-}
-
 /**
  * A readonly, empty array.
  * @remarks
diff --git a/packages/web-components/fast-element/src/polyfills.ts b/packages/web-components/fast-element/src/polyfills.ts
new file mode 100644
index 00000000000..a53aa1e87ac
--- /dev/null
+++ b/packages/web-components/fast-element/src/polyfills.ts
@@ -0,0 +1,121 @@
+import type {
+    FASTGlobal,
+    StyleStrategy,
+    StyleTarget,
+    TrustedTypesPolicy,
+} from "./interfaces.js";
+
+declare const global: any;
+
+(function ensureGlobalThis() {
+    if (typeof globalThis !== "undefined") {
+        // We're running in a modern environment.
+        return;
+    }
+
+    if (typeof global !== "undefined") {
+        // We're running in NodeJS
+        global.globalThis = global;
+    } else if (typeof self !== "undefined") {
+        (self as any).globalThis = self;
+    } else if (typeof window !== "undefined") {
+        // We're running in the browser's main thread.
+        (window as any).globalThis = window;
+    } else {
+        // Hopefully we never get here...
+        // Not all environments allow eval and Function. Use only as a last resort:
+        // eslint-disable-next-line no-new-func
+        const result = new Function("return this")();
+        result.globalThis = result;
+    }
+})();
+
+// API-only Polyfill for trustedTypes
+if (!globalThis.trustedTypes) {
+    globalThis.trustedTypes = {
+        createPolicy: (n: string, r: TrustedTypesPolicy) => r,
+    };
+}
+
+// ensure FAST global - duplicated in platform.ts
+const propConfig = {
+    configurable: false,
+    enumerable: false,
+    writable: false,
+};
+
+if (globalThis.FAST === void 0) {
+    Reflect.defineProperty(globalThis, "FAST", {
+        value: Object.create(null),
+        ...propConfig,
+    });
+}
+
+const FAST: FASTGlobal = globalThis.FAST;
+
+if (FAST.getById === void 0) {
+    const storage = Object.create(null);
+
+    Reflect.defineProperty(FAST, "getById", {
+        value<T>(id: string | number, initialize?: () => T): T | null {
+            let found = storage[id];
+
+            if (found === void 0) {
+                found = initialize ? (storage[id] = initialize()) : null;
+            }
+
+            return found;
+        },
+        ...propConfig,
+    });
+}
+
+// duplicated from DOM
+const supportsAdoptedStyleSheets =
+    Array.isArray((document as any).adoptedStyleSheets) &&
+    "replace" in CSSStyleSheet.prototype;
+
+function usableStyleTarget(target: StyleTarget): StyleTarget {
+    return target === document ? document.body : target;
+}
+
+let id = 0;
+const nextStyleId = (): string => `fast-${++id}`;
+
+export class StyleElementStrategy implements StyleStrategy {
+    private readonly styleClass: string;
+
+    public constructor(private readonly styles: string[]) {
+        this.styleClass = nextStyleId();
+    }
+
+    public addStylesTo(target: StyleTarget): void {
+        target = usableStyleTarget(target);
+
+        const styles = this.styles;
+        const styleClass = this.styleClass;
+
+        for (let i = 0; i < styles.length; i++) {
+            const element = document.createElement("style");
+            element.innerHTML = styles[i];
+            element.className = styleClass;
+            target.append(element);
+        }
+    }
+
+    public removeStylesFrom(target: StyleTarget): void {
+        const styles: NodeListOf<HTMLStyleElement> = target.querySelectorAll(
+            `.${this.styleClass}`
+        );
+
+        target = usableStyleTarget(target);
+
+        for (let i = 0, ii = styles.length; i < ii; ++i) {
+            target.removeChild(styles[i]);
+        }
+    }
+}
+
+if (!supportsAdoptedStyleSheets) {
+    FAST.getById(/* KernelServiceId.styleSheetStrategy */ 5, () => StyleElementStrategy);
+}
diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index 7bccb8377c2..a510001d666 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -1,35 +1,6 @@
 import type { Behavior } from "../observation/behavior.js";
-import { DOM } from "../dom.js";
-import { nextId } from "../templating/markup.js";
-
-/**
- * A node that can be targeted by styles.
- * @public
- */
-export interface StyleTarget {
-    /**
-     * Stylesheets to be adopted by the node.
-     */
-    adoptedStyleSheets?: CSSStyleSheet[];
-
-    /**
-     * Adds styles to the target by appending the styles.
-     * @param styles - The styles element to add.
-     */
-    append(styles: HTMLStyleElement): void;
-
-    /**
-     * Removes styles from the target.
-     * @param styles - The styles element to remove.
-     */
-    removeChild(styles: HTMLStyleElement): void;
-
-    /**
-     * Returns all element descendants of node that match selectors.
-     * @param selectors - The CSS selector to use for the query.
-     */
-    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
-}
+import { FAST } from "../platform.js";
+import { KernelServiceId, StyleStrategy, StyleTarget } from "../interfaces.js";
 
 /**
  * Represents styles that can be composed into the ShadowDOM of a custom element.
@@ -37,25 +8,6 @@ export interface StyleTarget {
  */
 export type ComposableStyles = string | ElementStyles | CSSStyleSheet;
 
-/**
- * Implemented to provide specific behavior when adding/removing styles
- * for elements.
- * @public
- */
-export interface StyleStrategy {
-    /**
-     * Adds styles to the target.
-     * @param target - The target to add the styles to.
-     */
-    addStylesTo(target: StyleTarget): void;
-
-    /**
-     * Removes styles from the target.
-     * @param target - The target to remove the styles from.
-     */
-    removeStylesFrom(target: StyleTarget): void;
-}
-
 /**
  * A type that instantiates a StyleStrategy.
  * @public
@@ -210,47 +162,6 @@ export class AdoptedStyleSheetsStrategy implements StyleStrategy {
     }
 }
 
-function usableTarget(target: StyleTarget): StyleTarget {
-    return target === document ? document.body : target;
-}
-
-/**
- * @internal
- */
-export class StyleElementStrategy implements StyleStrategy {
-    private readonly styleClass: string;
-
-    public constructor(private readonly styles: string[]) {
-        this.styleClass = nextId();
-    }
-
-    public addStylesTo(target: StyleTarget): void {
-        target = usableTarget(target);
-
-        const styles = this.styles;
-        const styleClass = this.styleClass;
-
-        for (let i = 0; i < styles.length; i++) {
-            const element = document.createElement("style");
-            element.innerHTML = styles[i];
-            element.className = styleClass;
-            target.append(element);
-        }
-    }
-
-    public removeStylesFrom(target: StyleTarget): void {
-        const styles: NodeListOf<HTMLStyleElement> = target.querySelectorAll(
-            `.${this.styleClass}`
-        );
-
-        target = usableTarget(target);
-
-        for (let i = 0, ii = styles.length; i < ii; ++i) {
-            target.removeChild(styles[i]);
-        }
-    }
-}
-
 ElementStyles.setDefaultStrategy(
-    DOM.supportsAdoptedStyleSheets ? AdoptedStyleSheetsStrategy : StyleElementStrategy
+    FAST.getById(KernelServiceId.styleSheetStrategy, () => AdoptedStyleSheetsStrategy)
 );
diff --git a/packages/web-components/fast-element/src/styles/styles.spec.ts b/packages/web-components/fast-element/src/styles/styles.spec.ts
index 19ba0c007bc..dfe946c4cc3 100644
--- a/packages/web-components/fast-element/src/styles/styles.spec.ts
+++ b/packages/web-components/fast-element/src/styles/styles.spec.ts
@@ -1,8 +1,6 @@
 import { expect } from "chai";
 import {
     AdoptedStyleSheetsStrategy,
-    StyleElementStrategy,
-    StyleTarget,
     ElementStyles,
 } from "./element-styles";
 import { DOM } from "../dom";
@@ -11,6 +9,8 @@ import { css, cssPartial } from "./css";
 import type { Behavior } from "../observation/behavior";
 import { defaultExecutionContext } from "../observation/observable";
 import type { FASTElement } from "..";
+import { StyleElementStrategy } from "../polyfills";
+import type { StyleTarget } from "../interfaces";
 
 if (DOM.supportsAdoptedStyleSheets) {
     describe("AdoptedStyleSheetsStrategy", () => {
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 57cae98380a..8194b18ba00 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -176,9 +176,9 @@ function updateTokenListTarget(
     value: any
 ): void {
     const directive = this.directive;
+    const lookup = `${directive.uniqueId}-token-list`;
     const state: TokenListState =
-        target[directive.uniqueId] ??
-        (target[directive.uniqueId] = { c: 0, v: Object.create(null) });
+        target[lookup] ?? (target[lookup] = { c: 0, v: Object.create(null) });
     const versions = state.v;
     let currentVersion = state.c;
     const tokenList = target[aspect] as DOMTokenList;
@@ -493,6 +493,19 @@ export const signal = <T = any>(options: string | Binding<T>): BindingConfig<T>
     return { mode: signalMode, options };
 };
 
+declare class TrustedHTML {}
+const createInnerHTMLBinding = globalThis.TrustedHTML
+    ? (binding: Binding) => (s, c) => {
+          const value = binding(s, c);
+
+          if (value instanceof TrustedHTML) {
+              return value;
+          }
+
+          throw new Error("To bind innerHTML, you must use a TrustedTypesPolicy.");
+      }
+    : (binding: Binding) => binding;
+
 /**
  * @internal
  */
@@ -523,9 +536,7 @@ export class HTMLBindingDirective extends AspectedHTMLDirective {
                 (this as Mutable<this>).target = value.substring(1);
                 switch (this.target) {
                     case "innerHTML":
-                        const binding = this.binding;
-                        /* eslint-disable-next-line */
-                        this.binding = (s, c) => DOM.createHTML(binding(s, c));
+                        this.binding = createInnerHTMLBinding(this.binding);
                         (this as Mutable<this>).aspect = Aspect.property;
                         break;
                     case "classList":
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index 3471a0a9724..e16ea181261 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -4,12 +4,12 @@ import { customElement, FASTElement } from "../components/fast-element";
 import { Markup } from './markup';
 import { defaultExecutionContext } from "../observation/observable";
 import { css } from "../styles/css";
-import type { StyleTarget } from "../styles/element-styles";
 import { toHTML, uniqueElementName } from "../__test__/helpers";
 import { bind, HTMLBindingDirective } from "./binding";
 import { Compiler } from "./compiler";
 import type { HTMLDirective, ViewBehaviorFactory } from "./html-directive";
 import { html } from "./template";
+import type { StyleTarget } from "../interfaces";
 
 /**
  * Used to satisfy TS by exposing some internal properties of the
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 53f60b724c6..baed861fd83 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,5 +1,4 @@
-import { isString } from "../interfaces.js";
-import { DOM } from "../dom.js";
+import { isString, TrustedTypesPolicy } from "../interfaces.js";
 import type { ExecutionContext } from "../observation/observable.js";
 import { Parser } from "./markup.js";
 import { bind, oneTime } from "./binding.js";
@@ -226,8 +225,8 @@ function compileNode(
         case 8: // comment
             const parts = Parser.parse((node as Comment).data, context.directives);
             if (parts !== null) {
-                /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
                 context.addFactory(
+                    /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
                     Compiler.aggregate(parts),
                     parentId,
                     nodeId,
@@ -267,12 +266,31 @@ export type CompilationStrategy = (
 ) => TemplateCompilationResult;
 
 const templateTag = "TEMPLATE";
+const policyOptions: TrustedTypesPolicy = { createHTML: html => html };
+let htmlPolicy: TrustedTypesPolicy = globalThis.trustedTypes
+    ? globalThis.trustedTypes.createPolicy("fast-html", policyOptions)
+    : policyOptions;
+const fastHTMLPolicy = htmlPolicy;
 
 /**
  * Common APIs related to compilation.
  * @public
  */
 export const Compiler = {
+    /**
+     * Sets the HTML trusted types policy used by the compiler.
+     * @param policy - The policy to set for HTML.
+     * @remarks
+     * This API can only be called once, for security reasons. It should be
+     * called by the application developer at the start of their program.
+     */
+    setHTMLPolicy(policy: TrustedTypesPolicy) {
+        if (htmlPolicy !== fastHTMLPolicy) {
+            throw new Error("The HTML policy can only be set once.");
+        }
+
+        htmlPolicy = policy;
+    },
     /**
      * Compiles a template and associated directives into a compilation
      * result which can be used to create views.
@@ -292,7 +310,7 @@ export const Compiler = {
 
         if (isString(html)) {
             template = document.createElement(templateTag) as HTMLTemplateElement;
-            template.innerHTML = DOM.createHTML(html);
+            template.innerHTML = htmlPolicy.createHTML(html);
 
             const fec = template.content.firstElementChild;
 
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 0bb1a532fdd..4dc51a78025 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -89,6 +89,7 @@ export abstract class HTMLDirective implements ViewBehaviorFactory {
 
 /**
  * The type of HTML aspect to target.
+ * @public
  */
 export enum Aspect {
     /**
@@ -156,7 +157,10 @@ export abstract class AspectedHTMLDirective extends HTMLDirective {
     public createPlaceholder: (index: number) => string = Markup.interpolation;
 }
 
-/** @internal */
+/**
+ * A base class used for attribute directives that don't need internal state.
+ * @public
+ */
 export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirective
     implements ViewBehavior {
     /**
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.template.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.template.ts
index 26b6d5d5825..cb12277240e 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.template.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.template.ts
@@ -14,9 +14,8 @@ export const dataGridCellTemplate: FoundationElementTemplate<ViewTemplate<
     return html<DataGridCell>`
         <template
             tabindex="-1"
-            role="${x =>
-                !x.cellType || x.cellType === "default" ? "gridcell" : x.cellType}"
-            class="
+            role="${x => x.cellType ?? "gridcell"}"
+            :classList="
             ${x =>
                 x.cellType === "columnheader"
                     ? "column-header"
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.template.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.template.ts
index 1ded7b7112c..93a1c95f2ed 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.template.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.template.ts
@@ -43,7 +43,7 @@ export const dataGridRowTemplate: FoundationElementTemplate<ViewTemplate<DataGri
     return html<DataGridRow>`
         <template
             role="row"
-            class="${x => (x.rowType !== "default" ? x.rowType : "")}"
+            :classList="${x => (x.rowType !== "default" ? x.rowType : "")}"
             :defaultCellItemTemplate="${cellItemTemplate}"
             :defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
             ${children({
diff --git a/packages/web-components/fast-foundation/src/radio/radio.template.ts b/packages/web-components/fast-foundation/src/radio/radio.template.ts
index edf215b0735..54fa52f13b8 100644
--- a/packages/web-components/fast-foundation/src/radio/radio.template.ts
+++ b/packages/web-components/fast-foundation/src/radio/radio.template.ts
@@ -13,7 +13,7 @@ export const radioTemplate: FoundationElementTemplate<
 > = (context, definition) => html`
     <template
         role="radio"
-        class="${x => (x.checked ? "checked" : "")} ${x =>
+        :classList="${x => (x.checked ? "checked" : "")} ${x =>
             x.readOnly ? "readonly" : ""}"
         aria-checked="${x => x.checked}"
         aria-required="${x => x.required}"
diff --git a/packages/web-components/fast-foundation/src/utilities/intersection-service.ts b/packages/web-components/fast-foundation/src/utilities/intersection-service.ts
index 3da6c28b524..7c776eaafb5 100644
--- a/packages/web-components/fast-foundation/src/utilities/intersection-service.ts
+++ b/packages/web-components/fast-foundation/src/utilities/intersection-service.ts
@@ -1,5 +1,3 @@
-import { $global } from "@microsoft/fast-element";
-
 /**
  *  A service to batch intersection event callbacks so multiple elements can share a single observer
  *
@@ -55,7 +53,7 @@ export class IntersectionService {
      * initialize intersection detector
      */
     private initializeIntersectionDetector = (): void => {
-        if (!$global.IntersectionObserver) {
+        if (!globalThis.IntersectionObserver) {
             //intersection observer not supported
             return;
         }

From 60776c5a6cdecfa6e038bbf99b7782109fb8838b Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Mon, 28 Mar 2022 13:34:57 -0700
Subject: [PATCH 086/135] feat: implement template renderer infrastructure 
 (#5698)

* implement factory fn to create TemplateRenderer and ElementRenderer

* rename index to exports

* adding default render info object

* adding initial directive rendering

* adds initial custom element rendering

* add directive renderers

* add renderInfo to DirectiveRenderer

* use default directive renderers

* adding attribute binding tests

* ensure attributes don't get emitted twice for custom elements

* Adding internal function to render op codes so that we can omit template elements when rendering custom element templates

* emit template open and close codes from template parser

* implement FAST parser changes and fix tests

* working AspectedHTMLDirective changes into branch

* naive implementation of custom element template rendering

* adds rendering of template op code

* progress on elmeent rendering

* fixing custom element attribute rendering bug

* Change files

* adding boolean and property binding test

* fix bug preventing template elements from being parsed

* add failing template nesting test

* update parsing of content nodes to correctly render interpolated templates

* fix API report and formatting

* adding repeater rendering

* adding directive implementations for Ref, Slotted, and Children

* clean up op types to reduce rendant information

* remove commented code that is no longer needed

* adding tests for ref, slotted, and children

* re-use noop function for noop directives

* cache length of arrays in for loops

* adding style tests

* implementing style renderer

* remove 'data' from style id name

* adding tests

* renaming files to align with current conventions

* update attachShadow signature

* adding classList support

* fixing tests and supporting string types

* removing comment that is a non-concern

* add playwright install step to ci

* add browser path to ci script

* change install script to install at the package level

* update playwright

* Change files

* fixing test

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 .github/workflows/ci-validate-pr.yml          |   7 +
 ...-fe3e3f63-c0de-47a1-a110-75d1cdafc800.json |   7 +
 ...-7179cd1c-a90d-4bd7-b23e-dcd38a4d22b3.json |   7 +
 .../fast-element/docs/api-report.md           |   6 +
 .../fast-element/src/components/controller.ts |   4 +-
 .../fast-element/src/templating/repeat.ts     |   6 +-
 packages/web-components/fast-ssr/package.json |   8 +-
 .../web-components/fast-ssr/server/server.ts  |   4 +-
 .../web-components/fast-ssr/src/dom-shim.ts   |  24 ++
 .../elemenent-renderer.spec.ts                |  30 ++-
 .../src/element-renderer/element-renderer.ts  | 104 +++++--
 .../src/element-renderer/style-strategy.ts    |   5 +
 .../web-components/fast-ssr/src/exports.ts    |  72 +++++
 packages/web-components/fast-ssr/src/index.ts |   1 -
 .../fast-style.fixture.html}                  |  40 +--
 .../{fast-style => styles}/fast-style.spec.ts |   0
 .../index.ts => styles/fast-style.ts}         |   9 +-
 .../src/styles/style-renderer.spec.ts         |  63 +++++
 .../fast-ssr/src/styles/style-renderer.ts     |  53 ++++
 .../src/template-parser/attributes.ts         |  14 -
 .../fast-ssr/src/template-parser/op-codes.ts  |  18 +-
 .../template-parser/template-parser.spec.ts   |  58 ++--
 .../src/template-parser/template-parser.ts    | 136 ++++++----
 .../src/template-renderer/directives.ts       |  98 +++++++
 .../template-renderer.spec.ts                 | 253 +++++++++++++++++-
 .../template-renderer/template-renderer.ts    | 242 ++++++++++++++++-
 .../web-components/fast-ssr/src/test-utils.ts |  11 +
 packages/web-components/fast-ssr/src/view.ts  |  59 ++++
 28 files changed, 1169 insertions(+), 170 deletions(-)
 create mode 100644 change/@microsoft-fast-components-fe3e3f63-c0de-47a1-a110-75d1cdafc800.json
 create mode 100644 change/@microsoft-fast-element-7179cd1c-a90d-4bd7-b23e-dcd38a4d22b3.json
 create mode 100644 packages/web-components/fast-ssr/src/dom-shim.ts
 create mode 100644 packages/web-components/fast-ssr/src/element-renderer/style-strategy.ts
 create mode 100644 packages/web-components/fast-ssr/src/exports.ts
 delete mode 100644 packages/web-components/fast-ssr/src/index.ts
 rename packages/web-components/fast-ssr/src/{fast-style/index.fixture.html => styles/fast-style.fixture.html} (93%)
 rename packages/web-components/fast-ssr/src/{fast-style => styles}/fast-style.spec.ts (100%)
 rename packages/web-components/fast-ssr/src/{fast-style/index.ts => styles/fast-style.ts} (87%)
 create mode 100644 packages/web-components/fast-ssr/src/styles/style-renderer.spec.ts
 create mode 100644 packages/web-components/fast-ssr/src/styles/style-renderer.ts
 delete mode 100644 packages/web-components/fast-ssr/src/template-parser/attributes.ts
 create mode 100644 packages/web-components/fast-ssr/src/template-renderer/directives.ts
 create mode 100644 packages/web-components/fast-ssr/src/test-utils.ts
 create mode 100644 packages/web-components/fast-ssr/src/view.ts

diff --git a/.github/workflows/ci-validate-pr.yml b/.github/workflows/ci-validate-pr.yml
index cc892121bfe..a4909c674b1 100644
--- a/.github/workflows/ci-validate-pr.yml
+++ b/.github/workflows/ci-validate-pr.yml
@@ -14,6 +14,8 @@ on:
 jobs:
   build_linux:
     runs-on: ubuntu-latest
+    env:
+      PLAYWRIGHT_BROWSERS_PATH: 0
 
     steps:
     - uses: actions/checkout@v2
@@ -48,6 +50,11 @@ jobs:
     - name: Prepare workspaces
       run: yarn prepare
 
+    - name: Install playwright dependencies and browsers
+      run: |
+        yarn playwright install-deps
+        yarn playwright install
+
     - name: Testing unit tests
       run: yarn lerna run test --stream
 
diff --git a/change/@microsoft-fast-components-fe3e3f63-c0de-47a1-a110-75d1cdafc800.json b/change/@microsoft-fast-components-fe3e3f63-c0de-47a1-a110-75d1cdafc800.json
new file mode 100644
index 00000000000..557d7af87c6
--- /dev/null
+++ b/change/@microsoft-fast-components-fe3e3f63-c0de-47a1-a110-75d1cdafc800.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update playwright",
+  "packageName": "@microsoft/fast-components",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-element-7179cd1c-a90d-4bd7-b23e-dcd38a4d22b3.json b/change/@microsoft-fast-element-7179cd1c-a90d-4bd7-b23e-dcd38a4d22b3.json
new file mode 100644
index 00000000000..b82722e3f74
--- /dev/null
+++ b/change/@microsoft-fast-element-7179cd1c-a90d-4bd7-b23e-dcd38a4d22b3.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adds Aspect as public export",
+  "packageName": "@microsoft/fast-element",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 1f07eca41b9..4ca7cc34f55 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -502,6 +502,12 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
     constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
     createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource>;
     createPlaceholder: (index: number) => string;
+    // (undocumented)
+    readonly itemsBinding: Binding;
+    // (undocumented)
+    readonly options: RepeatOptions;
+    // (undocumented)
+    readonly templateBinding: Binding<TSource, SyntheticViewTemplate>;
 }
 
 // @public
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index c2d2d3c0f75..ccdc5b29a30 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -207,7 +207,7 @@ export class Controller extends PropertyChangeNotifier {
             getShadowRoot(this.element) ||
             ((this.element.getRootNode() as any) as StyleTarget);
 
-        if (styles instanceof HTMLStyleElement) {
+        if (styles instanceof HTMLElement) {
             target.append(styles);
         } else if (!styles.isAttachedTo(target)) {
             const sourceBehaviors = styles.behaviors;
@@ -234,7 +234,7 @@ export class Controller extends PropertyChangeNotifier {
             getShadowRoot(this.element) ||
             ((this.element.getRootNode() as any) as StyleTarget);
 
-        if (styles instanceof HTMLStyleElement) {
+        if (styles instanceof HTMLElement) {
             target.removeChild(styles);
         } else if (styles.isAttachedTo(target)) {
             const sourceBehaviors = styles.behaviors;
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index 3f466c9f423..c669e1377b4 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -316,9 +316,9 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
      * @param options - Options used to turn on special repeat features.
      */
     public constructor(
-        private itemsBinding: Binding,
-        private templateBinding: Binding<TSource, SyntheticViewTemplate>,
-        private options: RepeatOptions
+        public readonly itemsBinding: Binding,
+        public readonly templateBinding: Binding<TSource, SyntheticViewTemplate>,
+        public readonly options: RepeatOptions
     ) {
         super();
         enableArrayObservation();
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index e650709bc65..3d4dc082fda 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -27,11 +27,11 @@
     "test": "playwright test --config=playwright.config.cjs",
     "test:watch": "chokidar '**/*.spec.ts' -c 'npm run build && npm run test'",
     "test-server": "node server/dist/server.js",
-    "install-playwright-browsers": "npx playwright install"
+    "install-playwright-browsers": "yarn playwright install"
   },
   "description": "A package for rendering FAST components outside the browser.",
-  "main": "./dist/esm/index.js",
-  "types": "./dist/dts/index.d.ts",
+  "main": "./dist/esm/exports.js",
+  "types": "./dist/dts/exports.d.ts",
   "private": true,
   "dependencies": {
     "@lit-labs/ssr": "^1.0.0-rc.2",
@@ -40,7 +40,7 @@
     "tslib": "^1.11.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.18.0",
+    "@playwright/test": "^1.20.1",
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.17",
     "chokidar-cli": "^3.0.0",
diff --git a/packages/web-components/fast-ssr/server/server.ts b/packages/web-components/fast-ssr/server/server.ts
index b83fdc77a57..57ac2215d02 100644
--- a/packages/web-components/fast-ssr/server/server.ts
+++ b/packages/web-components/fast-ssr/server/server.ts
@@ -48,11 +48,11 @@ function handlePathRequest(
 const app = express();
 app.get("/", handleRequest);
 app.get("/fast-style", (req: Request, res: Response) =>
-    handlePathRequest("./src/fast-style/index.fixture.html", "text/html", req, res)
+    handlePathRequest("./src/styles/fast-style.fixture.html", "text/html", req, res)
 );
 app.get("/fast-style.js", (req: Request, res: Response) =>
     handlePathRequest(
-        "./dist/esm/fast-style/index.js",
+        "./dist/esm/styles/fast-style.js",
         "application/javascript",
         req,
         res
diff --git a/packages/web-components/fast-ssr/src/dom-shim.ts b/packages/web-components/fast-ssr/src/dom-shim.ts
new file mode 100644
index 00000000000..2d3284c1dde
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/dom-shim.ts
@@ -0,0 +1,24 @@
+import { installWindowOnGlobal } from "@lit-labs/ssr/lib/dom-shim.js";
+
+installWindowOnGlobal();
+
+// Implement shadowRoot getter on HTMLElement.
+// Can be removed if https://github.com/lit/lit/issues/2652
+// is integrated.
+class PatchedHTMLElement extends HTMLElement {
+    #shadowRoot: ShadowRoot | null = null;
+    get shadowRoot() {
+        return this.#shadowRoot;
+    }
+    attachShadow(init: ShadowRootInit) {
+        const root = super.attachShadow(init);
+
+        if (init.mode === "open") {
+            this.#shadowRoot = root;
+        }
+
+        return root;
+    }
+}
+
+window.HTMLElement = PatchedHTMLElement;
diff --git a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
index 717eb76599f..a47d779bc30 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
@@ -1,8 +1,17 @@
-import "@lit-labs/ssr/lib/install-global-dom-shim.js";
-import { FASTElement } from "@microsoft/fast-element";
+import "../dom-shim.js";
+import { FASTElement, customElement, css, html } from "@microsoft/fast-element";
 import { expect, test } from '@playwright/test';
 import { FASTElementRenderer } from "./element-renderer.js";
+import fastSSR from "../exports.js";
+import { consolidate } from "../test-utils.js";
 
+
+@customElement({
+    name: "styled-element",
+    styles: css`:host { display: block; }${css`:host { color: red; }`}
+    `
+})
+class StyledElement extends FASTElement {}
 test.describe("FASTElementRenderer", () => {
     test.describe("should have a 'matchesClass' method", () => {
         test("that returns true when invoked with a class that extends FASTElement ",  () => {
@@ -13,5 +22,18 @@ test.describe("FASTElementRenderer", () => {
             class MyElement extends HTMLElement {}
             expect(FASTElementRenderer.matchesClass(MyElement)).toBe(false);
         });
-    })
-})
+    });
+
+    test.describe("rendering stylesheets", () => {
+        test(`should render stylesheets as 'style' elements by default`, () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = consolidate(templateRenderer.render(html`<styled-element></styled-element>`, defaultRenderInfo));
+            expect(result).toBe("<styled-element><template shadowroot=\"open\"><style>:host { display: block; }:host { color: red; }</style></template></styled-element>");
+        });
+        test(`should render stylesheets as 'fast-style' elements when configured`, () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR({useFASTStyle: true});
+            const result = consolidate(templateRenderer.render(html`<styled-element></styled-element>`, defaultRenderInfo));
+            expect(result).toBe(`<styled-element><template shadowroot=\"open\"><fast-style style-id="fast-style-0" css=":host { display: block; }:host { color: red; }"></fast-style></template></styled-element>`);
+        });
+    });
+});
diff --git a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
index 11980a038f7..926fc3a4485 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
@@ -1,12 +1,37 @@
 import { ElementRenderer, RenderInfo } from "@lit-labs/ssr";
-import { FASTElement } from "@microsoft/fast-element";
+import {
+    Aspect,
+    ComposableStyles,
+    defaultExecutionContext,
+    DOM,
+    FASTElement,
+} from "@microsoft/fast-element";
+import { TemplateRenderer } from "../template-renderer/template-renderer.js";
+import { SSRView } from "../view.js";
+import { StyleRenderer } from "../styles/style-renderer.js";
 
-export class FASTElementRenderer extends ElementRenderer {
+const prefix = "fast-style";
+let id = 0;
+function nextId(): string {
+    return `${prefix}-${id++}`;
+}
+
+export abstract class FASTElementRenderer extends ElementRenderer {
     /**
      * The element instance represented by the {@link FASTElementRenderer}.
      */
     public readonly element!: FASTElement;
 
+    /**
+     * The template renderer to use when rendering a component template
+     */
+    protected abstract templateRenderer: TemplateRenderer;
+
+    /**
+     * Responsible for rendering stylesheets
+     */
+    protected abstract styleRenderer: StyleRenderer;
+
     /**
      * Tests a constructor to determine if it should be managed by a {@link FASTElementRenderer}.
      * @param ctor - The constructor to test.
@@ -20,6 +45,48 @@ export class FASTElementRenderer extends ElementRenderer {
      */
     public connectedCallback(): void {
         this.element.connectedCallback();
+        const view = this.element.$fastController.view;
+
+        if (view && SSRView.isSSRView(view)) {
+            if (view.hostStaticAttributes) {
+                view.hostStaticAttributes.forEach((value, key) => {
+                    this.element.setAttribute(key, value);
+                });
+            }
+
+            if (view.hostDynamicAttributes) {
+                for (const attr of view.hostDynamicAttributes) {
+                    const result = attr.binding(this.element, defaultExecutionContext);
+
+                    const { target } = attr;
+                    switch (attr.aspect) {
+                        case Aspect.property:
+                            (this.element as any)[target] = result;
+                            break;
+                        case Aspect.attribute:
+                            DOM.setAttribute(this.element, target, result);
+                            break;
+                        case Aspect.booleanAttribute:
+                            DOM.setBooleanAttribute(this.element, target, result);
+                            break;
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Indicate to the {@link FASTElementRenderer} that an attribute has been changed.
+     * @param name - The name of the changed attribute
+     * @param old - The old attribute value
+     * @param value - The new attribute value
+     */
+    public attributeChangedCallback(
+        name: string,
+        old: string | null,
+        value: string | null
+    ): void {
+        this.element.attributeChangedCallback(name, old, value);
     }
 
     /**
@@ -44,7 +111,7 @@ export class FASTElementRenderer extends ElementRenderer {
      * Renders the component internals to light DOM instead of shadow DOM.
      * @param renderInfo - information about the current rendering context.
      */
-    *renderLight(renderInfo: RenderInfo): IterableIterator<string> {
+    public *renderLight(renderInfo: RenderInfo): IterableIterator<string> {
         // TODO - this will yield out the element's template using the template renderer, skipping any shadow-DOM specific emission.
         yield "";
     }
@@ -53,22 +120,21 @@ export class FASTElementRenderer extends ElementRenderer {
      * Render the component internals to shadow DOM.
      * @param renderInfo - information about the current rendering context.
      */
-    *renderShadow(renderInfo: RenderInfo): IterableIterator<string> {
-        // TODO - this will yield out the element's template using the template renderer
-        yield "";
-    }
+    public *renderShadow(renderInfo: RenderInfo): IterableIterator<string> {
+        const view = this.element.$fastController.view;
+        const styles = this.element.$fastController.styles;
 
-    /**
-     * Indicate to the {@link FASTElementRenderer} that an attribute has been changed.
-     * @param name - The name of the changed attribute
-     * @param old - The old attribute value
-     * @param value - The new attribute value
-     */
-    attributeChangedCallback(
-        name: string,
-        old: string | null,
-        value: string | null
-    ): void {
-        this.element.attributeChangedCallback(name, old, value);
+        if (styles) {
+            yield this.styleRenderer.render(styles);
+        }
+
+        if (view !== null) {
+            yield* this.templateRenderer.renderOpCodes(
+                ((view as unknown) as SSRView).codes,
+                renderInfo,
+                this.element,
+                defaultExecutionContext
+            );
+        }
     }
 }
diff --git a/packages/web-components/fast-ssr/src/element-renderer/style-strategy.ts b/packages/web-components/fast-ssr/src/element-renderer/style-strategy.ts
new file mode 100644
index 00000000000..4ce4a5525aa
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/element-renderer/style-strategy.ts
@@ -0,0 +1,5 @@
+import { StyleStrategy } from "@microsoft/fast-element";
+export class FASTSSRStyleStrategy implements StyleStrategy {
+    addStylesTo() {}
+    removeStylesFrom() {}
+}
diff --git a/packages/web-components/fast-ssr/src/exports.ts b/packages/web-components/fast-ssr/src/exports.ts
new file mode 100644
index 00000000000..b4be9efe7ba
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/exports.ts
@@ -0,0 +1,72 @@
+import { RenderInfo } from "@lit-labs/ssr";
+import { Compiler, ElementStyles, HTMLDirective } from "@microsoft/fast-element";
+import { FASTElementRenderer } from "./element-renderer/element-renderer.js";
+import { FASTSSRStyleStrategy } from "./element-renderer/style-strategy.js";
+import {
+    FASTStyleStyleRenderer,
+    StyleElementStyleRenderer,
+    StyleRenderer,
+} from "./styles/style-renderer.js";
+import { defaultFASTDirectiveRenderers } from "./template-renderer/directives.js";
+import {
+    TemplateRenderer,
+    TemplateRendererConfiguration,
+} from "./template-renderer/template-renderer.js";
+import { SSRView } from "./view.js";
+
+export type Configuration = TemplateRendererConfiguration;
+Compiler.setDefaultStrategy(
+    (html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>) => {
+        if (typeof html !== "string") {
+            throw new Error(
+                "SSR compiler does not support HTMLTemplateElement templates"
+            );
+        }
+
+        return new SSRView(html, directives) as any;
+    }
+);
+
+ElementStyles.setDefaultStrategy(FASTSSRStyleStrategy);
+
+/**
+ * Factory for creating SSR rendering assets.
+ * @param config - FAST SSR configuration
+ *
+ * @example
+ * ```ts
+ * import "@lit-labs/ssr/lib/install-global-dom-shim.js";
+ * import { html } from "@microsoft/fast-element";
+ * import fastSSR from "@microsoft/fast-ssr";
+ * const { templateRenderer, defaultRenderInfo } = fastSSR();
+ *
+ * const streamableSSRResult = templateRenderer.render(html`...`, defaultRenderInfo);
+ * ```
+ */
+export default function (
+    config?: Configuration
+): {
+    templateRenderer: TemplateRenderer;
+    elementRenderer: typeof FASTElementRenderer;
+    defaultRenderInfo: RenderInfo;
+} {
+    const templateRenderer = new TemplateRenderer(config);
+    const elementRenderer = class extends FASTElementRenderer {
+        protected templateRenderer: TemplateRenderer = templateRenderer;
+        protected styleRenderer: StyleRenderer = config?.useFASTStyle
+            ? new FASTStyleStyleRenderer()
+            : new StyleElementStyleRenderer();
+    };
+
+    templateRenderer.withDirectiveRenderer(...defaultFASTDirectiveRenderers);
+
+    return {
+        templateRenderer,
+        elementRenderer,
+        defaultRenderInfo: {
+            elementRenderers: [elementRenderer],
+            customElementHostStack: [],
+            customElementInstanceStack: [],
+        },
+    };
+}
diff --git a/packages/web-components/fast-ssr/src/index.ts b/packages/web-components/fast-ssr/src/index.ts
deleted file mode 100644
index 09491d50f08..00000000000
--- a/packages/web-components/fast-ssr/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FASTElementRenderer } from "./element-renderer/element-renderer.js";
diff --git a/packages/web-components/fast-ssr/src/fast-style/index.fixture.html b/packages/web-components/fast-ssr/src/styles/fast-style.fixture.html
similarity index 93%
rename from packages/web-components/fast-ssr/src/fast-style/index.fixture.html
rename to packages/web-components/fast-ssr/src/styles/fast-style.fixture.html
index 92820fa5ab9..08413597c27 100644
--- a/packages/web-components/fast-ssr/src/fast-style/index.fixture.html
+++ b/packages/web-components/fast-ssr/src/styles/fast-style.fixture.html
@@ -126,7 +126,7 @@
             <!-- shadowroots must remain open for testing contained elements -->
             <template shadowroot="open">
                 <fast-style
-                    data-style-id="fast-card"
+                    style-id="fast-card"
                     css=":host {
                     --elevation: 4;
                     display: block;
@@ -151,7 +151,7 @@ <h2>Heading</h2>
                     <fast-button>
                         <template shadowroot="open">
                             <fast-style
-                                data-style-id="fast-button"
+                                style-id="fast-button"
                                 css=":host {
                                 font-family: var(--body-font);
                                 outline: none;
@@ -200,7 +200,7 @@ <h2>Heading</h2>
         </fast-card>
         <fast-card style="width: 300px;">
             <template shadowroot="open">
-                <fast-style data-style-id="fast-card"></fast-style>
+                <fast-style style-id="fast-card"></fast-style>
                 <img src="https://via.placeholder.com/300x200/414141" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
                     <h2>Heading</h2>
@@ -213,7 +213,7 @@ <h2>Heading</h2>
                     </p>
                     <fast-button>
                         <template shadowroot="open">
-                            <fast-style data-style-id="fast-button"></fast-style>
+                            <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
                                 <span>
                                     Button
@@ -226,7 +226,7 @@ <h2>Heading</h2>
         </fast-card>
         <fast-card style="width: 300px;">
             <template shadowroot="open">
-                <fast-style data-style-id="fast-card"></fast-style>
+                <fast-style style-id="fast-card"></fast-style>
                 <img src="https://via.placeholder.com/300x200/414141" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
                     <h2>Heading</h2>
@@ -239,7 +239,7 @@ <h2>Heading</h2>
                     </p>
                     <fast-button>
                         <template shadowroot="open">
-                            <fast-style data-style-id="fast-button"></fast-style>
+                            <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
                                 <span>
                                     Button
@@ -252,7 +252,7 @@ <h2>Heading</h2>
         </fast-card>
         <fast-card style="width: 300px;">
             <template shadowroot="open">
-                <fast-style data-style-id="fast-card"></fast-style>
+                <fast-style style-id="fast-card"></fast-style>
                 <img src="https://via.placeholder.com/300x200/414141" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
                     <h2>Heading</h2>
@@ -265,7 +265,7 @@ <h2>Heading</h2>
                     </p>
                     <fast-button>
                         <template shadowroot="open">
-                            <fast-style data-style-id="fast-button"></fast-style>
+                            <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
                                 <span>
                                     Button
@@ -278,7 +278,7 @@ <h2>Heading</h2>
         </fast-card>
         <fast-card style="width: 300px;">
             <template shadowroot="open">
-                <fast-style data-style-id="fast-card"></fast-style>
+                <fast-style style-id="fast-card"></fast-style>
                 <img src="https://via.placeholder.com/300x200/414141" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
                     <h2>Heading</h2>
@@ -291,7 +291,7 @@ <h2>Heading</h2>
                     </p>
                     <fast-button>
                         <template shadowroot="open">
-                            <fast-style data-style-id="fast-button"></fast-style>
+                            <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
                                 <span>
                                     Button
@@ -304,7 +304,7 @@ <h2>Heading</h2>
         </fast-card>
         <fast-card style="width: 300px;">
             <template shadowroot="open">
-                <fast-style data-style-id="fast-card"></fast-style>
+                <fast-style style-id="fast-card"></fast-style>
                 <img src="https://via.placeholder.com/300x200/414141" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
                     <h2>Heading</h2>
@@ -317,7 +317,7 @@ <h2>Heading</h2>
                     </p>
                     <fast-button>
                         <template shadowroot="open">
-                            <fast-style data-style-id="fast-button"></fast-style>
+                            <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
                                 <span>
                                     Button
@@ -330,7 +330,7 @@ <h2>Heading</h2>
         </fast-card>
         <fast-card style="width: 300px;">
             <template shadowroot="open">
-                <fast-style data-style-id="fast-card"></fast-style>
+                <fast-style style-id="fast-card"></fast-style>
                 <img src="https://via.placeholder.com/300x200/414141" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
                     <h2>Heading</h2>
@@ -343,7 +343,7 @@ <h2>Heading</h2>
                     </p>
                     <fast-button>
                         <template shadowroot="open">
-                            <fast-style data-style-id="fast-button"></fast-style>
+                            <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
                                 <span>
                                     Button
@@ -356,7 +356,7 @@ <h2>Heading</h2>
         </fast-card>
         <fast-card style="width: 300px;">
             <template shadowroot="open">
-                <fast-style data-style-id="fast-card"></fast-style>
+                <fast-style style-id="fast-card"></fast-style>
                 <img src="https://via.placeholder.com/300x200/414141" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
                     <h2>Heading</h2>
@@ -369,7 +369,7 @@ <h2>Heading</h2>
                     </p>
                     <fast-button>
                         <template shadowroot="open">
-                            <fast-style data-style-id="fast-button"></fast-style>
+                            <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
                                 <span>
                                     Button
@@ -382,7 +382,7 @@ <h2>Heading</h2>
         </fast-card>
         <fast-card style="width: 300px;">
             <template shadowroot="open">
-                <fast-style data-style-id="fast-card"></fast-style>
+                <fast-style style-id="fast-card"></fast-style>
                 <img src="https://via.placeholder.com/300x200/414141" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
                     <h2>Heading</h2>
@@ -395,7 +395,7 @@ <h2>Heading</h2>
                     </p>
                     <fast-button>
                         <template shadowroot="open">
-                            <fast-style data-style-id="fast-button"></fast-style>
+                            <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
                                 <span>
                                     Button
@@ -408,7 +408,7 @@ <h2>Heading</h2>
         </fast-card>
         <fast-card style="width: 300px;">
             <template shadowroot="open">
-                <fast-style data-style-id="fast-card"></fast-style>
+                <fast-style style-id="fast-card"></fast-style>
                 <img src="https://via.placeholder.com/300x200/414141" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest);">
                     <h2>Heading</h2>
@@ -421,7 +421,7 @@ <h2>Heading</h2>
                     </p>
                     <fast-button>
                         <template shadowroot="open">
-                            <fast-style data-style-id="fast-button"></fast-style>
+                            <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
                                 <span>
                                     Button
diff --git a/packages/web-components/fast-ssr/src/fast-style/fast-style.spec.ts b/packages/web-components/fast-ssr/src/styles/fast-style.spec.ts
similarity index 100%
rename from packages/web-components/fast-ssr/src/fast-style/fast-style.spec.ts
rename to packages/web-components/fast-ssr/src/styles/fast-style.spec.ts
diff --git a/packages/web-components/fast-ssr/src/fast-style/index.ts b/packages/web-components/fast-ssr/src/styles/fast-style.ts
similarity index 87%
rename from packages/web-components/fast-ssr/src/fast-style/index.ts
rename to packages/web-components/fast-ssr/src/styles/fast-style.ts
index cb480301651..aaf039ee1ba 100644
--- a/packages/web-components/fast-ssr/src/fast-style/index.ts
+++ b/packages/web-components/fast-ssr/src/styles/fast-style.ts
@@ -4,12 +4,12 @@ interface StyleCache {
 
 /**
  * The FASTStyle web component that takes attributes:
- * - css - a string version of the CSS to be applied to the parent web component, this can be omitted if the data-style-id has been used in the DOM as the cached value will be fetched
- * - data-style-id - a dataset attribute used as an identifier for the CSS attr string
+ * - css - a string version of the CSS to be applied to the parent web component, this can be omitted if the style-id has been used in the DOM as the cached value will be fetched
+ * - style-id - a dataset attribute used as an identifier for the CSS attr string
  */
 export default class FASTStyle extends HTMLElement {
     private static cache: StyleCache = {};
-    private static hashIdDataSetName: string = "data-style-id";
+    private static hashIdDataSetName: string = "style-id";
     private static supportsAdoptedStyleSheets: boolean =
         Array.isArray((document as any).adoptedStyleSheets) &&
         "replace" in CSSStyleSheet.prototype;
@@ -76,4 +76,5 @@ export default class FASTStyle extends HTMLElement {
     }
 }
 
-customElements.define("fast-style", FASTStyle);
+export const fastStyleTagName = "fast-style";
+customElements.define(fastStyleTagName, FASTStyle);
diff --git a/packages/web-components/fast-ssr/src/styles/style-renderer.spec.ts b/packages/web-components/fast-ssr/src/styles/style-renderer.spec.ts
new file mode 100644
index 00000000000..3c768d8b80c
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/styles/style-renderer.spec.ts
@@ -0,0 +1,63 @@
+import "../dom-shim.js";
+import { test, expect } from "@playwright/test";
+import { FASTStyleStyleRenderer } from "./style-renderer.js";
+import { css } from "@microsoft/fast-element";
+
+
+const cssSheetRegex = /css="?(.+)"/m;
+function getSheet(element: string): string | null {
+    const result = cssSheetRegex.exec(element);
+
+    if (result === null) {
+        return null
+    } else {
+        return result[1];
+    }
+}
+test.describe("FASTStyleStyleRenderer", () => {
+    test("should return a '<fast-style'> element", () => {
+        const style = css``;
+        const renderer = new FASTStyleStyleRenderer();
+        const tester = /<fast-style .+><\/fast-style>/
+        expect(tester.test(renderer.render(style))).not.toBeNull()
+    });
+    test("should return a '<fast-style'> element without a 'css' attribute when the sheet has already been rendered", () => {
+        const renderer = new FASTStyleStyleRenderer();
+        const style = css``;
+        const firstResult = renderer.render(style);
+        expect(cssSheetRegex.test(firstResult)).toBe(true);
+
+        const secondResult = renderer.render(style);
+
+        expect(firstResult).not.toBe(secondResult);
+        expect(cssSheetRegex.test(secondResult)).toBe(false)
+    });
+
+    test("should emit the sheet content into the 'css' attribute the first time a sheet instance is rendered", () => {
+        const renderer = new FASTStyleStyleRenderer();
+        const style = css`:host{ color: red; }`;
+
+        const result = renderer.render(style);
+
+        expect(getSheet(result)).toBe(':host{ color: red; }');
+    });
+
+    test("should emit the sheet content for embedded ElementStyle instances", () => {
+        const renderer = new FASTStyleStyleRenderer();
+        const style = css`:host{ color: red; } ${css`:host { background: blue; }`}`;
+
+        const result = renderer.render(style);
+
+        expect(getSheet(result)).toBe(':host{ color: red; } :host { background: blue; }');
+    });
+
+
+    test("should emit the sheet content for embedded strings", () => {
+        const renderer = new FASTStyleStyleRenderer();
+        const style = css`:host{ color: red; } ${`:host { background: blue; }`}`;
+
+        const result = renderer.render(style);
+
+        expect(getSheet(result)).toBe(':host{ color: red; } :host { background: blue; }');
+    });
+});
diff --git a/packages/web-components/fast-ssr/src/styles/style-renderer.ts b/packages/web-components/fast-ssr/src/styles/style-renderer.ts
new file mode 100644
index 00000000000..a4b3c97702f
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/styles/style-renderer.ts
@@ -0,0 +1,53 @@
+import { ComposableStyles, ElementStyles } from "@microsoft/fast-element";
+import { fastStyleTagName } from "./fast-style.js";
+function collectStyles(style: ComposableStyles): string {
+    let content: string = "";
+    if (typeof style === "string") {
+        content = style;
+    } else if (style instanceof CSSStyleSheet) {
+        const rules = style.cssRules;
+
+        for (let i = 0, length = rules.length; i < length; i++) {
+            content += rules[i].cssText;
+        }
+    } else {
+        for (const s of style.styles) {
+            content += collectStyles(s);
+        }
+    }
+
+    return content;
+}
+
+export interface StyleRenderer {
+    render(styles: ElementStyles): string;
+}
+
+export class FASTStyleStyleRenderer implements StyleRenderer {
+    private static stylesheetCache = new Map<ElementStyles, string>();
+    private static nextId = (() => {
+        let id = 0;
+        const prefix = "fast-style";
+        return () => `${prefix}-${id++}`;
+    })();
+
+    public render(styles: ElementStyles): string {
+        let id = FASTStyleStyleRenderer.stylesheetCache.get(styles);
+        const content = id === undefined ? collectStyles(styles) : null;
+        let contentAttr = "";
+
+        if (content !== null) {
+            id = FASTStyleStyleRenderer.nextId();
+            FASTStyleStyleRenderer.stylesheetCache.set(styles, id);
+            contentAttr = `css="${content}"`;
+        }
+
+        return `<${fastStyleTagName} style-id="${id}" ${contentAttr}></${fastStyleTagName}>`;
+    }
+}
+
+export class StyleElementStyleRenderer implements StyleRenderer {
+    public render(styles: ElementStyles): string {
+        return `<style>${collectStyles(styles)}</style>`;
+    }
+}
diff --git a/packages/web-components/fast-ssr/src/template-parser/attributes.ts b/packages/web-components/fast-ssr/src/template-parser/attributes.ts
deleted file mode 100644
index 8e4f322a44a..00000000000
--- a/packages/web-components/fast-ssr/src/template-parser/attributes.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Extracts the attribute type from an attribute name
- */
-export const attributeTypeRegExp = /([:?@])?(.*)/;
-
-/**
- * The types of attributes applied in a template
- */
-export enum AttributeType {
-    content,
-    booleanContent,
-    idl,
-    event,
-}
diff --git a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
index 18c1ee88d25..a3b59f8afe1 100644
--- a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
@@ -1,10 +1,9 @@
-import { HTMLDirective } from "@microsoft/fast-element";
-import { AttributeType } from "./attributes.js";
+import { Aspect, Binding, HTMLDirective } from "@microsoft/fast-element";
 
 /**
  * Allows fast identification of operation types
  */
-export enum OpType {
+export const enum OpType {
     customElementOpen,
     customElementClose,
     customElementAttributes,
@@ -70,9 +69,14 @@ export type DirectiveOp = {
  */
 export type AttributeBindingOp = {
     type: OpType.attributeBinding;
-    directive: HTMLDirective;
-    name: string;
-    attributeType: AttributeType;
+    binding: Binding;
+    target: string;
+    aspect:
+        | Aspect.attribute
+        | Aspect.booleanAttribute
+        | Aspect.event
+        | Aspect.property
+        | Aspect.tokenList;
     useCustomElementInstance: boolean;
 };
 
@@ -84,7 +88,7 @@ export type TemplateElementOpenOp = {
     staticAttributes: Map<string, string>;
     // We need dynamic attributes here so we can emit the `<template`, all attributes, and then `>`
     // from one operation
-    dynamicAttributes: Pick<AttributeBindingOp, "name" | "attributeType" | "directive">[];
+    dynamicAttributes: Pick<AttributeBindingOp, "binding" | "target" | "aspect">[];
 };
 
 /**
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
index c6287537b2f..024455426de 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
@@ -1,10 +1,9 @@
 
-import "@lit-labs/ssr/lib/install-global-dom-shim.js";
-import { test, expect } from "@playwright/test";
-import { parseTemplateToOpCodes} from "./template-parser.js";
-import { ViewTemplate, html, FASTElement, customElement, defaultExecutionContext } from "@microsoft/fast-element"
-import { Op, OpType, CustomElementOpenOp, AttributeBindingOp, DirectiveOp, TemplateElementOpenOp, TextOp } from "./op-codes.js";
-import { AttributeType } from "./attributes.js";
+import "../dom-shim.js";
+import { Aspect, customElement, FASTElement, html, ViewTemplate } from "@microsoft/fast-element";
+import { expect, test } from "@playwright/test";
+import { AttributeBindingOp, CustomElementOpenOp, DirectiveOp, OpType, TemplateElementOpenOp, TextOp } from "./op-codes.js";
+import { parseTemplateToOpCodes } from "./template-parser.js";
 
 @customElement("hello-world")
 class HelloWorld extends FASTElement {}
@@ -31,12 +30,12 @@ test.describe("parseTemplateToOpCodes", () => {
             const input = html`${() => "hello world"}`;
             expect(parseTemplateToOpCodes(input)).toEqual([{ type: OpType.directive, directive: input.directives[0]}])
     });
-    test("should emit a directive op from text and a binding ", () => {
+    test("should emit a directive op from a content binding", () => {
             const input = html`Hello ${() => "World"}.`;
 
             const codes = parseTemplateToOpCodes(input);
-            const code = codes[0] as DirectiveOp;
-            expect(codes.length).toBe(1);
+            const code = codes[1] as DirectiveOp;
+            expect(codes.length).toBe(3);
             expect(code.type).toBe(OpType.directive);
     });
     test("should sandwich directive ops between text ops when binding native element content", () => {
@@ -78,25 +77,29 @@ test.describe("parseTemplateToOpCodes", () => {
         const codes = parseTemplateToOpCodes(input).filter(x => x.type === OpType.attributeBinding) as AttributeBindingOp[];
 
         expect(codes.length).toBe(4);
-        expect(codes[0].attributeType).toBe(AttributeType.content);
-        expect(codes[1].attributeType).toBe(AttributeType.booleanContent);
-        expect(codes[2].attributeType).toBe(AttributeType.idl);
-        expect(codes[3].attributeType).toBe(AttributeType.event);
+        expect(codes[0].aspect).toBe(Aspect.attribute);
+        expect(codes[1].aspect).toBe(Aspect.booleanAttribute);
+        expect(codes[2].aspect).toBe(Aspect.property);
+        expect(codes[3].aspect).toBe(Aspect.event);
     });
     test("should emit attributes binding ops for a custom element with attribute bindings", () => {
         const input = html`<hello-world string-value="${x => "value"}" ?bool-value="${x => false}" :property-value="${x => "value"}" @event="${x => {}}"></hello-world>`;
         const codes = parseTemplateToOpCodes(input).filter(x => x.type === OpType.attributeBinding) as AttributeBindingOp[];
 
         expect(codes.length).toBe(4);
-        expect(codes[0].attributeType).toBe(AttributeType.content);
-        expect(codes[0].name).toBe("string-value");
-        expect(codes[1].attributeType).toBe(AttributeType.booleanContent);
-        expect(codes[1].name).toBe("bool-value");
-        expect(codes[2].attributeType).toBe(AttributeType.idl);
-        expect(codes[2].name).toBe("property-value");
-        expect(codes[3].attributeType).toBe(AttributeType.event);
-        expect(codes[3].name).toBe("event");
+        expect(codes[0].aspect).toBe(Aspect.attribute);
+        expect(codes[1].aspect).toBe(Aspect.booleanAttribute);
+        expect(codes[2].aspect).toBe(Aspect.property);
+        expect(codes[3].aspect).toBe(Aspect.event);
     });
+
+    test("should emit names to attribute bindings ops that do not contain attribute type prefixes", () => {
+        const input = html`<hello-world string-value="${x => "value"}" ?bool-value="${x => false}" :property-value="${x => "value"}" @event="${x => {}}"></hello-world>`;
+        const codes = parseTemplateToOpCodes(input).filter(x => x.type === OpType.attributeBinding) as AttributeBindingOp[];
+
+        expect(codes.length).toBe(4);
+    });
+
     test("should emit template open and close ops for a template element", () => {
         const input = html`<template></template>`;
         const codes = parseTemplateToOpCodes(input);
@@ -117,17 +120,17 @@ test.describe("parseTemplateToOpCodes", () => {
         const open = parseTemplateToOpCodes(input)[0] as TemplateElementOpenOp;
 
         const attrs = new Map(open.dynamicAttributes.map(x => {
-            return [x.name, x];
+            return [x.target, x];
         }))
 
         expect(attrs.has("id")).toBe(true);
-        expect(attrs.get("id")!.attributeType).toBe(AttributeType.content);
+        expect(attrs.get("id")!.aspect).toBe(Aspect.attribute);
         expect(attrs.has("boolean")).toBe(true);
-        expect(attrs.get("boolean")!.attributeType).toBe(AttributeType.booleanContent);
+        expect(attrs.get("boolean")!.aspect).toBe(Aspect.booleanAttribute);
         expect(attrs.has("event")).toBe(true);
-        expect(attrs.get("event")!.attributeType).toBe(AttributeType.event);
+        expect(attrs.get("event")!.aspect).toBe(Aspect.event);
         expect(attrs.has("property")).toBe(true);
-        expect(attrs.get("property")!.attributeType).toBe(AttributeType.idl);
+        expect(attrs.get("property")!.aspect).toBe(Aspect.property);
     });
     test("should emit template open ops with static and dynamic attributes", () => {
         const input = html`<template id="foo" ?boolean=${x => true}></template>`;
@@ -136,7 +139,7 @@ test.describe("parseTemplateToOpCodes", () => {
         expect(open.staticAttributes.size).toBe(1);
         expect(open.staticAttributes.get("id")).toBe("foo");
         expect(open.dynamicAttributes.length).toBe(1);
-        expect(open.dynamicAttributes[0].name).toBe("boolean");
+        expect(open.dynamicAttributes[0].target).toBe("boolean");
     });
 
     test("should emit template template ops between other ops when nested inside of another element", () => {
@@ -151,4 +154,3 @@ test.describe("parseTemplateToOpCodes", () => {
         expect((codes[3] as TextOp).value).toBe(`</div>`);
     })
 });
-// TODO add test that name for property, bool, and event attrs has the prefix removed.
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
index a78cbf6c33e..c08ddc46ce8 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
@@ -2,7 +2,14 @@
  * This code is largely a fork of lit's rendering implementation: https://github.com/lit/lit/blob/main/packages/labs/ssr/src/lib/render-lit-html.ts
  * with changes as necessary to render FAST components. A big thank you to those who contributed to lit's code above.
  */
-import { Compiler, Parser, ViewTemplate } from "@microsoft/fast-element";
+import {
+    Aspect,
+    AspectedHTMLDirective,
+    Compiler,
+    HTMLDirective,
+    Parser,
+    ViewTemplate,
+} from "@microsoft/fast-element";
 import {
     Attribute,
     DefaultTreeCommentNode,
@@ -12,7 +19,6 @@ import {
     DefaultTreeTextNode,
     parseFragment,
 } from "parse5";
-import { AttributeType, attributeTypeRegExp } from "./attributes.js";
 import { AttributeBindingOp, Op, OpType } from "./op-codes.js";
 
 /**
@@ -48,6 +54,10 @@ function traverse(node: DefaultTreeNode | DefaultTreeParentNode, visitor: Visito
         }
     }
 
+    if (node.nodeName === "template") {
+        traverse((node as any).content, visitor);
+    }
+
     if (visitor.leave) {
         visitor.leave(node);
     }
@@ -77,28 +87,6 @@ function isElementNode(node: DefaultTreeNode): node is DefaultTreeElement {
     return (node as DefaultTreeElement).tagName !== undefined;
 }
 
-/**
- * Determines which type of attribute binding an attribute is
- * @param attr - The attribute to inspect
- */
-function getAttributeType(attr: Attribute): AttributeType {
-    const result = attributeTypeRegExp.exec(attr.name);
-
-    if (result === null) {
-        throw new Error("Failure to determine attribute binding type");
-    }
-
-    const prefix = result[1];
-
-    return prefix === ":"
-        ? AttributeType.idl
-        : prefix === "?"
-        ? AttributeType.booleanContent
-        : prefix === "@"
-        ? AttributeType.event
-        : AttributeType.content;
-}
-
 /**
  * Parses a template into a set of operation instructions
  * @param template - The template to parse
@@ -122,11 +110,21 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
      * below, so store in a new var that is just a string type
      */
     const templateString = html;
-    const nodeTree = parseFragment(html, { sourceCodeLocationInfo: true });
+
+    const codes = parseStringToOpCodes(templateString, template.directives);
+    opCache.set(template, codes);
+    return codes;
+}
+
+export function parseStringToOpCodes(
+    templateString: string,
+    directives: ReadonlyArray<HTMLDirective>
+): Op[] {
+    const nodeTree = parseFragment(templateString, { sourceCodeLocationInfo: true });
 
     if (!("nodeName" in nodeTree)) {
         // I'm not sure when exactly this is encountered but the type system seems to say it's possible.
-        throw new Error(`Error parsing template:\n${template}`);
+        throw new Error(`Error parsing template`);
     }
 
     /**
@@ -139,9 +137,6 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
      * Collection of op codes
      */
     const opCodes: Op[] = [];
-    opCache.set(template, opCodes);
-
-    const { directives } = template;
 
     /**
      * Parses an Element node, pushing all op codes for the element into
@@ -155,6 +150,7 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
         let augmentOpeningTag = false;
         const { tagName } = node;
         const ctor: typeof HTMLElement | undefined = customElements.get(node.tagName);
+        node.isDefinedCustomElement = !!ctor;
 
         // Sort attributes by whether they're related to a binding or if they have
         // static value
@@ -164,18 +160,24 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
         } = node.attrs.reduce(
             (prev, current) => {
                 const parsed = Parser.parse(current.value, directives);
-                const attributeType = getAttributeType(current);
                 if (parsed) {
-                    prev.dynamic.set(current, {
-                        type: OpType.attributeBinding,
-                        name:
-                            attributeType === AttributeType.content
-                                ? current.name
-                                : current.name.substring(1),
-                        directive: Compiler.aggregate(parsed),
-                        attributeType,
-                        useCustomElementInstance: Boolean(node.isDefinedCustomElement),
-                    });
+                    const directive = Compiler.aggregate(parsed);
+                    // Guard against directives like children, ref, and slotted
+                    if (
+                        directive instanceof AspectedHTMLDirective &&
+                        directive.binding &&
+                        directive.aspect !== Aspect.content
+                    ) {
+                        prev.dynamic.set(current, {
+                            type: OpType.attributeBinding,
+                            binding: directive.binding,
+                            aspect: directive.aspect,
+                            target: directive.target,
+                            useCustomElementInstance: Boolean(
+                                node.isDefinedCustomElement
+                            ),
+                        });
+                    }
                 } else {
                     prev.static.set(current.name, current.value);
                 }
@@ -188,10 +190,9 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
             }
         );
 
-        // Special processing for any custom element
+        // Emit a CustomElementOpenOp when the custom element is defined
         if (ctor !== undefined) {
             augmentOpeningTag = true;
-            node.isDefinedCustomElement = true;
             opCodes.push({
                 type: OpType.customElementOpen,
                 tagName,
@@ -199,6 +200,9 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
                 staticAttributes: attributes.static,
             });
         } else if (node.tagName === "template") {
+            // Template elements need special handling due to the host directive behavior
+            // when used as the root element in a custom element template
+            // (https://www.fast.design/docs/fast-element/using-directives#host-directives).
             flushTo(node.sourceCodeLocation?.startTag.startOffset);
             opCodes.push({
                 type: OpType.templateElementOpen,
@@ -209,15 +213,32 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
             return;
         }
 
-        // Push attribute binding op codes for any attributes that
-        // are dynamic
-        if (attributes.dynamic.size) {
-            for (const [attr, code] of attributes.dynamic) {
+        // Iterate attributes in-order so that codes can be pushed for dynamic attributes in-order.
+        // All dynamic attributes will be rendered from an AttributeBindingOp. Additionally, When the
+        // node is a custom element, all static attributes will be rendered via the CustomElementOpenOp,
+        // so this code skips over static attributes in that case.
+        for (const attr of node.attrs) {
+            if (attributes.dynamic.has(attr)) {
                 const location = node.sourceCodeLocation!.attrs[attr.name];
+                const code = attributes.dynamic.get(attr)!;
                 flushTo(location.startOffset);
                 augmentOpeningTag = true;
                 opCodes.push(code);
                 skipTo(location.endOffset);
+            } else if (!attributes.static.has(attr.name)) {
+                // Handle interpolated directives like children, ref, and slotted
+                const parsed = Parser.parse(attr.value, directives);
+                if (parsed) {
+                    const location = node.sourceCodeLocation!.attrs[attr.name];
+                    const directive = Compiler.aggregate(parsed);
+                    flushTo(location.startOffset);
+                    opCodes.push({ type: OpType.directive, directive });
+                    skipTo(location.endOffset);
+                }
+            } else if (node.isDefinedCustomElement) {
+                const location = node.sourceCodeLocation!.attrs[attr.name];
+                flushTo(location.startOffset);
+                skipTo(location.endOffset);
             }
         }
 
@@ -287,17 +308,24 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
     traverse(nodeTree, {
         visit(node: DefaultTreeNode): void {
             if (isCommentNode(node) || isTextNode(node)) {
-                const value =
-                    (node as DefaultTreeCommentNode).data ||
-                    (node as DefaultTreeTextNode).value;
-                const parsed = Parser.parse(value, directives);
+                const parsed = Parser.parse(
+                    (node as DefaultTreeCommentNode)?.data ||
+                        (node as DefaultTreeTextNode).value,
+                    directives
+                );
 
                 if (parsed) {
                     flushTo(node.sourceCodeLocation!.startOffset);
-                    opCodes.push({
-                        type: OpType.directive,
-                        directive: Compiler.aggregate(parsed),
-                    });
+                    for (const part of parsed) {
+                        if (typeof part === "string") {
+                            flush(part);
+                        } else {
+                            opCodes.push({
+                                type: OpType.directive,
+                                directive: part,
+                            });
+                        }
+                    }
                     skipTo(node.sourceCodeLocation!.endOffset);
                 }
             } else if (isElementNode(node)) {
diff --git a/packages/web-components/fast-ssr/src/template-renderer/directives.ts b/packages/web-components/fast-ssr/src/template-renderer/directives.ts
new file mode 100644
index 00000000000..bdd63f832f0
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/template-renderer/directives.ts
@@ -0,0 +1,98 @@
+import { RenderInfo } from "@lit-labs/ssr";
+import {
+    ChildrenDirective,
+    Constructable,
+    ExecutionContext,
+    RefDirective,
+    RepeatDirective,
+    SlottedDirective,
+    ViewTemplate,
+} from "@microsoft/fast-element";
+import { TemplateRenderer } from "./template-renderer.js";
+
+/**
+ * Describes an implementation that can render a directive
+ */
+export interface DirectiveRenderer<T extends Constructable> {
+    render(
+        directive: InstanceType<T>,
+        renderInfo: RenderInfo,
+        source: any,
+        renderer: TemplateRenderer,
+        context: ExecutionContext
+    ): IterableIterator<string>;
+    matcher: T;
+}
+
+export const RepeatDirectiveRenderer: DirectiveRenderer<typeof RepeatDirective> = Object.freeze(
+    {
+        matcher: RepeatDirective,
+        *render(
+            directive: InstanceType<typeof RepeatDirective>,
+            renderInfo: RenderInfo,
+            source: any,
+            renderer: TemplateRenderer,
+            context: ExecutionContext
+        ): IterableIterator<string> {
+            const items = directive.itemsBinding(source, context);
+            const template = directive.templateBinding(source, context);
+            const childContext: ExecutionContext = Object.create(context);
+            childContext.parent = source;
+            childContext.parentContext = context;
+
+            if (template instanceof ViewTemplate) {
+                if (directive.options.positioning) {
+                    for (let i = 0, length = items.length; i < length; i++) {
+                        const ctx: ExecutionContext = Object.create(childContext);
+                        // Match fast-element context creation behavior. Perhaps this should be abstracted
+                        // So both fast-ssr and fast-element leverage the same context creation code?
+                        ctx.index = i;
+                        ctx.length = length;
+                        yield* renderer.render(template, renderInfo, items[i], ctx);
+                    }
+                } else {
+                    for (let i = 0, length = items.length; i < length; i++) {
+                        yield* renderer.render(
+                            template,
+                            renderInfo,
+                            items[i],
+                            childContext
+                        );
+                    }
+                }
+            } else {
+                throw new Error("Unable to render Repeat Directive template");
+            }
+        },
+    }
+);
+
+function* noop() {
+    yield "";
+}
+export const ChildrenDirectiveRenderer: DirectiveRenderer<typeof ChildrenDirective> = Object.freeze(
+    {
+        matcher: ChildrenDirective,
+        render: noop,
+    }
+);
+
+export const RefDirectiveRenderer: DirectiveRenderer<typeof RefDirective> = Object.freeze(
+    {
+        matcher: RefDirective,
+        render: noop,
+    }
+);
+export const SlottedDirectiveRenderer: DirectiveRenderer<typeof SlottedDirective> = Object.freeze(
+    {
+        matcher: SlottedDirective,
+        render: noop,
+    }
+);
+
+export const defaultFASTDirectiveRenderers: DirectiveRenderer<any>[] = [
+    RepeatDirectiveRenderer,
+    ChildrenDirectiveRenderer,
+    RefDirectiveRenderer,
+    SlottedDirectiveRenderer,
+];
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
index 2d2ccc77056..160b10113fc 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
@@ -1,6 +1,19 @@
-import { test, expect } from "@playwright/test";
+import "../dom-shim.js";
+import { children, customElement, defaultExecutionContext, FASTElement, html, ref, repeat, slotted, when } from "@microsoft/fast-element";
+import { expect, test } from "@playwright/test";
+import fastSSR from "../exports.js";
+import { consolidate } from "../test-utils.js";
 import { TemplateRenderer } from "./template-renderer.js";
-import { template } from "@babel/core";
+
+@customElement("hello-world")
+class HelloWorld extends FASTElement {}
+
+@customElement({name: "with-slot", template: html`<slot></slot>`})
+class WithSlot extends FASTElement {}
+
+@customElement({name: "with-host-attributes", template: html`<template static="static" dynamic="${x => "dynamic"}" ?bool-true=${x => true} ?bool-false=${x => false} :property=${x => "value"}>${x => x.property}<slot></slot></template>`})
+class WithHostAttributes extends FASTElement {}
+
 
 test.describe("TemplateRenderer", () => {
     test.describe("should have an initial configuration", () => {
@@ -16,4 +29,240 @@ test.describe("TemplateRenderer", () => {
             expect(instance.componentDOMEmissionMode).toBe("light")
         });
     });
+
+    test.describe("rendering <template> elements", () => {
+        test("should render a template element without attributes", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<template></template>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe("<template></template>");
+        });
+        test("should render a template element with static attributes", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<template name="foo" id="bar"></template>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe(`<template name="foo" id="bar"></template>`);
+        });
+        test("should render a template element with dynamic attributes", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<template name=${x => "bar"} id=${x => "bat"}></template>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe(`<template name="bar" id="bat"></template>`);
+        });
+        test("should render a template element with both static and dynamic attributes", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<template id="bar" name=${x => "foo"}></template>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe(`<template id="bar" name="foo"></template>`);
+        });
+        test("should render with static attributes preceding dynamic attributes", () => {
+            // Attribute order changes are due to attribute categorization during template parsing.
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<template name=${x => "foo"} id="bar"></template>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe(`<template id="bar" name="foo"></template>`);
+        });
+        test("should render a template with content", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<template name="bar"><p>Hello world</p></template>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe(`<template name="bar"><p>Hello world</p></template>`);
+        });
+        test("should render a template as a child element", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<p><template name="bar"></template></p>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe(`<p><template name="bar"></template></p>`);
+        });
+    });
+
+    test.describe("rendering declarative shadow DOM", () => {
+        test("should emit static shadow DOM template for a defined custom element", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<with-slot></with-slot>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe("<with-slot><template shadowroot=\"open\"><slot></slot></template></with-slot>");
+        });
+        test("should emit template element with shadowroot attribute for defined custom element", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<hello-world></hello-world>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe("<hello-world><template shadowroot=\"open\"></template></hello-world>");
+        });
+        test("should a custom element with a static attribute", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<hello-world id="test"></hello-world>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe(`<hello-world  id="test"><template shadowroot=\"open\"></template></hello-world>`);
+        });
+
+        test("should emit a custom element with attributes and properties reflected from an element's root <template> element", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<with-host-attributes id="foo"></with-host-attributes>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe(`<with-host-attributes  id="foo" static="static" dynamic="dynamic" bool-true><template shadowroot=\"open\">value<slot></slot></template></with-host-attributes>`);
+        });
+    })
+
+    test("should emit a single element template", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = templateRenderer.render(html`<p>Hello world</p>`, defaultRenderInfo)
+
+        expect(consolidate(result)).toBe("<p>Hello world</p>")
+    });
+
+    test("should emit un-registered custom elements without any shadow DOM", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = templateRenderer.render(html`<unregistered-element>Hello world</unregistered-element>`, defaultRenderInfo)
+
+        expect(consolidate(result)).toBe("<unregistered-element>Hello world</unregistered-element>");
+    });
+
+    /**
+     * Bindings
+     */
+    test("should provide the source object to any bindings", () => {
+        const source = {};
+        let calledWith: any;
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        consolidate(templateRenderer.render(html`${(x) => {calledWith = x}}`, defaultRenderInfo, source));
+
+        expect(source).toBe(calledWith);
+    });
+
+    test("should provide the defaultExecutionContext object to a binding", () => {
+        let calledWith: any;
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        consolidate(templateRenderer.render(html`${(x, c) => {calledWith = c}}`, defaultRenderInfo));
+
+        expect(calledWith).toBe(defaultExecutionContext);
+    });
+
+
+    test("should not emit string content from a binding that returns a null value", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = consolidate(templateRenderer.render(html`${(x) => null}`, defaultRenderInfo));
+
+        expect(result).toBe("");
+    });
+
+    test("should not emit string content from a binding that returns an undefined value", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = consolidate(templateRenderer.render(html`${(x) => undefined}`, defaultRenderInfo));
+
+        expect(result).toBe("");
+    });
+
+    test("should emit a native element with an attribute when the attr binding returns a string", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = consolidate(templateRenderer.render(html`<p id="${(x) => "test"}"></p>`, defaultRenderInfo));
+
+        expect(result).toBe(`<p id="test"></p>`);
+    });
+
+    test("should emit a custom element with an attribute binding when the attr binding returns a string", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = templateRenderer.render(html`<hello-world my-attr=${x => "foobar"}></hello-world>`, defaultRenderInfo)
+
+        expect(consolidate(result)).toBe(`<hello-world  my-attr="foobar"><template shadowroot=\"open\"></template></hello-world>`);
+    });
+    test("should emit an element with a boolean attribute when the attr binding returns true", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = consolidate(templateRenderer.render(html`<input type="checkbox" ?checked="${(x) => true}" />`, defaultRenderInfo));
+
+        expect(result).toBe(`<input type="checkbox" checked />`);
+    });
+    test("should not emit an attribute for a boolean attribute that returns false", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = consolidate(templateRenderer.render(html`<input type="checkbox" ?checked="${(x) => false}" />`, defaultRenderInfo));
+
+        expect(result).toBe(`<input type="checkbox"  />`);
+    });
+
+    test("should emit embedded templates", () =>{
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+
+        const result = consolidate(templateRenderer.render(html`<p>Hello ${html`<span>world</span>`}</p>`, defaultRenderInfo))
+        expect(result).toBe(`<p>Hello <span>world</span></p>`);
+    });
+
+    test.describe("binding the the classList", () => {
+        test("should emit class attribute to native elements", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+
+            const result = consolidate(templateRenderer.render(html`<p :classList=${ x => "foo bar"}>Hello world</p>`, defaultRenderInfo))
+            expect(result).toBe(`<p class="foo bar">Hello world</p>`);
+        });
+        test("should emit class attribute to custom elements", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+
+            const result = consolidate(templateRenderer.render(html`<hello-world :classList=${x => "foo bar"}></hello-world>`, defaultRenderInfo))
+            expect(result).toBe(`<hello-world  class="foo bar"><template shadowroot="open"></template></hello-world>`);
+        });
+    });
+
+    /**
+     * Directive tests
+     */
+    test.describe("with a 'when' directive", () => {
+        test("should render a 'when' directive's content when the binding evaluates true", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`${when(x => true, html`<p>Hello world</p>`)}`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe("<p>Hello world</p>")
+        });
+        test("should emit nothing when a 'when' directive's binding evaluates false ", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`${when(x => false, html`<p>Hello world</p>`)}`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe("");
+        });
+    });
+
+    test.describe("with a 'repeat' directive", () => {
+        test("should provide parent and parentContext to execution context of bindings in child template", () => {
+
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const source = {
+                data: ["foo", "bar", "bat"]
+            };
+            const ctx = Object.create(defaultExecutionContext);
+            consolidate(templateRenderer.render(html<typeof source>`${repeat(x => x.data, html<string>`${(x, c) => {
+                expect(c.parent).toBe(source);
+                expect(c.parentContext).toBe(ctx)
+            }}`, { positioning: true})}`, defaultRenderInfo, source, ctx))
+        });
+        test("should provide positioning information when invoked with the positioning config", () => {
+
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const source = {
+                data: ["foo", "bar", "bat"]
+            };
+            let i = 0;
+            consolidate(templateRenderer.render(html<typeof source>`${repeat(x => x.data, html<string>`${(x, c) => {
+                expect(c.index).toBe(i);
+                i++;
+                expect(c.length).toBe(c.parent.data.length)
+            }}`, { positioning: true})}`, defaultRenderInfo, source))
+        });
+        test("should render the provided template with the instance as the source data", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const source = {
+                data: ["foo", "bar", "bat"]
+            };
+            const result = templateRenderer.render(html<typeof source>`${repeat(x => x.data, html<string>`${x => x}`)}`, defaultRenderInfo, source)
+            expect(consolidate( result )).toBe("foobarbat");
+        });
+    });
+    for (let directive of [children, ref, slotted ]) {
+        test.describe(`with '${directive.name}' directive`, () => {
+            test("should interpolate empty string", () => {
+                const { templateRenderer, defaultRenderInfo} = fastSSR();
+                const source = {}
+                const result = templateRenderer.render(html`<ul ${directive('items')}><li>Hello</li><li>World</li></ul>`, defaultRenderInfo, source);
+
+                expect(consolidate(result)).toBe("<ul ><li>Hello</li><li>World</li></ul>")
+            });
+        });
+    }
 });
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
index cc866d94f7c..311e73a30ef 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
@@ -1,19 +1,46 @@
-import { ViewTemplate } from "@microsoft/fast-element";
 import { RenderInfo } from "@lit-labs/ssr";
+import { getElementRenderer } from "@lit-labs/ssr/lib/element-renderer.js";
+import {
+    Aspect,
+    AspectedHTMLDirective,
+    defaultExecutionContext,
+    ExecutionContext,
+    ViewTemplate,
+} from "@microsoft/fast-element";
+import { Op, OpType } from "../template-parser/op-codes.js";
+import {
+    parseTemplateToOpCodes,
+    parseStringToOpCodes,
+} from "../template-parser/template-parser.js";
+import { DirectiveRenderer } from "./directives.js";
 
 export type ComponentDOMEmissionMode = "shadow" | "light";
 export interface TemplateRendererConfiguration {
     /**
      * Controls whether the template renderer should emit component template code to the component's shadow DOM or to its light DOM.
+     * @default "shadow"
      */
-    componentDOMEmissionMode: ComponentDOMEmissionMode;
+    componentDOMEmissionMode?: ComponentDOMEmissionMode;
+
+    /**
+     * Controls whether the template renderer should emit FASTStyle elements for stylesheets.
+     * Using FASTStyle can help reduce the SSR payload by only emitting stylesheet content once,
+     * and leveraging a Custom Element to map those stylesheets back to FAST element's on the client.
+     * @default false
+     */
+    useFASTStyle?: boolean;
 }
 
-export class TemplateRenderer implements Readonly<TemplateRendererConfiguration> {
+export class TemplateRenderer
+    implements Readonly<Required<TemplateRendererConfiguration>> {
+    private directiveRenderers: Map<any, DirectiveRenderer<any>> = new Map();
     /**
      * {@inheritDoc TemplateRendererConfiguration.componentDOMEmissionMode}
      */
     public readonly componentDOMEmissionMode: ComponentDOMEmissionMode = "shadow";
+
+    /** {@inheritdoc TemplateRendererConfiguration.useFASTStyle} */
+    public readonly useFASTStyle: boolean = false;
     constructor(config?: TemplateRendererConfiguration) {
         if (config) {
             Object.assign(this, config);
@@ -27,10 +54,213 @@ export class TemplateRenderer implements Readonly<TemplateRendererConfiguration>
      * @param source - Any source data to render the template and evaluate bindings with.
      */
     public *render(
-        template: ViewTemplate,
+        template: ViewTemplate | string,
         renderInfo: RenderInfo,
-        source?: unknown
+        source: unknown = undefined,
+        context: ExecutionContext = defaultExecutionContext
     ): IterableIterator<string> {
-        yield "";
+        const codes =
+            template instanceof ViewTemplate
+                ? parseTemplateToOpCodes(template)
+                : parseStringToOpCodes(template, []);
+
+        yield* this.renderOpCodes(codes, renderInfo, source, context);
+    }
+
+    /**
+     * Render a set of op codes.
+     * @internal
+     * @param codes
+     * @param renderInfo
+     * @param source
+     */
+    public *renderOpCodes(
+        codes: Op[],
+        renderInfo: RenderInfo,
+        source: unknown,
+        context: ExecutionContext
+    ): IterableIterator<string> {
+        for (const code of codes) {
+            switch (code.type) {
+                case OpType.text:
+                    yield code.value;
+                    break;
+                case OpType.directive: {
+                    const { directive } = code;
+                    const ctor = directive.constructor;
+                    if (this.directiveRenderers.has(ctor)) {
+                        yield* this.directiveRenderers
+                            .get(ctor)!
+                            .render(directive, renderInfo, source, this, context);
+                    } else if (
+                        directive instanceof AspectedHTMLDirective &&
+                        directive.binding
+                    ) {
+                        const result = directive.binding(source, context);
+
+                        // If the result is a template, render the template
+                        if (result instanceof ViewTemplate) {
+                            yield* this.render(result, renderInfo, source, context);
+                        } else if (result === null || result === undefined) {
+                            // Don't yield anything if result is null
+                            break;
+                        } else if (directive.aspect === Aspect.content) {
+                            yield result;
+                        } else {
+                            // debugging error - we should handle all result cases
+                            throw new Error(
+                                `Unknown AspectedHTMLDirective result found: ${result}`
+                            );
+                        }
+                    } else {
+                        // Throw if a SSR directive implementation cannot be found.
+                        throw new Error(`Unable to process HTMLDirective: ${directive}`);
+                    }
+
+                    break;
+                }
+                case OpType.customElementOpen: {
+                    const renderer = getElementRenderer(
+                        renderInfo,
+                        code.tagName,
+                        code.ctor,
+                        code.staticAttributes
+                    );
+
+                    if (renderer !== undefined) {
+                        for (const [name, value] of code.staticAttributes) {
+                            renderer.setAttribute(name, value);
+                        }
+
+                        renderInfo.customElementInstanceStack.push(renderer);
+                    }
+
+                    break;
+                }
+
+                case OpType.customElementClose: {
+                    renderInfo.customElementInstanceStack.pop();
+                    break;
+                }
+
+                case OpType.customElementAttributes: {
+                    const currentRenderer =
+                        renderInfo.customElementInstanceStack[
+                            renderInfo.customElementInstanceStack.length - 1
+                        ];
+                    if (currentRenderer) {
+                        // simulate DOM connection
+                        currentRenderer.connectedCallback();
+
+                        // Allow the renderer to hoist any attribute values it needs to
+                        yield* currentRenderer.renderAttributes();
+                    }
+
+                    break;
+                }
+
+                case OpType.customElementShadow: {
+                    yield '<template shadowroot="open">';
+
+                    const currentRenderer =
+                        renderInfo.customElementInstanceStack[
+                            renderInfo.customElementInstanceStack.length - 1
+                        ];
+                    if (currentRenderer) {
+                        const shadow = currentRenderer.renderShadow(renderInfo);
+
+                        if (shadow) {
+                            yield* shadow;
+                        }
+                    }
+
+                    yield "</template>";
+                    break;
+                }
+
+                case OpType.attributeBinding: {
+                    const { aspect, target, binding } = code;
+                    // Don't emit anything for events or directives without bindings
+                    if (aspect === Aspect.event) {
+                        break;
+                    }
+
+                    let result = binding(source, context);
+
+                    if (code.useCustomElementInstance) {
+                        const instance =
+                            renderInfo.customElementInstanceStack[
+                                renderInfo.customElementInstanceStack.length - 1
+                            ];
+
+                        if (instance) {
+                            switch (aspect) {
+                                case Aspect.property:
+                                    instance.setProperty(target, result);
+                                    break;
+                                case Aspect.tokenList:
+                                    instance.setAttribute("class", result);
+                                    break;
+                                default:
+                                    instance.setAttribute(target, result);
+                                    break;
+                            }
+                        }
+                    } else {
+                        // Only yield attributes as strings for native elements.
+                        // All custom-element attributes are emitted in the
+                        // OpType.customElementAttributes case
+                        switch (aspect) {
+                            case Aspect.booleanAttribute:
+                                if (!!result) {
+                                    result = "";
+                                    yield target;
+                                }
+                                break;
+                            case Aspect.attribute:
+                                if (result !== null && result !== undefined) {
+                                    yield `${target}="${result}"`;
+                                }
+                                break;
+                            case Aspect.tokenList:
+                                if (code.target === "classList") {
+                                    yield `class="${result}"`;
+                                }
+                                break;
+                        }
+                    }
+
+                    break;
+                }
+
+                case OpType.templateElementOpen:
+                    yield "<template";
+                    for (const [name, value] of code.staticAttributes) {
+                        yield ` ${name}="${value}"`;
+                    }
+
+                    for (const attr of code.dynamicAttributes) {
+                        yield ` ${attr.target}="${attr.binding(source, context)}"`;
+                    }
+                    yield ">";
+                    break;
+                case OpType.templateElementClose:
+                    yield "</template>";
+                    break;
+
+                default:
+                    throw new Error(`Unable to interpret op code '${code}'`);
+            }
+        }
+    }
+
+    /**
+     * Registers DirectiveRenderers to use when rendering templates.
+     * @param directives - The directive renderers to register
+     */
+    public withDirectiveRenderer(...directives: DirectiveRenderer<any>[]): void {
+        for (const renderer of directives) {
+            this.directiveRenderers.set(renderer.matcher, renderer);
+        }
     }
 }
diff --git a/packages/web-components/fast-ssr/src/test-utils.ts b/packages/web-components/fast-ssr/src/test-utils.ts
new file mode 100644
index 00000000000..9904eb6a061
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/test-utils.ts
@@ -0,0 +1,11 @@
+export function consolidate(strings: IterableIterator<string>): string {
+    let str = "";
+    let current = strings.next();
+
+    while (!current.done) {
+        str = str.concat(current.value);
+        current = strings.next();
+    }
+
+    return str;
+}
diff --git a/packages/web-components/fast-ssr/src/view.ts b/packages/web-components/fast-ssr/src/view.ts
new file mode 100644
index 00000000000..95452d4991e
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/view.ts
@@ -0,0 +1,59 @@
+import { HTMLDirective, HTMLTemplateCompilationResult } from "@microsoft/fast-element";
+import { Op, OpType, TemplateElementOpenOp } from "./template-parser/op-codes.js";
+import { parseStringToOpCodes } from "./template-parser/template-parser.js";
+
+/**
+ * SSR implementation of {@link @microsoft/fast-element#HTMLView}. Due to
+ * drastic type difference requirements, it does not extend it directly. Most
+ * methods are no-op. SSR op-codes are created during construction to be used
+ * by the ElementRenderer.
+ */
+export class SSRView {
+    public readonly html: string;
+    public readonly directives: ReadonlyArray<HTMLDirective>;
+    public result: HTMLTemplateCompilationResult | null = null;
+    public codes: Op[];
+    public hostStaticAttributes?: TemplateElementOpenOp["staticAttributes"];
+    public hostDynamicAttributes?: TemplateElementOpenOp["dynamicAttributes"];
+
+    constructor(html: string, directives: ReadonlyArray<HTMLDirective>) {
+        this.html = html;
+        this.directives = directives;
+        const codes = parseStringToOpCodes(html, directives);
+
+        // Check to see if the root is a template element. We may need to
+        // make this more sophisticated in the future because it doesn't quite
+        // implement the same behavior as the client-side compiler
+        // which uses Element.firstElementChild to check for template elements.
+        if (codes.length) {
+            const firstCode = codes[0];
+            if (
+                firstCode.type === OpType.templateElementOpen &&
+                codes[codes.length - 1].type === OpType.templateElementClose
+            ) {
+                if (firstCode.staticAttributes.size) {
+                    this.hostStaticAttributes = firstCode.staticAttributes;
+                }
+
+                if (firstCode.dynamicAttributes.length) {
+                    this.hostDynamicAttributes = firstCode.dynamicAttributes;
+                }
+
+                codes.shift();
+                codes.pop();
+            }
+        }
+        this.codes = codes;
+    }
+
+    public createView(): this {
+        return this;
+    }
+    public bind() {}
+    public unbind() {}
+    public appendTo() {}
+
+    public static isSSRView(view: any): view is SSRView {
+        return view instanceof SSRView;
+    }
+}

From b9fb11bd5c3100a48aba727960081fecc9997852 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Tue, 29 Mar 2022 17:07:12 -0400
Subject: [PATCH 087/135] feat: add warn/error message infrastructure (#5776)

* feat: add warn/error message infrastructure

* Change files

* feat: add sideEffects files and basic debug tests

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-07e66f75-3b9f-4287-b48c-3151388366f4.json |  7 ++++
 .../fast-element/docs/api-report.md           |  8 +++-
 .../web-components/fast-element/package.json  |  5 ++-
 .../fast-element/src/components/attributes.ts | 13 ++++---
 .../fast-element/src/components/controller.ts | 11 ++++--
 .../fast-element/src/debug.spec.ts            | 20 ++++++++++
 .../web-components/fast-element/src/debug.ts  | 31 ++++++++++++++++
 .../fast-element/src/interfaces.ts            | 37 +++++++++++++++++++
 .../src/observation/observable.ts             |  4 +-
 .../fast-element/src/platform.ts              | 12 +++++-
 .../fast-element/src/templating/binding.ts    |  5 ++-
 .../fast-element/src/templating/compiler.ts   |  5 ++-
 .../fast-element/src/templating/slotted.ts    |  6 ++-
 13 files changed, 144 insertions(+), 20 deletions(-)
 create mode 100644 change/@microsoft-fast-element-07e66f75-3b9f-4287-b48c-3151388366f4.json
 create mode 100644 packages/web-components/fast-element/src/debug.spec.ts
 create mode 100644 packages/web-components/fast-element/src/debug.ts

diff --git a/change/@microsoft-fast-element-07e66f75-3b9f-4287-b48c-3151388366f4.json b/change/@microsoft-fast-element-07e66f75-3b9f-4287-b48c-3151388366f4.json
new file mode 100644
index 00000000000..7ee72fa56da
--- /dev/null
+++ b/change/@microsoft-fast-element-07e66f75-3b9f-4287-b48c-3151388366f4.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add warn/error message infrastructure",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 4ca7cc34f55..3150ac39d7c 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -74,8 +74,11 @@ export class AttributeDefinition implements Accessor {
     setValue(source: HTMLElement, newValue: any): void;
 }
 
+// Warning: (ae-forgotten-export) The symbol "reflectMode" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "booleanMode" needs to be exported by the entry point index.d.ts
+//
 // @public
-export type AttributeMode = "reflect" | "boolean" | "fromView";
+export type AttributeMode = typeof reflectMode | typeof booleanMode | "fromView";
 
 // @public
 export interface Behavior<TSource = any, TParent = any, TGrandparent = any> {
@@ -340,10 +343,13 @@ export class FASTElementDefinition<TType extends Function = Function> {
 //
 // @internal
 export interface FASTGlobal {
+    addMessages(messages: Record<number, string>): void;
+    error(code: number, ...args: any[]): Error;
     getById<T>(id: string | number): T | null;
     // (undocumented)
     getById<T>(id: string | number, initialize: () => T): T;
     readonly versions: string[];
+    warn(code: number, ...args: any[]): void;
 }
 
 // @public
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index b812544567c..1f603f52c74 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -1,7 +1,6 @@
 {
   "name": "@microsoft/fast-element",
   "description": "A library for constructing Web Components",
-  "sideEffects": false,
   "version": "1.10.2",
   "author": {
     "name": "Microsoft",
@@ -20,6 +19,10 @@
   "types": "dist/fast-element.d.ts",
   "type": "module",
   "unpkg": "dist/fast-element.min.js",
+  "sideEffects": [
+    "./dist/esm/debug.js",
+    "./dist/esm/polyfills.js"
+  ],
   "scripts": {
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",
diff --git a/packages/web-components/fast-element/src/components/attributes.ts b/packages/web-components/fast-element/src/components/attributes.ts
index cb3051f44f4..09923498593 100644
--- a/packages/web-components/fast-element/src/components/attributes.ts
+++ b/packages/web-components/fast-element/src/components/attributes.ts
@@ -22,6 +22,9 @@ export interface ValueConverter {
     fromView(value: any): any;
 }
 
+const booleanMode = "boolean";
+const reflectMode = "reflect";
+
 /**
  * The mode that specifies the runtime behavior of the attribute.
  * @remarks
@@ -33,7 +36,7 @@ export interface ValueConverter {
  * changes in the DOM, but does not reflect property changes back.
  * @public
  */
-export type AttributeMode = "reflect" | "boolean" | "fromView";
+export type AttributeMode = typeof reflectMode | typeof booleanMode | "fromView";
 
 /**
  * Metadata used to configure a custom attribute's behavior.
@@ -149,7 +152,7 @@ export class AttributeDefinition implements Accessor {
         Owner: Function,
         name: string,
         attribute: string = name.toLowerCase(),
-        mode: AttributeMode = "reflect",
+        mode: AttributeMode = reflectMode,
         converter?: ValueConverter
     ) {
         this.Owner = Owner;
@@ -161,7 +164,7 @@ export class AttributeDefinition implements Accessor {
         this.callbackName = `${name}Changed`;
         this.hasCallback = this.callbackName in Owner.prototype;
 
-        if (mode === "boolean" && converter === void 0) {
+        if (mode === booleanMode && converter === void 0) {
             this.converter = booleanConverter;
         }
     }
@@ -226,7 +229,7 @@ export class AttributeDefinition implements Accessor {
             const latestValue = element[this.fieldName];
 
             switch (mode) {
-                case "reflect":
+                case reflectMode:
                     const converter = this.converter;
                     DOM.setAttribute(
                         element,
@@ -234,7 +237,7 @@ export class AttributeDefinition implements Accessor {
                         converter !== void 0 ? converter.toView(latestValue) : latestValue
                     );
                     break;
-                case "boolean":
+                case booleanMode:
                     DOM.setBooleanAttribute(element, this.attribute, latestValue);
                     break;
             }
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index ccdc5b29a30..7b6df838c59 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -1,7 +1,8 @@
-import type { Mutable, StyleTarget } from "../interfaces.js";
+import { Message, Mutable, StyleTarget } from "../interfaces.js";
 import type { Behavior } from "../observation/behavior.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
 import { defaultExecutionContext, Observable } from "../observation/observable.js";
+import { FAST } from "../platform.js";
 import type { ElementStyles } from "../styles/element-styles.js";
 import type { ElementViewTemplate } from "../templating/template.js";
 import type { ElementView } from "../templating/view.js";
@@ -18,6 +19,8 @@ function getShadowRoot(element: HTMLElement): ShadowRoot | null {
     return element.shadowRoot ?? shadowRoots.get(element) ?? null;
 }
 
+const isConnectedPropertyName = "isConnected";
+
 /**
  * Controls the lifecycle and rendering of a `FASTElement`.
  * @public
@@ -64,13 +67,13 @@ export class Controller extends PropertyChangeNotifier {
      * connected to the document.
      */
     public get isConnected(): boolean {
-        Observable.track(this, "isConnected");
+        Observable.track(this, isConnectedPropertyName);
         return this._isConnected;
     }
 
     private setIsConnected(value: boolean): void {
         this._isConnected = value;
-        Observable.notify(this, "isConnected");
+        Observable.notify(this, isConnectedPropertyName);
     }
 
     /**
@@ -474,7 +477,7 @@ export class Controller extends PropertyChangeNotifier {
         const definition = FASTElementDefinition.forType(element.constructor);
 
         if (definition === void 0) {
-            throw new Error("Missing FASTElement definition.");
+            throw FAST.error(Message.missingElementDefinition);
         }
 
         return ((element as any).$fastController = new Controller(element, definition));
diff --git a/packages/web-components/fast-element/src/debug.spec.ts b/packages/web-components/fast-element/src/debug.spec.ts
new file mode 100644
index 00000000000..b907f3cfa84
--- /dev/null
+++ b/packages/web-components/fast-element/src/debug.spec.ts
@@ -0,0 +1,20 @@
+import { expect } from "chai";
+import "./debug.js";
+import { FASTGlobal, Message } from "./interfaces";
+
+declare const FAST: FASTGlobal;
+
+describe("The debug module", () => {
+    context("when sending errors", () => {
+        it("expect known error message from known error code", () => {
+            const error = FAST.error(Message.bindingInnerHTMLRequiresTrustedTypes);
+            expect(error.message.length).greaterThan(0);
+            expect(error.message).not.equal("Unknown Error");
+        });
+
+        it("expect unknown error message from unknown error code", () => {
+            const error = FAST.error(10);
+            expect(error.message).equal("Unknown Error");
+        });
+    });
+});
diff --git a/packages/web-components/fast-element/src/debug.ts b/packages/web-components/fast-element/src/debug.ts
new file mode 100644
index 00000000000..30ed0a78860
--- /dev/null
+++ b/packages/web-components/fast-element/src/debug.ts
@@ -0,0 +1,31 @@
+import type { FASTGlobal } from "./interfaces.js";
+
+if (globalThis.FAST === void 0) {
+    Reflect.defineProperty(globalThis, "FAST", {
+        value: Object.create(null),
+        configurable: false,
+        enumerable: false,
+        writable: false,
+    });
+}
+
+const FAST: FASTGlobal = globalThis.FAST;
+
+const debugMessages = {
+    [1101 /* needsArrayObservation */]: "Must call enableArrayObservation before observing arrays.",
+    [1201 /* onlySetHTMLPolicyOnce */]: "The HTML policy can only be set once.",
+    [1202 /* bindingInnerHTMLRequiresTrustedTypes */]: "To bind innerHTML, you must use a TrustedTypesPolicy.",
+    [1401 /* missingElementDefinition */]: "Missing FASTElement definition.",
+};
+
+Object.assign(FAST, {
+    addMessages(messages: Record<number, string>) {
+        Object.assign(debugMessages, messages);
+    },
+    warn(code: number, ...args: any[]) {
+        console.warn(debugMessages[code] ?? "Unknown Warning");
+    },
+    error(code: number, ...args: any[]) {
+        return new Error(debugMessages[code] ?? "Unknown Error");
+    },
+});
diff --git a/packages/web-components/fast-element/src/interfaces.ts b/packages/web-components/fast-element/src/interfaces.ts
index 59da7930884..7f7179b6f8f 100644
--- a/packages/web-components/fast-element/src/interfaces.ts
+++ b/packages/web-components/fast-element/src/interfaces.ts
@@ -63,6 +63,26 @@ export interface FASTGlobal {
      */
     getById<T>(id: string | number): T | null;
     getById<T>(id: string | number, initialize: () => T): T;
+
+    /**
+     * Sends a warning to the developer.
+     * @param code - The warning code to send.
+     * @param args - Args relevant for the warning.
+     */
+    warn(code: number, ...args: any[]): void;
+
+    /**
+     * Creates an error.
+     * @param code - The error code to send.
+     * @param args - Args relevant for the error.
+     */
+    error(code: number, ...args: any[]): Error;
+
+    /**
+     * Adds debug messages for errors and warnings.
+     * @param messages - The message dictionary to add.
+     */
+    addMessages(messages: Record<number, string>): void;
 }
 
 /**
@@ -75,6 +95,7 @@ export const enum KernelServiceId {
     contextEvent = 3,
     elementRegistry = 4,
     styleSheetStrategy = 5,
+    developerChannel = 6,
 }
 
 /**
@@ -125,6 +146,22 @@ export interface StyleStrategy {
     removeStylesFrom(target: StyleTarget): void;
 }
 
+/**
+ * Warning and error messages.
+ * @internal
+ */
+export const enum Message {
+    // 1000 - 1100 Kernel
+    // 1101 - 1200 Observation
+    needsArrayObservation = 1101,
+    // 1201 - 1300 Templating
+    onlySetHTMLPolicyOnce = 1201,
+    bindingInnerHTMLRequiresTrustedTypes = 1202,
+    // 1301 - 1400 Styles
+    // 1401 - 1500 Components
+    missingElementDefinition = 1401,
+}
+
 /**
  * @internal
  */
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index e07c0571839..0ae6883287a 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -1,5 +1,5 @@
 import { DOM } from "../dom.js";
-import { isFunction, isString, KernelServiceId } from "../interfaces.js";
+import { isFunction, isString, KernelServiceId, Message } from "../interfaces.js";
 import { FAST } from "../platform.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
 import type { Notifier, Subscriber } from "./notifier.js";
@@ -97,7 +97,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
     const accessorLookup = new WeakMap<any, Accessor[]>();
     let watcher: BindingObserverImplementation | undefined = void 0;
     let createArrayObserver = (array: any[]): Notifier => {
-        throw new Error("Must call enableArrayObservation before observing arrays.");
+        throw FAST.error(Message.needsArrayObservation);
     };
 
     function getNotifier(source: any): Notifier {
diff --git a/packages/web-components/fast-element/src/platform.ts b/packages/web-components/fast-element/src/platform.ts
index 38a0c5d06a2..f334c47c9b8 100644
--- a/packages/web-components/fast-element/src/platform.ts
+++ b/packages/web-components/fast-element/src/platform.ts
@@ -1,6 +1,6 @@
 import type { FASTGlobal } from "./interfaces.js";
 
-// ensure FAST global - duplicated in polyfills.ts
+// ensure FAST global - duplicated in polyfills.ts and debug.ts
 const propConfig = {
     configurable: false,
     enumerable: false,
@@ -37,6 +37,16 @@ if (FAST.getById === void 0) {
     });
 }
 
+if (FAST.error === void 0) {
+    Object.assign(FAST, {
+        warn() {},
+        error(code: number) {
+            return new Error(`Code ${code}`);
+        },
+        addMessages() {},
+    });
+}
+
 /**
  * A readonly, empty array.
  * @remarks
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 8194b18ba00..ef067c9c302 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,11 +1,12 @@
 import { DOM } from "../dom.js";
-import { isString, Mutable } from "../interfaces.js";
+import { isString, Message, Mutable } from "../interfaces.js";
 import {
     Binding,
     BindingObserver,
     ExecutionContext,
     Observable,
 } from "../observation/observable.js";
+import { FAST } from "../platform.js";
 import {
     Aspect,
     AspectedHTMLDirective,
@@ -502,7 +503,7 @@ const createInnerHTMLBinding = globalThis.TrustedHTML
               return value;
           }
 
-          throw new Error("To bind innerHTML, you must use a TrustedTypesPolicy.");
+          throw FAST.error(Message.bindingInnerHTMLRequiresTrustedTypes);
       }
     : (binding: Binding) => binding;
 
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index baed861fd83..232d5ecfafd 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,5 +1,6 @@
-import { isString, TrustedTypesPolicy } from "../interfaces.js";
+import { isString, Message, TrustedTypesPolicy } from "../interfaces.js";
 import type { ExecutionContext } from "../observation/observable.js";
+import { FAST } from "../platform.js";
 import { Parser } from "./markup.js";
 import { bind, oneTime } from "./binding.js";
 import type {
@@ -286,7 +287,7 @@ export const Compiler = {
      */
     setHTMLPolicy(policy: TrustedTypesPolicy) {
         if (htmlPolicy !== fastHTMLPolicy) {
-            throw new Error("The HTML policy can only be set once.");
+            throw FAST.error(Message.onlySetHTMLPolicyOnce);
         }
 
         htmlPolicy = policy;
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index a231041da16..9c2a697d749 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -2,6 +2,8 @@ import { isString } from "../interfaces.js";
 import { NodeBehaviorOptions, NodeObservationDirective } from "./node-observation.js";
 import type { CaptureType } from "./template.js";
 
+const slotEvent = "slotchange";
+
 /**
  * The options used to configure slotted node observation.
  * @public
@@ -20,7 +22,7 @@ export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveO
      * @param target - The target to observe.
      */
     observe(target: EventSource): void {
-        target.addEventListener("slotchange", this);
+        target.addEventListener(slotEvent, this);
     }
 
     /**
@@ -28,7 +30,7 @@ export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveO
      * @param target - The target to unobserve.
      */
     disconnect(target: EventSource): void {
-        target.removeEventListener("slotchange", this);
+        target.removeEventListener(slotEvent, this);
     }
 
     /**

From 504ae9e6ccd3a6fcea1c9b215f92dc04d346600b Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Tue, 5 Apr 2022 11:34:38 -0400
Subject: [PATCH 088/135] feat: new execution context design (#5800)

* refactor: new design for execution context

* feat: add two new event helpers to the execution context and tests

* fix: wip update types to match new context apis

* fix: update foundation and components template types

* Change files

* fix: update template type in fast-website

* fix: update site components for new template types

* fix: add missing api updates

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-9bddf676-bcae-4054-bb49-e554ec2091eb.json |   7 +
 ...-cb2ca562-779a-4f22-9b87-3fdc5483c7d5.json |   7 +
 ...-087192c5-d2a2-4873-b209-f8965bc11d14.json |   7 +
 ...-989db3af-0549-4d20-b4f6-c462d43aa913.json |   7 +
 .../fast-element/docs/api-report.md           | 197 ++++++++++++-----
 .../fast-element/src/components/controller.ts |  44 ++--
 .../fast-element/src/interfaces.ts            |  10 +
 .../fast-element/src/observation/behavior.ts  |  12 +-
 .../src/observation/execution-context.spec.ts | 154 +++++++++++++
 .../src/observation/observable.spec.ts        |  77 ++++---
 .../src/observation/observable.ts             | 205 ++++++++++++++----
 .../fast-element/src/styles/styles.spec.ts    |   6 +-
 .../src/templating/binding.spec.ts            |  30 +--
 .../fast-element/src/templating/binding.ts    |  14 +-
 .../src/templating/children.spec.ts           |  16 +-
 .../src/templating/compiler.spec.ts           |   4 +-
 .../fast-element/src/templating/compiler.ts   |  23 +-
 .../src/templating/html-directive.ts          |   6 +-
 .../src/templating/node-observation.ts        |  12 +-
 .../src/templating/repeat.spec.ts             |  30 +--
 .../fast-element/src/templating/repeat.ts     | 125 ++++++++---
 .../src/templating/slotted.spec.ts            |  14 +-
 .../fast-element/src/templating/template.ts   | 143 +++++++++---
 .../fast-element/src/templating/view.ts       |  36 +--
 .../fast-element/src/templating/when.spec.ts  |   8 +-
 .../src/calendar/calendar.template.ts         |  47 ++--
 .../fast-foundation/src/calendar/calendar.ts  |   8 +-
 .../src/data-grid/data-grid-cell.spec.ts      |   2 +-
 .../src/data-grid/data-grid-row.template.ts   |  26 ++-
 .../src/data-grid/data-grid-row.ts            |  12 +-
 .../src/data-grid/data-grid.template.ts       |  14 +-
 .../src/data-grid/data-grid.ts                |   9 +-
 .../src/design-token/design-token.ts          |   4 +-
 .../src/picker/picker.template.ts             |  25 ++-
 .../src/test-utilities/fixture.ts             |   3 +-
 .../web-components/fast-router/src/view.ts    |   3 +-
 .../src/element-renderer/element-renderer.ts  |  12 +-
 .../src/template-renderer/directives.ts       |  15 +-
 .../template-renderer.spec.ts                 |  12 +-
 .../template-renderer/template-renderer.ts    |   5 +-
 .../content-placement-container.template.ts   |   4 +-
 .../fast-frame/fast-frame.template.ts         |   6 +-
 .../side-navigation.template.ts               |   4 +-
 43 files changed, 989 insertions(+), 416 deletions(-)
 create mode 100644 change/@microsoft-fast-components-9bddf676-bcae-4054-bb49-e554ec2091eb.json
 create mode 100644 change/@microsoft-fast-element-cb2ca562-779a-4f22-9b87-3fdc5483c7d5.json
 create mode 100644 change/@microsoft-fast-foundation-087192c5-d2a2-4873-b209-f8965bc11d14.json
 create mode 100644 change/@microsoft-fast-router-989db3af-0549-4d20-b4f6-c462d43aa913.json
 create mode 100644 packages/web-components/fast-element/src/observation/execution-context.spec.ts

diff --git a/change/@microsoft-fast-components-9bddf676-bcae-4054-bb49-e554ec2091eb.json b/change/@microsoft-fast-components-9bddf676-bcae-4054-bb49-e554ec2091eb.json
new file mode 100644
index 00000000000..54a672a8c16
--- /dev/null
+++ b/change/@microsoft-fast-components-9bddf676-bcae-4054-bb49-e554ec2091eb.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update foundation and components template types",
+  "packageName": "@microsoft/fast-components",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-element-cb2ca562-779a-4f22-9b87-3fdc5483c7d5.json b/change/@microsoft-fast-element-cb2ca562-779a-4f22-9b87-3fdc5483c7d5.json
new file mode 100644
index 00000000000..de447e418c4
--- /dev/null
+++ b/change/@microsoft-fast-element-cb2ca562-779a-4f22-9b87-3fdc5483c7d5.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "refactor: new design for execution context",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-087192c5-d2a2-4873-b209-f8965bc11d14.json b/change/@microsoft-fast-foundation-087192c5-d2a2-4873-b209-f8965bc11d14.json
new file mode 100644
index 00000000000..d677900944c
--- /dev/null
+++ b/change/@microsoft-fast-foundation-087192c5-d2a2-4873-b209-f8965bc11d14.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update foundation and components template types",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-router-989db3af-0549-4d20-b4f6-c462d43aa913.json b/change/@microsoft-fast-router-989db3af-0549-4d20-b4f6-c462d43aa913.json
new file mode 100644
index 00000000000..ad9b6e32606
--- /dev/null
+++ b/change/@microsoft-fast-router-989db3af-0549-4d20-b4f6-c462d43aa913.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "refactor: new design for execution context",
+  "packageName": "@microsoft/fast-router",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 3150ac39d7c..f4cb660fce3 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -81,16 +81,16 @@ export class AttributeDefinition implements Accessor {
 export type AttributeMode = typeof reflectMode | typeof booleanMode | "fromView";
 
 // @public
-export interface Behavior<TSource = any, TParent = any, TGrandparent = any> {
-    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
-    unbind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
+export interface Behavior<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = RootContext> {
+    bind(source: TSource, context: TContext): void;
+    unbind(source: TSource, context: TContext): void;
 }
 
 // @alpha (undocumented)
 export function bind<T = any>(binding: Binding<T>, config?: BindingConfig<T> | DefaultBindingOptions): CaptureType<T>;
 
 // @public
-export type Binding<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
+export type Binding<TSource = any, TReturn = any, TContext extends ExecutionContext = ExecutionContext> = (source: TSource, context: TContext) => TReturn;
 
 // @alpha (undocumented)
 export type BindingBehaviorFactory = {
@@ -111,7 +111,7 @@ export type BindingMode = Record<Aspect, BindingType>;
 // @public
 export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier {
     disconnect(): void;
-    observe(source: TSource, context: ExecutionContext): TReturn;
+    observe(source: TSource, context: ExecutionContext<TParent>): TReturn;
     records(): IterableIterator<ObservationRecord>;
 }
 
@@ -132,6 +132,16 @@ export type Callable = typeof Function.prototype.call | {
 export interface CaptureType<TSource> {
 }
 
+// @public
+export const child: <TChild = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TChild, TParent, ChildContext<TParent>>[]) => ChildViewTemplate<TChild, TParent>;
+
+// @public
+export interface ChildContext<TParentSource = any> extends RootContext {
+    createItemContext(index: number, length: number): ItemContext<TParentSource>;
+    readonly parent: TParentSource;
+    readonly parentContext: ChildContext<TParentSource>;
+}
+
 // @public
 export interface ChildListDirectiveOptions<T = any> extends NodeBehaviorOptions<T>, Omit<MutationObserverInit, "subtree" | "childList"> {
 }
@@ -152,6 +162,13 @@ export class ChildrenDirective extends NodeObservationDirective<ChildrenDirectiv
 // @public
 export type ChildrenDirectiveOptions<T = any> = ChildListDirectiveOptions<T> | SubtreeDirectiveOptions<T>;
 
+// @public
+export interface ChildViewTemplate<TSource = any, TParent = any> {
+    create(): SyntheticView<TSource, TParent, ChildContext<TParent>>;
+    // (undocumented)
+    type: "child";
+}
+
 // @public
 export type CompilationStrategy = (
 html: string | HTMLTemplateElement,
@@ -160,7 +177,7 @@ directives: readonly HTMLDirective[]) => HTMLTemplateCompilationResult;
 // @public
 export const Compiler: {
     setHTMLPolicy(policy: TrustedTypesPolicy): void;
-    compile(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): HTMLTemplateCompilationResult;
+    compile<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>>(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): HTMLTemplateCompilationResult<TSource, TParent, TContext>;
     setDefaultStrategy(strategy: CompilationStrategy): void;
     aggregate(parts: (string | HTMLDirective)[]): HTMLDirective;
 };
@@ -179,26 +196,26 @@ export type ConstructibleStyleStrategy = {
 };
 
 // @public
-export class Controller extends PropertyChangeNotifier {
+export class Controller<TElement extends HTMLElement = HTMLElement> extends PropertyChangeNotifier {
     // @internal
-    constructor(element: HTMLElement, definition: FASTElementDefinition);
-    addBehaviors(behaviors: ReadonlyArray<Behavior<HTMLElement>>): void;
+    constructor(element: TElement, definition: FASTElementDefinition);
+    addBehaviors(behaviors: ReadonlyArray<Behavior<TElement>>): void;
     addStyles(styles: ElementStyles | HTMLStyleElement | null | undefined): void;
     readonly definition: FASTElementDefinition;
-    readonly element: HTMLElement;
+    readonly element: TElement;
     emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): void | boolean;
     static forCustomElement(element: HTMLElement): Controller;
     get isConnected(): boolean;
     onAttributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     onConnectedCallback(): void;
     onDisconnectedCallback(): void;
-    removeBehaviors(behaviors: ReadonlyArray<Behavior<HTMLElement>>, force?: boolean): void;
+    removeBehaviors(behaviors: ReadonlyArray<Behavior<TElement>>, force?: boolean): void;
     removeStyles(styles: ElementStyles | HTMLStyleElement | null | undefined): void;
     get styles(): ElementStyles | null;
     set styles(value: ElementStyles | null);
-    get template(): ElementViewTemplate | null;
-    set template(value: ElementViewTemplate | null);
-    readonly view: ElementView | null;
+    get template(): ElementViewTemplate<TElement> | null;
+    set template(value: ElementViewTemplate<TElement> | null);
+    readonly view: ElementView<TElement> | null;
 }
 
 // @public
@@ -224,9 +241,6 @@ export type DefaultBindingOptions = {
     capture?: boolean;
 };
 
-// @public
-export const defaultExecutionContext: ExecutionContext<any, any>;
-
 // @public
 export const DOM: Readonly<{
     supportsAdoptedStyleSheets: boolean;
@@ -265,14 +279,16 @@ export class ElementStyles {
 }
 
 // @public
-export interface ElementView<TSource = any, TParent = any, TGrandparent = any> extends View<TSource, TParent, TGrandparent> {
+export interface ElementView<TSource = any, TParent = any> extends View<TSource, TParent, RootContext> {
     appendTo(node: Node): void;
 }
 
 // @public
-export interface ElementViewTemplate<TSource = any, TParent = any, TGrandparent = any> {
-    create(hostBindingTarget: Element): ElementView<TSource, TParent, TGrandparent>;
-    render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
+export interface ElementViewTemplate<TSource = any, TParent = any> {
+    create(hostBindingTarget: Element): ElementView<TSource, TParent>;
+    render(source: TSource, host: Node, hostBindingTarget?: Element): ElementView<TSource, TParent>;
+    // (undocumented)
+    type: "element";
 }
 
 // Warning: (ae-internal-missing-underscore) The name "emptyArray" should be prefixed with an underscore because the declaration is marked as @internal
@@ -284,20 +300,14 @@ export const emptyArray: readonly never[];
 export function enableArrayObservation(): void;
 
 // @public
-export class ExecutionContext<TParent = any, TGrandparent = any> {
-    get event(): Event;
-    index: number;
-    get isEven(): boolean;
-    get isFirst(): boolean;
-    get isInMiddle(): boolean;
-    get isLast(): boolean;
-    get isOdd(): boolean;
-    length: number;
-    parent: TParent;
-    parentContext: ExecutionContext<TGrandparent>;
-    // @internal
-    static setEvent(event: Event | null): void;
-}
+export const ExecutionContext: Readonly<{
+    default: RootContext;
+    setEvent(event: Event | null): void;
+    create(): RootContext;
+}>;
+
+// @public
+export type ExecutionContext<TParentSource = any> = RootContext | ChildContext<TParentSource> | ItemContext<TParentSource>;
 
 // Warning: (ae-internal-missing-underscore) The name "FAST" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -353,7 +363,7 @@ export interface FASTGlobal {
 }
 
 // @public
-export function html<TSource = any, TParent = any, TGrandparent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]): ViewTemplate<TSource, TParent, TGrandparent>;
+export function html<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent, TContext>[]): ViewTemplate<TSource, TParent>;
 
 // @public
 export abstract class HTMLDirective implements ViewBehaviorFactory {
@@ -364,16 +374,16 @@ export abstract class HTMLDirective implements ViewBehaviorFactory {
 }
 
 // @public
-export interface HTMLTemplateCompilationResult {
-    createView(hostBindingTarget?: Element): HTMLView;
+export interface HTMLTemplateCompilationResult<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> {
+    createView(hostBindingTarget?: Element): HTMLView<TSource, TParent, TContext>;
 }
 
 // @public
-export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implements ElementView<TSource, TParent, TGrandparent>, SyntheticView<TSource, TParent, TGrandparent> {
+export class HTMLView<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> implements ElementView<TSource, TParent>, SyntheticView<TSource, TParent, TContext> {
     constructor(fragment: DocumentFragment, factories: ReadonlyArray<ViewBehaviorFactory>, targets: ViewBehaviorTargets);
     appendTo(node: Node): void;
-    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
-    context: ExecutionContext<TParent, TGrandparent> | null;
+    bind(source: TSource, context: TContext): void;
+    context: TContext | null;
     dispose(): void;
     static disposeContiguousBatch(views: SyntheticView[]): void;
     firstChild: Node;
@@ -384,6 +394,28 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any> implemen
     unbind(): void;
 }
 
+// @public
+export const item: <TItem = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TItem, TParent, ItemContext<TParent>>[]) => ItemViewTemplate<TItem, TParent>;
+
+// @public
+export interface ItemContext<TParentSource = any> extends ChildContext<TParentSource> {
+    readonly index: number;
+    readonly isEven: boolean;
+    readonly isFirst: boolean;
+    readonly isInMiddle: boolean;
+    readonly isLast: boolean;
+    readonly isOdd: boolean;
+    readonly length: number;
+    updatePosition(index: number, length: number): void;
+}
+
+// @public
+export interface ItemViewTemplate<TSource = any, TParent = any> {
+    create(): SyntheticView<TSource, TParent, ItemContext<TParent>>;
+    // (undocumented)
+    type: "item";
+}
+
 // @public
 export const Markup: Readonly<{
     interpolation: (index: number) => string;
@@ -408,12 +440,12 @@ export interface NodeBehaviorOptions<T = any> {
 //
 // @internal
 export abstract class NodeObservationDirective<T extends NodeBehaviorOptions> extends StatelessAttachedAttributeDirective<T> {
-    bind(source: any, context: ExecutionContext<any, any>, targets: ViewBehaviorTargets): void;
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
     protected computeNodes(target: any): Node[];
     protected abstract disconnect(target: any): void;
     protected abstract getNodes(target: any): Node[];
     protected abstract observe(target: any): void;
-    unbind(source: any, context: ExecutionContext<any, any>, targets: ViewBehaviorTargets): void;
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
     protected updateTarget(source: any, value: ReadonlyArray<any>): void;
 }
 
@@ -437,8 +469,8 @@ export const Observable: Readonly<{
     notify(source: unknown, args: any): void;
     defineProperty(target: {}, nameOrAccessor: string | Accessor): void;
     getAccessors: (target: {}) => Accessor[];
-    binding<TSource = any, TReturn = any, TParent = any>(binding: Binding<TSource, TReturn, TParent>, initialSubscriber?: Subscriber | undefined, isVolatileBinding?: boolean): BindingObserver<TSource, TReturn, TParent>;
-    isVolatileBinding<TSource_1 = any, TReturn_1 = any, TParent_1 = any>(binding: Binding<TSource_1, TReturn_1, TParent_1>): boolean;
+    binding<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn, ExecutionContext<any>>, initialSubscriber?: Subscriber | undefined, isVolatileBinding?: boolean): BindingObserver<TSource, TReturn, any>;
+    isVolatileBinding<TSource_1 = any, TReturn_1 = any>(binding: Binding<TSource_1, TReturn_1, ExecutionContext<any>>): boolean;
 }>;
 
 // @public
@@ -491,8 +523,44 @@ export class RefDirective extends StatelessAttachedAttributeDirective<string> {
     unbind(): void;
 }
 
+// Warning: (ae-forgotten-export) The symbol "ArrayItem" needs to be exported by the entry point index.d.ts
+//
 // @public
-export function repeat<TSource = any, TItem = any>(itemsBinding: Binding<TSource, readonly TItem[]>, templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>, options?: RepeatOptions): CaptureType<TSource>;
+export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: SyntheticViewTemplate<ArrayItem<TArray>, TSource, RootContext> | Binding<TSource, SyntheticViewTemplate<ArrayItem<TArray>, TSource, RootContext>>, options?: {
+    positioning: false;
+} | {
+    recycle: true;
+} | {
+    positioning: false;
+    recycle: false;
+} | {
+    positioning: false;
+    recycle: true;
+}): CaptureType<TSource>;
+
+// @public
+export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: ChildViewTemplate<ArrayItem<TArray>, TSource> | Binding<TSource, ChildViewTemplate<ArrayItem<TArray>, TSource>>, options?: {
+    positioning: false;
+} | {
+    recycle: true;
+} | {
+    positioning: false;
+    recycle: false;
+} | {
+    positioning: false;
+    recycle: true;
+}): CaptureType<TSource>;
+
+// @public
+export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: ItemViewTemplate<ArrayItem<TArray>, TSource> | Binding<TSource, ItemViewTemplate<ArrayItem<TArray>, TSource>>, options: {
+    positioning: true;
+} | {
+    positioning: true;
+    recycle: true;
+} | {
+    positioning: true;
+    recycle: false;
+}): CaptureType<TSource>;
 
 // @public
 export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
@@ -522,6 +590,14 @@ export interface RepeatOptions {
     recycle?: boolean;
 }
 
+// @public
+export interface RootContext {
+    createChildContext<TParentSource>(source: TParentSource): ChildContext<TParentSource>;
+    readonly event: Event;
+    eventDetail<TDetail = any>(): TDetail;
+    eventTarget<TTarget extends EventTarget = EventTarget>(): TTarget;
+}
+
 // @public
 export function slotted<T = any>(propertyOrOptions: (keyof T & string) | SlottedDirectiveOptions<keyof T & string>): CaptureType<T>;
 
@@ -600,7 +676,7 @@ export interface SubtreeDirectiveOptions<T = any> extends Omit<NodeBehaviorOptio
 }
 
 // @public
-export interface SyntheticView<TSource = any, TParent = any, TGrandparent = any> extends View<TSource, TParent, TGrandparent> {
+export interface SyntheticView<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> extends View<TSource, TParent, TContext> {
     dispose(): void;
     readonly firstChild: Node;
     insertBefore(node: Node): void;
@@ -609,12 +685,14 @@ export interface SyntheticView<TSource = any, TParent = any, TGrandparent = any>
 }
 
 // @public
-export interface SyntheticViewTemplate<TSource = any, TParent = any, TGrandparent = any> {
-    create(): SyntheticView<TSource, TParent, TGrandparent>;
+export interface SyntheticViewTemplate<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> {
+    create(): SyntheticView<TSource, TParent, TContext>;
+    // (undocumented)
+    type: "synthetic";
 }
 
 // @public
-export type TemplateValue<TSource, TParent = any> = Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource>;
+export type TemplateValue<TSource, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> = Binding<TSource, any, TContext> | HTMLDirective | CaptureType<TSource>;
 
 // @public
 export type TrustedTypes = {
@@ -633,18 +711,18 @@ export interface ValueConverter {
 }
 
 // @public
-export interface View<TSource = any, TParent = any, TGrandparent = any> {
-    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
-    readonly context: ExecutionContext<TParent, TGrandparent> | null;
+export interface View<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> {
+    bind(source: TSource, context: TContext): void;
+    readonly context: TContext | null;
     dispose(): void;
     readonly source: TSource | null;
     unbind(): void;
 }
 
 // @public
-export interface ViewBehavior<TSource = any, TParent = any, TGrandparent = any> {
-    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>, targets: ViewBehaviorTargets): void;
-    unbind(source: TSource, context: ExecutionContext<TParent, TGrandparent>, targets: ViewBehaviorTargets): void;
+export interface ViewBehavior<TSource = any, TParent = any> {
+    bind(source: TSource, context: ExecutionContext<TParent>, targets: ViewBehaviorTargets): void;
+    unbind(source: TSource, context: ExecutionContext<TParent>, targets: ViewBehaviorTargets): void;
 }
 
 // @public
@@ -659,12 +737,13 @@ export type ViewBehaviorTargets = {
 };
 
 // @public
-export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any> implements ElementViewTemplate<TSource, TParent, TGrandparent>, SyntheticViewTemplate<TSource, TParent, TGrandparent> {
+export class ViewTemplate<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext> implements ElementViewTemplate<TSource, TParent>, SyntheticViewTemplate<TSource, TParent, TContext> {
     constructor(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>);
-    create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
+    create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TContext>;
     readonly directives: ReadonlyArray<HTMLDirective>;
     readonly html: string | HTMLTemplateElement;
-    render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent>;
+    render(source: TSource, host: Node, hostBindingTarget?: Element, context?: TContext): HTMLView<TSource, TParent, TContext>;
+    type: any;
 }
 
 // @public
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index 7b6df838c59..aeb63d3a276 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -1,7 +1,7 @@
 import { Message, Mutable, StyleTarget } from "../interfaces.js";
 import type { Behavior } from "../observation/behavior.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
-import { defaultExecutionContext, Observable } from "../observation/observable.js";
+import { ExecutionContext, Observable } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import type { ElementStyles } from "../styles/element-styles.js";
 import type { ElementViewTemplate } from "../templating/template.js";
@@ -25,12 +25,14 @@ const isConnectedPropertyName = "isConnected";
  * Controls the lifecycle and rendering of a `FASTElement`.
  * @public
  */
-export class Controller extends PropertyChangeNotifier {
+export class Controller<
+    TElement extends HTMLElement = HTMLElement
+> extends PropertyChangeNotifier {
     private boundObservables: Record<string, any> | null = null;
-    private behaviors: Map<Behavior<HTMLElement>, number> | null = null;
+    private behaviors: Map<Behavior<TElement>, number> | null = null;
     private needsInitialization: boolean = true;
     private hasExistingShadowRoot = false;
-    private _template: ElementViewTemplate | null = null;
+    private _template: ElementViewTemplate<TElement> | null = null;
     private _styles: ElementStyles | null = null;
     private _isConnected: boolean = false;
 
@@ -47,7 +49,7 @@ export class Controller extends PropertyChangeNotifier {
     /**
      * The element being controlled by this controller.
      */
-    public readonly element: HTMLElement;
+    public readonly element: TElement;
 
     /**
      * The element definition that instructs this controller
@@ -60,7 +62,7 @@ export class Controller extends PropertyChangeNotifier {
      * @remarks
      * If `null` then the element is managing its own rendering.
      */
-    public readonly view: ElementView | null = null;
+    public readonly view: ElementView<TElement> | null = null;
 
     /**
      * Indicates whether or not the custom element has been
@@ -81,7 +83,7 @@ export class Controller extends PropertyChangeNotifier {
      * @remarks
      * This value can only be accurately read after connect but can be set at any time.
      */
-    public get template(): ElementViewTemplate | null {
+    public get template(): ElementViewTemplate<TElement> | null {
         // 1. Template overrides take top precedence.
         if (this._template === null) {
             const definition = this.definition;
@@ -98,7 +100,7 @@ export class Controller extends PropertyChangeNotifier {
         return this._template;
     }
 
-    public set template(value: ElementViewTemplate | null) {
+    public set template(value: ElementViewTemplate<TElement> | null) {
         if (this._template === value) {
             return;
         }
@@ -155,8 +157,9 @@ export class Controller extends PropertyChangeNotifier {
      * controller in how to handle rendering and other platform integrations.
      * @internal
      */
-    public constructor(element: HTMLElement, definition: FASTElementDefinition) {
+    public constructor(element: TElement, definition: FASTElementDefinition) {
         super(element);
+
         this.element = element;
         this.definition = definition;
 
@@ -254,10 +257,10 @@ export class Controller extends PropertyChangeNotifier {
      * Adds behaviors to this element.
      * @param behaviors - The behaviors to add.
      */
-    public addBehaviors(behaviors: ReadonlyArray<Behavior<HTMLElement>>): void {
+    public addBehaviors(behaviors: ReadonlyArray<Behavior<TElement>>): void {
         const targetBehaviors = this.behaviors ?? (this.behaviors = new Map());
         const length = behaviors.length;
-        const behaviorsToBind: Behavior<HTMLElement>[] = [];
+        const behaviorsToBind: Behavior<TElement>[] = [];
 
         for (let i = 0; i < length; ++i) {
             const behavior = behaviors[i];
@@ -272,9 +275,10 @@ export class Controller extends PropertyChangeNotifier {
 
         if (this._isConnected) {
             const element = this.element;
+            const context = ExecutionContext.default;
 
             for (let i = 0; i < behaviorsToBind.length; ++i) {
-                behaviorsToBind[i].bind(element, defaultExecutionContext);
+                behaviorsToBind[i].bind(element, context);
             }
         }
     }
@@ -285,7 +289,7 @@ export class Controller extends PropertyChangeNotifier {
      * @param force - Forces unbinding of behaviors.
      */
     public removeBehaviors(
-        behaviors: ReadonlyArray<Behavior<HTMLElement>>,
+        behaviors: ReadonlyArray<Behavior<TElement>>,
         force: boolean = false
     ): void {
         const targetBehaviors = this.behaviors;
@@ -295,7 +299,7 @@ export class Controller extends PropertyChangeNotifier {
         }
 
         const length = behaviors.length;
-        const behaviorsToUnbind: Behavior<HTMLElement>[] = [];
+        const behaviorsToUnbind: Behavior<TElement>[] = [];
 
         for (let i = 0; i < length; ++i) {
             const behavior = behaviors[i];
@@ -311,9 +315,10 @@ export class Controller extends PropertyChangeNotifier {
 
         if (this._isConnected) {
             const element = this.element;
+            const context = ExecutionContext.default;
 
             for (let i = 0; i < behaviorsToUnbind.length; ++i) {
-                behaviorsToUnbind[i].unbind(element, defaultExecutionContext);
+                behaviorsToUnbind[i].unbind(element, context);
             }
         }
     }
@@ -327,18 +332,19 @@ export class Controller extends PropertyChangeNotifier {
         }
 
         const element = this.element;
+        const context = ExecutionContext.default;
 
         if (this.needsInitialization) {
             this.finishInitialization();
         } else if (this.view !== null) {
-            this.view.bind(element, defaultExecutionContext);
+            this.view.bind(element, context);
         }
 
         const behaviors = this.behaviors;
 
         if (behaviors !== null) {
             for (const behavior of behaviors.keys()) {
-                behavior.bind(element, defaultExecutionContext);
+                behavior.bind(element, context);
             }
         }
 
@@ -365,8 +371,10 @@ export class Controller extends PropertyChangeNotifier {
 
         if (behaviors !== null) {
             const element = this.element;
+            const context = ExecutionContext.default;
+
             for (const behavior of behaviors.keys()) {
-                behavior.unbind(element, defaultExecutionContext);
+                behavior.unbind(element, context);
             }
         }
     }
diff --git a/packages/web-components/fast-element/src/interfaces.ts b/packages/web-components/fast-element/src/interfaces.ts
index 7f7179b6f8f..c12b72c44db 100644
--- a/packages/web-components/fast-element/src/interfaces.ts
+++ b/packages/web-components/fast-element/src/interfaces.ts
@@ -21,6 +21,16 @@ export type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
 
+/**
+ * Extracts the item type from an array.
+ * @public
+ */
+export type ArrayItem<T> = T extends ReadonlyArray<infer TItem>
+    ? TItem
+    : T extends Array<infer TItem>
+    ? TItem
+    : any;
+
 /**
  * A policy for use with the standard trustedTypes platform API.
  * @public
diff --git a/packages/web-components/fast-element/src/observation/behavior.ts b/packages/web-components/fast-element/src/observation/behavior.ts
index b1eea785632..bb8439a4ac4 100644
--- a/packages/web-components/fast-element/src/observation/behavior.ts
+++ b/packages/web-components/fast-element/src/observation/behavior.ts
@@ -1,21 +1,25 @@
-import type { ExecutionContext } from "./observable.js";
+import type { ExecutionContext, RootContext } from "./observable.js";
 
 /**
  * Represents an object that can contribute behavior to a view or
  * element's bind/unbind operations.
  * @public
  */
-export interface Behavior<TSource = any, TParent = any, TGrandparent = any> {
+export interface Behavior<
+    TSource = any,
+    TParent = any,
+    TContext extends ExecutionContext<TParent> = RootContext
+> {
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
      * @param context - The execution context that the binding is operating within.
      */
-    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
+    bind(source: TSource, context: TContext): void;
 
     /**
      * Unbinds this behavior from the source.
      * @param source - The source to unbind from.
      */
-    unbind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
+    unbind(source: TSource, context: TContext): void;
 }
diff --git a/packages/web-components/fast-element/src/observation/execution-context.spec.ts b/packages/web-components/fast-element/src/observation/execution-context.spec.ts
new file mode 100644
index 00000000000..73623adced6
--- /dev/null
+++ b/packages/web-components/fast-element/src/observation/execution-context.spec.ts
@@ -0,0 +1,154 @@
+import { expect } from "chai";
+import { ExecutionContext, ItemContext } from "./observable";
+
+describe("The ExecutionContext", () => {
+    it("has a default", () => {
+        const defaultContext = ExecutionContext.default;
+        const newContext = ExecutionContext.create();
+
+        expect(defaultContext.constructor).equals(newContext.constructor);
+    });
+
+    function createEvent() {
+        const detail = { hello: "world" };
+        const event = new CustomEvent('my-event', { detail });
+
+        return { event, detail };
+    }
+
+    it("can get the current event", () => {
+        const { event } = createEvent();
+
+        ExecutionContext.setEvent(event);
+        const context = ExecutionContext.create();
+
+        expect(context.event).equals(event);
+
+        ExecutionContext.setEvent(null);
+    });
+
+    it("can get the current event detail", () => {
+        const { event, detail } = createEvent();
+
+        ExecutionContext.setEvent(event);
+        const context = ExecutionContext.create();
+
+        expect(context.eventDetail()).equals(detail);
+        expect(context.eventDetail<typeof detail>().hello).equals(detail.hello);
+
+        ExecutionContext.setEvent(null);
+    });
+
+    it("can create a child context for a parent source", () => {
+        const parentSource = {};
+        const parentContext = ExecutionContext.create();
+        const childContext = parentContext.createChildContext(parentSource);
+
+        expect(childContext.parent).equals(parentSource);
+        expect(childContext.parentContext).equals(parentContext);
+    });
+
+    it("can create an item context from a child context", () => {
+        const parentSource = {};
+        const parentContext = ExecutionContext.create();
+        const childContext = parentContext.createChildContext(parentSource);
+        const itemContext = childContext.createItemContext(7, 42);
+
+        expect(itemContext.parent).equals(parentSource);
+        expect(itemContext.parentContext).equals(parentContext);
+        expect(itemContext.index).equals(7);
+        expect(itemContext.length).equals(42);
+    });
+
+    context("item context", () => {
+        const scenarios = [
+            {
+                name: "even is first",
+                index: 0,
+                length: 42,
+                isEven: true,
+                isOdd: false,
+                isFirst: true,
+                isMiddle: false,
+                isLast: false
+            },
+            {
+                name: "odd in middle",
+                index: 7,
+                length: 42,
+                isEven: false,
+                isOdd: true,
+                isFirst: false,
+                isMiddle: true,
+                isLast: false
+            },
+            {
+                name: "even in middle",
+                index: 8,
+                length: 42,
+                isEven: true,
+                isOdd: false,
+                isFirst: false,
+                isMiddle: true,
+                isLast: false
+            },
+            {
+                name: "odd at end",
+                index: 41,
+                length: 42,
+                isEven: false,
+                isOdd: true,
+                isFirst: false,
+                isMiddle: false,
+                isLast: true
+            },
+            {
+                name: "even at end",
+                index: 40,
+                length: 41,
+                isEven: true,
+                isOdd: false,
+                isFirst: false,
+                isMiddle: false,
+                isLast: true
+            }
+        ];
+
+        function assert(itemContext: ItemContext, scenario: typeof scenarios[0]) {
+            expect(itemContext.index).equals(scenario.index);
+            expect(itemContext.length).equals(scenario.length);
+            expect(itemContext.isEven).equals(scenario.isEven);
+            expect(itemContext.isOdd).equals(scenario.isOdd);
+            expect(itemContext.isFirst).equals(scenario.isFirst);
+            expect(itemContext.isInMiddle).equals(scenario.isMiddle);
+            expect(itemContext.isLast).equals(scenario.isLast);
+        }
+
+        for (const scenario of scenarios) {
+            it(`has correct position when ${scenario.name}`, () => {
+                const parentSource = {};
+                const parentContext = ExecutionContext.create();
+                const childContext = parentContext.createChildContext(parentSource);
+                const itemContext = childContext.createItemContext(scenario.index, scenario.length);
+
+                assert(itemContext, scenario);
+            });
+        }
+
+        it ("can update its index and length", () => {
+            const scenario1 = scenarios[0];
+            const scenario2 = scenarios[1];
+
+            const parentSource = {};
+            const parentContext = ExecutionContext.create();
+            const childContext = parentContext.createChildContext(parentSource);
+            const itemContext = childContext.createItemContext(scenario1.index, scenario1.length);
+
+            assert(itemContext, scenario1);
+
+            itemContext.updatePosition(scenario2.index, scenario2.length);
+
+            assert(itemContext, scenario2);
+        });
+    });
+});
diff --git a/packages/web-components/fast-element/src/observation/observable.spec.ts b/packages/web-components/fast-element/src/observation/observable.spec.ts
index c174b52ab0d..08909a23bf3 100644
--- a/packages/web-components/fast-element/src/observation/observable.spec.ts
+++ b/packages/web-components/fast-element/src/observation/observable.spec.ts
@@ -1,8 +1,7 @@
 import { expect } from "chai";
 import { DOM } from "../dom";
-import { enableArrayObservation } from "./array-observer";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier";
-import { defaultExecutionContext, Observable, observable, volatile } from "./observable";
+import { ExecutionContext, Observable, observable, volatile } from "./observable";
 
 describe("The Observable", () => {
     class Model {
@@ -146,7 +145,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child);
 
             expect(wasNotified).to.be.false;
@@ -156,7 +155,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child);
         });
 
@@ -170,7 +169,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child.value);
 
             expect(wasNotified).to.be.false;
@@ -180,7 +179,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child.value);
         });
         it("notifies on changes in a sub-property binding after disconnecting before notification has been processed", async () => {
@@ -193,7 +192,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child.value);
 
             expect(called).to.be.false;
@@ -204,7 +203,7 @@ describe("The Observable", () => {
 
             expect(called).to.be.false;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child.value);
 
             model.child.value = "another completely different thing";
@@ -225,7 +224,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child.value + model.child2.value);
 
             // change child.value
@@ -236,7 +235,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child.value + model.child2.value);
 
             // change child2.value
@@ -247,7 +246,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child.value + model.child2.value);
 
             // change child
@@ -258,7 +257,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child.value + model.child2.value);
 
             // change child 2
@@ -269,7 +268,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.child.value + model.child2.value);
         });
 
@@ -284,7 +283,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             expect(wasNotified).to.be.false;
@@ -294,7 +293,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             wasNotified = false;
@@ -304,7 +303,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
         });
 
@@ -319,7 +318,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             expect(wasNotified).to.be.false;
@@ -329,7 +328,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             wasNotified = false;
@@ -339,7 +338,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
         });
 
@@ -360,7 +359,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             expect(wasNotified).to.be.false;
@@ -370,7 +369,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             wasNotified = false;
@@ -380,7 +379,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
         });
 
@@ -395,7 +394,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             expect(wasNotified).to.be.false;
@@ -405,7 +404,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             wasNotified = false;
@@ -415,7 +414,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
         });
 
@@ -430,7 +429,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             expect(wasNotified).to.be.false;
@@ -440,7 +439,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             wasNotified = false;
@@ -450,7 +449,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
         });
 
@@ -465,7 +464,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             expect(wasNotified).to.be.false;
@@ -475,7 +474,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             wasNotified = false;
@@ -485,7 +484,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
         });
 
@@ -502,7 +501,7 @@ describe("The Observable", () => {
             const model = new Model();
             model.incrementTrigger();
 
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             expect(wasNotified).to.be.false;
@@ -512,7 +511,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             wasNotified = false;
@@ -522,7 +521,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
         });
 
@@ -544,7 +543,7 @@ describe("The Observable", () => {
             });
 
             const model = new Model();
-            let value = observer.observe(model, defaultExecutionContext);
+            let value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             expect(wasNotified).to.be.false;
@@ -554,7 +553,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
 
             wasNotified = false;
@@ -564,7 +563,7 @@ describe("The Observable", () => {
 
             expect(wasNotified).to.be.true;
 
-            value = observer.observe(model, defaultExecutionContext);
+            value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(binding(model));
         });
 
@@ -579,7 +578,7 @@ describe("The Observable", () => {
 
             const model = new Model();
 
-            const value = observer.observe(model, defaultExecutionContext);
+            const value = observer.observe(model, ExecutionContext.default);
             expect(value).to.equal(model.value);
             expect(wasCalled).to.equal(false);
 
@@ -604,7 +603,7 @@ describe("The Observable", () => {
             }
 
             const bindingObserver = Observable.binding(binding);
-            bindingObserver.observe({}, defaultExecutionContext);
+            bindingObserver.observe({}, ExecutionContext.default);
 
             let i = 0;
             for (const record of bindingObserver.records()) {
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index 0ae6883287a..ec9215536b5 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -33,10 +33,11 @@ export interface Accessor {
  * as part of a template binding update.
  * @public
  */
-export type Binding<TSource = any, TReturn = any, TParent = any> = (
-    source: TSource,
-    context: ExecutionContext<TParent>
-) => TReturn;
+export type Binding<
+    TSource = any,
+    TReturn = any,
+    TContext extends ExecutionContext = ExecutionContext
+> = (source: TSource, context: TContext) => TReturn;
 
 /**
  * A record of observable property access.
@@ -63,7 +64,6 @@ interface SubscriptionRecord extends ObservationRecord {
  * Enables evaluation of and subscription to a binding.
  * @public
  */
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 export interface BindingObserver<TSource = any, TReturn = any, TParent = any>
     extends Notifier {
     /**
@@ -72,7 +72,7 @@ export interface BindingObserver<TSource = any, TReturn = any, TParent = any>
      * @param context - The execution context to execute the binding within.
      * @returns The value of the binding.
      */
-    observe(source: TSource, context: ExecutionContext): TReturn;
+    observe(source: TSource, context: ExecutionContext<TParent>): TReturn;
 
     /**
      * Unsubscribe from all dependent observables of the binding.
@@ -170,9 +170,9 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
         }
     }
 
-    class BindingObserverImplementation<TSource = any, TReturn = any, TParent = any>
+    class BindingObserverImplementation<TSource = any, TReturn = any>
         extends SubscriberSet
-        implements BindingObserver<TSource, TReturn, TParent> {
+        implements BindingObserver<TSource, TReturn> {
         public needsRefresh: boolean = true;
         private needsQueue: boolean = true;
 
@@ -184,7 +184,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
         private next: SubscriptionRecord | undefined = void 0;
 
         constructor(
-            private binding: Binding<TSource, TReturn, TParent>,
+            private binding: Binding<TSource, TReturn>,
             initialSubscriber?: Subscriber,
             private isVolatileBinding: boolean = false
         ) {
@@ -359,11 +359,11 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
          * @param initialSubscriber - An initial subscriber to changes in the binding value.
          * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
          */
-        binding<TSource = any, TReturn = any, TParent = any>(
-            binding: Binding<TSource, TReturn, TParent>,
+        binding<TSource = any, TReturn = any>(
+            binding: Binding<TSource, TReturn>,
             initialSubscriber?: Subscriber,
             isVolatileBinding: boolean = this.isVolatileBinding(binding)
-        ): BindingObserver<TSource, TReturn, TParent> {
+        ): BindingObserver<TSource, TReturn> {
             /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
             return new BindingObserverImplementation(
                 binding,
@@ -377,8 +377,8 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
          * on every evaluation of the value.
          * @param binding - The binding to inspect.
          */
-        isVolatileBinding<TSource = any, TReturn = any, TParent = any>(
-            binding: Binding<TSource, TReturn, TParent>
+        isVolatileBinding<TSource = any, TReturn = any>(
+            binding: Binding<TSource, TReturn>
         ): boolean {
             return volatileRegex.test(binding.toString());
         },
@@ -432,89 +432,202 @@ const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
  * Provides additional contextual information available to behaviors and expressions.
  * @public
  */
-export class ExecutionContext<TParent = any, TGrandparent = any> {
+export interface RootContext {
     /**
-     * The index of the current item within a repeat context.
+     * The current event within an event handler.
      */
-    public index: number = 0;
+    readonly event: Event;
 
     /**
-     * The length of the current collection within a repeat context.
+     * Returns the typed event detail of a custom event.
      */
-    public length: number = 0;
+    eventDetail<TDetail = any>(): TDetail;
 
     /**
-     * The parent data object within a repeat context.
+     * Returns the typed event target of the event.
      */
-    public parent: TParent = null as any;
+    eventTarget<TTarget extends EventTarget = EventTarget>(): TTarget;
+
+    /**
+     * Creates a new execution context descendent from the current context.
+     * @param source - The source for the context if different than the parent.
+     * @returns A child execution context.
+     */
+    createChildContext<TParentSource>(source: TParentSource): ChildContext<TParentSource>;
+}
+
+/**
+ * Provides additional contextual information when inside a child template.
+ * @public
+ */
+export interface ChildContext<TParentSource = any> extends RootContext {
+    /**
+     * The parent data source within a nested context.
+     */
+    readonly parent: TParentSource;
 
     /**
      * The parent execution context when in nested context scenarios.
      */
-    public parentContext: ExecutionContext<TGrandparent> = null as any;
+    readonly parentContext: ChildContext<TParentSource>;
 
     /**
-     * The current event within an event handler.
+     * Creates a new execution context descent suitable for use in list rendering.
+     * @param item - The list item to serve as the source.
+     * @param index - The index of the item in the list.
+     * @param length - The length of the list.
      */
-    public get event(): Event {
-        return contextEvent.get()!;
-    }
+    createItemContext(index: number, length: number): ItemContext<TParentSource>;
+}
+
+/**
+ * Provides additional contextual information when inside a repeat item template.s
+ * @public
+ */
+export interface ItemContext<TParentSource = any> extends ChildContext<TParentSource> {
+    /**
+     * The index of the current item within a repeat context.
+     */
+    readonly index: number;
+
+    /**
+     * The length of the current collection within a repeat context.
+     */
+    readonly length: number;
 
     /**
      * Indicates whether the current item within a repeat context
      * has an even index.
      */
-    public get isEven(): boolean {
-        return this.index % 2 === 0;
-    }
+    readonly isEven: boolean;
 
     /**
      * Indicates whether the current item within a repeat context
      * has an odd index.
      */
-    public get isOdd(): boolean {
-        return this.index % 2 !== 0;
-    }
+    readonly isOdd: boolean;
 
     /**
      * Indicates whether the current item within a repeat context
      * is the first item in the collection.
      */
-    public get isFirst(): boolean {
-        return this.index === 0;
-    }
+    readonly isFirst: boolean;
 
     /**
      * Indicates whether the current item within a repeat context
      * is somewhere in the middle of the collection.
      */
-    public get isInMiddle(): boolean {
-        return !this.isFirst && !this.isLast;
-    }
+    readonly isInMiddle: boolean;
 
     /**
      * Indicates whether the current item within a repeat context
      * is the last item in the collection.
      */
-    public get isLast(): boolean {
+    readonly isLast: boolean;
+
+    /**
+     * Updates the position/size on a context associated with a list item.
+     * @param index - The new index of the item.
+     * @param length - The new length of the list.
+     */
+    updatePosition(index: number, length: number): void;
+}
+
+class DefaultExecutionContext implements RootContext, ChildContext, ItemContext {
+    public index: number = 0;
+    public length: number = 0;
+    public readonly parent: any;
+    public readonly parentContext: ChildContext<any>;
+
+    constructor(parentSource: any = null, parentContext: ExecutionContext | null = null) {
+        this.parent = parentSource;
+        this.parentContext = parentContext as any;
+    }
+
+    get event(): Event {
+        return contextEvent.get()!;
+    }
+
+    get isEven(): boolean {
+        return this.index % 2 === 0;
+    }
+
+    get isOdd(): boolean {
+        return this.index % 2 !== 0;
+    }
+
+    get isFirst(): boolean {
+        return this.index === 0;
+    }
+
+    get isInMiddle(): boolean {
+        return !this.isFirst && !this.isLast;
+    }
+
+    get isLast(): boolean {
         return this.index === this.length - 1;
     }
 
+    eventDetail<TDetail>(): TDetail {
+        return (this.event as CustomEvent<TDetail>).detail;
+    }
+
+    eventTarget<TTarget extends EventTarget>(): TTarget {
+        return this.event.target! as TTarget;
+    }
+
+    updatePosition(index: number, length: number): void {
+        this.index = index;
+        this.length = length;
+    }
+
+    createChildContext<TParentSource>(
+        parentSource: TParentSource
+    ): ChildContext<TParentSource> {
+        return new DefaultExecutionContext(parentSource, this);
+    }
+
+    createItemContext(index: number, length: number): ItemContext {
+        const childContext = Object.create(this);
+        childContext.index = index;
+        childContext.length = length;
+        return childContext;
+    }
+}
+
+Observable.defineProperty(DefaultExecutionContext.prototype, "index");
+Observable.defineProperty(DefaultExecutionContext.prototype, "length");
+
+/**
+ * The common execution context APIs.
+ * @public
+ */
+export const ExecutionContext = Object.freeze({
+    default: new DefaultExecutionContext() as RootContext,
+
     /**
      * Sets the event for the current execution context.
      * @param event - The event to set.
      * @internal
      */
-    public static setEvent(event: Event | null): void {
+    setEvent(event: Event | null): void {
         contextEvent.set(event);
-    }
-}
+    },
 
-Observable.defineProperty(ExecutionContext.prototype, "index");
-Observable.defineProperty(ExecutionContext.prototype, "length");
+    /**
+     * Creates a new root execution context.
+     * @returns A new execution context.
+     */
+    create(): RootContext {
+        return new DefaultExecutionContext();
+    },
+});
 
 /**
- * The default execution context used in binding expressions.
+ * Represents some sort of execution context.
  * @public
  */
-export const defaultExecutionContext = Object.seal(new ExecutionContext());
+export type ExecutionContext<TParentSource = any> =
+    | RootContext
+    | ChildContext<TParentSource>
+    | ItemContext<TParentSource>;
diff --git a/packages/web-components/fast-element/src/styles/styles.spec.ts b/packages/web-components/fast-element/src/styles/styles.spec.ts
index dfe946c4cc3..634a166a247 100644
--- a/packages/web-components/fast-element/src/styles/styles.spec.ts
+++ b/packages/web-components/fast-element/src/styles/styles.spec.ts
@@ -7,10 +7,10 @@ import { DOM } from "../dom";
 import { CSSDirective } from "./css-directive";
 import { css, cssPartial } from "./css";
 import type { Behavior } from "../observation/behavior";
-import { defaultExecutionContext } from "../observation/observable";
 import type { FASTElement } from "..";
 import { StyleElementStrategy } from "../polyfills";
 import type { StyleTarget } from "../interfaces";
+import { ExecutionContext } from "../observation/observable";
 
 if (DOM.supportsAdoptedStyleSheets) {
     describe("AdoptedStyleSheetsStrategy", () => {
@@ -337,7 +337,7 @@ describe("cssPartial", () => {
             }
         } as FASTElement;
 
-        partial.createBehavior()?.bind(el, defaultExecutionContext)
+        partial.createBehavior()?.bind(el, ExecutionContext.default)
     });
 
     it("should add any ElementStyles interpolated into the template function when bound to an element", () => {
@@ -353,7 +353,7 @@ describe("cssPartial", () => {
             }
         } as FASTElement;
 
-        partial.createBehavior()?.bind(el, defaultExecutionContext)
+        partial.createBehavior()?.bind(el, ExecutionContext.default)
 
         expect(called).to.be.true;
     })
diff --git a/packages/web-components/fast-element/src/templating/binding.spec.ts b/packages/web-components/fast-element/src/templating/binding.spec.ts
index d0eb2b18dde..bcd1a8af5e0 100644
--- a/packages/web-components/fast-element/src/templating/binding.spec.ts
+++ b/packages/web-components/fast-element/src/templating/binding.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { bind, HTMLBindingDirective } from "./binding";
-import { observable, defaultExecutionContext } from "../observation/observable";
+import { ExecutionContext, observable } from "../observation/observable";
 import { DOM } from "../dom";
 import { html, ViewTemplate } from "./template";
 import { toHTML } from "../__test__/helpers";
@@ -46,7 +46,7 @@ describe("The HTML binding directive", () => {
             const { behavior, node, targets } = contentBinding();
             const model = new Model("This is a test");
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(node.textContent).to.equal(model.value);
         });
@@ -55,7 +55,7 @@ describe("The HTML binding directive", () => {
             const { behavior, node, targets } = contentBinding();
             const model = new Model("This is a test");
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(node.textContent).to.equal(model.value);
 
@@ -73,7 +73,7 @@ describe("The HTML binding directive", () => {
             const template = html<Model>`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
         });
@@ -83,7 +83,7 @@ describe("The HTML binding directive", () => {
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
@@ -99,7 +99,7 @@ describe("The HTML binding directive", () => {
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
@@ -115,7 +115,7 @@ describe("The HTML binding directive", () => {
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
@@ -131,7 +131,7 @@ describe("The HTML binding directive", () => {
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
@@ -148,7 +148,7 @@ describe("The HTML binding directive", () => {
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             const view = (node as any).$fastView as SyntheticView;
             const capturedTemplate = (node as any).$fastTemplate as ViewTemplate;
@@ -180,7 +180,7 @@ describe("The HTML binding directive", () => {
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
@@ -216,13 +216,13 @@ describe("The HTML binding directive", () => {
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             const newView = (node as any).$fastView as SyntheticView;
             expect(newView.source).to.equal(model);
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
-            behavior.unbind(model, defaultExecutionContext, targets);
+            behavior.unbind(model, ExecutionContext.default, targets);
 
             expect(newView.source).to.equal(null);
         });
@@ -232,17 +232,17 @@ describe("The HTML binding directive", () => {
             const template = html`This is a template. ${x => x.knownValue}`;
             const model = new Model(template);
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             const view = (node as any).$fastView as SyntheticView;
             expect(view.source).to.equal(model);
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
 
-            behavior.unbind(model, defaultExecutionContext, targets);
+            behavior.unbind(model, ExecutionContext.default, targets);
 
             expect(view.source).to.equal(null);
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             const newView = (node as any).$fastView as SyntheticView;
             expect(newView.source).to.equal(model);
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index ef067c9c302..e1df2925b58 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -288,11 +288,7 @@ export function sendSignal(signal: string): void {
 }
 
 class OnSignalBinding extends TargetUpdateBinding {
-    bind(
-        source: any,
-        context: ExecutionContext<any, any>,
-        targets: ViewBehaviorTargets
-    ): void {
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
         const target = targets[directive.targetId];
         const signal = this.getSignal(source, context);
@@ -319,11 +315,7 @@ class OnSignalBinding extends TargetUpdateBinding {
         }
     }
 
-    unbind(
-        source: any,
-        context: ExecutionContext<any, any>,
-        targets: ViewBehaviorTargets
-    ): void {
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const signal = this.getSignal(source, context);
         const found = signals[signal];
 
@@ -340,7 +332,7 @@ class OnSignalBinding extends TargetUpdateBinding {
         }
     }
 
-    private getSignal(source: any, context: ExecutionContext<any, any>): string {
+    private getSignal(source: any, context: ExecutionContext): string {
         const options = this.directive.options;
         return isString(options) ? options : options(source, context);
     }
diff --git a/packages/web-components/fast-element/src/templating/children.spec.ts b/packages/web-components/fast-element/src/templating/children.spec.ts
index 0b68b60a665..390f2029825 100644
--- a/packages/web-components/fast-element/src/templating/children.spec.ts
+++ b/packages/web-components/fast-element/src/templating/children.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { children, ChildrenDirective } from "./children";
-import { defaultExecutionContext, observable } from "../observation/observable";
+import { ExecutionContext, observable } from "../observation/observable";
 import { elements } from "./node-observation";
 import { DOM } from "../dom";
 
@@ -57,7 +57,7 @@ describe("The children", () => {
             behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(children);
         });
@@ -71,7 +71,7 @@ describe("The children", () => {
             behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(children.filter(elements("foo-bar")));
         });
@@ -84,7 +84,7 @@ describe("The children", () => {
             behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(children);
 
@@ -104,7 +104,7 @@ describe("The children", () => {
             behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(children);
 
@@ -137,7 +137,7 @@ describe("The children", () => {
 
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(subtreeChildren);
 
@@ -164,11 +164,11 @@ describe("The children", () => {
             behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(children);
 
-            behavior.unbind(model, defaultExecutionContext, targets);
+            behavior.unbind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members([]);
 
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index e16ea181261..9ed9da516d1 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -2,7 +2,7 @@ import { expect } from "chai";
 import { DOM } from "../dom";
 import { customElement, FASTElement } from "../components/fast-element";
 import { Markup } from './markup';
-import { defaultExecutionContext } from "../observation/observable";
+import { ExecutionContext } from "../observation/observable";
 import { css } from "../styles/css";
 import { toHTML, uniqueElementName } from "../__test__/helpers";
 import { bind, HTMLBindingDirective } from "./binding";
@@ -333,7 +333,7 @@ describe("The template compiler", () => {
                     expect(
                         (factories[0] as HTMLBindingDirective).binding(
                             scope,
-                            defaultExecutionContext
+                            ExecutionContext.default
                         )
                     ).to.equal(x.result);
                 }
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 232d5ecfafd..c0eef87ec3a 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -26,7 +26,11 @@ const next: NextNode = {
     node: null as ChildNode | null,
 };
 
-class CompilationContext implements TemplateCompilationResult {
+class CompilationContext<
+    TSource = any,
+    TParent = any,
+    TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
+> implements TemplateCompilationResult<TSource, TParent, TContext> {
     private proto: any = null;
     private targetIds = new Set<string>();
     private descriptors: PropertyDescriptorMap = {};
@@ -52,7 +56,7 @@ class CompilationContext implements TemplateCompilationResult {
         this.factories.push(factory);
     }
 
-    public freeze(): TemplateCompilationResult {
+    public freeze(): TemplateCompilationResult<TSource, TParent, TContext> {
         this.proto = Object.create(null, this.descriptors);
         return this;
     }
@@ -97,7 +101,7 @@ class CompilationContext implements TemplateCompilationResult {
         descriptors[targetId] = descriptor;
     }
 
-    public createView(hostBindingTarget?: Element): HTMLView {
+    public createView(hostBindingTarget?: Element): HTMLView<TSource, TParent, TContext> {
         const fragment = this.fragment.cloneNode(true) as DocumentFragment;
         const targets = Object.create(this.proto);
 
@@ -303,10 +307,14 @@ export const Compiler = {
      * it is recommended that you clone the original and pass the clone to this API.
      * @public
      */
-    compile(
+    compile<
+        TSource = any,
+        TParent = any,
+        TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
+    >(
         html: string | HTMLTemplateElement,
         directives: ReadonlyArray<HTMLDirective>
-    ): TemplateCompilationResult {
+    ): TemplateCompilationResult<TSource, TParent, TContext> {
         let template: HTMLTemplateElement;
 
         if (isString(html)) {
@@ -324,7 +332,10 @@ export const Compiler = {
 
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
         const fragment = document.adoptNode(template.content);
-        const context = new CompilationContext(fragment, directives);
+        const context = new CompilationContext<TSource, TParent, TContext>(
+            fragment,
+            directives
+        );
         compileAttributes(context, "", template, /* host */ "h", 0, true);
 
         if (
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 4dc51a78025..a79ee2f0482 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -14,7 +14,7 @@ export type ViewBehaviorTargets = {
  * Represents an object that can contribute behavior to a view.
  * @public
  */
-export interface ViewBehavior<TSource = any, TParent = any, TGrandparent = any> {
+export interface ViewBehavior<TSource = any, TParent = any> {
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
@@ -23,7 +23,7 @@ export interface ViewBehavior<TSource = any, TParent = any, TGrandparent = any>
      */
     bind(
         source: TSource,
-        context: ExecutionContext<TParent, TGrandparent>,
+        context: ExecutionContext<TParent>,
         targets: ViewBehaviorTargets
     ): void;
 
@@ -35,7 +35,7 @@ export interface ViewBehavior<TSource = any, TParent = any, TGrandparent = any>
      */
     unbind(
         source: TSource,
-        context: ExecutionContext<TParent, TGrandparent>,
+        context: ExecutionContext<TParent>,
         targets: ViewBehaviorTargets
     ): void;
 }
diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index b87d1bb67d5..189e4f56107 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -57,11 +57,7 @@ export abstract class NodeObservationDirective<
      * @param context - The execution context that the binding is operating within.
      * @param targets - The targets that behaviors in a view can attach to.
      */
-    bind(
-        source: any,
-        context: ExecutionContext<any, any>,
-        targets: ViewBehaviorTargets
-    ): void {
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const target = targets[this.targetId] as any;
         target.$fastSource = source;
         this.updateTarget(source, this.computeNodes(target));
@@ -74,11 +70,7 @@ export abstract class NodeObservationDirective<
      * @param context - The execution context that the binding is operating within.
      * @param targets - The targets that behaviors in a view can attach to.
      */
-    unbind(
-        source: any,
-        context: ExecutionContext<any, any>,
-        targets: ViewBehaviorTargets
-    ): void {
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const target = targets[this.targetId] as any;
         this.updateTarget(source, emptyArray);
         this.disconnect(target);
diff --git a/packages/web-components/fast-element/src/templating/repeat.spec.ts b/packages/web-components/fast-element/src/templating/repeat.spec.ts
index f4094de7514..fd0a11afe60 100644
--- a/packages/web-components/fast-element/src/templating/repeat.spec.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { repeat, RepeatDirective, RepeatBehavior } from "./repeat";
-import { html } from "./template";
-import { defaultExecutionContext, observable } from "../observation/observable";
+import { child, html } from "./template";
+import { ExecutionContext, observable } from "../observation/observable";
 import { DOM } from "../dom";
 import { toHTML } from "../__test__/helpers";
 
@@ -107,7 +107,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
 
                 expect(toHTML(parent)).to.equal(createOutput(size));
             });
@@ -124,7 +124,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const data = new ViewModel(size);
 
-                behavior.bind(data, defaultExecutionContext);
+                behavior.bind(data, ExecutionContext.default);
 
                 expect(toHTML(parent)).to.equal(
                     createOutput(size, void 0, void 0, input => `<div>${input}</div>`)
@@ -157,7 +157,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
                 vm.items.push({ name: "newitem" });
 
                 await DOM.nextUpdate();
@@ -177,7 +177,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
 
                 const index = size - 1;
                 vm.items.splice(index, 1);
@@ -201,7 +201,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
 
                 vm.items.splice(0, 1);
 
@@ -222,7 +222,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
 
                 const index = size - 1;
                 vm.items.splice(index, 1, { name: "newitem1" }, { name: "newitem2" });
@@ -246,7 +246,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
 
                 vm.items.splice(0, 1, { name: "newitem1" }, { name: "newitem2" });
 
@@ -269,7 +269,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
 
                 expect(toHTML(parent)).to.equal(createOutput(size));
 
@@ -286,7 +286,7 @@ describe("The repeat", () => {
                 const deepItemTemplate = html<Item>`
                     parent-${x => x.name}${repeat(
                         x => x.items!,
-                        html<Item>`child-${x => x.name}root-${(x, c) => c.parentContext.parent.name}`
+                        child<Item>`child-${x => x.name}root-${(x, c) => c.parentContext.parent.name}`
                     )}
                 `;
 
@@ -299,7 +299,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size, true);
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
 
                 const text = toHTML(parent);
 
@@ -321,7 +321,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
 
                 vm.items.shift();
                 vm.items.unshift({ name: "shift" });
@@ -345,7 +345,7 @@ describe("The repeat", () => {
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
 
                 await DOM.nextUpdate();
 
@@ -353,7 +353,7 @@ describe("The repeat", () => {
 
                 await DOM.nextUpdate();
 
-                behavior.bind(vm, defaultExecutionContext);
+                behavior.bind(vm, ExecutionContext.default);
 
                 await DOM.nextUpdate();
 
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index c669e1377b4..749cd6f22a4 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -1,4 +1,4 @@
-import { isFunction } from "../interfaces.js";
+import { ArrayItem, isFunction } from "../interfaces.js";
 import type { Splice } from "../observation/array-change-records.js";
 import { enableArrayObservation } from "../observation/array-observer.js";
 import type { Behavior } from "../observation/behavior.js";
@@ -6,13 +6,21 @@ import type { Notifier, Subscriber } from "../observation/notifier.js";
 import {
     Binding,
     BindingObserver,
+    ChildContext,
     ExecutionContext,
+    ItemContext,
     Observable,
+    RootContext,
 } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
 import { Markup } from "./markup.js";
 import { HTMLDirective, ViewBehaviorTargets } from "./html-directive.js";
-import type { CaptureType, SyntheticViewTemplate } from "./template.js";
+import type {
+    CaptureType,
+    ChildViewTemplate,
+    ItemViewTemplate,
+    SyntheticViewTemplate,
+} from "./template.js";
 import { HTMLView, SyntheticView } from "./view.js";
 
 /**
@@ -40,7 +48,7 @@ function bindWithoutPositioning(
     view: SyntheticView,
     items: readonly any[],
     index: number,
-    context: ExecutionContext
+    context: ChildContext
 ): void {
     view.bind(items[index], context);
 }
@@ -49,12 +57,9 @@ function bindWithPositioning(
     view: SyntheticView,
     items: readonly any[],
     index: number,
-    context: ExecutionContext
+    context: ChildContext
 ): void {
-    const childContext = Object.create(context);
-    childContext.index = index;
-    childContext.length = items.length;
-    view.bind(items[index], childContext);
+    view.bind(items[index], context.createItemContext(index, items.length));
 }
 
 /**
@@ -69,8 +74,8 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
     private items: readonly any[] | null = null;
     private itemsObserver: Notifier | null = null;
     private itemsBindingObserver: BindingObserver<TSource, any[]>;
-    private originalContext: ExecutionContext | undefined = void 0;
-    private childContext: ExecutionContext | undefined = void 0;
+    private context: ExecutionContext | undefined = void 0;
+    private childContext: ChildContext | undefined = void 0;
     private bindView: typeof bindWithoutPositioning = bindWithoutPositioning;
 
     /**
@@ -113,16 +118,11 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
      */
     public bind(source: TSource, context: ExecutionContext): void {
         this.source = source;
-        this.originalContext = context;
-        this.childContext = Object.create(context);
-        this.childContext!.parent = source;
-        this.childContext!.parentContext = this.originalContext;
-
-        this.items = this.itemsBindingObserver.observe(source, this.originalContext);
-        this.template = this.templateBindingObserver.observe(
-            source,
-            this.originalContext
-        );
+        this.context = context;
+        this.childContext = context.createChildContext(source);
+
+        this.items = this.itemsBindingObserver.observe(source, this.context);
+        this.template = this.templateBindingObserver.observe(source, this.context);
         this.observeItems(true);
         this.refreshAllViews();
     }
@@ -147,16 +147,13 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
     /** @internal */
     public handleChange(source: any, args: Splice[]): void {
         if (source === this.itemsBinding) {
-            this.items = this.itemsBindingObserver.observe(
-                this.source!,
-                this.originalContext!
-            );
+            this.items = this.itemsBindingObserver.observe(this.source!, this.context!);
             this.observeItems();
             this.refreshAllViews();
         } else if (source === this.templateBinding) {
             this.template = this.templateBindingObserver.observe(
                 this.source!,
-                this.originalContext!
+                this.context!
             );
             this.refreshAllViews(true);
         } else {
@@ -184,8 +181,8 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
     }
 
     private updateViews(splices: Splice[]): void {
-        const childContext = this.childContext!;
         const views = this.views;
+        const childContext = this.childContext!;
         const totalRemoved: SyntheticView[] = [];
         const bindView = this.bindView;
         let removeDelta = 0;
@@ -229,19 +226,17 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
 
         if (this.options.positioning) {
             for (let i = 0, ii = views.length; i < ii; ++i) {
-                const currentContext = views[i].context!;
-                currentContext.length = ii;
-                currentContext.index = i;
+                (views[i].context! as ItemContext).updatePosition(i, ii);
             }
         }
     }
 
     private refreshAllViews(templateChanged: boolean = false): void {
         const items = this.items!;
-        const childContext = this.childContext!;
         const template = this.template;
         const location = this.location;
         const bindView = this.bindView;
+        const childContext = this.childContext!;
         let itemsLength = items.length;
         let views = this.views;
         let viewsLength = views.length;
@@ -350,16 +345,74 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
  * @param options - Options used to turn on special repeat features.
  * @public
  */
-export function repeat<TSource = any, TItem = any>(
-    itemsBinding: Binding<TSource, readonly TItem[]>,
+export function repeat<
+    TSource = any,
+    TArray extends ReadonlyArray<any> = ReadonlyArray<any>
+>(
+    itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>,
+    templateOrTemplateBinding:
+        | SyntheticViewTemplate<ArrayItem<TArray>, TSource, RootContext>
+        | Binding<
+              TSource,
+              SyntheticViewTemplate<ArrayItem<TArray>, TSource, RootContext>
+          >,
+    options?:
+        | { positioning: false }
+        | { recycle: true }
+        | { positioning: false; recycle: false }
+        | { positioning: false; recycle: true }
+): CaptureType<TSource>;
+/**
+ * A directive that enables list rendering.
+ * @param itemsBinding - The array to render.
+ * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+ * to render for each item in the array.
+ * @param options - Options used to turn on special repeat features.
+ * @public
+ */
+export function repeat<
+    TSource = any,
+    TArray extends ReadonlyArray<any> = ReadonlyArray<any>
+>(
+    itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>,
+    templateOrTemplateBinding:
+        | ChildViewTemplate<ArrayItem<TArray>, TSource>
+        | Binding<TSource, ChildViewTemplate<ArrayItem<TArray>, TSource>>,
+    options?:
+        | { positioning: false }
+        | { recycle: true }
+        | { positioning: false; recycle: false }
+        | { positioning: false; recycle: true }
+): CaptureType<TSource>;
+/**
+ * A directive that enables list rendering.
+ * @param itemsBinding - The array to render.
+ * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+ * to render for each item in the array.
+ * @param options - Options used to turn on special repeat features.
+ * @public
+ */
+export function repeat<
+    TSource = any,
+    TArray extends ReadonlyArray<any> = ReadonlyArray<any>
+>(
+    itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>,
     templateOrTemplateBinding:
-        | SyntheticViewTemplate
-        | Binding<TSource, SyntheticViewTemplate>,
+        | ItemViewTemplate<ArrayItem<TArray>, TSource>
+        | Binding<TSource, ItemViewTemplate<ArrayItem<TArray>, TSource>>,
+    options:
+        | { positioning: true }
+        | { positioning: true; recycle: true }
+        | { positioning: true; recycle: false }
+): CaptureType<TSource>;
+export function repeat(
+    itemsBinding: any,
+    templateOrTemplateBinding: any,
     options: RepeatOptions = defaultRepeatOptions
-): CaptureType<TSource> {
+): any {
     const templateBinding = isFunction(templateOrTemplateBinding)
         ? templateOrTemplateBinding
         : (): SyntheticViewTemplate => templateOrTemplateBinding;
 
-    return new RepeatDirective<TSource>(itemsBinding, templateBinding, options);
+    return new RepeatDirective(itemsBinding, templateBinding, options) as any;
 }
diff --git a/packages/web-components/fast-element/src/templating/slotted.spec.ts b/packages/web-components/fast-element/src/templating/slotted.spec.ts
index 6b1969e23b0..89149e53c73 100644
--- a/packages/web-components/fast-element/src/templating/slotted.spec.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { slotted, SlottedDirective } from "./slotted";
-import { defaultExecutionContext, observable } from "../observation/observable";
+import { ExecutionContext, observable } from "../observation/observable";
 import { elements } from "./node-observation";
 import { DOM } from "../dom";
 
@@ -61,7 +61,7 @@ describe("The slotted", () => {
             behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(children);
         });
@@ -75,7 +75,7 @@ describe("The slotted", () => {
             behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(children.filter(elements("foo-bar")));
         });
@@ -86,7 +86,7 @@ describe("The slotted", () => {
             behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(children);
 
@@ -106,7 +106,7 @@ describe("The slotted", () => {
             behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(children);
 
@@ -123,11 +123,11 @@ describe("The slotted", () => {
             behavior.targetId = targetId;
             const model = new Model();
 
-            behavior.bind(model, defaultExecutionContext, targets);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members(children);
 
-            behavior.unbind(model, defaultExecutionContext, targets);
+            behavior.unbind(model, ExecutionContext.default, targets);
 
             expect(model.nodes).members([]);
 
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index b2f8f367226..8c93c89e2a8 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -1,5 +1,11 @@
 import { isFunction, isString } from "../interfaces.js";
-import { Binding, defaultExecutionContext } from "../observation/observable.js";
+import {
+    Binding,
+    ChildContext,
+    ExecutionContext,
+    ItemContext,
+    RootContext,
+} from "../observation/observable.js";
 import { bind, oneTime } from "./binding.js";
 import { Compiler } from "./compiler.js";
 import { AspectedHTMLDirective, HTMLDirective } from "./html-directive.js";
@@ -9,12 +15,13 @@ import type { ElementView, HTMLView, SyntheticView } from "./view.js";
  * A template capable of creating views specifically for rendering custom elements.
  * @public
  */
-export interface ElementViewTemplate<TSource = any, TParent = any, TGrandparent = any> {
+export interface ElementViewTemplate<TSource = any, TParent = any> {
+    type: "element";
     /**
      * Creates an ElementView instance based on this template definition.
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
-    create(hostBindingTarget: Element): ElementView<TSource, TParent, TGrandparent>;
+    create(hostBindingTarget: Element): ElementView<TSource, TParent>;
 
     /**
      * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
@@ -27,41 +34,90 @@ export interface ElementViewTemplate<TSource = any, TParent = any, TGrandparent
         source: TSource,
         host: Node,
         hostBindingTarget?: Element
-    ): HTMLView<TSource, TParent, TGrandparent>;
+    ): ElementView<TSource, TParent>;
 }
 
 /**
  * A template capable of rendering views not specifically connected to custom elements.
  * @public
  */
-export interface SyntheticViewTemplate<TSource = any, TParent = any, TGrandparent = any> {
+export interface SyntheticViewTemplate<
+    TSource = any,
+    TParent = any,
+    TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
+> {
+    type: "synthetic";
     /**
      * Creates a SyntheticView instance based on this template definition.
      */
-    create(): SyntheticView<TSource, TParent, TGrandparent>;
+    create(): SyntheticView<TSource, TParent, TContext>;
+}
+
+/**
+ * A template capable of rendering child views not specifically connected to custom elements.
+ * @public
+ */
+export interface ChildViewTemplate<TSource = any, TParent = any> {
+    type: "child";
+
+    /**
+     * Creates a SyntheticView instance based on this template definition.
+     */
+    create(): SyntheticView<TSource, TParent, ChildContext<TParent>>;
+}
+
+/**
+ * A template capable of rendering item views not specifically connected to custom elements.
+ * @public
+ */
+export interface ItemViewTemplate<TSource = any, TParent = any> {
+    type: "item";
+
+    /**
+     * Creates a SyntheticView instance based on this template definition.
+     */
+    create(): SyntheticView<TSource, TParent, ItemContext<TParent>>;
 }
 
 /**
  * The result of a template compilation operation.
  * @public
  */
-export interface HTMLTemplateCompilationResult {
+export interface HTMLTemplateCompilationResult<
+    TSource = any,
+    TParent = any,
+    TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
+> {
     /**
      * Creates a view instance.
      * @param hostBindingTarget - The host binding target for the view.
      */
-    createView(hostBindingTarget?: Element): HTMLView;
+    createView(hostBindingTarget?: Element): HTMLView<TSource, TParent, TContext>;
 }
 
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
  */
-export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any>
+export class ViewTemplate<
+    TSource = any,
+    TParent = any,
+    TContext extends ExecutionContext<TParent> = ExecutionContext
+>
     implements
-        ElementViewTemplate<TSource, TParent, TGrandparent>,
-        SyntheticViewTemplate<TSource, TParent, TGrandparent> {
-    private result: HTMLTemplateCompilationResult | null = null;
+        ElementViewTemplate<TSource, TParent>,
+        SyntheticViewTemplate<TSource, TParent, TContext> {
+    private result: HTMLTemplateCompilationResult<
+        TSource,
+        TParent,
+        TContext
+    > | null = null;
+
+    /**
+     * Used for TypeScript purposes only.
+     * Do not sure.
+     */
+    type: any;
 
     /**
      * The html representing what this template will
@@ -91,9 +147,12 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any>
      * Creates an HTMLView instance based on this template definition.
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
-    public create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TGrandparent> {
+    public create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TContext> {
         if (this.result === null) {
-            this.result = Compiler.compile(this.html, this.directives);
+            this.result = Compiler.compile<TSource, TParent, TContext>(
+                this.html,
+                this.directives
+            );
         }
 
         return this.result!.createView(hostBindingTarget);
@@ -109,10 +168,11 @@ export class ViewTemplate<TSource = any, TParent = any, TGrandparent = any>
     public render(
         source: TSource,
         host: Node,
-        hostBindingTarget?: Element
-    ): HTMLView<TSource, TParent, TGrandparent> {
+        hostBindingTarget?: Element,
+        context?: TContext
+    ): HTMLView<TSource, TParent, TContext> {
         const view = this.create(hostBindingTarget ?? (host as any));
-        view.bind(source, defaultExecutionContext);
+        view.bind(source, context ?? (ExecutionContext.default as TContext));
         view.appendTo(host);
         return view;
     }
@@ -135,10 +195,11 @@ export interface CaptureType<TSource> {}
  * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export type TemplateValue<TSource, TParent = any> =
-    | Binding<TSource, any, TParent>
-    | HTMLDirective
-    | CaptureType<TSource>;
+export type TemplateValue<
+    TSource,
+    TParent = any,
+    TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
+> = Binding<TSource, any, TContext> | HTMLDirective | CaptureType<TSource>;
 
 /**
  * Transforms a template literal string into a ViewTemplate.
@@ -149,10 +210,14 @@ export type TemplateValue<TSource, TParent = any> =
  * other template instances, and Directive instances.
  * @public
  */
-export function html<TSource = any, TParent = any, TGrandparent = any>(
+export function html<
+    TSource = any,
+    TParent = any,
+    TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
+>(
     strings: TemplateStringsArray,
-    ...values: TemplateValue<TSource, TParent>[]
-): ViewTemplate<TSource, TParent, TGrandparent> {
+    ...values: TemplateValue<TSource, TParent, TContext>[]
+): ViewTemplate<TSource, TParent> {
     const directives: HTMLDirective[] = [];
     let html = "";
 
@@ -188,5 +253,33 @@ export function html<TSource = any, TParent = any, TGrandparent = any>(
 
     html += strings[strings.length - 1];
 
-    return new ViewTemplate<TSource, TParent, TGrandparent>(html, directives);
+    return new ViewTemplate<TSource, TParent, any>(html, directives);
 }
+
+/**
+ * Transforms a template literal string into a ChildViewTemplate.
+ * @param strings - The string fragments that are interpolated with the values.
+ * @param values - The values that are interpolated with the string fragments.
+ * @remarks
+ * The html helper supports interpolation of strings, numbers, binding expressions,
+ * other template instances, and Directive instances.
+ * @public
+ */
+export const child: <TChild = any, TParent = any>(
+    strings: TemplateStringsArray,
+    ...values: TemplateValue<TChild, TParent, ChildContext<TParent>>[]
+) => ChildViewTemplate<TChild, TParent> = html as any;
+
+/**
+ * Transforms a template literal string into an ItemViewTemplate.
+ * @param strings - The string fragments that are interpolated with the values.
+ * @param values - The values that are interpolated with the string fragments.
+ * @remarks
+ * The html helper supports interpolation of strings, numbers, binding expressions,
+ * other template instances, and Directive instances.
+ * @public
+ */
+export const item: <TItem = any, TParent = any>(
+    strings: TemplateStringsArray,
+    ...values: TemplateValue<TItem, TParent, ItemContext<TParent>>[]
+) => ItemViewTemplate<TItem, TParent> = html as any;
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index 3af4e1e252c..ffbc8952351 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -1,5 +1,5 @@
 import type { Behavior } from "../observation/behavior.js";
-import type { ExecutionContext } from "../observation/observable.js";
+import type { ExecutionContext, RootContext } from "../observation/observable.js";
 import type {
     ViewBehavior,
     ViewBehaviorFactory,
@@ -10,11 +10,15 @@ import type {
  * Represents a collection of DOM nodes which can be bound to a data source.
  * @public
  */
-export interface View<TSource = any, TParent = any, TGrandparent = any> {
+export interface View<
+    TSource = any,
+    TParent = any,
+    TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
+> {
     /**
      * The execution context the view is running within.
      */
-    readonly context: ExecutionContext<TParent, TGrandparent> | null;
+    readonly context: TContext | null;
 
     /**
      * The data that the view is bound to.
@@ -26,7 +30,7 @@ export interface View<TSource = any, TParent = any, TGrandparent = any> {
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the view within.
      */
-    bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void;
+    bind(source: TSource, context: TContext): void;
 
     /**
      * Unbinds a view's behaviors from its binding source and context.
@@ -44,8 +48,8 @@ export interface View<TSource = any, TParent = any, TGrandparent = any> {
  * A View representing DOM nodes specifically for rendering the view of a custom element.
  * @public
  */
-export interface ElementView<TSource = any, TParent = any, TGrandparent = any>
-    extends View<TSource, TParent, TGrandparent> {
+export interface ElementView<TSource = any, TParent = any>
+    extends View<TSource, TParent, RootContext> {
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -57,8 +61,11 @@ export interface ElementView<TSource = any, TParent = any, TGrandparent = any>
  * A view representing a range of DOM nodes which can be added/removed ad hoc.
  * @public
  */
-export interface SyntheticView<TSource = any, TParent = any, TGrandparent = any>
-    extends View<TSource, TParent, TGrandparent> {
+export interface SyntheticView<
+    TSource = any,
+    TParent = any,
+    TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
+> extends View<TSource, TParent, TContext> {
     /**
      * The first DOM node in the range of nodes that make up the view.
      */
@@ -106,10 +113,11 @@ function removeNodeSequence(firstNode: Node, lastNode: Node): void {
  * The standard View implementation, which also implements ElementView and SyntheticView.
  * @public
  */
-export class HTMLView<TSource = any, TParent = any, TGrandparent = any>
-    implements
-        ElementView<TSource, TParent, TGrandparent>,
-        SyntheticView<TSource, TParent, TGrandparent> {
+export class HTMLView<
+    TSource = any,
+    TParent = any,
+    TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
+> implements ElementView<TSource, TParent>, SyntheticView<TSource, TParent, TContext> {
     private behaviors: ViewBehavior[] | null = null;
 
     /**
@@ -120,7 +128,7 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any>
     /**
      * The execution context the view is running within.
      */
-    public context: ExecutionContext<TParent, TGrandparent> | null = null;
+    public context: TContext | null = null;
 
     /**
      * The first DOM node in the range of nodes that make up the view.
@@ -210,7 +218,7 @@ export class HTMLView<TSource = any, TParent = any, TGrandparent = any>
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the behaviors within.
      */
-    public bind(source: TSource, context: ExecutionContext<TParent, TGrandparent>): void {
+    public bind(source: TSource, context: TContext): void {
         let behaviors = this.behaviors;
         const oldSource = this.source;
 
diff --git a/packages/web-components/fast-element/src/templating/when.spec.ts b/packages/web-components/fast-element/src/templating/when.spec.ts
index 8e295d17530..724f22d2fa6 100644
--- a/packages/web-components/fast-element/src/templating/when.spec.ts
+++ b/packages/web-components/fast-element/src/templating/when.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { when } from "./when";
 import { html } from "./template";
-import { Binding, defaultExecutionContext } from "../observation/observable";
+import { Binding, ExecutionContext } from "../observation/observable";
 
 describe("The 'when' template function", () => {
     it("returns an expression", () => {
@@ -15,13 +15,13 @@ describe("The 'when' template function", () => {
 
         it("returns a template when the condition is true", () => {
             const expression = when(() => true, template) as Binding;
-            const result = expression(scope, defaultExecutionContext);
+            const result = expression(scope, ExecutionContext.default);
             expect(result).to.equal(template);
         });
 
         it("returns null when the condition is false", () => {
             const expression = when(() => false, template) as Binding;
-            const result = expression(scope, defaultExecutionContext);
+            const result = expression(scope, ExecutionContext.default);
             expect(result).to.equal(null);
         });
 
@@ -30,7 +30,7 @@ describe("The 'when' template function", () => {
                 () => true,
                 () => template
             ) as Binding;
-            const result = expression(scope, defaultExecutionContext);
+            const result = expression(scope, ExecutionContext.default);
             expect(result).to.equal(template);
         });
     });
diff --git a/packages/web-components/fast-foundation/src/calendar/calendar.template.ts b/packages/web-components/fast-foundation/src/calendar/calendar.template.ts
index c5abb03b60f..d5002cc49f6 100644
--- a/packages/web-components/fast-foundation/src/calendar/calendar.template.ts
+++ b/packages/web-components/fast-foundation/src/calendar/calendar.template.ts
@@ -1,10 +1,23 @@
-import { html, repeat, when } from "@microsoft/fast-element";
+import {
+    child,
+    ChildViewTemplate,
+    html,
+    item,
+    ItemViewTemplate,
+    repeat,
+    when,
+} from "@microsoft/fast-element";
 import type { ViewTemplate } from "@microsoft/fast-element";
 import { endTemplate, startTemplate } from "../patterns/start-end.js";
 import { DataGrid, DataGridCell, DataGridRow } from "../data-grid/index.js";
 import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
 import type { ElementDefinitionContext } from "../design-system/registration-context.js";
-import type { Calendar, CalendarDateInfo, CalendarOptions } from "./calendar.js";
+import type {
+    Calendar,
+    CalendarDateInfo,
+    CalendarOptions,
+    WeekdayText,
+} from "./calendar.js";
 
 /**
  * A basic Calendar title template that includes the month and year
@@ -33,11 +46,9 @@ export const CalendarTitleTemplate: ViewTemplate<Calendar> = html`
  * @returns - The weekday labels template
  * @public
  */
-export const calendarWeekdayTemplate: (
-    context: ElementDefinitionContext
-) => ViewTemplate = context => {
+export const calendarWeekdayTemplate: (context: ElementDefinitionContext) => ItemViewTemplate = context => {
     const cellTag = context.tagFor(DataGridCell);
-    return html`
+    return item<WeekdayText>`
         <${cellTag}
             class="week-day"
             part="week-day"
@@ -60,12 +71,12 @@ export const calendarWeekdayTemplate: (
 export const calendarCellTemplate: (
     context: ElementDefinitionContext,
     todayString: string
-) => ViewTemplate<CalendarDateInfo> = (
+) => ItemViewTemplate<CalendarDateInfo> = (
     context: ElementDefinitionContext,
     todayString: string
 ) => {
     const cellTag: string = context.tagFor(DataGridCell);
-    return html`
+    return item`
         <${cellTag}
             class="${(x, c) => c.parentContext.parent.getDayClassNames(x, todayString)}"
             part="day"
@@ -102,9 +113,9 @@ export const calendarCellTemplate: (
 export const calendarRowTemplate: (
     context: ElementDefinitionContext,
     todayString: string
-) => ViewTemplate = (context: ElementDefinitionContext, todayString: string) => {
+) => ChildViewTemplate = (context: ElementDefinitionContext, todayString: string) => {
     const rowTag = context.tagFor(DataGridRow);
-    return html`
+    return child`
         <${rowTag}
             class="week"
             part="week"
@@ -134,7 +145,7 @@ export const interactiveCalendarGridTemplate: (
     const gridTag: string = context.tagFor(DataGrid);
     const rowTag: string = context.tagFor(DataGridRow);
 
-    return html`
+    return html<Calendar>`
     <${gridTag} class="days interact" part="days" generate-header="none">
         <${rowTag}
             class="week-days"
@@ -162,25 +173,25 @@ export const interactiveCalendarGridTemplate: (
 export const noninteractiveCalendarTemplate: (todayString: string) => ViewTemplate = (
     todayString: string
 ) => {
-    return html`
+    return html<Calendar>`
         <div class="days" part="days">
             <div class="week-days" part="week-days">
                 ${repeat(
                     x => x.getWeekdayText(),
-                    html`
+                    html<WeekdayText>`
                         <div class="week-day" part="week-day" abbr="${x => x.abbr}">
                             ${x => x.text}
                         </div>
                     `
                 )}
             </div>
-            ${repeat(
+            ${repeat<Calendar>(
                 x => x.getDays(),
-                html`
+                child<CalendarDateInfo[]>`
                     <div class="week">
                         ${repeat(
                             x => x,
-                            html`
+                            child<CalendarDateInfo>`
                                 <div
                                     class="${(x, c) =>
                                         c.parentContext.parent.getDayClassNames(
@@ -209,7 +220,7 @@ export const noninteractiveCalendarTemplate: (todayString: string) => ViewTempla
                                     </div>
                                     <slot
                                         name="${x => x.month}-${x => x.day}-${x =>
-                                            x.year}"
+                                x.year}"
                                     ></slot>
                                 </div>
                             `
@@ -237,7 +248,7 @@ export const calendarTemplate: FoundationElementTemplate<
     const todayString: string = `${
         today.getMonth() + 1
     }-${today.getDate()}-${today.getFullYear()}`;
-    return html`
+    return html<Calendar>`
         <template>
             ${startTemplate}
             ${definition.title instanceof Function
diff --git a/packages/web-components/fast-foundation/src/calendar/calendar.ts b/packages/web-components/fast-foundation/src/calendar/calendar.ts
index 9e851b13d30..e229e9efc6a 100644
--- a/packages/web-components/fast-foundation/src/calendar/calendar.ts
+++ b/packages/web-components/fast-foundation/src/calendar/calendar.ts
@@ -52,6 +52,12 @@ export type CalendarDateInfo = {
     selected?: boolean;
 };
 
+/**
+ * Calendar weekday text.
+ * @public
+ */
+export type WeekdayText = { text: string; abbr?: string };
+
 /**
  * Calendar configuration options
  * @public
@@ -318,7 +324,7 @@ export class Calendar extends FoundationElement {
      * @returns An array of weekday text and full text if abbreviated
      * @public
      */
-    public getWeekdayText(): { text: string; abbr?: string }[] {
+    public getWeekdayText(): WeekdayText[] {
         const weekdayText: {
             text: string;
             abbr?: string;
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts
index 910511c8efd..aa0f6328b4c 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { customElement, html, ViewTemplate } from "@microsoft/fast-element";
+import { html, ViewTemplate } from "@microsoft/fast-element";
 import { fixture } from "../test-utilities/fixture";
 import { dataGridCellTemplate, DataGridCell } from "./index";
 import { newDataRow } from "./data-grid.spec";
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.template.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.template.ts
index 93a1c95f2ed..dfac38db653 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.template.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.template.ts
@@ -1,13 +1,23 @@
-import { children, elements, html, slotted } from "@microsoft/fast-element";
+import {
+    children,
+    elements,
+    html,
+    item,
+    ItemViewTemplate,
+    slotted,
+} from "@microsoft/fast-element";
 import type { ViewTemplate } from "@microsoft/fast-element";
 import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
 import type { ElementDefinitionContext } from "../design-system/registration-context.js";
 import type { DataGridRow } from "./data-grid-row.js";
 import { DataGridCell } from "./data-grid-cell.js";
+import type { ColumnDefinition } from "./data-grid.js";
 
-function createCellItemTemplate(context: ElementDefinitionContext): ViewTemplate {
+function createCellItemTemplate(
+    context: ElementDefinitionContext
+): ItemViewTemplate<ColumnDefinition, DataGridRow> {
     const cellTag = context.tagFor(DataGridCell);
-    return html`
+    return item<ColumnDefinition, DataGridRow>`
     <${cellTag}
         cell-type="${x => (x.isRowHeader ? "rowheader" : undefined)}"
         grid-column="${(x, c) => c.index + 1}"
@@ -17,9 +27,11 @@ function createCellItemTemplate(context: ElementDefinitionContext): ViewTemplate
 `;
 }
 
-function createHeaderCellItemTemplate(context: ElementDefinitionContext): ViewTemplate {
+function createHeaderCellItemTemplate(
+    context: ElementDefinitionContext
+): ItemViewTemplate<ColumnDefinition, DataGridRow> {
     const cellTag = context.tagFor(DataGridCell);
-    return html`
+    return item<ColumnDefinition, DataGridRow>`
     <${cellTag}
         cell-type="columnheader"
         grid-column="${(x, c) => c.index + 1}"
@@ -38,8 +50,8 @@ export const dataGridRowTemplate: FoundationElementTemplate<ViewTemplate<DataGri
     context,
     definition
 ) => {
-    const cellItemTemplate: ViewTemplate = createCellItemTemplate(context);
-    const headerCellItemTemplate: ViewTemplate = createHeaderCellItemTemplate(context);
+    const cellItemTemplate = createCellItemTemplate(context);
+    const headerCellItemTemplate = createHeaderCellItemTemplate(context);
     return html<DataGridRow>`
         <template
             role="row"
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
index d3a09b4a895..c9e3d925436 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
@@ -1,9 +1,9 @@
 import {
     attr,
+    ItemViewTemplate,
     observable,
     RepeatBehavior,
     RepeatDirective,
-    ViewTemplate,
 } from "@microsoft/fast-element";
 import {
     eventFocusOut,
@@ -83,7 +83,7 @@ export class DataGridRow extends FoundationElement {
      * @public
      */
     @observable
-    public cellItemTemplate?: ViewTemplate;
+    public cellItemTemplate?: ItemViewTemplate;
     private cellItemTemplateChanged(): void {
         this.updateItemTemplate();
     }
@@ -94,7 +94,7 @@ export class DataGridRow extends FoundationElement {
      * @public
      */
     @observable
-    public headerCellItemTemplate?: ViewTemplate;
+    public headerCellItemTemplate?: ItemViewTemplate;
     private headerCellItemTemplateChanged(): void {
         this.updateItemTemplate();
     }
@@ -122,7 +122,7 @@ export class DataGridRow extends FoundationElement {
      * @internal
      */
     @observable
-    public activeCellItemTemplate?: ViewTemplate;
+    public activeCellItemTemplate?: ItemViewTemplate;
 
     /**
      * The default cell item template.  Set by the component templates.
@@ -130,7 +130,7 @@ export class DataGridRow extends FoundationElement {
      * @internal
      */
     @observable
-    public defaultCellItemTemplate?: ViewTemplate;
+    public defaultCellItemTemplate?: ItemViewTemplate;
 
     /**
      * The default header cell item template.  Set by the component templates.
@@ -138,7 +138,7 @@ export class DataGridRow extends FoundationElement {
      * @internal
      */
     @observable
-    public defaultHeaderCellItemTemplate?: ViewTemplate;
+    public defaultHeaderCellItemTemplate?: ItemViewTemplate;
 
     /**
      * Children that are cells
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.template.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.template.ts
index 57f3e2bc15b..7f0489c433d 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid.template.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.template.ts
@@ -1,13 +1,19 @@
-import { children, elements, html } from "@microsoft/fast-element";
+import {
+    children,
+    elements,
+    html,
+    item,
+    ItemViewTemplate,
+} from "@microsoft/fast-element";
 import type { ViewTemplate } from "@microsoft/fast-element";
 import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
 import type { ElementDefinitionContext } from "../design-system/registration-context.js";
 import type { DataGrid } from "./data-grid.js";
 import { DataGridRow } from "./data-grid-row.js";
 
-function createRowItemTemplate(context: ElementDefinitionContext): ViewTemplate {
+function createRowItemTemplate(context: ElementDefinitionContext): ItemViewTemplate<any, DataGrid> {
     const rowTag = context.tagFor(DataGridRow);
-    return html`
+    return item<any, DataGrid>`
     <${rowTag}
         :rowData="${x => x}"
         :cellItemTemplate="${(x, c) => c.parent.cellItemTemplate}"
@@ -26,7 +32,7 @@ export const dataGridTemplate: FoundationElementTemplate<ViewTemplate<DataGrid>>
     context,
     definition
 ) => {
-    const rowItemTemplate: ViewTemplate = createRowItemTemplate(context);
+    const rowItemTemplate = createRowItemTemplate(context);
     const rowTag = context.tagFor(DataGridRow);
     return html<DataGrid>`
         <template
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
index ae2f2ea32ce..5618db0c4ea 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
@@ -1,6 +1,7 @@
 import {
     attr,
     DOM,
+    ItemViewTemplate,
     observable,
     RepeatBehavior,
     RepeatDirective,
@@ -226,7 +227,7 @@ export class DataGrid extends FoundationElement {
      * @public
      */
     @observable
-    public rowItemTemplate: ViewTemplate;
+    public rowItemTemplate: ItemViewTemplate;
 
     /**
      * The template used to render cells in generated rows.
@@ -234,7 +235,7 @@ export class DataGrid extends FoundationElement {
      * @public
      */
     @observable
-    public cellItemTemplate?: ViewTemplate;
+    public cellItemTemplate?: ItemViewTemplate;
 
     /**
      * The template used to render header cells in generated rows.
@@ -242,7 +243,7 @@ export class DataGrid extends FoundationElement {
      * @public
      */
     @observable
-    public headerCellItemTemplate?: ViewTemplate;
+    public headerCellItemTemplate?: ItemViewTemplate;
     private headerCellItemTemplateChanged(): void {
         if (this.$fastController.isConnected) {
             if (this.generatedHeader !== null) {
@@ -289,7 +290,7 @@ export class DataGrid extends FoundationElement {
      * @internal
      */
     @observable
-    public defaultRowItemTemplate: ViewTemplate;
+    public defaultRowItemTemplate: ItemViewTemplate;
 
     /**
      * Set by the component templates.
diff --git a/packages/web-components/fast-foundation/src/design-token/design-token.ts b/packages/web-components/fast-foundation/src/design-token/design-token.ts
index 0b60ff33655..9dbbe651091 100644
--- a/packages/web-components/fast-foundation/src/design-token/design-token.ts
+++ b/packages/web-components/fast-foundation/src/design-token/design-token.ts
@@ -3,7 +3,7 @@ import {
     Binding,
     BindingObserver,
     CSSDirective,
-    defaultExecutionContext,
+    ExecutionContext,
     FASTElement,
     observable,
     Observable,
@@ -383,7 +383,7 @@ class DesignTokenBindingObserver<T> {
 
             (this.observer.observe(
                 this.node.target,
-                defaultExecutionContext
+                ExecutionContext.default
             ) as unknown) as StaticDesignTokenValue<T>
         );
     }
diff --git a/packages/web-components/fast-foundation/src/picker/picker.template.ts b/packages/web-components/fast-foundation/src/picker/picker.template.ts
index 0c1ab7e806c..fad127a983b 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.template.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.template.ts
@@ -1,4 +1,11 @@
-import { html, ref, ViewTemplate, when } from "@microsoft/fast-element";
+import {
+    child,
+    ChildViewTemplate,
+    html,
+    ref,
+    ViewTemplate,
+    when,
+} from "@microsoft/fast-element";
 import { AnchoredRegion } from "../anchored-region/anchored-region.js";
 import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
 import type { ElementDefinitionContext } from "../design-system/registration-context.js";
@@ -8,9 +15,9 @@ import { PickerMenuOption } from "./picker-menu-option.js";
 import { PickerList } from "./picker-list.js";
 import { PickerListItem } from "./picker-list-item.js";
 
-function createDefaultListItemTemplate(context: ElementDefinitionContext): ViewTemplate {
+function createDefaultListItemTemplate(context: ElementDefinitionContext): ChildViewTemplate {
     const pickerListItemTag: string = context.tagFor(PickerListItem);
-    return html`
+    return child`
     <${pickerListItemTag}
         value="${x => x}"
         :contentsTemplate="${(x, c) => c.parent.listItemContentsTemplate}"
@@ -19,11 +26,9 @@ function createDefaultListItemTemplate(context: ElementDefinitionContext): ViewT
     `;
 }
 
-function createDefaultMenuOptionTemplate(
-    context: ElementDefinitionContext
-): ViewTemplate {
+function createDefaultMenuOptionTemplate(context: ElementDefinitionContext): ChildViewTemplate {
     const pickerMenuOptionTag: string = context.tagFor(PickerMenuOption);
-    return html`
+    return child`
     <${pickerMenuOptionTag}
         value="${x => x}"
         :contentsTemplate="${(x, c) => c.parent.menuOptionContentsTemplate}"
@@ -44,10 +49,8 @@ export const pickerTemplate: FoundationElementTemplate<ViewTemplate<Picker>> = (
     const pickerMenuTag: string = context.tagFor(PickerMenu);
     const pickerListTag: string = context.tagFor(PickerList);
     const progressRingTag: string = context.tagFor(PickerList);
-    const defaultListItemTemplate: ViewTemplate = createDefaultListItemTemplate(context);
-    const defaultMenuOptionTemplate: ViewTemplate = createDefaultMenuOptionTemplate(
-        context
-    );
+    const defaultListItemTemplate = createDefaultListItemTemplate(context);
+    const defaultMenuOptionTemplate = createDefaultMenuOptionTemplate(context);
     return html<Picker>`
         <template
             :selectedListTag="${() => pickerListTag}"
diff --git a/packages/web-components/fast-foundation/src/test-utilities/fixture.ts b/packages/web-components/fast-foundation/src/test-utilities/fixture.ts
index 6ea578ddcc8..e6f3472f329 100644
--- a/packages/web-components/fast-foundation/src/test-utilities/fixture.ts
+++ b/packages/web-components/fast-foundation/src/test-utilities/fixture.ts
@@ -1,6 +1,5 @@
 import {
     Constructable,
-    defaultExecutionContext,
     ExecutionContext,
     HTMLView,
     ViewTemplate,
@@ -143,7 +142,7 @@ export async function fixture<TElement = HTMLElement>(
     const document = options.document || globalThis.document;
     const parent = options.parent || document.createElement("div");
     const source = options.source || {};
-    const context = options.context || defaultExecutionContext;
+    const context = options.context || ExecutionContext.default;
 
     if (typeof templateNameOrRegistry === "string") {
         const html = `<${templateNameOrRegistry}></${templateNameOrRegistry}>`;
diff --git a/packages/web-components/fast-router/src/view.ts b/packages/web-components/fast-router/src/view.ts
index 834efdaaf41..2d5f0e60153 100644
--- a/packages/web-components/fast-router/src/view.ts
+++ b/packages/web-components/fast-router/src/view.ts
@@ -1,6 +1,5 @@
 import {
     ComposableStyles,
-    defaultExecutionContext,
     ElementStyles,
     ExecutionContext,
     html,
@@ -20,7 +19,7 @@ export type RouterExecutionContext = ExecutionContext & {
  */
 export const RouterExecutionContext = Object.freeze({
     create(router: Router) {
-        return Object.create(defaultExecutionContext, {
+        return Object.create(ExecutionContext.default, {
             router: {
                 value: router,
             },
diff --git a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
index 926fc3a4485..e3035f62eaf 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
@@ -1,11 +1,5 @@
 import { ElementRenderer, RenderInfo } from "@lit-labs/ssr";
-import {
-    Aspect,
-    ComposableStyles,
-    defaultExecutionContext,
-    DOM,
-    FASTElement,
-} from "@microsoft/fast-element";
+import { Aspect, ExecutionContext, DOM, FASTElement } from "@microsoft/fast-element";
 import { TemplateRenderer } from "../template-renderer/template-renderer.js";
 import { SSRView } from "../view.js";
 import { StyleRenderer } from "../styles/style-renderer.js";
@@ -56,7 +50,7 @@ export abstract class FASTElementRenderer extends ElementRenderer {
 
             if (view.hostDynamicAttributes) {
                 for (const attr of view.hostDynamicAttributes) {
-                    const result = attr.binding(this.element, defaultExecutionContext);
+                    const result = attr.binding(this.element, ExecutionContext.default);
 
                     const { target } = attr;
                     switch (attr.aspect) {
@@ -133,7 +127,7 @@ export abstract class FASTElementRenderer extends ElementRenderer {
                 ((view as unknown) as SSRView).codes,
                 renderInfo,
                 this.element,
-                defaultExecutionContext
+                ExecutionContext.default
             );
         }
     }
diff --git a/packages/web-components/fast-ssr/src/template-renderer/directives.ts b/packages/web-components/fast-ssr/src/template-renderer/directives.ts
index bdd63f832f0..4cbf0ba538b 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/directives.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/directives.ts
@@ -3,6 +3,7 @@ import {
     ChildrenDirective,
     Constructable,
     ExecutionContext,
+    ItemContext,
     RefDirective,
     RepeatDirective,
     SlottedDirective,
@@ -36,18 +37,16 @@ export const RepeatDirectiveRenderer: DirectiveRenderer<typeof RepeatDirective>
         ): IterableIterator<string> {
             const items = directive.itemsBinding(source, context);
             const template = directive.templateBinding(source, context);
-            const childContext: ExecutionContext = Object.create(context);
-            childContext.parent = source;
-            childContext.parentContext = context;
+            const childContext = context.createChildContext(source);
 
             if (template instanceof ViewTemplate) {
                 if (directive.options.positioning) {
                     for (let i = 0, length = items.length; i < length; i++) {
-                        const ctx: ExecutionContext = Object.create(childContext);
-                        // Match fast-element context creation behavior. Perhaps this should be abstracted
-                        // So both fast-ssr and fast-element leverage the same context creation code?
-                        ctx.index = i;
-                        ctx.length = length;
+                        // Match fast-element repeater item context code.
+                        const ctx: ItemContext = childContext.createItemContext(
+                            i,
+                            length
+                        );
                         yield* renderer.render(template, renderInfo, items[i], ctx);
                     }
                 } else {
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
index 160b10113fc..cd26388c9e8 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
@@ -1,5 +1,5 @@
 import "../dom-shim.js";
-import { children, customElement, defaultExecutionContext, FASTElement, html, ref, repeat, slotted, when } from "@microsoft/fast-element";
+import { child, children, customElement, ExecutionContext, FASTElement, html, item, ref, repeat, slotted, when } from "@microsoft/fast-element";
 import { expect, test } from "@playwright/test";
 import fastSSR from "../exports.js";
 import { consolidate } from "../test-utils.js";
@@ -135,7 +135,7 @@ test.describe("TemplateRenderer", () => {
         const { templateRenderer, defaultRenderInfo} = fastSSR();
         consolidate(templateRenderer.render(html`${(x, c) => {calledWith = c}}`, defaultRenderInfo));
 
-        expect(calledWith).toBe(defaultExecutionContext);
+        expect(calledWith).toBe(ExecutionContext.default);
     });
 
 
@@ -226,11 +226,11 @@ test.describe("TemplateRenderer", () => {
             const source = {
                 data: ["foo", "bar", "bat"]
             };
-            const ctx = Object.create(defaultExecutionContext);
-            consolidate(templateRenderer.render(html<typeof source>`${repeat(x => x.data, html<string>`${(x, c) => {
+            const ctx = ExecutionContext.default;
+            consolidate(templateRenderer.render(html<typeof source>`${repeat(x => x.data, child<string>`${(x, c) => {
                 expect(c.parent).toBe(source);
                 expect(c.parentContext).toBe(ctx)
-            }}`, { positioning: true})}`, defaultRenderInfo, source, ctx))
+            }}`)}`, defaultRenderInfo, source, ctx))
         });
         test("should provide positioning information when invoked with the positioning config", () => {
 
@@ -239,7 +239,7 @@ test.describe("TemplateRenderer", () => {
                 data: ["foo", "bar", "bat"]
             };
             let i = 0;
-            consolidate(templateRenderer.render(html<typeof source>`${repeat(x => x.data, html<string>`${(x, c) => {
+            consolidate(templateRenderer.render(html<typeof source>`${repeat(x => x.data, item<string>`${(x, c) => {
                 expect(c.index).toBe(i);
                 i++;
                 expect(c.length).toBe(c.parent.data.length)
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
index 311e73a30ef..e18c880985c 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
@@ -3,14 +3,13 @@ import { getElementRenderer } from "@lit-labs/ssr/lib/element-renderer.js";
 import {
     Aspect,
     AspectedHTMLDirective,
-    defaultExecutionContext,
     ExecutionContext,
     ViewTemplate,
 } from "@microsoft/fast-element";
 import { Op, OpType } from "../template-parser/op-codes.js";
 import {
-    parseTemplateToOpCodes,
     parseStringToOpCodes,
+    parseTemplateToOpCodes,
 } from "../template-parser/template-parser.js";
 import { DirectiveRenderer } from "./directives.js";
 
@@ -57,7 +56,7 @@ export class TemplateRenderer
         template: ViewTemplate | string,
         renderInfo: RenderInfo,
         source: unknown = undefined,
-        context: ExecutionContext = defaultExecutionContext
+        context: ExecutionContext = ExecutionContext.default
     ): IterableIterator<string> {
         const codes =
             template instanceof ViewTemplate
diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
index a9892f02b04..0ee5f60418f 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
@@ -1,8 +1,8 @@
-import { html, repeat } from "@microsoft/fast-element";
+import { child, html, repeat } from "@microsoft/fast-element";
 import { ContentPlacementContainer } from "./content-placement-container";
 import { SiteContentPlacement } from "../content-placement";
 
-const template = html<SiteContentPlacement>`
+const template = child<SiteContentPlacement>`
     ${(x, c) => c.parent.selectTemplate()}
 `;
 
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
index c85ad17bb5a..e60964b7b32 100644
--- a/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
+++ b/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
@@ -1,6 +1,6 @@
 import EyedropperIcon from "@fluentui/svg-icons/icons/eyedropper_20_filled.svg";
 import { ColorHSL, hslToRGB } from "@microsoft/fast-colors";
-import { html, ref, repeat, when } from "@microsoft/fast-element";
+import { child, html, ref, repeat, when } from "@microsoft/fast-element";
 import ContextIcon from "svg/icon-context.svg";
 import ContrastIcon from "svg/icon-contrast.svg";
 import DownloadIcon from "svg/icon-download.svg";
@@ -72,7 +72,7 @@ export const FastFrameTemplate = html<FastFrame>`
                                 ${repeat(
                                     x => x.previewNeutralPalette,
 
-                                    html<string>`
+                                    child<string>`
                                         <site-color-swatch
                                             tabindex="0"
                                             aria-label="neutral color ${x => x}"
@@ -108,7 +108,7 @@ export const FastFrameTemplate = html<FastFrame>`
                             >
                                 ${repeat(
                                     x => x.previewAccentPalette,
-                                    html<string>`
+                                    child<string>`
                                         <site-color-swatch
                                             tabindex="0"
                                             aria-label="accent color ${x => x}"
diff --git a/sites/fast-website/src/app/components/side-navigation/side-navigation.template.ts b/sites/fast-website/src/app/components/side-navigation/side-navigation.template.ts
index e990774ca5e..c2075c62ea6 100644
--- a/sites/fast-website/src/app/components/side-navigation/side-navigation.template.ts
+++ b/sites/fast-website/src/app/components/side-navigation/side-navigation.template.ts
@@ -1,4 +1,4 @@
-import { html, repeat, when } from "@microsoft/fast-element";
+import { html, item, repeat, when } from "@microsoft/fast-element";
 import { SideNavigation } from "./side-navigation";
 
 export const SideNavigationTemplate = html<SideNavigation>`
@@ -29,7 +29,7 @@ export const SideNavigationTemplate = html<SideNavigation>`
             <div class="item-list">
                 ${repeat(
                     x => x.sectionArray,
-                    html`
+                    item`
                         <div
                             class="list-item scroll-indicator ${(x, c) =>
                                 c.parent.sectionArray[c.index].id ===

From 577833d54a332612309f49fba9495bac09a38ef1 Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholasrice@users.noreply.github.com>
Date: Thu, 7 Apr 2022 14:13:30 -0700
Subject: [PATCH 089/135] fixes build-break caused by rebase

---
 .../ui/components/design-tokens-form/index.ts |  3 +-
 .../web-components/fast-element/package.json  |  1 -
 .../src/templating/binding.spec.ts            |  4 +--
 .../src/data-grid/data-grid-cell.template.ts  |  3 +-
 .../src/directives/reflect-attributes.ts      | 31 ++++++++++++-------
 sites/fast-color-explorer/app/app.ts          |  3 +-
 .../control-pane/control-pane.template.ts     |  4 +--
 .../components/gradient/gradient.template.ts  |  4 +--
 8 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/packages/tooling/fast-figma-plugin-msft/src/core/ui/components/design-tokens-form/index.ts b/packages/tooling/fast-figma-plugin-msft/src/core/ui/components/design-tokens-form/index.ts
index 86b8ca98093..95c7a693f39 100644
--- a/packages/tooling/fast-figma-plugin-msft/src/core/ui/components/design-tokens-form/index.ts
+++ b/packages/tooling/fast-figma-plugin-msft/src/core/ui/components/design-tokens-form/index.ts
@@ -1,4 +1,5 @@
 import {
+    child,
     css,
     customElement,
     FASTElement,
@@ -14,7 +15,7 @@ const template = html<DesignTokensForm>`
     <ul>
         ${repeat(
             x => x.designTokens,
-            html<UIDesignTokenValue, DesignTokensForm>`
+            child<UIDesignTokenValue, DesignTokensForm>`
                 <li>
                     <td-design-token-field
                         :designToken=${x => x.definition}
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index 1f603f52c74..0f26420fa01 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -17,7 +17,6 @@
   "main": "dist/esm/index.js",
   "type": "module",
   "types": "dist/fast-element.d.ts",
-  "type": "module",
   "unpkg": "dist/fast-element.min.js",
   "sideEffects": [
     "./dist/esm/debug.js",
diff --git a/packages/web-components/fast-element/src/templating/binding.spec.ts b/packages/web-components/fast-element/src/templating/binding.spec.ts
index bcd1a8af5e0..2c02a85e7bd 100644
--- a/packages/web-components/fast-element/src/templating/binding.spec.ts
+++ b/packages/web-components/fast-element/src/templating/binding.spec.ts
@@ -193,12 +193,12 @@ describe("The HTML binding directive", () => {
         });
 
         it("allows interpolated HTML tags in templates", async () => {
-            const { behavior, parentNode } = contentBinding();
+            const { behavior, parentNode, targets } = contentBinding();
             const template = html`${x => html`<${x.knownValue}>Hi there!</${x.knownValue}>`}`;
             const model = new Model(template);
             model.knownValue = "button"
 
-            behavior.bind(model, defaultExecutionContext);
+            behavior.bind(model, ExecutionContext.default, targets);
 
             expect(toHTML(parentNode)).to.equal(`<button>Hi there!</button>`);
 
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.template.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.template.ts
index cb12277240e..ab8ee43c266 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.template.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.template.ts
@@ -14,7 +14,8 @@ export const dataGridCellTemplate: FoundationElementTemplate<ViewTemplate<
     return html<DataGridCell>`
         <template
             tabindex="-1"
-            role="${x => x.cellType ?? "gridcell"}"
+            role="${x =>
+                !x.cellType || x.cellType === "default" ? "gridcell" : x.cellType}"
             :classList="
             ${x =>
                 x.cellType === "columnheader"
diff --git a/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts b/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
index 1a9ea24b3cd..6001f1eefa2 100644
--- a/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
+++ b/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
@@ -1,9 +1,10 @@
 import {
-    AttachedBehaviorHTMLDirective,
-    Behavior,
     DOM,
+    ExecutionContext,
+    StatelessAttachedAttributeDirective,
     Subscriber,
     SubscriberSet,
+    ViewBehaviorTargets,
 } from "@microsoft/fast-element";
 import type { CaptureType } from "@microsoft/fast-element";
 
@@ -58,20 +59,27 @@ class AttributeReflectionSubscriptionSet extends SubscriberSet {
             }
         }
 
-        observer.observe(this.source, { attributeFilter });
+        observer.observe(this.subject, { attributeFilter });
     }
 }
 
-class ReflectAttrBehavior implements Behavior {
+class ReflectAttrBehavior extends StatelessAttachedAttributeDirective<string[]> {
     /**
      * The attributes the behavior is reflecting
      */
     public attributes: Readonly<string[]>;
-    constructor(private target: HTMLElement, attributes: string[]) {
+    private target: HTMLElement;
+    constructor(attributes: string[]) {
+        super(attributes);
         this.attributes = Object.freeze(attributes);
     }
 
-    public bind(source: HTMLElement): void {
+    public bind(
+        source: HTMLElement,
+        context: ExecutionContext,
+        targets: ViewBehaviorTargets
+    ): void {
+        this.target = targets[this.targetId] as HTMLElement;
         AttributeReflectionSubscriptionSet.getOrCreateFor(source).subscribe(this);
 
         // Reflect any existing attributes because MutationObserver will only
@@ -115,9 +123,10 @@ class ReflectAttrBehavior implements Behavior {
  * ```
  */
 export function reflectAttributes<T = any>(...attributes: string[]): CaptureType<T> {
-    return new AttachedBehaviorHTMLDirective(
-        "fast-reflect-attr",
-        ReflectAttrBehavior,
-        attributes
-    );
+    return new ReflectAttrBehavior(attributes);
+    // return new AttachedBehaviorHTMLDirective(
+    //     "fast-reflect-attr",
+    //     ReflectAttrBehavior,
+    //     attributes
+    // );
 }
diff --git a/sites/fast-color-explorer/app/app.ts b/sites/fast-color-explorer/app/app.ts
index 0342143d5a5..6a40dfce049 100644
--- a/sites/fast-color-explorer/app/app.ts
+++ b/sites/fast-color-explorer/app/app.ts
@@ -17,6 +17,7 @@ import {
 } from "@microsoft/fast-components";
 import {
     attr,
+    child,
     css,
     customElement,
     FASTElement,
@@ -72,7 +73,7 @@ const sampleTemplate = html<App>`
 const colorBlockTemplate = html<App>`
     ${repeat(
         x => x.backgrounds(),
-        html<SwatchInfo, App>`
+        child<SwatchInfo, App>`
             <app-color-block
                 index="${(x, c) => x.index}"
                 component="${(x, c) => c.parent.componentType}"
diff --git a/sites/fast-color-explorer/app/components/control-pane/control-pane.template.ts b/sites/fast-color-explorer/app/components/control-pane/control-pane.template.ts
index b8c4e10b1b5..4505f709f1b 100644
--- a/sites/fast-color-explorer/app/components/control-pane/control-pane.template.ts
+++ b/sites/fast-color-explorer/app/components/control-pane/control-pane.template.ts
@@ -1,6 +1,6 @@
 import { Checkbox, RadioGroup } from "@microsoft/fast-components";
+import { child, html, repeat } from "@microsoft/fast-element";
 import { ColorPicker } from "@microsoft/fast-tooling/dist/dts/web-components/color-picker/color-picker";
-import { html, repeat } from "@microsoft/fast-element";
 import { ComponentTypes } from "../../app";
 import { ControlPane } from "./control-pane";
 
@@ -25,7 +25,7 @@ export const controlPaneTemplate = html<ControlPane>`
             <label slot="label">Component type</label>
             ${repeat(
                 x => Object.keys(ComponentTypes),
-                html<string>`
+                child<string>`
                     <fast-radio
                         value="${x => x}"
                         ?checked="${(x, c) => c.parent.componentType === x}"
diff --git a/sites/fast-color-explorer/app/components/gradient/gradient.template.ts b/sites/fast-color-explorer/app/components/gradient/gradient.template.ts
index 69c2d5fa99f..1b6582f4255 100644
--- a/sites/fast-color-explorer/app/components/gradient/gradient.template.ts
+++ b/sites/fast-color-explorer/app/components/gradient/gradient.template.ts
@@ -1,6 +1,6 @@
 import { parseColor } from "@microsoft/fast-colors";
 import { isDark, SwatchRGB } from "@microsoft/fast-components";
-import { html, repeat } from "@microsoft/fast-element";
+import { html, item, repeat } from "@microsoft/fast-element";
 import { Gradient } from "./gradient";
 
 function getColor(background) {
@@ -13,7 +13,7 @@ export const gradientTemplate = html<Gradient>`
     <template>
         ${repeat(
             x => x.colors,
-            html<string, Gradient>`
+            item<string, Gradient>`
                 <a
                     class="${(x, c) =>
                         c.parent.markedColor !== undefined &&

From 260f81678b9517feab2fc9d1c2262d83191c41e7 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Tue, 12 Apr 2022 21:45:39 -0400
Subject: [PATCH 090/135] feat: new HTMLDirective design (#5826)

* refactor: clean up array observer

* refactor: modernize the splice code

* chore: set up SSR package (#5589)

* project files and starting to set up test infrastructure

* incorporating ts project references and getting tests working

* adding .npmignore to ingore tests and server

* adding readmes

* Update packages/web-components/fast-ssr/package.json

Co-authored-by: Chris Holt <chhol@microsoft.com>

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
Co-authored-by: Chris Holt <chhol@microsoft.com>

* feat: enable multiple instances of fast-element on a page at once (#5718)

* feat: enable multiple instances of fast-element on a page at once

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>

* refactor: extract polyfill and polyfill-like code to an optional module (#5752)

* refactor: extract polyfill and polyfill-like code to an optional module

* Change files

* fix: correct build break in fast-foundation from removing $global

* fix: update templates to use classList and fix classList bug

* Change files

* feat: require trusted types for bindings to innerHtml & move core policy

* fix: bug that arises when there are real trusted types

* refactor: minor internal cleanup in the polyfills

* fix: remove polyfill external module dependency

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>

* feat: implement template renderer infrastructure  (#5698)

* implement factory fn to create TemplateRenderer and ElementRenderer

* rename index to exports

* adding default render info object

* adding initial directive rendering

* adds initial custom element rendering

* add directive renderers

* add renderInfo to DirectiveRenderer

* use default directive renderers

* adding attribute binding tests

* ensure attributes don't get emitted twice for custom elements

* Adding internal function to render op codes so that we can omit template elements when rendering custom element templates

* emit template open and close codes from template parser

* implement FAST parser changes and fix tests

* working AspectedHTMLDirective changes into branch

* naive implementation of custom element template rendering

* adds rendering of template op code

* progress on elmeent rendering

* fixing custom element attribute rendering bug

* Change files

* adding boolean and property binding test

* fix bug preventing template elements from being parsed

* add failing template nesting test

* update parsing of content nodes to correctly render interpolated templates

* fix API report and formatting

* adding repeater rendering

* adding directive implementations for Ref, Slotted, and Children

* clean up op types to reduce rendant information

* remove commented code that is no longer needed

* adding tests for ref, slotted, and children

* re-use noop function for noop directives

* cache length of arrays in for loops

* adding style tests

* implementing style renderer

* remove 'data' from style id name

* adding tests

* renaming files to align with current conventions

* update attachShadow signature

* adding classList support

* fixing tests and supporting string types

* removing comment that is a non-concern

* add playwright install step to ci

* add browser path to ci script

* change install script to install at the package level

* update playwright

* Change files

* fixing test

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>

* feat: new execution context design (#5800)

* refactor: new design for execution context

* feat: add two new event helpers to the execution context and tests

* fix: wip update types to match new context apis

* fix: update foundation and components template types

* Change files

* fix: update template type in fast-website

* fix: update site components for new template types

* fix: add missing api updates

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>

* feat: new HTMLDirective API

* feat: new directive registration/identification model

* refactor: refine design/implementation of new directive aproach

* refactor: clean up comments, interfaces, types for directives/registries

* fix: update foundation to new APIs

* fix: update router to new directive APIs.

* fix: update ssr to new directive APIs

* refactor: clean up ssr switch to new directive APIs

* fix: update React wrapper lib to use latest APIs

* Change files

* fix: post rebase issues

* fix: update reflectAttributes directive to new directive APIs

* test: add more tests to capture new html/directive aspect scenarios

* Change files

* chore: run prettier on foundation

* Update packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts

Co-authored-by: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>

* Update packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts

Co-authored-by: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>

* Update packages/web-components/fast-foundation/src/directives/reflect-attributes.ts

Co-authored-by: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>

* Update packages/web-components/fast-foundation/src/directives/reflect-attributes.ts

Co-authored-by: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>

* chore: cleanup tests after rebase

Co-authored-by: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
Co-authored-by: Chris Holt <chhol@microsoft.com>
Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-6effdb36-c7f1-45ae-9f15-7dac556840ab.json |   7 +
 ...-b9272117-48e8-48b0-8356-cc529d536cef.json |   7 +
 ...-3957121e-c6d9-47b4-8eeb-416d7b4807f1.json |   7 +
 ...-0c25947c-7fac-49d3-a9d0-06d39b0544e3.json |   7 +
 .../utilities/fast-react-wrapper/src/index.ts |   2 +-
 .../fast-element/docs/api-report.md           | 129 ++++--
 .../fast-element/src/components/controller.ts |   2 +-
 .../src/components/fast-definitions.spec.ts   |   2 +-
 .../src/components/fast-definitions.ts        |  40 +-
 .../src/components/fast-element.ts            |   5 +-
 .../fast-element/src/platform.ts              |  45 ++
 .../src/templating/binding.spec.ts            |   2 +-
 .../fast-element/src/templating/binding.ts    | 124 +++---
 .../src/templating/children.spec.ts           |  30 +-
 .../fast-element/src/templating/children.ts   |   8 +-
 .../src/templating/compiler.spec.ts           |  21 +-
 .../fast-element/src/templating/compiler.ts   |  56 ++-
 .../src/templating/html-directive.ts          | 209 ++++++---
 .../fast-element/src/templating/markup.ts     |  24 +-
 .../src/templating/node-observation.ts        |   4 +-
 .../fast-element/src/templating/ref.ts        |   5 +-
 .../src/templating/repeat.spec.ts             |  54 +--
 .../fast-element/src/templating/repeat.ts     |  29 +-
 .../src/templating/slotted.spec.ts            |  32 +-
 .../fast-element/src/templating/slotted.ts    |   3 +
 .../src/templating/template.spec.ts           | 413 ++++++++++++------
 .../fast-element/src/templating/template.ts   | 104 +++--
 .../fast-foundation/docs/api-report.md        |   8 +-
 .../src/calendar/calendar.template.ts         |   4 +-
 .../src/data-grid/data-grid-row.ts            |   2 +-
 .../src/data-grid/data-grid.template.ts       |   4 +-
 .../src/data-grid/data-grid.ts                |   2 +-
 .../src/design-system/design-system.ts        |   6 +-
 .../src/design-system/registration-context.ts |   6 +-
 .../src/directives/reflect-attributes.spec.ts | 120 ++---
 .../src/directives/reflect-attributes.ts      |  77 ++--
 .../foundation-element/foundation-element.ts  |   2 +-
 .../src/picker/picker.template.ts             |   8 +-
 .../fast-foundation/src/picker/picker.ts      |   4 +-
 .../src/test-utilities/fixture.ts             |   4 +-
 .../fast-router/docs/api-report.md            |   7 +-
 .../fast-router/src/commands.ts               |   8 +-
 .../fast-router/src/contributors.ts           |  22 +-
 .../src/element-renderer/element-renderer.ts  |  12 +-
 .../web-components/fast-ssr/src/exports.ts    |  15 +-
 .../fast-ssr/src/template-parser/op-codes.ts  |  19 +-
 .../template-parser/template-parser.spec.ts   |  28 +-
 .../src/template-parser/template-parser.ts    |  37 +-
 .../src/template-renderer/directives.ts       |  19 +-
 .../template-renderer/template-renderer.ts    |  47 +-
 packages/web-components/fast-ssr/src/view.ts  |  13 +-
 51 files changed, 1163 insertions(+), 682 deletions(-)
 create mode 100644 change/@microsoft-fast-element-6effdb36-c7f1-45ae-9f15-7dac556840ab.json
 create mode 100644 change/@microsoft-fast-foundation-b9272117-48e8-48b0-8356-cc529d536cef.json
 create mode 100644 change/@microsoft-fast-react-wrapper-3957121e-c6d9-47b4-8eeb-416d7b4807f1.json
 create mode 100644 change/@microsoft-fast-router-0c25947c-7fac-49d3-a9d0-06d39b0544e3.json

diff --git a/change/@microsoft-fast-element-6effdb36-c7f1-45ae-9f15-7dac556840ab.json b/change/@microsoft-fast-element-6effdb36-c7f1-45ae-9f15-7dac556840ab.json
new file mode 100644
index 00000000000..fb77ab8cf86
--- /dev/null
+++ b/change/@microsoft-fast-element-6effdb36-c7f1-45ae-9f15-7dac556840ab.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: new directive registration/identification model",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-b9272117-48e8-48b0-8356-cc529d536cef.json b/change/@microsoft-fast-foundation-b9272117-48e8-48b0-8356-cc529d536cef.json
new file mode 100644
index 00000000000..60a5183d085
--- /dev/null
+++ b/change/@microsoft-fast-foundation-b9272117-48e8-48b0-8356-cc529d536cef.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update foundation to new APIs",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-react-wrapper-3957121e-c6d9-47b4-8eeb-416d7b4807f1.json b/change/@microsoft-fast-react-wrapper-3957121e-c6d9-47b4-8eeb-416d7b4807f1.json
new file mode 100644
index 00000000000..7e833996fc0
--- /dev/null
+++ b/change/@microsoft-fast-react-wrapper-3957121e-c6d9-47b4-8eeb-416d7b4807f1.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update React wrapper lib to use latest APIs",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-router-0c25947c-7fac-49d3-a9d0-06d39b0544e3.json b/change/@microsoft-fast-router-0c25947c-7fac-49d3-a9d0-06d39b0544e3.json
new file mode 100644
index 00000000000..199cd29c31f
--- /dev/null
+++ b/change/@microsoft-fast-router-0c25947c-7fac-49d3-a9d0-06d39b0544e3.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update router to new directive APIs.",
+  "packageName": "@microsoft/fast-router",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/utilities/fast-react-wrapper/src/index.ts b/packages/utilities/fast-react-wrapper/src/index.ts
index ebf41e0c3b0..19a698c3309 100644
--- a/packages/utilities/fast-react-wrapper/src/index.ts
+++ b/packages/utilities/fast-react-wrapper/src/index.ts
@@ -120,7 +120,7 @@ function getTagName<TElement, TEvents>(
 ) {
     if (!config.name) {
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        const definition = FASTElementDefinition.forType(type)!;
+        const definition = FASTElementDefinition.getByType(type)!;
 
         if (definition) {
             config.name = definition.name;
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index f4cb660fce3..d8ef1f1174a 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -11,6 +11,9 @@ export interface Accessor {
     setValue(source: any, value: any): void;
 }
 
+// @public
+export type AddViewBehaviorFactory = (factory: ViewBehaviorFactory) => string;
+
 // Warning: (ae-internal-missing-underscore) The name "AdoptedStyleSheetsStrategy" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
@@ -25,23 +28,23 @@ export class AdoptedStyleSheetsStrategy implements StyleStrategy {
 }
 
 // @public
-export enum Aspect {
-    attribute = 0,
-    booleanAttribute = 1,
-    content = 3,
-    event = 5,
-    property = 2,
-    tokenList = 4
-}
+export const Aspect: Readonly<{
+    none: number;
+    attribute: number;
+    booleanAttribute: number;
+    property: number;
+    content: number;
+    tokenList: number;
+    event: number;
+    assign(directive: Aspected, value: string): void;
+}>;
 
 // @public
-export abstract class AspectedHTMLDirective extends HTMLDirective {
-    abstract readonly aspect: Aspect;
-    abstract readonly binding?: Binding;
-    abstract captureSource(source: string): void;
-    createPlaceholder: (index: number) => string;
-    abstract readonly source: string;
-    abstract readonly target: string;
+export interface Aspected {
+    aspectType: number;
+    binding?: Binding;
+    sourceAspect: string;
+    targetAspect: string;
 }
 
 // @public
@@ -106,7 +109,7 @@ export interface BindingConfig<T = any> {
 }
 
 // @alpha (undocumented)
-export type BindingMode = Record<Aspect, BindingType>;
+export type BindingMode = Record<number, BindingType>;
 
 // @public
 export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier {
@@ -172,14 +175,14 @@ export interface ChildViewTemplate<TSource = any, TParent = any> {
 // @public
 export type CompilationStrategy = (
 html: string | HTMLTemplateElement,
-directives: readonly HTMLDirective[]) => HTMLTemplateCompilationResult;
+factories: Record<string, ViewBehaviorFactory>) => HTMLTemplateCompilationResult;
 
 // @public
 export const Compiler: {
     setHTMLPolicy(policy: TrustedTypesPolicy): void;
-    compile<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>>(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>): HTMLTemplateCompilationResult<TSource, TParent, TContext>;
+    compile<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>>(html: string | HTMLTemplateElement, directives: Record<string, ViewBehaviorFactory>): HTMLTemplateCompilationResult<TSource, TParent, TContext>;
     setDefaultStrategy(strategy: CompilationStrategy): void;
-    aggregate(parts: (string | HTMLDirective)[]): HTMLDirective;
+    aggregate(parts: (string | ViewBehaviorFactory)[]): ViewBehaviorFactory;
 };
 
 // @public
@@ -218,6 +221,11 @@ export class Controller<TElement extends HTMLElement = HTMLElement> extends Prop
     readonly view: ElementView<TElement> | null;
 }
 
+// Warning: (ae-internal-missing-underscore) The name "createTypeRegistry" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export function createTypeRegistry<TDefinition extends TypeDefinition>(): TypeRegistry<TDefinition>;
+
 // @public
 export function css(strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]): ElementStyles;
 
@@ -231,7 +239,7 @@ export class CSSDirective {
 export function cssPartial(strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]): CSSDirective;
 
 // @public
-export function customElement(nameOrDef: string | PartialFASTElementDefinition): (type: Function) => void;
+export function customElement(nameOrDef: string | PartialFASTElementDefinition): (type: Constructable<HTMLElement>) => void;
 
 // @public
 export type DecoratorAttributeConfiguration = Omit<AttributeConfiguration, "property">;
@@ -329,17 +337,18 @@ export const FASTElement: (new () => HTMLElement & FASTElement) & {
         new (): HTMLElement;
         prototype: HTMLElement;
     }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
-    define<TType extends Function>(type: TType, nameOrDef?: string | PartialFASTElementDefinition | undefined): TType;
+    define<TType extends Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition | undefined): TType;
 };
 
 // @public
-export class FASTElementDefinition<TType extends Function = Function> {
+export class FASTElementDefinition<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>> {
     constructor(type: TType, nameOrConfig?: PartialFASTElementDefinition | string);
     readonly attributeLookup: Record<string, AttributeDefinition>;
     readonly attributes: ReadonlyArray<AttributeDefinition>;
     define(registry?: CustomElementRegistry): this;
     readonly elementOptions?: ElementDefinitionOptions;
-    static readonly forType: <TType_1 extends Function>(key: TType_1) => FASTElementDefinition<Function> | undefined;
+    static readonly getByType: (key: Function) => FASTElementDefinition<Constructable<HTMLElement>> | undefined;
+    static readonly getForInstance: (object: any) => FASTElementDefinition<Constructable<HTMLElement>> | undefined;
     get isDefined(): boolean;
     readonly name: string;
     readonly propertyLookup: Record<string, AttributeDefinition>;
@@ -366,11 +375,23 @@ export interface FASTGlobal {
 export function html<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent, TContext>[]): ViewTemplate<TSource, TParent>;
 
 // @public
-export abstract class HTMLDirective implements ViewBehaviorFactory {
-    abstract createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
-    abstract createPlaceholder(index: number): string;
-    targetId: string;
-    readonly uniqueId: string;
+export interface HTMLDirective {
+    createHTML(add: AddViewBehaviorFactory): string;
+}
+
+// @public
+export const HTMLDirective: Readonly<{
+    getForInstance: (object: any) => HTMLDirectiveDefinition<Constructable<HTMLDirective>> | undefined;
+    getByType: (key: Function) => HTMLDirectiveDefinition<Constructable<HTMLDirective>> | undefined;
+    define<TType extends Constructable<HTMLDirective>>(type: TType, options?: PartialHTMLDirectiveDefinition | undefined): TType;
+}>;
+
+// @public
+export function htmlDirective(options?: PartialHTMLDirectiveDefinition): (type: Constructable<HTMLDirective>) => void;
+
+// @public
+export interface HTMLDirectiveDefinition<TType extends Constructable<HTMLDirective> = Constructable<HTMLDirective>> extends Required<PartialHTMLDirectiveDefinition> {
+    readonly type: TType;
 }
 
 // @public
@@ -418,9 +439,9 @@ export interface ItemViewTemplate<TSource = any, TParent = any> {
 
 // @public
 export const Markup: Readonly<{
-    interpolation: (index: number) => string;
-    attribute: (index: number) => string;
-    comment: (index: number) => string;
+    interpolation: (id: string) => string;
+    attribute: (id: string) => string;
+    comment: (id: string) => string;
 }>;
 
 // Warning: (ae-internal-missing-underscore) The name "Mutable" should be prefixed with an underscore because the declaration is marked as @internal
@@ -492,7 +513,7 @@ export const oneTime: BindingConfig<DefaultBindingOptions> & BindingConfigResolv
 
 // @public
 export const Parser: Readonly<{
-    parse(value: string, directives: readonly HTMLDirective[]): (string | HTMLDirective)[] | null;
+    parse(value: string, factories: Record<string, ViewBehaviorFactory>): (string | ViewBehaviorFactory)[] | null;
 }>;
 
 // @public
@@ -505,6 +526,11 @@ export interface PartialFASTElementDefinition {
     readonly template?: ElementViewTemplate;
 }
 
+// @public
+export interface PartialHTMLDirectiveDefinition {
+    aspected?: boolean;
+}
+
 // @public
 export class PropertyChangeNotifier implements Notifier {
     constructor(subject: any);
@@ -572,12 +598,14 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
 }
 
 // @public
-export class RepeatDirective<TSource = any> extends HTMLDirective {
+export class RepeatDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory {
     constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
     createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource>;
-    createPlaceholder: (index: number) => string;
+    createHTML(add: AddViewBehaviorFactory): string;
+    id: string;
     // (undocumented)
     readonly itemsBinding: Binding;
+    nodeId: string;
     // (undocumented)
     readonly options: RepeatOptions;
     // (undocumented)
@@ -630,11 +658,13 @@ export class Splice {
 }
 
 // @public
-export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirective implements ViewBehavior {
+export abstract class StatelessAttachedAttributeDirective<T> implements HTMLDirective, ViewBehaviorFactory, ViewBehavior {
     constructor(options: T);
     abstract bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
-    createPlaceholder: (index: number) => string;
+    createHTML(add: AddViewBehaviorFactory): string;
+    id: string;
+    nodeId: string;
     // (undocumented)
     protected options: T;
     abstract unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
@@ -704,6 +734,26 @@ export type TrustedTypesPolicy = {
     createHTML(html: string): string;
 };
 
+// Warning: (ae-internal-missing-underscore) The name "TypeDefinition" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export interface TypeDefinition {
+    // (undocumented)
+    type: Function;
+}
+
+// Warning: (ae-internal-missing-underscore) The name "TypeRegistry" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export interface TypeRegistry<TDefinition extends TypeDefinition> {
+    // (undocumented)
+    getByType(key: Function): TDefinition | undefined;
+    // (undocumented)
+    getForInstance(object: any): TDefinition | undefined;
+    // (undocumented)
+    register(definition: TDefinition): boolean;
+}
+
 // @public
 export interface ValueConverter {
     fromView(value: any): any;
@@ -728,7 +778,8 @@ export interface ViewBehavior<TSource = any, TParent = any> {
 // @public
 export interface ViewBehaviorFactory {
     createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
-    targetId: string;
+    id: string;
+    nodeId: string;
 }
 
 // @public
@@ -738,9 +789,9 @@ export type ViewBehaviorTargets = {
 
 // @public
 export class ViewTemplate<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext> implements ElementViewTemplate<TSource, TParent>, SyntheticViewTemplate<TSource, TParent, TContext> {
-    constructor(html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>);
+    constructor(html: string | HTMLTemplateElement, factories: Record<string, ViewBehaviorFactory>);
     create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TContext>;
-    readonly directives: ReadonlyArray<HTMLDirective>;
+    readonly factories: Record<string, ViewBehaviorFactory>;
     readonly html: string | HTMLTemplateElement;
     render(source: TSource, host: Node, hostBindingTarget?: Element, context?: TContext): HTMLView<TSource, TParent, TContext>;
     type: any;
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index aeb63d3a276..80ba127329d 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -482,7 +482,7 @@ export class Controller<
             return controller;
         }
 
-        const definition = FASTElementDefinition.forType(element.constructor);
+        const definition = FASTElementDefinition.getForInstance(element);
 
         if (definition === void 0) {
             throw FAST.error(Message.missingElementDefinition);
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.spec.ts b/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
index 77754ee3682..f77df48fe27 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
@@ -4,7 +4,7 @@ import { FASTElementDefinition } from "./fast-definitions";
 import { ElementStyles } from "../styles/element-styles";
 
 describe("FASTElementDefinition", () => {
-    class MyElement {}
+    class MyElement extends HTMLElement {}
 
     context("styles", () => {
         it("can accept a string", () => {
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.ts b/packages/web-components/fast-element/src/components/fast-definitions.ts
index 275dd93b7c6..622fe453a4f 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.ts
@@ -1,29 +1,17 @@
-import { isString, KernelServiceId } from "../interfaces.js";
+import { Constructable, isString, KernelServiceId } from "../interfaces.js";
 import { Observable } from "../observation/observable.js";
-import { FAST } from "../platform.js";
+import { createTypeRegistry, FAST, TypeRegistry } from "../platform.js";
 import { ComposableStyles, ElementStyles } from "../styles/element-styles.js";
 import type { ElementViewTemplate } from "../templating/template.js";
 import { AttributeConfiguration, AttributeDefinition } from "./attributes.js";
 
 const defaultShadowOptions: ShadowRootInit = { mode: "open" };
 const defaultElementOptions: ElementDefinitionOptions = {};
-const fastRegistry = FAST.getById(KernelServiceId.elementRegistry, () => {
-    const typeToDefinition = new Map<Function, FASTElementDefinition>();
 
-    return Object.freeze({
-        register(definition: FASTElementDefinition): boolean {
-            if (typeToDefinition.has(definition.type)) {
-                return false;
-            }
-
-            typeToDefinition.set(definition.type, definition);
-            return true;
-        },
-        getByType<TType extends Function>(key: TType): FASTElementDefinition | undefined {
-            return typeToDefinition.get(key);
-        },
-    });
-});
+const fastElementRegistry: TypeRegistry<FASTElementDefinition> = FAST.getById(
+    KernelServiceId.elementRegistry,
+    () => createTypeRegistry<FASTElementDefinition>()
+);
 
 /**
  * Represents metadata configuration for a custom element.
@@ -65,7 +53,9 @@ export interface PartialFASTElementDefinition {
  * Defines metadata for a FASTElement.
  * @public
  */
-export class FASTElementDefinition<TType extends Function = Function> {
+export class FASTElementDefinition<
+    TType extends Constructable<HTMLElement> = Constructable<HTMLElement>
+> {
     private observedAttributes: string[];
 
     /**
@@ -77,7 +67,7 @@ export class FASTElementDefinition<TType extends Function = Function> {
      * Indicates if this element has been defined in at least one registry.
      */
     public get isDefined(): boolean {
-        return !!fastRegistry.getByType(this.type);
+        return !!fastElementRegistry.getByType(this.type);
     }
 
     /**
@@ -184,7 +174,7 @@ export class FASTElementDefinition<TType extends Function = Function> {
     public define(registry: CustomElementRegistry = customElements): this {
         const type = this.type;
 
-        if (fastRegistry.register(this)) {
+        if (fastElementRegistry.register(this)) {
             const attributes = this.attributes;
             const proto = type.prototype;
 
@@ -209,5 +199,11 @@ export class FASTElementDefinition<TType extends Function = Function> {
      * Gets the element definition associated with the specified type.
      * @param type - The custom element type to retrieve the definition for.
      */
-    static readonly forType = fastRegistry.getByType;
+    static readonly getByType = fastElementRegistry.getByType;
+
+    /**
+     * Gets the element definition associated with the instance.
+     * @param instance - The custom element instance to retrieve the definition for.
+     */
+    static readonly getForInstance = fastElementRegistry.getForInstance;
 }
diff --git a/packages/web-components/fast-element/src/components/fast-element.ts b/packages/web-components/fast-element/src/components/fast-element.ts
index 0053801dee8..64ae3dee9fc 100644
--- a/packages/web-components/fast-element/src/components/fast-element.ts
+++ b/packages/web-components/fast-element/src/components/fast-element.ts
@@ -1,3 +1,4 @@
+import type { Constructable } from "../interfaces.js";
 import { Controller } from "./controller.js";
 import {
     FASTElementDefinition,
@@ -121,7 +122,7 @@ export const FASTElement = Object.assign(createFASTElement(HTMLElement), {
      * @param nameOrDef - The name of the element to define or a definition object
      * that describes the element to define.
      */
-    define<TType extends Function>(
+    define<TType extends Constructable<HTMLElement>>(
         type: TType,
         nameOrDef?: string | PartialFASTElementDefinition
     ): TType {
@@ -137,7 +138,7 @@ export const FASTElement = Object.assign(createFASTElement(HTMLElement), {
  */
 export function customElement(nameOrDef: string | PartialFASTElementDefinition) {
     /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
-    return function (type: Function) {
+    return function (type: Constructable<HTMLElement>) {
         new FASTElementDefinition(type, nameOrDef).define();
     };
 }
diff --git a/packages/web-components/fast-element/src/platform.ts b/packages/web-components/fast-element/src/platform.ts
index f334c47c9b8..25e04791de4 100644
--- a/packages/web-components/fast-element/src/platform.ts
+++ b/packages/web-components/fast-element/src/platform.ts
@@ -55,3 +55,48 @@ if (FAST.error === void 0) {
  * @internal
  */
 export const emptyArray = Object.freeze([]);
+
+/**
+ * Do not change. Part of shared kernel contract.
+ * @internal
+ */
+export interface TypeDefinition {
+    type: Function;
+}
+
+/**
+ * Do not change. Part of shared kernel contract.
+ * @internal
+ */
+export interface TypeRegistry<TDefinition extends TypeDefinition> {
+    register(definition: TDefinition): boolean;
+    getByType(key: Function): TDefinition | undefined;
+    getForInstance(object: any): TDefinition | undefined;
+}
+
+/**
+ * Do not change. Part of shared kernel contract.
+ * @internal
+ */
+export function createTypeRegistry<TDefinition extends TypeDefinition>(): TypeRegistry<
+    TDefinition
+> {
+    const typeToDefinition = new Map<Function, TDefinition>();
+
+    return Object.freeze({
+        register(definition: TDefinition): boolean {
+            if (typeToDefinition.has(definition.type)) {
+                return false;
+            }
+
+            typeToDefinition.set(definition.type, definition);
+            return true;
+        },
+        getByType<TType extends Function>(key: TType): TDefinition | undefined {
+            return typeToDefinition.get(key);
+        },
+        getForInstance(object: any): TDefinition | undefined {
+            return typeToDefinition.get(object.constructor);
+        },
+    });
+}
diff --git a/packages/web-components/fast-element/src/templating/binding.spec.ts b/packages/web-components/fast-element/src/templating/binding.spec.ts
index 2c02a85e7bd..7bb45456916 100644
--- a/packages/web-components/fast-element/src/templating/binding.spec.ts
+++ b/packages/web-components/fast-element/src/templating/binding.spec.ts
@@ -28,7 +28,7 @@ describe("The HTML binding directive", () => {
 
     function contentBinding(propertyName: keyof Model = "value") {
         const directive = bind(x => x[propertyName]) as HTMLBindingDirective;
-        directive.targetId = 'r';
+        directive.nodeId = 'r';
 
         const node = document.createTextNode(" ");
         const targets = { r: node };
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index e1df2925b58..55806b3e5de 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,5 +1,5 @@
 import { DOM } from "../dom.js";
-import { isString, Message, Mutable } from "../interfaces.js";
+import { isString, Message } from "../interfaces.js";
 import {
     Binding,
     BindingObserver,
@@ -8,11 +8,15 @@ import {
 } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import {
+    AddViewBehaviorFactory,
     Aspect,
-    AspectedHTMLDirective,
+    Aspected,
+    HTMLDirective,
     ViewBehavior,
+    ViewBehaviorFactory,
     ViewBehaviorTargets,
 } from "./html-directive.js";
+import { Markup } from "./markup.js";
 import type { CaptureType } from "./template.js";
 import type { SyntheticView } from "./view.js";
 
@@ -40,7 +44,7 @@ export const notSupportedBindingType: BindingType = () => {
 /**
  * @alpha
  */
-export type BindingMode = Record<Aspect, BindingType>;
+export type BindingMode = Record<number, BindingType>;
 
 /**
  * @alpha
@@ -85,7 +89,7 @@ function createContentBinding(
         ): void {
             super.unbind(source, context, targets);
 
-            const target = targets[this.directive.targetId] as ContentTarget;
+            const target = targets[this.directive.nodeId] as ContentTarget;
             const view = target.$fastView as ComposableView;
 
             if (view !== void 0 && view.isComposed) {
@@ -177,7 +181,7 @@ function updateTokenListTarget(
     value: any
 ): void {
     const directive = this.directive;
-    const lookup = `${directive.uniqueId}-token-list`;
+    const lookup = `${directive.id}-token-list`;
     const state: TokenListState =
         target[lookup] ?? (target[lookup] = { c: 0, v: Object.create(null) });
     const versions = state.v;
@@ -264,10 +268,10 @@ class TargetUpdateBinding extends BindingBase {
 class OneTimeBinding extends TargetUpdateBinding {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
-        const target = targets[directive.targetId];
+        const target = targets[directive.nodeId];
         this.updateTarget(
             target,
-            directive.target!,
+            directive.targetAspect!,
             directive.binding(source, context),
             source,
             context
@@ -290,12 +294,12 @@ export function sendSignal(signal: string): void {
 class OnSignalBinding extends TargetUpdateBinding {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
-        const target = targets[directive.targetId];
+        const target = targets[directive.nodeId];
         const signal = this.getSignal(source, context);
-        const handler = (target[directive.uniqueId] = () => {
+        const handler = (target[directive.id] = () => {
             this.updateTarget(
                 target,
-                directive.target!,
+                directive.targetAspect!,
                 directive.binding(source, context),
                 source,
                 context
@@ -321,8 +325,8 @@ class OnSignalBinding extends TargetUpdateBinding {
 
         if (found && Array.isArray(found)) {
             const directive = this.directive;
-            const target = targets[directive.targetId];
-            const handler = target[directive.uniqueId];
+            const target = targets[directive.nodeId];
+            const handler = target[directive.id];
             const index = found.indexOf(handler);
             if (index !== -1) {
                 found.splice(index, 1);
@@ -348,10 +352,10 @@ class OnChangeBinding extends TargetUpdateBinding {
 
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
-        const target = targets[directive.targetId];
+        const target = targets[directive.nodeId];
         const observer: BindingObserver =
-            target[directive.uniqueId] ??
-            (target[directive.uniqueId] = Observable.binding(
+            target[directive.id] ??
+            (target[directive.id] = Observable.binding(
                 directive.binding,
                 this,
                 this.isBindingVolatile
@@ -363,7 +367,7 @@ class OnChangeBinding extends TargetUpdateBinding {
 
         this.updateTarget(
             target,
-            directive.target!,
+            directive.targetAspect!,
             observer.observe(source, context),
             source,
             context
@@ -371,8 +375,8 @@ class OnChangeBinding extends TargetUpdateBinding {
     }
 
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        const target = targets[this.directive.targetId];
-        const observer = target[this.directive.uniqueId];
+        const target = targets[this.directive.nodeId];
+        const observer = target[this.directive.id];
         observer.disconnect();
         observer.target = null;
         observer.source = null;
@@ -386,7 +390,7 @@ class OnChangeBinding extends TargetUpdateBinding {
         const context = (observer as any).context;
         this.updateTarget(
             target,
-            this.directive.target!,
+            this.directive.targetAspect!,
             observer.observe(source, context!),
             source,
             context
@@ -412,20 +416,24 @@ type FASTEventSource = Node & {
 class EventListener extends BindingBase {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
-        const target = targets[directive.targetId] as FASTEventSource;
+        const target = targets[directive.nodeId] as FASTEventSource;
         target.$fastSource = source;
         target.$fastContext = context;
-        target.addEventListener(directive.target!, this, directive.options);
+        target.addEventListener(directive.targetAspect!, this, directive.options);
     }
 
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        this.removeEventListener(targets[this.directive.targetId] as FASTEventSource);
+        this.removeEventListener(targets[this.directive.nodeId] as FASTEventSource);
     }
 
     protected removeEventListener(target: FASTEventSource): void {
         target.$fastSource = null;
         target.$fastContext = null;
-        target.removeEventListener(this.directive.target!, this, this.directive.options);
+        target.removeEventListener(
+            this.directive.targetAspect!,
+            this,
+            this.directive.options
+        );
     }
 
     handleEvent(event: Event): void {
@@ -502,73 +510,39 @@ const createInnerHTMLBinding = globalThis.TrustedHTML
 /**
  * @internal
  */
-export class HTMLBindingDirective extends AspectedHTMLDirective {
+export class HTMLBindingDirective
+    implements HTMLDirective, ViewBehaviorFactory, Aspected {
     private factory: BindingBehaviorFactory | null = null;
 
-    public readonly source: string = "";
-    public readonly target: string = "";
-    public readonly aspect: Aspect = Aspect.content;
+    id: string;
+    nodeId: string;
+    sourceAspect: string;
+    targetAspect: string;
+    aspectType: number;
 
-    public constructor(
-        public binding: Binding,
-        public mode: BindingMode,
-        public options: any
-    ) {
-        super();
+    constructor(public binding: Binding, public mode: BindingMode, public options: any) {
+        this.aspectType = Aspect.content;
     }
 
-    public captureSource(value: string): void {
-        (this as Mutable<this>).source = value;
-
-        if (!value) {
-            return;
-        }
-
-        switch (value[0]) {
-            case ":":
-                (this as Mutable<this>).target = value.substring(1);
-                switch (this.target) {
-                    case "innerHTML":
-                        this.binding = createInnerHTMLBinding(this.binding);
-                        (this as Mutable<this>).aspect = Aspect.property;
-                        break;
-                    case "classList":
-                        (this as Mutable<this>).aspect = Aspect.tokenList;
-                        break;
-                    default:
-                        (this as Mutable<this>).aspect = Aspect.property;
-                        break;
-                }
-                break;
-            case "?":
-                (this as Mutable<this>).target = value.substring(1);
-                (this as Mutable<this>).aspect = Aspect.booleanAttribute;
-                break;
-            case "@":
-                (this as Mutable<this>).target = value.substring(1);
-                (this as Mutable<this>).aspect = Aspect.event;
-                break;
-            default:
-                if (value === "class") {
-                    (this as Mutable<this>).target = "className";
-                    (this as Mutable<this>).aspect = Aspect.property;
-                } else {
-                    (this as Mutable<this>).target = value;
-                    (this as Mutable<this>).aspect = Aspect.attribute;
-                }
-                break;
-        }
+    createHTML(add: AddViewBehaviorFactory): string {
+        return Markup.interpolation(add(this));
     }
 
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
         if (this.factory == null) {
-            this.factory = this.mode[this.aspect](this);
+            if (this.targetAspect === "innerHTML") {
+                this.binding = createInnerHTMLBinding(this.binding);
+            }
+
+            this.factory = this.mode[this.aspectType](this);
         }
 
         return this.factory.createBehavior(targets);
     }
 }
 
+HTMLDirective.define(HTMLBindingDirective, { aspected: true });
+
 /**
  * @alpha
  */
diff --git a/packages/web-components/fast-element/src/templating/children.spec.ts b/packages/web-components/fast-element/src/templating/children.spec.ts
index 390f2029825..a74dbbc8491 100644
--- a/packages/web-components/fast-element/src/templating/children.spec.ts
+++ b/packages/web-components/fast-element/src/templating/children.spec.ts
@@ -43,18 +43,18 @@ describe("The children", () => {
         function createDOM(elementName: string = "div") {
             const host = document.createElement("div");
             const children = createAndAppendChildren(host, elementName);
-            const targetId = 'r';
-            const targets = { [targetId]: host };
+            const nodeId = 'r';
+            const targets = { [nodeId]: host };
 
-            return { host, children, targets, targetId };
+            return { host, children, targets, nodeId };
         }
 
         it("gathers child nodes", () => {
-            const { host, children, targets, targetId } = createDOM();
+            const { host, children, targets, nodeId } = createDOM();
             const behavior = new ChildrenDirective({
                 property: "nodes",
             });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
             const model = new Model();
 
             behavior.bind(model, ExecutionContext.default, targets);
@@ -63,12 +63,12 @@ describe("The children", () => {
         });
 
         it("gathers child nodes with a filter", () => {
-            const { host, children, targets, targetId } = createDOM("foo-bar");
+            const { host, children, targets, nodeId } = createDOM("foo-bar");
             const behavior = new ChildrenDirective({
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
             const model = new Model();
 
             behavior.bind(model, ExecutionContext.default, targets);
@@ -77,11 +77,11 @@ describe("The children", () => {
         });
 
         it("updates child nodes when they change", async () => {
-            const { host, children, targets, targetId } = createDOM("foo-bar");
+            const { host, children, targets, nodeId } = createDOM("foo-bar");
             const behavior = new ChildrenDirective({
                 property: "nodes",
             });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
             const model = new Model();
 
             behavior.bind(model, ExecutionContext.default, targets);
@@ -96,12 +96,12 @@ describe("The children", () => {
         });
 
         it("updates child nodes when they change with a filter", async () => {
-            const { host, children, targets, targetId } = createDOM("foo-bar");
+            const { host, children, targets, nodeId } = createDOM("foo-bar");
             const behavior = new ChildrenDirective({
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
             const model = new Model();
 
             behavior.bind(model, ExecutionContext.default, targets);
@@ -116,7 +116,7 @@ describe("The children", () => {
         });
 
         it("updates subtree nodes when they change with a selector", async () => {
-            const { host, children, targets, targetId } = createDOM("foo-bar");
+            const { host, children, targets, nodeId } = createDOM("foo-bar");
             const subtreeElement = "foo-bar-baz";
             const subtreeChildren: HTMLElement[] = [];
 
@@ -133,7 +133,7 @@ describe("The children", () => {
                 subtree: true,
                 selector: subtreeElement,
             });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
 
             const model = new Model();
 
@@ -157,11 +157,11 @@ describe("The children", () => {
         });
 
         it("clears and unwatches when unbound", async () => {
-            const { host, children, targets, targetId } = createDOM("foo-bar");
+            const { host, children, targets, nodeId } = createDOM("foo-bar");
             const behavior = new ChildrenDirective({
                 property: "nodes",
             });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
             const model = new Model();
 
             behavior.bind(model, ExecutionContext.default, targets);
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index ba6d113bbbd..ea5767224e0 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -1,4 +1,5 @@
 import { isString } from "../interfaces.js";
+import { HTMLDirective } from "./html-directive.js";
 import { NodeBehaviorOptions, NodeObservationDirective } from "./node-observation.js";
 import type { CaptureType } from "./template.js";
 
@@ -59,8 +60,7 @@ export class ChildrenDirective extends NodeObservationDirective<
      */
     observe(target: any): void {
         const observer =
-            target[this.uniqueId] ??
-            (target[this.uniqueId] = new MutationObserver(this.handleEvent));
+            target[this.id] ?? (target[this.id] = new MutationObserver(this.handleEvent));
         observer.$fastTarget = target;
         observer.observe(target, this.options);
     }
@@ -70,7 +70,7 @@ export class ChildrenDirective extends NodeObservationDirective<
      * @param target - The target to unobserve.
      */
     disconnect(target: any): void {
-        const observer = target[this.uniqueId];
+        const observer = target[this.id];
         observer.$fastTarget = null;
         observer.disconnect();
     }
@@ -94,6 +94,8 @@ export class ChildrenDirective extends NodeObservationDirective<
     };
 }
 
+HTMLDirective.define(ChildrenDirective);
+
 /**
  * A directive that observes the `childNodes` of an element and updates a property
  * whenever they change.
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index 9ed9da516d1..ddc8dea5219 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -22,11 +22,24 @@ interface CompilationResultInternals {
 
 describe("The template compiler", () => {
     function compile(html: string, directives: HTMLDirective[]) {
-        return Compiler.compile(html, directives) as any as CompilationResultInternals;
+        const factories: Record<string, ViewBehaviorFactory> = Object.create(null);
+        const ids: string[] = [];
+        let nextId = -1;
+        const add = (factory: ViewBehaviorFactory): string => {
+            const id = `${++nextId}`;
+            ids.push(id);
+            factory.id = id;
+            factories[id] = factory;
+            return id;
+        };
+
+        directives.forEach(x => x.createHTML(add));
+
+        return Compiler.compile(html, factories) as any as CompilationResultInternals;
     }
 
     function inline(index: number) {
-        return Markup.interpolation(index);
+        return Markup.interpolation(`${index}`);
     }
 
     function binding(result = "result") {
@@ -176,7 +189,7 @@ describe("The template compiler", () => {
                     expect(length).to.equal(x.targetIds.length);
 
                     for (let i = 0; i < length; ++i) {
-                        expect(factories[i].targetId).to.equal(
+                        expect(factories[i].nodeId).to.equal(
                             x.targetIds[i]
                         );
                     }
@@ -344,7 +357,7 @@ describe("The template compiler", () => {
                     expect(length).to.equal(x.targetIds.length);
 
                     for (let i = 0; i < length; ++i) {
-                        expect(factories[i].targetId).to.equal(
+                        expect(factories[i].nodeId).to.equal(
                             x.targetIds[i]
                         );
                     }
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index c0eef87ec3a..da7fc347e56 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -2,12 +2,8 @@ import { isString, Message, TrustedTypesPolicy } from "../interfaces.js";
 import type { ExecutionContext } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { Parser } from "./markup.js";
-import { bind, oneTime } from "./binding.js";
-import type {
-    AspectedHTMLDirective,
-    HTMLDirective,
-    ViewBehaviorFactory,
-} from "./html-directive.js";
+import { bind, HTMLBindingDirective, oneTime } from "./binding.js";
+import { Aspect, Aspected, ViewBehaviorFactory } from "./html-directive.js";
 import type { HTMLTemplateCompilationResult as TemplateCompilationResult } from "./template.js";
 import { HTMLView } from "./view.js";
 
@@ -32,27 +28,27 @@ class CompilationContext<
     TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
 > implements TemplateCompilationResult<TSource, TParent, TContext> {
     private proto: any = null;
-    private targetIds = new Set<string>();
+    private nodeIds = new Set<string>();
     private descriptors: PropertyDescriptorMap = {};
     public readonly factories: ViewBehaviorFactory[] = [];
 
     constructor(
         public readonly fragment: DocumentFragment,
-        public readonly directives: ReadonlyArray<HTMLDirective>
+        public readonly directives: Record<string, ViewBehaviorFactory>
     ) {}
 
     public addFactory(
         factory: ViewBehaviorFactory,
         parentId: string,
-        targetId: string,
+        nodeId: string,
         targetIndex: number
     ): void {
-        if (!this.targetIds.has(targetId)) {
-            this.targetIds.add(targetId);
-            this.addTargetDescriptor(parentId, targetId, targetIndex);
+        if (!this.nodeIds.has(nodeId)) {
+            this.nodeIds.add(nodeId);
+            this.addTargetDescriptor(parentId, nodeId, targetIndex);
         }
 
-        factory.targetId = targetId;
+        factory.nodeId = nodeId;
         this.factories.push(factory);
     }
 
@@ -108,7 +104,7 @@ class CompilationContext<
         targets.r = fragment;
         targets.h = hostBindingTarget ?? fragment;
 
-        for (const id of this.targetIds) {
+        for (const id of this.nodeIds) {
             targets[id]; // trigger locator
         }
 
@@ -131,12 +127,12 @@ function compileAttributes(
         const attr = attributes[i];
         const attrValue = attr.value;
         const parseResult = Parser.parse(attrValue, directives);
-        let result: HTMLDirective | null = null;
+        let result: ViewBehaviorFactory | null = null;
 
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = bind(() => attrValue, oneTime) as AspectedHTMLDirective;
-                (result as AspectedHTMLDirective).captureSource(attr.name);
+                result = bind(() => attrValue, oneTime) as ViewBehaviorFactory;
+                Aspect.assign((result as any) as Aspected, attr.name);
             }
         } else {
             /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
@@ -246,7 +242,7 @@ function compileNode(
     return next;
 }
 
-function isMarker(node: Node, directives: ReadonlyArray<HTMLDirective>): boolean {
+function isMarker(node: Node, directives: Record<string, ViewBehaviorFactory>): boolean {
     return (
         node &&
         node.nodeType == 8 &&
@@ -265,9 +261,9 @@ export type CompilationStrategy = (
      */
     html: string | HTMLTemplateElement,
     /**
-     * The directives used within the html that is being compiled.
+     * The behavior factories used within the html that is being compiled.
      */
-    directives: readonly HTMLDirective[]
+    factories: Record<string, ViewBehaviorFactory>
 ) => TemplateCompilationResult;
 
 const templateTag = "TEMPLATE";
@@ -313,7 +309,7 @@ export const Compiler = {
         TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
     >(
         html: string | HTMLTemplateElement,
-        directives: ReadonlyArray<HTMLDirective>
+        directives: Record<string, ViewBehaviorFactory>
     ): TemplateCompilationResult<TSource, TParent, TContext> {
         let template: HTMLTemplateElement;
 
@@ -347,7 +343,7 @@ export const Compiler = {
             // Or if there is only one node and a directive, it means the template's content
             // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
             // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
-            (fragment.childNodes.length === 1 && directives.length)
+            (fragment.childNodes.length === 1 && Object.keys(directives).length > 0)
         ) {
             fragment.insertBefore(document.createComment(""), fragment.firstChild);
         }
@@ -372,20 +368,20 @@ export const Compiler = {
      * directives.
      * @returns A single inline directive that aggregates the behavior of all the parts.
      */
-    aggregate(parts: (string | HTMLDirective)[]): HTMLDirective {
+    aggregate(parts: (string | ViewBehaviorFactory)[]): ViewBehaviorFactory {
         if (parts.length === 1) {
-            return parts[0] as HTMLDirective;
+            return parts[0] as ViewBehaviorFactory;
         }
 
-        let source: string | undefined;
+        let sourceAspect: string | undefined;
         const partCount = parts.length;
-        const finalParts = parts.map((x: string | AspectedHTMLDirective) => {
+        const finalParts = parts.map((x: string | ViewBehaviorFactory) => {
             if (isString(x)) {
                 return (): string => x;
             }
 
-            source = x.source || source;
-            return x.binding!;
+            sourceAspect = ((x as any) as Aspected).sourceAspect || sourceAspect;
+            return ((x as any) as Aspected).binding!;
         });
 
         const binding = (scope: unknown, context: ExecutionContext): string => {
@@ -398,8 +394,8 @@ export const Compiler = {
             return output;
         };
 
-        const directive = bind(binding) as AspectedHTMLDirective;
-        directive.captureSource(source!);
+        const directive = bind(binding) as HTMLBindingDirective;
+        Aspect.assign(directive, sourceAspect!);
         return directive;
     },
 };
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index a79ee2f0482..918eb7e1b17 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -1,6 +1,8 @@
+import type { Constructable, Mutable } from "../interfaces.js";
 import type { Behavior } from "../observation/behavior.js";
 import type { Binding, ExecutionContext } from "../observation/observable.js";
-import { Markup, nextId } from "./markup.js";
+import { createTypeRegistry } from "../platform.js";
+import { Markup } from "./markup.js";
 
 /**
  * The target nodes available to a behavior.
@@ -46,130 +48,233 @@ export interface ViewBehavior<TSource = any, TParent = any> {
  * @public
  */
 export interface ViewBehaviorFactory {
+    /**
+     * The unique id of the factory.
+     */
+    id: string;
+
     /**
      * The structural id of the DOM node to which the created behavior will apply.
      */
-    targetId: string;
+    nodeId: string;
 
     /**
      * Creates a behavior.
-     * @param target - The targets available for behaviors to be attached to.
+     * @param targets - The targets available for behaviors to be attached to.
      */
     createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
 }
 
+/**
+ * Used to add behavior factories when constructing templates.
+ * @public
+ */
+export type AddViewBehaviorFactory = (factory: ViewBehaviorFactory) => string;
+
 /**
  * Instructs the template engine to apply behavior to a node.
  * @public
  */
-export abstract class HTMLDirective implements ViewBehaviorFactory {
+export interface HTMLDirective {
     /**
-     * The structural id of the directive based on the DOM node
-     * that it applies to.
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
      */
-    public targetId: string = "h";
+    createHTML(add: AddViewBehaviorFactory): string;
+}
 
+/**
+ * Represents metadata configuration for an HTMLDirective.
+ * @public
+ */
+export interface PartialHTMLDirectiveDefinition {
     /**
-     * The unique id of the directive instance.
+     * Indicates whether the directive needs access to template contextual information
+     * such as the sourceAspect, targetAspect, and aspectType.
      */
-    public readonly uniqueId: string = nextId();
+    aspected?: boolean;
+}
 
+/**
+ * Defines metadata for an HTMLDirective.
+ * @public
+ */
+export interface HTMLDirectiveDefinition<
+    TType extends Constructable<HTMLDirective> = Constructable<HTMLDirective>
+> extends Required<PartialHTMLDirectiveDefinition> {
     /**
-     * Creates a placeholder string based on the directive's index within the template.
-     * @param index - The index of the directive within the template.
+     * The type that the definition provides metadata for.
      */
-    public abstract createPlaceholder(index: number): string;
+    readonly type: TType;
+}
 
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    public abstract createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
+const registry = createTypeRegistry<HTMLDirectiveDefinition>();
+
+/**
+ * Instructs the template engine to apply behavior to a node.
+ * @public
+ */
+export const HTMLDirective = Object.freeze({
+    getForInstance: registry.getForInstance,
+    getByType: registry.getByType,
+    define<TType extends Constructable<HTMLDirective>>(
+        type: TType,
+        options?: PartialHTMLDirectiveDefinition
+    ): TType {
+        options = options || {};
+        (options as Mutable<HTMLDirectiveDefinition>).type = type;
+        registry.register(options as HTMLDirectiveDefinition);
+        return type;
+    },
+});
+
+/**
+ * Decorator: Defines an HTMLDirective.
+ * @param options - Provides options that specify the directives application.
+ * @public
+ */
+export function htmlDirective(options?: PartialHTMLDirectiveDefinition) {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type: Constructable<HTMLDirective>) {
+        HTMLDirective.define(type, options);
+    };
 }
 
 /**
  * The type of HTML aspect to target.
  * @public
  */
-export enum Aspect {
+export const Aspect = Object.freeze({
+    /**
+     * Not aspected.
+     */
+    none: 0,
+
     /**
      * An attribute.
      */
-    attribute = 0,
+    attribute: 1,
+
     /**
      * A boolean attribute.
      */
-    booleanAttribute = 1,
+    booleanAttribute: 2,
+
     /**
      * A property.
      */
-    property = 2,
+    property: 3,
+
     /**
      * Content
      */
-    content = 3,
+    content: 4,
+
     /**
      * A token list.
      */
-    tokenList = 4,
+    tokenList: 5,
+
     /**
      * An event.
      */
-    event = 5,
-}
+    event: 6,
+
+    /**
+     *
+     * @param directive - The directive to assign the aspect to.
+     * @param value - The value to base the aspect determination on.
+     */
+    assign(directive: Aspected, value: string): void {
+        directive.sourceAspect = value;
+
+        if (!value) {
+            return;
+        }
+
+        switch (value[0]) {
+            case ":":
+                directive.targetAspect = value.substring(1);
+                switch (directive.targetAspect) {
+                    case "innerHTML":
+                        directive.aspectType = Aspect.property;
+                        break;
+                    case "classList":
+                        directive.aspectType = Aspect.tokenList;
+                        break;
+                    default:
+                        directive.aspectType = Aspect.property;
+                        break;
+                }
+                break;
+            case "?":
+                directive.targetAspect = value.substring(1);
+                directive.aspectType = Aspect.booleanAttribute;
+                break;
+            case "@":
+                directive.targetAspect = value.substring(1);
+                directive.aspectType = Aspect.event;
+                break;
+            default:
+                if (value === "class") {
+                    directive.targetAspect = "className";
+                    directive.aspectType = Aspect.property;
+                } else {
+                    directive.targetAspect = value;
+                    directive.aspectType = Aspect.attribute;
+                }
+                break;
+        }
+    },
+});
 
 /**
- * A {@link HTMLDirective} that targets a particular aspect
- * (attribute, property, event, etc.) of a node.
+ * Represents something that applies to a specific aspect of the DOM.
  * @public
  */
-export abstract class AspectedHTMLDirective extends HTMLDirective {
+export interface Aspected {
     /**
-     * The original source aspect exactly as represented in the HTML.
+     * The original source aspect exactly as represented in markup.
      */
-    abstract readonly source: string;
+    sourceAspect: string;
 
     /**
      * The evaluated target aspect, determined after processing the source.
      */
-    abstract readonly target: string;
+    targetAspect: string;
 
     /**
      * The type of aspect to target.
      */
-    abstract readonly aspect: Aspect;
+    aspectType: number;
 
     /**
-     * A binding to apply to the target, if applicable.
+     * A binding if one is associated with the aspect.
      */
-    abstract readonly binding?: Binding;
+    binding?: Binding;
+}
 
+/**
+ * A base class used for attribute directives that don't need internal state.
+ * @public
+ */
+export abstract class StatelessAttachedAttributeDirective<T>
+    implements HTMLDirective, ViewBehaviorFactory, ViewBehavior {
     /**
-     * Captures the original source aspect from HTML.
-     * @param source - The original source aspect.
+     * The unique id of the factory.
      */
-    abstract captureSource(source: string): void;
+    id: string;
 
     /**
-     * Creates a placeholder string based on the directive's index within the template.
-     * @param index - The index of the directive within the template.
+     * The structural id of the DOM node to which the created behavior will apply.
      */
-    public createPlaceholder: (index: number) => string = Markup.interpolation;
-}
+    nodeId: string;
 
-/**
- * A base class used for attribute directives that don't need internal state.
- * @public
- */
-export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirective
-    implements ViewBehavior {
     /**
      * Creates an instance of RefDirective.
      * @param options - The options to use in configuring the directive.
      */
-    public constructor(protected options: T) {
-        super();
-    }
+    public constructor(protected options: T) {}
 
     /**
      * Creates a behavior.
@@ -185,7 +290,9 @@ export abstract class StatelessAttachedAttributeDirective<T> extends HTMLDirecti
      * @remarks
      * Creates a custom attribute placeholder.
      */
-    public createPlaceholder: (index: number) => string = Markup.attribute;
+    public createHTML(add: AddViewBehaviorFactory): string {
+        return Markup.attribute(add(this));
+    }
 
     /**
      * Bind this behavior to the source.
diff --git a/packages/web-components/fast-element/src/templating/markup.ts b/packages/web-components/fast-element/src/templating/markup.ts
index 71a5b2148ac..34385a9c041 100644
--- a/packages/web-components/fast-element/src/templating/markup.ts
+++ b/packages/web-components/fast-element/src/templating/markup.ts
@@ -1,4 +1,4 @@
-import type { HTMLDirective } from "./html-directive.js";
+import type { ViewBehaviorFactory } from "./html-directive.js";
 
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 const interpolationStart = `${marker}{`;
@@ -22,7 +22,7 @@ export const Markup = Object.freeze({
      * @remarks
      * Used internally by binding directives.
      */
-    interpolation: (index: number) => `${interpolationStart}${index}${interpolationEnd}`,
+    interpolation: (id: string) => `${interpolationStart}${id}${interpolationEnd}`,
 
     /**
      * Creates a placeholder that manifests itself as an attribute on an
@@ -32,8 +32,8 @@ export const Markup = Object.freeze({
      * @remarks
      * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
      */
-    attribute: (index: number) =>
-        `${nextId()}="${interpolationStart}${index}${interpolationEnd}"`,
+    attribute: (id: string) =>
+        `${nextId()}="${interpolationStart}${id}${interpolationEnd}"`,
 
     /**
      * Creates a placeholder that manifests itself as a marker within the DOM structure.
@@ -41,7 +41,7 @@ export const Markup = Object.freeze({
      * @remarks
      * Used internally by structural directives such as `repeat`.
      */
-    comment: (index: number) => `<!--${interpolationStart}${index}${interpolationEnd}-->`,
+    comment: (id: string) => `<!--${interpolationStart}${id}${interpolationEnd}-->`,
 });
 
 /**
@@ -53,32 +53,32 @@ export const Parser = Object.freeze({
      * Parses text content or HTML attribute content, separating out the static strings
      * from the directives.
      * @param value - The content or attribute string to parse.
-     * @param directives - A list of directives to search for in the string.
+     * @param factories - A list of directives to search for in the string.
      * @returns A heterogeneous array of static strings interspersed with
      * directives or null if no directives are found in the string.
      */
     parse(
         value: string,
-        directives: readonly HTMLDirective[]
-    ): (string | HTMLDirective)[] | null {
+        factories: Record<string, ViewBehaviorFactory>
+    ): (string | ViewBehaviorFactory)[] | null {
         const parts = value.split(interpolationStart);
 
         if (parts.length === 1) {
             return null;
         }
 
-        const result: (string | HTMLDirective)[] = [];
+        const result: (string | ViewBehaviorFactory)[] = [];
 
         for (let i = 0, ii = parts.length; i < ii; ++i) {
             const current = parts[i];
             const index = current.indexOf(interpolationEnd);
-            let literal: string | HTMLDirective;
+            let literal: string | ViewBehaviorFactory;
 
             if (index === -1) {
                 literal = current;
             } else {
-                const directiveIndex = parseInt(current.substring(0, index));
-                result.push(directives[directiveIndex]);
+                const factoryId = current.substring(0, index);
+                result.push(factories[factoryId]);
                 literal = current.substring(index + interpolationEndLength);
             }
 
diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index 189e4f56107..7951388f783 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -58,7 +58,7 @@ export abstract class NodeObservationDirective<
      * @param targets - The targets that behaviors in a view can attach to.
      */
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        const target = targets[this.targetId] as any;
+        const target = targets[this.nodeId] as any;
         target.$fastSource = source;
         this.updateTarget(source, this.computeNodes(target));
         this.observe(target);
@@ -71,7 +71,7 @@ export abstract class NodeObservationDirective<
      * @param targets - The targets that behaviors in a view can attach to.
      */
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        const target = targets[this.targetId] as any;
+        const target = targets[this.nodeId] as any;
         this.updateTarget(source, emptyArray);
         this.disconnect(target);
         target.$fastSource = null;
diff --git a/packages/web-components/fast-element/src/templating/ref.ts b/packages/web-components/fast-element/src/templating/ref.ts
index af0b647077a..9bb6d5ccdc0 100644
--- a/packages/web-components/fast-element/src/templating/ref.ts
+++ b/packages/web-components/fast-element/src/templating/ref.ts
@@ -1,5 +1,6 @@
 import type { ExecutionContext } from "../observation/observable.js";
 import {
+    HTMLDirective,
     StatelessAttachedAttributeDirective,
     ViewBehaviorTargets,
 } from "./html-directive.js";
@@ -21,7 +22,7 @@ export class RefDirective extends StatelessAttachedAttributeDirective<string> {
         context: ExecutionContext,
         targets: ViewBehaviorTargets
     ): void {
-        source[this.options] = targets[this.targetId];
+        source[this.options] = targets[this.nodeId];
     }
 
     /**
@@ -32,6 +33,8 @@ export class RefDirective extends StatelessAttachedAttributeDirective<string> {
     public unbind(): void {}
 }
 
+HTMLDirective.define(RefDirective);
+
 /**
  * A directive that observes the updates a property with a reference to the element.
  * @param propertyName - The name of the property to assign the reference to.
diff --git a/packages/web-components/fast-element/src/templating/repeat.spec.ts b/packages/web-components/fast-element/src/templating/repeat.spec.ts
index fd0a11afe60..653b33f930e 100644
--- a/packages/web-components/fast-element/src/templating/repeat.spec.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.spec.ts
@@ -9,12 +9,12 @@ describe("The repeat", () => {
     function createLocation() {
         const parent = document.createElement("div");
         const location = document.createComment("");
-        const targetId = 'r';
-        const targets = { [targetId]: location };
+        const nodeId = 'r';
+        const targets = { [nodeId]: location };
 
         parent.appendChild(location);
 
-        return { parent, targets, targetId };
+        return { parent, targets, nodeId };
     }
 
     context("template function", () => {
@@ -29,12 +29,12 @@ describe("The repeat", () => {
 
     context("directive", () => {
         it("creates a RepeatBehavior", () => {
-            const { parent, targets, targetId } = createLocation();
+            const { targets, nodeId } = createLocation();
             const directive = repeat(
                 () => [],
                 html`test`
             ) as RepeatDirective;
-            directive.targetId = targetId;
+            directive.nodeId = nodeId;
 
             const behavior = directive.createBehavior(targets);
 
@@ -97,12 +97,12 @@ describe("The repeat", () => {
 
         zeroThroughTen.forEach(size => {
             it(`renders a template for each item in array of size ${size}`, () => {
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
 
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
@@ -115,12 +115,12 @@ describe("The repeat", () => {
 
         zeroThroughTen.forEach(size => {
             it(`renders empty when an array of size ${size} is replaced with an empty array`, async () => {
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     wrappedItemTemplate
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
                 const behavior = directive.createBehavior(targets);
                 const data = new ViewModel(size);
 
@@ -148,12 +148,12 @@ describe("The repeat", () => {
 
         zeroThroughTen.forEach(size => {
             it(`updates rendered HTML when a new item is pushed into an array of size ${size}`, async () => {
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
@@ -168,12 +168,12 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`updates rendered HTML when a single item is spliced from the end of an array of size ${size}`, async () => {
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
@@ -192,12 +192,12 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`updates rendered HTML when a single item is spliced from the beginning of an array of size ${size}`, async () => {
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
@@ -213,12 +213,12 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`updates rendered HTML when a single item is replaced from the end of an array of size ${size}`, async () => {
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
@@ -237,12 +237,12 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`updates rendered HTML when a single item is replaced from the beginning of an array of size ${size}`, async () => {
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
@@ -260,12 +260,12 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`updates all when the template changes for an array of size ${size}`, async () => {
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     x => vm.template
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
@@ -290,12 +290,12 @@ describe("The repeat", () => {
                     )}
                 `;
 
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     deepItemTemplate
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size, true);
 
@@ -312,12 +312,12 @@ describe("The repeat", () => {
 
         oneThroughTen.forEach(size => {
             it(`handles back to back shift operations for arrays of size ${size}`, async () => {
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
@@ -336,12 +336,12 @@ describe("The repeat", () => {
 
         zeroThroughTen.forEach(size => {
             it(`updates rendered HTML when a new item is pushed into an array of size ${size} after it has been unbound and rebound`, async () => {
-                const { parent, targets, targetId } = createLocation();
+                const { parent, targets, nodeId } = createLocation();
                 const directive = repeat<ViewModel>(
                     x => x.items,
                     itemTemplate
                 ) as RepeatDirective;
-                directive.targetId = targetId;
+                directive.nodeId = nodeId;
                 const behavior = directive.createBehavior(targets);
                 const vm = new ViewModel(size);
 
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index 749cd6f22a4..ab2bcb349ee 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -14,7 +14,12 @@ import {
 } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
 import { Markup } from "./markup.js";
-import { HTMLDirective, ViewBehaviorTargets } from "./html-directive.js";
+import {
+    AddViewBehaviorFactory,
+    HTMLDirective,
+    ViewBehaviorFactory,
+    ViewBehaviorTargets,
+} from "./html-directive.js";
 import type {
     CaptureType,
     ChildViewTemplate,
@@ -294,15 +299,28 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
  * A directive that configures list rendering.
  * @public
  */
-export class RepeatDirective<TSource = any> extends HTMLDirective {
+export class RepeatDirective<TSource = any>
+    implements HTMLDirective, ViewBehaviorFactory {
     private isItemsBindingVolatile: boolean;
     private isTemplateBindingVolatile: boolean;
 
+    /**
+     * The unique id of the factory.
+     */
+    id: string;
+
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    nodeId: string;
+
     /**
      * Creates a placeholder string based on the directive's index within the template.
      * @param index - The index of the directive within the template.
      */
-    public createPlaceholder: (index: number) => string = Markup.comment;
+    public createHTML(add: AddViewBehaviorFactory): string {
+        return Markup.comment(add(this));
+    }
 
     /**
      * Creates an instance of RepeatDirective.
@@ -315,7 +333,6 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
         public readonly templateBinding: Binding<TSource, SyntheticViewTemplate>,
         public readonly options: RepeatOptions
     ) {
-        super();
         enableArrayObservation();
         this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);
         this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
@@ -327,7 +344,7 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
      */
     public createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource> {
         return new RepeatBehavior<TSource>(
-            targets[this.targetId],
+            targets[this.nodeId],
             this.itemsBinding,
             this.isItemsBindingVolatile,
             this.templateBinding,
@@ -337,6 +354,8 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
     }
 }
 
+HTMLDirective.define(RepeatDirective);
+
 /**
  * A directive that enables list rendering.
  * @param itemsBinding - The array to render.
diff --git a/packages/web-components/fast-element/src/templating/slotted.spec.ts b/packages/web-components/fast-element/src/templating/slotted.spec.ts
index 89149e53c73..ccdec09d260 100644
--- a/packages/web-components/fast-element/src/templating/slotted.spec.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.spec.ts
@@ -14,11 +14,11 @@ describe("The slotted", () => {
 
     context("directive", () => {
         it("creates a behavior by returning itself", () => {
-            const targetId = 'r';
+            const nodeId = 'r';
             const directive = slotted("test") as SlottedDirective;
-            directive.targetId = targetId;
+            directive.nodeId = nodeId;
             const target = document.createElement("slot");
-            const targets = { [targetId]: target }
+            const targets = { [nodeId]: target }
             const behavior = directive.createBehavior(targets);
 
             expect(behavior).to.equal(directive);
@@ -47,18 +47,18 @@ describe("The slotted", () => {
             const slot = document.createElement("slot");
             const shadowRoot = host.attachShadow({ mode: "open" });
             const children = createAndAppendChildren(host, elementName);
-            const targetId = 'r';
-            const targets = { [targetId]: slot };
+            const nodeId = 'r';
+            const targets = { [nodeId]: slot };
 
             shadowRoot.appendChild(slot);
 
-            return { host, slot, children, targets, targetId };
+            return { host, slot, children, targets, nodeId };
         }
 
         it("gathers nodes from a slot", () => {
-            const { children, targets, targetId } = createDOM();
+            const { children, targets, nodeId } = createDOM();
             const behavior = new SlottedDirective({ property: "nodes" });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
             const model = new Model();
 
             behavior.bind(model, ExecutionContext.default, targets);
@@ -67,12 +67,12 @@ describe("The slotted", () => {
         });
 
         it("gathers nodes from a slot with a filter", () => {
-            const { targets, targetId, children } = createDOM("foo-bar");
+            const { targets, nodeId, children } = createDOM("foo-bar");
             const behavior = new SlottedDirective({
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
             const model = new Model();
 
             behavior.bind(model, ExecutionContext.default, targets);
@@ -81,9 +81,9 @@ describe("The slotted", () => {
         });
 
         it("updates when slotted nodes change", async () => {
-            const { host, slot, children, targets, targetId } = createDOM("foo-bar");
+            const { host, slot, children, targets, nodeId } = createDOM("foo-bar");
             const behavior = new SlottedDirective({ property: "nodes" });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
             const model = new Model();
 
             behavior.bind(model, ExecutionContext.default, targets);
@@ -98,12 +98,12 @@ describe("The slotted", () => {
         });
 
         it("updates when slotted nodes change with a filter", async () => {
-            const { host, slot, children, targets, targetId } = createDOM("foo-bar");
+            const { host, slot, children, targets, nodeId } = createDOM("foo-bar");
             const behavior = new SlottedDirective({
                 property: "nodes",
                 filter: elements("foo-bar"),
             });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
             const model = new Model();
 
             behavior.bind(model, ExecutionContext.default, targets);
@@ -118,9 +118,9 @@ describe("The slotted", () => {
         });
 
         it("clears and unwatches when unbound", async () => {
-            const { host, slot, children, targets, targetId } = createDOM("foo-bar");
+            const { host, slot, children, targets, nodeId } = createDOM("foo-bar");
             const behavior = new SlottedDirective({ property: "nodes" });
-            behavior.targetId = targetId;
+            behavior.nodeId = nodeId;
             const model = new Model();
 
             behavior.bind(model, ExecutionContext.default, targets);
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index 9c2a697d749..14436f36829 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -1,4 +1,5 @@
 import { isString } from "../interfaces.js";
+import { HTMLDirective } from "./html-directive.js";
 import { NodeBehaviorOptions, NodeObservationDirective } from "./node-observation.js";
 import type { CaptureType } from "./template.js";
 
@@ -49,6 +50,8 @@ export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveO
     }
 }
 
+HTMLDirective.define(SlottedDirective);
+
 /**
  * A directive that observes the `assignedNodes()` of a slot and updates a property
  * whenever they change.
diff --git a/packages/web-components/fast-element/src/templating/template.spec.ts b/packages/web-components/fast-element/src/templating/template.spec.ts
index 3a950fbc214..ac766ddaaff 100644
--- a/packages/web-components/fast-element/src/templating/template.spec.ts
+++ b/packages/web-components/fast-element/src/templating/template.spec.ts
@@ -1,9 +1,11 @@
 import { expect } from "chai";
 import { html, ViewTemplate } from "./template";
-import { Markup } from "./markup";
+import { Markup, Parser } from "./markup";
 import { HTMLBindingDirective } from "./binding";
-import { AspectedHTMLDirective, Aspect, HTMLDirective } from "./html-directive";
-import { bind, Binding, ViewBehaviorTargets } from "..";
+import { Aspect, HTMLDirective, ViewBehaviorFactory, Aspected, htmlDirective, AddViewBehaviorFactory } from "./html-directive";
+import { bind, ViewBehaviorTargets } from "..";
+import { Constructable, isString } from "../interfaces";
+import { ExecutionContext } from "../observation/observable";
 
 describe(`The html tag template helper`, () => {
     it(`transforms a string into a ViewTemplate.`, () => {
@@ -11,13 +13,17 @@ describe(`The html tag template helper`, () => {
         expect(template).instanceOf(ViewTemplate);
     });
 
-    class TestDirective extends HTMLDirective {
+    @htmlDirective()
+    class TestDirective implements HTMLDirective, ViewBehaviorFactory {
+        id: string;
+        nodeId: string;
+
         createBehavior() {
             return {} as any;
         }
 
-        createPlaceholder(index: number) {
-            return Markup.comment(index);
+        createHTML(add: AddViewBehaviorFactory) {
+            return Markup.comment(add(this));
         }
     }
 
@@ -26,6 +32,28 @@ describe(`The html tag template helper`, () => {
         doSomething() {}
     }
 
+    const FAKE = {
+        comment: Markup.comment("0"),
+        interpolation: Markup.interpolation("0")
+    };
+
+    function expectTemplateEquals(template: ViewTemplate, expectedHTML: string) {
+        expect(template).instanceOf(ViewTemplate);
+
+        const parts = Parser.parse(template.html as string, {})!;
+
+        if (parts !== null) {
+            const result = parts.reduce((a, b) => isString(b)
+                ? a + b
+                : a + Markup.interpolation("0")
+            , "");
+
+            expect(result).to.equal(expectedHTML);
+        } else {
+            expect(template.html).to.equal(expectedHTML);
+        }
+    }
+
     const stringValue = "string value";
     const numberValue = 42;
     const interpolationScenarios = [
@@ -53,40 +81,40 @@ describe(`The html tag template helper`, () => {
             type: "number",
             location: "at the beginning",
             template: html`${numberValue} end`,
-            result: `${Markup.interpolation(0)} end`,
+            result: `${FAKE.interpolation} end`,
         },
         {
             type: "number",
             location: "in the middle",
             template: html`beginning ${numberValue} end`,
-            result: `beginning ${Markup.interpolation(0)} end`,
+            result: `beginning ${FAKE.interpolation} end`,
         },
         {
             type: "number",
             location: "at the end",
             template: html`beginning ${numberValue}`,
-            result: `beginning ${Markup.interpolation(0)}`,
+            result: `beginning ${FAKE.interpolation}`,
         },
         // expression interpolation
         {
             type: "expression",
             location: "at the beginning",
             template: html<Model>`${x => x.value} end`,
-            result: `${Markup.interpolation(0)} end`,
+            result: `${FAKE.interpolation} end`,
             expectDirectives: [HTMLBindingDirective],
         },
         {
             type: "expression",
             location: "in the middle",
             template: html<Model>`beginning ${x => x.value} end`,
-            result: `beginning ${Markup.interpolation(0)} end`,
+            result: `beginning ${FAKE.interpolation} end`,
             expectDirectives: [HTMLBindingDirective],
         },
         {
             type: "expression",
             location: "at the end",
             template: html<Model>`beginning ${x => x.value}`,
-            result: `beginning ${Markup.interpolation(0)}`,
+            result: `beginning ${FAKE.interpolation}`,
             expectDirectives: [HTMLBindingDirective],
         },
         // directive interpolation
@@ -94,21 +122,21 @@ describe(`The html tag template helper`, () => {
             type: "directive",
             location: "at the beginning",
             template: html`${new TestDirective()} end`,
-            result: `${Markup.comment(0)} end`,
+            result: `${FAKE.comment} end`,
             expectDirectives: [TestDirective],
         },
         {
             type: "directive",
             location: "in the middle",
             template: html`beginning ${new TestDirective()} end`,
-            result: `beginning ${Markup.comment(0)} end`,
+            result: `beginning ${FAKE.comment} end`,
             expectDirectives: [TestDirective],
         },
         {
             type: "directive",
             location: "at the end",
             template: html`beginning ${new TestDirective()}`,
-            result: `beginning ${Markup.comment(0)}`,
+            result: `beginning ${FAKE.comment}`,
             expectDirectives: [TestDirective],
         },
         // template interpolation
@@ -116,21 +144,21 @@ describe(`The html tag template helper`, () => {
             type: "template",
             location: "at the beginning",
             template: html`${html`sub-template`} end`,
-            result: `${Markup.interpolation(0)} end`,
+            result: `${FAKE.interpolation} end`,
             expectDirectives: [HTMLBindingDirective],
         },
         {
             type: "template",
             location: "in the middle",
             template: html`beginning ${html`sub-template`} end`,
-            result: `beginning ${Markup.interpolation(0)} end`,
+            result: `beginning ${FAKE.interpolation} end`,
             expectDirectives: [HTMLBindingDirective],
         },
         {
             type: "template",
             location: "at the end",
             template: html`beginning ${html`sub-template`}`,
-            result: `beginning ${Markup.interpolation(0)}`,
+            result: `beginning ${FAKE.interpolation}`,
             expectDirectives: [HTMLBindingDirective],
         },
         // mixed interpolation
@@ -138,33 +166,21 @@ describe(`The html tag template helper`, () => {
             type: "mixed, back-to-back string, number, expression, and directive",
             location: "at the beginning",
             template: html<Model>`${stringValue}${numberValue}${x => x.value}${new TestDirective()} end`,
-            result: `${stringValue}${Markup.interpolation(
-                0
-            )}${Markup.interpolation(
-                1
-            )}${Markup.comment(2)} end`,
+            result: `${stringValue}${FAKE.interpolation}${FAKE.interpolation}${FAKE.comment} end`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
             type: "mixed, back-to-back string, number, expression, and directive",
             location: "in the middle",
             template: html<Model>`beginning ${stringValue}${numberValue}${x => x.value}${new TestDirective()} end`,
-            result: `beginning ${stringValue}${Markup.interpolation(
-                0
-            )}${Markup.interpolation(
-                1
-            )}${Markup.comment(2)} end`,
+            result: `beginning ${stringValue}${FAKE.interpolation}${FAKE.interpolation}${FAKE.comment} end`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
             type: "mixed, back-to-back string, number, expression, and directive",
             location: "at the end",
             template: html<Model>`beginning ${stringValue}${numberValue}${x => x.value}${new TestDirective()}`,
-            result: `beginning ${stringValue}${Markup.interpolation(
-                0
-            )}${Markup.interpolation(
-                1
-            )}${Markup.comment(2)}`,
+            result: `beginning ${stringValue}${FAKE.interpolation}${FAKE.interpolation}${FAKE.comment}`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
@@ -172,11 +188,7 @@ describe(`The html tag template helper`, () => {
             location: "at the beginning",
             template: html<Model>`${stringValue}separator${numberValue}separator${x =>
                     x.value}separator${new TestDirective()} end`,
-            result: `${stringValue}separator${Markup.interpolation(
-                0
-            )}separator${Markup.interpolation(
-                1
-            )}separator${Markup.comment(2)} end`,
+            result: `${stringValue}separator${FAKE.interpolation}separator${FAKE.interpolation}separator${FAKE.comment} end`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
@@ -184,11 +196,7 @@ describe(`The html tag template helper`, () => {
             location: "in the middle",
             template: html<Model>`beginning ${stringValue}separator${numberValue}separator${x =>
                     x.value}separator${new TestDirective()} end`,
-            result: `beginning ${stringValue}separator${Markup.interpolation(
-                0
-            )}separator${Markup.interpolation(
-                1
-            )}separator${Markup.comment(2)} end`,
+            result: `beginning ${stringValue}separator${FAKE.interpolation}separator${FAKE.interpolation}separator${FAKE.comment} end`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
         {
@@ -196,164 +204,319 @@ describe(`The html tag template helper`, () => {
             location: "at the end",
             template: html<Model>`beginning ${stringValue}separator${numberValue}separator${x =>
                     x.value}separator${new TestDirective()}`,
-            result: `beginning ${stringValue}separator${Markup.interpolation(
-                0
-            )}separator${Markup.interpolation(
-                1
-            )}separator${Markup.comment(2)}`,
+            result: `beginning ${stringValue}separator${FAKE.interpolation}separator${FAKE.interpolation}separator${FAKE.comment}`,
             expectDirectives: [HTMLBindingDirective, HTMLBindingDirective, TestDirective],
         },
     ];
 
     interpolationScenarios.forEach(x => {
         it(`inserts ${x.type} values ${x.location} of the html`, () => {
-            expect(x.template).instanceOf(ViewTemplate);
-            expect(x.template.html).to.equal(x.result);
+            expectTemplateEquals(x.template, x.result);
 
             if (x.expectDirectives) {
-                x.expectDirectives.forEach((type, index) => {
-                    const directive = x.template.directives[index];
+                x.expectDirectives.forEach(type => {
+                    let found = false;
 
-                    expect(directive).to.be.instanceOf(type);
+                    for (const id in x.template.factories) {
+                        const behaviorFactory = x.template.factories[id];
 
-                    if (directive instanceof HTMLBindingDirective) {
-                        expect(directive.aspect).to.equal(Aspect.content);
+                        if (behaviorFactory instanceof type) {
+                            found = true;
+
+                            if (behaviorFactory instanceof HTMLBindingDirective) {
+                                expect(behaviorFactory.aspectType).to.equal(Aspect.content);
+                            }
+                        }
+
+                        expect(behaviorFactory.id).equals(id);
                     }
+
+                    expect(found).to.be.true;
                 });
             }
         });
     });
 
+    function getFactory<T extends Constructable<ViewBehaviorFactory>>(
+        template: ViewTemplate,
+        type: T
+    ): InstanceType<T> | null {
+        for (const id in template.factories) {
+            const potential = template.factories[id];
+
+            if (potential instanceof type) {
+                return potential as any as InstanceType<T>;
+            }
+        }
+
+        return null;
+    }
+
+    function expectAspect<T extends Constructable<ViewBehaviorFactory>>(
+        template: ViewTemplate,
+        type: T,
+        sourceAspect: string,
+        targetAspect: string,
+        aspectType: number
+    ) {
+        const factory = getFactory(template, type) as ViewBehaviorFactory & Aspected;
+        expect(factory!).to.be.instanceOf(type);
+        expect(factory!.sourceAspect).to.equal(sourceAspect);
+        expect(factory!.targetAspect).to.equal(targetAspect);
+        expect(factory!.aspectType).to.equal(aspectType);
+    }
+
     it(`captures an attribute with an expression`, () => {
         const template = html<Model>`<my-element some-attribute=${x => x.value}></my-element>`;
-        const placeholder = Markup.interpolation(0);
-        const directive = template.directives[0] as HTMLBindingDirective;
 
-        expect(template.html).to.equal(
-            `<my-element some-attribute=${placeholder}></my-element>`
+        expectTemplateEquals(
+            template,
+            `<my-element some-attribute=${FAKE.interpolation}></my-element>`
         );
 
-        expect(directive).to.be.instanceOf(HTMLBindingDirective);
-        expect(directive.source).to.equal("some-attribute");
-        expect(directive.target).to.equal("some-attribute");
-        expect(directive.aspect).to.equal(Aspect.attribute);
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            "some-attribute",
+            "some-attribute",
+            Aspect.attribute
+        );
     });
 
     it(`captures an attribute with a binding`, () => {
         const template = html<Model>`<my-element some-attribute=${bind(x => x.value)}></my-element>`;
-        const placeholder = Markup.interpolation(0);
-        const directive = template.directives[0] as HTMLBindingDirective;
 
-        expect(template.html).to.equal(
-            `<my-element some-attribute=${placeholder}></my-element>`
+        expectTemplateEquals(
+            template,
+            `<my-element some-attribute=${FAKE.interpolation}></my-element>`
+        );
+
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            "some-attribute",
+            "some-attribute",
+            Aspect.attribute
+        );
+    });
+
+    it(`captures an attribute with an interpolated string`, () => {
+        const template = html<Model>`<my-element some-attribute=${stringValue}></my-element>`;
+
+        expectTemplateEquals(
+            template,
+            `<my-element some-attribute=${FAKE.interpolation}></my-element>`
+        );
+
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            "some-attribute",
+            "some-attribute",
+            Aspect.attribute
+        );
+
+        const factory = getFactory(template, HTMLBindingDirective);
+        expect(factory!.binding(null, ExecutionContext.default)).equals(stringValue);
+    });
+
+    it(`captures an attribute with an interpolated number`, () => {
+        const template = html<Model>`<my-element some-attribute=${numberValue}></my-element>`;
+
+        expectTemplateEquals(
+            template,
+            `<my-element some-attribute=${FAKE.interpolation}></my-element>`
+        );
+
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            "some-attribute",
+            "some-attribute",
+            Aspect.attribute
         );
 
-        expect(directive).to.be.instanceOf(HTMLBindingDirective);
-        expect(directive.source).to.equal("some-attribute");
-        expect(directive.target).to.equal("some-attribute");
-        expect(directive.aspect).to.equal(Aspect.attribute);
+        const factory = getFactory(template, HTMLBindingDirective);
+        expect(factory!.binding(null, ExecutionContext.default)).equals(numberValue);
     });
 
     it(`captures a boolean attribute with an expression`, () => {
         const template = html<Model>`<my-element ?some-attribute=${x => x.value}></my-element>`;
-        const placeholder = Markup.interpolation(0);
-        const directive = template.directives[0] as HTMLBindingDirective;
 
-        expect(template.html).to.equal(
-            `<my-element ?some-attribute=${placeholder}></my-element>`
+        expectTemplateEquals(
+            template,
+            `<my-element ?some-attribute=${FAKE.interpolation}></my-element>`
         );
 
-        expect(directive).to.be.instanceOf(HTMLBindingDirective);
-        expect(directive.source).to.equal("?some-attribute");
-        expect(directive.target).to.equal("some-attribute");
-        expect(directive.aspect).to.equal(Aspect.booleanAttribute);
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            "?some-attribute",
+            "some-attribute",
+            Aspect.booleanAttribute
+        );
     });
 
     it(`captures a boolean attribute with a binding`, () => {
         const template = html<Model>`<my-element ?some-attribute=${bind(x => x.value)}></my-element>`;
-        const placeholder = Markup.interpolation(0);
-        const directive = template.directives[0] as HTMLBindingDirective;
 
-        expect(template.html).to.equal(
-            `<my-element ?some-attribute=${placeholder}></my-element>`
+        expectTemplateEquals(
+            template,
+            `<my-element ?some-attribute=${FAKE.interpolation}></my-element>`
         );
 
-        expect(directive).to.be.instanceOf(HTMLBindingDirective);
-        expect(directive.source).to.equal("?some-attribute");
-        expect(directive.target).to.equal("some-attribute");
-        expect(directive.aspect).to.equal(Aspect.booleanAttribute);
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            "?some-attribute",
+            "some-attribute",
+            Aspect.booleanAttribute
+        );
+    });
+
+    it(`captures a boolean attribute with an interpolated boolean`, () => {
+        const template = html<Model>`<my-element ?some-attribute=${true}></my-element>`;
+
+        expectTemplateEquals(
+            template,
+            `<my-element ?some-attribute=${FAKE.interpolation}></my-element>`
+        );
+
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            "?some-attribute",
+            "some-attribute",
+            Aspect.booleanAttribute
+        );
+
+        const factory = getFactory(template, HTMLBindingDirective);
+        expect(factory!.binding(null, ExecutionContext.default)).equals(true);
     });
 
     it(`captures a case-sensitive property with an expression`, () => {
         const template = html<Model>`<my-element :someAttribute=${x => x.value}></my-element>`;
-        const placeholder = Markup.interpolation(0);
-        const directive = template.directives[0] as HTMLBindingDirective;
 
-        expect(template.html).to.equal(
-            `<my-element :someAttribute=${placeholder}></my-element>`
+        expectTemplateEquals(
+            template,
+            `<my-element :someAttribute=${FAKE.interpolation}></my-element>`
         );
 
-        expect(directive).to.be.instanceOf(HTMLBindingDirective);
-        expect(directive.source).to.equal(":someAttribute");
-        expect(directive.target).to.equal("someAttribute");
-        expect(directive.aspect).to.equal(Aspect.property);
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            ":someAttribute",
+            "someAttribute",
+            Aspect.property
+        );
     });
 
     it(`captures a case-sensitive property with a binding`, () => {
         const template = html<Model>`<my-element :someAttribute=${bind(x => x.value)}></my-element>`;
-        const placeholder = Markup.interpolation(0);
-        const directive = template.directives[0] as HTMLBindingDirective;
 
-        expect(template.html).to.equal(
-            `<my-element :someAttribute=${placeholder}></my-element>`
+        expectTemplateEquals(
+            template,
+            `<my-element :someAttribute=${FAKE.interpolation}></my-element>`
         );
 
-        expect(directive).to.be.instanceOf(HTMLBindingDirective);
-        expect(directive.source).to.equal(":someAttribute");
-        expect(directive.target).to.equal("someAttribute");
-        expect(directive.aspect).to.equal(Aspect.property);
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            ":someAttribute",
+            "someAttribute",
+            Aspect.property
+        );
+    });
+
+    it(`captures a case-sensitive property with an interpolated string`, () => {
+        const template = html<Model>`<my-element :someAttribute=${stringValue}></my-element>`;
+
+        expectTemplateEquals(
+            template,
+            `<my-element :someAttribute=${FAKE.interpolation}></my-element>`
+        );
+
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            ":someAttribute",
+            "someAttribute",
+            Aspect.property
+        );
+
+        const factory = getFactory(template, HTMLBindingDirective);
+        expect(factory!.binding(null, ExecutionContext.default)).equals(stringValue);
+    });
+
+    it(`captures a case-sensitive property with an interpolated number`, () => {
+        const template = html<Model>`<my-element :someAttribute=${numberValue}></my-element>`;
+
+        expectTemplateEquals(
+            template,
+            `<my-element :someAttribute=${FAKE.interpolation}></my-element>`
+        );
+
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            ":someAttribute",
+            "someAttribute",
+            Aspect.property
+        );
+
+        const factory = getFactory(template, HTMLBindingDirective);
+        expect(factory!.binding(null, ExecutionContext.default)).equals(numberValue);
     });
 
     it(`captures a case-sensitive property with an inline directive`, () => {
-        class TestDirective extends AspectedHTMLDirective {
-            binding: Binding;
-            source: string;
-            target: string;
-            aspect = Aspect.property;
-
-            captureSource(value) {
-                this.source = value;
-            }
+        @htmlDirective({ aspected: true })
+        class TestDirective implements HTMLDirective, Aspected {
+            sourceAspect: string;
+            targetAspect: string;
+            aspectType = Aspect.property;
+            id: string;
+            nodeId: string;
 
             createBehavior(targets: ViewBehaviorTargets) {
                 return { bind() {}, unbind() {} };
             }
+
+            public createHTML(add: AddViewBehaviorFactory): string {
+                return Markup.interpolation(add(this));
+            }
         }
 
         const template = html<Model>`<my-element :someAttribute=${new TestDirective()}></my-element>`;
-        const placeholder = Markup.interpolation(0);
 
-        expect(template.html).to.equal(
-            `<my-element :someAttribute=${placeholder}></my-element>`
+        expectTemplateEquals(
+            template,
+            `<my-element :someAttribute=${FAKE.interpolation}></my-element>`
         );
-        expect((template.directives[0] as TestDirective).source).to.equal(
-            ":someAttribute"
+
+        expectAspect(
+            template,
+            TestDirective,
+            ":someAttribute",
+            "someAttribute",
+            Aspect.property
         );
     });
 
     it(`captures a case-sensitive event when used with an expression`, () => {
         const template = html<Model>`<my-element @someEvent=${x => x.doSomething()}></my-element>`;
-        const placeholder = Markup.interpolation(0);
-        const directive = template.directives[0] as HTMLBindingDirective;
 
-        expect(template.html).to.equal(
-            `<my-element @someEvent=${placeholder}></my-element>`
+        expectTemplateEquals(
+            template,
+            `<my-element @someEvent=${FAKE.interpolation}></my-element>`
         );
 
-        expect(directive).to.be.instanceOf(HTMLBindingDirective);
-        expect(directive.source).to.equal("@someEvent");
-        expect(directive.target).to.equal("someEvent");
-        expect(directive.aspect).to.equal(Aspect.event);
+        expectAspect(
+            template,
+            HTMLBindingDirective,
+            "@someEvent",
+            "someEvent",
+            Aspect.event
+        );
     });
 
     it("should dispose of embedded ViewTemplate when the rendering template contains *only* the embedded template", () => {
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 8c93c89e2a8..1ee73c31511 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -4,11 +4,18 @@ import {
     ChildContext,
     ExecutionContext,
     ItemContext,
-    RootContext,
 } from "../observation/observable.js";
-import { bind, oneTime } from "./binding.js";
+import { bind, HTMLBindingDirective, oneTime } from "./binding.js";
 import { Compiler } from "./compiler.js";
-import { AspectedHTMLDirective, HTMLDirective } from "./html-directive.js";
+import {
+    AddViewBehaviorFactory,
+    Aspect,
+    Aspected,
+    HTMLDirective,
+    HTMLDirectiveDefinition,
+    ViewBehaviorFactory,
+} from "./html-directive.js";
+import { nextId } from "./markup.js";
 import type { ElementView, HTMLView, SyntheticView } from "./view.js";
 
 /**
@@ -128,19 +135,19 @@ export class ViewTemplate<
     /**
      * The directives that will be connected to placeholders in the html.
      */
-    public readonly directives: ReadonlyArray<HTMLDirective>;
+    public readonly factories: Record<string, ViewBehaviorFactory>;
 
     /**
      * Creates an instance of ViewTemplate.
      * @param html - The html representing what this template will instantiate, including placeholders for directives.
-     * @param directives - The directives that will be connected to placeholders in the html.
+     * @param factories - The directives that will be connected to placeholders in the html.
      */
     public constructor(
         html: string | HTMLTemplateElement,
-        directives: ReadonlyArray<HTMLDirective>
+        factories: Record<string, ViewBehaviorFactory>
     ) {
         this.html = html;
-        this.directives = directives;
+        this.factories = factories;
     }
 
     /**
@@ -151,7 +158,7 @@ export class ViewTemplate<
         if (this.result === null) {
             this.result = Compiler.compile<TSource, TParent, TContext>(
                 this.html,
-                this.directives
+                this.factories
             );
         }
 
@@ -201,6 +208,19 @@ export type TemplateValue<
     TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
 > = Binding<TSource, any, TContext> | HTMLDirective | CaptureType<TSource>;
 
+function createAspectedHTML(
+    value: HTMLDirective & Aspected,
+    prevString: string,
+    add: AddViewBehaviorFactory
+): string {
+    const match = lastAttributeNameRegex.exec(prevString);
+    if (match !== null) {
+        Aspect.assign(value as Aspected, match[2]);
+    }
+
+    return value.createHTML(add);
+}
+
 /**
  * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.
@@ -218,42 +238,62 @@ export function html<
     strings: TemplateStringsArray,
     ...values: TemplateValue<TSource, TParent, TContext>[]
 ): ViewTemplate<TSource, TParent> {
-    const directives: HTMLDirective[] = [];
     let html = "";
+    const factories: Record<string, ViewBehaviorFactory> = Object.create(null);
+    const add = (factory: ViewBehaviorFactory): string => {
+        const id = factory.id ?? (factory.id = nextId());
+        factories[id] = factory;
+        return id;
+    };
 
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         const currentString = strings[i];
-        let currentValue = values[i];
+        const currentValue = values[i];
+        let definition: HTMLDirectiveDefinition | undefined;
+
         html += currentString;
 
         if (isFunction(currentValue)) {
-            currentValue = bind(currentValue as Binding);
-        } else if (!isString(currentValue) && !(currentValue instanceof HTMLDirective)) {
-            const capturedValue = currentValue;
-            currentValue = bind(() => capturedValue, oneTime);
-        }
-
-        if (currentValue instanceof HTMLDirective) {
-            if (currentValue instanceof AspectedHTMLDirective) {
-                const match = lastAttributeNameRegex.exec(currentString);
-                if (match !== null) {
-                    currentValue.captureSource(match[2]);
-                }
+            html += createAspectedHTML(
+                bind(currentValue) as HTMLBindingDirective,
+                currentString,
+                add
+            );
+        } else if (isString(currentValue)) {
+            const match = lastAttributeNameRegex.exec(currentString);
+            if (match !== null) {
+                const directive = bind(
+                    () => currentValue,
+                    oneTime
+                ) as HTMLBindingDirective;
+                Aspect.assign(directive, match[2]);
+                html += directive.createHTML(add);
+            } else {
+                html += currentValue;
             }
-
-            // Since not all values are directives, we can't use i
-            // as the index for the placeholder. Instead, we need to
-            // use directives.length to get the next index.
-            html += currentValue.createPlaceholder(directives.length);
-            directives.push(currentValue);
+        } else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
+            html += createAspectedHTML(
+                bind(() => currentValue, oneTime) as HTMLBindingDirective,
+                currentString,
+                add
+            );
         } else {
-            html += currentValue;
+            if (definition.aspected) {
+                html += createAspectedHTML(
+                    currentValue as HTMLDirective & Aspected,
+                    currentString,
+                    add
+                );
+            } else {
+                html += (currentValue as HTMLDirective).createHTML(add);
+            }
         }
     }
 
-    html += strings[strings.length - 1];
-
-    return new ViewTemplate<TSource, TParent, any>(html, directives);
+    return new ViewTemplate<TSource, TParent, any>(
+        html + strings[strings.length - 1],
+        factories
+    );
 }
 
 /**
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index f56b1595378..fba5e8b6684 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -923,7 +923,7 @@ export const DesignSystem: Readonly<{
 export interface DesignSystemRegistrationContext {
     readonly elementPrefix: string;
     // @deprecated
-    tryDefineElement(name: string, type: Constructable, callback: ElementDefinitionCallback): void;
+    tryDefineElement(name: string, type: Constructable<HTMLElement>, callback: ElementDefinitionCallback): void;
     tryDefineElement(params: ElementDefinitionParams): void;
 }
 
@@ -1066,13 +1066,13 @@ export interface ElementDefinitionContext {
     readonly name: string;
     readonly shadowRootMode: ShadowRootMode | undefined;
     tagFor(type: Constructable): string;
-    readonly type: Constructable;
+    readonly type: Constructable<HTMLElement>;
     readonly willDefine: boolean;
 }
 
 // @public
 export interface ElementDefinitionParams extends Pick<ElementDefinitionContext, "name" | "type"> {
-    readonly baseClass?: Constructable;
+    readonly baseClass?: Constructable<HTMLElement>;
     callback: ElementDefinitionCallback;
 }
 
@@ -1258,7 +1258,7 @@ export class FoundationElement extends FASTElement {
 // @public
 export interface FoundationElementDefinition {
     readonly attributes?: EagerOrLazyFoundationOption<(AttributeConfiguration | string)[], this>;
-    baseClass?: Constructable;
+    baseClass?: Constructable<HTMLElement>;
     baseName: string;
     readonly elementOptions?: EagerOrLazyFoundationOption<ElementDefinitionOptions, this>;
     readonly shadowOptions?: EagerOrLazyFoundationOption<Partial<ShadowRootInit> | null, this>;
diff --git a/packages/web-components/fast-foundation/src/calendar/calendar.template.ts b/packages/web-components/fast-foundation/src/calendar/calendar.template.ts
index d5002cc49f6..d41976ab6d6 100644
--- a/packages/web-components/fast-foundation/src/calendar/calendar.template.ts
+++ b/packages/web-components/fast-foundation/src/calendar/calendar.template.ts
@@ -46,7 +46,9 @@ export const CalendarTitleTemplate: ViewTemplate<Calendar> = html`
  * @returns - The weekday labels template
  * @public
  */
-export const calendarWeekdayTemplate: (context: ElementDefinitionContext) => ItemViewTemplate = context => {
+export const calendarWeekdayTemplate: (
+    context: ElementDefinitionContext
+) => ItemViewTemplate = context => {
     const cellTag = context.tagFor(DataGridCell);
     return item<WeekdayText>`
         <${cellTag}
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
index c9e3d925436..31d653217d9 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
@@ -183,7 +183,7 @@ export class DataGridRow extends FoundationElement {
                 { positioning: true }
             );
             this.cellsRepeatBehavior = cellsRepeatDirective.createBehavior({
-                [cellsRepeatDirective.targetId]: this.cellsPlaceholder,
+                [cellsRepeatDirective.nodeId]: this.cellsPlaceholder,
             });
             /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
             this.$fastController.addBehaviors([this.cellsRepeatBehavior!]);
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.template.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.template.ts
index 7f0489c433d..b55cd0cb1e9 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid.template.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.template.ts
@@ -11,7 +11,9 @@ import type { ElementDefinitionContext } from "../design-system/registration-con
 import type { DataGrid } from "./data-grid.js";
 import { DataGridRow } from "./data-grid-row.js";
 
-function createRowItemTemplate(context: ElementDefinitionContext): ItemViewTemplate<any, DataGrid> {
+function createRowItemTemplate(
+    context: ElementDefinitionContext
+): ItemViewTemplate<any, DataGrid> {
     const rowTag = context.tagFor(DataGridRow);
     return item<any, DataGrid>`
     <${rowTag}
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
index 5618db0c4ea..23f9bc2fe82 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
@@ -347,7 +347,7 @@ export class DataGrid extends FoundationElement {
             { positioning: true }
         );
         this.rowsRepeatBehavior = rowsRepeatDirective.createBehavior({
-            [rowsRepeatDirective.targetId]: this.rowsPlaceholder,
+            [rowsRepeatDirective.nodeId]: this.rowsPlaceholder,
         });
 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
diff --git a/packages/web-components/fast-foundation/src/design-system/design-system.ts b/packages/web-components/fast-foundation/src/design-system/design-system.ts
index a52e93f022e..989ff5c7ebf 100644
--- a/packages/web-components/fast-foundation/src/design-system/design-system.ts
+++ b/packages/web-components/fast-foundation/src/design-system/design-system.ts
@@ -184,7 +184,7 @@ export const DesignSystem = Object.freeze({
 
 function extractTryDefineElementParams(
     params: string | ElementDefinitionParams,
-    elementDefinitionType?: Constructable,
+    elementDefinitionType?: Constructable<HTMLElement>,
     elementDefinitionCallback?: ElementDefinitionCallback
 ): ElementDefinitionParams {
     if (typeof params === "string") {
@@ -243,7 +243,7 @@ class DefaultDesignSystem implements DesignSystem {
             elementPrefix: this.prefix,
             tryDefineElement(
                 params: string | ElementDefinitionParams,
-                elementDefinitionType?: Constructable,
+                elementDefinitionType?: Constructable<HTMLElement>,
                 elementDefinitionCallback?: ElementDefinitionCallback
             ) {
                 const extractedParams = extractTryDefineElementParams(
@@ -327,7 +327,7 @@ class ElementDefinitionEntry implements ElementDefinitionContext {
     constructor(
         public readonly container: Container,
         public readonly name: string,
-        public readonly type: Constructable,
+        public readonly type: Constructable<HTMLElement>,
         public shadowRootMode: ShadowRootMode | undefined,
         public readonly callback: ElementDefinitionCallback,
         public readonly willDefine: boolean
diff --git a/packages/web-components/fast-foundation/src/design-system/registration-context.ts b/packages/web-components/fast-foundation/src/design-system/registration-context.ts
index 3b6287d6270..6275d4aa3ae 100644
--- a/packages/web-components/fast-foundation/src/design-system/registration-context.ts
+++ b/packages/web-components/fast-foundation/src/design-system/registration-context.ts
@@ -26,7 +26,7 @@ export interface ElementDefinitionContext {
      * The type that will be defined.
      * @public
      */
-    readonly type: Constructable;
+    readonly type: Constructable<HTMLElement>;
 
     /**
      * The dependency injection container associated with the design system.
@@ -85,7 +85,7 @@ export interface ElementDefinitionParams
      * FAST actual base class instance.
      * @public
      */
-    readonly baseClass?: Constructable;
+    readonly baseClass?: Constructable<HTMLElement>;
     /**
      * A callback to invoke if definition will happen.
      * @public
@@ -115,7 +115,7 @@ export interface DesignSystemRegistrationContext {
      */
     tryDefineElement(
         name: string,
-        type: Constructable,
+        type: Constructable<HTMLElement>,
         callback: ElementDefinitionCallback
     ): void;
 
diff --git a/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts b/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
index e46ec24a50f..bd7e5175acd 100644
--- a/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
+++ b/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
@@ -1,10 +1,8 @@
-import { FoundationElement } from "../foundation-element";
-import { html, ref, customElement, DOM } from "@microsoft/fast-element";
-import { fixture } from "../test-utilities/fixture";
+import { html, ref, customElement, DOM, FASTElement } from "@microsoft/fast-element";
+import { fixture, uniqueElementName } from "../test-utilities/fixture";
 import { reflectAttributes } from "./reflect-attributes";
 import { expect } from "chai";
 
-
 const template = html<AttributeReflectionTestElement>`
     <div
         ${ref("a")}
@@ -21,98 +19,104 @@ const template = html<AttributeReflectionTestElement>`
         )}
     ></div>
 `
-const name = "attr-reflection"
+const name = uniqueElementName();
 @customElement({
     name,
     template
 })
-class AttributeReflectionTestElement extends FoundationElement {
+class AttributeReflectionTestElement extends FASTElement {
     public a: HTMLElement;
     public b: HTMLElement;
 }
 
+describe("reflectAttributes", () => {
+    it("should reflect configured attributes that exist on the host after connection", async () => {
+        const { element, connect, disconnect } = await fixture<AttributeReflectionTestElement>(name);
 
-function create() {
-    return document.createElement(name) as AttributeReflectionTestElement;
-}
-
-function connect(el: HTMLElement) {
-    document.body.append(el);
+        element.setAttribute("foo", "bar");
+        await connect();
 
-    return () => {
-        document.body.removeChild(el);
-    }
-}
-describe("reflectAttributes", () => {
-    it("should reflect configured attributes that exist on the host after connection", () => {
-        const el = create();
-        el.setAttribute("foo", "bar");
-        const disconnect = connect(el)
-        expect(el.a.getAttribute("foo")).to.equal("bar");
-        disconnect();
+        expect(element.a.getAttribute("foo")).to.equal("bar");
+        await disconnect();
     });
+
     it("should reflect a configured attribute when set on the host to the directive target", async () => {
-        const el = create();
-        const disconnect = connect(el);
-        el.setAttribute("foo", "bar");
+        const { element, connect, disconnect } = await fixture<AttributeReflectionTestElement>(name);
 
+        await connect();
+        element.setAttribute("foo", "bar");
         await DOM.nextUpdate();
-        expect(el.a.getAttribute("foo")).to.equal("bar");
-        disconnect();
+
+        expect(element.a.getAttribute("foo")).to.equal("bar");
+        await disconnect();
     });
+
     it("should reflect a configured attribute when set on the host to all directive targets", async () => {
-        const el = create();
-        const disconnect = connect(el);
-        el.setAttribute("bar", "bat");
+        const { element, connect, disconnect } = await fixture<AttributeReflectionTestElement>(name);
 
+        await connect();
+        element.setAttribute("bar", "bat");
         await DOM.nextUpdate();
-        expect(el.a.getAttribute("bar")).to.equal("bat");
-        expect(el.b.getAttribute("bar")).to.equal("bat");
-        disconnect();
+
+        expect(element.a.getAttribute("bar")).to.equal("bat");
+        expect(element.b.getAttribute("bar")).to.equal("bat");
+
+        await disconnect();
     });
+
     it("should remove a configured attribute from the directive target when it is removed from the host", async () => {
-        const el = create();
-        const disconnect = connect(el)
-        el.setAttribute("foo", "bar");
+        const { element, connect, disconnect } = await fixture<AttributeReflectionTestElement>(name);
+
+        await connect();
+        element.setAttribute("foo", "bar");
         await DOM.nextUpdate();
 
-        el.removeAttribute("foo");
+        element.removeAttribute("foo");
         await DOM.nextUpdate();
-        expect(el.a.hasAttribute("foo")).to.equal(false);
 
-        disconnect();
+        expect(element.a.hasAttribute("foo")).to.equal(false);
+
+        await disconnect();
     });
+
     it("should remove a configured attribute from all directive targets when it is removed from the host", async () => {
-        const el = create();
-        const disconnect = connect(el)
-        el.setAttribute("bar", "bat");
+        const { element, connect, disconnect } = await fixture<AttributeReflectionTestElement>(name);
+
+        await connect();
+        element.setAttribute("bar", "bat");
         await DOM.nextUpdate();
 
-        el.removeAttribute("bar");
+        element.removeAttribute("bar");
         await DOM.nextUpdate();
-        expect(el.a.hasAttribute("bar")).to.equal(false);
-        expect(el.b.hasAttribute("bar")).to.equal(false);
 
-        disconnect();
+        expect(element.a.hasAttribute("bar")).to.equal(false);
+        expect(element.b.hasAttribute("bar")).to.equal(false);
+
+        await disconnect();
     });
 
     it("should only reflect attributes in the directive configuration to the directive target", async () => {
-        const el = create();
-        const disconnect = connect(el);
-        el.setAttribute("foo", "bar");
+        const { element, connect, disconnect } = await fixture<AttributeReflectionTestElement>(name);
+
+        await connect();
+        element.setAttribute("foo", "bar");
 
         await DOM.nextUpdate();
-        expect(el.b.hasAttribute("foo")).to.equal(false);
-        disconnect();
+        expect(element.b.hasAttribute("foo")).to.equal(false);
+
+        await disconnect();
     });
+
     it("should not reflect attributes thats are not in any directive configuration", async () => {
-        const el = create();
-        const disconnect = connect(el);
-        el.setAttribute("bee", "bar");
+        const { element, connect, disconnect } = await fixture<AttributeReflectionTestElement>(name);
 
+        await connect();
+        element.setAttribute("bee", "bar");
         await DOM.nextUpdate();
-        expect(el.a.hasAttribute("bee")).to.equal(false);
-        expect(el.b.hasAttribute("bee")).to.equal(false);
-        disconnect();
+
+        expect(element.a.hasAttribute("bee")).to.equal(false);
+        expect(element.b.hasAttribute("bee")).to.equal(false);
+
+        await disconnect();
     });
 })
diff --git a/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts b/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
index 6001f1eefa2..cf2e32d7739 100644
--- a/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
+++ b/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
@@ -1,6 +1,7 @@
 import {
     DOM,
     ExecutionContext,
+    HTMLDirective,
     StatelessAttachedAttributeDirective,
     Subscriber,
     SubscriberSet,
@@ -10,65 +11,73 @@ import type { CaptureType } from "@microsoft/fast-element";
 
 const observer = new MutationObserver((mutations: MutationRecord[]) => {
     for (const mutation of mutations) {
-        AttributeReflectionSubscriptionSet.getOrCreateFor(mutation.target).notify(
-            mutation.attributeName
-        );
+        AttributeReflectionSubscriptionSet.getOrCreateFor(
+            mutation.target as HTMLElement
+        ).notify(mutation.attributeName);
     }
 });
-class AttributeReflectionSubscriptionSet extends SubscriberSet {
+
+class AttributeReflectionSubscriptionSet {
     private static subscriberCache: WeakMap<
         any,
         AttributeReflectionSubscriptionSet
     > = new WeakMap();
+
     private watchedAttributes: Set<Readonly<string[]>> = new Set();
+    private subscribers = new SubscriberSet(this);
+
+    constructor(public element: HTMLElement) {
+        AttributeReflectionSubscriptionSet.subscriberCache.set(element, this);
+    }
+
+    public notify(attr: string | null) {
+        this.subscribers.notify(attr);
+    }
+
+    public subscribe(subscriber: Subscriber & ReflectAttributesDirective) {
+        this.subscribers.subscribe(subscriber);
 
-    public subscribe(subscriber: Subscriber & ReflectAttrBehavior) {
-        super.subscribe(subscriber);
         if (!this.watchedAttributes.has(subscriber.attributes)) {
             this.watchedAttributes.add(subscriber.attributes);
             this.observe();
         }
     }
 
-    constructor(source: any) {
-        super(source);
-
-        AttributeReflectionSubscriptionSet.subscriberCache.set(source, this);
-    }
+    public unsubscribe(subscriber: Subscriber & ReflectAttributesDirective) {
+        this.subscribers.unsubscribe(subscriber);
 
-    public unsubscribe(subscriber: Subscriber & ReflectAttrBehavior) {
-        super.unsubscribe(subscriber);
         if (this.watchedAttributes.has(subscriber.attributes)) {
             this.watchedAttributes.delete(subscriber.attributes);
             this.observe();
         }
     }
 
-    public static getOrCreateFor(source: any) {
-        return (
-            this.subscriberCache.get(source) ||
-            new AttributeReflectionSubscriptionSet(source)
-        );
-    }
-
     private observe() {
         const attributeFilter: string[] = [];
+
         for (const attributes of this.watchedAttributes.values()) {
             for (let i = 0; i < attributes.length; i++) {
                 attributeFilter.push(attributes[i]);
             }
         }
 
-        observer.observe(this.subject, { attributeFilter });
+        observer.observe(this.element, { attributeFilter });
+    }
+
+    public static getOrCreateFor(source: HTMLElement) {
+        return (
+            this.subscriberCache.get(source) ||
+            new AttributeReflectionSubscriptionSet(source)
+        );
     }
 }
 
-class ReflectAttrBehavior extends StatelessAttachedAttributeDirective<string[]> {
+class ReflectAttributesDirective extends StatelessAttachedAttributeDirective<string[]> {
     /**
      * The attributes the behavior is reflecting
      */
     public attributes: Readonly<string[]>;
-    private target: HTMLElement;
+
     constructor(attributes: string[]) {
         super(attributes);
         this.attributes = Object.freeze(attributes);
@@ -79,14 +88,15 @@ class ReflectAttrBehavior extends StatelessAttachedAttributeDirective<string[]>
         context: ExecutionContext,
         targets: ViewBehaviorTargets
     ): void {
-        this.target = targets[this.targetId] as HTMLElement;
-        AttributeReflectionSubscriptionSet.getOrCreateFor(source).subscribe(this);
+        const subscription = AttributeReflectionSubscriptionSet.getOrCreateFor(source);
+        subscription[this.id] = targets[this.nodeId];
+        subscription.subscribe(this);
 
         // Reflect any existing attributes because MutationObserver will only
         // handle *changes* to attributes.
         if (source.hasAttributes()) {
             for (let i = 0; i < source.attributes.length; i++) {
-                this.handleChange(source, source.attributes[i].name);
+                this.handleChange(subscription, source.attributes[i].name);
             }
         }
     }
@@ -95,17 +105,21 @@ class ReflectAttrBehavior extends StatelessAttachedAttributeDirective<string[]>
         AttributeReflectionSubscriptionSet.getOrCreateFor(source).unsubscribe(this);
     }
 
-    public handleChange(source: HTMLElement, arg: string): void {
+    public handleChange(source: AttributeReflectionSubscriptionSet, arg: string): void {
         // In cases where two or more ReflectAttrBehavior instances are bound to the same element,
         // they will share a Subscriber implementation. In that case, this handle change can be invoked with
         // attributes an instances doesn't need to reflect. This guards against reflecting attrs
         // that shouldn't be reflected.
         if (this.attributes.includes(arg)) {
-            DOM.setAttribute(this.target, arg, source.getAttribute(arg));
+            const element = source.element as HTMLElement;
+            const target = source[this.id] as HTMLElement;
+            DOM.setAttribute(target, arg, element.getAttribute(arg));
         }
     }
 }
 
+HTMLDirective.define(ReflectAttributesDirective);
+
 /**
  * Reflects attributes from the host element to the target element of the directive.
  * @param attributes - The attributes to reflect
@@ -123,10 +137,5 @@ class ReflectAttrBehavior extends StatelessAttachedAttributeDirective<string[]>
  * ```
  */
 export function reflectAttributes<T = any>(...attributes: string[]): CaptureType<T> {
-    return new ReflectAttrBehavior(attributes);
-    // return new AttachedBehaviorHTMLDirective(
-    //     "fast-reflect-attr",
-    //     ReflectAttrBehavior,
-    //     attributes
-    // );
+    return new ReflectAttributesDirective(attributes);
 }
diff --git a/packages/web-components/fast-foundation/src/foundation-element/foundation-element.ts b/packages/web-components/fast-foundation/src/foundation-element/foundation-element.ts
index c647f9e6507..c539ec20b90 100644
--- a/packages/web-components/fast-foundation/src/foundation-element/foundation-element.ts
+++ b/packages/web-components/fast-foundation/src/foundation-element/foundation-element.ts
@@ -38,7 +38,7 @@ export interface FoundationElementDefinition {
     /**
      * The actual FAST base class of the component if different from the class used to compose.
      */
-    baseClass?: Constructable;
+    baseClass?: Constructable<HTMLElement>;
 
     /**
      * The template to render for the custom element.
diff --git a/packages/web-components/fast-foundation/src/picker/picker.template.ts b/packages/web-components/fast-foundation/src/picker/picker.template.ts
index fad127a983b..15dab7cbbf7 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.template.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.template.ts
@@ -15,7 +15,9 @@ import { PickerMenuOption } from "./picker-menu-option.js";
 import { PickerList } from "./picker-list.js";
 import { PickerListItem } from "./picker-list-item.js";
 
-function createDefaultListItemTemplate(context: ElementDefinitionContext): ChildViewTemplate {
+function createDefaultListItemTemplate(
+    context: ElementDefinitionContext
+): ChildViewTemplate {
     const pickerListItemTag: string = context.tagFor(PickerListItem);
     return child`
     <${pickerListItemTag}
@@ -26,7 +28,9 @@ function createDefaultListItemTemplate(context: ElementDefinitionContext): Child
     `;
 }
 
-function createDefaultMenuOptionTemplate(context: ElementDefinitionContext): ChildViewTemplate {
+function createDefaultMenuOptionTemplate(
+    context: ElementDefinitionContext
+): ChildViewTemplate {
     const pickerMenuOptionTag: string = context.tagFor(PickerMenuOption);
     return child`
     <${pickerMenuOptionTag}
diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts
index db046885c2d..8733f8ffd0e 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.ts
@@ -545,7 +545,7 @@ export class Picker extends FormAssociatedPicker {
             { positioning: true }
         );
         this.itemsRepeatBehavior = itemsRepeatDirective.createBehavior({
-            [itemsRepeatDirective.targetId]: this.itemsPlaceholderElement,
+            [itemsRepeatDirective.nodeId]: this.itemsPlaceholderElement,
         });
 
         this.inputElement.addEventListener("input", this.handleTextInput);
@@ -565,7 +565,7 @@ export class Picker extends FormAssociatedPicker {
             { positioning: true }
         );
         this.optionsRepeatBehavior = optionsRepeatDirective.createBehavior({
-            [optionsRepeatDirective.targetId]: this.optionsPlaceholder,
+            [optionsRepeatDirective.nodeId]: this.optionsPlaceholder,
         });
 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
diff --git a/packages/web-components/fast-foundation/src/test-utilities/fixture.ts b/packages/web-components/fast-foundation/src/test-utilities/fixture.ts
index e6f3472f329..89eb8a0c3d3 100644
--- a/packages/web-components/fast-foundation/src/test-utilities/fixture.ts
+++ b/packages/web-components/fast-foundation/src/test-utilities/fixture.ts
@@ -146,7 +146,7 @@ export async function fixture<TElement = HTMLElement>(
 
     if (typeof templateNameOrRegistry === "string") {
         const html = `<${templateNameOrRegistry}></${templateNameOrRegistry}>`;
-        templateNameOrRegistry = new ViewTemplate(html, []);
+        templateNameOrRegistry = new ViewTemplate(html, {});
     } else if (isElementRegistry(templateNameOrRegistry)) {
         templateNameOrRegistry = [templateNameOrRegistry];
     }
@@ -164,7 +164,7 @@ export async function fixture<TElement = HTMLElement>(
 
         const elementName = `${prefix}-${first.definition.baseName}`;
         const html = `<${elementName}></${elementName}>`;
-        templateNameOrRegistry = new ViewTemplate(html, []);
+        templateNameOrRegistry = new ViewTemplate(html, {});
     }
 
     const view = templateNameOrRegistry.create();
diff --git a/packages/web-components/fast-router/docs/api-report.md b/packages/web-components/fast-router/docs/api-report.md
index 37bbe3b9a26..abcdf9fe6e1 100644
--- a/packages/web-components/fast-router/docs/api-report.md
+++ b/packages/web-components/fast-router/docs/api-report.md
@@ -4,11 +4,14 @@
 
 ```ts
 
+import { AddViewBehaviorFactory } from '@microsoft/fast-element';
+import { Behavior } from '@microsoft/fast-element';
 import { ComposableStyles } from '@microsoft/fast-element';
 import { Constructable } from '@microsoft/fast-element';
 import { ExecutionContext } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
+import { ViewBehaviorTargets } from '@microsoft/fast-element';
 import { ViewTemplate } from '@microsoft/fast-element';
 
 // Warning: (ae-internal-missing-underscore) The name "childRouteParameter" should be prefixed with an underscore because the declaration is marked as @internal
@@ -254,8 +257,10 @@ export type NavigationContributor<TSettings = any> = Partial<Record<Exclude<Navi
     commit?: NavigationCommitPhaseHook<TSettings>;
 };
 
+// Warning: (ae-forgotten-export) The symbol "NavigationContributorDirective" needs to be exported by the entry point index.d.ts
+//
 // @alpha (undocumented)
-export function navigationContributor(options?: ContributorOptions): HTMLDirective;
+export function navigationContributor(options?: ContributorOptions): NavigationContributorDirective;
 
 // @alpha (undocumented)
 export interface NavigationHandler {
diff --git a/packages/web-components/fast-router/src/commands.ts b/packages/web-components/fast-router/src/commands.ts
index 5add86956d1..9b328a1ef8b 100644
--- a/packages/web-components/fast-router/src/commands.ts
+++ b/packages/web-components/fast-router/src/commands.ts
@@ -91,10 +91,10 @@ function factoryFromElementInstance(element: HTMLElement): ViewFactory {
     fragment.appendChild(element);
 
     const factory = navigationContributor();
-    factory.targetId = "h";
+    factory.nodeId = "h";
 
     const view = new HTMLView(fragment, [factory], {
-        [factory.targetId]: element,
+        [factory.nodeId]: element,
     });
 
     return {
@@ -196,7 +196,7 @@ export class Render implements RenderCommand {
                 } else if (typeof element === "function") {
                     // Do not cache it becase the function could return
                     // a different value each time.
-                    let def = FASTElementDefinition.forType(element);
+                    let def = FASTElementDefinition.getByType(element);
 
                     if (def) {
                         factory = factoryFromElementName(def.name);
@@ -208,7 +208,7 @@ export class Render implements RenderCommand {
                         } else if (element instanceof HTMLElement) {
                             factory = factoryFromElementInstance(element);
                         } else {
-                            def = FASTElementDefinition.forType(element as any);
+                            def = FASTElementDefinition.getByType(element);
 
                             if (def) {
                                 factory = factoryFromElementName(def.name);
diff --git a/packages/web-components/fast-router/src/contributors.ts b/packages/web-components/fast-router/src/contributors.ts
index eb9afd35e0d..2aa25ece54a 100644
--- a/packages/web-components/fast-router/src/contributors.ts
+++ b/packages/web-components/fast-router/src/contributors.ts
@@ -1,4 +1,5 @@
 import {
+    AddViewBehaviorFactory,
     Behavior,
     HTMLDirective,
     Markup,
@@ -44,23 +45,26 @@ const defaultOptions: ContributorOptions = {
     parameters: true,
 };
 
-class NavigationContributorDirective extends HTMLDirective {
-    constructor(private options: Required<ContributorOptions>) {
-        super();
-    }
+class NavigationContributorDirective implements HTMLDirective {
+    id: string;
+    nodeId: string;
+
+    constructor(private options: Required<ContributorOptions>) {}
 
-    createPlaceholder(index: number) {
-        return Markup.attribute(index);
+    createHTML(add: AddViewBehaviorFactory) {
+        return Markup.attribute(add(this));
     }
 
     createBehavior(targets: ViewBehaviorTargets) {
         return new NavigationContributorBehavior(
-            targets[this.targetId] as HTMLElement & NavigationContributor,
+            targets[this.nodeId] as HTMLElement & NavigationContributor,
             this.options
         );
     }
 }
 
+HTMLDirective.define(NavigationContributorDirective);
+
 class NavigationContributorBehavior implements Behavior {
     private router: Router | null = null;
 
@@ -95,7 +99,9 @@ class NavigationContributorBehavior implements Behavior {
 /**
  * @alpha
  */
-export function navigationContributor(options?: ContributorOptions): HTMLDirective {
+export function navigationContributor(
+    options?: ContributorOptions
+): NavigationContributorDirective {
     return new NavigationContributorDirective(
         Object.assign({}, defaultOptions, options) as Required<ContributorOptions>
     );
diff --git a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
index e3035f62eaf..b31e8cc0ee4 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
@@ -1,15 +1,9 @@
 import { ElementRenderer, RenderInfo } from "@lit-labs/ssr";
-import { Aspect, ExecutionContext, DOM, FASTElement } from "@microsoft/fast-element";
+import { Aspect, DOM, ExecutionContext, FASTElement } from "@microsoft/fast-element";
 import { TemplateRenderer } from "../template-renderer/template-renderer.js";
 import { SSRView } from "../view.js";
 import { StyleRenderer } from "../styles/style-renderer.js";
 
-const prefix = "fast-style";
-let id = 0;
-function nextId(): string {
-    return `${prefix}-${id++}`;
-}
-
 export abstract class FASTElementRenderer extends ElementRenderer {
     /**
      * The element instance represented by the {@link FASTElementRenderer}.
@@ -90,10 +84,10 @@ export abstract class FASTElementRenderer extends ElementRenderer {
     constructor(tagName: string) {
         super(tagName);
 
-        const ctor: typeof FASTElement | null = customElements.get(this.tagName);
+        const ctor = customElements.get(this.tagName);
 
         if (ctor) {
-            this.element = new ctor();
+            this.element = new ctor() as FASTElement;
         } else {
             throw new Error(
                 `FASTElementRenderer was unable to find a constructor for a custom element with the tag name '${tagName}'.`
diff --git a/packages/web-components/fast-ssr/src/exports.ts b/packages/web-components/fast-ssr/src/exports.ts
index b4be9efe7ba..551163081fd 100644
--- a/packages/web-components/fast-ssr/src/exports.ts
+++ b/packages/web-components/fast-ssr/src/exports.ts
@@ -1,5 +1,5 @@
 import { RenderInfo } from "@lit-labs/ssr";
-import { Compiler, ElementStyles, HTMLDirective } from "@microsoft/fast-element";
+import { Compiler, ElementStyles, ViewBehaviorFactory } from "@microsoft/fast-element";
 import { FASTElementRenderer } from "./element-renderer/element-renderer.js";
 import { FASTSSRStyleStrategy } from "./element-renderer/style-strategy.js";
 import {
@@ -7,7 +7,7 @@ import {
     StyleElementStyleRenderer,
     StyleRenderer,
 } from "./styles/style-renderer.js";
-import { defaultFASTDirectiveRenderers } from "./template-renderer/directives.js";
+import { defaultViewBehaviorFactoryRenderers } from "./template-renderer/directives.js";
 import {
     TemplateRenderer,
     TemplateRendererConfiguration,
@@ -16,14 +16,17 @@ import { SSRView } from "./view.js";
 
 export type Configuration = TemplateRendererConfiguration;
 Compiler.setDefaultStrategy(
-    (html: string | HTMLTemplateElement, directives: ReadonlyArray<HTMLDirective>) => {
+    (
+        html: string | HTMLTemplateElement,
+        factories: Record<string, ViewBehaviorFactory>
+    ) => {
         if (typeof html !== "string") {
             throw new Error(
                 "SSR compiler does not support HTMLTemplateElement templates"
             );
         }
 
-        return new SSRView(html, directives) as any;
+        return new SSRView(html, factories) as any;
     }
 );
 
@@ -58,7 +61,9 @@ export default function (
             : new StyleElementStyleRenderer();
     };
 
-    templateRenderer.withDirectiveRenderer(...defaultFASTDirectiveRenderers);
+    templateRenderer.withViewBehaviorFactoryRenderers(
+        ...defaultViewBehaviorFactoryRenderers
+    );
 
     return {
         templateRenderer,
diff --git a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
index a3b59f8afe1..53921e573fe 100644
--- a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
@@ -1,4 +1,4 @@
-import { Aspect, Binding, HTMLDirective } from "@microsoft/fast-element";
+import { Binding, ViewBehaviorFactory } from "@microsoft/fast-element";
 
 /**
  * Allows fast identification of operation types
@@ -9,7 +9,7 @@ export const enum OpType {
     customElementAttributes,
     customElementShadow,
     attributeBinding,
-    directive,
+    viewBehaviorFactory,
     templateElementOpen,
     templateElementClose,
     text,
@@ -59,9 +59,9 @@ export type CustomElementShadowOp = {
 /**
  * Operation to emit static text
  */
-export type DirectiveOp = {
-    type: OpType.directive;
-    directive: HTMLDirective;
+export type ViewBehaviorFactoryOp = {
+    type: OpType.viewBehaviorFactory;
+    factory: ViewBehaviorFactory;
 };
 
 /**
@@ -71,12 +71,7 @@ export type AttributeBindingOp = {
     type: OpType.attributeBinding;
     binding: Binding;
     target: string;
-    aspect:
-        | Aspect.attribute
-        | Aspect.booleanAttribute
-        | Aspect.event
-        | Aspect.property
-        | Aspect.tokenList;
+    aspect: number;
     useCustomElementInstance: boolean;
 };
 
@@ -109,7 +104,7 @@ export type Op =
     | AttributeBindingOp
     | CustomElementOpenOp
     | CustomElementCloseOp
-    | DirectiveOp
+    | ViewBehaviorFactoryOp
     | CustomElementAttributes
     | CustomElementShadowOp
     | TemplateElementOpenOp
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
index 024455426de..323dc95aab0 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
@@ -1,22 +1,30 @@
 
 import "../dom-shim.js";
-import { Aspect, customElement, FASTElement, html, ViewTemplate } from "@microsoft/fast-element";
+import { Aspect, customElement, FASTElement, html, ViewBehaviorFactory, ViewTemplate } from "@microsoft/fast-element";
 import { expect, test } from "@playwright/test";
-import { AttributeBindingOp, CustomElementOpenOp, DirectiveOp, OpType, TemplateElementOpenOp, TextOp } from "./op-codes.js";
+import { AttributeBindingOp, CustomElementOpenOp, ViewBehaviorFactoryOp, OpType, TemplateElementOpenOp, TextOp } from "./op-codes.js";
 import { parseTemplateToOpCodes } from "./template-parser.js";
 
 @customElement("hello-world")
 class HelloWorld extends FASTElement {}
 
+function firstFactory(factories: Record<string, ViewBehaviorFactory>) {
+    for (const key in factories) {
+        return factories[key];
+    }
+
+    return null;
+}
+
 test.describe("parseTemplateToOpCodes", () => {
     test("should throw when invoked with a ViewTemplate with a HTMLTemplateElement template", () => {
         expect(() => {
-            parseTemplateToOpCodes(new ViewTemplate(document.createElement("template"), []));
+            parseTemplateToOpCodes(new ViewTemplate(document.createElement("template"), {}));
         }).toThrow();
     });
     test("should not throw when invoked with a ViewTemplate with a string template", () => {
         expect(() => {
-            parseTemplateToOpCodes(new ViewTemplate("", []));
+            parseTemplateToOpCodes(new ViewTemplate("", {}));
         }).not.toThrow();
     });
 
@@ -26,24 +34,24 @@ test.describe("parseTemplateToOpCodes", () => {
     test("should emit doctype, html, head, and body elements as part of text op", () => {
         expect(parseTemplateToOpCodes(html`<!DOCTYPE html><html><head></head><body></body></html>`)).toEqual([{type: OpType.text, value: "<!DOCTYPE html><html><head></head><body></body></html>"}])
     })
-    test("should emit a directive op from a binding", () => {
+    test("should emit a viewBehaviorFactory op from a binding", () => {
             const input = html`${() => "hello world"}`;
-            expect(parseTemplateToOpCodes(input)).toEqual([{ type: OpType.directive, directive: input.directives[0]}])
+            expect(parseTemplateToOpCodes(input)).toEqual([{ type: OpType.viewBehaviorFactory, factory: firstFactory(input.factories)}])
     });
     test("should emit a directive op from a content binding", () => {
             const input = html`Hello ${() => "World"}.`;
 
             const codes = parseTemplateToOpCodes(input);
-            const code = codes[1] as DirectiveOp;
+            const code = codes[1] as ViewBehaviorFactoryOp;
             expect(codes.length).toBe(3);
-            expect(code.type).toBe(OpType.directive);
+            expect(code.type).toBe(OpType.viewBehaviorFactory);
     });
-    test("should sandwich directive ops between text ops when binding native element content", () => {
+    test("should sandwich viewBehaviorFactory ops between text ops when binding native element content", () => {
 
             const input = html`<p>${() => "hello world"}</p>`;
             expect(parseTemplateToOpCodes(input)).toEqual([
                     { type: OpType.text, value: "<p>"},
-                    { type: OpType.directive, directive: input.directives[0]},
+                    { type: OpType.viewBehaviorFactory, factory: firstFactory(input.factories)},
                     { type: OpType.text, value: "</p>"},
             ])
         });
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
index c08ddc46ce8..7ddba5e90e2 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
@@ -4,10 +4,10 @@
  */
 import {
     Aspect,
-    AspectedHTMLDirective,
+    Aspected,
     Compiler,
-    HTMLDirective,
     Parser,
+    ViewBehaviorFactory,
     ViewTemplate,
 } from "@microsoft/fast-element";
 import {
@@ -111,14 +111,14 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
      */
     const templateString = html;
 
-    const codes = parseStringToOpCodes(templateString, template.directives);
+    const codes = parseStringToOpCodes(templateString, template.factories);
     opCache.set(template, codes);
     return codes;
 }
 
 export function parseStringToOpCodes(
     templateString: string,
-    directives: ReadonlyArray<HTMLDirective>
+    factories: Record<string, ViewBehaviorFactory>
 ): Op[] {
     const nodeTree = parseFragment(templateString, { sourceCodeLocationInfo: true });
 
@@ -159,20 +159,17 @@ export function parseStringToOpCodes(
             dynamic: Map<Attribute, AttributeBindingOp>;
         } = node.attrs.reduce(
             (prev, current) => {
-                const parsed = Parser.parse(current.value, directives);
+                const parsed = Parser.parse(current.value, factories);
                 if (parsed) {
-                    const directive = Compiler.aggregate(parsed);
+                    const factory = Compiler.aggregate(parsed) as ViewBehaviorFactory &
+                        Aspected;
                     // Guard against directives like children, ref, and slotted
-                    if (
-                        directive instanceof AspectedHTMLDirective &&
-                        directive.binding &&
-                        directive.aspect !== Aspect.content
-                    ) {
+                    if (factory.binding && factory.aspectType !== Aspect.content) {
                         prev.dynamic.set(current, {
                             type: OpType.attributeBinding,
-                            binding: directive.binding,
-                            aspect: directive.aspect,
-                            target: directive.target,
+                            binding: factory.binding,
+                            aspect: factory.aspectType,
+                            target: factory.targetAspect,
                             useCustomElementInstance: Boolean(
                                 node.isDefinedCustomElement
                             ),
@@ -227,12 +224,12 @@ export function parseStringToOpCodes(
                 skipTo(location.endOffset);
             } else if (!attributes.static.has(attr.name)) {
                 // Handle interpolated directives like children, ref, and slotted
-                const parsed = Parser.parse(attr.value, directives);
+                const parsed = Parser.parse(attr.value, factories);
                 if (parsed) {
                     const location = node.sourceCodeLocation!.attrs[attr.name];
-                    const directive = Compiler.aggregate(parsed);
+                    const factory = Compiler.aggregate(parsed);
                     flushTo(location.startOffset);
-                    opCodes.push({ type: OpType.directive, directive });
+                    opCodes.push({ type: OpType.viewBehaviorFactory, factory });
                     skipTo(location.endOffset);
                 }
             } else if (node.isDefinedCustomElement) {
@@ -311,7 +308,7 @@ export function parseStringToOpCodes(
                 const parsed = Parser.parse(
                     (node as DefaultTreeCommentNode)?.data ||
                         (node as DefaultTreeTextNode).value,
-                    directives
+                    factories
                 );
 
                 if (parsed) {
@@ -321,8 +318,8 @@ export function parseStringToOpCodes(
                             flush(part);
                         } else {
                             opCodes.push({
-                                type: OpType.directive,
-                                directive: part,
+                                type: OpType.viewBehaviorFactory,
+                                factory: part,
                             });
                         }
                     }
diff --git a/packages/web-components/fast-ssr/src/template-renderer/directives.ts b/packages/web-components/fast-ssr/src/template-renderer/directives.ts
index 4cbf0ba538b..59ab38fccba 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/directives.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/directives.ts
@@ -7,6 +7,7 @@ import {
     RefDirective,
     RepeatDirective,
     SlottedDirective,
+    ViewBehaviorFactory,
     ViewTemplate,
 } from "@microsoft/fast-element";
 import { TemplateRenderer } from "./template-renderer.js";
@@ -14,22 +15,22 @@ import { TemplateRenderer } from "./template-renderer.js";
 /**
  * Describes an implementation that can render a directive
  */
-export interface DirectiveRenderer<T extends Constructable> {
+export interface ViewBehaviorFactoryRenderer<T extends ViewBehaviorFactory> {
     render(
-        directive: InstanceType<T>,
+        behavior: T,
         renderInfo: RenderInfo,
         source: any,
         renderer: TemplateRenderer,
         context: ExecutionContext
     ): IterableIterator<string>;
-    matcher: T;
+    matcher: Constructable<T>;
 }
 
-export const RepeatDirectiveRenderer: DirectiveRenderer<typeof RepeatDirective> = Object.freeze(
+export const RepeatDirectiveRenderer: ViewBehaviorFactoryRenderer<RepeatDirective> = Object.freeze(
     {
         matcher: RepeatDirective,
         *render(
-            directive: InstanceType<typeof RepeatDirective>,
+            directive: RepeatDirective,
             renderInfo: RenderInfo,
             source: any,
             renderer: TemplateRenderer,
@@ -69,27 +70,27 @@ export const RepeatDirectiveRenderer: DirectiveRenderer<typeof RepeatDirective>
 function* noop() {
     yield "";
 }
-export const ChildrenDirectiveRenderer: DirectiveRenderer<typeof ChildrenDirective> = Object.freeze(
+export const ChildrenDirectiveRenderer: ViewBehaviorFactoryRenderer<ChildrenDirective> = Object.freeze(
     {
         matcher: ChildrenDirective,
         render: noop,
     }
 );
 
-export const RefDirectiveRenderer: DirectiveRenderer<typeof RefDirective> = Object.freeze(
+export const RefDirectiveRenderer: ViewBehaviorFactoryRenderer<RefDirective> = Object.freeze(
     {
         matcher: RefDirective,
         render: noop,
     }
 );
-export const SlottedDirectiveRenderer: DirectiveRenderer<typeof SlottedDirective> = Object.freeze(
+export const SlottedDirectiveRenderer: ViewBehaviorFactoryRenderer<SlottedDirective> = Object.freeze(
     {
         matcher: SlottedDirective,
         render: noop,
     }
 );
 
-export const defaultFASTDirectiveRenderers: DirectiveRenderer<any>[] = [
+export const defaultViewBehaviorFactoryRenderers: ViewBehaviorFactoryRenderer<any>[] = [
     RepeatDirectiveRenderer,
     ChildrenDirectiveRenderer,
     RefDirectiveRenderer,
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
index e18c880985c..3d2c2663d95 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
@@ -2,8 +2,9 @@ import { RenderInfo } from "@lit-labs/ssr";
 import { getElementRenderer } from "@lit-labs/ssr/lib/element-renderer.js";
 import {
     Aspect,
-    AspectedHTMLDirective,
+    Aspected,
     ExecutionContext,
+    ViewBehaviorFactory,
     ViewTemplate,
 } from "@microsoft/fast-element";
 import { Op, OpType } from "../template-parser/op-codes.js";
@@ -11,7 +12,7 @@ import {
     parseStringToOpCodes,
     parseTemplateToOpCodes,
 } from "../template-parser/template-parser.js";
-import { DirectiveRenderer } from "./directives.js";
+import { ViewBehaviorFactoryRenderer } from "./directives.js";
 
 export type ComponentDOMEmissionMode = "shadow" | "light";
 export interface TemplateRendererConfiguration {
@@ -32,7 +33,10 @@ export interface TemplateRendererConfiguration {
 
 export class TemplateRenderer
     implements Readonly<Required<TemplateRendererConfiguration>> {
-    private directiveRenderers: Map<any, DirectiveRenderer<any>> = new Map();
+    private viewBehaviorFactoryRenderers: Map<
+        any,
+        ViewBehaviorFactoryRenderer<any>
+    > = new Map();
     /**
      * {@inheritDoc TemplateRendererConfiguration.componentDOMEmissionMode}
      */
@@ -61,7 +65,7 @@ export class TemplateRenderer
         const codes =
             template instanceof ViewTemplate
                 ? parseTemplateToOpCodes(template)
-                : parseStringToOpCodes(template, []);
+                : parseStringToOpCodes(template, {});
 
         yield* this.renderOpCodes(codes, renderInfo, source, context);
     }
@@ -84,18 +88,15 @@ export class TemplateRenderer
                 case OpType.text:
                     yield code.value;
                     break;
-                case OpType.directive: {
-                    const { directive } = code;
-                    const ctor = directive.constructor;
-                    if (this.directiveRenderers.has(ctor)) {
-                        yield* this.directiveRenderers
+                case OpType.viewBehaviorFactory: {
+                    const factory = code.factory as ViewBehaviorFactory & Aspected;
+                    const ctor = factory.constructor;
+                    if (this.viewBehaviorFactoryRenderers.has(ctor)) {
+                        yield* this.viewBehaviorFactoryRenderers
                             .get(ctor)!
-                            .render(directive, renderInfo, source, this, context);
-                    } else if (
-                        directive instanceof AspectedHTMLDirective &&
-                        directive.binding
-                    ) {
-                        const result = directive.binding(source, context);
+                            .render(factory, renderInfo, source, this, context);
+                    } else if (factory.aspectType && factory.binding) {
+                        const result = factory.binding(source, context);
 
                         // If the result is a template, render the template
                         if (result instanceof ViewTemplate) {
@@ -103,7 +104,7 @@ export class TemplateRenderer
                         } else if (result === null || result === undefined) {
                             // Don't yield anything if result is null
                             break;
-                        } else if (directive.aspect === Aspect.content) {
+                        } else if (factory.aspectType === Aspect.content) {
                             yield result;
                         } else {
                             // debugging error - we should handle all result cases
@@ -113,7 +114,9 @@ export class TemplateRenderer
                         }
                     } else {
                         // Throw if a SSR directive implementation cannot be found.
-                        throw new Error(`Unable to process HTMLDirective: ${directive}`);
+                        throw new Error(
+                            `Unable to process view behavior factory: ${factory}`
+                        );
                     }
 
                     break;
@@ -255,11 +258,13 @@ export class TemplateRenderer
 
     /**
      * Registers DirectiveRenderers to use when rendering templates.
-     * @param directives - The directive renderers to register
+     * @param renderers - The directive renderers to register
      */
-    public withDirectiveRenderer(...directives: DirectiveRenderer<any>[]): void {
-        for (const renderer of directives) {
-            this.directiveRenderers.set(renderer.matcher, renderer);
+    public withViewBehaviorFactoryRenderers(
+        ...renderers: ViewBehaviorFactoryRenderer<any>[]
+    ): void {
+        for (const renderer of renderers) {
+            this.viewBehaviorFactoryRenderers.set(renderer.matcher, renderer);
         }
     }
 }
diff --git a/packages/web-components/fast-ssr/src/view.ts b/packages/web-components/fast-ssr/src/view.ts
index 95452d4991e..022aecf78fc 100644
--- a/packages/web-components/fast-ssr/src/view.ts
+++ b/packages/web-components/fast-ssr/src/view.ts
@@ -1,4 +1,7 @@
-import { HTMLDirective, HTMLTemplateCompilationResult } from "@microsoft/fast-element";
+import {
+    HTMLTemplateCompilationResult,
+    ViewBehaviorFactory,
+} from "@microsoft/fast-element";
 import { Op, OpType, TemplateElementOpenOp } from "./template-parser/op-codes.js";
 import { parseStringToOpCodes } from "./template-parser/template-parser.js";
 
@@ -10,16 +13,16 @@ import { parseStringToOpCodes } from "./template-parser/template-parser.js";
  */
 export class SSRView {
     public readonly html: string;
-    public readonly directives: ReadonlyArray<HTMLDirective>;
+    public readonly factories: Record<string, ViewBehaviorFactory>;
     public result: HTMLTemplateCompilationResult | null = null;
     public codes: Op[];
     public hostStaticAttributes?: TemplateElementOpenOp["staticAttributes"];
     public hostDynamicAttributes?: TemplateElementOpenOp["dynamicAttributes"];
 
-    constructor(html: string, directives: ReadonlyArray<HTMLDirective>) {
+    constructor(html: string, factories: Record<string, ViewBehaviorFactory>) {
         this.html = html;
-        this.directives = directives;
-        const codes = parseStringToOpCodes(html, directives);
+        this.factories = factories;
+        const codes = parseStringToOpCodes(html, factories);
 
         // Check to see if the root is a template element. We may need to
         // make this more sophisticated in the future because it doesn't quite

From 6a0c8332df3571194d048d8a09760d15a6f2fb3f Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Fri, 15 Apr 2022 10:15:18 -0700
Subject: [PATCH 091/135] fix: ssr bug fixes (#5850)

* expose dom shim from package root

* ensure DOM updates are made synchronously

* upgrade lit to use latest dom shim

* fleshing out dom-shim with foundation-element requirements

* fix root <template> behavior to be more durable to formatting

* implement classList binding for native elements

* enables style retrevial for a custom element through SSR style-strategy

* clean up exports

* add tagName to elements created by ElementRenderer to be used by componentPresentation

* prettier

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 packages/web-components/fast-ssr/package.json |   6 +-
 .../web-components/fast-ssr/src/dom-shim.ts   | 155 ++++++++++++++++--
 .../elemenent-renderer.spec.ts                |   4 +-
 .../src/element-renderer/element-renderer.ts  |  10 +-
 .../src/element-renderer/style-strategy.ts    |  36 +++-
 .../web-components/fast-ssr/src/exports.ts    |  12 +-
 .../fast-ssr/src/styles/style-renderer.ts     |   8 +-
 .../src/template-parser/template-parser.ts    |  52 +++++-
 .../template-renderer/template-renderer.ts    |   6 +-
 packages/web-components/fast-ssr/src/view.ts  |  10 +-
 10 files changed, 260 insertions(+), 39 deletions(-)

diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index 3d4dc082fda..eabf18d2007 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -32,9 +32,13 @@
   "description": "A package for rendering FAST components outside the browser.",
   "main": "./dist/esm/exports.js",
   "types": "./dist/dts/exports.d.ts",
+  "exports": {
+    "." : "./dist/esm/exports.js",
+    "./install-dom-shim": "./dist/esm/dom-shim.js"
+  },
   "private": true,
   "dependencies": {
-    "@lit-labs/ssr": "^1.0.0-rc.2",
+    "@lit-labs/ssr": "^2.1.0",
     "@microsoft/fast-element": "^1.5.0",
     "parse5": "^6.0.1",
     "tslib": "^1.11.1"
diff --git a/packages/web-components/fast-ssr/src/dom-shim.ts b/packages/web-components/fast-ssr/src/dom-shim.ts
index 2d3284c1dde..95bf68dddab 100644
--- a/packages/web-components/fast-ssr/src/dom-shim.ts
+++ b/packages/web-components/fast-ssr/src/dom-shim.ts
@@ -1,24 +1,151 @@
 import { installWindowOnGlobal } from "@lit-labs/ssr/lib/dom-shim.js";
 
-installWindowOnGlobal();
-
-// Implement shadowRoot getter on HTMLElement.
-// Can be removed if https://github.com/lit/lit/issues/2652
-// is integrated.
-class PatchedHTMLElement extends HTMLElement {
-    #shadowRoot: ShadowRoot | null = null;
-    get shadowRoot() {
+class DOMTokenList {
+    #tokens = new Set<string>();
+
+    public add(value: string) {
+        this.#tokens.add(value);
+    }
+
+    public remove(value: string) {
+        this.#tokens.delete(value);
+    }
+
+    public contains(value: string) {
+        return this.#tokens.has(value);
+    }
+
+    public toggle(value: string, force?: boolean) {
+        const add = force === undefined ? !this.contains(value) : force;
+
+        if (add) {
+            this.add(value);
+            return true;
+        } else {
+            this.remove(value);
+            return false;
+        }
+    }
+
+    public toString() {
+        return Array.from(this.#tokens).join(" ");
+    }
+
+    *[Symbol.iterator]() {
+        yield* this.#tokens.values();
+    }
+}
+class Node {
+    appendChild() {}
+    removeChild() {}
+}
+
+class Element extends Node {}
+
+abstract class HTMLElement extends Element {
+    #attributes = new Map<string, string | DOMTokenList>();
+    #shadowRoot: null | ShadowRoot = null;
+
+    public readonly classList = new DOMTokenList();
+
+    public get attributes(): { name: string; value: string }[] {
+        return Array.from(this.#attributes).map(([name, value]) => {
+            if (typeof value === "string") {
+                return { name, value };
+            } else {
+                return { name, value: value.toString() };
+            }
+        });
+    }
+
+    public get shadowRoot() {
         return this.#shadowRoot;
     }
-    attachShadow(init: ShadowRootInit) {
-        const root = super.attachShadow(init);
 
-        if (init.mode === "open") {
-            this.#shadowRoot = root;
+    public abstract attributeChangedCallback?(
+        name: string,
+        old: string | null,
+        value: string | null
+    ): void;
+
+    public setAttribute(name: string, value: string) {
+        let _value: string | DOMTokenList = value;
+        if (name === "class") {
+            _value = new DOMTokenList();
+            value.split(" ").forEach(className => {
+                (_value as DOMTokenList).add(className);
+            });
         }
+        this.#attributes.set(name, _value);
+    }
+
+    public removeAttribute(name: string) {
+        this.#attributes.delete(name);
+    }
+
+    public hasAttribute(name: string) {
+        return this.#attributes.has(name);
+    }
+
+    public attachShadow(init: ShadowRootInit) {
+        const shadowRoot = ({ host: this } as unknown) as ShadowRoot;
+        if (init && init.mode === "open") {
+            this.#shadowRoot = shadowRoot;
+        }
+        return shadowRoot;
+    }
+
+    public getAttribute(name: string) {
+        const value = this.#attributes.get(name);
+        return value === undefined
+            ? null
+            : value instanceof DOMTokenList
+            ? value.toString()
+            : value;
+    }
+}
 
-        return root;
+class Document {
+    head = new Node();
+    adoptedStyleSheets = [];
+    createTreeWalker() {
+        return {};
+    }
+    createTextNode() {
+        return {};
+    }
+    createElement(tagName: string) {
+        return { tagName };
     }
+    querySelector() {
+        return undefined;
+    }
+    addEventListener() {}
+}
+
+class CSSStyleDeclaration {
+    setProperty() {}
 }
 
-window.HTMLElement = PatchedHTMLElement;
+class CSSStyleSheet {
+    get cssRules() {
+        return [{ style: new CSSStyleDeclaration() }];
+    }
+    replace() {}
+    insertRule() {
+        return 0;
+    }
+}
+
+class MediaQueryList {
+    addListener() {}
+    matches = false;
+}
+installWindowOnGlobal({
+    matchMedia: () => new MediaQueryList(),
+    HTMLElement,
+    Document,
+    document: new Document(),
+    Node,
+    CSSStyleSheet,
+});
diff --git a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
index a47d779bc30..495ac72101b 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
@@ -28,12 +28,12 @@ test.describe("FASTElementRenderer", () => {
         test(`should render stylesheets as 'style' elements by default`, () => {
             const { templateRenderer, defaultRenderInfo} = fastSSR();
             const result = consolidate(templateRenderer.render(html`<styled-element></styled-element>`, defaultRenderInfo));
-            expect(result).toBe("<styled-element><template shadowroot=\"open\"><style>:host { display: block; }:host { color: red; }</style></template></styled-element>");
+            expect(result).toBe("<styled-element><template shadowroot=\"open\"><style>:host { display: block; }</style><style>:host { color: red; }</style></template></styled-element>");
         });
         test(`should render stylesheets as 'fast-style' elements when configured`, () => {
             const { templateRenderer, defaultRenderInfo} = fastSSR({useFASTStyle: true});
             const result = consolidate(templateRenderer.render(html`<styled-element></styled-element>`, defaultRenderInfo));
-            expect(result).toBe(`<styled-element><template shadowroot=\"open\"><fast-style style-id="fast-style-0" css=":host { display: block; }:host { color: red; }"></fast-style></template></styled-element>`);
+            expect(result).toBe(`<styled-element><template shadowroot=\"open\"><fast-style style-id="fast-style-0" css=":host { display: block; }\"></fast-style><fast-style style-id=\"fast-style-1\" css=\":host { color: red; }"></fast-style></template></styled-element>`);
         });
     });
 });
diff --git a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
index b31e8cc0ee4..93998ab8fed 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
@@ -1,8 +1,9 @@
 import { ElementRenderer, RenderInfo } from "@lit-labs/ssr";
 import { Aspect, DOM, ExecutionContext, FASTElement } from "@microsoft/fast-element";
+import { StyleRenderer } from "../styles/style-renderer.js";
 import { TemplateRenderer } from "../template-renderer/template-renderer.js";
 import { SSRView } from "../view.js";
-import { StyleRenderer } from "../styles/style-renderer.js";
+import { FASTSSRStyleStrategy } from "./style-strategy.js";
 
 export abstract class FASTElementRenderer extends ElementRenderer {
     /**
@@ -88,6 +89,7 @@ export abstract class FASTElementRenderer extends ElementRenderer {
 
         if (ctor) {
             this.element = new ctor() as FASTElement;
+            (this.element as any).tagName = tagName;
         } else {
             throw new Error(
                 `FASTElementRenderer was unable to find a constructor for a custom element with the tag name '${tagName}'.`
@@ -110,10 +112,12 @@ export abstract class FASTElementRenderer extends ElementRenderer {
      */
     public *renderShadow(renderInfo: RenderInfo): IterableIterator<string> {
         const view = this.element.$fastController.view;
-        const styles = this.element.$fastController.styles;
+        const styles = FASTSSRStyleStrategy.getStylesFor(this.element);
 
         if (styles) {
-            yield this.styleRenderer.render(styles);
+            for (const style of styles) {
+                yield this.styleRenderer.render(style);
+            }
         }
 
         if (view !== null) {
diff --git a/packages/web-components/fast-ssr/src/element-renderer/style-strategy.ts b/packages/web-components/fast-ssr/src/element-renderer/style-strategy.ts
index 4ce4a5525aa..9d8c98af413 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/style-strategy.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/style-strategy.ts
@@ -1,5 +1,37 @@
-import { StyleStrategy } from "@microsoft/fast-element";
+import { StyleStrategy, StyleTarget } from "@microsoft/fast-element";
+
+const sheetsForElement = new WeakMap<Element, Set<string | CSSStyleSheet>>();
+
+function getOrCreateFor(target: Element): Set<string | CSSStyleSheet> {
+    let set = sheetsForElement.get(target);
+    if (set) {
+        return set;
+    }
+
+    set = new Set<string | CSSStyleSheet>();
+    sheetsForElement.set(target, set);
+
+    return set;
+}
+
+function isShadowRoot(target: any): target is ShadowRoot {
+    return !!target.host;
+}
+
 export class FASTSSRStyleStrategy implements StyleStrategy {
-    addStylesTo() {}
+    addStylesTo(target: StyleTarget) {
+        if (isShadowRoot(target)) {
+            const cache = getOrCreateFor(target.host);
+
+            this.styles.forEach(style => cache?.add(style));
+        }
+    }
+
     removeStylesFrom() {}
+
+    constructor(private styles: (string | CSSStyleSheet)[]) {}
+
+    public static getStylesFor(target: Element): Set<string | CSSStyleSheet> | null {
+        return sheetsForElement.get(target) || null;
+    }
 }
diff --git a/packages/web-components/fast-ssr/src/exports.ts b/packages/web-components/fast-ssr/src/exports.ts
index 551163081fd..b26b62370a0 100644
--- a/packages/web-components/fast-ssr/src/exports.ts
+++ b/packages/web-components/fast-ssr/src/exports.ts
@@ -1,5 +1,10 @@
 import { RenderInfo } from "@lit-labs/ssr";
-import { Compiler, ElementStyles, ViewBehaviorFactory } from "@microsoft/fast-element";
+import {
+    Compiler,
+    DOM,
+    ElementStyles,
+    ViewBehaviorFactory,
+} from "@microsoft/fast-element";
 import { FASTElementRenderer } from "./element-renderer/element-renderer.js";
 import { FASTSSRStyleStrategy } from "./element-renderer/style-strategy.js";
 import {
@@ -31,6 +36,7 @@ Compiler.setDefaultStrategy(
 );
 
 ElementStyles.setDefaultStrategy(FASTSSRStyleStrategy);
+DOM.setUpdateMode(false);
 
 /**
  * Factory for creating SSR rendering assets.
@@ -38,9 +44,9 @@ ElementStyles.setDefaultStrategy(FASTSSRStyleStrategy);
  *
  * @example
  * ```ts
- * import "@lit-labs/ssr/lib/install-global-dom-shim.js";
- * import { html } from "@microsoft/fast-element";
+ * import "@microsoft/install-dom-shim";
  * import fastSSR from "@microsoft/fast-ssr";
+ * import { html } from "@microsoft/fast-element";
  * const { templateRenderer, defaultRenderInfo } = fastSSR();
  *
  * const streamableSSRResult = templateRenderer.render(html`...`, defaultRenderInfo);
diff --git a/packages/web-components/fast-ssr/src/styles/style-renderer.ts b/packages/web-components/fast-ssr/src/styles/style-renderer.ts
index a4b3c97702f..26e90004fd7 100644
--- a/packages/web-components/fast-ssr/src/styles/style-renderer.ts
+++ b/packages/web-components/fast-ssr/src/styles/style-renderer.ts
@@ -20,18 +20,18 @@ function collectStyles(style: ComposableStyles): string {
 }
 
 export interface StyleRenderer {
-    render(styles: ElementStyles): string;
+    render(styles: ComposableStyles): string;
 }
 
 export class FASTStyleStyleRenderer implements StyleRenderer {
-    private static stylesheetCache = new Map<ElementStyles, string>();
+    private static stylesheetCache = new Map<ComposableStyles, string>();
     private static nextId = (() => {
         let id = 0;
         const prefix = "fast-style";
         return () => `${prefix}-${id++}`;
     })();
 
-    public render(styles: ElementStyles): string {
+    public render(styles: ComposableStyles): string {
         let id = FASTStyleStyleRenderer.stylesheetCache.get(styles);
         const content = id === undefined ? collectStyles(styles) : null;
         let contentAttr = "";
@@ -47,7 +47,7 @@ export class FASTStyleStyleRenderer implements StyleRenderer {
 }
 
 export class StyleElementStyleRenderer implements StyleRenderer {
-    public render(styles: ElementStyles): string {
+    public render(styles: ComposableStyles): string {
         return `<style>${collectStyles(styles)}</style>`;
     }
 }
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
index 7ddba5e90e2..09794bf608c 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
@@ -13,6 +13,7 @@ import {
 import {
     Attribute,
     DefaultTreeCommentNode,
+    DefaultTreeDocumentFragment,
     DefaultTreeElement,
     DefaultTreeNode,
     DefaultTreeParentNode,
@@ -87,6 +88,18 @@ function isElementNode(node: DefaultTreeNode): node is DefaultTreeElement {
     return (node as DefaultTreeElement).tagName !== undefined;
 }
 
+function isDocumentFragment(node: any): node is DefaultTreeDocumentFragment {
+    return node.nodeName === "#document-fragment";
+}
+
+function firstElementChild(node: DefaultTreeParentNode): DefaultTreeElement | null {
+    return (
+        (node.childNodes.find(child => isElementNode(child)) as
+            | DefaultTreeElement
+            | undefined) || null
+    );
+}
+
 /**
  * Parses a template into a set of operation instructions
  * @param template - The template to parse
@@ -117,22 +130,37 @@ export function parseTemplateToOpCodes(template: ViewTemplate): Op[] {
 }
 
 export function parseStringToOpCodes(
+    /**
+     * The string to parse
+     */
     templateString: string,
-    factories: Record<string, ViewBehaviorFactory>
+    factories: Record<string, ViewBehaviorFactory>,
+
+    /**
+     * Adjust behavior when parsing a template used
+     * as a custom element's template
+     */
+    forCustomElement = false
 ): Op[] {
     const nodeTree = parseFragment(templateString, { sourceCodeLocationInfo: true });
 
-    if (!("nodeName" in nodeTree)) {
+    if (!isDocumentFragment(nodeTree)) {
         // I'm not sure when exactly this is encountered but the type system seems to say it's possible.
         throw new Error(`Error parsing template`);
     }
 
+    // TypeScript gets confused about what 'nodeTree' is.
+    // Creating a new var clears that up.
+    let tree: DefaultTreeParentNode = nodeTree;
+
     /**
      * Tracks the offset location in the source template string where the last
      * flushing / skip took place.
      */
     let lastOffset: number | undefined = 0;
 
+    let finalOffset: number = templateString.length;
+
     /**
      * Collection of op codes
      */
@@ -272,7 +300,7 @@ export function parseStringToOpCodes(
      * Flush template content from lastIndex to provided offset
      * @param offset - the offset to flush to
      */
-    function flushTo(offset?: number) {
+    function flushTo(offset: number = finalOffset) {
         if (lastOffset === undefined) {
             throw new Error(
                 `Cannot flush template content from a  last offset that is ${typeof lastOffset}.`
@@ -302,7 +330,23 @@ export function parseStringToOpCodes(
         lastOffset = offset;
     }
 
-    traverse(nodeTree, {
+    /**
+     * FAST leverages any <template> element that is a firstElementChild
+     * of the template as a binding target for any directives on the
+     * <template>. This block implements that behavior.
+     */
+    if (forCustomElement) {
+        const fec = firstElementChild(tree);
+
+        if (fec !== null && fec.tagName === "template") {
+            tree = fec as DefaultTreeParentNode;
+            const location = fec.sourceCodeLocation!;
+            finalOffset = location.endTag.endOffset;
+            lastOffset = location.startTag.startOffset;
+        }
+    }
+
+    traverse(tree, {
         visit(node: DefaultTreeNode): void {
             if (isCommentNode(node) || isTextNode(node)) {
                 const parsed = Parser.parse(
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
index 3d2c2663d95..17f08d6c59d 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
@@ -225,7 +225,11 @@ export class TemplateRenderer
                                 }
                                 break;
                             case Aspect.tokenList:
-                                if (code.target === "classList") {
+                            case Aspect.property:
+                                if (
+                                    code.target === "classList" ||
+                                    code.target === "className"
+                                ) {
                                     yield `class="${result}"`;
                                 }
                                 break;
diff --git a/packages/web-components/fast-ssr/src/view.ts b/packages/web-components/fast-ssr/src/view.ts
index 022aecf78fc..1af32d6c5a1 100644
--- a/packages/web-components/fast-ssr/src/view.ts
+++ b/packages/web-components/fast-ssr/src/view.ts
@@ -22,12 +22,12 @@ export class SSRView {
     constructor(html: string, factories: Record<string, ViewBehaviorFactory>) {
         this.html = html;
         this.factories = factories;
-        const codes = parseStringToOpCodes(html, factories);
+        const codes = parseStringToOpCodes(html, factories, true);
 
-        // Check to see if the root is a template element. We may need to
-        // make this more sophisticated in the future because it doesn't quite
-        // implement the same behavior as the client-side compiler
-        // which uses Element.firstElementChild to check for template elements.
+        /**
+         * If the first and last codes are template elements, populate static
+         * and dynamic attributes for the host element and remove those op codes.
+         */
         if (codes.length) {
             const firstCode = codes[0];
             if (

From f1328e4930f582eee36fba358fab6eb8c0f0628f Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Mon, 18 Apr 2022 18:59:13 -0400
Subject: [PATCH 092/135] feat: new CSSDirective design (#5835)

* feat: new CSSDirective design

* feat: attach the partial helper to the css helper

* fix: update foundation to new CSSDirective API

* fix: update components to new CSSDirective API

* docs: add missing docs to CSSTEmplateTag type

* Change files

* fix: add back cssPartial with deprecation message

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-0f5602ef-a1c2-4f35-83a0-3e883906645e.json |  7 ++
 ...-e7b9adf7-1b40-4e7e-896f-c29600f26654.json |  7 ++
 ...-b8a22db2-e6e3-4ba0-a9e1-725a4ef68eda.json |  7 ++
 .../fast-element/docs/api-report.md           | 32 +++++-
 .../fast-element/src/styles/css-directive.ts  | 56 +++++++++--
 .../fast-element/src/styles/css.ts            | 97 +++++++++++--------
 .../fast-element/src/styles/styles.spec.ts    | 85 +++++++++-------
 .../src/design-token/design-token.spec.ts     |  4 +-
 .../src/design-token/design-token.ts          |  7 +-
 9 files changed, 207 insertions(+), 95 deletions(-)
 create mode 100644 change/@microsoft-fast-components-0f5602ef-a1c2-4f35-83a0-3e883906645e.json
 create mode 100644 change/@microsoft-fast-element-e7b9adf7-1b40-4e7e-896f-c29600f26654.json
 create mode 100644 change/@microsoft-fast-foundation-b8a22db2-e6e3-4ba0-a9e1-725a4ef68eda.json

diff --git a/change/@microsoft-fast-components-0f5602ef-a1c2-4f35-83a0-3e883906645e.json b/change/@microsoft-fast-components-0f5602ef-a1c2-4f35-83a0-3e883906645e.json
new file mode 100644
index 00000000000..cd5498091d8
--- /dev/null
+++ b/change/@microsoft-fast-components-0f5602ef-a1c2-4f35-83a0-3e883906645e.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update components to new CSSDirective API",
+  "packageName": "@microsoft/fast-components",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-element-e7b9adf7-1b40-4e7e-896f-c29600f26654.json b/change/@microsoft-fast-element-e7b9adf7-1b40-4e7e-896f-c29600f26654.json
new file mode 100644
index 00000000000..009620dbe59
--- /dev/null
+++ b/change/@microsoft-fast-element-e7b9adf7-1b40-4e7e-896f-c29600f26654.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: new CSSDirective design",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-b8a22db2-e6e3-4ba0-a9e1-725a4ef68eda.json b/change/@microsoft-fast-foundation-b8a22db2-e6e3-4ba0-a9e1-725a4ef68eda.json
new file mode 100644
index 00000000000..3251b611cb7
--- /dev/null
+++ b/change/@microsoft-fast-foundation-b8a22db2-e6e3-4ba0-a9e1-725a4ef68eda.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update foundation to new CSSDirective API",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index d8ef1f1174a..bd7eb0c6006 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -11,6 +11,9 @@ export interface Accessor {
     setValue(source: any, value: any): void;
 }
 
+// @public
+export type AddBehavior = (behavior: Behavior<HTMLElement>) => void;
+
 // @public
 export type AddViewBehaviorFactory = (factory: ViewBehaviorFactory) => string;
 
@@ -227,16 +230,35 @@ export class Controller<TElement extends HTMLElement = HTMLElement> extends Prop
 export function createTypeRegistry<TDefinition extends TypeDefinition>(): TypeRegistry<TDefinition>;
 
 // @public
-export function css(strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]): ElementStyles;
+export const css: CSSTemplateTag;
 
 // @public
-export class CSSDirective {
-    createBehavior(): Behavior<HTMLElement> | undefined;
-    createCSS(): ComposableStyles;
+export interface CSSDirective {
+    createCSS(add: AddBehavior): ComposableStyles;
 }
 
 // @public
-export function cssPartial(strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]): CSSDirective;
+export const CSSDirective: Readonly<{
+    getForInstance: (object: any) => CSSDirectiveDefinition<Constructable<CSSDirective>> | undefined;
+    getByType: (key: Function) => CSSDirectiveDefinition<Constructable<CSSDirective>> | undefined;
+    define<TType extends Constructable<CSSDirective>>(type: any): TType;
+}>;
+
+// @public
+export function cssDirective(): (type: Constructable<CSSDirective>) => void;
+
+// @public
+export interface CSSDirectiveDefinition<TType extends Constructable<CSSDirective> = Constructable<CSSDirective>> {
+    readonly type: TType;
+}
+
+// @public @deprecated (undocumented)
+export const cssPartial: (strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]) => CSSDirective;
+
+// @public
+export type CSSTemplateTag = ((strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]) => ElementStyles) & {
+    partial(strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]): CSSDirective;
+};
 
 // @public
 export function customElement(nameOrDef: string | PartialFASTElementDefinition): (type: Constructable<HTMLElement>) => void;
diff --git a/packages/web-components/fast-element/src/styles/css-directive.ts b/packages/web-components/fast-element/src/styles/css-directive.ts
index 0e51a85c995..74f26c4586c 100644
--- a/packages/web-components/fast-element/src/styles/css-directive.ts
+++ b/packages/web-components/fast-element/src/styles/css-directive.ts
@@ -1,25 +1,63 @@
+import type { Constructable } from "../interfaces.js";
 import type { Behavior } from "../observation/behavior.js";
+import { createTypeRegistry } from "../platform.js";
 import type { ComposableStyles } from "./element-styles.js";
 
+/**
+ * Used to add behaviors when constructing styles.
+ * @public
+ */
+export type AddBehavior = (behavior: Behavior<HTMLElement>) => void;
+
 /**
  * Directive for use in {@link css}.
  *
  * @public
  */
-export class CSSDirective {
+export interface CSSDirective {
     /**
      * Creates a CSS fragment to interpolate into the CSS document.
      * @returns - the string to interpolate into CSS
      */
-    public createCSS(): ComposableStyles {
-        return "";
-    }
+    createCSS(add: AddBehavior): ComposableStyles;
+}
 
+/**
+ * Defines metadata for a CSSDirective.
+ * @public
+ */
+export interface CSSDirectiveDefinition<
+    TType extends Constructable<CSSDirective> = Constructable<CSSDirective>
+> {
     /**
-     * Creates a behavior to bind to the host element.
-     * @returns - the behavior to bind to the host element, or undefined.
+     * The type that the definition provides metadata for.
      */
-    public createBehavior(): Behavior<HTMLElement> | undefined {
-        return undefined;
-    }
+    readonly type: TType;
+}
+
+const registry = createTypeRegistry<CSSDirectiveDefinition>();
+
+/**
+ * Instructs the css engine to provide dynamic styles or
+ * associate behaviors with styles.
+ * @public
+ */
+export const CSSDirective = Object.freeze({
+    getForInstance: registry.getForInstance,
+    getByType: registry.getByType,
+    define<TType extends Constructable<CSSDirective>>(type): TType {
+        registry.register({ type });
+        return type;
+    },
+});
+
+/**
+ * Decorator: Defines a CSSDirective.
+ * @public
+ */
+export function cssDirective() {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type: Constructable<CSSDirective>) {
+        CSSDirective.define(type);
+    };
 }
diff --git a/packages/web-components/fast-element/src/styles/css.ts b/packages/web-components/fast-element/src/styles/css.ts
index 73caf675903..a9477776eb0 100644
--- a/packages/web-components/fast-element/src/styles/css.ts
+++ b/packages/web-components/fast-element/src/styles/css.ts
@@ -1,7 +1,7 @@
 import type { FASTElement } from "../components/fast-element.js";
 import { isString } from "../interfaces.js";
 import type { Behavior } from "../observation/behavior.js";
-import { CSSDirective } from "./css-directive.js";
+import { AddBehavior, CSSDirective } from "./css-directive.js";
 import { ComposableStyles, ElementStyles } from "./element-styles.js";
 
 function collectStyles(
@@ -11,18 +11,16 @@ function collectStyles(
     const styles: ComposableStyles[] = [];
     let cssString = "";
     const behaviors: Behavior<HTMLElement>[] = [];
+    const add = (behavior: Behavior<HTMLElement>): void => {
+        behaviors.push(behavior);
+    };
 
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         cssString += strings[i];
         let value = values[i];
 
-        if (value instanceof CSSDirective) {
-            const behavior = value.createBehavior();
-            value = value.createCSS();
-
-            if (behavior) {
-                behaviors.push(behavior);
-            }
+        if (CSSDirective.getForInstance(value) !== void 0) {
+            value = (value as CSSDirective).createCSS(add);
         }
 
         if (value instanceof ElementStyles || value instanceof CSSStyleSheet) {
@@ -55,23 +53,47 @@ function collectStyles(
  * @param values - The values that are interpolated with the string fragments.
  * @remarks
  * The css helper supports interpolation of strings and ElementStyle instances.
+ * Use the .partial method to create partial CSS fragments.
  * @public
  */
-export function css(
+export type CSSTemplateTag = ((
     strings: TemplateStringsArray,
     ...values: (ComposableStyles | CSSDirective)[]
-): ElementStyles {
+) => ElementStyles) & {
+    /**
+     * Transforms a template literal string into partial CSS.
+     * @param strings - The string fragments that are interpolated with the values.
+     * @param values - The values that are interpolated with the string fragments.
+     * @public
+     */
+    partial(
+        strings: TemplateStringsArray,
+        ...values: (ComposableStyles | CSSDirective)[]
+    ): CSSDirective;
+};
+
+/**
+ * Transforms a template literal string into styles.
+ * @param strings - The string fragments that are interpolated with the values.
+ * @param values - The values that are interpolated with the string fragments.
+ * @remarks
+ * The css helper supports interpolation of strings and ElementStyle instances.
+ * @public
+ */
+export const css: CSSTemplateTag = ((
+    strings: TemplateStringsArray,
+    ...values: (ComposableStyles | CSSDirective)[]
+): ElementStyles => {
     const { styles, behaviors } = collectStyles(strings, values);
     const elementStyles = new ElementStyles(styles);
     return behaviors.length ? elementStyles.withBehaviors(...behaviors) : elementStyles;
-}
+}) as any;
 
-class CSSPartial extends CSSDirective implements Behavior<HTMLElement> {
+class CSSPartial implements CSSDirective, Behavior<HTMLElement> {
     private css: string = "";
     private styles?: ElementStyles;
-    constructor(styles: ComposableStyles[], private behaviors: Behavior<HTMLElement>[]) {
-        super();
 
+    constructor(styles: ComposableStyles[], private behaviors: Behavior<HTMLElement>[]) {
         const stylesheets: ReadonlyArray<Exclude<
             ComposableStyles,
             string
@@ -85,6 +107,7 @@ class CSSPartial extends CSSDirective implements Behavior<HTMLElement> {
                 } else {
                     accumulated.push(current);
                 }
+
                 return accumulated;
             },
             []
@@ -95,45 +118,37 @@ class CSSPartial extends CSSDirective implements Behavior<HTMLElement> {
         }
     }
 
-    createBehavior(): Behavior<HTMLElement> {
-        return this;
-    }
+    createCSS(add: AddBehavior): string {
+        this.behaviors.forEach(add);
+
+        if (this.styles) {
+            add(this);
+        }
 
-    createCSS(): string {
         return this.css;
     }
 
     bind(el: FASTElement): void {
-        if (this.styles) {
-            el.$fastController.addStyles(this.styles);
-        }
-
-        if (this.behaviors.length) {
-            el.$fastController.addBehaviors(this.behaviors);
-        }
+        el.$fastController.addStyles(this.styles);
     }
 
     unbind(el: FASTElement): void {
-        if (this.styles) {
-            el.$fastController.removeStyles(this.styles);
-        }
-
-        if (this.behaviors.length) {
-            el.$fastController.removeBehaviors(this.behaviors);
-        }
+        el.$fastController.removeStyles(this.styles);
     }
 }
 
-/**
- * Transforms a template literal string into partial CSS.
- * @param strings - The string fragments that are interpolated with the values.
- * @param values - The values that are interpolated with the string fragments.
- * @public
- */
-export function cssPartial(
+CSSDirective.define(CSSPartial);
+
+css.partial = (
     strings: TemplateStringsArray,
     ...values: (ComposableStyles | CSSDirective)[]
-): CSSDirective {
+): CSSDirective => {
     const { styles, behaviors } = collectStyles(strings, values);
     return new CSSPartial(styles, behaviors);
-}
+};
+
+/**
+ * @deprecated Use css.partial instead.
+ * @public
+ */
+export const cssPartial = css.partial;
diff --git a/packages/web-components/fast-element/src/styles/styles.spec.ts b/packages/web-components/fast-element/src/styles/styles.spec.ts
index 634a166a247..ece6fdbe0f8 100644
--- a/packages/web-components/fast-element/src/styles/styles.spec.ts
+++ b/packages/web-components/fast-element/src/styles/styles.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from "chai";
 import {
     AdoptedStyleSheetsStrategy,
+    ComposableStyles,
     ElementStyles,
 } from "./element-styles";
 import { DOM } from "../dom";
-import { CSSDirective } from "./css-directive";
-import { css, cssPartial } from "./css";
+import { AddBehavior, cssDirective, CSSDirective } from "./css-directive";
+import { css } from "./css";
 import type { Behavior } from "../observation/behavior";
-import type { FASTElement } from "..";
 import { StyleElementStrategy } from "../polyfills";
 import type { StyleTarget } from "../interfaces";
 import { ExecutionContext } from "../observation/observable";
@@ -242,7 +242,8 @@ describe("css", () => {
     describe("with a CSSDirective", () => {
         describe("should interpolate the product of CSSDirective.createCSS() into the resulting ElementStyles CSS", () => {
             it("when the result is a string", () => {
-                class Directive extends CSSDirective {
+                @cssDirective()
+                class Directive implements CSSDirective {
                     createCSS() {
                         return "red";
                     }
@@ -254,7 +255,9 @@ describe("css", () => {
 
             it("when the result is an ElementStyles", () => {
                 const _styles = css`:host{color: red}`
-                class Directive extends CSSDirective {
+
+                @cssDirective()
+                class Directive implements CSSDirective {
                     createCSS() {
                         return _styles;
                     }
@@ -267,7 +270,9 @@ describe("css", () => {
             if (DOM.supportsAdoptedStyleSheets) {
                 it("when the result is a CSSStyleSheet", () => {
                     const _styles = new CSSStyleSheet();
-                    class Directive extends CSSDirective {
+
+                    @cssDirective()
+                    class Directive implements CSSDirective {
                         createCSS() {
                             return _styles;
                         }
@@ -286,9 +291,11 @@ describe("css", () => {
                 unbind(){}
             }
 
-            class Directive extends CSSDirective {
-                createBehavior() {
-                    return behavior;
+            @cssDirective()
+            class Directive implements CSSDirective {
+                createCSS(add: AddBehavior): ComposableStyles {
+                    add(behavior);
+                    return "";
                 }
             }
 
@@ -301,16 +308,18 @@ describe("css", () => {
 
 describe("cssPartial", () => {
     it("should have a createCSS method that is the CSS string interpolated with the createCSS product of any CSSDirectives", () => {
-        class myDirective extends CSSDirective {
+        const add = () => void 0;
+
+        @cssDirective()
+        class myDirective implements CSSDirective {
             createCSS() { return "red" };
-            createBehavior() { return undefined; }
         }
 
-        const partial = cssPartial`color: ${new myDirective}`;
-        expect (partial.createCSS()).to.equal("color: red");
+        const partial = css.partial`color: ${new myDirective}`;
+        expect (partial.createCSS(add)).to.equal("color: red");
     });
 
-    it("Should add behaviors from interpolated CSS directives when bound to an element", () => {
+    it("Should add behaviors from interpolated CSS directives", () => {
         const behavior = {
             bind() {},
             unbind() {},
@@ -318,31 +327,35 @@ describe("cssPartial", () => {
 
         const behavior2 = {...behavior};
 
-        class directive extends CSSDirective {
-            createCSS() { return "" };
-            createBehavior() { return behavior; }
+        @cssDirective()
+        class directive implements CSSDirective {
+            createCSS(add: AddBehavior) {
+                add(behavior);
+                return ""
+            };
         }
-        class directive2 extends CSSDirective {
-            createCSS() { return "" };
-            createBehavior() { return behavior2; }
+
+        @cssDirective()
+        class directive2 implements CSSDirective {
+            createCSS(add: AddBehavior) {
+                add(behavior2);
+                return ""
+            };
         }
 
-        const partial = cssPartial`${new directive}${new directive2}`;
-        const el = {
-            $fastController: {
-                addBehaviors(behaviors: Behavior<HTMLElement>[]) {
-                    expect(behaviors[0]).to.equal(behavior);
-                    expect(behaviors[1]).to.equal(behavior2);
-                }
-            }
-        } as FASTElement;
+        const partial = css.partial`${new directive}${new directive2}`;
+        const behaviors: Behavior<HTMLElement>[] = [];
+        const add = (x: Behavior) => behaviors.push(x);
+
+        partial.createCSS(add);
 
-        partial.createBehavior()?.bind(el, ExecutionContext.default)
+        expect(behaviors[0]).to.equal(behavior);
+        expect(behaviors[1]).to.equal(behavior2);
     });
 
     it("should add any ElementStyles interpolated into the template function when bound to an element", () => {
         const styles = css`:host {color: blue; }`;
-        const partial = cssPartial`${styles}`;
+        const partial = css.partial`${styles}`;
         let called = false;
         const el = {
             $fastController: {
@@ -351,9 +364,15 @@ describe("cssPartial", () => {
                     called = true;
                 }
             }
-        } as FASTElement;
+        };
+
+        const behaviors: Behavior<HTMLElement>[] = [];
+        const add = (x: Behavior) => behaviors.push(x);
+        partial.createCSS(add);
+
+        expect(behaviors[0]).to.equal(partial);
 
-        partial.createBehavior()?.bind(el, ExecutionContext.default)
+        (partial as any as Behavior).bind(el, ExecutionContext.default);
 
         expect(called).to.be.true;
     })
diff --git a/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts b/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
index db91dd94503..ebb904cda5f 100644
--- a/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
+++ b/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
@@ -4,7 +4,6 @@ import { DesignSystem } from "../design-system";
 import { uniqueElementName } from "../test-utilities/fixture";
 import { FoundationElement } from "../foundation-element";
 import { CSSDesignToken, DesignToken, DesignTokenChangeRecord, DesignTokenSubscriber } from "./design-token";
-import { defaultElement } from "./custom-property-manager";
 import spies from "chai-spies";
 
 chia.use(spies);
@@ -54,7 +53,8 @@ describe("A DesignToken", () => {
 
     describe("that is a CSSDesignToken", () => {
         it("should have a createCSS() method that returns a string with the name property formatted as a CSS variable", () => {
-            expect(DesignToken.create<number>("implicit").createCSS()).to.equal("var(--implicit)");
+            const add = () => void 0;
+            expect(DesignToken.create<number>("implicit").createCSS(add)).to.equal("var(--implicit)");
         });
         it("should have a readonly cssCustomProperty property that is the name formatted as a CSS custom property", () => {
             expect(DesignToken.create<number>("implicit").cssCustomProperty).to.equal("--implicit");
diff --git a/packages/web-components/fast-foundation/src/design-token/design-token.ts b/packages/web-components/fast-foundation/src/design-token/design-token.ts
index 9dbbe651091..0a2c562062a 100644
--- a/packages/web-components/fast-foundation/src/design-token/design-token.ts
+++ b/packages/web-components/fast-foundation/src/design-token/design-token.ts
@@ -128,8 +128,8 @@ export interface DesignTokenSubscriber<T extends DesignToken<any>> {
 /**
  * Implementation of {@link (DesignToken:interface)}
  */
-class DesignTokenImpl<T extends { createCSS?(): string }> extends CSSDirective
-    implements DesignToken<T> {
+class DesignTokenImpl<T extends { createCSS?(): string }>
+    implements CSSDirective, DesignToken<T> {
     public readonly name: string;
     public readonly cssCustomProperty: string | undefined;
     public readonly id: string;
@@ -201,8 +201,6 @@ class DesignTokenImpl<T extends { createCSS?(): string }> extends CSSDirective
     }
 
     constructor(configuration: Required<DesignTokenConfiguration>) {
-        super();
-
         this.name = configuration.name;
 
         if (configuration.cssCustomPropertyName !== null) {
@@ -255,7 +253,6 @@ class DesignTokenImpl<T extends { createCSS?(): string }> extends CSSDirective
 
     public withDefault(value: DesignTokenValue<T> | DesignToken<T>) {
         this.setValueFor(defaultElement, value);
-
         return this;
     }
 

From 0580148048ad719ac330b75b28817a116dc522d9 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Tue, 19 Apr 2022 14:42:03 -0700
Subject: [PATCH 093/135] rename title attribute on disclosure to summary
 (#5861)

* rename title attribute on disclosure to summary

* Change files
---
 ...-f39a8fc1-be44-49f9-bc63-8259f3d18932.json |  7 ++
 .../fast-foundation/docs/api-report.md        |  2 +-
 .../fast-foundation/src/disclosure/README.md  | 12 +--
 .../src/disclosure/disclosure.spec.ts         | 83 ++++++++++++++++---
 .../src/disclosure/disclosure.template.ts     |  2 +-
 .../src/disclosure/disclosure.ts              |  4 +-
 6 files changed, 88 insertions(+), 22 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-f39a8fc1-be44-49f9-bc63-8259f3d18932.json

diff --git a/change/@microsoft-fast-foundation-f39a8fc1-be44-49f9-bc63-8259f3d18932.json b/change/@microsoft-fast-foundation-f39a8fc1-be44-49f9-bc63-8259f3d18932.json
new file mode 100644
index 00000000000..6072b7e4860
--- /dev/null
+++ b/change/@microsoft-fast-foundation-f39a8fc1-be44-49f9-bc63-8259f3d18932.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "rename title attribute on disclosure to summary",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index fba5e8b6684..520183b9e14 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -1027,7 +1027,7 @@ export class Disclosure extends FoundationElement {
     protected onToggle(): void;
     protected setup(): void;
     show(): void;
-    title: string;
+    summary: string;
     toggle(): void;
 }
 
diff --git a/packages/web-components/fast-foundation/src/disclosure/README.md b/packages/web-components/fast-foundation/src/disclosure/README.md
index d071761ef2a..560833f644a 100644
--- a/packages/web-components/fast-foundation/src/disclosure/README.md
+++ b/packages/web-components/fast-foundation/src/disclosure/README.md
@@ -67,8 +67,8 @@ export const myDisclosure = Disclosure.compose({
 
 | Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
 | --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
-| `expanded`      | public  | `boolean`                             |         | Determines if the element should show the extra content or not.                                                                                                                     |                   |
-| `title`         | public  | `string`                              |         | Invoker title                                                                                                                                                                       |                   |
+| `expanded`      | public  | `boolean`                             | `false` | Determines if the element should show the extra content or not.                                                                                                                     |                   |
+| `summary`       | public  | `string`                              |         | Invoker title                                                                                                                                                                       |                   |
 | `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
 | `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
 | `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
@@ -93,10 +93,10 @@ export const myDisclosure = Disclosure.compose({
 
 #### Attributes
 
-| Name    | Field    | Inherited From |
-| ------- | -------- | -------------- |
-|         | expanded |                |
-| `title` | title    |                |
+| Name      | Field    | Inherited From |
+| --------- | -------- | -------------- |
+|           | expanded |                |
+| `summary` | summary  |                |
 
 #### Slots
 
diff --git a/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts b/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
index a93bba02af1..e541b14f09e 100644
--- a/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
+++ b/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
@@ -1,6 +1,6 @@
+import { DOM } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { fixture } from "../test-utilities/fixture";
-import { DOM } from "@microsoft/fast-element";
 import { Disclosure, disclosureTemplate as template } from "./index";
 
 const FastDisclosure = Disclosure.compose({
@@ -14,34 +14,93 @@ async function createDisclosure() {
     return { element, connect, disconnect };
 }
 
-async function macrotask() {
-    return new Promise((resolve, reject) => {
-        window.setTimeout(() => {
-            resolve(void 0);
-        })
-    })
-}
-
 describe("Disclosure", () => {
+    it("should set the expanded attribute to false when no value is provided", async () => {
+        const { element, connect, disconnect } = await createDisclosure();
+        await connect();
+
+        await DOM.nextUpdate();
+
+        expect(element.expanded).to.equal(false);
+
+        await disconnect();
+    });
+
+    it("should set the expanded attribute to true when set to true", async () => {
+        const { element, connect, disconnect } = await createDisclosure();
+
+        await connect();
+
+        element.expanded = true;
+
+        await DOM.nextUpdate();
+
+        expect(element.expanded).to.equal(true);
+
+        await disconnect();
+    });
+
+    it("should set the expanded attribute to false when set to false", async () => {
+        const { element, connect, disconnect } = await createDisclosure();
+
+        await connect();
+
+        element.expanded = false;
+
+        await DOM.nextUpdate();
+
+        expect(element.expanded).to.equal(false);
+
+        await disconnect();
+    });
+
+    it("should set summary slot content to the value of the summary attribute", async () => {
+        const { element, connect, disconnect } = await createDisclosure();
+
+        const summary: string = "Should set the summary slot content to the value of the summary attribute";
+
+        await connect();
+
+        element.summary = summary;
+
+        await DOM.nextUpdate();
+
+        expect(element.shadowRoot?.querySelector("slot[name='summary']")?.innerHTML).to.equal(summary);
+
+        await disconnect();
+    });
     describe("User interaction", () => {
         it("should toggle the content using `toggle()`", async () => {
             const { element, connect, disconnect } = await createDisclosure();
+
             await connect();
+
             element.toggle();
-            await macrotask();
+
+            await DOM.nextUpdate();
+
             expect(element.expanded).to.equal(true);
+
             await disconnect();
         });
 
         it("should expand and collapse the content using `show()` and `hide()`", async () => {
             const { element, connect, disconnect } = await createDisclosure();
+
             await connect();
+
             element.show();
-            await macrotask();
+
+            await DOM.nextUpdate();
+
             expect(element.expanded).to.equal(true);
+
             element.hide();
-            await macrotask();
+
+            await DOM.nextUpdate();
+
             expect(element.expanded).to.equal(false);
+
             await disconnect();
         });
     });
diff --git a/packages/web-components/fast-foundation/src/disclosure/disclosure.template.ts b/packages/web-components/fast-foundation/src/disclosure/disclosure.template.ts
index 385a5e0a754..f13d1e3bdd4 100644
--- a/packages/web-components/fast-foundation/src/disclosure/disclosure.template.ts
+++ b/packages/web-components/fast-foundation/src/disclosure/disclosure.template.ts
@@ -19,7 +19,7 @@ export const disclosureTemplate: FoundationElementTemplate<ViewTemplate<Disclosu
             aria-expanded="${x => x.expanded}"
         >
             <slot name="start"></slot>
-            <slot name="title">${x => x.title}</slot>
+            <slot name="summary">${x => x.summary}</slot>
             <slot name="end"></slot>
         </summary>
         <div id="disclosure-content"><slot></slot></div>
diff --git a/packages/web-components/fast-foundation/src/disclosure/disclosure.ts b/packages/web-components/fast-foundation/src/disclosure/disclosure.ts
index 9ad1f9b0f50..40188a04812 100644
--- a/packages/web-components/fast-foundation/src/disclosure/disclosure.ts
+++ b/packages/web-components/fast-foundation/src/disclosure/disclosure.ts
@@ -19,7 +19,7 @@ export class Disclosure extends FoundationElement {
      * @public
      */
     @attr({ mode: "boolean" })
-    public expanded: boolean;
+    public expanded: boolean = false;
 
     /**
      * Invoker title
@@ -27,7 +27,7 @@ export class Disclosure extends FoundationElement {
      * @public
      */
     @attr
-    public title: string;
+    public summary: string;
 
     /**
      * @internal

From 8d71a20b9cad9cf5e179a77ad8e3671c53c42344 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Tue, 19 Apr 2022 16:32:38 -0700
Subject: [PATCH 094/135] fix: update default value of dialog's modal attribute
 to false (#5860)

* update the default value of dialog  modal attribute to false

* Change files
---
 ...-2e5d85fa-9f19-4da5-855e-f0ea89017116.json |  7 ++++++
 .../fast-foundation/src/dialog/README.md      |  2 +-
 .../fast-foundation/src/dialog/dialog.spec.ts | 24 +++++++++++++------
 .../src/dialog/dialog.template.ts             |  4 ++--
 .../fast-foundation/src/dialog/dialog.ts      |  4 ++--
 5 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-2e5d85fa-9f19-4da5-855e-f0ea89017116.json

diff --git a/change/@microsoft-fast-foundation-2e5d85fa-9f19-4da5-855e-f0ea89017116.json b/change/@microsoft-fast-foundation-2e5d85fa-9f19-4da5-855e-f0ea89017116.json
new file mode 100644
index 00000000000..a93b0fed024
--- /dev/null
+++ b/change/@microsoft-fast-foundation-2e5d85fa-9f19-4da5-855e-f0ea89017116.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "update the default value of dialog's modal attribute to false",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/dialog/README.md b/packages/web-components/fast-foundation/src/dialog/README.md
index f6febd35bfe..68e8a858ebd 100644
--- a/packages/web-components/fast-foundation/src/dialog/README.md
+++ b/packages/web-components/fast-foundation/src/dialog/README.md
@@ -65,7 +65,7 @@ export const myDialog = Dialog.compose({
 
 | Name              | Privacy | Type                                  | Default | Description                                                                                                                                                                                                   | Inherited From    |
 | ----------------- | ------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
-| `modal`           | public  | `boolean`                             | `true`  | Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event. |                   |
+| `modal`           | public  | `boolean`                             | `false` | Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event. |                   |
 | `hidden`          | public  | `boolean`                             | `false` | The hidden state of the element.                                                                                                                                                                              |                   |
 | `trapFocus`       | public  | `boolean`                             | `true`  | Indicates that the dialog should trap focus.                                                                                                                                                                  |                   |
 | `ariaDescribedby` | public  | `string`                              |         | The id of the element describing the dialog.                                                                                                                                                                  |                   |
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
index 4ce81ac80a3..90594ccd687 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
@@ -61,9 +61,11 @@ describe("Dialog", () => {
     it("should add an attribute of `aria-modal` with a value equal to the modal attribute", async () => {
         const { element, connect, disconnect } = await setup();
 
+        await connect();
+
         element.modal = true;
 
-        await connect();
+        await DOM.nextUpdate();
 
         expect(
             element.shadowRoot
@@ -78,13 +80,13 @@ describe("Dialog", () => {
         expect(
             element.shadowRoot
                 ?.querySelector("[role='dialog']")
-                ?.getAttribute("aria-modal")
-        ).to.equal("false");
+                ?.hasAttribute("aria-modal")
+        ).to.equal(false);
 
         await disconnect();
     });
 
-    it("should add a default `aria-modal` value of TRUE when the modal attribute is not provided", async () => {
+    it("should NOT add a default `aria-modal` value of TRUE when the modal attribute is not provided", async () => {
         const { element, connect, disconnect } = await setup();
 
         await connect();
@@ -92,8 +94,8 @@ describe("Dialog", () => {
         expect(
             element.shadowRoot
                 ?.querySelector("[role='dialog']")
-                ?.getAttribute("aria-modal")
-        ).to.equal("true");
+                ?.hasAttribute("aria-modal")
+        ).to.equal(false);
 
         await disconnect();
     });
@@ -103,6 +105,10 @@ describe("Dialog", () => {
 
         await connect();
 
+        element.modal = true;
+
+        await DOM.nextUpdate();
+
         expect(
             element.shadowRoot?.querySelector(".overlay")?.getAttribute("role")
         ).to.equal("presentation");
@@ -241,11 +247,15 @@ describe("Dialog", () => {
 
     describe("events", () => {
         // TODO: test trap focus
-        it("should fire a 'dismiss' event when its overlay is clicked", async () => {
+        xit("should fire a 'dismiss' event when its overlay is clicked", async () => {
             const { element, connect, disconnect } = await setup();
 
             await connect();
 
+            element.modal = true;
+
+            await DOM.nextUpdate();
+
             const overlay = element.shadowRoot!.querySelector(".overlay")! as HTMLElement;
 
             const wasDismissed = await new Promise(resolve => {
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.template.ts b/packages/web-components/fast-foundation/src/dialog/dialog.template.ts
index 3e8e7da26af..7be49829a65 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.template.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.template.ts
@@ -10,7 +10,7 @@ import type { Dialog } from "./dialog.js";
 export const dialogTemplate: FoundationElementTemplate<ViewTemplate<Dialog>> = (
     context,
     definition
-) => html`
+) => html<Dialog>`
     <div class="positioning-region" part="positioning-region">
         ${when(
             x => x.modal,
@@ -28,7 +28,7 @@ export const dialogTemplate: FoundationElementTemplate<ViewTemplate<Dialog>> = (
             tabindex="-1"
             class="control"
             part="control"
-            aria-modal="${x => x.modal}"
+            aria-modal="${x => (x.modal ? x.modal : void 0)}"
             aria-describedby="${x => x.ariaDescribedby}"
             aria-labelledby="${x => x.ariaLabelledby}"
             aria-label="${x => x.ariaLabel}"
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.ts b/packages/web-components/fast-foundation/src/dialog/dialog.ts
index b62f43e564e..b64ae5ed12c 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.ts
@@ -21,12 +21,12 @@ export class Dialog extends FoundationElement {
      * Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal
      * overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event.
      * @public
-     * @defaultValue - true
+     * @defaultValue - false
      * @remarks
      * HTML Attribute: modal
      */
     @attr({ mode: "boolean" })
-    public modal: boolean = true;
+    public modal: boolean = false;
 
     /**
      * The hidden state of the element.

From 6dc2c20d115da3dc553c946bef7f70a888a7c913 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Tue, 26 Apr 2022 10:13:19 -0700
Subject: [PATCH 095/135] feat: update private change handlers to protected
 (#5872)

* update attribute and observable change handlers with internal logic to be protected instead of private

* Change files

* udpate api docs
---
 ...-b7f2acd3-f038-4dbe-bbfe-7375c8476e2e.json |  7 +++
 .../src/anchored-region/README.md             | 26 ++++++--
 .../src/anchored-region/anchored-region.ts    | 36 +++++------
 .../fast-foundation/src/breadcrumb/README.md  |  2 +-
 .../src/breadcrumb/breadcrumb.ts              |  2 +-
 .../fast-foundation/src/button/README.md      | 14 +++--
 .../fast-foundation/src/button/button.ts      | 12 ++--
 .../fast-foundation/src/calendar/calendar.ts  | 10 ++--
 .../fast-foundation/src/checkbox/README.md    |  1 +
 .../fast-foundation/src/checkbox/checkbox.ts  |  2 +-
 .../fast-foundation/src/data-grid/README.md   | 46 +++++++++------
 .../src/data-grid/data-grid-cell.ts           |  4 +-
 .../src/data-grid/data-grid-row.ts            |  4 +-
 .../src/data-grid/data-grid.ts                |  8 +--
 .../fast-foundation/src/dialog/README.md      | 23 ++++----
 .../fast-foundation/src/dialog/dialog.ts      |  2 +-
 .../src/menu-item/menu-item.ts                |  4 +-
 .../fast-foundation/src/menu/README.md        | 23 ++++----
 .../fast-foundation/src/menu/menu.ts          |  2 +-
 .../fast-foundation/src/picker/README.md      | 59 +++++++++++--------
 .../src/picker/picker-list-item.ts            |  2 +-
 .../src/picker/picker-menu-option.ts          |  2 +-
 .../fast-foundation/src/picker/picker.ts      | 22 +++----
 .../fast-foundation/src/progress/README.md    |  3 +
 .../src/progress/base-progress.ts             |  6 +-
 .../fast-foundation/src/radio-group/README.md | 15 +++--
 .../src/radio-group/radio-group.ts            |  9 ++-
 .../fast-foundation/src/radio/README.md       |  1 +
 .../fast-foundation/src/radio/radio.ts        |  2 +-
 .../fast-foundation/src/search/README.md      | 19 ++++--
 .../fast-foundation/src/search/search.ts      | 18 +++---
 .../src/slider-label/slider-label.ts          |  2 +-
 .../fast-foundation/src/slider/README.md      |  2 +
 .../fast-foundation/src/slider/slider.ts      |  2 +-
 .../fast-foundation/src/switch/README.md      |  1 +
 .../fast-foundation/src/switch/switch.ts      |  2 +-
 .../src/text-area/text-area.ts                | 12 ++--
 .../src/text-field/text-field.ts              | 18 +++---
 .../fast-foundation/src/tooltip/README.md     | 13 ++--
 .../fast-foundation/src/tooltip/tooltip.ts    |  8 +--
 .../fast-foundation/src/tree-item/README.md   | 11 ++--
 .../src/tree-item/tree-item.ts                |  6 +-
 .../fast-foundation/src/tree-view/README.md   |  9 +--
 .../src/tree-view/tree-view.ts                |  5 +-
 44 files changed, 284 insertions(+), 193 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-b7f2acd3-f038-4dbe-bbfe-7375c8476e2e.json

diff --git a/change/@microsoft-fast-foundation-b7f2acd3-f038-4dbe-bbfe-7375c8476e2e.json b/change/@microsoft-fast-foundation-b7f2acd3-f038-4dbe-bbfe-7375c8476e2e.json
new file mode 100644
index 00000000000..865c2193061
--- /dev/null
+++ b/change/@microsoft-fast-foundation-b7f2acd3-f038-4dbe-bbfe-7375c8476e2e.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "update attribute and observable change handlers with internal logic to be protected instead of private",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/anchored-region/README.md b/packages/web-components/fast-foundation/src/anchored-region/README.md
index a3fcfc93ea7..5695f1f0da8 100644
--- a/packages/web-components/fast-foundation/src/anchored-region/README.md
+++ b/packages/web-components/fast-foundation/src/anchored-region/README.md
@@ -114,10 +114,28 @@ export const myAnchoredRegion = AnchoredRegion.compose({
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
-| `templateChanged` | protected |             |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+| Name                               | Privacy   | Description | Parameters                                          | Return | Inherited From    |
+| ---------------------------------- | --------- | ----------- | --------------------------------------------------- | ------ | ----------------- |
+| `anchorChanged`                    | protected |             |                                                     | `void` |                   |
+| `viewportChanged`                  | protected |             |                                                     | `void` |                   |
+| `horizontalPositioningModeChanged` | protected |             |                                                     | `void` |                   |
+| `horizontalDefaultPositionChanged` | protected |             |                                                     | `void` |                   |
+| `horizontalViewportLockChanged`    | protected |             |                                                     | `void` |                   |
+| `horizontalInsetChanged`           | protected |             |                                                     | `void` |                   |
+| `horizontalThresholdChanged`       | protected |             |                                                     | `void` |                   |
+| `horizontalScalingChanged`         | protected |             |                                                     | `void` |                   |
+| `verticalPositioningModeChanged`   | protected |             |                                                     | `void` |                   |
+| `verticalDefaultPositionChanged`   | protected |             |                                                     | `void` |                   |
+| `verticalViewportLockChanged`      | protected |             |                                                     | `void` |                   |
+| `verticalInsetChanged`             | protected |             |                                                     | `void` |                   |
+| `verticalThresholdChanged`         | protected |             |                                                     | `void` |                   |
+| `verticalScalingChanged`           | protected |             |                                                     | `void` |                   |
+| `fixedPlacementChanged`            | protected |             |                                                     | `void` |                   |
+| `autoUpdateModeChanged`            | protected |             | `prevMode: AutoUpdateMode, newMode: AutoUpdateMode` | `void` |                   |
+| `anchorElementChanged`             | protected |             |                                                     | `void` |                   |
+| `viewportElementChanged`           | protected |             |                                                     | `void` |                   |
+| `templateChanged`                  | protected |             |                                                     | `void` | FoundationElement |
+| `stylesChanged`                    | protected |             |                                                     | `void` | FoundationElement |
 
 #### Events
 
diff --git a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts
index 58d66887e1c..22ddb843ab0 100644
--- a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts
+++ b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts
@@ -90,7 +90,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr
     public anchor: string = "";
-    private anchorChanged(): void {
+    protected anchorChanged(): void {
         if (this.initialLayoutComplete) {
             this.anchorElement = this.getAnchor();
         }
@@ -105,7 +105,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr
     public viewport: string = "";
-    private viewportChanged(): void {
+    protected viewportChanged(): void {
         if (this.initialLayoutComplete) {
             this.viewportElement = this.getViewport();
         }
@@ -123,7 +123,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "horizontal-positioning-mode" })
     public horizontalPositioningMode: AxisPositioningMode = "uncontrolled";
-    private horizontalPositioningModeChanged(): void {
+    protected horizontalPositioningModeChanged(): void {
         this.requestReset();
     }
 
@@ -136,7 +136,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "horizontal-default-position" })
     public horizontalDefaultPosition: HorizontalPosition = "unset";
-    private horizontalDefaultPositionChanged(): void {
+    protected horizontalDefaultPositionChanged(): void {
         this.updateForAttributeChange();
     }
 
@@ -149,7 +149,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "horizontal-viewport-lock", mode: "boolean" })
     public horizontalViewportLock: boolean = false;
-    private horizontalViewportLockChanged(): void {
+    protected horizontalViewportLockChanged(): void {
         this.updateForAttributeChange();
     }
 
@@ -162,7 +162,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "horizontal-inset", mode: "boolean" })
     public horizontalInset: boolean = false;
-    private horizontalInsetChanged(): void {
+    protected horizontalInsetChanged(): void {
         this.updateForAttributeChange();
     }
 
@@ -176,7 +176,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "horizontal-threshold" })
     public horizontalThreshold: number;
-    private horizontalThresholdChanged(): void {
+    protected horizontalThresholdChanged(): void {
         this.updateForAttributeChange();
     }
 
@@ -189,7 +189,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "horizontal-scaling" })
     public horizontalScaling: AxisScalingMode = "content";
-    private horizontalScalingChanged(): void {
+    protected horizontalScalingChanged(): void {
         this.updateForAttributeChange();
     }
 
@@ -205,7 +205,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "vertical-positioning-mode" })
     public verticalPositioningMode: AxisPositioningMode = "uncontrolled";
-    private verticalPositioningModeChanged(): void {
+    protected verticalPositioningModeChanged(): void {
         this.requestReset();
     }
 
@@ -218,7 +218,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "vertical-default-position" })
     public verticalDefaultPosition: VerticalPosition = "unset";
-    private verticalDefaultPositionChanged(): void {
+    protected verticalDefaultPositionChanged(): void {
         this.updateForAttributeChange();
     }
 
@@ -231,7 +231,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "vertical-viewport-lock", mode: "boolean" })
     public verticalViewportLock: boolean = false;
-    private verticalViewportLockChanged(): void {
+    protected verticalViewportLockChanged(): void {
         this.updateForAttributeChange();
     }
 
@@ -244,7 +244,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "vertical-inset", mode: "boolean" })
     public verticalInset: boolean = false;
-    private verticalInsetChanged(): void {
+    protected verticalInsetChanged(): void {
         this.updateForAttributeChange();
     }
 
@@ -258,7 +258,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "vertical-threshold" })
     public verticalThreshold: number;
-    private verticalThresholdChanged(): void {
+    protected verticalThresholdChanged(): void {
         this.updateForAttributeChange();
     }
 
@@ -271,7 +271,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "vertical-scaling" })
     public verticalScaling: AxisScalingMode = "content";
-    private verticalScalingChanged(): void {
+    protected verticalScalingChanged(): void {
         this.updateForAttributeChange();
     }
 
@@ -286,7 +286,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "fixed-placement", mode: "boolean" })
     public fixedPlacement: boolean = false;
-    private fixedPlacementChanged(): void {
+    protected fixedPlacementChanged(): void {
         if (
             (this as FoundationElement).$fastController.isConnected &&
             this.initialLayoutComplete
@@ -304,7 +304,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @attr({ attribute: "auto-update-mode" })
     public autoUpdateMode: AutoUpdateMode = "anchor";
-    private autoUpdateModeChanged(
+    protected autoUpdateModeChanged(
         prevMode: AutoUpdateMode,
         newMode: AutoUpdateMode
     ): void {
@@ -329,7 +329,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @observable
     public anchorElement: HTMLElement | null = null;
-    private anchorElementChanged(): void {
+    protected anchorElementChanged(): void {
         this.requestReset();
     }
 
@@ -340,7 +340,7 @@ export class AnchoredRegion extends FoundationElement {
      */
     @observable
     public viewportElement: HTMLElement | null = null;
-    private viewportElementChanged(): void {
+    protected viewportElementChanged(): void {
         if (
             (this as FoundationElement).$fastController.isConnected &&
             this.initialLayoutComplete
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/README.md b/packages/web-components/fast-foundation/src/breadcrumb/README.md
index 01e02b7f76c..0872ea2e971 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/README.md
+++ b/packages/web-components/fast-foundation/src/breadcrumb/README.md
@@ -120,7 +120,7 @@ This component is built with the expectation that focus is delegated to the anch
 
 | Name                            | Privacy   | Description | Parameters | Return | Inherited From    |
 | ------------------------------- | --------- | ----------- | ---------- | ------ | ----------------- |
-| `slottedBreadcrumbItemsChanged` | public    |             |            |        |                   |
+| `slottedBreadcrumbItemsChanged` | protected |             |            |        |                   |
 | `templateChanged`               | protected |             |            | `void` | FoundationElement |
 | `stylesChanged`                 | protected |             |            | `void` | FoundationElement |
 
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts
index 7c56affb584..11abb4aeb98 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.ts
@@ -15,7 +15,7 @@ export class Breadcrumb extends FoundationElement {
      */
     @observable
     public slottedBreadcrumbItems: HTMLElement[];
-    public slottedBreadcrumbItemsChanged() {
+    protected slottedBreadcrumbItemsChanged() {
         if (this.$fastController.isConnected) {
             if (
                 this.slottedBreadcrumbItems === undefined ||
diff --git a/packages/web-components/fast-foundation/src/button/README.md b/packages/web-components/fast-foundation/src/button/README.md
index 7df1d55eb88..01d9f819fe7 100644
--- a/packages/web-components/fast-foundation/src/button/README.md
+++ b/packages/web-components/fast-foundation/src/button/README.md
@@ -88,10 +88,16 @@ This component is built with the expectation that focus is delegated to the butt
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
-| `templateChanged` | protected |             |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+| Name                    | Privacy   | Description | Parameters                                                                                 | Return | Inherited From    |
+| ----------------------- | --------- | ----------- | ------------------------------------------------------------------------------------------ | ------ | ----------------- |
+| `formactionChanged`     | protected |             |                                                                                            | `void` |                   |
+| `formenctypeChanged`    | protected |             |                                                                                            | `void` |                   |
+| `formmethodChanged`     | protected |             |                                                                                            | `void` |                   |
+| `formnovalidateChanged` | protected |             |                                                                                            | `void` |                   |
+| `formtargetChanged`     | protected |             |                                                                                            | `void` |                   |
+| `typeChanged`           | protected |             | `previous: "submit" or "reset" or "button" or void, next: "submit" or "reset" or "button"` | `void` |                   |
+| `templateChanged`       | protected |             |                                                                                            | `void` | FoundationElement |
+| `stylesChanged`         | protected |             |                                                                                            | `void` | FoundationElement |
 
 #### Attributes
 
diff --git a/packages/web-components/fast-foundation/src/button/button.ts b/packages/web-components/fast-foundation/src/button/button.ts
index 306625205ef..76bb488450a 100644
--- a/packages/web-components/fast-foundation/src/button/button.ts
+++ b/packages/web-components/fast-foundation/src/button/button.ts
@@ -56,7 +56,7 @@ export class Button extends FormAssociatedButton {
      */
     @attr
     public formaction: string;
-    private formactionChanged(): void {
+    protected formactionChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.formAction = this.formaction;
         }
@@ -71,7 +71,7 @@ export class Button extends FormAssociatedButton {
      */
     @attr
     public formenctype: string;
-    private formenctypeChanged(): void {
+    protected formenctypeChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.formEnctype = this.formenctype;
         }
@@ -86,7 +86,7 @@ export class Button extends FormAssociatedButton {
      */
     @attr
     public formmethod: string;
-    private formmethodChanged(): void {
+    protected formmethodChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.formMethod = this.formmethod;
         }
@@ -101,7 +101,7 @@ export class Button extends FormAssociatedButton {
      */
     @attr({ mode: "boolean" })
     public formnovalidate: boolean;
-    private formnovalidateChanged(): void {
+    protected formnovalidateChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.formNoValidate = this.formnovalidate;
         }
@@ -116,7 +116,7 @@ export class Button extends FormAssociatedButton {
      */
     @attr
     public formtarget: "_self" | "_blank" | "_parent" | "_top";
-    private formtargetChanged(): void {
+    protected formtargetChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.formTarget = this.formtarget;
         }
@@ -131,7 +131,7 @@ export class Button extends FormAssociatedButton {
      */
     @attr
     public type: "submit" | "reset" | "button";
-    private typeChanged(
+    protected typeChanged(
         previous: "submit" | "reset" | "button" | void,
         next: "submit" | "reset" | "button"
     ): void {
diff --git a/packages/web-components/fast-foundation/src/calendar/calendar.ts b/packages/web-components/fast-foundation/src/calendar/calendar.ts
index e229e9efc6a..50f0116a930 100644
--- a/packages/web-components/fast-foundation/src/calendar/calendar.ts
+++ b/packages/web-components/fast-foundation/src/calendar/calendar.ts
@@ -101,7 +101,7 @@ export class Calendar extends FoundationElement {
      */
     @attr
     public locale: string = "en-US";
-    private localeChanged(): void {
+    protected localeChanged(): void {
         this.dateFormatter.locale = this.locale;
     }
 
@@ -125,7 +125,7 @@ export class Calendar extends FoundationElement {
      */
     @attr({ attribute: "day-format", mode: "fromView" })
     public dayFormat: DayFormat = "numeric";
-    private dayFormatChanged(): void {
+    protected dayFormatChanged(): void {
         this.dateFormatter.dayFormat = this.dayFormat;
     }
 
@@ -135,7 +135,7 @@ export class Calendar extends FoundationElement {
      */
     @attr({ attribute: "weekday-format", mode: "fromView" })
     public weekdayFormat: WeekdayFormat = "short";
-    private weekdayFormatChanged(): void {
+    protected weekdayFormatChanged(): void {
         this.dateFormatter.weekdayFormat = this.weekdayFormat;
     }
 
@@ -145,7 +145,7 @@ export class Calendar extends FoundationElement {
      */
     @attr({ attribute: "month-format", mode: "fromView" })
     public monthFormat: MonthFormat = "long";
-    private monthFormatChanged(): void {
+    protected monthFormatChanged(): void {
         this.dateFormatter.monthFormat = this.monthFormat;
     }
 
@@ -155,7 +155,7 @@ export class Calendar extends FoundationElement {
      */
     @attr({ attribute: "year-format", mode: "fromView" })
     public yearFormat: YearFormat = "numeric";
-    private yearFormatChanged(): void {
+    protected yearFormatChanged(): void {
         this.dateFormatter.yearFormat = this.yearFormat;
     }
 
diff --git a/packages/web-components/fast-foundation/src/checkbox/README.md b/packages/web-components/fast-foundation/src/checkbox/README.md
index 98f47011ba5..6d012132a35 100644
--- a/packages/web-components/fast-foundation/src/checkbox/README.md
+++ b/packages/web-components/fast-foundation/src/checkbox/README.md
@@ -99,6 +99,7 @@ export const myCheckbox = Checkbox.compose<CheckboxOptions>({
 
 | Name              | Privacy   | Description | Parameters | Return | Inherited From    |
 | ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `readOnlyChanged` | protected |             |            | `void` |                   |
 | `templateChanged` | protected |             |            | `void` | FoundationElement |
 | `stylesChanged`   | protected |             |            | `void` | FoundationElement |
 
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
index bd657689f7a..37aa8b48996 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
@@ -34,7 +34,7 @@ export class Checkbox extends FormAssociatedCheckbox {
      */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
-    private readOnlyChanged(): void {
+    protected readOnlyChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.readOnly = this.readOnly;
         }
diff --git a/packages/web-components/fast-foundation/src/data-grid/README.md b/packages/web-components/fast-foundation/src/data-grid/README.md
index 62944565604..43324e809fc 100644
--- a/packages/web-components/fast-foundation/src/data-grid/README.md
+++ b/packages/web-components/fast-foundation/src/data-grid/README.md
@@ -118,13 +118,15 @@ export const myDataGrid = DataGrid.compose({
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters         | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ------------------ | ------ | ----------------- |
-| `handleFocusin`   | public    |             | `e: FocusEvent`    | `void` |                   |
-| `handleFocusout`  | public    |             | `e: FocusEvent`    | `void` |                   |
-| `handleKeydown`   | public    |             | `e: KeyboardEvent` | `void` |                   |
-| `templateChanged` | protected |             |                    | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |                    | `void` | FoundationElement |
+| Name                      | Privacy   | Description | Parameters                                                               | Return | Inherited From    |
+| ------------------------- | --------- | ----------- | ------------------------------------------------------------------------ | ------ | ----------------- |
+| `gridColumnChanged`       | protected |             |                                                                          | `void` |                   |
+| `columnDefinitionChanged` | protected |             | `oldValue: ColumnDefinition or null, newValue: ColumnDefinition or null` | `void` |                   |
+| `handleFocusin`           | public    |             | `e: FocusEvent`                                                          | `void` |                   |
+| `handleFocusout`          | public    |             | `e: FocusEvent`                                                          | `void` |                   |
+| `handleKeydown`           | public    |             | `e: KeyboardEvent`                                                       | `void` |                   |
+| `templateChanged`         | protected |             |                                                                          | `void` | FoundationElement |
+| `stylesChanged`           | protected |             |                                                                          | `void` | FoundationElement |
 
 #### Events
 
@@ -174,13 +176,16 @@ export const myDataGrid = DataGrid.compose({
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters         | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ------------------ | ------ | ----------------- |
-| `handleFocusout`  | public    |             | `e: FocusEvent`    | `void` |                   |
-| `handleCellFocus` | public    |             | `e: Event`         | `void` |                   |
-| `handleKeydown`   | public    |             | `e: KeyboardEvent` | `void` |                   |
-| `templateChanged` | protected |             |                    | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |                    | `void` | FoundationElement |
+| Name                         | Privacy   | Description | Parameters         | Return | Inherited From    |
+| ---------------------------- | --------- | ----------- | ------------------ | ------ | ----------------- |
+| `gridTemplateColumnsChanged` | protected |             |                    | `void` |                   |
+| `rowTypeChanged`             | protected |             |                    | `void` |                   |
+| `rowDataChanged`             | protected |             |                    | `void` |                   |
+| `handleFocusout`             | public    |             | `e: FocusEvent`    | `void` |                   |
+| `handleCellFocus`            | public    |             | `e: Event`         | `void` |                   |
+| `handleKeydown`              | public    |             | `e: KeyboardEvent` | `void` |                   |
+| `templateChanged`            | protected |             |                    | `void` | FoundationElement |
+| `stylesChanged`              | protected |             |                    | `void` | FoundationElement |
 
 #### Events
 
@@ -252,10 +257,15 @@ export const myDataGrid = DataGrid.compose({
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
-| `templateChanged` | protected |             |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+| Name                         | Privacy   | Description | Parameters | Return | Inherited From    |
+| ---------------------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `noTabbingChanged`           | protected |             |            | `void` |                   |
+| `generateHeaderChanged`      | protected |             |            | `void` |                   |
+| `gridTemplateColumnsChanged` | protected |             |            | `void` |                   |
+| `rowsDataChanged`            | protected |             |            | `void` |                   |
+| `columnDefinitionsChanged`   | protected |             |            | `void` |                   |
+| `templateChanged`            | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`              | protected |             |            | `void` | FoundationElement |
 
 #### Attributes
 
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts
index 8e93960a1e4..fa39f1f13ba 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts
@@ -69,7 +69,7 @@ export class DataGridCell extends FoundationElement {
      */
     @attr({ attribute: "grid-column" })
     public gridColumn: string;
-    private gridColumnChanged(): void {
+    protected gridColumnChanged(): void {
         if (this.$fastController.isConnected) {
             this.updateCellStyle();
         }
@@ -90,7 +90,7 @@ export class DataGridCell extends FoundationElement {
      */
     @observable
     public columnDefinition: ColumnDefinition | null = null;
-    private columnDefinitionChanged(
+    protected columnDefinitionChanged(
         oldValue: ColumnDefinition | null,
         newValue: ColumnDefinition | null
     ): void {
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
index 31d653217d9..dd348ac27d9 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts
@@ -34,7 +34,7 @@ export class DataGridRow extends FoundationElement {
      */
     @attr({ attribute: "grid-template-columns" })
     public gridTemplateColumns: string;
-    private gridTemplateColumnsChanged(): void {
+    protected gridTemplateColumnsChanged(): void {
         if (this.$fastController.isConnected) {
             this.updateRowStyle();
         }
@@ -62,7 +62,7 @@ export class DataGridRow extends FoundationElement {
      */
     @observable
     public rowData: object | null = null;
-    private rowDataChanged(): void {
+    protected rowDataChanged(): void {
         if (this.rowData !== null && this.isActiveRow) {
             this.refocusOnLoad = true;
             return;
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
index 23f9bc2fe82..e8993f4ef78 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
@@ -138,7 +138,7 @@ export class DataGrid extends FoundationElement {
      */
     @attr({ attribute: "no-tabbing", mode: "boolean" })
     public noTabbing: boolean = false;
-    private noTabbingChanged(): void {
+    protected noTabbingChanged(): void {
         if (this.$fastController.isConnected) {
             if (this.noTabbing) {
                 this.setAttribute("tabIndex", "-1");
@@ -178,7 +178,7 @@ export class DataGrid extends FoundationElement {
      */
     @attr({ attribute: "grid-template-columns" })
     public gridTemplateColumns: string;
-    private gridTemplateColumnsChanged(): void {
+    protected gridTemplateColumnsChanged(): void {
         if (this.$fastController.isConnected) {
             this.updateRowIndexes();
         }
@@ -191,7 +191,7 @@ export class DataGrid extends FoundationElement {
      */
     @observable
     public rowsData: object[] = [];
-    private rowsDataChanged(): void {
+    protected rowsDataChanged(): void {
         if (this.columnDefinitions === null && this.rowsData.length > 0) {
             this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]);
         }
@@ -207,7 +207,7 @@ export class DataGrid extends FoundationElement {
      */
     @observable
     public columnDefinitions: ColumnDefinition[] | null = null;
-    private columnDefinitionsChanged(): void {
+    protected columnDefinitionsChanged(): void {
         if (this.columnDefinitions === null) {
             this.generatedGridTemplateColumns = "";
             return;
diff --git a/packages/web-components/fast-foundation/src/dialog/README.md b/packages/web-components/fast-foundation/src/dialog/README.md
index 68e8a858ebd..d3706a3110b 100644
--- a/packages/web-components/fast-foundation/src/dialog/README.md
+++ b/packages/web-components/fast-foundation/src/dialog/README.md
@@ -63,17 +63,18 @@ export const myDialog = Dialog.compose({
 
 #### Fields
 
-| Name              | Privacy | Type                                  | Default | Description                                                                                                                                                                                                   | Inherited From    |
-| ----------------- | ------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
-| `modal`           | public  | `boolean`                             | `false` | Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event. |                   |
-| `hidden`          | public  | `boolean`                             | `false` | The hidden state of the element.                                                                                                                                                                              |                   |
-| `trapFocus`       | public  | `boolean`                             | `true`  | Indicates that the dialog should trap focus.                                                                                                                                                                  |                   |
-| `ariaDescribedby` | public  | `string`                              |         | The id of the element describing the dialog.                                                                                                                                                                  |                   |
-| `ariaLabelledby`  | public  | `string`                              |         | The id of the element labeling the dialog.                                                                                                                                                                    |                   |
-| `ariaLabel`       | public  | `string`                              |         | The label surfaced to assistive technologies.                                                                                                                                                                 |                   |
-| `$presentation`   | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                                                       | FoundationElement |
-| `template`        | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.                                    | FoundationElement |
-| `styles`          | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.                           | FoundationElement |
+| Name               | Privacy   | Type                                  | Default | Description                                                                                                                                                                                                   | Inherited From    |
+| ------------------ | --------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `modal`            | public    | `boolean`                             | `false` | Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event. |                   |
+| `hidden`           | public    | `boolean`                             | `false` | The hidden state of the element.                                                                                                                                                                              |                   |
+| `trapFocus`        | public    | `boolean`                             | `true`  | Indicates that the dialog should trap focus.                                                                                                                                                                  |                   |
+| `trapFocusChanged` | protected |                                       |         |                                                                                                                                                                                                               |                   |
+| `ariaDescribedby`  | public    | `string`                              |         | The id of the element describing the dialog.                                                                                                                                                                  |                   |
+| `ariaLabelledby`   | public    | `string`                              |         | The id of the element labeling the dialog.                                                                                                                                                                    |                   |
+| `ariaLabel`        | public    | `string`                              |         | The label surfaced to assistive technologies.                                                                                                                                                                 |                   |
+| `$presentation`    | public    | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                                                       | FoundationElement |
+| `template`         | public    | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.                                    | FoundationElement |
+| `styles`           | public    | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.                           | FoundationElement |
 
 #### Methods
 
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.ts b/packages/web-components/fast-foundation/src/dialog/dialog.ts
index b64ae5ed12c..6071ad22dfd 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.ts
@@ -49,7 +49,7 @@ export class Dialog extends FoundationElement {
      */
     @attr({ attribute: "trap-focus", mode: "boolean" })
     public trapFocus: boolean = true;
-    private trapFocusChanged = (): void => {
+    protected trapFocusChanged = (): void => {
         if ((this as FoundationElement).$fastController.isConnected) {
             this.updateTrapFocus();
         }
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
index 61b2d53c5a5..92bb18c5975 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
@@ -79,7 +79,7 @@ export class MenuItem extends FoundationElement {
      */
     @attr({ mode: "boolean" })
     public expanded: boolean;
-    private expandedChanged(oldValue: boolean): void {
+    protected expandedChanged(oldValue: boolean): void {
         if (this.$fastController.isConnected) {
             if (this.submenu === undefined) {
                 return;
@@ -118,7 +118,7 @@ export class MenuItem extends FoundationElement {
      */
     @attr({ mode: "boolean" })
     public checked: boolean;
-    private checkedChanged(oldValue: boolean, newValue: boolean): void {
+    protected checkedChanged(oldValue: boolean, newValue: boolean): void {
         if (this.$fastController.isConnected) {
             this.$emit("change");
         }
diff --git a/packages/web-components/fast-foundation/src/menu/README.md b/packages/web-components/fast-foundation/src/menu/README.md
index 78dee775f45..befa3867ab0 100644
--- a/packages/web-components/fast-foundation/src/menu/README.md
+++ b/packages/web-components/fast-foundation/src/menu/README.md
@@ -155,12 +155,13 @@ export const myMenuItem = MenuItem.compose<MenuItemOptions>({
 
 #### Methods
 
-| Name                   | Privacy   | Description                         | Parameters | Return | Inherited From    |
-| ---------------------- | --------- | ----------------------------------- | ---------- | ------ | ----------------- |
-| `focus`                | public    | Focuses the first item in the menu. |            | `void` |                   |
-| `collapseExpandedItem` | public    | Collapses any expanded menu items.  |            | `void` |                   |
-| `templateChanged`      | protected |                                     |            | `void` | FoundationElement |
-| `stylesChanged`        | protected |                                     |            | `void` | FoundationElement |
+| Name                   | Privacy   | Description                         | Parameters                                         | Return | Inherited From    |
+| ---------------------- | --------- | ----------------------------------- | -------------------------------------------------- | ------ | ----------------- |
+| `itemsChanged`         | protected |                                     | `oldValue: HTMLElement[], newValue: HTMLElement[]` | `void` |                   |
+| `focus`                | public    | Focuses the first item in the menu. |                                                    | `void` |                   |
+| `collapseExpandedItem` | public    | Collapses any expanded menu items.  |                                                    | `void` |                   |
+| `templateChanged`      | protected |                                     |                                                    | `void` | FoundationElement |
+| `stylesChanged`        | protected |                                     |                                                    | `void` | FoundationElement |
 
 #### Slots
 
@@ -204,10 +205,12 @@ export const myMenuItem = MenuItem.compose<MenuItemOptions>({
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
-| `templateChanged` | protected |             |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+| Name              | Privacy   | Description | Parameters                             | Return | Inherited From    |
+| ----------------- | --------- | ----------- | -------------------------------------- | ------ | ----------------- |
+| `expandedChanged` | protected |             | `oldValue: boolean`                    | `void` |                   |
+| `checkedChanged`  | protected |             | `oldValue: boolean, newValue: boolean` | `void` |                   |
+| `templateChanged` | protected |             |                                        | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |                                        | `void` | FoundationElement |
 
 #### Events
 
diff --git a/packages/web-components/fast-foundation/src/menu/menu.ts b/packages/web-components/fast-foundation/src/menu/menu.ts
index eb73aded0e1..07e80e4444d 100644
--- a/packages/web-components/fast-foundation/src/menu/menu.ts
+++ b/packages/web-components/fast-foundation/src/menu/menu.ts
@@ -28,7 +28,7 @@ export class Menu extends FoundationElement {
      */
     @observable
     public items: HTMLSlotElement;
-    private itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void {
+    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)
diff --git a/packages/web-components/fast-foundation/src/picker/README.md b/packages/web-components/fast-foundation/src/picker/README.md
index 732d84398c6..7156e767545 100644
--- a/packages/web-components/fast-foundation/src/picker/README.md
+++ b/packages/web-components/fast-foundation/src/picker/README.md
@@ -62,12 +62,13 @@ export class FASTTextField extends TextField {}
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters         | Return    | Inherited From    |
-| ----------------- | --------- | ----------- | ------------------ | --------- | ----------------- |
-| `handleKeyDown`   | public    |             | `e: KeyboardEvent` | `boolean` |                   |
-| `handleClick`     | public    |             | `e: MouseEvent`    | `boolean` |                   |
-| `templateChanged` | protected |             |                    | `void`    | FoundationElement |
-| `stylesChanged`   | protected |             |                    | `void`    | FoundationElement |
+| Name                      | Privacy   | Description | Parameters         | Return    | Inherited From    |
+| ------------------------- | --------- | ----------- | ------------------ | --------- | ----------------- |
+| `contentsTemplateChanged` | protected |             |                    | `void`    |                   |
+| `handleKeyDown`           | public    |             | `e: KeyboardEvent` | `boolean` |                   |
+| `handleClick`             | public    |             | `e: MouseEvent`    | `boolean` |                   |
+| `templateChanged`         | protected |             |                    | `void`    | FoundationElement |
+| `stylesChanged`           | protected |             |                    | `void`    | FoundationElement |
 
 #### Attributes
 
@@ -126,11 +127,12 @@ export class FASTTextField extends TextField {}
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters      | Return    | Inherited From    |
-| ----------------- | --------- | ----------- | --------------- | --------- | ----------------- |
-| `handleClick`     | public    |             | `e: MouseEvent` | `boolean` |                   |
-| `templateChanged` | protected |             |                 | `void`    | FoundationElement |
-| `stylesChanged`   | protected |             |                 | `void`    | FoundationElement |
+| Name                      | Privacy   | Description | Parameters      | Return    | Inherited From    |
+| ------------------------- | --------- | ----------- | --------------- | --------- | ----------------- |
+| `contentsTemplateChanged` | protected |             |                 | `void`    |                   |
+| `handleClick`             | public    |             | `e: MouseEvent` | `boolean` |                   |
+| `templateChanged`         | protected |             |                 | `void`    | FoundationElement |
+| `stylesChanged`           | protected |             |                 | `void`    | FoundationElement |
 
 #### Attributes
 
@@ -214,18 +216,29 @@ export class FASTTextField extends TextField {}
 
 #### Methods
 
-| Name                    | Privacy   | Description                                                   | Parameters         | Return    | Inherited From    |
-| ----------------------- | --------- | ------------------------------------------------------------- | ------------------ | --------- | ----------------- |
-| `focus`                 | public    | Move focus to the input element                               |                    |           |                   |
-| `handleKeyDown`         | public    | Handle key down events.                                       | `e: KeyboardEvent` | `boolean` |                   |
-| `handleFocusIn`         | public    | Handle focus in events.                                       | `e: FocusEvent`    | `boolean` |                   |
-| `handleFocusOut`        | public    | Handle focus out events.                                      | `e: FocusEvent`    | `boolean` |                   |
-| `handleSelectionChange` | public    | The list of selected items has changed                        |                    | `void`    |                   |
-| `handleRegionLoaded`    | public    | Anchored region is loaded, menu and options exist in the DOM. | `e: Event`         | `void`    |                   |
-| `handleItemInvoke`      | public    | A list item has been invoked.                                 | `e: Event`         | `boolean` |                   |
-| `handleOptionInvoke`    | public    | A menu option has been invoked.                               | `e: Event`         | `boolean` |                   |
-| `templateChanged`       | protected |                                                               |                    | `void`    | FoundationElement |
-| `stylesChanged`         | protected |                                                               |                    | `void`    | FoundationElement |
+| Name                               | Privacy   | Description                                                   | Parameters         | Return    | Inherited From    |
+| ---------------------------------- | --------- | ------------------------------------------------------------- | ------------------ | --------- | ----------------- |
+| `selectionChanged`                 | protected |                                                               |                    | `void`    |                   |
+| `optionsChanged`                   | protected |                                                               |                    | `void`    |                   |
+| `menuPlacementChanged`             | protected |                                                               |                    | `void`    |                   |
+| `showLoadingChanged`               | protected |                                                               |                    | `void`    |                   |
+| `listItemTemplateChanged`          | protected |                                                               |                    | `void`    |                   |
+| `defaultListItemTemplateChanged`   | protected |                                                               |                    | `void`    |                   |
+| `menuOptionTemplateChanged`        | protected |                                                               |                    | `void`    |                   |
+| `defaultMenuOptionTemplateChanged` | protected |                                                               |                    | `void`    |                   |
+| `queryChanged`                     | protected |                                                               |                    | `void`    |                   |
+| `filteredOptionsListChanged`       | protected |                                                               |                    | `void`    |                   |
+| `flyoutOpenChanged`                | protected |                                                               |                    | `void`    |                   |
+| `focus`                            | public    | Move focus to the input element                               |                    |           |                   |
+| `handleKeyDown`                    | public    | Handle key down events.                                       | `e: KeyboardEvent` | `boolean` |                   |
+| `handleFocusIn`                    | public    | Handle focus in events.                                       | `e: FocusEvent`    | `boolean` |                   |
+| `handleFocusOut`                   | public    | Handle focus out events.                                      | `e: FocusEvent`    | `boolean` |                   |
+| `handleSelectionChange`            | public    | The list of selected items has changed                        |                    | `void`    |                   |
+| `handleRegionLoaded`               | public    | Anchored region is loaded, menu and options exist in the DOM. | `e: Event`         | `void`    |                   |
+| `handleItemInvoke`                 | public    | A list item has been invoked.                                 | `e: Event`         | `boolean` |                   |
+| `handleOptionInvoke`               | public    | A menu option has been invoked.                               | `e: Event`         | `boolean` |                   |
+| `templateChanged`                  | protected |                                                               |                    | `void`    | FoundationElement |
+| `stylesChanged`                    | protected |                                                               |                    | `void`    | FoundationElement |
 
 #### Attributes
 
diff --git a/packages/web-components/fast-foundation/src/picker/picker-list-item.ts b/packages/web-components/fast-foundation/src/picker/picker-list-item.ts
index 98ed8f04d34..7ce19dab8f9 100644
--- a/packages/web-components/fast-foundation/src/picker/picker-list-item.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker-list-item.ts
@@ -31,7 +31,7 @@ export class PickerListItem extends FoundationElement {
      */
     @observable
     public contentsTemplate: ViewTemplate;
-    private contentsTemplateChanged(): void {
+    protected contentsTemplateChanged(): void {
         if (this.$fastController.isConnected) {
             this.updateView();
         }
diff --git a/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts b/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts
index 2bf68a27a70..8d26b44cbe7 100644
--- a/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts
@@ -30,7 +30,7 @@ export class PickerMenuOption extends FoundationElement {
      */
     @observable
     public contentsTemplate: ViewTemplate;
-    private contentsTemplateChanged(): void {
+    protected contentsTemplateChanged(): void {
         if (this.$fastController.isConnected) {
             this.updateView();
         }
diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts
index 8733f8ffd0e..c3960b6b30e 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.ts
@@ -80,7 +80,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @attr({ attribute: "selection" })
     public selection: string = "";
-    private selectionChanged(): void {
+    protected selectionChanged(): void {
         if (this.$fastController.isConnected) {
             this.handleSelectionChange();
             if (this.proxy instanceof HTMLInputElement) {
@@ -99,7 +99,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @attr({ attribute: "options" })
     public options: string;
-    private optionsChanged(): void {
+    protected optionsChanged(): void {
         this.optionsList = this.options
             .split(",")
             .map(opt => opt.trim())
@@ -205,7 +205,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @attr({ attribute: "menu-placement" })
     public menuPlacement: menuConfigs = "bottom-fill";
-    private menuPlacementChanged(): void {
+    protected menuPlacementChanged(): void {
         if (this.$fastController.isConnected) {
             this.updateMenuConfig();
         }
@@ -218,7 +218,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @observable
     public showLoading: boolean = false;
-    private showLoadingChanged(): void {
+    protected showLoadingChanged(): void {
         if (this.$fastController.isConnected) {
             DOM.queueUpdate(() => {
                 this.setFocusedOption(0);
@@ -234,7 +234,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @observable
     public listItemTemplate: ViewTemplate;
-    private listItemTemplateChanged(): void {
+    protected listItemTemplateChanged(): void {
         this.updateListItemTemplate();
     }
 
@@ -246,7 +246,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @observable
     public defaultListItemTemplate?: ViewTemplate;
-    private defaultListItemTemplateChanged(): void {
+    protected defaultListItemTemplateChanged(): void {
         this.updateListItemTemplate();
     }
 
@@ -266,7 +266,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @observable
     public menuOptionTemplate: ViewTemplate;
-    private menuOptionTemplateChanged(): void {
+    protected menuOptionTemplateChanged(): void {
         this.updateOptionTemplate();
     }
 
@@ -278,7 +278,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @observable
     public defaultMenuOptionTemplate?: ViewTemplate;
-    private defaultMenuOptionTemplateChanged(): void {
+    protected defaultMenuOptionTemplateChanged(): void {
         this.updateOptionTemplate();
     }
 
@@ -324,7 +324,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @observable
     public query: string;
-    private queryChanged(): void {
+    protected queryChanged(): void {
         if (this.$fastController.isConnected) {
             if (this.inputElement.value !== this.query) {
                 this.inputElement.value = this.query;
@@ -341,7 +341,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @observable
     public filteredOptionsList: string[] = [];
-    private filteredOptionsListChanged(): void {
+    protected filteredOptionsListChanged(): void {
         if (this.$fastController.isConnected) {
             this.showNoOptions =
                 this.filteredOptionsList.length === 0 &&
@@ -357,7 +357,7 @@ export class Picker extends FormAssociatedPicker {
      */
     @observable
     public flyoutOpen: boolean = false;
-    private flyoutOpenChanged(): void {
+    protected flyoutOpenChanged(): void {
         if (this.flyoutOpen) {
             DOM.queueUpdate(this.setRegionProps);
             this.$emit("menuopening", { bubbles: false });
diff --git a/packages/web-components/fast-foundation/src/progress/README.md b/packages/web-components/fast-foundation/src/progress/README.md
index 1de536c163c..2635f6b3163 100644
--- a/packages/web-components/fast-foundation/src/progress/README.md
+++ b/packages/web-components/fast-foundation/src/progress/README.md
@@ -130,6 +130,9 @@ export const myProgressRing = ProgressRing.compose<ProgressRingOptions>({
 
 | Name              | Privacy   | Description | Parameters | Return | Inherited From    |
 | ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `valueChanged`    | protected |             |            | `void` |                   |
+| `minChanged`      | protected |             |            | `void` |                   |
+| `maxChanged`      | protected |             |            | `void` |                   |
 | `templateChanged` | protected |             |            | `void` | FoundationElement |
 | `stylesChanged`   | protected |             |            | `void` | FoundationElement |
 
diff --git a/packages/web-components/fast-foundation/src/progress/base-progress.ts b/packages/web-components/fast-foundation/src/progress/base-progress.ts
index 7d8594099a6..9d9780d7379 100644
--- a/packages/web-components/fast-foundation/src/progress/base-progress.ts
+++ b/packages/web-components/fast-foundation/src/progress/base-progress.ts
@@ -45,7 +45,7 @@ export class BaseProgress extends FoundationElement {
      */
     @attr({ converter: nullableNumberConverter })
     public value: number | null;
-    private valueChanged(): void {
+    protected valueChanged(): void {
         if (this.$fastController.isConnected) {
             this.updatePercentComplete();
         }
@@ -59,7 +59,7 @@ export class BaseProgress extends FoundationElement {
      */
     @attr({ converter: nullableNumberConverter })
     public min: number;
-    private minChanged(): void {
+    protected minChanged(): void {
         if (this.$fastController.isConnected) {
             this.updatePercentComplete();
         }
@@ -73,7 +73,7 @@ export class BaseProgress extends FoundationElement {
      */
     @attr({ converter: nullableNumberConverter })
     public max: number;
-    private maxChanged(): void {
+    protected maxChanged(): void {
         if (this.$fastController.isConnected) {
             this.updatePercentComplete();
         }
diff --git a/packages/web-components/fast-foundation/src/radio-group/README.md b/packages/web-components/fast-foundation/src/radio-group/README.md
index 41e0ff448b3..96ae9037c78 100644
--- a/packages/web-components/fast-foundation/src/radio-group/README.md
+++ b/packages/web-components/fast-foundation/src/radio-group/README.md
@@ -79,12 +79,15 @@ export const myRadioGroup = RadioGroup.compose({
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
-| `nameChanged`     | protected |             |            | `void` |                   |
-| `valueChanged`    | protected |             |            | `void` |                   |
-| `templateChanged` | protected |             |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+| Name                         | Privacy   | Description | Parameters                                   | Return | Inherited From    |
+| ---------------------------- | --------- | ----------- | -------------------------------------------- | ------ | ----------------- |
+| `readOnlyChanged`            | protected |             |                                              | `void` |                   |
+| `disabledChanged`            | protected |             |                                              | `void` |                   |
+| `nameChanged`                | protected |             |                                              | `void` |                   |
+| `valueChanged`               | protected |             |                                              | `void` |                   |
+| `slottedRadioButtonsChanged` | protected |             | `oldValue: unknown, newValue: HTMLElement[]` | `void` |                   |
+| `templateChanged`            | protected |             |                                              | `void` | FoundationElement |
+| `stylesChanged`              | protected |             |                                              | `void` | FoundationElement |
 
 #### Events
 
diff --git a/packages/web-components/fast-foundation/src/radio-group/radio-group.ts b/packages/web-components/fast-foundation/src/radio-group/radio-group.ts
index 8b6075f2a38..0abced80cd3 100644
--- a/packages/web-components/fast-foundation/src/radio-group/radio-group.ts
+++ b/packages/web-components/fast-foundation/src/radio-group/radio-group.ts
@@ -32,7 +32,7 @@ export class RadioGroup extends FoundationElement {
      */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean;
-    private readOnlyChanged(): void {
+    protected readOnlyChanged(): void {
         if (this.slottedRadioButtons !== undefined) {
             this.slottedRadioButtons.forEach((radio: HTMLInputElement) => {
                 if (this.readOnly) {
@@ -53,7 +53,7 @@ export class RadioGroup extends FoundationElement {
      */
     @attr({ attribute: "disabled", mode: "boolean" })
     public disabled: boolean;
-    private disabledChanged(): void {
+    protected disabledChanged(): void {
         if (this.slottedRadioButtons !== undefined) {
             this.slottedRadioButtons.forEach((radio: HTMLInputElement) => {
                 if (this.disabled) {
@@ -122,7 +122,10 @@ export class RadioGroup extends FoundationElement {
      */
     @observable
     public slottedRadioButtons: HTMLElement[];
-    private slottedRadioButtonsChanged(oldValue: unknown, newValue: HTMLElement[]): void {
+    protected slottedRadioButtonsChanged(
+        oldValue: unknown,
+        newValue: HTMLElement[]
+    ): void {
         if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
             this.setupRadioButtons();
         }
diff --git a/packages/web-components/fast-foundation/src/radio/README.md b/packages/web-components/fast-foundation/src/radio/README.md
index 1ae4f30d1d6..d4133ebf7b4 100644
--- a/packages/web-components/fast-foundation/src/radio/README.md
+++ b/packages/web-components/fast-foundation/src/radio/README.md
@@ -102,6 +102,7 @@ export const myRadio = Radio.compose<RadioOptions>({
 
 | Name              | Privacy   | Description | Parameters | Return | Inherited From    |
 | ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `readOnlyChanged` | protected |             |            | `void` |                   |
 | `templateChanged` | protected |             |            | `void` | FoundationElement |
 | `stylesChanged`   | protected |             |            | `void` | FoundationElement |
 
diff --git a/packages/web-components/fast-foundation/src/radio/radio.ts b/packages/web-components/fast-foundation/src/radio/radio.ts
index b3903396b02..818ee01b81e 100644
--- a/packages/web-components/fast-foundation/src/radio/radio.ts
+++ b/packages/web-components/fast-foundation/src/radio/radio.ts
@@ -41,7 +41,7 @@ export class Radio extends FormAssociatedRadio implements RadioControl {
      */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
-    private readOnlyChanged(): void {
+    protected readOnlyChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.readOnly = this.readOnly;
         }
diff --git a/packages/web-components/fast-foundation/src/search/README.md b/packages/web-components/fast-foundation/src/search/README.md
index ba3a8d23c72..232e03bdb8c 100644
--- a/packages/web-components/fast-foundation/src/search/README.md
+++ b/packages/web-components/fast-foundation/src/search/README.md
@@ -87,11 +87,20 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### Methods
 
-| Name               | Privacy   | Description                             | Parameters | Return | Inherited From    |
-| ------------------ | --------- | --------------------------------------- | ---------- | ------ | ----------------- |
-| `handleClearInput` | public    | Handles the control's clear value event |            | `void` |                   |
-| `templateChanged`  | protected |                                         |            | `void` | FoundationElement |
-| `stylesChanged`    | protected |                                         |            | `void` | FoundationElement |
+| Name                 | Privacy   | Description                             | Parameters | Return | Inherited From    |
+| -------------------- | --------- | --------------------------------------- | ---------- | ------ | ----------------- |
+| `readOnlyChanged`    | protected |                                         |            | `void` |                   |
+| `autofocusChanged`   | protected |                                         |            | `void` |                   |
+| `placeholderChanged` | protected |                                         |            | `void` |                   |
+| `listChanged`        | protected |                                         |            | `void` |                   |
+| `maxlengthChanged`   | protected |                                         |            | `void` |                   |
+| `minlengthChanged`   | protected |                                         |            | `void` |                   |
+| `patternChanged`     | protected |                                         |            | `void` |                   |
+| `sizeChanged`        | protected |                                         |            | `void` |                   |
+| `spellcheckChanged`  | protected |                                         |            | `void` |                   |
+| `handleClearInput`   | public    | Handles the control's clear value event |            | `void` |                   |
+| `templateChanged`    | protected |                                         |            | `void` | FoundationElement |
+| `stylesChanged`      | protected |                                         |            | `void` | FoundationElement |
 
 #### Attributes
 
diff --git a/packages/web-components/fast-foundation/src/search/search.ts b/packages/web-components/fast-foundation/src/search/search.ts
index 9bc44515f76..7c77b4f55b7 100644
--- a/packages/web-components/fast-foundation/src/search/search.ts
+++ b/packages/web-components/fast-foundation/src/search/search.ts
@@ -38,7 +38,7 @@ export class Search extends FormAssociatedSearch {
      */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean;
-    private readOnlyChanged(): void {
+    protected readOnlyChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.readOnly = this.readOnly;
             this.validate();
@@ -53,7 +53,7 @@ export class Search extends FormAssociatedSearch {
      */
     @attr({ mode: "boolean" })
     public autofocus: boolean;
-    private autofocusChanged(): void {
+    protected autofocusChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.autofocus = this.autofocus;
             this.validate();
@@ -69,7 +69,7 @@ export class Search extends FormAssociatedSearch {
      */
     @attr
     public placeholder: string;
-    private placeholderChanged(): void {
+    protected placeholderChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.placeholder = this.placeholder;
         }
@@ -83,7 +83,7 @@ export class Search extends FormAssociatedSearch {
      */
     @attr
     public list: string;
-    private listChanged(): void {
+    protected listChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.setAttribute("list", this.list);
             this.validate();
@@ -98,7 +98,7 @@ export class Search extends FormAssociatedSearch {
      */
     @attr({ converter: nullableNumberConverter })
     public maxlength: number;
-    private maxlengthChanged(): void {
+    protected maxlengthChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.maxLength = this.maxlength;
             this.validate();
@@ -113,7 +113,7 @@ export class Search extends FormAssociatedSearch {
      */
     @attr({ converter: nullableNumberConverter })
     public minlength: number;
-    private minlengthChanged(): void {
+    protected minlengthChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.minLength = this.minlength;
             this.validate();
@@ -128,7 +128,7 @@ export class Search extends FormAssociatedSearch {
      */
     @attr
     public pattern: string;
-    private patternChanged(): void {
+    protected patternChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.pattern = this.pattern;
             this.validate();
@@ -143,7 +143,7 @@ export class Search extends FormAssociatedSearch {
      */
     @attr({ converter: nullableNumberConverter })
     public size: number;
-    private sizeChanged(): void {
+    protected sizeChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.size = this.size;
         }
@@ -157,7 +157,7 @@ export class Search extends FormAssociatedSearch {
      */
     @attr({ mode: "boolean" })
     public spellcheck: boolean;
-    private spellcheckChanged(): void {
+    protected spellcheckChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.spellcheck = this.spellcheck;
         }
diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.ts
index 6158a55b36f..6122f3fedcc 100644
--- a/packages/web-components/fast-foundation/src/slider-label/slider-label.ts
+++ b/packages/web-components/fast-foundation/src/slider-label/slider-label.ts
@@ -41,7 +41,7 @@ export class SliderLabel extends FoundationElement {
      */
     @attr
     public position: string;
-    private positionChanged(): void {
+    protected positionChanged(): void {
         this.positionStyle = this.positionAsStyle();
     }
 
diff --git a/packages/web-components/fast-foundation/src/slider/README.md b/packages/web-components/fast-foundation/src/slider/README.md
index 8b1a1ebedde..d5f7ef19742 100644
--- a/packages/web-components/fast-foundation/src/slider/README.md
+++ b/packages/web-components/fast-foundation/src/slider/README.md
@@ -151,6 +151,7 @@ export const mySliderLabel = SliderLabel.compose({
 
 | Name                             | Privacy   | Description                                 | Parameters             | Return | Inherited From    |
 | -------------------------------- | --------- | ------------------------------------------- | ---------------------- | ------ | ----------------- |
+| `readOnlyChanged`                | protected |                                             |                        | `void` |                   |
 | `increment`                      | public    | Increment the value by the step             |                        | `void` |                   |
 | `decrement`                      | public    | Decrement the value by the step             |                        | `void` |                   |
 | `setThumbPositionForOrientation` | public    | Places the thumb based on the current value | `direction: Direction` | `void` |                   |
@@ -227,6 +228,7 @@ export const mySliderLabel = SliderLabel.compose({
 
 | Name              | Privacy   | Description | Parameters | Return | Inherited From    |
 | ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `positionChanged` | protected |             |            | `void` |                   |
 | `templateChanged` | protected |             |            | `void` | FoundationElement |
 | `stylesChanged`   | protected |             |            | `void` | FoundationElement |
 
diff --git a/packages/web-components/fast-foundation/src/slider/slider.ts b/packages/web-components/fast-foundation/src/slider/slider.ts
index d0b57e7fc5d..602ffeae726 100644
--- a/packages/web-components/fast-foundation/src/slider/slider.ts
+++ b/packages/web-components/fast-foundation/src/slider/slider.ts
@@ -79,7 +79,7 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
      */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
-    private readOnlyChanged(): void {
+    protected readOnlyChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.readOnly = this.readOnly;
         }
diff --git a/packages/web-components/fast-foundation/src/switch/README.md b/packages/web-components/fast-foundation/src/switch/README.md
index ecba2f6a3c8..48b6d0f9c0a 100644
--- a/packages/web-components/fast-foundation/src/switch/README.md
+++ b/packages/web-components/fast-foundation/src/switch/README.md
@@ -94,6 +94,7 @@ export const mySwitch = Switch.compose<SwitchOptions>({
 
 | Name              | Privacy   | Description | Parameters | Return | Inherited From    |
 | ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `readOnlyChanged` | protected |             |            | `void` |                   |
 | `templateChanged` | protected |             |            | `void` | FoundationElement |
 | `stylesChanged`   | protected |             |            | `void` | FoundationElement |
 
diff --git a/packages/web-components/fast-foundation/src/switch/switch.ts b/packages/web-components/fast-foundation/src/switch/switch.ts
index acd5f2f893e..33a5a262108 100644
--- a/packages/web-components/fast-foundation/src/switch/switch.ts
+++ b/packages/web-components/fast-foundation/src/switch/switch.ts
@@ -36,7 +36,7 @@ export class Switch extends FormAssociatedSwitch {
      */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean; // Map to proxy element
-    private readOnlyChanged(): void {
+    protected readOnlyChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.readOnly = this.readOnly;
         }
diff --git a/packages/web-components/fast-foundation/src/text-area/text-area.ts b/packages/web-components/fast-foundation/src/text-area/text-area.ts
index e0f59f7ac21..ba4779db02c 100644
--- a/packages/web-components/fast-foundation/src/text-area/text-area.ts
+++ b/packages/web-components/fast-foundation/src/text-area/text-area.ts
@@ -27,7 +27,7 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr({ mode: "boolean" })
     public readOnly: boolean;
-    private readOnlyChanged(): void {
+    protected readOnlyChanged(): void {
         if (this.proxy instanceof HTMLTextAreaElement) {
             this.proxy.readOnly = this.readOnly;
         }
@@ -56,7 +56,7 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr({ mode: "boolean" })
     public autofocus: boolean;
-    private autofocusChanged(): void {
+    protected autofocusChanged(): void {
         if (this.proxy instanceof HTMLTextAreaElement) {
             this.proxy.autofocus = this.autofocus;
         }
@@ -77,7 +77,7 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr
     public list: string;
-    private listChanged(): void {
+    protected listChanged(): void {
         if (this.proxy instanceof HTMLTextAreaElement) {
             this.proxy.setAttribute("list", this.list);
         }
@@ -91,7 +91,7 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr({ converter: nullableNumberConverter })
     public maxlength: number;
-    private maxlengthChanged(): void {
+    protected maxlengthChanged(): void {
         if (this.proxy instanceof HTMLTextAreaElement) {
             this.proxy.maxLength = this.maxlength;
         }
@@ -105,7 +105,7 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr({ converter: nullableNumberConverter })
     public minlength: number;
-    private minlengthChanged(): void {
+    protected minlengthChanged(): void {
         if (this.proxy instanceof HTMLTextAreaElement) {
             this.proxy.minLength = this.minlength;
         }
@@ -159,7 +159,7 @@ export class TextArea extends FormAssociatedTextArea {
      */
     @attr({ mode: "boolean" })
     public spellcheck: boolean;
-    private spellcheckChanged(): void {
+    protected spellcheckChanged(): void {
         if (this.proxy instanceof HTMLTextAreaElement) {
             this.proxy.spellcheck = this.spellcheck;
         }
diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.ts b/packages/web-components/fast-foundation/src/text-field/text-field.ts
index d27fb48e84f..e3c95cf230d 100644
--- a/packages/web-components/fast-foundation/src/text-field/text-field.ts
+++ b/packages/web-components/fast-foundation/src/text-field/text-field.ts
@@ -40,7 +40,7 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean;
-    private readOnlyChanged(): void {
+    protected readOnlyChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.readOnly = this.readOnly;
             this.validate();
@@ -55,7 +55,7 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr({ mode: "boolean" })
     public autofocus: boolean;
-    private autofocusChanged(): void {
+    protected autofocusChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.autofocus = this.autofocus;
             this.validate();
@@ -71,7 +71,7 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr
     public placeholder: string;
-    private placeholderChanged(): void {
+    protected placeholderChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.placeholder = this.placeholder;
         }
@@ -100,7 +100,7 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr
     public list: string;
-    private listChanged(): void {
+    protected listChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.setAttribute("list", this.list);
             this.validate();
@@ -115,7 +115,7 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr({ converter: nullableNumberConverter })
     public maxlength: number;
-    private maxlengthChanged(): void {
+    protected maxlengthChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.maxLength = this.maxlength;
             this.validate();
@@ -130,7 +130,7 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr({ converter: nullableNumberConverter })
     public minlength: number;
-    private minlengthChanged(): void {
+    protected minlengthChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.minLength = this.minlength;
             this.validate();
@@ -145,7 +145,7 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr
     public pattern: string;
-    private patternChanged(): void {
+    protected patternChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.pattern = this.pattern;
             this.validate();
@@ -160,7 +160,7 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr({ converter: nullableNumberConverter })
     public size: number;
-    private sizeChanged(): void {
+    protected sizeChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.size = this.size;
         }
@@ -174,7 +174,7 @@ export class TextField extends FormAssociatedTextField {
      */
     @attr({ mode: "boolean" })
     public spellcheck: boolean;
-    private spellcheckChanged(): void {
+    protected spellcheckChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.spellcheck = this.spellcheck;
         }
diff --git a/packages/web-components/fast-foundation/src/tooltip/README.md b/packages/web-components/fast-foundation/src/tooltip/README.md
index 2550e78a214..bfdf2a4be10 100644
--- a/packages/web-components/fast-foundation/src/tooltip/README.md
+++ b/packages/web-components/fast-foundation/src/tooltip/README.md
@@ -84,10 +84,15 @@ export const myTooltip = Tooltip.compose({
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
-| `templateChanged` | protected |             |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+| Name                     | Privacy   | Description | Parameters                      | Return | Inherited From    |
+| ------------------------ | --------- | ----------- | ------------------------------- | ------ | ----------------- |
+| `visibleChanged`         | protected |             |                                 | `void` |                   |
+| `anchorChanged`          | protected |             |                                 | `void` |                   |
+| `positionChanged`        | protected |             |                                 | `void` |                   |
+| `anchorElementChanged`   | protected |             | `oldValue: HTMLElement or null` | `void` |                   |
+| `viewportElementChanged` | protected |             |                                 | `void` |                   |
+| `templateChanged`        | protected |             |                                 | `void` | FoundationElement |
+| `stylesChanged`          | protected |             |                                 | `void` | FoundationElement |
 
 #### Events
 
diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts
index a45af39f310..db9f9b18c63 100644
--- a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts
+++ b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts
@@ -32,7 +32,7 @@ export class Tooltip extends FoundationElement {
      */
     @attr({ mode: "boolean" })
     public visible: boolean;
-    private visibleChanged(): void {
+    protected visibleChanged(): void {
         if ((this as FASTElement).$fastController.isConnected) {
             this.updateTooltipVisibility();
             this.updateLayout();
@@ -48,7 +48,7 @@ export class Tooltip extends FoundationElement {
      */
     @attr
     public anchor: string = "";
-    private anchorChanged(): void {
+    protected anchorChanged(): void {
         if ((this as FASTElement).$fastController.isConnected) {
             this.anchorElement = this.getAnchor();
         }
@@ -117,7 +117,7 @@ export class Tooltip extends FoundationElement {
      */
     @observable
     public anchorElement: HTMLElement | null = null;
-    private anchorElementChanged(oldValue: HTMLElement | null): void {
+    protected anchorElementChanged(oldValue: HTMLElement | null): void {
         if ((this as FASTElement).$fastController.isConnected) {
             if (oldValue !== null && oldValue !== undefined) {
                 oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver);
@@ -178,7 +178,7 @@ export class Tooltip extends FoundationElement {
      */
     @observable
     public viewportElement: HTMLElement | null = null;
-    private viewportElementChanged(): void {
+    protected viewportElementChanged(): void {
         if (this.region !== null && this.region !== undefined) {
             this.region.viewportElement = this.viewportElement;
         }
diff --git a/packages/web-components/fast-foundation/src/tree-item/README.md b/packages/web-components/fast-foundation/src/tree-item/README.md
index 139dc525bc3..84b8cf163bd 100644
--- a/packages/web-components/fast-foundation/src/tree-item/README.md
+++ b/packages/web-components/fast-foundation/src/tree-item/README.md
@@ -60,10 +60,13 @@ export class FASTTreeItem extends TreeItem {}
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
-| `templateChanged` | protected |             |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+| Name              | Privacy   | Description | Parameters                                   | Return | Inherited From    |
+| ----------------- | --------- | ----------- | -------------------------------------------- | ------ | ----------------- |
+| `expandedChanged` | protected |             |                                              | `void` |                   |
+| `selectedChanged` | protected |             |                                              | `void` |                   |
+| `itemsChanged`    | protected |             | `oldValue: unknown, newValue: HTMLElement[]` | `void` |                   |
+| `templateChanged` | protected |             |                                              | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |                                              | `void` | FoundationElement |
 
 #### Events
 
diff --git a/packages/web-components/fast-foundation/src/tree-item/tree-item.ts b/packages/web-components/fast-foundation/src/tree-item/tree-item.ts
index 126523c8758..b8f2f09751c 100644
--- a/packages/web-components/fast-foundation/src/tree-item/tree-item.ts
+++ b/packages/web-components/fast-foundation/src/tree-item/tree-item.ts
@@ -52,7 +52,7 @@ export class TreeItem extends FoundationElement {
      */
     @attr({ mode: "boolean" })
     public expanded: boolean = false;
-    private expandedChanged(): void {
+    protected expandedChanged(): void {
         if (this.$fastController.isConnected) {
             this.$emit("expanded-change", this);
         }
@@ -66,7 +66,7 @@ export class TreeItem extends FoundationElement {
      */
     @attr({ mode: "boolean" })
     public selected: boolean;
-    private selectedChanged(): void {
+    protected selectedChanged(): void {
         if (this.$fastController.isConnected) {
             this.$emit("selected-change", this);
         }
@@ -111,7 +111,7 @@ export class TreeItem extends FoundationElement {
      */
     @observable
     public items: HTMLElement[];
-    private itemsChanged(oldValue: unknown, newValue: HTMLElement[]): void {
+    protected itemsChanged(oldValue: unknown, newValue: HTMLElement[]): void {
         if (this.$fastController.isConnected) {
             this.items.forEach((node: HTMLElement) => {
                 if (isTreeItemElement(node)) {
diff --git a/packages/web-components/fast-foundation/src/tree-view/README.md b/packages/web-components/fast-foundation/src/tree-view/README.md
index 3803cc9fdfa..c839157ad7b 100644
--- a/packages/web-components/fast-foundation/src/tree-view/README.md
+++ b/packages/web-components/fast-foundation/src/tree-view/README.md
@@ -117,10 +117,11 @@ export const myTreeView = TreeView.compose({
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
-| `templateChanged` | protected |             |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+| Name                      | Privacy   | Description | Parameters | Return | Inherited From    |
+| ------------------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `slottedTreeItemsChanged` | protected |             |            | `void` |                   |
+| `templateChanged`         | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`           | protected |             |            | `void` | FoundationElement |
 
 #### Attributes
 
diff --git a/packages/web-components/fast-foundation/src/tree-view/tree-view.ts b/packages/web-components/fast-foundation/src/tree-view/tree-view.ts
index ba0fb86a75a..99e1a0d61b5 100644
--- a/packages/web-components/fast-foundation/src/tree-view/tree-view.ts
+++ b/packages/web-components/fast-foundation/src/tree-view/tree-view.ts
@@ -44,8 +44,9 @@ export class TreeView extends FoundationElement {
      *
      * @internal
      */
-    @observable slottedTreeItems: HTMLElement[];
-    private slottedTreeItemsChanged(): void {
+    @observable
+    public slottedTreeItems: HTMLElement[];
+    protected slottedTreeItemsChanged(): void {
         if (this.$fastController.isConnected) {
             // update for slotted children change
             this.setItems();

From 5a5da59bf17be469525df70633351dbc41b662ba Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Thu, 28 Apr 2022 19:53:06 -0700
Subject: [PATCH 096/135] feat: trim unnecessary nodes from start end (#5892)

* remove unnecessary DOM nodes from start/end slot templates

* Change files
---
 ...-3296c3df-4043-46e8-a1f0-9a7f4e33e1c3.json |  7 ++
 .../fast-foundation/docs/api-report.md        | 14 ----
 .../src/calendar/calendar.template.ts         |  6 +-
 .../fast-foundation/src/patterns/start-end.ts | 80 ++-----------------
 .../navigation/navigation.template.ts         |  6 +-
 5 files changed, 21 insertions(+), 92 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-3296c3df-4043-46e8-a1f0-9a7f4e33e1c3.json

diff --git a/change/@microsoft-fast-foundation-3296c3df-4043-46e8-a1f0-9a7f4e33e1c3.json b/change/@microsoft-fast-foundation-3296c3df-4043-46e8-a1f0-9a7f4e33e1c3.json
new file mode 100644
index 00000000000..014f2c29798
--- /dev/null
+++ b/change/@microsoft-fast-foundation-3296c3df-4043-46e8-a1f0-9a7f4e33e1c3.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "remove unnecessary DOM nodes from start/end slot templates",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 520183b9e14..23aade92c7a 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -1096,9 +1096,6 @@ export type EndOptions = {
 // @public
 export const endSlotTemplate: (context: ElementDefinitionContext, definition: EndOptions) => ViewTemplate<StartEnd>;
 
-// @public @deprecated
-export const endTemplate: ViewTemplate<StartEnd>;
-
 // @public
 export interface Factory<T extends Constructable = any> {
     construct(container: Container, dynamicDependencies?: Key[]): Resolved<T>;
@@ -2381,15 +2378,7 @@ export class StartEnd {
     // (undocumented)
     end: HTMLSlotElement;
     // (undocumented)
-    endContainer: HTMLSpanElement;
-    // (undocumented)
-    handleEndContentChange(): void;
-    // (undocumented)
-    handleStartContentChange(): void;
-    // (undocumented)
     start: HTMLSlotElement;
-    // (undocumented)
-    startContainer: HTMLSpanElement;
 }
 
 // @public
@@ -2403,9 +2392,6 @@ export type StartOptions = {
 // @public
 export const startSlotTemplate: (context: ElementDefinitionContext, definition: StartOptions) => ViewTemplate<StartEnd>;
 
-// @public @deprecated
-export const startTemplate: ViewTemplate<StartEnd>;
-
 // @public
 export type StaticDesignTokenValue<T> = T extends Function ? never : T;
 
diff --git a/packages/web-components/fast-foundation/src/calendar/calendar.template.ts b/packages/web-components/fast-foundation/src/calendar/calendar.template.ts
index d41976ab6d6..aaf56bd1b8b 100644
--- a/packages/web-components/fast-foundation/src/calendar/calendar.template.ts
+++ b/packages/web-components/fast-foundation/src/calendar/calendar.template.ts
@@ -8,7 +8,7 @@ import {
     when,
 } from "@microsoft/fast-element";
 import type { ViewTemplate } from "@microsoft/fast-element";
-import { endTemplate, startTemplate } from "../patterns/start-end.js";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
 import { DataGrid, DataGridCell, DataGridRow } from "../data-grid/index.js";
 import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
 import type { ElementDefinitionContext } from "../design-system/registration-context.js";
@@ -252,7 +252,7 @@ export const calendarTemplate: FoundationElementTemplate<
     }-${today.getDate()}-${today.getFullYear()}`;
     return html<Calendar>`
         <template>
-            ${startTemplate}
+            ${startSlotTemplate(context, definition)}
             ${definition.title instanceof Function
                 ? definition.title(context, definition)
                 : definition.title ?? ""}
@@ -262,7 +262,7 @@ export const calendarTemplate: FoundationElementTemplate<
                 interactiveCalendarGridTemplate(context, todayString)
             )}
             ${when(x => x.readonly === true, noninteractiveCalendarTemplate(todayString))}
-            ${endTemplate}
+            ${endSlotTemplate(context, definition)}
         </template>
     `;
 };
diff --git a/packages/web-components/fast-foundation/src/patterns/start-end.ts b/packages/web-components/fast-foundation/src/patterns/start-end.ts
index 5cdc18217ae..b58126b553c 100644
--- a/packages/web-components/fast-foundation/src/patterns/start-end.ts
+++ b/packages/web-components/fast-foundation/src/patterns/start-end.ts
@@ -25,29 +25,18 @@ export type EndOptions = {
 export type StartEndOptions = StartOptions & EndOptions;
 
 /**
- * A mixin class implementing start and end elements.
+ * 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 startContainer: HTMLSpanElement;
-    public handleStartContentChange(): void {
-        this.startContainer.classList.toggle(
-            "start",
-            this.start.assignedNodes().length > 0
-        );
-    }
 
     public end: HTMLSlotElement;
-    public endContainer: HTMLSpanElement;
-    public handleEndContentChange(): void {
-        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
-    }
 }
 
 /**
- * The template for the end element.
+ * The template for the end slot.
  * For use with {@link StartEnd}
  *
  * @public
@@ -59,19 +48,11 @@ export const endSlotTemplate: (
     context: ElementDefinitionContext,
     definition: EndOptions
 ) => html`
-    <span
-        part="end"
-        ${ref("endContainer")}
-        class=${x => (definition.end ? "end" : void 0)}
-    >
-        <slot name="end" ${ref("end")} @slotchange="${x => x.handleEndContentChange()}">
-            ${definition.end || ""}
-        </slot>
-    </span>
+    <slot name="end" ${ref("end")}>${definition.end || ""}</slot>
 `;
 
 /**
- * The template for the start element.
+ * The template for the start slots.
  * For use with {@link StartEnd}
  *
  * @public
@@ -82,52 +63,7 @@ export const startSlotTemplate: (
 ) => ViewTemplate<StartEnd> = (
     context: ElementDefinitionContext,
     definition: StartOptions
-) => html`
-    <span
-        part="start"
-        ${ref("startContainer")}
-        class="${x => (definition.start ? "start" : void 0)}"
-    >
-        <slot
-            name="start"
-            ${ref("start")}
-            @slotchange="${x => x.handleStartContentChange()}"
-        >
-            ${definition.start || ""}
-        </slot>
-    </span>
-`;
-
-/**
- * The template for the end element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use endSlotTemplate
- */
-export const endTemplate: ViewTemplate<StartEnd> = html`
-    <span part="end" ${ref("endContainer")}>
-        <slot
-            name="end"
-            ${ref("end")}
-            @slotchange="${x => x.handleEndContentChange()}"
-        ></slot>
-    </span>
-`;
-
-/**
- * The template for the start element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use startSlotTemplate
- */
-export const startTemplate: ViewTemplate<StartEnd> = html`
-    <span part="start" ${ref("startContainer")}>
-        <slot
-            name="start"
-            ${ref("start")}
-            @slotchange="${x => x.handleStartContentChange()}"
-        ></slot>
-    </span>
-`;
+) =>
+    html`
+        <slot name="start" ${ref("start")}>${definition.start || ""}</slot>
+    `;
diff --git a/sites/fast-website/src/app/components/navigation/navigation.template.ts b/sites/fast-website/src/app/components/navigation/navigation.template.ts
index 69a0b901390..85eb1653beb 100644
--- a/sites/fast-website/src/app/components/navigation/navigation.template.ts
+++ b/sites/fast-website/src/app/components/navigation/navigation.template.ts
@@ -1,5 +1,5 @@
 import { html, when, elements, slotted } from "@microsoft/fast-element";
-import { endTemplate, startTemplate } from "@microsoft/fast-foundation";
+import { endSlotTemplate, startSlotTemplate } from "@microsoft/fast-foundation";
 import CloseIcon from "svg/icon-close.svg";
 import MenuIcon from "svg/icon-menu.svg";
 import { Navigation } from "./navigation";
@@ -10,7 +10,7 @@ export const NavigationTemplate = html<Navigation>`
         ${x => (x.debounce ? "debounce" : "")}"
         @focusout=${(x, c) => x.handleFocusOut(c.event as FocusEvent)}
     >
-        ${startTemplate}
+        ${startSlotTemplate}
         <fast-button
             class="nav-button"
             part="nav-button"
@@ -36,7 +36,7 @@ export const NavigationTemplate = html<Navigation>`
                     ${slotted({ property: "slottedNavigationItems", filter: elements() })}
                 ></slot>
             </ul>
-            ${endTemplate}
+            ${endSlotTemplate}
         </nav>
     </template>
 `;

From 340fd16038cce307461d8b95ff4af9441ab2cdcf Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Fri, 29 Apr 2022 10:06:21 -0700
Subject: [PATCH 097/135] fix document element bindings in SSR template
 rendering (#5905)

* add missing tests for host element bindings

* use parse for template rendering to support binding to document elements

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 .../elemenent-renderer.spec.ts                | 21 ++++++++++++++++-
 .../src/template-parser/template-parser.ts    | 23 ++++++++++++-------
 .../template-renderer.spec.ts                 | 20 ++++++++++++++++
 3 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
index 495ac72101b..a53b540c38a 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
@@ -4,6 +4,7 @@ import { expect, test } from '@playwright/test';
 import { FASTElementRenderer } from "./element-renderer.js";
 import fastSSR from "../exports.js";
 import { consolidate } from "../test-utils.js";
+import { timeStamp } from "console";
 
 
 @customElement({
@@ -11,7 +12,15 @@ import { consolidate } from "../test-utils.js";
     styles: css`:host { display: block; }${css`:host { color: red; }`}
     `
 })
-class StyledElement extends FASTElement {}
+export class StyledElement extends FASTElement {}
+
+@customElement({
+    name: "host-binding-element",
+    template: html`
+        <template attr="attr" ?bool-attr="${() => true}"></template>
+    `
+})
+export class HostBindingElement extends FASTElement {}
 test.describe("FASTElementRenderer", () => {
     test.describe("should have a 'matchesClass' method", () => {
         test("that returns true when invoked with a class that extends FASTElement ",  () => {
@@ -36,4 +45,14 @@ test.describe("FASTElementRenderer", () => {
             expect(result).toBe(`<styled-element><template shadowroot=\"open\"><fast-style style-id="fast-style-0" css=":host { display: block; }\"></fast-style><fast-style style-id=\"fast-style-1\" css=\":host { color: red; }"></fast-style></template></styled-element>`);
         });
     });
+
+    test("should render attributes on the root of a template element to the host element", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = consolidate(templateRenderer.render(html`
+            <host-binding-element></host-binding-element>
+        `, defaultRenderInfo));
+        expect(result).toBe(`
+            <host-binding-element attr="attr" bool-attr><template shadowroot=\"open\"></template></host-binding-element>
+        `);
+    })
 });
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
index 09794bf608c..38ba99e3e10 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
@@ -13,11 +13,11 @@ import {
 import {
     Attribute,
     DefaultTreeCommentNode,
-    DefaultTreeDocumentFragment,
     DefaultTreeElement,
     DefaultTreeNode,
     DefaultTreeParentNode,
     DefaultTreeTextNode,
+    parse,
     parseFragment,
 } from "parse5";
 import { AttributeBindingOp, Op, OpType } from "./op-codes.js";
@@ -44,7 +44,12 @@ declare module "parse5" {
  * @param visitor - callbacks to be invoked during node traversal
  */
 function traverse(node: DefaultTreeNode | DefaultTreeParentNode, visitor: Visitor) {
-    if (visitor.visit) {
+    // Templates parsed with `parse()` are parsed as full documents and will contain
+    // html, body tags whether the template contains them or not. Skip over visiting and
+    // leaving these elements if there is no source-code location, because that indicates
+    // they are not in the template string.
+    const shouldVisit = (node as DefaultTreeElement).sourceCodeLocation !== null;
+    if (visitor.visit && shouldVisit) {
         visitor.visit(node);
     }
 
@@ -59,7 +64,7 @@ function traverse(node: DefaultTreeNode | DefaultTreeParentNode, visitor: Visito
         traverse((node as any).content, visitor);
     }
 
-    if (visitor.leave) {
+    if (visitor.leave && shouldVisit) {
         visitor.leave(node);
     }
 }
@@ -88,8 +93,8 @@ function isElementNode(node: DefaultTreeNode): node is DefaultTreeElement {
     return (node as DefaultTreeElement).tagName !== undefined;
 }
 
-function isDocumentFragment(node: any): node is DefaultTreeDocumentFragment {
-    return node.nodeName === "#document-fragment";
+function isDefaultTreeParentNode(node: any): node is DefaultTreeParentNode {
+    return Array.isArray(node.childNodes);
 }
 
 function firstElementChild(node: DefaultTreeParentNode): DefaultTreeElement | null {
@@ -142,16 +147,18 @@ export function parseStringToOpCodes(
      */
     forCustomElement = false
 ): Op[] {
-    const nodeTree = parseFragment(templateString, { sourceCodeLocationInfo: true });
+    const nodeTree = (forCustomElement ? parseFragment : parse)(templateString, {
+        sourceCodeLocationInfo: true,
+    });
 
-    if (!isDocumentFragment(nodeTree)) {
+    if (!isDefaultTreeParentNode(nodeTree)) {
         // I'm not sure when exactly this is encountered but the type system seems to say it's possible.
         throw new Error(`Error parsing template`);
     }
 
     // TypeScript gets confused about what 'nodeTree' is.
     // Creating a new var clears that up.
-    let tree: DefaultTreeParentNode = nodeTree;
+    let tree = nodeTree as DefaultTreeParentNode;
 
     /**
      * Tracks the offset location in the source template string where the last
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
index cd26388c9e8..7b9d637c45b 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
@@ -179,6 +179,26 @@ test.describe("TemplateRenderer", () => {
         expect(result).toBe(`<input type="checkbox"  />`);
     });
 
+    test("should evaluate bindings for html element", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = consolidate(templateRenderer.render(html`<html attr=${x => "value"}></html>`, defaultRenderInfo));
+
+        expect(result).toBe(`<html attr="value"></html>`);
+    });
+    test("should evaluate bindings for head element", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = consolidate(templateRenderer.render(html`<head attr=${x => "value"}></head>`, defaultRenderInfo));
+
+        expect(result).toBe(`<head attr="value"></head>`);
+    });
+
+    test("should evaluate bindings for body element", () => {
+        const { templateRenderer, defaultRenderInfo} = fastSSR();
+        const result = consolidate(templateRenderer.render(html`<body attr=${x => "value"}></body>`, defaultRenderInfo));
+
+        expect(result).toBe(`<body attr="value"></body>`);
+    });
+
     test("should emit embedded templates", () =>{
         const { templateRenderer, defaultRenderInfo} = fastSSR();
 

From cb7780b14953b5a1f24b28114cceaddf612587f7 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Tue, 3 May 2022 10:13:03 -0700
Subject: [PATCH 098/135] fix various binding bugs in SSR template renderer
 (#5929)

* adding tests

* ensure boolean attribute bindings have value converted prior to setting attribute value

* ensure setAttribute isn't called for a null or undefined binding product

* consolidate binding rendering logic

* adding tests for binding boolean attributes and classList for template elements

* fix template binding bugs

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 .../elemenent-renderer.spec.ts                |  39 ++++-
 .../fast-ssr/src/template-parser/op-codes.ts  |   2 +-
 .../template-renderer.spec.ts                 |  13 ++
 .../template-renderer/template-renderer.ts    | 164 ++++++++++++------
 4 files changed, 163 insertions(+), 55 deletions(-)

diff --git a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
index a53b540c38a..7dc3dc3f769 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
@@ -1,19 +1,21 @@
 import "../dom-shim.js";
-import { FASTElement, customElement, css, html } from "@microsoft/fast-element";
+import { FASTElement, customElement, css, html, attr } from "@microsoft/fast-element";
 import { expect, test } from '@playwright/test';
 import { FASTElementRenderer } from "./element-renderer.js";
 import fastSSR from "../exports.js";
 import { consolidate } from "../test-utils.js";
-import { timeStamp } from "console";
 
 
+@customElement({
+    name: "bare-element",
+})
+export class BareElement extends FASTElement {}
 @customElement({
     name: "styled-element",
     styles: css`:host { display: block; }${css`:host { color: red; }`}
     `
 })
 export class StyledElement extends FASTElement {}
-
 @customElement({
     name: "host-binding-element",
     template: html`
@@ -54,5 +56,36 @@ test.describe("FASTElementRenderer", () => {
         expect(result).toBe(`
             <host-binding-element attr="attr" bool-attr><template shadowroot=\"open\"></template></host-binding-element>
         `);
+    });
+
+    test.describe("rendering an element with attributes", () => {
+        test("should not render the attribute when binding evaluates null", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = consolidate(templateRenderer.render(html`
+                <bare-element attr="${x => null}"></bare-element>
+            `, defaultRenderInfo));
+            expect(result).toBe(`
+                <bare-element ><template shadowroot=\"open\"></template></bare-element>
+            `);
+        });
+        test("should not render the attribute when the binding evaluates undefined", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = consolidate(templateRenderer.render(html`
+                <bare-element attr="${x => undefined}"></bare-element>
+            `, defaultRenderInfo));
+            expect(result).toBe(`
+                <bare-element ><template shadowroot=\"open\"></template></bare-element>
+            `);
+        });
+
+        test("should render an attribute with no value when a boolean attr evaluates true", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = consolidate(templateRenderer.render(html`
+                <bare-element ?attr="${x => true}"></bare-element>
+            `, defaultRenderInfo));
+            expect(result).toBe(`
+                <bare-element  attr><template shadowroot=\"open\"></template></bare-element>
+            `);
+        });
     })
 });
diff --git a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
index 53921e573fe..6bff0afd295 100644
--- a/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/op-codes.ts
@@ -83,7 +83,7 @@ export type TemplateElementOpenOp = {
     staticAttributes: Map<string, string>;
     // We need dynamic attributes here so we can emit the `<template`, all attributes, and then `>`
     // from one operation
-    dynamicAttributes: Pick<AttributeBindingOp, "binding" | "target" | "aspect">[];
+    dynamicAttributes: AttributeBindingOp[];
 };
 
 /**
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
index 7b9d637c45b..f9a3f99c2fd 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
@@ -49,6 +49,19 @@ test.describe("TemplateRenderer", () => {
 
             expect(consolidate(result)).toBe(`<template name="bar" id="bat"></template>`);
         });
+        test("should render a template element with a boolean attribute binding", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<template ?true=${x => true} ?false=${x => false}></template>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe(`<template true ></template>`);
+        });
+        test("should render a template element with a classList property binding", () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR();
+            const result = templateRenderer.render(html`<template :classList=${x => "a b"}></template>`, defaultRenderInfo)
+
+            expect(consolidate(result)).toBe(`<template class="a b"></template>`);
+        });
+
         test("should render a template element with both static and dynamic attributes", () => {
             const { templateRenderer, defaultRenderInfo} = fastSSR();
             const result = templateRenderer.render(html`<template id="bar" name=${x => "foo"}></template>`, defaultRenderInfo)
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
index 17f08d6c59d..83633ed9e7a 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
@@ -7,13 +7,17 @@ import {
     ViewBehaviorFactory,
     ViewTemplate,
 } from "@microsoft/fast-element";
-import { Op, OpType } from "../template-parser/op-codes.js";
+import { AttributeBindingOp, Op, OpType } from "../template-parser/op-codes.js";
 import {
     parseStringToOpCodes,
     parseTemplateToOpCodes,
 } from "../template-parser/template-parser.js";
 import { ViewBehaviorFactoryRenderer } from "./directives.js";
 
+function getLast<T>(arr: T[]): T | undefined {
+    return arr[arr.length - 1];
+}
+
 export type ComponentDOMEmissionMode = "shadow" | "light";
 export interface TemplateRendererConfiguration {
     /**
@@ -181,59 +185,17 @@ export class TemplateRenderer
                 }
 
                 case OpType.attributeBinding: {
-                    const { aspect, target, binding } = code;
+                    const { aspect, binding } = code;
                     // Don't emit anything for events or directives without bindings
                     if (aspect === Aspect.event) {
                         break;
                     }
 
-                    let result = binding(source, context);
-
-                    if (code.useCustomElementInstance) {
-                        const instance =
-                            renderInfo.customElementInstanceStack[
-                                renderInfo.customElementInstanceStack.length - 1
-                            ];
-
-                        if (instance) {
-                            switch (aspect) {
-                                case Aspect.property:
-                                    instance.setProperty(target, result);
-                                    break;
-                                case Aspect.tokenList:
-                                    instance.setAttribute("class", result);
-                                    break;
-                                default:
-                                    instance.setAttribute(target, result);
-                                    break;
-                            }
-                        }
-                    } else {
-                        // Only yield attributes as strings for native elements.
-                        // All custom-element attributes are emitted in the
-                        // OpType.customElementAttributes case
-                        switch (aspect) {
-                            case Aspect.booleanAttribute:
-                                if (!!result) {
-                                    result = "";
-                                    yield target;
-                                }
-                                break;
-                            case Aspect.attribute:
-                                if (result !== null && result !== undefined) {
-                                    yield `${target}="${result}"`;
-                                }
-                                break;
-                            case Aspect.tokenList:
-                            case Aspect.property:
-                                if (
-                                    code.target === "classList" ||
-                                    code.target === "className"
-                                ) {
-                                    yield `class="${result}"`;
-                                }
-                                break;
-                        }
+                    const result = binding(source, context);
+                    const renderer = this.getAttributeBindingRenderer(code);
+
+                    if (renderer) {
+                        yield* renderer(code, result, renderInfo);
                     }
 
                     break;
@@ -242,11 +204,17 @@ export class TemplateRenderer
                 case OpType.templateElementOpen:
                     yield "<template";
                     for (const [name, value] of code.staticAttributes) {
-                        yield ` ${name}="${value}"`;
+                        yield ` ${TemplateRenderer.formatAttribute(name, value)}`;
                     }
 
                     for (const attr of code.dynamicAttributes) {
-                        yield ` ${attr.target}="${attr.binding(source, context)}"`;
+                        const renderer = this.getAttributeBindingRenderer(attr);
+
+                        if (renderer) {
+                            const result = attr.binding(source, context);
+                            yield " ";
+                            yield* renderer(attr, result, renderInfo);
+                        }
                     }
                     yield ">";
                     break;
@@ -271,4 +239,98 @@ export class TemplateRenderer
             this.viewBehaviorFactoryRenderers.set(renderer.matcher, renderer);
         }
     }
+
+    private getAttributeBindingRenderer(code: AttributeBindingOp) {
+        switch (code.aspect) {
+            case Aspect.booleanAttribute:
+                return TemplateRenderer.renderBooleanAttribute;
+            case Aspect.property:
+            case Aspect.tokenList:
+                return TemplateRenderer.renderProperty;
+            case Aspect.attribute:
+                return TemplateRenderer.renderAttribute;
+        }
+    }
+
+    /**
+     * Format attribute key/value pair into a HTML attribute string.
+     * @param name
+     * @param value
+     */
+    private static formatAttribute(name: string, value: string) {
+        return value === "" ? name : `${name}="${value}"`;
+    }
+
+    /**
+     * Renders an attribute binding
+     */
+    private static *renderAttribute(
+        code: AttributeBindingOp,
+        value: any,
+        renderInfo: RenderInfo
+    ) {
+        if (value !== null && value !== undefined) {
+            const { target } = code;
+            if (code.useCustomElementInstance) {
+                const instance = getLast(renderInfo.customElementInstanceStack);
+
+                if (instance) {
+                    instance.setAttribute(target, value);
+                }
+            } else {
+                yield TemplateRenderer.formatAttribute(target, value);
+            }
+        }
+    }
+
+    /**
+     * Renders a property or tokenList binding
+     */
+    private static *renderProperty(
+        code: AttributeBindingOp,
+        value: any,
+        renderInfo: RenderInfo
+    ) {
+        const { target } = code;
+        if (code.useCustomElementInstance) {
+            const instance = getLast(renderInfo.customElementInstanceStack);
+
+            if (instance) {
+                switch (code.aspect) {
+                    case Aspect.property:
+                        instance.setProperty(target, value);
+                        break;
+                    case Aspect.tokenList:
+                        instance.setAttribute("class", value);
+                        break;
+                }
+            }
+        } else if (target === "classList" || target === "className") {
+            yield TemplateRenderer.formatAttribute("class", value);
+        }
+    }
+
+    /**
+     * Renders a boolean attribute binding
+     */
+    private static *renderBooleanAttribute(
+        code: AttributeBindingOp,
+        value: unknown,
+        renderInfo: RenderInfo
+    ) {
+        if (value) {
+            const value = "";
+            const { target } = code;
+
+            if (code.useCustomElementInstance) {
+                const instance = getLast(renderInfo.customElementInstanceStack);
+
+                if (instance) {
+                    instance.setAttribute(target, value);
+                }
+            } else {
+                yield TemplateRenderer.formatAttribute(target, value);
+            }
+        }
+    }
 }

From 7723d4639688d42a93d6684fbec0e282c11c6a83 Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholasrice@users.noreply.github.com>
Date: Wed, 4 May 2022 10:47:40 -0700
Subject: [PATCH 099/135] fixing build / test after rebase

---
 examples/design-system-tutorial/package.json  |   2 +-
 examples/todo-app-tutorial/package.json       |   2 +-
 .../web-components/fast-element/package.json  |   2 +-
 .../src/observation/observable.ts             |   1 +
 .../fast-foundation/docs/api-report.md        | 229 ++++++++++++++++--
 .../fast-foundation/package.json              |   2 +-
 .../fast-foundation/src/dialog/dialog.spec.ts |   1 +
 .../fast-foundation/src/text-area/README.md   |  16 +-
 .../fast-foundation/src/text-field/README.md  |  20 +-
 packages/web-components/fast-ssr/package.json |   4 +-
 10 files changed, 246 insertions(+), 33 deletions(-)

diff --git a/examples/design-system-tutorial/package.json b/examples/design-system-tutorial/package.json
index c1b78cc6179..f73db2be8a2 100644
--- a/examples/design-system-tutorial/package.json
+++ b/examples/design-system-tutorial/package.json
@@ -15,7 +15,7 @@
     "@microsoft/fast-element": "^1.10.2",
     "@microsoft/fast-foundation": "^2.46.9",
     "@microsoft/fast-components": "^2.30.6",
-    "tslib": "^1.11.1"
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
     "rimraf": "^3.0.2",
diff --git a/examples/todo-app-tutorial/package.json b/examples/todo-app-tutorial/package.json
index e3bf42dc202..a3a1bb911de 100644
--- a/examples/todo-app-tutorial/package.json
+++ b/examples/todo-app-tutorial/package.json
@@ -15,7 +15,7 @@
     "@microsoft/fast-colors": "^5.0.12",
     "@microsoft/fast-element": "latest",
     "@microsoft/fast-foundation": "latest",
-    "tslib": "^1.11.1"
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
     "http-server": "^14.1.0",
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index 0f26420fa01..0f4d14b9ea7 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -86,7 +86,7 @@
     "ts-loader": "^7.0.2",
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
-    "tslib": "^1.11.1",
+    "tslib": "^2.4.0",
     "typescript": "^4.6.2",
     "webpack": "^4.44.0"
   }
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index ec9215536b5..b63703a24fe 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -240,6 +240,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
                     watcher = void 0;
                     /* eslint-disable-next-line */
                     prevValue = prev.propertySource[prev.propertyName];
+                    /* eslint-disable-next-line */
                     watcher = this;
 
                     if (propertySource === prevValue) {
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 23aade92c7a..8d615c3039a 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -7,6 +7,7 @@
 import type { AttributeConfiguration } from '@microsoft/fast-element';
 import { Behavior } from '@microsoft/fast-element';
 import type { CaptureType } from '@microsoft/fast-element';
+import { ChildViewTemplate } from '@microsoft/fast-element';
 import { ComposableStyles } from '@microsoft/fast-element';
 import { Constructable } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
@@ -14,6 +15,7 @@ import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
+import { ItemViewTemplate } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 import { SyntheticViewTemplate } from '@microsoft/fast-element';
@@ -99,32 +101,68 @@ export class AnchoredRegion extends FoundationElement {
     // @internal (undocumented)
     adoptedCallback(): void;
     anchor: string;
+    // (undocumented)
+    protected anchorChanged(): void;
     anchorElement: HTMLElement | null;
+    // (undocumented)
+    protected anchorElementChanged(): void;
     autoUpdateMode: AutoUpdateMode;
+    // (undocumented)
+    protected autoUpdateModeChanged(prevMode: AutoUpdateMode, newMode: AutoUpdateMode): void;
     // @internal (undocumented)
     connectedCallback(): void;
     // @internal (undocumented)
     disconnectedCallback(): void;
     fixedPlacement: boolean;
+    // (undocumented)
+    protected fixedPlacementChanged(): void;
     horizontalDefaultPosition: HorizontalPosition;
+    // (undocumented)
+    protected horizontalDefaultPositionChanged(): void;
     horizontalInset: boolean;
+    // (undocumented)
+    protected horizontalInsetChanged(): void;
     horizontalPosition: AnchoredRegionPositionLabel | undefined;
     horizontalPositioningMode: AxisPositioningMode;
+    // (undocumented)
+    protected horizontalPositioningModeChanged(): void;
     horizontalScaling: AxisScalingMode;
+    // (undocumented)
+    protected horizontalScalingChanged(): void;
     horizontalThreshold: number;
+    // (undocumented)
+    protected horizontalThresholdChanged(): void;
     horizontalViewportLock: boolean;
+    // (undocumented)
+    protected horizontalViewportLockChanged(): void;
     // @internal
     initialLayoutComplete: boolean;
     update: () => void;
     verticalDefaultPosition: VerticalPosition;
+    // (undocumented)
+    protected verticalDefaultPositionChanged(): void;
     verticalInset: boolean;
+    // (undocumented)
+    protected verticalInsetChanged(): void;
     verticalPosition: AnchoredRegionPositionLabel | undefined;
     verticalPositioningMode: AxisPositioningMode;
+    // (undocumented)
+    protected verticalPositioningModeChanged(): void;
     verticalScaling: AxisScalingMode;
+    // (undocumented)
+    protected verticalScalingChanged(): void;
     verticalThreshold: number;
+    // (undocumented)
+    protected verticalThresholdChanged(): void;
     verticalViewportLock: boolean;
+    // (undocumented)
+    protected verticalViewportLockChanged(): void;
     viewport: string;
+    // (undocumented)
+    protected viewportChanged(): void;
     viewportElement: HTMLElement | null;
+    // (undocumented)
+    protected viewportElementChanged(): void;
 }
 
 // @public
@@ -227,11 +265,17 @@ export class BaseProgress extends FoundationElement {
     // @internal (undocumented)
     connectedCallback(): void;
     max: number;
+    // (undocumented)
+    protected maxChanged(): void;
     min: number;
+    // (undocumented)
+    protected minChanged(): void;
     paused: boolean;
     // @internal
     percentComplete: number;
     value: number | null;
+    // (undocumented)
+    protected valueChanged(): void;
 }
 
 // @public
@@ -239,7 +283,7 @@ export class Breadcrumb extends FoundationElement {
     // @internal (undocumented)
     slottedBreadcrumbItems: HTMLElement[];
     // (undocumented)
-    slottedBreadcrumbItemsChanged(): void;
+    protected slottedBreadcrumbItemsChanged(): void;
 }
 
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
@@ -281,12 +325,24 @@ export class Button extends FormAssociatedButton {
     // @internal (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;
     type: "submit" | "reset" | "button";
+    // (undocumented)
+    protected typeChanged(previous: "submit" | "reset" | "button" | void, next: "submit" | "reset" | "button"): void;
 }
 
 // @internal
@@ -304,29 +360,36 @@ export class Calendar extends FoundationElement {
     dateFormatter: DateFormatter;
     dateInString(date: Date | string, datesString: string): boolean;
     dayFormat: DayFormat;
+    // (undocumented)
+    protected dayFormatChanged(): void;
     disabledDates: string;
     getDayClassNames(date: CalendarDateInfo, todayString?: string): string;
     getDays(info?: CalendarInfo, minWeeks?: number): CalendarDateInfo[][];
     getMonthInfo(month?: number, year?: number): CalendarInfo;
-    getWeekdayText(): {
-        text: string;
-        abbr?: string;
-    }[];
+    getWeekdayText(): WeekdayText[];
     handleDateSelect(event: Event, day: CalendarDateInfo): void;
     handleKeydown(event: KeyboardEvent, date: CalendarDateInfo): boolean;
     locale: string;
+    // (undocumented)
+    protected localeChanged(): void;
     minWeeks: number;
     month: number;
     monthFormat: MonthFormat;
+    // (undocumented)
+    protected monthFormatChanged(): void;
     readonly: boolean;
     selectedDates: string;
     weekdayFormat: WeekdayFormat;
+    // (undocumented)
+    protected weekdayFormatChanged(): void;
     year: number;
     yearFormat: YearFormat;
+    // (undocumented)
+    protected yearFormatChanged(): void;
 }
 
 // @public
-export const calendarCellTemplate: (context: ElementDefinitionContext, todayString: string) => ViewTemplate<CalendarDateInfo>;
+export const calendarCellTemplate: (context: ElementDefinitionContext, todayString: string) => ItemViewTemplate<CalendarDateInfo>;
 
 // @public
 export type CalendarDateInfo = {
@@ -349,7 +412,7 @@ export type CalendarOptions = FoundationElementDefinition & StartEndOptions & {
 };
 
 // @public (undocumented)
-export const calendarRowTemplate: (context: ElementDefinitionContext, todayString: string) => ViewTemplate;
+export const calendarRowTemplate: (context: ElementDefinitionContext, todayString: string) => ChildViewTemplate;
 
 // @public
 export const calendarTemplate: FoundationElementTemplate<ViewTemplate<Calendar>, CalendarOptions>;
@@ -358,7 +421,7 @@ export const calendarTemplate: FoundationElementTemplate<ViewTemplate<Calendar>,
 export const CalendarTitleTemplate: ViewTemplate<Calendar>;
 
 // @public
-export const calendarWeekdayTemplate: (context: ElementDefinitionContext) => ViewTemplate;
+export const calendarWeekdayTemplate: (context: ElementDefinitionContext) => ItemViewTemplate;
 
 // @public
 export class Card extends FoundationElement {
@@ -408,6 +471,8 @@ export class Checkbox extends FormAssociatedCheckbox {
     // @internal (undocumented)
     keypressHandler: (e: KeyboardEvent) => void;
     readOnly: boolean;
+    // (undocumented)
+    protected readOnlyChanged(): void;
 }
 
 // @public
@@ -623,12 +688,14 @@ export const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaSt
 // @public
 export class DataGrid extends FoundationElement {
     constructor();
-    cellItemTemplate?: ViewTemplate;
+    cellItemTemplate?: ItemViewTemplate;
     columnDefinitions: ColumnDefinition[] | null;
+    // (undocumented)
+    protected columnDefinitionsChanged(): void;
     // @internal (undocumented)
     connectedCallback(): void;
     // @internal
-    defaultRowItemTemplate: ViewTemplate;
+    defaultRowItemTemplate: ItemViewTemplate;
     // @internal (undocumented)
     disconnectedCallback(): void;
     focusColumnIndex: number;
@@ -636,6 +703,8 @@ export class DataGrid extends FoundationElement {
     static generateColumns: (row: object) => ColumnDefinition[];
     generateHeader: GenerateHeaderOptions;
     gridTemplateColumns: string;
+    // (undocumented)
+    protected gridTemplateColumnsChanged(): void;
     // @internal (undocumented)
     handleFocus(e: FocusEvent): void;
     // @internal (undocumented)
@@ -644,25 +713,33 @@ export class DataGrid extends FoundationElement {
     handleKeydown(e: KeyboardEvent): void;
     // @internal (undocumented)
     handleRowFocus(e: Event): void;
-    headerCellItemTemplate?: ViewTemplate;
+    headerCellItemTemplate?: ItemViewTemplate;
     noTabbing: boolean;
+    // (undocumented)
+    protected noTabbingChanged(): void;
     // @internal
     rowElements: HTMLElement[];
     rowElementTag: string;
-    rowItemTemplate: ViewTemplate;
+    rowItemTemplate: ItemViewTemplate;
     rowsData: object[];
+    // (undocumented)
+    protected rowsDataChanged(): void;
 }
 
 // @public
 export class DataGridCell extends FoundationElement {
     cellType: DataGridCellTypes;
     columnDefinition: ColumnDefinition | null;
+    // (undocumented)
+    protected columnDefinitionChanged(oldValue: ColumnDefinition | null, newValue: ColumnDefinition | null): void;
     // @internal (undocumented)
     connectedCallback(): void;
     // @internal (undocumented)
     disconnectedCallback(): void;
     gridColumn: string;
     // (undocumented)
+    protected gridColumnChanged(): void;
+    // (undocumented)
     handleFocusin(e: FocusEvent): void;
     // (undocumented)
     handleFocusout(e: FocusEvent): void;
@@ -687,32 +764,36 @@ export type DataGridCellTypes = typeof DataGridCellTypes[keyof typeof DataGridCe
 // @public
 export class DataGridRow extends FoundationElement {
     // @internal
-    activeCellItemTemplate?: ViewTemplate;
+    activeCellItemTemplate?: ItemViewTemplate;
     // @internal
     cellElements: HTMLElement[];
-    cellItemTemplate?: ViewTemplate;
+    cellItemTemplate?: ItemViewTemplate;
     columnDefinitions: ColumnDefinition[] | null;
     // @internal (undocumented)
     connectedCallback(): void;
     // @internal
-    defaultCellItemTemplate?: ViewTemplate;
+    defaultCellItemTemplate?: ItemViewTemplate;
     // @internal
-    defaultHeaderCellItemTemplate?: ViewTemplate;
+    defaultHeaderCellItemTemplate?: ItemViewTemplate;
     // @internal (undocumented)
     disconnectedCallback(): void;
     // @internal (undocumented)
     focusColumnIndex: number;
     gridTemplateColumns: string;
     // (undocumented)
+    protected gridTemplateColumnsChanged(): void;
+    // (undocumented)
     handleCellFocus(e: Event): void;
     // (undocumented)
     handleFocusout(e: FocusEvent): void;
     // (undocumented)
     handleKeydown(e: KeyboardEvent): void;
-    headerCellItemTemplate?: ViewTemplate;
+    headerCellItemTemplate?: ItemViewTemplate;
     // @internal
     isActiveRow: boolean;
     rowData: object | null;
+    // (undocumented)
+    protected rowDataChanged(): void;
     rowIndex: number;
     rowType: DataGridRowTypes;
     // @internal (undocumented)
@@ -1006,6 +1087,8 @@ export class Dialog extends FoundationElement {
     modal: boolean;
     show(): void;
     trapFocus: boolean;
+    // (undocumented)
+    protected trapFocusChanged: () => void;
 }
 
 // @public
@@ -1606,6 +1689,8 @@ export class Menu extends FoundationElement {
     readonly isNestedMenu: () => boolean;
     // @internal (undocumented)
     items: HTMLSlotElement;
+    // (undocumented)
+    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
 }
 
 // @beta
@@ -1617,6 +1702,8 @@ export type menuConfigs = "bottom" | "bottom-fill" | "tallest" | "tallest-fill"
 // @public
 export class MenuItem extends FoundationElement {
     checked: boolean;
+    // (undocumented)
+    protected checkedChanged(oldValue: boolean, newValue: boolean): void;
     // @internal (undocumented)
     connectedCallback(): void;
     // @internal
@@ -1625,6 +1712,8 @@ export class MenuItem extends FoundationElement {
     // @internal (undocumented)
     disconnectedCallback(): void;
     expanded: boolean;
+    // (undocumented)
+    protected expandedChanged(oldValue: boolean): void;
     // @internal (undocumented)
     handleMenuItemClick: (e: MouseEvent) => boolean;
     // @internal (undocumented)
@@ -1777,15 +1866,23 @@ export class Picker extends FormAssociatedPicker {
     // @internal (undocumented)
     connectedCallback(): void;
     defaultListItemTemplate?: ViewTemplate;
+    // (undocumented)
+    protected defaultListItemTemplateChanged(): void;
     defaultMenuOptionTemplate?: ViewTemplate;
     // (undocumented)
+    protected defaultMenuOptionTemplateChanged(): void;
+    // (undocumented)
     disconnectedCallback(): void;
     // @internal
     filteredOptionsList: string[];
+    // (undocumented)
+    protected filteredOptionsListChanged(): void;
     filterQuery: boolean;
     filterSelected: boolean;
     // @internal
     flyoutOpen: boolean;
+    // (undocumented)
+    protected flyoutOpenChanged(): void;
     // @public
     focus(): void;
     handleFocusIn(e: FocusEvent): boolean;
@@ -1804,6 +1901,8 @@ export class Picker extends FormAssociatedPicker {
     listElement: PickerList;
     listItemContentsTemplate: ViewTemplate;
     listItemTemplate: ViewTemplate;
+    // (undocumented)
+    protected listItemTemplateChanged(): void;
     loadingText: string;
     maxSelected: number | undefined;
     // @internal
@@ -1818,14 +1917,22 @@ export class Picker extends FormAssociatedPicker {
     menuId: string;
     menuOptionContentsTemplate: ViewTemplate;
     menuOptionTemplate: ViewTemplate;
+    // (undocumented)
+    protected menuOptionTemplateChanged(): void;
     menuPlacement: menuConfigs;
+    // (undocumented)
+    protected menuPlacementChanged(): void;
     // @internal
     menuTag: string;
     noSuggestionsText: string;
     options: string;
+    // (undocumented)
+    protected optionsChanged(): void;
     optionsList: string[];
     placeholder: string;
     query: string;
+    // (undocumented)
+    protected queryChanged(): void;
     // @internal
     region: AnchoredRegion;
     // @internal (undocumented)
@@ -1833,7 +1940,11 @@ export class Picker extends FormAssociatedPicker {
     // @internal
     selectedListTag: string;
     selection: string;
+    // (undocumented)
+    protected selectionChanged(): void;
     showLoading: boolean;
+    // (undocumented)
+    protected showLoadingChanged(): void;
     // @internal
     showNoOptions: boolean;
     suggestionsAvailableText: string;
@@ -1848,6 +1959,8 @@ export class PickerListItem extends FoundationElement {
     // @internal (undocumented)
     connectedCallback(): void;
     contentsTemplate: ViewTemplate;
+    // (undocumented)
+    protected contentsTemplateChanged(): void;
     // @internal (undocumented)
     disconnectedCallback(): void;
     // (undocumented)
@@ -1891,6 +2004,8 @@ export class PickerMenuOption extends FoundationElement {
     // @internal (undocumented)
     connectedCallback(): void;
     contentsTemplate: ViewTemplate;
+    // (undocumented)
+    protected contentsTemplateChanged(): void;
     // @internal (undocumented)
     disconnectedCallback(): void;
     // (undocumented)
@@ -1962,6 +2077,8 @@ export class Radio extends FormAssociatedRadio implements RadioControl {
     keypressHandler: (e: KeyboardEvent) => boolean | void;
     name: string;
     readOnly: boolean;
+    // (undocumented)
+    protected readOnlyChanged(): void;
 }
 
 // @public
@@ -1977,6 +2094,8 @@ export class RadioGroup extends FoundationElement {
     connectedCallback(): void;
     disabled: boolean;
     // (undocumented)
+    protected disabledChanged(): void;
+    // (undocumented)
     disconnectedCallback(): void;
     // @internal (undocumented)
     focusOutHandler: (e: FocusEvent) => boolean | void;
@@ -1987,8 +2106,12 @@ export class RadioGroup extends FoundationElement {
     protected nameChanged(): void;
     orientation: Orientation | "horizontal" | "vertical";
     readOnly: boolean;
+    // (undocumented)
+    protected readOnlyChanged(): void;
     // @internal (undocumented)
     slottedRadioButtons: HTMLElement[];
+    // (undocumented)
+    protected slottedRadioButtonsChanged(oldValue: unknown, newValue: HTMLElement[]): void;
     value: string;
     // (undocumented)
     protected valueChanged(): void;
@@ -2113,6 +2236,8 @@ export type ScrollEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out" | s
 // @public
 export class Search extends FormAssociatedSearch {
     autofocus: boolean;
+    // (undocumented)
+    protected autofocusChanged(): void;
     // @internal (undocumented)
     connectedCallback(): void;
     // @internal
@@ -2125,15 +2250,31 @@ export class Search extends FormAssociatedSearch {
     // @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;
     // @internal
     root: HTMLDivElement;
     size: number;
+    // (undocumented)
+    protected sizeChanged(): void;
     spellcheck: boolean;
+    // (undocumented)
+    protected spellcheckChanged(): void;
 }
 
 // @internal
@@ -2289,6 +2430,8 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
     // @internal (undocumented)
     position: string;
     readOnly: boolean;
+    // (undocumented)
+    protected readOnlyChanged(): void;
     step: number;
     // @internal (undocumented)
     stepMultiplier: number;
@@ -2338,6 +2481,8 @@ export class SliderLabel extends FoundationElement {
     handleChange(source: any, propertyName: string): void;
     hideMark: boolean;
     position: string;
+    // (undocumented)
+    protected positionChanged(): void;
     // @internal (undocumented)
     positionStyle: string;
     // @internal (undocumented)
@@ -2414,6 +2559,8 @@ export class Switch extends FormAssociatedSwitch {
     // @internal (undocumented)
     keypressHandler: (e: KeyboardEvent) => void;
     readOnly: boolean;
+    // (undocumented)
+    protected readOnlyChanged(): void;
 }
 
 // @public
@@ -2495,6 +2642,8 @@ export const tabTemplate: FoundationElementTemplate<ViewTemplate<Tab>>;
 // @public
 export class TextArea extends FormAssociatedTextArea {
     autofocus: boolean;
+    // (undocumented)
+    protected autofocusChanged(): void;
     cols: number;
     // @internal
     control: HTMLTextAreaElement;
@@ -2506,8 +2655,14 @@ export class TextArea extends FormAssociatedTextArea {
     // @internal (undocumented)
     handleTextInput: () => void;
     list: string;
+    // (undocumented)
+    protected listChanged(): void;
     maxlength: number;
+    // (undocumented)
+    protected maxlengthChanged(): void;
     minlength: number;
+    // (undocumented)
+    protected minlengthChanged(): void;
     name: string;
     placeholder: string;
     readOnly: boolean;
@@ -2515,6 +2670,8 @@ export class TextArea extends FormAssociatedTextArea {
     rows: number;
     protected select(): void;
     spellcheck: boolean;
+    // (undocumented)
+    protected spellcheckChanged(): void;
 }
 
 // @internal
@@ -2542,6 +2699,8 @@ export const textAreaTemplate: FoundationElementTemplate<ViewTemplate<TextArea>>
 // @public
 export class TextField extends FormAssociatedTextField {
     autofocus: boolean;
+    // (undocumented)
+    protected autofocusChanged(): void;
     // @internal (undocumented)
     connectedCallback(): void;
     // @internal
@@ -2553,13 +2712,27 @@ export class TextField extends FormAssociatedTextField {
     // @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;
     protected select(): void;
     size: number;
+    // (undocumented)
+    protected sizeChanged(): void;
     spellcheck: boolean;
     type: TextFieldType;
 }
@@ -2634,7 +2807,11 @@ export const toolbarTemplate: FoundationElementTemplate<ViewTemplate<Toolbar>, T
 // @public
 export class Tooltip extends FoundationElement {
     anchor: string;
+    // (undocumented)
+    protected anchorChanged(): void;
     anchorElement: HTMLElement | null;
+    // (undocumented)
+    protected anchorElementChanged(oldValue: HTMLElement | null): void;
     autoUpdateMode: AutoUpdateMode;
     // (undocumented)
     connectedCallback(): void;
@@ -2670,7 +2847,11 @@ export class Tooltip extends FoundationElement {
     verticalViewportLock: boolean;
     // @internal
     viewportElement: HTMLElement | null;
+    // (undocumented)
+    protected viewportElementChanged(): void;
     visible: boolean;
+    // (undocumented)
+    protected visibleChanged(): void;
 }
 
 // @public
@@ -2722,6 +2903,8 @@ export class TreeItem extends FoundationElement {
     // @internal
     expandCollapseButton: HTMLDivElement;
     expanded: boolean;
+    // (undocumented)
+    protected expandedChanged(): void;
     // @internal
     focusable: boolean;
     static focusItem(el: HTMLElement): void;
@@ -2734,11 +2917,15 @@ export class TreeItem extends FoundationElement {
     readonly isNestedItem: () => boolean;
     // @internal
     items: HTMLElement[];
+    // (undocumented)
+    protected itemsChanged(oldValue: unknown, newValue: HTMLElement[]): void;
     // @internal
     nested: boolean;
     // @internal (undocumented)
     renderCollapsedChildren: boolean;
     selected: boolean;
+    // (undocumented)
+    protected selectedChanged(): void;
 }
 
 // @internal
@@ -2773,6 +2960,8 @@ export class TreeView extends FoundationElement {
     renderCollapsedNodes: boolean;
     // @internal
     slottedTreeItems: HTMLElement[];
+    // (undocumented)
+    protected slottedTreeItemsChanged(): void;
     // @internal
     treeView: HTMLElement;
 }
@@ -2791,6 +2980,12 @@ export type VerticalPosition = "top" | "bottom" | "center" | "unset";
 // @public
 export type WeekdayFormat = "long" | "narrow" | "short";
 
+// @public
+export type WeekdayText = {
+    text: string;
+    abbr?: string;
+};
+
 // @public
 export function whitespaceFilter(value: Node, index: number, array: Node[]): boolean;
 
diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
index b8ca407c3df..e74794f99ec 100644
--- a/packages/web-components/fast-foundation/package.json
+++ b/packages/web-components/fast-foundation/package.json
@@ -98,7 +98,7 @@
     "@microsoft/fast-element": "^1.10.2",
     "@microsoft/fast-web-utilities": "^5.4.1",
     "tabbable": "^5.2.0",
-    "tslib": "^1.13.0"
+    "tslib": "^2.4.0"
   },
   "customElements": "dist/custom-elements.json"
 }
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
index 90594ccd687..6da5caa6d50 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
@@ -274,6 +274,7 @@ describe("Dialog", () => {
 
         it("should fire a 'cancel' event when its overlay is clicked", async () => {
             const { element, connect, disconnect } = await setup();
+            element.modal = true;
 
             await connect();
 
diff --git a/packages/web-components/fast-foundation/src/text-area/README.md b/packages/web-components/fast-foundation/src/text-area/README.md
index 03286464cc7..4dd9b069c9d 100644
--- a/packages/web-components/fast-foundation/src/text-area/README.md
+++ b/packages/web-components/fast-foundation/src/text-area/README.md
@@ -96,11 +96,17 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### Methods
 
-| Name              | Privacy   | Description                           | Parameters | Return | Inherited From    |
-| ----------------- | --------- | ------------------------------------- | ---------- | ------ | ----------------- |
-| `select`          | public    | Selects all the text in the text area |            | `void` |                   |
-| `templateChanged` | protected |                                       |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |                                       |            | `void` | FoundationElement |
+| Name                | Privacy   | Description                           | Parameters | Return | Inherited From    |
+| ------------------- | --------- | ------------------------------------- | ---------- | ------ | ----------------- |
+| `readOnlyChanged`   | protected |                                       |            | `void` |                   |
+| `autofocusChanged`  | protected |                                       |            | `void` |                   |
+| `listChanged`       | protected |                                       |            | `void` |                   |
+| `maxlengthChanged`  | protected |                                       |            | `void` |                   |
+| `minlengthChanged`  | protected |                                       |            | `void` |                   |
+| `spellcheckChanged` | protected |                                       |            | `void` |                   |
+| `select`            | public    | Selects all the text in the text area |            | `void` |                   |
+| `templateChanged`   | protected |                                       |            | `void` | FoundationElement |
+| `stylesChanged`     | protected |                                       |            | `void` | FoundationElement |
 
 #### Events
 
diff --git a/packages/web-components/fast-foundation/src/text-field/README.md b/packages/web-components/fast-foundation/src/text-field/README.md
index e57fdbd2593..2d21d474feb 100644
--- a/packages/web-components/fast-foundation/src/text-field/README.md
+++ b/packages/web-components/fast-foundation/src/text-field/README.md
@@ -99,11 +99,21 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### Methods
 
-| Name              | Privacy   | Description                            | Parameters | Return | Inherited From    |
-| ----------------- | --------- | -------------------------------------- | ---------- | ------ | ----------------- |
-| `select`          | public    | Selects all the text in the text field |            | `void` |                   |
-| `templateChanged` | protected |                                        |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |                                        |            | `void` | FoundationElement |
+| Name                 | Privacy   | Description                            | Parameters | Return | Inherited From    |
+| -------------------- | --------- | -------------------------------------- | ---------- | ------ | ----------------- |
+| `readOnlyChanged`    | protected |                                        |            | `void` |                   |
+| `autofocusChanged`   | protected |                                        |            | `void` |                   |
+| `placeholderChanged` | protected |                                        |            | `void` |                   |
+| `typeChanged`        | protected |                                        |            | `void` |                   |
+| `listChanged`        | protected |                                        |            | `void` |                   |
+| `maxlengthChanged`   | protected |                                        |            | `void` |                   |
+| `minlengthChanged`   | protected |                                        |            | `void` |                   |
+| `patternChanged`     | protected |                                        |            | `void` |                   |
+| `sizeChanged`        | protected |                                        |            | `void` |                   |
+| `spellcheckChanged`  | protected |                                        |            | `void` |                   |
+| `select`             | public    | Selects all the text in the text field |            | `void` |                   |
+| `templateChanged`    | protected |                                        |            | `void` | FoundationElement |
+| `stylesChanged`      | protected |                                        |            | `void` | FoundationElement |
 
 #### Events
 
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index eabf18d2007..5b32fb3c1ea 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -41,7 +41,7 @@
     "@lit-labs/ssr": "^2.1.0",
     "@microsoft/fast-element": "^1.5.0",
     "parse5": "^6.0.1",
-    "tslib": "^1.11.1"
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.20.1",
@@ -49,6 +49,6 @@
     "@types/node": "^17.0.17",
     "chokidar-cli": "^3.0.0",
     "express": "^4.17.1",
-    "typescript": "^3.8.3"
+    "typescript": "^4.6.2"
   }
 }

From 836d7e78205e46aa4e611966a69db65d4f4df417 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Thu, 5 May 2022 10:14:11 -0700
Subject: [PATCH 100/135] chore: add api extractor to FAST SSR (#5939)

* adds api extractor and configures exports. Also removes entrypoints to certain incomplete features

* use latest api extractor

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 .../fast-ssr/api-extractor.json               |  9 +++
 .../fast-ssr/docs/api-report.md               | 62 ++++++++++++++++
 packages/web-components/fast-ssr/package.json | 12 +++-
 .../elemenent-renderer.spec.ts                |  4 +-
 .../src/element-renderer/element-renderer.ts  |  6 ++
 .../web-components/fast-ssr/src/exports.ts    | 30 ++++----
 .../fast-ssr/src/styles/style-renderer.ts     | 10 ++-
 .../template-renderer.spec.ts                 |  6 +-
 .../template-renderer/template-renderer.ts    | 72 +++++++++----------
 yarn.lock                                     | 18 +++++
 10 files changed, 166 insertions(+), 63 deletions(-)
 create mode 100644 packages/web-components/fast-ssr/api-extractor.json
 create mode 100644 packages/web-components/fast-ssr/docs/api-report.md

diff --git a/packages/web-components/fast-ssr/api-extractor.json b/packages/web-components/fast-ssr/api-extractor.json
new file mode 100644
index 00000000000..eedc82e737f
--- /dev/null
+++ b/packages/web-components/fast-ssr/api-extractor.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "../../../api-extractor.json",
+  "mainEntryPointFilePath": "./dist/dts/exports.d.ts",
+  "dtsRollup": {
+    "enabled": true,
+    "betaTrimmedFilePath": "./dist/fast-ssr.d.ts"
+  }
+}
\ No newline at end of file
diff --git a/packages/web-components/fast-ssr/docs/api-report.md b/packages/web-components/fast-ssr/docs/api-report.md
new file mode 100644
index 00000000000..51c8333c316
--- /dev/null
+++ b/packages/web-components/fast-ssr/docs/api-report.md
@@ -0,0 +1,62 @@
+## API Report File for "@microsoft/fast-ssr"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { Binding } from '@microsoft/fast-element';
+import { ComposableStyles } from '@microsoft/fast-element';
+import { Constructable } from '@microsoft/fast-element';
+import { ElementRenderer } from '@lit-labs/ssr';
+import { ExecutionContext } from '@microsoft/fast-element';
+import { FASTElement } from '@microsoft/fast-element';
+import { RenderInfo } from '@lit-labs/ssr';
+import { ViewBehaviorFactory } from '@microsoft/fast-element';
+import { ViewTemplate } from '@microsoft/fast-element';
+
+// @beta
+export type ComponentDOMEmissionMode = "shadow";
+
+// @beta
+export abstract class FASTElementRenderer extends ElementRenderer {
+    constructor(tagName: string);
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    connectedCallback(): void;
+    readonly element: FASTElement;
+    static matchesClass(ctor: typeof HTMLElement): boolean;
+    renderLight(renderInfo: RenderInfo): IterableIterator<string>;
+    renderShadow(renderInfo: RenderInfo): IterableIterator<string>;
+    protected abstract styleRenderer: StyleRenderer;
+    protected abstract templateRenderer: TemplateRenderer;
+}
+
+// @beta
+function fastSSR(): {
+    templateRenderer: TemplateRenderer;
+    elementRenderer: typeof FASTElementRenderer;
+    defaultRenderInfo: RenderInfo;
+};
+export default fastSSR;
+
+// @beta
+export interface StyleRenderer {
+    render(styles: ComposableStyles): string;
+}
+
+// @beta
+export class TemplateRenderer {
+    readonly componentDOMEmissionMode: ComponentDOMEmissionMode;
+    render(template: ViewTemplate | string, renderInfo: RenderInfo, source?: unknown, context?: ExecutionContext): IterableIterator<string>;
+    // Warning: (ae-forgotten-export) The symbol "Op" needs to be exported by the entry point exports.d.ts
+    //
+    // @internal
+    renderOpCodes(codes: Op[], renderInfo: RenderInfo, source: unknown, context: ExecutionContext): IterableIterator<string>;
+    // Warning: (ae-forgotten-export) The symbol "ViewBehaviorFactoryRenderer" needs to be exported by the entry point exports.d.ts
+    //
+    // @internal
+    withViewBehaviorFactoryRenderers(...renderers: ViewBehaviorFactoryRenderer<any>[]): void;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index 5b32fb3c1ea..c76cd4c11f9 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -16,7 +16,9 @@
   },
   "scripts": {
     "clean": "tsc -b --clean src",
-    "build": "tsc -b src",
+    "build": "tsc -b src && yarn doc",
+    "doc": "api-extractor run --local",
+    "doc:ci": "api-extractor run",
     "prepare": "yarn run clean && yarn run build",
     "build-server": "tsc -b server",
     "eslint": "eslint . --ext .ts",
@@ -31,9 +33,12 @@
   },
   "description": "A package for rendering FAST components outside the browser.",
   "main": "./dist/esm/exports.js",
-  "types": "./dist/dts/exports.d.ts",
+  "types": "./dist/fast-ssr.d.ts",
   "exports": {
-    "." : "./dist/esm/exports.js",
+    "." : {
+      "default": "./dist/esm/exports.js",
+      "types": "./dist/fast-ssr.d.ts"
+    },
     "./install-dom-shim": "./dist/esm/dom-shim.js"
   },
   "private": true,
@@ -44,6 +49,7 @@
     "tslib": "^2.4.0"
   },
   "devDependencies": {
+    "@microsoft/api-extractor": "7.23.1",
     "@playwright/test": "^1.20.1",
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.17",
diff --git a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
index 7dc3dc3f769..7951ae0c325 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
@@ -41,8 +41,8 @@ test.describe("FASTElementRenderer", () => {
             const result = consolidate(templateRenderer.render(html`<styled-element></styled-element>`, defaultRenderInfo));
             expect(result).toBe("<styled-element><template shadowroot=\"open\"><style>:host { display: block; }</style><style>:host { color: red; }</style></template></styled-element>");
         });
-        test(`should render stylesheets as 'fast-style' elements when configured`, () => {
-            const { templateRenderer, defaultRenderInfo} = fastSSR({useFASTStyle: true});
+        test.skip(`should render stylesheets as 'fast-style' elements when configured`, () => {
+            const { templateRenderer, defaultRenderInfo} = fastSSR(/* Replace w/ configuration when fast-style work is complete{useFASTStyle: true}*/);
             const result = consolidate(templateRenderer.render(html`<styled-element></styled-element>`, defaultRenderInfo));
             expect(result).toBe(`<styled-element><template shadowroot=\"open\"><fast-style style-id="fast-style-0" css=":host { display: block; }\"></fast-style><fast-style style-id=\"fast-style-1\" css=\":host { color: red; }"></fast-style></template></styled-element>`);
         });
diff --git a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
index 93998ab8fed..f5daa06570b 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
@@ -5,6 +5,12 @@ import { TemplateRenderer } from "../template-renderer/template-renderer.js";
 import { SSRView } from "../view.js";
 import { FASTSSRStyleStrategy } from "./style-strategy.js";
 
+/**
+ * An {@link @lit-labs/ssr#ElementRenderer} implementation designed to render components
+ * built with FAST.
+ *
+ * @beta
+ */
 export abstract class FASTElementRenderer extends ElementRenderer {
     /**
      * The element instance represented by the {@link FASTElementRenderer}.
diff --git a/packages/web-components/fast-ssr/src/exports.ts b/packages/web-components/fast-ssr/src/exports.ts
index b26b62370a0..5ca3b65dde9 100644
--- a/packages/web-components/fast-ssr/src/exports.ts
+++ b/packages/web-components/fast-ssr/src/exports.ts
@@ -7,19 +7,14 @@ import {
 } from "@microsoft/fast-element";
 import { FASTElementRenderer } from "./element-renderer/element-renderer.js";
 import { FASTSSRStyleStrategy } from "./element-renderer/style-strategy.js";
-import {
-    FASTStyleStyleRenderer,
-    StyleElementStyleRenderer,
-    StyleRenderer,
-} from "./styles/style-renderer.js";
+import { StyleElementStyleRenderer, StyleRenderer } from "./styles/style-renderer.js";
 import { defaultViewBehaviorFactoryRenderers } from "./template-renderer/directives.js";
 import {
+    ComponentDOMEmissionMode,
     TemplateRenderer,
-    TemplateRendererConfiguration,
 } from "./template-renderer/template-renderer.js";
 import { SSRView } from "./view.js";
 
-export type Configuration = TemplateRendererConfiguration;
 Compiler.setDefaultStrategy(
     (
         html: string | HTMLTemplateElement,
@@ -40,8 +35,6 @@ DOM.setUpdateMode(false);
 
 /**
  * Factory for creating SSR rendering assets.
- * @param config - FAST SSR configuration
- *
  * @example
  * ```ts
  * import "@microsoft/install-dom-shim";
@@ -51,20 +44,18 @@ DOM.setUpdateMode(false);
  *
  * const streamableSSRResult = templateRenderer.render(html`...`, defaultRenderInfo);
  * ```
+ *
+ * @beta
  */
-export default function (
-    config?: Configuration
-): {
+export default function fastSSR(): {
     templateRenderer: TemplateRenderer;
     elementRenderer: typeof FASTElementRenderer;
     defaultRenderInfo: RenderInfo;
 } {
-    const templateRenderer = new TemplateRenderer(config);
+    const templateRenderer = new TemplateRenderer();
     const elementRenderer = class extends FASTElementRenderer {
         protected templateRenderer: TemplateRenderer = templateRenderer;
-        protected styleRenderer: StyleRenderer = config?.useFASTStyle
-            ? new FASTStyleStyleRenderer()
-            : new StyleElementStyleRenderer();
+        protected styleRenderer = new StyleElementStyleRenderer();
     };
 
     templateRenderer.withViewBehaviorFactoryRenderers(
@@ -81,3 +72,10 @@ export default function (
         },
     };
 }
+
+export type {
+    TemplateRenderer,
+    FASTElementRenderer,
+    StyleRenderer,
+    ComponentDOMEmissionMode,
+};
diff --git a/packages/web-components/fast-ssr/src/styles/style-renderer.ts b/packages/web-components/fast-ssr/src/styles/style-renderer.ts
index 26e90004fd7..1e04ac28efa 100644
--- a/packages/web-components/fast-ssr/src/styles/style-renderer.ts
+++ b/packages/web-components/fast-ssr/src/styles/style-renderer.ts
@@ -1,4 +1,4 @@
-import { ComposableStyles, ElementStyles } from "@microsoft/fast-element";
+import { ComposableStyles } from "@microsoft/fast-element";
 import { fastStyleTagName } from "./fast-style.js";
 function collectStyles(style: ComposableStyles): string {
     let content: string = "";
@@ -19,7 +19,15 @@ function collectStyles(style: ComposableStyles): string {
     return content;
 }
 
+/**
+ * A renderer for {@link @microsoft/fast-element#ComposableStyles}
+ * @beta
+ */
 export interface StyleRenderer {
+    /**
+     * Renders composable styles to a string.
+     * @param styles - The styles to render.
+     */
     render(styles: ComposableStyles): string;
 }
 
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
index f9a3f99c2fd..cb2f75c1671 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
@@ -23,10 +23,10 @@ test.describe("TemplateRenderer", () => {
         });
     });
 
-    test.describe("should allow configuration", () => {
+    test.describe.skip("should allow configuration", () => {
         test("that emits to light DOM", () => {
-            const instance = new TemplateRenderer({componentDOMEmissionMode: "light"});
-            expect(instance.componentDOMEmissionMode).toBe("light")
+            const instance = new TemplateRenderer(/* Re-implement w/ light mode emission is finished {componentDOMEmissionMode: "light"} */);
+            expect(instance.componentDOMEmissionMode).toBe("light");
         });
     });
 
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
index 83633ed9e7a..5836c95658d 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
@@ -18,44 +18,32 @@ function getLast<T>(arr: T[]): T | undefined {
     return arr[arr.length - 1];
 }
 
-export type ComponentDOMEmissionMode = "shadow" | "light";
-export interface TemplateRendererConfiguration {
-    /**
-     * Controls whether the template renderer should emit component template code to the component's shadow DOM or to its light DOM.
-     * @default "shadow"
-     */
-    componentDOMEmissionMode?: ComponentDOMEmissionMode;
-
-    /**
-     * Controls whether the template renderer should emit FASTStyle elements for stylesheets.
-     * Using FASTStyle can help reduce the SSR payload by only emitting stylesheet content once,
-     * and leveraging a Custom Element to map those stylesheets back to FAST element's on the client.
-     * @default false
-     */
-    useFASTStyle?: boolean;
-}
-
-export class TemplateRenderer
-    implements Readonly<Required<TemplateRendererConfiguration>> {
+/**
+ * The mode for which a component's internals should be rendered.
+ * @beta
+ */
+export type ComponentDOMEmissionMode = "shadow";
+
+/**
+ * A class designed to render HTML templates. The renderer supports
+ * rendering {@link @microsoft/fast-element#ViewTemplate} instances as well
+ * as arbitrary HTML strings.
+ *
+ * @beta
+ */
+export class TemplateRenderer {
     private viewBehaviorFactoryRenderers: Map<
         any,
         ViewBehaviorFactoryRenderer<any>
     > = new Map();
+
     /**
-     * {@inheritDoc TemplateRendererConfiguration.componentDOMEmissionMode}
+     * Controls how the {@link TemplateRenderer} will emit component DOM internals.
      */
     public readonly componentDOMEmissionMode: ComponentDOMEmissionMode = "shadow";
 
-    /** {@inheritdoc TemplateRendererConfiguration.useFASTStyle} */
-    public readonly useFASTStyle: boolean = false;
-    constructor(config?: TemplateRendererConfiguration) {
-        if (config) {
-            Object.assign(this, config);
-        }
-    }
-
     /**
-     *
+     * Renders a {@link @microsoft/fast-element#ViewTemplate} or HTML string.
      * @param template - The template to render.
      * @param renderInfo - Information about the rendering context.
      * @param source - Any source data to render the template and evaluate bindings with.
@@ -76,10 +64,11 @@ export class TemplateRenderer
 
     /**
      * Render a set of op codes.
+     * @param codes - the op codes to render.
+     * @param renderInfo - renderInfo context.
+     * @param source - source data.
+     *
      * @internal
-     * @param codes
-     * @param renderInfo
-     * @param source
      */
     public *renderOpCodes(
         codes: Op[],
@@ -95,10 +84,15 @@ export class TemplateRenderer
                 case OpType.viewBehaviorFactory: {
                     const factory = code.factory as ViewBehaviorFactory & Aspected;
                     const ctor = factory.constructor;
-                    if (this.viewBehaviorFactoryRenderers.has(ctor)) {
-                        yield* this.viewBehaviorFactoryRenderers
-                            .get(ctor)!
-                            .render(factory, renderInfo, source, this, context);
+                    const renderer = this.viewBehaviorFactoryRenderers.get(ctor);
+                    if (renderer) {
+                        yield* renderer.render(
+                            factory,
+                            renderInfo,
+                            source,
+                            this,
+                            context
+                        );
                     } else if (factory.aspectType && factory.binding) {
                         const result = factory.binding(source, context);
 
@@ -231,6 +225,8 @@ export class TemplateRenderer
     /**
      * Registers DirectiveRenderers to use when rendering templates.
      * @param renderers - The directive renderers to register
+     *
+     * @internal
      */
     public withViewBehaviorFactoryRenderers(
         ...renderers: ViewBehaviorFactoryRenderer<any>[]
@@ -254,8 +250,8 @@ export class TemplateRenderer
 
     /**
      * Format attribute key/value pair into a HTML attribute string.
-     * @param name
-     * @param value
+     * @param name - the attribute name.
+     * @param value - the attribute value.
      */
     private static formatAttribute(name: string, value: string) {
         return value === "" ? name : `${name}="${value}"`;
diff --git a/yarn.lock b/yarn.lock
index 4d5e638ca65..8ebd35ccbd2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3261,6 +3261,24 @@
     source-map "~0.6.1"
     typescript "~4.6.3"
 
+"@microsoft/api-extractor@7.23.1":
+  version "7.23.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.23.1.tgz#483e339cc73669c709ff215a76eb0e6d9a31de5b"
+  integrity sha512-J5cTjbMzSZPRZT4AKvFI1KmLGHVhV6bHnFcPo3Og9cN9QmknzpKg5BxvpBecEdFKNZxUpUrBkps2xOQ4Fjc6zg==
+  dependencies:
+    "@microsoft/api-extractor-model" "7.17.2"
+    "@microsoft/tsdoc" "0.14.1"
+    "@microsoft/tsdoc-config" "~0.16.1"
+    "@rushstack/node-core-library" "3.45.4"
+    "@rushstack/rig-package" "0.3.11"
+    "@rushstack/ts-command-line" "4.10.10"
+    colors "~1.2.1"
+    lodash "~4.17.15"
+    resolve "~1.17.0"
+    semver "~7.3.0"
+    source-map "~0.6.1"
+    typescript "~4.6.3"
+
 "@microsoft/fast-components-class-name-contracts-base@^4.8.0":
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-components-class-name-contracts-base/-/fast-components-class-name-contracts-base-4.8.0.tgz#e59c85fd7ff88865d2c5bd6a8cf287232c1469f7"

From 3ea02cc05caea7cb890511bfc819af88dc58fd14 Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholasrice@users.noreply.github.com>
Date: Thu, 5 May 2022 10:25:27 -0700
Subject: [PATCH 101/135] update after rebase

---
 .../fast-foundation/docs/api-report.md               |  4 ++++
 .../fast-foundation/src/data-grid/README.md          | 12 +++++-------
 .../fast-foundation/src/text-field/README.md         |  1 -
 .../fast-foundation/src/tooltip/README.md            |  1 -
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 8d615c3039a..c63d47838ba 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -2666,6 +2666,8 @@ export class TextArea extends FormAssociatedTextArea {
     name: string;
     placeholder: string;
     readOnly: boolean;
+    // (undocumented)
+    protected readOnlyChanged(): void;
     resize: TextAreaResize;
     rows: number;
     protected select(): void;
@@ -2734,6 +2736,8 @@ export class TextField extends FormAssociatedTextField {
     // (undocumented)
     protected sizeChanged(): void;
     spellcheck: boolean;
+    // (undocumented)
+    protected spellcheckChanged(): void;
     type: TextFieldType;
 }
 
diff --git a/packages/web-components/fast-foundation/src/data-grid/README.md b/packages/web-components/fast-foundation/src/data-grid/README.md
index 43324e809fc..b9ba48cc685 100644
--- a/packages/web-components/fast-foundation/src/data-grid/README.md
+++ b/packages/web-components/fast-foundation/src/data-grid/README.md
@@ -167,8 +167,8 @@ export const myDataGrid = DataGrid.compose({
 | `rowType`                | public  | `DataGridRowTypes`                    |         | The type of row                                                                                                                                                                     |                   |
 | `rowData`                | public  | `object or null`                      | `null`  | The base data for this row                                                                                                                                                          |                   |
 | `columnDefinitions`      | public  | `ColumnDefinition[] or null`          | `null`  | The column definitions of the row                                                                                                                                                   |                   |
-| `cellItemTemplate`       | public  | `ViewTemplate or undefined`           |         | The template used to render cells in generated rows.                                                                                                                                |                   |
-| `headerCellItemTemplate` | public  | `ViewTemplate or undefined`           |         | The template used to render header cells in generated rows.                                                                                                                         |                   |
+| `cellItemTemplate`       | public  | `ItemViewTemplate or undefined`       |         | The template used to render cells in generated rows.                                                                                                                                |                   |
+| `headerCellItemTemplate` | public  | `ItemViewTemplate or undefined`       |         | The template used to render header cells in generated rows.                                                                                                                         |                   |
 | `rowIndex`               | public  | `number`                              |         | The index of the row in the parent grid. This is typically set programmatically by the parent grid.                                                                                 |                   |
 | `$presentation`          | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
 | `template`               | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
@@ -179,7 +179,6 @@ export const myDataGrid = DataGrid.compose({
 | Name                         | Privacy   | Description | Parameters         | Return | Inherited From    |
 | ---------------------------- | --------- | ----------- | ------------------ | ------ | ----------------- |
 | `gridTemplateColumnsChanged` | protected |             |                    | `void` |                   |
-| `rowTypeChanged`             | protected |             |                    | `void` |                   |
 | `rowDataChanged`             | protected |             |                    | `void` |                   |
 | `handleFocusout`             | public    |             | `e: FocusEvent`    | `void` |                   |
 | `handleCellFocus`            | public    |             | `e: Event`         | `void` |                   |
@@ -245,9 +244,9 @@ export const myDataGrid = DataGrid.compose({
 | `gridTemplateColumns`    | public  | `string`                              |         | String that gets applied to the the css gridTemplateColumns attribute of child rows                                                                                                                                                                     |                   |
 | `rowsData`               | public  | `object[]`                            | `[]`    | The data being displayed in the grid                                                                                                                                                                                                                    |                   |
 | `columnDefinitions`      | public  | `ColumnDefinition[] or null`          | `null`  | The column definitions of the grid                                                                                                                                                                                                                      |                   |
-| `rowItemTemplate`        | public  | `ViewTemplate`                        |         | The template to use for the programmatic generation of rows                                                                                                                                                                                             |                   |
-| `cellItemTemplate`       | public  | `ViewTemplate or undefined`           |         | The template used to render cells in generated rows.                                                                                                                                                                                                    |                   |
-| `headerCellItemTemplate` | public  | `ViewTemplate or undefined`           |         | The template used to render header cells in generated rows.                                                                                                                                                                                             |                   |
+| `rowItemTemplate`        | public  | `ItemViewTemplate`                    |         | The template to use for the programmatic generation of rows                                                                                                                                                                                             |                   |
+| `cellItemTemplate`       | public  | `ItemViewTemplate or undefined`       |         | The template used to render cells in generated rows.                                                                                                                                                                                                    |                   |
+| `headerCellItemTemplate` | public  | `ItemViewTemplate or undefined`       |         | The template used to render header cells in generated rows.                                                                                                                                                                                             |                   |
 | `focusRowIndex`          | public  | `number`                              | `0`     | The index of the row that will receive focus the next time the grid is focused. This value changes as focus moves to different rows within the grid.  Changing this value when focus is already within the grid moves focus to the specified row.       |                   |
 | `focusColumnIndex`       | public  | `number`                              | `0`     | The index of the column that will receive focus the next time the grid is focused. This value changes as focus moves to different rows within the grid.  Changing this value when focus is already within the grid moves focus to the specified column. |                   |
 | `rowElementTag`          | public  | `string`                              |         | Set by the component templates.                                                                                                                                                                                                                         |                   |
@@ -260,7 +259,6 @@ export const myDataGrid = DataGrid.compose({
 | Name                         | Privacy   | Description | Parameters | Return | Inherited From    |
 | ---------------------------- | --------- | ----------- | ---------- | ------ | ----------------- |
 | `noTabbingChanged`           | protected |             |            | `void` |                   |
-| `generateHeaderChanged`      | protected |             |            | `void` |                   |
 | `gridTemplateColumnsChanged` | protected |             |            | `void` |                   |
 | `rowsDataChanged`            | protected |             |            | `void` |                   |
 | `columnDefinitionsChanged`   | protected |             |            | `void` |                   |
diff --git a/packages/web-components/fast-foundation/src/text-field/README.md b/packages/web-components/fast-foundation/src/text-field/README.md
index 2d21d474feb..520c6039e6d 100644
--- a/packages/web-components/fast-foundation/src/text-field/README.md
+++ b/packages/web-components/fast-foundation/src/text-field/README.md
@@ -104,7 +104,6 @@ This component is built with the expectation that focus is delegated to the inpu
 | `readOnlyChanged`    | protected |                                        |            | `void` |                   |
 | `autofocusChanged`   | protected |                                        |            | `void` |                   |
 | `placeholderChanged` | protected |                                        |            | `void` |                   |
-| `typeChanged`        | protected |                                        |            | `void` |                   |
 | `listChanged`        | protected |                                        |            | `void` |                   |
 | `maxlengthChanged`   | protected |                                        |            | `void` |                   |
 | `minlengthChanged`   | protected |                                        |            | `void` |                   |
diff --git a/packages/web-components/fast-foundation/src/tooltip/README.md b/packages/web-components/fast-foundation/src/tooltip/README.md
index bfdf2a4be10..59d87279c43 100644
--- a/packages/web-components/fast-foundation/src/tooltip/README.md
+++ b/packages/web-components/fast-foundation/src/tooltip/README.md
@@ -88,7 +88,6 @@ export const myTooltip = Tooltip.compose({
 | ------------------------ | --------- | ----------- | ------------------------------- | ------ | ----------------- |
 | `visibleChanged`         | protected |             |                                 | `void` |                   |
 | `anchorChanged`          | protected |             |                                 | `void` |                   |
-| `positionChanged`        | protected |             |                                 | `void` |                   |
 | `anchorElementChanged`   | protected |             | `oldValue: HTMLElement or null` | `void` |                   |
 | `viewportElementChanged` | protected |             |                                 | `void` |                   |
 | `templateChanged`        | protected |             |                                 | `void` | FoundationElement |

From f6af46ac401ecd9dc52b94bbc605cdd23a7b114d Mon Sep 17 00:00:00 2001
From: nicholasrice <nicholasrice@users.noreply.github.com>
Date: Mon, 9 May 2022 12:13:33 -0700
Subject: [PATCH 102/135] update yarn.lock after rebase

---
 yarn.lock | 426 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 352 insertions(+), 74 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 8ebd35ccbd2..af0cfa060d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -138,7 +138,7 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
+"@babel/code-frame@7.16.7", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
   integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
@@ -331,7 +331,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
   integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+"@babel/helper-plugin-utils@7.16.7", "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
@@ -356,7 +356,7 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/helper-simple-access@^7.17.7":
+"@babel/helper-simple-access@^7.16.7", "@babel/helper-simple-access@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
   integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==
@@ -397,7 +397,7 @@
     "@babel/traverse" "^7.16.8"
     "@babel/types" "^7.16.8"
 
-"@babel/helpers@^7.12.5", "@babel/helpers@^7.17.9":
+"@babel/helpers@^7.12.5", "@babel/helpers@^7.16.7", "@babel/helpers@^7.17.9":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.9.tgz#b2af120821bfbe44f9907b1826e168e819375a1a"
   integrity sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==
@@ -445,7 +445,7 @@
     "@babel/helper-remap-async-to-generator" "^7.16.8"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-class-properties@^7.16.7":
+"@babel/plugin-proposal-class-properties@7.16.7", "@babel/plugin-proposal-class-properties@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
   integrity sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==
@@ -462,7 +462,7 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
-"@babel/plugin-proposal-dynamic-import@^7.16.7":
+"@babel/plugin-proposal-dynamic-import@7.16.7", "@babel/plugin-proposal-dynamic-import@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2"
   integrity sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==
@@ -470,7 +470,7 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
-"@babel/plugin-proposal-export-namespace-from@^7.16.7":
+"@babel/plugin-proposal-export-namespace-from@7.16.7", "@babel/plugin-proposal-export-namespace-from@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz#09de09df18445a5786a305681423ae63507a6163"
   integrity sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==
@@ -486,7 +486,7 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.16.7":
+"@babel/plugin-proposal-logical-assignment-operators@7.16.7", "@babel/plugin-proposal-logical-assignment-operators@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz#be23c0ba74deec1922e639832904be0bea73cdea"
   integrity sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==
@@ -494,7 +494,7 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.16.7":
+"@babel/plugin-proposal-nullish-coalescing-operator@7.16.7", "@babel/plugin-proposal-nullish-coalescing-operator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz#141fc20b6857e59459d430c850a0011e36561d99"
   integrity sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==
@@ -502,7 +502,7 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-proposal-numeric-separator@^7.16.7":
+"@babel/plugin-proposal-numeric-separator@7.16.7", "@babel/plugin-proposal-numeric-separator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz#d6b69f4af63fb38b6ca2558442a7fb191236eba9"
   integrity sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==
@@ -538,7 +538,7 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.16.7":
+"@babel/plugin-proposal-optional-chaining@7.16.7", "@babel/plugin-proposal-optional-chaining@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz#7cd629564724816c0e8a969535551f943c64c39a"
   integrity sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==
@@ -547,7 +547,7 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
-"@babel/plugin-proposal-private-methods@^7.16.11":
+"@babel/plugin-proposal-private-methods@7.16.11", "@babel/plugin-proposal-private-methods@^7.16.11":
   version "7.16.11"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz#e8df108288555ff259f4527dbe84813aac3a1c50"
   integrity sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==
@@ -555,7 +555,7 @@
     "@babel/helper-create-class-features-plugin" "^7.16.10"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-proposal-private-property-in-object@^7.16.7":
+"@babel/plugin-proposal-private-property-in-object@7.16.7", "@babel/plugin-proposal-private-property-in-object@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz#b0b8cef543c2c3d57e59e2c611994861d46a3fce"
   integrity sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==
@@ -573,7 +573,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-syntax-async-generators@^7.8.4":
+"@babel/plugin-syntax-async-generators@7.8.4", "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
   integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
@@ -622,7 +622,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-json-strings@^7.8.3":
+"@babel/plugin-syntax-json-strings@7.8.3", "@babel/plugin-syntax-json-strings@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
   integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
@@ -671,7 +671,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+"@babel/plugin-syntax-optional-catch-binding@7.8.3", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
   integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
@@ -826,6 +826,16 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-commonjs@7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.8.tgz#cdee19aae887b16b9d331009aa9a219af7c86afe"
+  integrity sha512-oflKPvsLT2+uKQopesJt3ApiaIS2HW+hzHFcwRNtyDGieAeC/dIHZX8buJQ2J2X1rxGPy4eRcUijm3qcSPjYcA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-simple-access" "^7.16.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-commonjs@^7.17.9":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz#274be1a2087beec0254d4abd4d86e52442e1e5b6"
@@ -1120,7 +1130,7 @@
     "@babel/plugin-transform-react-jsx-development" "^7.16.7"
     "@babel/plugin-transform-react-pure-annotations" "^7.16.7"
 
-"@babel/preset-typescript@^7.15.0", "@babel/preset-typescript@^7.16.7":
+"@babel/preset-typescript@7.16.7", "@babel/preset-typescript@^7.15.0", "@babel/preset-typescript@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.16.7.tgz#ab114d68bb2020afc069cd51b37ff98a046a70b9"
   integrity sha512-WbVEmgXdIyvzB77AQjGBEyYPZx+8tTsO50XtfozQrkW8QB2rLJpH2lgx0TRw5EJrBxOZQ+wCcyPVQvS8tjEHpQ==
@@ -1153,7 +1163,7 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.3", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9", "@babel/traverse@^7.7.2":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.3", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.10", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9", "@babel/traverse@^7.7.2":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
   integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==
@@ -2161,7 +2171,7 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
-"@jest/types@^27.5.1":
+"@jest/types@^27.2.5", "@jest/types@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.5.1.tgz#3c79ec4a8ba61c170bf937bcf9e98a9df175ec80"
   integrity sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==
@@ -3178,6 +3188,35 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
+"@lit-labs/ssr-client@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@lit-labs/ssr-client/-/ssr-client-1.0.1.tgz#b97e121184aa201bbe6f165f3a7dc919f67129a2"
+  integrity sha512-rr/UVhxbKWNUr+3qRyvZk+glC7v7ph8Gk/W0z96YG64COJKf9ilnWY6JGW77TRqhrRMmS2nsvAXOyQgcF+4jrA==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0"
+    lit "^2.0.0"
+    lit-html "^2.0.0"
+
+"@lit-labs/ssr@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@lit-labs/ssr/-/ssr-2.1.0.tgz#28de42723a9d7224d5e9ab53c420ae102502a033"
+  integrity sha512-Tnz/S99G57QKQkI+5QhpfOyVxdHM/IbSa3DZmbF5aeIugivONjurHOuMn6AHzzgdteae3ihcGV2eehKPJuG4/w==
+  dependencies:
+    "@lit-labs/ssr-client" "^1.0.0"
+    "@lit/reactive-element" "^1.1.0"
+    "@types/node" "^16.0.0"
+    lit "^2.1.0"
+    lit-element "^3.1.0"
+    lit-html "^2.1.0"
+    node-fetch "^2.6.0"
+    parse5 "^6.0.1"
+    resolve "^1.10.1"
+
+"@lit/reactive-element@^1.0.0", "@lit/reactive-element@^1.1.0", "@lit/reactive-element@^1.3.0":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.3.2.tgz#43e470537b6ec2c23510c07812616d5aa27a17cd"
+  integrity sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA==
+
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"
@@ -3261,24 +3300,6 @@
     source-map "~0.6.1"
     typescript "~4.6.3"
 
-"@microsoft/api-extractor@7.23.1":
-  version "7.23.1"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.23.1.tgz#483e339cc73669c709ff215a76eb0e6d9a31de5b"
-  integrity sha512-J5cTjbMzSZPRZT4AKvFI1KmLGHVhV6bHnFcPo3Og9cN9QmknzpKg5BxvpBecEdFKNZxUpUrBkps2xOQ4Fjc6zg==
-  dependencies:
-    "@microsoft/api-extractor-model" "7.17.2"
-    "@microsoft/tsdoc" "0.14.1"
-    "@microsoft/tsdoc-config" "~0.16.1"
-    "@rushstack/node-core-library" "3.45.4"
-    "@rushstack/rig-package" "0.3.11"
-    "@rushstack/ts-command-line" "4.10.10"
-    colors "~1.2.1"
-    lodash "~4.17.15"
-    resolve "~1.17.0"
-    semver "~7.3.0"
-    source-map "~0.6.1"
-    typescript "~4.6.3"
-
 "@microsoft/fast-components-class-name-contracts-base@^4.8.0":
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-components-class-name-contracts-base/-/fast-components-class-name-contracts-base-4.8.0.tgz#e59c85fd7ff88865d2c5bd6a8cf287232c1469f7"
@@ -3699,6 +3720,46 @@
     os-homedir "^1.0.1"
     regexpu-core "^4.5.4"
 
+"@playwright/test@^1.20.1":
+  version "1.21.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.21.1.tgz#2b55676fc45cfa013537a98ff7c3fdd1cb44256b"
+  integrity sha512-XkkTXl5gvEm4fciqeHvY5IuSS/OfQef0MO6RpBNmtm6EuYSdtUvP/sDVuWRKsDqyVdB3WSA0az7iSw79f2//JQ==
+  dependencies:
+    "@babel/code-frame" "7.16.7"
+    "@babel/core" "7.16.12"
+    "@babel/helper-plugin-utils" "7.16.7"
+    "@babel/plugin-proposal-class-properties" "7.16.7"
+    "@babel/plugin-proposal-dynamic-import" "7.16.7"
+    "@babel/plugin-proposal-export-namespace-from" "7.16.7"
+    "@babel/plugin-proposal-logical-assignment-operators" "7.16.7"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "7.16.7"
+    "@babel/plugin-proposal-numeric-separator" "7.16.7"
+    "@babel/plugin-proposal-optional-chaining" "7.16.7"
+    "@babel/plugin-proposal-private-methods" "7.16.11"
+    "@babel/plugin-proposal-private-property-in-object" "7.16.7"
+    "@babel/plugin-syntax-async-generators" "7.8.4"
+    "@babel/plugin-syntax-json-strings" "7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "7.8.3"
+    "@babel/plugin-transform-modules-commonjs" "7.16.8"
+    "@babel/preset-typescript" "7.16.7"
+    colors "1.4.0"
+    commander "8.3.0"
+    debug "4.3.3"
+    expect "27.2.5"
+    jest-matcher-utils "27.2.5"
+    json5 "2.2.1"
+    mime "3.0.0"
+    minimatch "3.0.4"
+    ms "2.1.3"
+    open "8.4.0"
+    pirates "4.0.4"
+    playwright-core "1.21.1"
+    rimraf "3.0.2"
+    source-map-support "0.4.18"
+    stack-utils "2.0.5"
+    yazl "2.5.1"
+
 "@pnpm/constants@4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@pnpm/constants/-/constants-4.1.0.tgz#94d10416d4f78cf9adf77031360caf588ba4b8fb"
@@ -4335,7 +4396,7 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
-"@types/node@*", "@types/node@>= 8", "@types/node@^17.0.5":
+"@types/node@*", "@types/node@>= 8", "@types/node@^17.0.17", "@types/node@^17.0.5":
   version "17.0.31"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.31.tgz#a5bb84ecfa27eec5e1c802c6bbf8139bdb163a5d"
   integrity sha512-AR0x5HbXGqkEx9CadRH3EBYx/VkiUgZIhP4wvPn/+5KIsgpNoyFaRlVe0Zlx9gRtg8fA06a9tskE2MSN7TcG4Q==
@@ -4360,6 +4421,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.9.tgz#bc43c990c3c9be7281868bbc7b8fdd6e2b57adfa"
   integrity sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A==
 
+"@types/node@^16.0.0":
+  version "16.11.33"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.33.tgz#566713b1b626f781c5c58fe3531307283e00720c"
+  integrity sha512-0PJ0vg+JyU0MIan58IOIFRtSvsb7Ri+7Wltx2qAg94eMOrpg4+uuP3aUHCpxXc1i0jCXiC+zIamSZh3l9AbcQA==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -4533,6 +4599,11 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310"
   integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==
 
+"@types/trusted-types@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
+  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
+
 "@types/uglify-js@*":
   version "3.13.2"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.2.tgz#1044c1713fb81cb1ceef29ad8a9ee1ce08d690ef"
@@ -4602,6 +4673,13 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yauzl@^2.9.1":
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.0.tgz#b3248295276cf8c6f153ebe6a9aba0c988cb2599"
+  integrity sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==
+  dependencies:
+    "@types/node" "*"
+
 "@typescript-eslint/eslint-plugin@^5.0.0":
   version "5.22.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.22.0.tgz#7b52a0de2e664044f28b36419210aea4ab619e2a"
@@ -6428,6 +6506,11 @@ buffer-alloc@^1.1.0:
     buffer-alloc-unsafe "^1.1.0"
     buffer-fill "^1.0.0"
 
+buffer-crc32@~0.2.3:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
+
 buffer-equal@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-0.0.1.tgz#91bc74b11ea405bc916bc6aa908faafa5b4aac4b"
@@ -6890,6 +6973,16 @@ cheerio@^1.0.0-rc.10:
     parse5-htmlparser2-tree-adapter "^6.0.1"
     tslib "^2.2.0"
 
+chokidar-cli@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chokidar-cli/-/chokidar-cli-3.0.0.tgz#29283666063b9e167559d30f247ff8fc48794eb7"
+  integrity sha512-xVW+Qeh7z15uZRxHOkP93Ux8A0xbPzwK4GaqD8dQOYc34TlkqUhVSS59fK36DOp5WdJlrRzlYSy02Ht99FjZqQ==
+  dependencies:
+    chokidar "^3.5.2"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+    yargs "^13.3.0"
+
 chokidar@3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.0.tgz#12c0714668c55800f659e262d4962a97faf554a6"
@@ -6954,7 +7047,7 @@ chokidar@^2.0.4, chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.5.3:
+chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.5.2, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -7329,6 +7422,11 @@ commander@7, commander@^7.0.0, commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+commander@8.3.0, commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
 commander@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
@@ -7344,11 +7442,6 @@ commander@^6.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
-commander@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
-  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
-
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -8807,7 +8900,7 @@ debug@3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
+debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -8821,6 +8914,13 @@ debug@4.3.1:
   dependencies:
     ms "2.1.2"
 
+debug@4.3.3:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+  dependencies:
+    ms "2.1.2"
+
 debug@^3.1.0, debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -10218,6 +10318,18 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
+expect@27.2.5:
+  version "27.2.5"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-27.2.5.tgz#16154aaa60b4d9a5b0adacfea3e4d6178f4b93fd"
+  integrity sha512-ZrO0w7bo8BgGoP/bLz+HDCI+0Hfei9jUSZs5yI/Wyn9VkG9w8oJ7rHRgYj+MA7yqqFa0IwHA3flJzZtYugShJA==
+  dependencies:
+    "@jest/types" "^27.2.5"
+    ansi-styles "^5.0.0"
+    jest-get-type "^27.0.6"
+    jest-matcher-utils "^27.2.5"
+    jest-message-util "^27.2.5"
+    jest-regex-util "^27.0.6"
+
 expect@^25.5.0:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/expect/-/expect-25.5.0.tgz#f07f848712a2813bb59167da3fb828ca21f58bba"
@@ -10320,6 +10432,17 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+extract-zip@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
+  integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
+  dependencies:
+    debug "^4.1.1"
+    get-stream "^5.1.0"
+    yauzl "^2.10.0"
+  optionalDependencies:
+    "@types/yauzl" "^2.9.1"
+
 extsprintf@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -10487,6 +10610,13 @@ fbjs@^3.0.0, fbjs@^3.0.1:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.30"
 
+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
+  dependencies:
+    pend "~1.2.0"
+
 feed@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/feed/-/feed-4.2.2.tgz#865783ef6ed12579e2c44bbef3c9113bc4956a7e"
@@ -12086,6 +12216,14 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+https-proxy-agent@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
+  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
 https-proxy-agent@^2.2.1, https-proxy-agent@^2.2.3:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
@@ -13289,7 +13427,7 @@ jest-diff@^25.2.1, jest-diff@^25.5.0:
     jest-get-type "^25.2.6"
     pretty-format "^25.5.0"
 
-jest-diff@^27.5.1:
+jest-diff@^27.2.5, jest-diff@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
   integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
@@ -13389,7 +13527,7 @@ jest-get-type@^25.2.6:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
   integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
 
-jest-get-type@^27.5.1:
+jest-get-type@^27.0.6, jest-get-type@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
   integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
@@ -13517,6 +13655,16 @@ jest-leak-detector@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
+jest-matcher-utils@27.2.5:
+  version "27.2.5"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.2.5.tgz#4684faaa8eb32bf15e6edaead6834031897e2980"
+  integrity sha512-qNR/kh6bz0Dyv3m68Ck2g1fLW5KlSOUNcFQh87VXHZwWc/gY6XwnKofx76Qytz3x5LDWT09/2+yXndTkaG4aWg==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.2.5"
+    jest-get-type "^27.0.6"
+    pretty-format "^27.2.5"
+
 jest-matcher-utils@^25.5.0:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-25.5.0.tgz#fbc98a12d730e5d2453d7f1ed4a4d948e34b7867"
@@ -13527,7 +13675,7 @@ jest-matcher-utils@^25.5.0:
     jest-get-type "^25.2.6"
     pretty-format "^25.5.0"
 
-jest-matcher-utils@^27.0.0, jest-matcher-utils@^27.5.1:
+jest-matcher-utils@^27.0.0, jest-matcher-utils@^27.2.5, jest-matcher-utils@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
   integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==
@@ -13551,7 +13699,7 @@ jest-message-util@^25.5.0:
     slash "^3.0.0"
     stack-utils "^1.0.1"
 
-jest-message-util@^27.5.1:
+jest-message-util@^27.2.5, jest-message-util@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.5.1.tgz#bdda72806da10d9ed6425e12afff38cd1458b6cf"
   integrity sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==
@@ -13596,7 +13744,7 @@ jest-regex-util@^26.0.0:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
   integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
 
-jest-regex-util@^27.5.1:
+jest-regex-util@^27.0.6, jest-regex-util@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
   integrity sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==
@@ -14006,7 +14154,7 @@ joi@^17.6.0:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
-jpeg-js@0.4.2, jpeg-js@^0.1.1, jpeg-js@^0.4.3:
+jpeg-js@0.4.2, jpeg-js@0.4.3, jpeg-js@^0.1.1, jpeg-js@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b"
   integrity sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q==
@@ -14171,7 +14319,7 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-json5@2.x, json5@^2.1.2, json5@^2.2.1:
+json5@2.2.1, json5@2.x, json5@^2.1.2, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
@@ -14618,6 +14766,30 @@ listr2@^3.2.2:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+lit-element@^3.1.0, lit-element@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.0.tgz#9c981c55dfd9a8f124dc863edb62cc529d434db7"
+  integrity sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==
+  dependencies:
+    "@lit/reactive-element" "^1.3.0"
+    lit-html "^2.2.0"
+
+lit-html@^2.0.0, lit-html@^2.1.0, lit-html@^2.2.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.2.3.tgz#dcb2744d0f0c1800b2eb2de37bc42384434a74f7"
+  integrity sha512-vI4j3eWwtQaR8q/O63juZVliBIFMio716X719/lSsGH4UWPy2/7Qf377jsNs4cx3gCHgIbx8yxFgXFQ/igZyXQ==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
+lit@^2.0.0, lit@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.3.tgz#77203d8f247de7c0d4955817f89e40c927349b9c"
+  integrity sha512-5/v+r9dH3Pw/o0rhp/qYk3ERvOUclNF31bWb0FiW6MPgwdQIr+/KCt/p3zcd8aPl8lIGnxdGrVcZA+gWS6oFOQ==
+  dependencies:
+    "@lit/reactive-element" "^1.3.0"
+    lit-element "^3.2.0"
+    lit-html "^2.2.0"
+
 load-bmfont@^1.3.1, load-bmfont@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/load-bmfont/-/load-bmfont-1.4.1.tgz#c0f5f4711a1e2ccff725a7b6078087ccfcddd3e9"
@@ -14887,6 +15059,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -15850,6 +16027,11 @@ mime@1.6.0, mime@^1.3.4:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
+mime@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
+  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
+
 mime@^2.4.4, mime@^2.4.5:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
@@ -16419,7 +16601,7 @@ node-fetch-npm@^2.0.2:
     json-parse-better-errors "^1.0.0"
     safe-buffer "^5.1.1"
 
-node-fetch@2.6.7, node-fetch@^2.5.0, node-fetch@^2.6.7:
+node-fetch@2.6.7, node-fetch@^2.5.0, node-fetch@^2.6.0, node-fetch@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
   integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
@@ -16920,7 +17102,7 @@ onetime@^5.1.0, onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
-open@^8.0.9, open@^8.4.0:
+open@8.4.0, open@^8.0.9, open@^8.4.0:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8"
   integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
@@ -17488,6 +17670,11 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -17540,11 +17727,23 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
+pirates@4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.4.tgz#07df81e61028e402735cdd49db701e4885b4e6e6"
+  integrity sha512-ZIrVPH+A52Dw84R0L3/VS9Op04PuQ2SEoJL6bkshmiTic/HldyW9Tf7oH5mhJZBK7NmDx27vSMrYEXPXclpDKw==
+
 pirates@^4.0.1, pirates@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
   integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
 
+pixelmatch@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-5.2.1.tgz#9e4e4f4aa59648208a31310306a5bed5522b0d65"
+  integrity sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==
+  dependencies:
+    pngjs "^4.0.1"
+
 pixelmatch@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-4.0.2.tgz#8f47dcec5011b477b67db03c243bc1f3085e8854"
@@ -17585,6 +17784,30 @@ platform@^1.3.3:
   resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
   integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
 
+playwright-core@1.21.1:
+  version "1.21.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.21.1.tgz#2757be7921576f047c0a622194dc45f4e1962e17"
+  integrity sha512-SbK5dEsai9ZUKlxcinqegorBq4GnftXd4/GfW+pLsdQIQWrLCM/JNh6YQ2Rf2enVykXCejtoXW8L5vJXBBVSJQ==
+  dependencies:
+    colors "1.4.0"
+    commander "8.3.0"
+    debug "4.3.3"
+    extract-zip "2.0.1"
+    https-proxy-agent "5.0.0"
+    jpeg-js "0.4.3"
+    mime "3.0.0"
+    pixelmatch "5.2.1"
+    pngjs "6.0.0"
+    progress "2.0.3"
+    proper-lockfile "4.1.2"
+    proxy-from-env "1.1.0"
+    rimraf "3.0.2"
+    socks-proxy-agent "6.1.1"
+    stack-utils "2.0.5"
+    ws "8.4.2"
+    yauzl "2.10.0"
+    yazl "2.5.1"
+
 please-upgrade-node@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
@@ -17602,11 +17825,21 @@ png-async@^0.9.4:
   resolved "https://registry.yarnpkg.com/png-async/-/png-async-0.9.4.tgz#0638817508fcf4e732706b2f82c74c947cb83f78"
   integrity sha512-B//AXX9TkneKfgtOpT1mdUnnhk2BImGD+a98vImsMU8uo1dBeHyW/kM2erWZ/CsYteTPU/xKG+t6T62heHkC3A==
 
+pngjs@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-6.0.0.tgz#ca9e5d2aa48db0228a52c419c3308e87720da821"
+  integrity sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==
+
 pngjs@^3.0.0, pngjs@^3.2.0, pngjs@^3.3.3:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
+pngjs@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-4.0.1.tgz#f803869bb2fc1bfe1bf99aa4ec21c108117cfdbe"
+  integrity sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -18302,7 +18535,7 @@ pretty-format@^25.2.1, pretty-format@^25.5.0:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
-pretty-format@^27.0.0, pretty-format@^27.5.1:
+pretty-format@^27.0.0, pretty-format@^27.2.5, pretty-format@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
   integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
@@ -18336,7 +18569,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-progress@^2.0.0:
+progress@2.0.3, progress@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
@@ -18401,6 +18634,15 @@ prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2,
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+proper-lockfile@4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/proper-lockfile/-/proper-lockfile-4.1.2.tgz#c8b9de2af6b2f1601067f98e01ac66baa223141f"
+  integrity sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==
+  dependencies:
+    graceful-fs "^4.2.4"
+    retry "^0.12.0"
+    signal-exit "^3.0.2"
+
 property-information@^5.0.0, property-information@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
@@ -18433,6 +18675,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -19516,7 +19763,7 @@ resolve@1.17.0, resolve@~1.17.0:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.9.0:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.9.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -19611,6 +19858,13 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
+rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -19618,13 +19872,6 @@ rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.0, rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@@ -20425,6 +20672,15 @@ sockjs@^0.3.21:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
+socks-proxy-agent@6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-6.1.1.tgz#e664e8f1aaf4e1fb3df945f09e3d94f911137f87"
+  integrity sha512-t8J0kG3csjA4g6FTbsMOWws+7R7vuRC8aQ/wy3/1OWmsgwA68zs/+cExQ0koSitUDXqhufF/YJr9wtNMZHw5Ew==
+  dependencies:
+    agent-base "^6.0.2"
+    debug "^4.3.1"
+    socks "^2.6.1"
+
 socks-proxy-agent@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-4.0.2.tgz#3c8991f3145b2799e70e11bd5fbc8b1963116386"
@@ -20442,7 +20698,7 @@ socks-proxy-agent@^6.0.0, socks-proxy-agent@^6.1.1:
     debug "^4.3.3"
     socks "^2.6.2"
 
-socks@^2.6.2:
+socks@^2.6.1, socks@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/socks/-/socks-2.6.2.tgz#ec042d7960073d40d94268ff3bb727dc685f111a"
   integrity sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==
@@ -20506,6 +20762,13 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
+source-map-support@0.4.18:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  integrity sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==
+  dependencies:
+    source-map "^0.5.6"
+
 source-map-support@^0.5.17, source-map-support@^0.5.5, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
@@ -20691,6 +20954,13 @@ stable@^0.1.8:
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
+stack-utils@2.0.5, stack-utils@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
+  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
 stack-utils@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.5.tgz#a19b0b01947e0029c8e451d5d61a498f5bb1471b"
@@ -20698,13 +20968,6 @@ stack-utils@^1.0.1:
   dependencies:
     escape-string-regexp "^2.0.0"
 
-stack-utils@^2.0.3:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
-  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
-  dependencies:
-    escape-string-regexp "^2.0.0"
-
 state-toggle@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
@@ -21779,7 +22042,7 @@ tslib@2.0.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
   integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
 
-tslib@^1.11.1, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -23344,7 +23607,7 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^6.0.0, ws@^6.2.1, ws@^7.0.0, ws@^7.3.1, ws@^7.4.6, ws@^8.4.2, ws@~7.4.2:
+ws@8.4.2, ws@^6.0.0, ws@^6.2.1, ws@^7.0.0, ws@^7.3.1, ws@^7.4.6, ws@^8.4.2, ws@~7.4.2:
   version "7.5.7"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67"
   integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==
@@ -23550,6 +23813,21 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yauzl@2.10.0, yauzl@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"
+
+yazl@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/yazl/-/yazl-2.5.1.tgz#a3d65d3dd659a5b0937850e8609f22fffa2b5c35"
+  integrity sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==
+  dependencies:
+    buffer-crc32 "~0.2.3"
+
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"

From e0f8e4c880e5e07749383d3514d323f7700696a2 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Tue, 10 May 2022 09:24:24 -0700
Subject: [PATCH 103/135] feat: officially expose testing helpers (#5958)

* feat: officially expose testing helpers

* Change files

* docs: improve testing helper code docs

* test: trying to fix react wrapper tests

* Change files

* update typescript to 4.7.0-beta

* fix type error in router configuration

* fixing foundation compile error

* all packages passing build

* add export paths to fast-element

* fixing reat-wrapper testing infrastructure

* fixing test in fast-website

* fixing color-explorer test

* fixing figma-plugin tests

* fixing dev server

* fixing fast-website dev

* fixing error generating docs

* add description for utility

* Change files

Co-authored-by: Rob Eisenberg <rob@bluespire.com>
Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 build/get-package-json.js                     |   25 +
 ...-efc14f99-1d56-4d8c-b2e6-043b5956c2cd.json |    7 +
 ...-f2f14417-861b-44a9-82a9-e7de4bbd6f8d.json |    7 +
 ...-aa287070-7fbe-4d0f-ae38-a5896cc6647f.json |    7 +
 ...-55555b76-e6a2-4b30-8b77-7f61b3bcdd36.json |    7 +
 ...-37b603eb-bb2c-48ee-9ed4-d9ee5f901f0e.json |    7 +
 ...-2ba6bca0-ca84-447c-9115-82409fad661f.json |    7 +
 ...-61d860c2-ecab-49a6-9474-10d04397cd24.json |    7 +
 examples/design-system-tutorial/package.json  |    2 +-
 examples/todo-app-tutorial/package.json       |    2 +-
 package.json                                  |    4 +-
 .../fast-figma-plugin-msft/package.json       |   22 +-
 .../fast-figma-plugin-msft/webpack.config.js  |    4 +-
 .../utilities/fast-animation/package.json     |    2 +-
 .../utilities/fast-benchmarks/package.json    |    2 +-
 packages/utilities/fast-colors/package.json   |    2 +-
 .../fast-react-wrapper/.eslintrc.json         |    8 +-
 .../fast-react-wrapper/karma.conf.cjs         |   23 +-
 .../utilities/fast-react-wrapper/package.json |   11 +-
 .../{setup-browser.ts => setup-browser.cts}   |    0
 .../fast-react-wrapper/src/index.spec.tsx     |    4 +-
 .../fast-react-wrapper/tsconfig.json          |    1 +
 .../utilities/fast-web-utilities/package.json |    2 +-
 .../fast-element/docs/api-report.md           |   22 +-
 .../web-components/fast-element/package.json  |   11 +-
 .../fast-foundation/docs/api-report.md        |   12 +-
 .../fast-foundation/package.json              |   12 +-
 .../src/accordion-item/accordion-item.spec.ts |    2 +-
 .../src/accordion/accordion.spec.ts           |    2 +-
 .../fast-foundation/src/anchor/anchor.spec.ts |    2 +-
 .../anchored-region/anchored-region.spec.ts   |    6 +-
 .../fast-foundation/src/badge/badge.spec.ts   |    2 +-
 .../breadcrumb-item/breadcrumb-item.spec.ts   |    2 +-
 .../src/breadcrumb/breadcrumb.spec.ts         |    2 +-
 .../fast-foundation/src/button/button.spec.ts |    4 +-
 .../src/calendar/calendar.spec.ts             |    2 +-
 .../src/checkbox/checkbox.spec.ts             |    2 +-
 .../src/combobox/combobox.spec.ts             |    2 +-
 .../src/data-grid/data-grid-cell.spec.ts      |    2 +-
 .../src/data-grid/data-grid-row.spec.ts       |    2 +-
 .../src/data-grid/data-grid.spec.ts           |    2 +-
 .../src/design-system/design-system.spec.ts   |    2 +-
 .../src/design-token/design-token.spec.ts     |    2 +-
 .../fast-foundation/src/di/di.ts              |    2 +-
 .../fast-foundation/src/dialog/dialog.spec.ts |    2 +-
 .../src/directives/reflect-attributes.spec.ts |    2 +-
 .../src/disclosure/disclosure.spec.ts         |    2 +-
 .../src/divider/divider.spec.ts               |    2 +-
 .../src/flipper/flipper.spec.ts               |    4 +-
 .../form-associated/form-associated.spec.ts   |    2 +-
 .../foundation-element.spec.ts                |    4 +-
 .../horizontal-scroll.spec.ts                 |    2 +-
 .../src/listbox-option/listbox-option.spec.ts |    2 +-
 .../src/listbox/listbox.spec.ts               |    2 +-
 .../src/menu-item/menu-item.spec.ts           |    2 +-
 .../fast-foundation/src/menu/menu.spec.ts     |    2 +-
 .../src/number-field/number-field.spec.ts     |    2 +-
 .../fast-foundation/src/picker/picker.spec.ts |    2 +-
 .../src/progress-ring/progress-ring.spec.ts   |    2 +-
 .../src/progress/progress.spec.ts             |    2 +-
 .../src/radio-group/radio-group.spec.ts       |   10 +-
 .../fast-foundation/src/radio/radio.spec.ts   |    2 +-
 .../fast-foundation/src/search/search.spec.ts |    2 +-
 .../fast-foundation/src/select/select.spec.ts |    4 +-
 .../src/slider-label/slider-label.spec.ts     |    2 +-
 .../fast-foundation/src/slider/slider.spec.ts |    2 +-
 .../fast-foundation/src/switch/switch.spec.ts |    2 +-
 .../src/tab-panel/tab-panel.spec.ts           |    2 +-
 .../fast-foundation/src/tab/tab.spec.ts       |    2 +-
 .../fast-foundation/src/tabs/tabs.spec.ts     |    2 +-
 .../fast-foundation/src/testing/exports.ts    |    2 +
 .../fixture.spec.ts                           |    0
 .../{test-utilities => testing}/fixture.ts    |    7 +
 .../{test-utilities => testing}/timeout.ts    |    5 +-
 .../src/text-area/text-area.spec.ts           |    2 +-
 .../src/text-field/text-field.spec.ts         |    2 +-
 .../src/toolbar/toolbar.spec.ts               |    2 +-
 .../src/tooltip/tooltip.spec.ts               |    2 +-
 .../src/tree-item/tree-item.spec.ts           |    2 +-
 .../src/tree-view/tree-view.spec.ts           |    2 +-
 .../fast-router/docs/api-report.md            |   19 +-
 .../web-components/fast-router/package.json   |    2 +-
 .../fast-router/src/configuration.ts          |    2 +-
 packages/web-components/fast-ssr/package.json |    2 +-
 sites/fast-color-explorer/package.json        |   23 +-
 sites/fast-color-explorer/webpack.config.js   |   10 +-
 sites/fast-website/package.json               |   23 +-
 sites/fast-website/webpack.common.js          |    3 -
 sites/fast-website/webpack.dev.js             |    8 +-
 sites/fast-website/webpack.prod.js            |    2 +-
 sites/site-utilities/build/badges.js          |    7 +-
 sites/site-utilities/package.json             |    2 +-
 sites/website/src/generate-docs.js            |   27 +-
 yarn.lock                                     | 1462 +++++------------
 94 files changed, 691 insertions(+), 1253 deletions(-)
 create mode 100644 build/get-package-json.js
 create mode 100644 change/@microsoft-fast-animation-efc14f99-1d56-4d8c-b2e6-043b5956c2cd.json
 create mode 100644 change/@microsoft-fast-colors-f2f14417-861b-44a9-82a9-e7de4bbd6f8d.json
 create mode 100644 change/@microsoft-fast-element-aa287070-7fbe-4d0f-ae38-a5896cc6647f.json
 create mode 100644 change/@microsoft-fast-foundation-55555b76-e6a2-4b30-8b77-7f61b3bcdd36.json
 create mode 100644 change/@microsoft-fast-react-wrapper-37b603eb-bb2c-48ee-9ed4-d9ee5f901f0e.json
 create mode 100644 change/@microsoft-fast-router-2ba6bca0-ca84-447c-9115-82409fad661f.json
 create mode 100644 change/@microsoft-fast-web-utilities-61d860c2-ecab-49a6-9474-10d04397cd24.json
 rename packages/utilities/fast-react-wrapper/src/__test__/{setup-browser.ts => setup-browser.cts} (100%)
 create mode 100644 packages/web-components/fast-foundation/src/testing/exports.ts
 rename packages/web-components/fast-foundation/src/{test-utilities => testing}/fixture.spec.ts (100%)
 rename packages/web-components/fast-foundation/src/{test-utilities => testing}/fixture.ts (98%)
 rename packages/web-components/fast-foundation/src/{test-utilities => testing}/timeout.ts (55%)

diff --git a/build/get-package-json.js b/build/get-package-json.js
new file mode 100644
index 00000000000..ba6f3f47bd2
--- /dev/null
+++ b/build/get-package-json.js
@@ -0,0 +1,25 @@
+const path = require("path");
+const fs = require("fs");
+
+/**
+ * Resolves the directory of the package.json for a given dependency.
+ * @param {string} name - the package name
+ * @returns
+ *
+ * @description
+ * NodeJS exports fields prevent arbitrarily resolving files in a package
+ * that are not explicitly enumerated in the exports field of the package.
+ * This function provides a mechanism to resolve the package 'root' by package name,
+ * allowing file-system retrieval by relative path for arbitrary files outside of
+ * Node's module system.
+ */
+exports.getPackageJsonDir = name => {
+    const entry = require.resolve(name).toString();
+    let dir = path.parse(entry).dir;
+
+    while (!fs.existsSync(path.resolve(dir, "package.json"))) {
+        dir = path.parse(dir).dir;
+    }
+
+    return dir;
+};
diff --git a/change/@microsoft-fast-animation-efc14f99-1d56-4d8c-b2e6-043b5956c2cd.json b/change/@microsoft-fast-animation-efc14f99-1d56-4d8c-b2e6-043b5956c2cd.json
new file mode 100644
index 00000000000..47d502fab99
--- /dev/null
+++ b/change/@microsoft-fast-animation-efc14f99-1d56-4d8c-b2e6-043b5956c2cd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade TypeScript",
+  "packageName": "@microsoft/fast-animation",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-colors-f2f14417-861b-44a9-82a9-e7de4bbd6f8d.json b/change/@microsoft-fast-colors-f2f14417-861b-44a9-82a9-e7de4bbd6f8d.json
new file mode 100644
index 00000000000..10dadd6df61
--- /dev/null
+++ b/change/@microsoft-fast-colors-f2f14417-861b-44a9-82a9-e7de4bbd6f8d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade TypeScript",
+  "packageName": "@microsoft/fast-colors",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-element-aa287070-7fbe-4d0f-ae38-a5896cc6647f.json b/change/@microsoft-fast-element-aa287070-7fbe-4d0f-ae38-a5896cc6647f.json
new file mode 100644
index 00000000000..b9169d9b1b2
--- /dev/null
+++ b/change/@microsoft-fast-element-aa287070-7fbe-4d0f-ae38-a5896cc6647f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade TypeScript",
+  "packageName": "@microsoft/fast-element",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-55555b76-e6a2-4b30-8b77-7f61b3bcdd36.json b/change/@microsoft-fast-foundation-55555b76-e6a2-4b30-8b77-7f61b3bcdd36.json
new file mode 100644
index 00000000000..a279b8cb89a
--- /dev/null
+++ b/change/@microsoft-fast-foundation-55555b76-e6a2-4b30-8b77-7f61b3bcdd36.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: officially expose testing helpers",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-react-wrapper-37b603eb-bb2c-48ee-9ed4-d9ee5f901f0e.json b/change/@microsoft-fast-react-wrapper-37b603eb-bb2c-48ee-9ed4-d9ee5f901f0e.json
new file mode 100644
index 00000000000..1bd7e26058e
--- /dev/null
+++ b/change/@microsoft-fast-react-wrapper-37b603eb-bb2c-48ee-9ed4-d9ee5f901f0e.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "test: updating to latest foundation helpers",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-router-2ba6bca0-ca84-447c-9115-82409fad661f.json b/change/@microsoft-fast-router-2ba6bca0-ca84-447c-9115-82409fad661f.json
new file mode 100644
index 00000000000..4330fb55f76
--- /dev/null
+++ b/change/@microsoft-fast-router-2ba6bca0-ca84-447c-9115-82409fad661f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade TypeScript",
+  "packageName": "@microsoft/fast-router",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-web-utilities-61d860c2-ecab-49a6-9474-10d04397cd24.json b/change/@microsoft-fast-web-utilities-61d860c2-ecab-49a6-9474-10d04397cd24.json
new file mode 100644
index 00000000000..47e9809469e
--- /dev/null
+++ b/change/@microsoft-fast-web-utilities-61d860c2-ecab-49a6-9474-10d04397cd24.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade TypeScript",
+  "packageName": "@microsoft/fast-web-utilities",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/examples/design-system-tutorial/package.json b/examples/design-system-tutorial/package.json
index f73db2be8a2..2531065cd6d 100644
--- a/examples/design-system-tutorial/package.json
+++ b/examples/design-system-tutorial/package.json
@@ -20,7 +20,7 @@
   "devDependencies": {
     "rimraf": "^3.0.2",
     "ts-loader": "^7.0.1",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^4.44.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
diff --git a/examples/todo-app-tutorial/package.json b/examples/todo-app-tutorial/package.json
index a3a1bb911de..cb90a17e361 100644
--- a/examples/todo-app-tutorial/package.json
+++ b/examples/todo-app-tutorial/package.json
@@ -21,7 +21,7 @@
     "http-server": "^14.1.0",
     "rimraf": "^3.0.2",
     "ts-loader": "^7.0.1",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^4.44.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
diff --git a/package.json b/package.json
index d73c55edd5c..eeeda0ccb22 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
     "node-gyp": "^9.0.0",
     "trim-newlines": "^4.0.2",
     "trim": "^0.0.3",
-    "typescript": "^4.6.2",
+    "typescript": "^4.7.0-beta",
     "ua-parser-js": "^0.7.28",
     "ws": "^7.4.6",
     "xmlhttprequest-ssl": "^1.6.2"
@@ -163,7 +163,7 @@
     "rimraf": "^3.0.2",
     "ts-jest": "^25.4.0",
     "ts-node": "^8.8.2",
-    "typescript": "^4.6.2",
+    "typescript": "^4.7.0-beta",
     "yargs": "^16.2.0"
   },
   "dependencies": {
diff --git a/packages/tooling/fast-figma-plugin-msft/package.json b/packages/tooling/fast-figma-plugin-msft/package.json
index 09213f45276..807d8b5cb99 100644
--- a/packages/tooling/fast-figma-plugin-msft/package.json
+++ b/packages/tooling/fast-figma-plugin-msft/package.json
@@ -32,22 +32,22 @@
     "@types/node": "^15.0.1",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.1",
+    "babel-loader": "^8.2.5",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.7.1",
     "eslint-config-prettier": "^6.10.1",
-    "html-webpack-inline-source-plugin": "^0.0.10",
+    "html-webpack-inline-source-plugin": "^1.0.0-beta.2",
     "prettier": "2.0.2",
     "raw-loader": "^4.0.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "style-loader": "^1.1.2",
-    "ts-loader": "^6.2.1",
-    "typescript": "^4.6.2",
-    "webpack": "^4.44.0",
-    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.10"
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.3.0",
+    "typescript": "4.7.0-beta",
+    "webpack": "^5.72.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.2"
   },
   "dependencies": {
     "@fluentui/web-components": "^2.2.1",
diff --git a/packages/tooling/fast-figma-plugin-msft/webpack.config.js b/packages/tooling/fast-figma-plugin-msft/webpack.config.js
index d19fc7a5977..0b7f6dfd4ac 100644
--- a/packages/tooling/fast-figma-plugin-msft/webpack.config.js
+++ b/packages/tooling/fast-figma-plugin-msft/webpack.config.js
@@ -12,7 +12,7 @@ module.exports = (env, args) => {
     const isProduction = args.mode === "production";
 
     return {
-        devtool: isProduction ? "none" : "inline-source-map",
+        devtool: isProduction ? undefined : "inline-source-map",
         entry: {
             main: path.resolve(appDir, "main.ts"),
             ui: path.resolve(appDir, "ui.tsx"),
@@ -60,7 +60,7 @@ module.exports = (env, args) => {
                 inlineSource: "(js)$",
                 template: path.resolve(appDir, "index.html"),
             }),
-            new HtmlWebpackInlineSourcePlugin(),
+            new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
             new BundleAnalyzerPlugin({
                 // Remove this to inspect bundle sizes.
                 analyzerMode: "disabled",
diff --git a/packages/utilities/fast-animation/package.json b/packages/utilities/fast-animation/package.json
index 642441dce9d..77ddd617669 100644
--- a/packages/utilities/fast-animation/package.json
+++ b/packages/utilities/fast-animation/package.json
@@ -97,7 +97,7 @@
     "style-loader": "^0.13.2",
     "ts-jest": "^27.0.0",
     "ts-loader": "^8.0.0",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^4.44.0",
     "webpack-bundle-analyzer": "^3.5.2",
     "webpack-cli": "^3.2.1",
diff --git a/packages/utilities/fast-benchmarks/package.json b/packages/utilities/fast-benchmarks/package.json
index d0d632ffba7..d4b88544d13 100644
--- a/packages/utilities/fast-benchmarks/package.json
+++ b/packages/utilities/fast-benchmarks/package.json
@@ -29,7 +29,7 @@
     "html-webpack-plugin": "^5.3.1",
     "prettier": "2.0.2",
     "ts-loader": "^8.1.0",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^5.30.0",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^4.0.0-beta.1"
diff --git a/packages/utilities/fast-colors/package.json b/packages/utilities/fast-colors/package.json
index 330cb0cb47c..76df4b17a96 100644
--- a/packages/utilities/fast-colors/package.json
+++ b/packages/utilities/fast-colors/package.json
@@ -42,6 +42,6 @@
     "@microsoft/eslint-config-fast-dna": "^2.1.0",
     "eslint-config-prettier": "^6.10.1",
     "prettier": "2.0.2",
-    "typescript": "^4.6.2"
+    "typescript": "4.7.0-beta"
   }
 }
diff --git a/packages/utilities/fast-react-wrapper/.eslintrc.json b/packages/utilities/fast-react-wrapper/.eslintrc.json
index 42fbdf1f16c..9a8f33d2046 100644
--- a/packages/utilities/fast-react-wrapper/.eslintrc.json
+++ b/packages/utilities/fast-react-wrapper/.eslintrc.json
@@ -1,9 +1,3 @@
 {
-    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
-    "rules": {
-        "import/extensions": [
-            "error",
-            "always"
-        ]
-    }
+    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"]
 }
diff --git a/packages/utilities/fast-react-wrapper/karma.conf.cjs b/packages/utilities/fast-react-wrapper/karma.conf.cjs
index 05ea8bcaa25..4e96dbab80e 100644
--- a/packages/utilities/fast-react-wrapper/karma.conf.cjs
+++ b/packages/utilities/fast-react-wrapper/karma.conf.cjs
@@ -1,5 +1,4 @@
 const path = require("path");
-
 const basePath = path.resolve(__dirname);
 
 const commonChromeFlags = [
@@ -44,9 +43,9 @@ module.exports = function (config) {
             require("karma-chrome-launcher"),
             require("karma-firefox-launcher"),
         ],
-        files: [`dist/esm/__test__/${setup}.js`],
+        files: [`dist/esm/__test__/${setup}.cjs`],
         preprocessors: {
-            [`dist/esm/__test__/${setup}.js`]: ["webpack", "sourcemap"],
+            [`dist/esm/__test__/${setup}.cjs`]: ["webpack", "sourcemap"],
         },
         webpackMiddleware: {
             // webpack-dev-middleware configuration
@@ -54,7 +53,7 @@ module.exports = function (config) {
             stats: "errors-only",
         },
         webpack: {
-            mode: "none",
+            mode: "development",
             resolve: {
                 extensions: [".js"],
                 modules: ["dist", "node_modules"],
@@ -65,12 +64,8 @@ module.exports = function (config) {
                 hints: false,
             },
             optimization: {
-                namedModules: false,
-                namedChunks: false,
-                nodeEnv: false,
                 usedExports: true,
                 flagIncludedChunks: false,
-                occurrenceOrder: false,
                 sideEffects: true,
                 concatenateModules: true,
                 splitChunks: {
@@ -89,14 +84,8 @@ module.exports = function (config) {
                     },
                     {
                         test: /\.js$/,
-                        use: [
-                            {
-                                loader: "source-map-loader",
-                                options: {
-                                    enforce: "pre",
-                                },
-                            },
-                        ],
+                        use: ["source-map-loader"],
+                        enforce: "pre",
                     },
                 ],
             },
@@ -125,7 +114,7 @@ module.exports = function (config) {
                 timeout: 5000,
             },
         },
-        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
+        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests,
     };
 
     if (config.coverage) {
diff --git a/packages/utilities/fast-react-wrapper/package.json b/packages/utilities/fast-react-wrapper/package.json
index 67e8c648156..bf0fa9583bd 100644
--- a/packages/utilities/fast-react-wrapper/package.json
+++ b/packages/utilities/fast-react-wrapper/package.json
@@ -65,7 +65,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-source-map-support": "^1.4.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "react": "^16.9.0",
@@ -78,12 +78,13 @@
     "rollup-plugin-transform-tagged-template": "^0.0.3",
     "rollup-plugin-typescript2": "^0.27.0",
     "source-map": "^0.7.3",
-    "source-map-loader": "^0.2.4",
-    "ts-loader": "^7.0.2",
+    "source-map-loader": "^3.0.1",
+    "ts-loader": "^9.3.0",
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^4.6.2",
-    "webpack": "^4.44.0"
+    "typescript": "4.7.0-beta",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2"
   },
   "dependencies": {
     "@microsoft/fast-element": "^1.10.2",
diff --git a/packages/utilities/fast-react-wrapper/src/__test__/setup-browser.ts b/packages/utilities/fast-react-wrapper/src/__test__/setup-browser.cts
similarity index 100%
rename from packages/utilities/fast-react-wrapper/src/__test__/setup-browser.ts
rename to packages/utilities/fast-react-wrapper/src/__test__/setup-browser.cts
diff --git a/packages/utilities/fast-react-wrapper/src/index.spec.tsx b/packages/utilities/fast-react-wrapper/src/index.spec.tsx
index c95b5124227..ba6939580a3 100644
--- a/packages/utilities/fast-react-wrapper/src/index.spec.tsx
+++ b/packages/utilities/fast-react-wrapper/src/index.spec.tsx
@@ -1,10 +1,10 @@
 import { attr, customElement, DOM, FASTElement, html, nullableNumberConverter, observable } from '@microsoft/fast-element';
 import React from "react";
 import ReactDOM from "react-dom";
-import { uniqueElementName } from '@microsoft/fast-foundation/dist/esm/test-utilities/fixture';
+import { uniqueElementName } from '@microsoft/fast-foundation/testing';
 import { expect } from "chai";
 import { DesignSystem, FoundationElement } from "@microsoft/fast-foundation";
-import { provideReactWrapper } from './index';
+import { provideReactWrapper } from './index.js';
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 type CustomElementProperties = {
diff --git a/packages/utilities/fast-react-wrapper/tsconfig.json b/packages/utilities/fast-react-wrapper/tsconfig.json
index 12bbf803a5c..611a4e612be 100644
--- a/packages/utilities/fast-react-wrapper/tsconfig.json
+++ b/packages/utilities/fast-react-wrapper/tsconfig.json
@@ -6,6 +6,7 @@
         "experimentalDecorators": true,
         "target": "es2015",
         "module": "ESNext",
+        "moduleResolution": "Node16",
         "importHelpers": true,
         "jsx": "react",
         "types": [
diff --git a/packages/utilities/fast-web-utilities/package.json b/packages/utilities/fast-web-utilities/package.json
index 4e57476a27a..4f4ea304bf0 100644
--- a/packages/utilities/fast-web-utilities/package.json
+++ b/packages/utilities/fast-web-utilities/package.json
@@ -66,7 +66,7 @@
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "ts-loader": "^4.0.1",
-    "typescript": "^4.6.2"
+    "typescript": "4.7.0-beta"
   },
   "dependencies": {
     "exenv-es6": "^1.1.1"
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index bd7eb0c6006..3825ee9cbad 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -32,13 +32,13 @@ export class AdoptedStyleSheetsStrategy implements StyleStrategy {
 
 // @public
 export const Aspect: Readonly<{
-    none: number;
-    attribute: number;
-    booleanAttribute: number;
-    property: number;
-    content: number;
-    tokenList: number;
-    event: number;
+    none: 0;
+    attribute: 1;
+    booleanAttribute: 2;
+    property: 3;
+    content: 4;
+    tokenList: 5;
+    event: 6;
     assign(directive: Aspected, value: string): void;
 }>;
 
@@ -283,7 +283,7 @@ export const DOM: Readonly<{
 }>;
 
 // @public
-export const elements: (selector?: string | undefined) => ElementsFilter;
+export const elements: (selector?: string) => ElementsFilter;
 
 // @public
 export type ElementsFilter = (value: Node, index: number, array: Node[]) => boolean;
@@ -359,7 +359,7 @@ export const FASTElement: (new () => HTMLElement & FASTElement) & {
         new (): HTMLElement;
         prototype: HTMLElement;
     }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
-    define<TType extends Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition | undefined): TType;
+    define<TType extends Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition): TType;
 };
 
 // @public
@@ -405,7 +405,7 @@ export interface HTMLDirective {
 export const HTMLDirective: Readonly<{
     getForInstance: (object: any) => HTMLDirectiveDefinition<Constructable<HTMLDirective>> | undefined;
     getByType: (key: Function) => HTMLDirectiveDefinition<Constructable<HTMLDirective>> | undefined;
-    define<TType extends Constructable<HTMLDirective>>(type: TType, options?: PartialHTMLDirectiveDefinition | undefined): TType;
+    define<TType extends Constructable<HTMLDirective>>(type: TType, options?: PartialHTMLDirectiveDefinition): TType;
 }>;
 
 // @public
@@ -512,7 +512,7 @@ export const Observable: Readonly<{
     notify(source: unknown, args: any): void;
     defineProperty(target: {}, nameOrAccessor: string | Accessor): void;
     getAccessors: (target: {}) => Accessor[];
-    binding<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn, ExecutionContext<any>>, initialSubscriber?: Subscriber | undefined, isVolatileBinding?: boolean): BindingObserver<TSource, TReturn, any>;
+    binding<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn, ExecutionContext<any>>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): BindingObserver<TSource, TReturn, any>;
     isVolatileBinding<TSource_1 = any, TReturn_1 = any>(binding: Binding<TSource_1, TReturn_1, ExecutionContext<any>>): boolean;
 }>;
 
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index 0f4d14b9ea7..fdacaee0bfd 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -14,9 +14,16 @@
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
   },
-  "main": "dist/esm/index.js",
   "type": "module",
+  "main": "dist/esm/index.js",
   "types": "dist/fast-element.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/fast-element.d.ts",
+      "default": "./dist/esm/index.js"
+
+    }
+  },
   "unpkg": "dist/fast-element.min.js",
   "sideEffects": [
     "./dist/esm/debug.js",
@@ -87,7 +94,7 @@
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^4.44.0"
   }
 }
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index c63d47838ba..5ff48e7f879 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -70,7 +70,7 @@ export const accordionItemTemplate: FoundationElementTemplate<ViewTemplate<Accor
 export const accordionTemplate: FoundationElementTemplate<ViewTemplate<Accordion>>;
 
 // @public
-export const all: (key: any, searchAncestors?: boolean | undefined) => ReturnType<typeof DI.inject>;
+export const all: (key: any, searchAncestors?: boolean) => ReturnType<typeof DI.inject>;
 
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Anchor" because one of its declarations is marked as @internal
@@ -997,7 +997,7 @@ export interface DesignSystem {
 export const DesignSystem: Readonly<{
     tagFor(type: Constructable): string;
     responsibleFor(element: HTMLElement): DesignSystem;
-    getOrCreate(node?: Node | undefined): DesignSystem;
+    getOrCreate(node?: Node): DesignSystem;
 }>;
 
 // @public
@@ -1052,17 +1052,17 @@ export type DesignTokenValue<T> = StaticDesignTokenValue<T> | DerivedDesignToken
 
 // @public
 export const DI: Readonly<{
-    createContainer(config?: Partial<ContainerConfiguration> | undefined): Container;
+    createContainer(config?: Partial<ContainerConfiguration>): Container;
     findResponsibleContainer(node: Node): Container;
     findParentContainer(node: Node): Container;
-    getOrCreateDOMContainer(node?: Node | undefined, config?: Partial<Omit<ContainerConfiguration, "parentLocator">> | undefined): Container;
+    getOrCreateDOMContainer(node?: Node, config?: Partial<Omit<ContainerConfiguration, "parentLocator">>): Container;
     getDesignParamtypes: (Type: Constructable | Injectable) => readonly Key[] | undefined;
     getAnnotationParamtypes: (Type: Constructable | Injectable) => readonly Key[] | undefined;
     getOrCreateAnnotationParamTypes(Type: Constructable | Injectable): Key[];
     getDependencies(Type: Constructable | Injectable): Key[];
     defineProperty(target: {}, propertyName: string, key: Key, respectConnection?: boolean): void;
     createInterface<K extends Key>(nameConfigOrCallback?: string | InterfaceConfiguration | ((builder: ResolverBuilder<K>) => Resolver<K>) | undefined, configuror?: ((builder: ResolverBuilder<K>) => Resolver<K>) | undefined): InterfaceSymbol<K>;
-    inject(...dependencies: Key[]): (target: any, key?: string | number | undefined, descriptor?: number | PropertyDescriptor | undefined) => void;
+    inject(...dependencies: Key[]): (target: any, key?: string | number, descriptor?: PropertyDescriptor | number) => void;
     transient<T extends Constructable<{}>>(target: T & Partial<RegisterSelf<T>>): T & RegisterSelf<T>;
     singleton<T_1 extends Constructable<{}>>(target: T_1 & Partial<RegisterSelf<T_1>>, options?: SingletonOptions): T_1 & RegisterSelf<T_1>;
 }>;
@@ -1427,7 +1427,7 @@ export type HorizontalScrollView = "default" | "mobile";
 export function ignore(target: Injectable, property?: string | number, descriptor?: PropertyDescriptor | number): void;
 
 // @public
-export const inject: (...dependencies: Key[]) => (target: any, key?: string | number | undefined, descriptor?: number | PropertyDescriptor | undefined) => void;
+export const inject: (...dependencies: Key[]) => (target: any, key?: string | number, descriptor?: PropertyDescriptor | number) => void;
 
 // @public
 export type Injectable<T = {}> = Constructable<T> & {
diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
index e74794f99ec..fe120f6de2f 100644
--- a/packages/web-components/fast-foundation/package.json
+++ b/packages/web-components/fast-foundation/package.json
@@ -19,6 +19,16 @@
   "types": "dist/fast-foundation.d.ts",
   "unpkg": "dist/fast-foundation.min.js",
   "type": "module",
+  "exports": {
+    "." : {
+      "types": "./dist/fast-foundation.d.ts",
+      "default": "./dist/esm/index.js"
+    },
+    "./testing": {
+      "types": "./dist/dts/testing/exports.d.ts",
+      "default": "./dist/esm/testing/exports.js"
+    }
+  },
   "scripts": {
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",
@@ -91,7 +101,7 @@
     "ts-loader": "^7.0.2",
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^4.44.0"
   },
   "dependencies": {
diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.spec.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.spec.ts
index 5881f8a3341..815fc1f3b94 100644
--- a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.spec.ts
+++ b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { AccordionItem, accordionItemTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 
 
 const FASTAccordionItem = AccordionItem.compose({
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts b/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts
index 83d18c63cd1..ecaeb397bc0 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { Accordion, accordionTemplate as template } from "./index";
 import { AccordionItem, accordionItemTemplate as itemTemplate } from "../accordion-item";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM } from "@microsoft/fast-element";
 import { AccordionExpandMode } from "./accordion";
 
diff --git a/packages/web-components/fast-foundation/src/anchor/anchor.spec.ts b/packages/web-components/fast-foundation/src/anchor/anchor.spec.ts
index ef293e252ec..3da3ddd6828 100644
--- a/packages/web-components/fast-foundation/src/anchor/anchor.spec.ts
+++ b/packages/web-components/fast-foundation/src/anchor/anchor.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { Anchor, anchorTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 
 const FASTAnchor = Anchor.compose({
     baseName: "anchor",
diff --git a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts
index bc60f7cf7a1..d9dd4a729f9 100644
--- a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts
+++ b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { AnchoredRegion, anchoredRegionTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM } from "@microsoft/fast-element";
 
 const FASTAnchoredRegion = AnchoredRegion.compose({
@@ -61,10 +61,10 @@ describe("Anchored Region", () => {
 
         await connect();
         await DOM.nextUpdate();
-        
+
         expect(element.clientHeight).to.equal(content.clientHeight);
         expect(element.clientWidth).to.equal(content.clientWidth);
 
         await disconnect();
     });
-});
\ No newline at end of file
+});
diff --git a/packages/web-components/fast-foundation/src/badge/badge.spec.ts b/packages/web-components/fast-foundation/src/badge/badge.spec.ts
index a00350b9986..0ea374c05e8 100644
--- a/packages/web-components/fast-foundation/src/badge/badge.spec.ts
+++ b/packages/web-components/fast-foundation/src/badge/badge.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { Badge, badgeTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 
 const FASTBadge = Badge.compose({
     baseName: "badge",
diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.spec.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.spec.ts
index b06726aacf9..9fff06457cd 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.spec.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { BreadcrumbItem, breadcrumbItemTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 
 const FASTBreadcrumbItem = BreadcrumbItem.compose({
     baseName: "breadcrumb-item",
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts
index def14796b4e..89275ee4b8b 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { Breadcrumb, breadcrumbTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { BreadcrumbItem, breadcrumbItemTemplate } from "../breadcrumb-item";
 import { DOM } from "@microsoft/fast-element";
 
diff --git a/packages/web-components/fast-foundation/src/button/button.spec.ts b/packages/web-components/fast-foundation/src/button/button.spec.ts
index 4bd64d67e48..dd977c786a6 100644
--- a/packages/web-components/fast-foundation/src/button/button.spec.ts
+++ b/packages/web-components/fast-foundation/src/button/button.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { DOM } from "@microsoft/fast-element";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { Button, buttonTemplate as template } from "./index";
 import { eventClick } from "@microsoft/fast-web-utilities";
 
@@ -609,7 +609,7 @@ describe("Button", () => {
                spans.forEach((span: HTMLSpanElement) => {
                    span.click()
                    expect(wasClicked).to.equal(false);
-               }) 
+               })
             }
 
             await disconnect();
diff --git a/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts b/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts
index f539c83e8fe..77c0ba232d5 100644
--- a/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts
+++ b/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts
@@ -1,6 +1,6 @@
 import { customElement, DOM, html } from "@microsoft/fast-element";
 import { expect } from "chai";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { Calendar, calendarTemplate } from "./index";
 import { DateFormatter } from "./date-formatter";
 import {
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts
index d8ca4328bf9..554c3214580 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts
@@ -1,6 +1,6 @@
 import { assert, expect } from "chai";
 import { Checkbox, checkboxTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM, customElement } from "@microsoft/fast-element";
 import { keySpace } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts b/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts
index b384c40c2cb..e8c9944fc8e 100644
--- a/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts
+++ b/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts
@@ -2,7 +2,7 @@ import { DOM } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp } from "@microsoft/fast-web-utilities";
 import { expect } from "chai";
 import { ListboxOption, listboxOptionTemplate } from "../listbox-option";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { Combobox, comboboxTemplate as template } from "./index";
 
 describe("Combobox", () => {
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts
index aa0f6328b4c..04af36e61be 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { html, ViewTemplate } from "@microsoft/fast-element";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { dataGridCellTemplate, DataGridCell } from "./index";
 import { newDataRow } from "./data-grid.spec";
 import { DataGridCellTypes } from "./data-grid.options";
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts
index bc61ce52453..7af8ec35d06 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { DOM } from "@microsoft/fast-element";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { ColumnDefinition, dataGridRowTemplate, DataGridCell, dataGridCellTemplate, DataGridRow } from "./index";
 import { newDataRow } from "./data-grid.spec";
 import { keyArrowLeft, keyArrowRight, keyEnd, keyHome } from "@microsoft/fast-web-utilities";
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts
index 79ffe898f9d..f8c3725cd6f 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import {
     dataGridTemplate,
     DataGrid,
diff --git a/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts b/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts
index c339626a3bd..ecd43152d65 100644
--- a/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts
+++ b/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts
@@ -2,7 +2,7 @@ import { Constructable, DOM } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { FoundationElement } from "..";
 import { Container, DI, Registration } from "../di";
-import { uniqueElementName } from "../test-utilities/fixture";
+import { uniqueElementName } from "../testing/fixture";
 import { DesignSystem, ElementDisambiguation } from "./design-system";
 import type { DesignSystemRegistrationContext } from "./registration-context";
 import { DesignToken } from "../design-token/design-token";
diff --git a/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts b/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
index ebb904cda5f..5ba7939898d 100644
--- a/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
+++ b/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
@@ -1,7 +1,7 @@
 import { css, DOM, FASTElement, html, Observable } from "@microsoft/fast-element";
 import chia, { expect } from "chai";
 import { DesignSystem } from "../design-system";
-import { uniqueElementName } from "../test-utilities/fixture";
+import { uniqueElementName } from "../testing/fixture";
 import { FoundationElement } from "../foundation-element";
 import { CSSDesignToken, DesignToken, DesignTokenChangeRecord, DesignTokenSubscriber } from "./design-token";
 import spies from "chai-spies";
diff --git a/packages/web-components/fast-foundation/src/di/di.ts b/packages/web-components/fast-foundation/src/di/di.ts
index 5281f4b590a..19c2302f55e 100644
--- a/packages/web-components/fast-foundation/src/di/di.ts
+++ b/packages/web-components/fast-foundation/src/di/di.ts
@@ -1721,7 +1721,7 @@ export class ContainerImpl implements Container {
             }
         }
 
-        throw new Error(`Unable to resolve key: ${key}`);
+        throw new Error(`Unable to resolve key: ${String(key)}`);
     }
 
     public getAll<K extends Key>(
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
index 6da5caa6d50..ac7a6974119 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { Dialog, dialogTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM } from "@microsoft/fast-element";
 import { keyEscape } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts b/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
index bd7e5175acd..585c3a4e2a3 100644
--- a/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
+++ b/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
@@ -1,5 +1,5 @@
 import { html, ref, customElement, DOM, FASTElement } from "@microsoft/fast-element";
-import { fixture, uniqueElementName } from "../test-utilities/fixture";
+import { fixture, uniqueElementName } from "../testing/fixture";
 import { reflectAttributes } from "./reflect-attributes";
 import { expect } from "chai";
 
diff --git a/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts b/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
index e541b14f09e..c99d8108822 100644
--- a/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
+++ b/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
@@ -1,6 +1,6 @@
 import { DOM } from "@microsoft/fast-element";
 import { expect } from "chai";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { Disclosure, disclosureTemplate as template } from "./index";
 
 const FastDisclosure = Disclosure.compose({
diff --git a/packages/web-components/fast-foundation/src/divider/divider.spec.ts b/packages/web-components/fast-foundation/src/divider/divider.spec.ts
index 81cb3a82079..7cb02bcad06 100644
--- a/packages/web-components/fast-foundation/src/divider/divider.spec.ts
+++ b/packages/web-components/fast-foundation/src/divider/divider.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { DOM } from "@microsoft/fast-element";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DividerRole } from "./divider.options";
 import { Divider, dividerTemplate as template } from "./index";
 import { Orientation } from "@microsoft/fast-web-utilities";
diff --git a/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts b/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts
index 491873d865a..09c5254b65a 100644
--- a/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts
+++ b/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { DOM } from "@microsoft/fast-element";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { FlipperDirection } from "./flipper.options";
 import { Flipper, flipperTemplate as template } from "./index";
 
@@ -75,7 +75,7 @@ describe("Flipper", () => {
         const { element, connect, disconnect } = await setup();
 
         element.setAttribute("aria-hidden", "false");
-        
+
         await connect();
         await DOM.nextUpdate();
 
diff --git a/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts b/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts
index ea59e3120d6..c03e2c7a0b4 100644
--- a/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts
+++ b/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts
@@ -1,6 +1,6 @@
 import { FormAssociated, CheckableFormAssociated } from "./form-associated";
 import { assert, expect } from "chai";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { customElement, FASTElement, html, elements, DOM } from "@microsoft/fast-element";
 
 const template = html`
diff --git a/packages/web-components/fast-foundation/src/foundation-element/foundation-element.spec.ts b/packages/web-components/fast-foundation/src/foundation-element/foundation-element.spec.ts
index 02c09610c74..b6a62b84101 100644
--- a/packages/web-components/fast-foundation/src/foundation-element/foundation-element.spec.ts
+++ b/packages/web-components/fast-foundation/src/foundation-element/foundation-element.spec.ts
@@ -1,7 +1,7 @@
 import { css, customElement, html } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { DI } from "../di";
-import { fixture, uniqueElementName } from "../test-utilities/fixture";
+import { fixture, uniqueElementName } from "../testing/fixture";
 import {
     ComponentPresentation,
     DefaultComponentPresentation,
@@ -150,7 +150,7 @@ describe("FoundationElement", () => {
             class MyElement extends FoundationElement {}
 
             function checkCallback<T>(
-                context: ElementDefinitionContext, 
+                context: ElementDefinitionContext,
                 definition: OverrideFoundationElementDefinition<FoundationElementDefinition>,
                 part: T
             ) {
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts
index 162cb269e41..47a518522a6 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts
@@ -1,6 +1,6 @@
 import { css, DOM, html } from "@microsoft/fast-element";
 import { expect } from "chai";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { HorizontalScroll, horizontalScrollTemplate as template } from "./index";
 
 const styles = css`
diff --git a/packages/web-components/fast-foundation/src/listbox-option/listbox-option.spec.ts b/packages/web-components/fast-foundation/src/listbox-option/listbox-option.spec.ts
index c973dbb8bd2..0b242a6e10f 100644
--- a/packages/web-components/fast-foundation/src/listbox-option/listbox-option.spec.ts
+++ b/packages/web-components/fast-foundation/src/listbox-option/listbox-option.spec.ts
@@ -1,7 +1,7 @@
 import { DOM } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { listboxOptionTemplate } from "../listbox-option/listbox-option.template.js";
-import { fixture } from "../test-utilities/fixture.js";
+import { fixture } from "../testing/fixture.js";
 import { ListboxOption } from "./listbox-option.js";
 
 describe("ListboxOption", () => {
diff --git a/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts b/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts
index b789d84b57f..4de8a5e500a 100644
--- a/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts
+++ b/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts
@@ -2,7 +2,7 @@ import { DOM } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { ListboxOption } from "../listbox-option/listbox-option";
 import { listboxOptionTemplate as itemTemplate } from "../listbox-option/listbox-option.template";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { ListboxElement, listboxTemplate as template } from "./index";
 
 describe("Listbox", () => {
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts
index 66deefa11b1..74bb136deff 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { MenuItem, menuItemTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM } from "@microsoft/fast-element";
 import { MenuItemRole } from "./menu-item";
 import { keyEnter, keySpace } from "@microsoft/fast-web-utilities";
diff --git a/packages/web-components/fast-foundation/src/menu/menu.spec.ts b/packages/web-components/fast-foundation/src/menu/menu.spec.ts
index 2c1865e4a14..1d0a83f4dd6 100644
--- a/packages/web-components/fast-foundation/src/menu/menu.spec.ts
+++ b/packages/web-components/fast-foundation/src/menu/menu.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { Menu, menuTemplate as template } from "./index";
 import { MenuItem, menuItemTemplate as itemTemplate, MenuItemRole } from "../menu-item";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM, html } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts b/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts
index f33abe69de7..fea05d6af71 100644
--- a/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts
+++ b/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts
@@ -1,6 +1,6 @@
 import { DOM } from "@microsoft/fast-element";
 import { expect, assert } from "chai";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { NumberField, numberFieldTemplate as template } from "./index";
 
 const FASTNumberField = NumberField.compose({
diff --git a/packages/web-components/fast-foundation/src/picker/picker.spec.ts b/packages/web-components/fast-foundation/src/picker/picker.spec.ts
index cef542970a0..977d993e686 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.spec.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.spec.ts
@@ -11,7 +11,7 @@ import {
     pickerMenuTemplate,
     pickerTemplate,
 } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM } from "@microsoft/fast-element";
 import {
     keyArrowDown,
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.spec.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.spec.ts
index 464ffa25f77..4bac861a640 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.spec.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { BaseProgress as Progress } from "../progress";
 import { progressRingTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 
 const FASTProgressRing = Progress.compose({
     baseName: "progress-ring",
diff --git a/packages/web-components/fast-foundation/src/progress/progress.spec.ts b/packages/web-components/fast-foundation/src/progress/progress.spec.ts
index 3d7a5dc6e9c..c29934bc515 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.spec.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { BaseProgress as Progress, progressTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { customElement } from "@microsoft/fast-element";
 
 const FASTProgress = Progress.compose({
diff --git a/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts b/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts
index 628bb52f98b..37072eac8d8 100644
--- a/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts
+++ b/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts
@@ -1,7 +1,7 @@
 import { assert, expect } from "chai";
 import { RadioGroup, radioGroupTemplate as template } from "./index";
 import { Radio, radioTemplate as itemTemplate } from "../radio";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM, html } from "@microsoft/fast-element";
 import { Orientation } from "@microsoft/fast-web-utilities";
 
@@ -320,7 +320,7 @@ describe("Radio Group", () => {
         element.appendChild(radio1);
         element.appendChild(radio2);
         element.appendChild(radio3);
-        
+
         await connect();
         await DOM.nextUpdate();
 
@@ -354,7 +354,7 @@ describe("Radio Group", () => {
         element.appendChild(radio1);
         element.appendChild(radio2);
         element.appendChild(radio3);
-        
+
         await connect();
         await DOM.nextUpdate();
 
@@ -389,7 +389,7 @@ describe("Radio Group", () => {
         element.appendChild(radio1);
         element.appendChild(radio2);
         element.appendChild(radio3);
-        
+
         await connect();
         await DOM.nextUpdate();
 
@@ -443,4 +443,4 @@ describe("Radio Group", () => {
 
         await disconnect();
     });
-});
\ No newline at end of file
+});
diff --git a/packages/web-components/fast-foundation/src/radio/radio.spec.ts b/packages/web-components/fast-foundation/src/radio/radio.spec.ts
index 92198b43db4..77aa57d3864 100644
--- a/packages/web-components/fast-foundation/src/radio/radio.spec.ts
+++ b/packages/web-components/fast-foundation/src/radio/radio.spec.ts
@@ -1,6 +1,6 @@
 import { expect, assert } from "chai";
 import { Radio, radioTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM } from "@microsoft/fast-element";
 import { keySpace } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/search/search.spec.ts b/packages/web-components/fast-foundation/src/search/search.spec.ts
index b156842a939..4b497d802ed 100644
--- a/packages/web-components/fast-foundation/src/search/search.spec.ts
+++ b/packages/web-components/fast-foundation/src/search/search.spec.ts
@@ -1,6 +1,6 @@
 import { expect, assert } from "chai";
 import { Button, buttonTemplate } from "../button";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { Search, searchTemplate as template } from "./index";
 
 const FASTSearch = Search.compose({
diff --git a/packages/web-components/fast-foundation/src/select/select.spec.ts b/packages/web-components/fast-foundation/src/select/select.spec.ts
index 05b3eff6083..285a4004f1a 100644
--- a/packages/web-components/fast-foundation/src/select/select.spec.ts
+++ b/packages/web-components/fast-foundation/src/select/select.spec.ts
@@ -2,8 +2,8 @@ import { DOM } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp, keyEnd, keyHome } from "@microsoft/fast-web-utilities";
 import { expect } from "chai";
 import { ListboxOption, listboxOptionTemplate } from "../listbox-option/index.js";
-import { fixture } from "../test-utilities/fixture.js";
-import { timeout } from "../test-utilities/timeout.js";
+import { fixture } from "../testing/fixture.js";
+import { timeout } from "../testing/timeout.js";
 import { Select, selectTemplate as template } from "./index.js";
 
 describe("Select", () => {
diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts
index e73c023d9e0..818a0f5958d 100644
--- a/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts
+++ b/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { SliderLabel, sliderLabelTemplate as template } from "../index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM } from "@microsoft/fast-element";
 import { Orientation } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/slider/slider.spec.ts b/packages/web-components/fast-foundation/src/slider/slider.spec.ts
index 5c9f38eba28..be338237fba 100644
--- a/packages/web-components/fast-foundation/src/slider/slider.spec.ts
+++ b/packages/web-components/fast-foundation/src/slider/slider.spec.ts
@@ -1,6 +1,6 @@
 import { expect, assert } from "chai";
 import { Slider, sliderTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM } from "@microsoft/fast-element";
 import { Orientation, Direction } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/switch/switch.spec.ts b/packages/web-components/fast-foundation/src/switch/switch.spec.ts
index c81dd0921dc..c98f6fe4d90 100644
--- a/packages/web-components/fast-foundation/src/switch/switch.spec.ts
+++ b/packages/web-components/fast-foundation/src/switch/switch.spec.ts
@@ -1,6 +1,6 @@
 import { expect, assert } from "chai";
 import { Switch, switchTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM } from "@microsoft/fast-element";
 import { keySpace, keyEnter } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/tab-panel/tab-panel.spec.ts b/packages/web-components/fast-foundation/src/tab-panel/tab-panel.spec.ts
index f9b84784c81..97b52235f9f 100644
--- a/packages/web-components/fast-foundation/src/tab-panel/tab-panel.spec.ts
+++ b/packages/web-components/fast-foundation/src/tab-panel/tab-panel.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { TabPanel, tabPanelTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 
 const FASTTabPanel = TabPanel.compose({
     baseName: "tab-panel",
diff --git a/packages/web-components/fast-foundation/src/tab/tab.spec.ts b/packages/web-components/fast-foundation/src/tab/tab.spec.ts
index a6384f5e8bd..3bff961aea0 100644
--- a/packages/web-components/fast-foundation/src/tab/tab.spec.ts
+++ b/packages/web-components/fast-foundation/src/tab/tab.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { Tab, tabTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 
 const FASTTab = Tab.compose({
     baseName: "tab",
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
index dcd903f75f5..325ce09a69f 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
@@ -1,6 +1,6 @@
 import { assert, expect } from "chai";
 import { css, DOM, customElement, html } from "@microsoft/fast-element";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { Tab, tabTemplate } from "../tab";
 import { TabPanel, tabPanelTemplate } from "../tab-panel";
 import { TabsOrientation, Tabs, tabsTemplate as template } from "./index";
diff --git a/packages/web-components/fast-foundation/src/testing/exports.ts b/packages/web-components/fast-foundation/src/testing/exports.ts
new file mode 100644
index 00000000000..cf4e7bd929e
--- /dev/null
+++ b/packages/web-components/fast-foundation/src/testing/exports.ts
@@ -0,0 +1,2 @@
+export { timeout } from "./timeout.js";
+export * from "./fixture.js";
diff --git a/packages/web-components/fast-foundation/src/test-utilities/fixture.spec.ts b/packages/web-components/fast-foundation/src/testing/fixture.spec.ts
similarity index 100%
rename from packages/web-components/fast-foundation/src/test-utilities/fixture.spec.ts
rename to packages/web-components/fast-foundation/src/testing/fixture.spec.ts
diff --git a/packages/web-components/fast-foundation/src/test-utilities/fixture.ts b/packages/web-components/fast-foundation/src/testing/fixture.ts
similarity index 98%
rename from packages/web-components/fast-foundation/src/test-utilities/fixture.ts
rename to packages/web-components/fast-foundation/src/testing/fixture.ts
index 89eb8a0c3d3..02b2b3dcc90 100644
--- a/packages/web-components/fast-foundation/src/test-utilities/fixture.ts
+++ b/packages/web-components/fast-foundation/src/testing/fixture.ts
@@ -13,6 +13,7 @@ import type {
 
 /**
  * Options used to customize the creation of the test fixture.
+ * @public
  */
 export interface FixtureOptions {
     /**
@@ -45,6 +46,10 @@ export interface FixtureOptions {
     designSystem?: DesignSystem;
 }
 
+/**
+ * A test fixture.
+ * @public
+ */
 export interface Fixture<TElement = HTMLElement> {
     /**
      * The document the fixture is running in.
@@ -105,6 +110,7 @@ function findElement(view: HTMLView): HTMLElement {
 
 /**
  * Creates a random, unique name suitable for use as a Custom Element name.
+ * @public
  */
 export function uniqueElementName(): string {
     return `fast-unique-${Math.random().toString(36).substring(7)}`;
@@ -124,6 +130,7 @@ function isElementRegistry<T>(
  * @remarks
  * Yields control to the caller one Microtask later, in order to
  * ensure that the DOM has settled.
+ * @public
  */
 export async function fixture<TElement = HTMLElement>(
     templateNameOrRegistry:
diff --git a/packages/web-components/fast-foundation/src/test-utilities/timeout.ts b/packages/web-components/fast-foundation/src/testing/timeout.ts
similarity index 55%
rename from packages/web-components/fast-foundation/src/test-utilities/timeout.ts
rename to packages/web-components/fast-foundation/src/testing/timeout.ts
index 9e482e9fa34..f9401ebe704 100644
--- a/packages/web-components/fast-foundation/src/test-utilities/timeout.ts
+++ b/packages/web-components/fast-foundation/src/testing/timeout.ts
@@ -1,5 +1,8 @@
 /**
- * Timeout for use in async tets.
+ * A timeout helper for use in tests.
+ * @param timeout The length of the timeout.
+ * @returns A promise that resolves once the configured time has elapsed.
+ * @public
  */
 export async function timeout(timeout = 0): Promise<void> {
     return new Promise((resolve, reject) => {
diff --git a/packages/web-components/fast-foundation/src/text-area/text-area.spec.ts b/packages/web-components/fast-foundation/src/text-area/text-area.spec.ts
index 06b607483ed..c94ca0c2590 100644
--- a/packages/web-components/fast-foundation/src/text-area/text-area.spec.ts
+++ b/packages/web-components/fast-foundation/src/text-area/text-area.spec.ts
@@ -1,6 +1,6 @@
 import { expect, assert } from "chai";
 import { TextArea, textAreaTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 
 const FASTTextArea = TextArea.compose({
     baseName: "text-area",
diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.spec.ts b/packages/web-components/fast-foundation/src/text-field/text-field.spec.ts
index 128505499f4..5c8ab1909f4 100644
--- a/packages/web-components/fast-foundation/src/text-field/text-field.spec.ts
+++ b/packages/web-components/fast-foundation/src/text-field/text-field.spec.ts
@@ -1,5 +1,5 @@
 import { expect, assert } from "chai";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { TextField, textFieldTemplate as template } from "./index";
 import { TextFieldType } from "./text-field";
 
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
index 678596d165c..6b222dd7436 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
@@ -1,7 +1,7 @@
 import { DOM } from "@microsoft/fast-element";
 import { keyArrowRight, Orientation } from "@microsoft/fast-web-utilities";
 import { expect } from "chai";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { Toolbar, toolbarTemplate as template } from "./index";
 
 const FASTToolbar = Toolbar.compose({
diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts
index 630c6512e13..2ad05f72790 100644
--- a/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts
+++ b/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { DOM } from "@microsoft/fast-element";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { tooltipTemplate as template, Tooltip } from "./index";
 import { TooltipPosition } from "./tooltip";
 import { AnchoredRegion, anchoredRegionTemplate } from '../anchored-region';
diff --git a/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts b/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts
index b95a9301f98..df365e01a6e 100644
--- a/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts
+++ b/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import { TreeItem, treeItemTemplate as template } from "./index";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM } from "@microsoft/fast-element";
 
 const FASTTreeItem = TreeItem.compose({
diff --git a/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts b/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts
index edcd52c082f..c37f642ed41 100644
--- a/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts
+++ b/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { TreeView, treeViewTemplate as template } from "./index";
 import { TreeItem, treeItemTemplate as itemTemplate } from "../tree-item";
-import { fixture } from "../test-utilities/fixture";
+import { fixture } from "../testing/fixture";
 import { DOM, customElement } from "@microsoft/fast-element";
 
 const FASTTreeView = TreeView.compose({
diff --git a/packages/web-components/fast-router/docs/api-report.md b/packages/web-components/fast-router/docs/api-report.md
index abcdf9fe6e1..baeda3e3b62 100644
--- a/packages/web-components/fast-router/docs/api-report.md
+++ b/packages/web-components/fast-router/docs/api-report.md
@@ -53,7 +53,7 @@ export class DefaultLinkHandler implements LinkHandler {
     connect(): void;
     // (undocumented)
     disconnect(): void;
-    }
+}
 
 // @alpha (undocumented)
 export class DefaultNavigationProcess<TSettings> {
@@ -77,7 +77,7 @@ export class DefaultNavigationQueue implements NavigationQueue, NavigationHandle
     handleEvent(event: PopStateEvent): void;
     // (undocumented)
     receive(): Promise<NavigationMessage>;
-    }
+}
 
 // @alpha (undocumented)
 export class DefaultRouter implements Router {
@@ -108,7 +108,7 @@ export class DefaultRouter implements Router {
     route: RecognizedRoute | null;
     // (undocumented)
     shouldRender(route: RecognizedRoute): boolean;
-    }
+}
 
 // @alpha (undocumented)
 export class DefaultRouteRecognizer<TSettings> implements RouteRecognizer<TSettings> {
@@ -118,7 +118,7 @@ export class DefaultRouteRecognizer<TSettings> implements RouteRecognizer<TSetti
     generateFromPath(path: string, params: object): string | null;
     // (undocumented)
     recognize(path: string, converters?: Readonly<Record<string, RouteParameterConverter>>): Promise<RecognizedRoute<TSettings> | null>;
-    }
+}
 
 // @alpha (undocumented)
 export type DefinitionCallback = () => Promise<FallbackRouteDefinition> | FallbackRouteDefinition;
@@ -157,7 +157,7 @@ export class FASTElementLayout implements Layout {
     afterCommit(routerElement: HTMLElement): Promise<void>;
     // (undocumented)
     beforeCommit(routerElement: HTMLElement): Promise<void>;
-    }
+}
 
 // Warning: (ae-forgotten-export) The symbol "FASTRouter_base" needs to be exported by the entry point index.d.ts
 //
@@ -340,7 +340,7 @@ export type PathedRouteDefinition<TSettings = any> = SupportsSettings<TSettings>
 // @alpha (undocumented)
 export const QueryString: Readonly<{
     readonly current: string;
-    build(params: Object, traditional?: boolean | undefined): string;
+    build(params: Object, traditional?: boolean): string;
     separate(path: string): Readonly<{
         path: string;
         queryString: string;
@@ -374,7 +374,7 @@ export class Redirect implements NavigationCommand {
     createContributor(): Promise<{
         navigate(phase: NavigationPhase): Promise<void>;
     }>;
-    }
+}
 
 // @alpha (undocumented)
 export type RedirectRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> & {
@@ -400,7 +400,7 @@ export class Render implements RenderCommand {
     // (undocumented)
     get transition(): Transition;
     set transition(value: Transition);
-    }
+}
 
 // @alpha (undocumented)
 export type RenderableRouteDefinition<TSettings = any> = ElementRouteDefinition<TSettings> | TemplateRouteDefinition<TSettings>;
@@ -465,7 +465,7 @@ export class RouteCollection<TSettings = any> {
     map(...routes: MappableRouteDefinition<TSettings>[]): void;
     // (undocumented)
     recognize(path: string): Promise<RouteMatch<TSettings> | null>;
-    }
+}
 
 // @alpha (undocumented)
 export type RouteMatch<TSettings = any> = {
@@ -626,7 +626,6 @@ export const Transition: Readonly<{
     default: Readonly<Transition>;
 }>;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/web-components/fast-router/package.json b/packages/web-components/fast-router/package.json
index d5163cc2366..bf494f409f5 100644
--- a/packages/web-components/fast-router/package.json
+++ b/packages/web-components/fast-router/package.json
@@ -80,7 +80,7 @@
     "ts-loader": "^7.0.2",
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^4.44.0"
   },
   "dependencies": {
diff --git a/packages/web-components/fast-router/src/configuration.ts b/packages/web-components/fast-router/src/configuration.ts
index 6149fc8f9a8..cf1a30d6639 100644
--- a/packages/web-components/fast-router/src/configuration.ts
+++ b/packages/web-components/fast-router/src/configuration.ts
@@ -46,7 +46,7 @@ export abstract class RouterConfiguration<TSettings = any> {
     }
 
     public createRouteRecognizer(): RouteRecognizer<TSettings> {
-        return this.construct(DefaultRouteRecognizer);
+        return this.construct<DefaultRouteRecognizer<TSettings>>(DefaultRouteRecognizer);
     }
 
     public construct<T>(Type: Constructable<T>): T {
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index c76cd4c11f9..004d04cadbb 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -55,6 +55,6 @@
     "@types/node": "^17.0.17",
     "chokidar-cli": "^3.0.0",
     "express": "^4.17.1",
-    "typescript": "^4.6.2"
+    "typescript": "4.7.0-beta"
   }
 }
diff --git a/sites/fast-color-explorer/package.json b/sites/fast-color-explorer/package.json
index 5949e0e3e39..86423025227 100644
--- a/sites/fast-color-explorer/package.json
+++ b/sites/fast-color-explorer/package.json
@@ -32,25 +32,24 @@
     "@microsoft/site-utilities": "^0.9.0",
     "@types/node": "^15.0.1",
     "clean-webpack-plugin": "^1.0.0",
-    "copy-webpack-plugin": "^6.0.3",
-    "css-loader": "^4.2.1",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.7.1",
     "csstype": "^2.5.8",
     "ejs-loader": "^0.5.0",
     "eslint-config-prettier": "6.10.1",
     "exenv-es6": "^1.1.1",
     "focus-visible": "^4.1.5",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.10.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "prettier": "2.0.2",
     "svg-inline-loader": "^0.8.2",
-    "ts-loader": "^5.3.1",
-    "typescript": "^4.6.2",
-    "webpack": "^4.44.0",
-    "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.11.0",
-    "workbox-webpack-plugin": "^3.6.3"
+    "ts-loader": "^9.3.0",
+    "typescript": "4.7.0-beta",
+    "webpack": "^5.72.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0",
+    "workbox-webpack-plugin": "^6.5.3"
   },
   "dependencies": {
     "@fluentui/svg-icons": "^1.1.0",
diff --git a/sites/fast-color-explorer/webpack.config.js b/sites/fast-color-explorer/webpack.config.js
index 9e5dfdf4d60..3885f22774e 100644
--- a/sites/fast-color-explorer/webpack.config.js
+++ b/sites/fast-color-explorer/webpack.config.js
@@ -5,7 +5,6 @@ const CleanWebpackPlugin = require("clean-webpack-plugin");
 const WorkboxPlugin = require("workbox-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const manifest = require("@microsoft/site-utilities/src/curated-html.json").join("");
 
 const appDir = path.resolve(__dirname, "./app");
@@ -14,7 +13,7 @@ const outDir = path.resolve(__dirname, "./www");
 module.exports = (env, args) => {
     const isProduction = args.mode === "production";
     return {
-        devtool: isProduction ? "none" : "inline-source-map",
+        devtool: isProduction ? undefined : "inline-source-map",
         entry: {
             main: path.resolve(appDir, "index.ts"),
             serviceWorker: path.resolve(appDir, "service-worker-registration.ts"),
@@ -74,9 +73,6 @@ module.exports = (env, args) => {
                     use: [
                         {
                             loader: MiniCssExtractPlugin.loader,
-                            options: {
-                                hmr: process.env.NODE_ENV === "development",
-                            },
                         },
                         {
                             loader: "css-loader",
@@ -130,9 +126,11 @@ module.exports = (env, args) => {
         devServer: {
             compress: false,
             historyApiFallback: true,
-            overlay: true,
             open: true,
             port: 7777,
+            client: {
+                overlay: true,
+            },
         },
     };
 };
diff --git a/sites/fast-website/package.json b/sites/fast-website/package.json
index 9e2385dfffb..9bdca3ad933 100644
--- a/sites/fast-website/package.json
+++ b/sites/fast-website/package.json
@@ -16,13 +16,13 @@
     "@microsoft/fast-web-utilities": "^5.4.1",
     "@microsoft/site-utilities": "^0.9.0",
     "@rollup/plugin-alias": "^3.1.1",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
+    "babel-loader": "^8.2.5",
+    "clean-webpack-plugin": "^4.0.0",
     "ejs-loader": "^0.5.0",
-    "html-webpack-plugin": "^4.3.0",
+    "html-webpack-plugin": "^5.5.0",
     "lodash-es": "4.17.21",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "mini-css-extract-plugin": "^2.6.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
     "prettier": "2.0.2",
     "rollup": "^2.7.6",
     "rollup-plugin-commonjs": "^10.1.0",
@@ -31,12 +31,13 @@
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.27.1",
     "svg-inline-loader": "^0.8.2",
-    "terser-webpack-plugin": "^3.0.1",
-    "ts-loader": "^7.0.2",
-    "typescript": "^4.6.2",
-    "webpack": "^4.44.0",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^4.2.2"
+    "terser-webpack-plugin": "^5.3.1",
+    "ts-loader": "^9.3.0",
+    "typescript": "4.7.0-beta",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0",
+    "webpack-merge": "^5.8.0"
   },
   "scripts": {
     "build:all": "yarn build:rollup && yarn build:webpack",
diff --git a/sites/fast-website/webpack.common.js b/sites/fast-website/webpack.common.js
index db1c40281d9..9fcbeb078ce 100644
--- a/sites/fast-website/webpack.common.js
+++ b/sites/fast-website/webpack.common.js
@@ -44,9 +44,6 @@ module.exports = {
                 use: [
                     {
                         loader: MiniCssExtractPlugin.loader,
-                        options: {
-                            hmr: process.env.NODE_ENV === "development",
-                        },
                     },
                     {
                         loader: "css-loader",
diff --git a/sites/fast-website/webpack.dev.js b/sites/fast-website/webpack.dev.js
index e4c5cb1522b..55a939f2904 100644
--- a/sites/fast-website/webpack.dev.js
+++ b/sites/fast-website/webpack.dev.js
@@ -1,13 +1,15 @@
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const baseConfig = require("./webpack.common");
 
 module.exports = merge(baseConfig, {
     devServer: {
-        contentBase: "./src/public",
+        static: {
+            directory: "./src/public",
+        },
         open: true,
         port: 7700,
-        disableHostCheck: true,
+        allowedHosts: "all",
     },
     mode: "development",
     output: {
diff --git a/sites/fast-website/webpack.prod.js b/sites/fast-website/webpack.prod.js
index 7fe06df9d31..2291741d06b 100644
--- a/sites/fast-website/webpack.prod.js
+++ b/sites/fast-website/webpack.prod.js
@@ -1,4 +1,4 @@
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const TerserJSPlugin = require("terser-webpack-plugin");
diff --git a/sites/site-utilities/build/badges.js b/sites/site-utilities/build/badges.js
index 07a8e9e8eeb..3d8fe545d01 100644
--- a/sites/site-utilities/build/badges.js
+++ b/sites/site-utilities/build/badges.js
@@ -1,6 +1,7 @@
 const fs = require("fs-extra");
 const path = require("path");
 const { makeBadge } = require("badge-maker");
+const { getPackageJsonDir } = require("../../../build/get-package-json");
 
 const siteUtilitiesDir = path.dirname(
     require.resolve("@microsoft/site-utilities/package.json")
@@ -59,7 +60,11 @@ const formats = {
     "@microsoft/fast-foundation",
 ].map(p => {
     try {
-        const { name, version: message } = require(`${p}/package.json`);
+        const dir = getPackageJsonDir(p);
+
+        const { name, version: message } = JSON.parse(
+            fs.readFileSync(path.resolve(dir, "package.json"))
+        );
         const packageName = name.split("/").pop();
         formats[`${encodeURIComponent(packageName)}.svg`] = {
             label: "npm package",
diff --git a/sites/site-utilities/package.json b/sites/site-utilities/package.json
index f4d543a2f64..61a3ec97412 100644
--- a/sites/site-utilities/package.json
+++ b/sites/site-utilities/package.json
@@ -54,7 +54,7 @@
     "react": "^16.8.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^25.4.0",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "vscode-web-custom-data": "^0.3.1"
   },
   "dependencies": {
diff --git a/sites/website/src/generate-docs.js b/sites/website/src/generate-docs.js
index d148179e554..367e89e00c6 100644
--- a/sites/website/src/generate-docs.js
+++ b/sites/website/src/generate-docs.js
@@ -2,14 +2,11 @@ const path = require("path");
 const { createInterface } = require("readline");
 const { exec } = require("child_process");
 const fs = require("fs-extra");
+const { getPackageJsonDir } = require("../../../build/get-package-json");
 
-const fastFoundation = path.dirname(
-    require.resolve("@microsoft/fast-foundation/package.json")
-);
-const fastElement = path.dirname(require.resolve("@microsoft/fast-element/package.json"));
-const fastComponents = path.dirname(
-    require.resolve("@microsoft/fast-components/package.json")
-);
+const fastFoundation = getPackageJsonDir("@microsoft/fast-foundation"); // path.dirname( require.resolve("@microsoft/fast-foundation/package.json"));
+const fastElement = getPackageJsonDir("@microsoft/fast-element"); // path.dirname(require.resolve("@microsoft/fast-element/package.json"));
+const fastComponents = getPackageJsonDir("@microsoft/fast-components"); // path.dirname( require.resolve("@microsoft/fast-components/package.json"));
 
 // sites/website
 const projectRoot = path.resolve(__dirname, "../");
@@ -177,7 +174,10 @@ async function copyArticleMarkdown() {
             },
         },
         {
-            src: require.resolve("@microsoft/fast-element/docs/ACKNOWLEDGEMENTS.md"),
+            src: path.resolve(
+                getPackageJsonDir("@microsoft/fast-element"),
+                "./docs/ACKNOWLEDGEMENTS.md"
+            ), // require.resolve("@microsoft/fast-element/docs/ACKNOWLEDGEMENTS.md"),
             dest: path.resolve(outputDir, "resources/acknowledgements.md"),
             metadata: {
                 id: "acknowledgements",
@@ -191,7 +191,10 @@ async function copyArticleMarkdown() {
             },
         },
         {
-            src: require.resolve("@microsoft/fast-element/README.md"),
+            src: path.resolve(
+                getPackageJsonDir("@microsoft/fast-element"),
+                "./README.md"
+            ),
             dest: path.resolve(outputDir, "fast-element/getting-started.md"),
             metadata: {
                 id: "getting-started",
@@ -274,7 +277,11 @@ async function copyArticleMarkdown() {
 async function copyAPI() {
     for (const pkg of packages) {
         await safeCopy(
-            require.resolve(`@microsoft/${pkg}/dist/${pkg}.api.json`),
+            path.resolve(
+                getPackageJsonDir(`@microsoft/${pkg}`),
+                `./dist/${pkg}.api.json`
+            ),
+            // require.resolve(`@microsoft/${pkg}/dist/${pkg}.api.json`),
             `./src/docs/api/${pkg}.api.json`
         );
     }
diff --git a/yarn.lock b/yarn.lock
index af0cfa060d2..0678059f4f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -138,6 +138,15 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@apideck/better-ajv-errors@^0.3.1":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.3.tgz#ab0b1e981e1749bf59736cf7ebe25cfc9f949c15"
+  integrity sha512-9o+HO2MbJhJHjDYZaDxJmSDckvDpiuItEsrIShV0DXeCshXWRHhqYyU/PKHMkuClOmFnZhRd6wzv4vpDu/dRKg==
+  dependencies:
+    json-schema "^0.4.0"
+    jsonpointer "^5.0.0"
+    leven "^3.1.0"
+
 "@babel/code-frame@7.16.7", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
@@ -298,7 +307,7 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
-"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
   integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
@@ -3827,6 +3836,14 @@
   dependencies:
     slash "^3.0.0"
 
+"@rollup/plugin-babel@^5.2.0":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
+  integrity sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@rollup/pluginutils" "^3.1.0"
+
 "@rollup/plugin-json@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3"
@@ -3834,6 +3851,18 @@
   dependencies:
     "@rollup/pluginutils" "^3.0.8"
 
+"@rollup/plugin-node-resolve@^11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz#82aa59397a29cd4e13248b106e6a4a1880362a60"
+  integrity sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    "@types/resolve" "1.17.1"
+    builtin-modules "^3.1.0"
+    deepmerge "^4.2.2"
+    is-module "^1.0.0"
+    resolve "^1.19.0"
+
 "@rollup/plugin-node-resolve@^13.1.3":
   version "13.3.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.3.0.tgz#da1c5c5ce8316cef96a2f823d111c1e4e498801c"
@@ -3846,6 +3875,14 @@
     is-module "^1.0.0"
     resolve "^1.19.0"
 
+"@rollup/plugin-replace@^2.4.1":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
+  integrity sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    magic-string "^0.25.7"
+
 "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -3961,6 +3998,16 @@
     eval "^0.1.8"
     webpack-sources "^1.4.3"
 
+"@surma/rollup-plugin-off-main-thread@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
+  integrity sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==
+  dependencies:
+    ejs "^3.1.6"
+    json5 "^2.2.0"
+    magic-string "^0.25.0"
+    string.prototype.matchall "^4.0.6"
+
 "@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz#bd6d1ff32a31b82b601e73672a789cc41e84fe18"
@@ -4264,11 +4311,6 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
-"@types/html-minifier-terser@^5.0.0":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57"
-  integrity sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==
-
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -4456,11 +4498,6 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/q@^1.5.1":
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
-  integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
-
 "@types/qs@*":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
@@ -4579,11 +4616,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/source-list-map@*":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
-  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
-
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -4594,23 +4626,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/tapable@^1", "@types/tapable@^1.0.5":
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310"
-  integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==
-
 "@types/trusted-types@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
   integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
 
-"@types/uglify-js@*":
-  version "3.13.2"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.2.tgz#1044c1713fb81cb1ceef29ad8a9ee1ce08d690ef"
-  integrity sha512-/xFrPIo+4zOeNGtVMbf9rUm0N+i4pDf1ynExomqtokIJmVzR3962lJ1UE+MmexMkA0cmN9oTzg5Xcbwge0Ij2Q==
-  dependencies:
-    source-map "^0.6.1"
-
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
@@ -4626,27 +4646,6 @@
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.4.tgz#1f4969042bf76d7ef7b5914f59b3b60073f4e1f4"
   integrity sha512-llS8qveOUX3wxHnSykP5hlYFFuMfJ9p5JvIyCiBgp7WTfl6K5ZcyHj8r8JsN/J6QODkAsRRCLIcTuOCu8etkUw==
 
-"@types/webpack-sources@*":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-3.2.0.tgz#16d759ba096c289034b26553d2df1bf45248d38b"
-  integrity sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==
-  dependencies:
-    "@types/node" "*"
-    "@types/source-list-map" "*"
-    source-map "^0.7.3"
-
-"@types/webpack@^4.4.31", "@types/webpack@^4.41.8":
-  version "4.41.32"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.32.tgz#a7bab03b72904070162b2f169415492209e94212"
-  integrity sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==
-  dependencies:
-    "@types/node" "*"
-    "@types/tapable" "^1"
-    "@types/uglify-js" "*"
-    "@types/webpack-sources" "*"
-    anymatch "^3.0.0"
-    source-map "^0.6.0"
-
 "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -5282,7 +5281,7 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4, ajv
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.8.0:
+ajv@^8.0.0, ajv@^8.6.0, ajv@^8.8.0:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
   integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
@@ -5319,11 +5318,6 @@ algoliasearch@^4.0.0, algoliasearch@^4.13.0:
     "@algolia/requester-node-http" "4.13.0"
     "@algolia/transporter" "4.13.0"
 
-alphanum-sort@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
-  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
-
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -5447,7 +5441,7 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-anymatch@^3.0.0, anymatch@^3.0.3, anymatch@~3.1.1, anymatch@~3.1.2:
+anymatch@^3.0.3, anymatch@~3.1.1, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
   integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
@@ -5708,6 +5702,11 @@ async@^2.5.0, async@^2.6.2:
   dependencies:
     lodash "^4.17.14"
 
+async@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
+  integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -5766,13 +5765,6 @@ babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-extract-comments@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
-  integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==
-  dependencies:
-    babylon "^6.18.0"
-
 babel-generator@^6.18.0:
   version "6.26.1"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
@@ -5939,19 +5931,6 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
-babel-plugin-syntax-object-rest-spread@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
-  integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
-
-babel-plugin-transform-object-rest-spread@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
-  integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
-  dependencies:
-    babel-plugin-syntax-object-rest-spread "^6.8.0"
-    babel-runtime "^6.26.0"
-
 babel-preset-current-node-syntax@^0.1.2:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-0.1.4.tgz#826f1f8e7245ad534714ba001f84f7e906c3b615"
@@ -6730,7 +6709,7 @@ camel-case@3.0.x:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
-camel-case@^4.1.1, camel-case@^4.1.2:
+camel-case@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
   integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
@@ -6872,7 +6851,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
+chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -7129,12 +7108,11 @@ clean-webpack-plugin@^1.0.0:
   dependencies:
     rimraf "^2.6.1"
 
-clean-webpack-plugin@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz#a99d8ec34c1c628a4541567aa7b457446460c62b"
-  integrity sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==
+clean-webpack-plugin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz#72947d4403d452f38ed61a9ff0ada8122aacd729"
+  integrity sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==
   dependencies:
-    "@types/webpack" "^4.4.31"
     del "^4.1.1"
 
 cli-boxes@^2.2.1:
@@ -7270,15 +7248,6 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
 
-coa@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
-  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
-  dependencies:
-    "@types/q" "^1.5.1"
-    chalk "^2.4.1"
-    q "^1.1.2"
-
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -7344,7 +7313,7 @@ color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-color@^3.0.0, color@^3.1.3:
+color@^3.1.3:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
   integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
@@ -7427,11 +7396,6 @@ commander@8.3.0, commander@^8.3.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
-commander@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
-  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
-
 commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -7452,7 +7416,7 @@ comment-parser@1.2.4:
   resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.2.4.tgz#489f3ee55dfd184a6e4bffb31baba284453cb760"
   integrity sha512-pm0b+qv+CkWNriSTMsfnjChF9kH0kxz55y44Wo5le9qLxMj5xDQAaEd9ZN1ovSuk9CsrncWaFwgpOMg7ClJwkw==
 
-common-tags@^1.4.0:
+common-tags@^1.8.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
   integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
@@ -7774,41 +7738,6 @@ copy-webpack-plugin@^10.2.4:
     schema-utils "^4.0.0"
     serialize-javascript "^6.0.0"
 
-copy-webpack-plugin@^5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz#8a889e1dcafa6c91c6cd4be1ad158f1d3823bae2"
-  integrity sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==
-  dependencies:
-    cacache "^12.0.3"
-    find-cache-dir "^2.1.0"
-    glob-parent "^3.1.0"
-    globby "^7.1.1"
-    is-glob "^4.0.1"
-    loader-utils "^1.2.3"
-    minimatch "^3.0.4"
-    normalize-path "^3.0.0"
-    p-limit "^2.2.1"
-    schema-utils "^1.0.0"
-    serialize-javascript "^4.0.0"
-    webpack-log "^2.0.0"
-
-copy-webpack-plugin@^6.0.3:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-6.4.1.tgz#138cd9b436dbca0a6d071720d5414848992ec47e"
-  integrity sha512-MXyPCjdPVx5iiWyl40Va3JGh27bKzOTNY3NjUTrosD2q7dR/cLD0013uqJ3BpFbUjyONINjb6qI7nDIJujrMbA==
-  dependencies:
-    cacache "^15.0.5"
-    fast-glob "^3.2.4"
-    find-cache-dir "^3.3.1"
-    glob-parent "^5.1.1"
-    globby "^11.0.1"
-    loader-utils "^2.0.0"
-    normalize-path "^3.0.0"
-    p-limit "^3.0.2"
-    schema-utils "^3.0.0"
-    serialize-javascript "^5.0.1"
-    webpack-sources "^1.4.3"
-
 copyfiles@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.4.1.tgz#d2dcff60aaad1015f09d0b66e7f0f1c5cd3c5da5"
@@ -7855,7 +7784,7 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cosmiconfig@^5.0.0, cosmiconfig@^5.1.0:
+cosmiconfig@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
   integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
@@ -7976,61 +7905,11 @@ css-color-converter@^2.0.0:
     color-name "^1.1.4"
     css-unit-converter "^1.1.2"
 
-css-color-names@0.0.4, css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
-
-css-declaration-sorter@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
-  integrity sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
-  dependencies:
-    postcss "^7.0.1"
-    timsort "^0.3.0"
-
 css-declaration-sorter@^6.2.2:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz#bfd2f6f50002d6a3ae779a87d3a0c5d5b10e0f02"
   integrity sha512-Ufadglr88ZLsrvS11gjeu/40Lw74D9Am/Jpr3LlYm5Q4ZP5KdlUhG+6u2EjyXeZcxmZ2h1ebCKngDjolpeLHpg==
 
-css-loader@^3.4.1:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645"
-  integrity sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==
-  dependencies:
-    camelcase "^5.3.1"
-    cssesc "^3.0.0"
-    icss-utils "^4.1.1"
-    loader-utils "^1.2.3"
-    normalize-path "^3.0.0"
-    postcss "^7.0.32"
-    postcss-modules-extract-imports "^2.0.0"
-    postcss-modules-local-by-default "^3.0.2"
-    postcss-modules-scope "^2.2.0"
-    postcss-modules-values "^3.0.0"
-    postcss-value-parser "^4.1.0"
-    schema-utils "^2.7.0"
-    semver "^6.3.0"
-
-css-loader@^4.2.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.3.0.tgz#c888af64b2a5b2e85462c72c0f4a85c7e2e0821e"
-  integrity sha512-rdezjCjScIrsL8BSYszgT4s476IcNKt6yX69t0pHjJVnPUTDpn4WfIpDQTN3wCJvUvfsz/mFjuGOekf3PY3NUg==
-  dependencies:
-    camelcase "^6.0.0"
-    cssesc "^3.0.0"
-    icss-utils "^4.1.1"
-    loader-utils "^2.0.0"
-    postcss "^7.0.32"
-    postcss-modules-extract-imports "^2.0.0"
-    postcss-modules-local-by-default "^3.0.3"
-    postcss-modules-scope "^2.2.0"
-    postcss-modules-values "^3.0.0"
-    postcss-value-parser "^4.1.0"
-    schema-utils "^2.7.1"
-    semver "^7.3.2"
-
 css-loader@^5.2.6:
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.7.tgz#9b9f111edf6fb2be5dc62525644cbc9c232064ae"
@@ -8073,12 +7952,7 @@ css-minimizer-webpack-plugin@^3.4.1:
     serialize-javascript "^6.0.0"
     source-map "^0.6.1"
 
-css-select-base-adapter@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
-  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
-
-css-select@^2.0.0, css-select@^4.1.3, css-select@^4.2.1, css-select@^4.3.0, css-select@~1.2.0:
+css-select@^4.1.3, css-select@^4.2.1, css-select@^4.3.0, css-select@~1.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
   integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
@@ -8089,14 +7963,6 @@ css-select@^2.0.0, css-select@^4.1.3, css-select@^4.2.1, css-select@^4.3.0, css-
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
-css-tree@1.0.0-alpha.37:
-  version "1.0.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
-  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
-  dependencies:
-    mdn-data "2.0.4"
-    source-map "^0.6.1"
-
 css-tree@^1.1.2, css-tree@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
@@ -8139,42 +8005,6 @@ cssnano-preset-advanced@^5.3.3:
     postcss-reduce-idents "^5.2.0"
     postcss-zindex "^5.1.0"
 
-cssnano-preset-default@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz#920622b1fc1e95a34e8838203f1397a504f2d3ff"
-  integrity sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==
-  dependencies:
-    css-declaration-sorter "^4.0.1"
-    cssnano-util-raw-cache "^4.0.1"
-    postcss "^7.0.0"
-    postcss-calc "^7.0.1"
-    postcss-colormin "^4.0.3"
-    postcss-convert-values "^4.0.1"
-    postcss-discard-comments "^4.0.2"
-    postcss-discard-duplicates "^4.0.2"
-    postcss-discard-empty "^4.0.1"
-    postcss-discard-overridden "^4.0.1"
-    postcss-merge-longhand "^4.0.11"
-    postcss-merge-rules "^4.0.3"
-    postcss-minify-font-values "^4.0.2"
-    postcss-minify-gradients "^4.0.2"
-    postcss-minify-params "^4.0.2"
-    postcss-minify-selectors "^4.0.2"
-    postcss-normalize-charset "^4.0.1"
-    postcss-normalize-display-values "^4.0.2"
-    postcss-normalize-positions "^4.0.2"
-    postcss-normalize-repeat-style "^4.0.2"
-    postcss-normalize-string "^4.0.2"
-    postcss-normalize-timing-functions "^4.0.2"
-    postcss-normalize-unicode "^4.0.1"
-    postcss-normalize-url "^4.0.1"
-    postcss-normalize-whitespace "^4.0.2"
-    postcss-ordered-values "^4.1.2"
-    postcss-reduce-initial "^4.0.3"
-    postcss-reduce-transforms "^4.0.2"
-    postcss-svgo "^4.0.3"
-    postcss-unique-selectors "^4.0.1"
-
 cssnano-preset-default@^5.2.7:
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.7.tgz#791e3603fb8f1b46717ac53b47e3c418e950f5f3"
@@ -8210,28 +8040,6 @@ cssnano-preset-default@^5.2.7:
     postcss-svgo "^5.1.0"
     postcss-unique-selectors "^5.1.1"
 
-cssnano-util-get-arguments@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
-  integrity sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=
-
-cssnano-util-get-match@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
-  integrity sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=
-
-cssnano-util-raw-cache@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
-  integrity sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==
-  dependencies:
-    postcss "^7.0.0"
-
-cssnano-util-same-parent@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
-  integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
-
 cssnano-utils@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz#95684d08c91511edfc70d2636338ca37ef3a6861"
@@ -8256,7 +8064,7 @@ cssnano@^5.0.6, cssnano@^5.1.7:
     lilconfig "^2.0.3"
     yaml "^1.10.2"
 
-csso@^4.0.2, csso@^4.2.0:
+csso@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
   integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
@@ -9269,7 +9077,7 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
-dir-glob@^2.0.0, dir-glob@^2.2.2:
+dir-glob@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
   integrity sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==
@@ -9539,6 +9347,13 @@ ejs@^2.6.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
+ejs@^3.1.6:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.7.tgz#c544d9c7f715783dd92f0bddcf73a59e6962d006"
+  integrity sha512-BIar7R6abbUxDA3bfXrO4DSgwo8I+fB5/1zgujl3HLLjwd6+9iOnrT+t3grn2qbk9vOgBubXOFwX2m9axoFaGw==
+  dependencies:
+    jake "^10.8.5"
+
 electron-to-chromium@^1.4.118:
   version "1.4.136"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.136.tgz#b6a3595a9c29d6d8f60e092d40ac24f997e4e7ef"
@@ -9734,7 +9549,7 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.2, es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
+es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.0.tgz#b2d526489cceca004588296334726329e0a6bfb6"
   integrity sha512-URbD8tgRthKD3YcC39vbvSDrX23upXnPcnGAjQfgxXF5ID75YcENawc9ZX/9iTP9ptUyfCLIxTTuMYoRfiOVKA==
@@ -10500,7 +10315,7 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.1.1, fast-glob@^3.2.4, fast-glob@^3.2.7, fast-glob@^3.2.9:
+fast-glob@^3.1.1, fast-glob@^3.2.7, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
   integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@@ -10511,7 +10326,7 @@ fast-glob@^3.1.1, fast-glob@^3.2.4, fast-glob@^3.2.7, fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
+fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
@@ -10688,6 +10503,13 @@ file-uri-to-path@1.0.0:
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
   integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
 
+filelist@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.3.tgz#448607750376484932f67ef1b9ff07386b036c83"
+  integrity sha512-LwjCsruLWQULGYKy7TX0OPtrL9kLpojOFKc5VCTxdFTV7w5zbsgqVKfnkKG7Qgjtq50gKfO56hJv88OfcGb70Q==
+  dependencies:
+    minimatch "^5.0.1"
+
 filesize@^3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
@@ -11018,7 +10840,7 @@ fs-extra@^10.1.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
-fs-extra@^4.0.2, fs-extra@^4.0.3:
+fs-extra@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
   integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
@@ -11330,7 +11152,7 @@ github-slugger@^1.4.0:
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
   integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==
 
-glob-parent@^3.1.0, glob-parent@^5.0.0, glob-parent@^5.1.1, glob-parent@^5.1.2, glob-parent@^6.0.1, glob-parent@~5.1.0, glob-parent@~5.1.2:
+glob-parent@^3.1.0, glob-parent@^5.0.0, glob-parent@^5.1.2, glob-parent@^6.0.1, glob-parent@~5.1.0, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -11528,18 +11350,6 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-globby@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
-  integrity sha1-+yzP+UAfhgCUXfral0QMypcrhoA=
-  dependencies:
-    array-union "^1.0.1"
-    dir-glob "^2.0.0"
-    glob "^7.1.2"
-    ignore "^3.3.5"
-    pify "^3.0.0"
-    slash "^1.0.0"
-
 globby@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d"
@@ -11752,7 +11562,7 @@ has-yarn@^2.1.0:
   resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
   integrity sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==
 
-has@^1.0.0, has@^1.0.3:
+has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
@@ -11870,11 +11680,6 @@ he@1.2.0, he@1.2.x, he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-
 history@^4.7.2, history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -11896,11 +11701,6 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoek@4.x.x:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
-  integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==
-
 hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
@@ -11947,16 +11747,6 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-
 html-encoding-sniffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
@@ -11986,19 +11776,6 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html-minifier-terser@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
-  integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
-  dependencies:
-    camel-case "^4.1.1"
-    clean-css "^4.2.3"
-    commander "^4.1.1"
-    he "^1.2.0"
-    param-case "^3.0.3"
-    relateurl "^0.2.7"
-    terser "^4.6.3"
-
 html-minifier-terser@^6.0.2, html-minifier-terser@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
@@ -12035,10 +11812,10 @@ html-void-elements@^1.0.0:
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
   integrity sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==
 
-html-webpack-inline-source-plugin@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/html-webpack-inline-source-plugin/-/html-webpack-inline-source-plugin-0.0.10.tgz#89bd5f761e4f16902aa76a44476eb52831c9f7f0"
-  integrity sha512-0ZNU57u7283vrXSF5a4VDnVOMWiSwypKIp1z/XfXWoVHLA1r3Xmyxx5+Lz+mnthz/UvxL1OAf41w5UIF68Jngw==
+html-webpack-inline-source-plugin@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/html-webpack-inline-source-plugin/-/html-webpack-inline-source-plugin-1.0.0-beta.2.tgz#71a9234c170ef18df6e51f4594a09b540ff03111"
+  integrity sha512-ydsEKdp0tnbmnqRAH2WSSMXerCNYhjes5b79uvP2BU3p6cyk+6ucNMsw5b5xD1QxphgvBBA3QqVmdcpu8QLlRQ==
   dependencies:
     escape-string-regexp "^1.0.5"
     slash "^1.0.0"
@@ -12057,21 +11834,6 @@ html-webpack-plugin@^3.2.0:
     toposort "^1.0.0"
     util.promisify "1.0.0"
 
-html-webpack-plugin@^4.3.0:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.2.tgz#76fc83fa1a0f12dd5f7da0404a54e2699666bc12"
-  integrity sha512-q5oYdzjKUIPQVjOosjgvCHQOv9Ett9CYYHlgvJeXG0qQvdSojnBq4vAdQBwn1+yGveAwHCoe/rMR86ozX3+c2A==
-  dependencies:
-    "@types/html-minifier-terser" "^5.0.0"
-    "@types/tapable" "^1.0.5"
-    "@types/webpack" "^4.41.8"
-    html-minifier-terser "^5.0.1"
-    loader-utils "^1.2.3"
-    lodash "^4.17.20"
-    pretty-error "^2.1.1"
-    tapable "^1.1.3"
-    util.promisify "1.0.0"
-
 html-webpack-plugin@^5.3.1, html-webpack-plugin@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50"
@@ -12285,25 +12047,23 @@ iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@0.6, iconv-lite@^0.6.2:
+iconv-lite@0.6, iconv-lite@^0.6.2, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
-icss-utils@^4.0.0, icss-utils@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
-  integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
-  dependencies:
-    postcss "^7.0.14"
-
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
+idb@^6.1.4:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-6.1.5.tgz#dbc53e7adf1ac7c59f9b2bf56e00b4ea4fce8c7b"
+  integrity sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw==
+
 ieee754@^1.1.13, ieee754@^1.1.4:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -12326,11 +12086,6 @@ ignore-walk@^3.0.1, ignore-walk@^3.0.3:
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^3.3.5:
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
-  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
-
 ignore@^4.0.3, ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -12441,11 +12196,6 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
-indexes-of@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
-  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
-
 indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
@@ -12615,11 +12365,6 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
-is-absolute-url@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
-  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
-
 is-absolute-url@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
@@ -12728,18 +12473,6 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-color-stop@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
-
 is-core-module@^2.1.0, is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.8.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
@@ -13000,11 +12733,6 @@ is-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
   integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
 
-is-resolvable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
-  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
-
 is-root@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
@@ -13136,13 +12864,6 @@ isbinaryfile@^4.0.6:
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.10.tgz#0c5b5e30c2557a2f06febd37b7322946aaee42b3"
   integrity sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==
 
-isemail@3.x.x:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/isemail/-/isemail-3.2.0.tgz#59310a021931a9fb06bbb51e155ce0b3f236832c"
-  integrity sha512-zKqkK+O+dGqevc93KNsbZ/TqTUFd46MwWjYOoMrjIMZ51eU7DtQG3Wmd9SQQT7i7RVnuTPEiYEWHU3MSbxC1Tg==
-  dependencies:
-    punycode "2.x.x"
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -13281,6 +13002,16 @@ istanbul@^0.4.5:
     which "^1.1.1"
     wordwrap "^1.0.0"
 
+jake@^10.8.5:
+  version "10.8.5"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
+  integrity sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==
+  dependencies:
+    async "^3.2.3"
+    chalk "^4.0.2"
+    filelist "^1.0.1"
+    minimatch "^3.0.4"
+
 jest-changed-files@^25.5.0:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-25.5.0.tgz#141cc23567ceb3f534526f8614ba39421383634c"
@@ -14134,15 +13865,6 @@ jju@^1.4.0, jju@~1.4.0:
   resolved "https://registry.yarnpkg.com/jju/-/jju-1.4.0.tgz#a3abe2718af241a2b2904f84a625970f389ae32a"
   integrity sha1-o6vicYryQaKykE+EpiWXDzia4yo=
 
-joi@^11.1.1:
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-11.4.0.tgz#f674897537b625e9ac3d0b7e1604c828ad913ccb"
-  integrity sha512-O7Uw+w/zEWgbL6OcHbyACKSj0PkQeUgmehdoXVSxt92QFCq4+1390Rwh5moI2K/OgC7D8RHRZqHZxT2husMJHA==
-  dependencies:
-    hoek "4.x.x"
-    isemail "3.x.x"
-    topo "2.x.x"
-
 joi@^17.6.0:
   version "17.6.0"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.0.tgz#0bb54f2f006c09a96e75ce687957bd04290054b2"
@@ -14297,7 +14019,7 @@ json-schema-traverse@^1.0.0:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
-json-schema@0.4.0:
+json-schema@0.4.0, json-schema@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
   integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
@@ -14307,19 +14029,12 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stable-stringify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
-  integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
-  dependencies:
-    jsonify "~0.0.0"
-
 json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-json5@2.2.1, json5@2.x, json5@^2.1.2, json5@^2.2.1:
+json5@2.2.1, json5@2.x, json5@^2.1.2, json5@^2.2.0, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
@@ -14352,16 +14067,16 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jsonify@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
-  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
-
 jsonparse@^1.2.0, jsonparse@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
   integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
 
+jsonpointer@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.0.tgz#f802669a524ec4805fa7389eadbc9921d5dc8072"
+  integrity sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg==
+
 jsontoxml@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/jsontoxml/-/jsontoxml-1.0.1.tgz#07fff7f6bfbfa1097d779aec7f041b5046075e70"
@@ -14562,6 +14277,15 @@ karma-webpack@^4.0.2:
     source-map "^0.7.3"
     webpack-dev-middleware "^3.7.0"
 
+karma-webpack@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-5.0.0.tgz#2a2c7b80163fe7ffd1010f83f5507f95ef39f840"
+  integrity sha512-+54i/cd3/piZuP3dr54+NcFeKOPnys5QeM1IY+0SPASwrtHsliXUiCL50iW+K9WWA7RvamC4macvvQ86l3KtaA==
+  dependencies:
+    glob "^7.1.3"
+    minimatch "^3.0.4"
+    webpack-merge "^4.1.5"
+
 karma@^5.0.4:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/karma/-/karma-5.2.3.tgz#3264024219bad2728e92542e0058a2492d7a46e4"
@@ -15044,7 +14768,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash.template@^4.0.2, lodash.template@^4.4.0, lodash.template@^4.5.0:
+lodash.template@^4.0.2, lodash.template@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
   integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
@@ -15225,7 +14949,7 @@ macos-release@^2.2.0:
   resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.5.0.tgz#067c2c88b5f3fb3c56a375b2ec93826220fa1ff2"
   integrity sha512-EIgv+QZ9r+814gjJj0Bt5vSLJLzswGmSUbUpbi9AIr/fsN2IWFBl2NucV9PAiek+U1STK468tEkxmVYUtuAN3g==
 
-magic-string@^0.25.1, magic-string@^0.25.2:
+magic-string@^0.25.0, magic-string@^0.25.1, magic-string@^0.25.2, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
   integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
@@ -15589,11 +15313,6 @@ mdn-data@2.0.14:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
-mdn-data@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
-  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
-
 mdurl@^1.0.0, mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -16077,26 +15796,6 @@ mini-create-react-context@^0.4.0:
     "@babel/runtime" "^7.12.1"
     tiny-warning "^1.0.3"
 
-mini-css-extract-plugin@^0.10.0:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.10.1.tgz#2592c891f965e15750da6a6c0b60740b5b0cb62d"
-  integrity sha512-9B10gZixtNjHerADBrMxPXM5G0uL0CRGMcLRV67I8nd1SKbwJrI0okKUzD+PxKsUZ9Dxt8/hPvtzF0DrRnrOyA==
-  dependencies:
-    loader-utils "^1.1.0"
-    normalize-url "1.9.1"
-    schema-utils "^1.0.0"
-    webpack-sources "^1.1.0"
-
-mini-css-extract-plugin@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
-  integrity sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==
-  dependencies:
-    loader-utils "^1.1.0"
-    normalize-url "1.9.1"
-    schema-utils "^1.0.0"
-    webpack-sources "^1.1.0"
-
 mini-css-extract-plugin@^1.6.1:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz#83172b4fd812f8fc4a09d6f6d16f924f53990ca8"
@@ -16302,7 +16001,7 @@ mkdirp@0.5.5:
   dependencies:
     minimist "^1.2.5"
 
-mkdirp@0.5.x, mkdirp@0.x, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
+mkdirp@0.5.x, mkdirp@0.x, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
   integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
@@ -16744,21 +16443,6 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
-normalize-url@1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
-  integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
-  dependencies:
-    object-assign "^4.0.1"
-    prepend-http "^1.0.0"
-    query-string "^4.1.0"
-    sort-keys "^1.0.0"
-
-normalize-url@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
-  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
-
 normalize-url@^4.1.0:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
@@ -17014,7 +16698,7 @@ object.fromentries@^2.0.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
+object.getownpropertydescriptors@^2.0.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.3.tgz#b223cf38e17fefb97a63c10c91df72ccb386df9e"
   integrity sha512-VdDoCwvJI4QdC6ndjpqFmoL3/+HxffFBbcJzKi5hwLLqqx3mdbedRpfZDdK0SrOSauj8X4GzBvnDZl4vTN7dOw==
@@ -17038,7 +16722,7 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.1.0, object.values@^1.1.5:
+object.values@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
   integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
@@ -17128,13 +16812,14 @@ opn@^5.5.0:
   dependencies:
     is-wsl "^1.1.0"
 
-optimize-css-assets-webpack-plugin@^5.0.3:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.8.tgz#cbccdcf5a6ef61d4f8cc78cf083a67446e5f402a"
-  integrity sha512-mgFS1JdOtEGzD8l+EuISqL57cKO+We9GcoiQEmdCWRqqck+FGNmYJtx9qfAPzEz+lRrlThWMuGDaRkI/yWNx/Q==
+optimize-css-assets-webpack-plugin@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-6.0.1.tgz#7719bceabba1f3891ec3ae04efb81a1cc99cd793"
+  integrity sha512-BshV2UZPfggZLdUfN3zFBbG4sl/DynUI+YCB6fRRDWaqO2OiWN8GPcp4Y0/fEV6B3k9Hzyk3czve3V/8B/SzKQ==
   dependencies:
-    cssnano "^4.1.10"
+    cssnano "^5.0.2"
     last-call-webpack-plugin "^3.0.0"
+    postcss "^8.2.1"
 
 optionator@^0.8.1, optionator@^0.8.3:
   version "0.8.3"
@@ -17225,7 +16910,7 @@ p-limit@^1.1.0:
   dependencies:
     p-try "^1.0.0"
 
-p-limit@^2.0.0, p-limit@^2.2.0, p-limit@^2.2.1:
+p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
   integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
@@ -17391,7 +17076,7 @@ param-case@2.1.x:
   dependencies:
     no-case "^2.2.0"
 
-param-case@^3.0.3, param-case@^3.0.4:
+param-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
   integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
@@ -17685,11 +17370,6 @@ phin@^2.9.1:
   resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
   integrity sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==
 
-picocolors@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
-  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
-
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -17854,15 +17534,6 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-calc@^7.0.1:
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
-  integrity sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==
-  dependencies:
-    postcss "^7.0.27"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.0.2"
-
 postcss-calc@^8.2.3:
   version "8.2.4"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"
@@ -17871,17 +17542,6 @@ postcss-calc@^8.2.3:
     postcss-selector-parser "^6.0.9"
     postcss-value-parser "^4.2.0"
 
-postcss-colormin@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
-  integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
-  dependencies:
-    browserslist "^4.0.0"
-    color "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-colormin@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.3.0.tgz#3cee9e5ca62b2c27e84fce63affc0cfb5901956a"
@@ -17892,14 +17552,6 @@ postcss-colormin@^5.3.0:
     colord "^2.9.1"
     postcss-value-parser "^4.2.0"
 
-postcss-convert-values@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
-  integrity sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-convert-values@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.1.0.tgz#f8d3abe40b4ce4b1470702a0706343eac17e7c10"
@@ -17907,49 +17559,21 @@ postcss-convert-values@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-discard-comments@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
-  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
-  dependencies:
-    postcss "^7.0.0"
-
 postcss-discard-comments@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-5.1.1.tgz#e90019e1a0e5b99de05f63516ce640bd0df3d369"
   integrity sha512-5JscyFmvkUxz/5/+TB3QTTT9Gi9jHkcn8dcmmuN68JQcv3aQg4y88yEHHhwFB52l/NkaJ43O0dbksGMAo49nfQ==
 
-postcss-discard-duplicates@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
-  integrity sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==
-  dependencies:
-    postcss "^7.0.0"
-
 postcss-discard-duplicates@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz#9eb4fe8456706a4eebd6d3b7b777d07bad03e848"
   integrity sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==
 
-postcss-discard-empty@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
-  integrity sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==
-  dependencies:
-    postcss "^7.0.0"
-
 postcss-discard-empty@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz#e57762343ff7f503fe53fca553d18d7f0c369c6c"
   integrity sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==
 
-postcss-discard-overridden@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
-  integrity sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==
-  dependencies:
-    postcss "^7.0.0"
-
 postcss-discard-overridden@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz#7e8c5b53325747e9d90131bb88635282fb4a276e"
@@ -17990,16 +17614,6 @@ postcss-merge-idents@^5.1.1:
     cssnano-utils "^3.1.0"
     postcss-value-parser "^4.2.0"
 
-postcss-merge-longhand@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
-  integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
-  dependencies:
-    css-color-names "0.0.4"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    stylehacks "^4.0.0"
-
 postcss-merge-longhand@^5.1.4:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.4.tgz#0f46f8753989a33260efc47de9a0cdc571f2ec5c"
@@ -18008,36 +17622,16 @@ postcss-merge-longhand@^5.1.4:
     postcss-value-parser "^4.2.0"
     stylehacks "^5.1.0"
 
-postcss-merge-rules@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
-  integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    cssnano-util-same-parent "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-    vendors "^1.0.0"
-
-postcss-merge-rules@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.1.tgz#d327b221cd07540bcc8d9ff84446d8b404d00162"
-  integrity sha512-8wv8q2cXjEuCcgpIB1Xx1pIy8/rhMPIQqYKNzEdyx37m6gpq83mQQdCxgIkFgliyEnKvdwJf/C61vN4tQDq4Ww==
+postcss-merge-rules@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.1.tgz#d327b221cd07540bcc8d9ff84446d8b404d00162"
+  integrity sha512-8wv8q2cXjEuCcgpIB1Xx1pIy8/rhMPIQqYKNzEdyx37m6gpq83mQQdCxgIkFgliyEnKvdwJf/C61vN4tQDq4Ww==
   dependencies:
     browserslist "^4.16.6"
     caniuse-api "^3.0.0"
     cssnano-utils "^3.1.0"
     postcss-selector-parser "^6.0.5"
 
-postcss-minify-font-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
-  integrity sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-minify-font-values@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz#f1df0014a726083d260d3bd85d7385fb89d1f01b"
@@ -18045,16 +17639,6 @@ postcss-minify-font-values@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-minify-gradients@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
-  integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    is-color-stop "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-minify-gradients@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz#f1fe1b4f498134a5068240c2f25d46fcd236ba2c"
@@ -18064,18 +17648,6 @@ postcss-minify-gradients@^5.1.1:
     cssnano-utils "^3.1.0"
     postcss-value-parser "^4.2.0"
 
-postcss-minify-params@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
-  integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    browserslist "^4.0.0"
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    uniqs "^2.0.0"
-
 postcss-minify-params@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-5.1.2.tgz#77e250780c64198289c954884ebe3ee4481c3b1c"
@@ -18085,16 +17657,6 @@ postcss-minify-params@^5.1.2:
     cssnano-utils "^3.1.0"
     postcss-value-parser "^4.2.0"
 
-postcss-minify-selectors@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
-  integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
 postcss-minify-selectors@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.0.tgz#17c2be233e12b28ffa8a421a02fc8b839825536c"
@@ -18102,28 +17664,11 @@ postcss-minify-selectors@^5.2.0:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-modules-extract-imports@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
-  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
-  dependencies:
-    postcss "^7.0.5"
-
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
   integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
 
-postcss-modules-local-by-default@^3.0.2, postcss-modules-local-by-default@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz#bb14e0cc78279d504dbdcbfd7e0ca28993ffbbb0"
-  integrity sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==
-  dependencies:
-    icss-utils "^4.1.1"
-    postcss "^7.0.32"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.1.0"
-
 postcss-modules-local-by-default@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
@@ -18133,14 +17678,6 @@ postcss-modules-local-by-default@^4.0.0:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.1.0"
 
-postcss-modules-scope@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
-  integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
-  dependencies:
-    postcss "^7.0.6"
-    postcss-selector-parser "^6.0.0"
-
 postcss-modules-scope@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
@@ -18148,14 +17685,6 @@ postcss-modules-scope@^3.0.0:
   dependencies:
     postcss-selector-parser "^6.0.4"
 
-postcss-modules-values@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
-  integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
-  dependencies:
-    icss-utils "^4.0.0"
-    postcss "^7.0.6"
-
 postcss-modules-values@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
@@ -18163,27 +17692,11 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
-postcss-normalize-charset@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
-  integrity sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==
-  dependencies:
-    postcss "^7.0.0"
-
 postcss-normalize-charset@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz#9302de0b29094b52c259e9b2cf8dc0879879f0ed"
   integrity sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==
 
-postcss-normalize-display-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
-  integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-normalize-display-values@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz#72abbae58081960e9edd7200fcf21ab8325c3da8"
@@ -18191,16 +17704,6 @@ postcss-normalize-display-values@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-positions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
-  integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-normalize-positions@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-5.1.0.tgz#902a7cb97cf0b9e8b1b654d4a43d451e48966458"
@@ -18208,16 +17711,6 @@ postcss-normalize-positions@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-repeat-style@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
-  integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-normalize-repeat-style@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.0.tgz#f6d6fd5a54f51a741cc84a37f7459e60ef7a6398"
@@ -18225,15 +17718,6 @@ postcss-normalize-repeat-style@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-string@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
-  integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
-  dependencies:
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-normalize-string@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz#411961169e07308c82c1f8c55f3e8a337757e228"
@@ -18241,15 +17725,6 @@ postcss-normalize-string@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-timing-functions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
-  integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-normalize-timing-functions@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz#d5614410f8f0b2388e9f240aa6011ba6f52dafbb"
@@ -18257,15 +17732,6 @@ postcss-normalize-timing-functions@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-unicode@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
-  integrity sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-normalize-unicode@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.0.tgz#3d23aede35e160089a285e27bf715de11dc9db75"
@@ -18274,16 +17740,6 @@ postcss-normalize-unicode@^5.1.0:
     browserslist "^4.16.6"
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-url@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
-  integrity sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==
-  dependencies:
-    is-absolute-url "^2.0.0"
-    normalize-url "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-normalize-url@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz#ed9d88ca82e21abef99f743457d3729a042adcdc"
@@ -18292,14 +17748,6 @@ postcss-normalize-url@^5.1.0:
     normalize-url "^6.0.1"
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-whitespace@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
-  integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-normalize-whitespace@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz#08a1a0d1ffa17a7cc6efe1e6c9da969cc4493cfa"
@@ -18307,15 +17755,6 @@ postcss-normalize-whitespace@^5.1.1:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-ordered-values@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
-  integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-ordered-values@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-5.1.1.tgz#0b41b610ba02906a3341e92cab01ff8ebc598adb"
@@ -18331,16 +17770,6 @@ postcss-reduce-idents@^5.2.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-reduce-initial@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
-  integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-
 postcss-reduce-initial@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz#fc31659ea6e85c492fb2a7b545370c215822c5d6"
@@ -18349,16 +17778,6 @@ postcss-reduce-initial@^5.1.0:
     browserslist "^4.16.6"
     caniuse-api "^3.0.0"
 
-postcss-reduce-transforms@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
-  integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
 postcss-reduce-transforms@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz#333b70e7758b802f3dd0ddfe98bb1ccfef96b6e9"
@@ -18366,16 +17785,7 @@ postcss-reduce-transforms@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-selector-parser@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
-  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
-  dependencies:
-    dot-prop "^5.2.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
@@ -18390,15 +17800,6 @@ postcss-sort-media-queries@^4.2.1:
   dependencies:
     sort-css-media-queries "2.0.4"
 
-postcss-svgo@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
-  integrity sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    svgo "^1.0.0"
-
 postcss-svgo@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
@@ -18407,15 +17808,6 @@ postcss-svgo@^5.1.0:
     postcss-value-parser "^4.2.0"
     svgo "^2.7.0"
 
-postcss-unique-selectors@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
-  integrity sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    postcss "^7.0.0"
-    uniqs "^2.0.0"
-
 postcss-unique-selectors@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz#a9f273d1eacd09e9aa6088f4b0507b18b1b541b6"
@@ -18423,12 +17815,7 @@ postcss-unique-selectors@^5.1.1:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-value-parser@^3.0.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
-postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -18484,11 +17871,6 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
-prepend-http@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
-  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
-
 prepend-http@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
@@ -18504,12 +17886,12 @@ prettier@^1.15.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
-pretty-bytes@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
-  integrity sha1-sr+C5zUNZcbDOqlaqlpPYyf2HNk=
+pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
+  integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
-pretty-error@^2.0.2, pretty-error@^2.1.1:
+pretty-error@^2.0.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
   integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
@@ -18732,16 +18114,16 @@ punycode@1.3.2:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
   integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
 
-punycode@2.x.x, punycode@^2.1.0, punycode@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
 punycode@^1.2.4, punycode@^1.3.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
+punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
 pupa@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.1.1.tgz#f5e8fd4afc2c5d97828faa523549ed8744a20d62"
@@ -18754,7 +18136,7 @@ pure-color@^1.2.0:
   resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
   integrity sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=
 
-q@^1.1.2, q@^1.5.1:
+q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
@@ -18776,14 +18158,6 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
   integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
 
-query-string@^4.1.0:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
-  integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
-  dependencies:
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
 query-string@^6.13.8:
   version "6.14.1"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
@@ -19841,16 +19215,6 @@ rfdc@^1.1.4, rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
   integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
 
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-
 rimraf@2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -19948,6 +19312,16 @@ rollup-plugin-terser@^5.3.0:
     serialize-javascript "^4.0.0"
     terser "^4.6.2"
 
+rollup-plugin-terser@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
+    serialize-javascript "^4.0.0"
+    terser "^5.0.0"
+
 rollup-plugin-transform-tagged-template@^0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/rollup-plugin-transform-tagged-template/-/rollup-plugin-transform-tagged-template-0.0.3.tgz#b18df7931dbc43984a1c81ee2edcc266a9f6844e"
@@ -19983,6 +19357,13 @@ rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
   dependencies:
     estree-walker "^0.6.1"
 
+rollup@^2.43.1:
+  version "2.72.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.72.1.tgz#861c94790537b10008f0ca0fbc60e631aabdd045"
+  integrity sha512-NTc5UGy/NWFGpSqF1lFY8z9Adri6uhyMLI6LvPAXdBKoPRFhIIiBUpt+Qg2awixqO3xvzSijjhnb4+QEZwJmxA==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 rollup@^2.7.6:
   version "2.72.0"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.72.0.tgz#f94280b003bcf9f2f1f2594059a9db5abced371e"
@@ -20099,7 +19480,7 @@ saucelabs@^1.5.0:
   dependencies:
     https-proxy-agent "^2.2.1"
 
-sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
+sax@>=0.6.0, sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -20151,7 +19532,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0, schema-utils@^2.7.1:
+schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
@@ -20279,7 +19660,7 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-serialize-javascript@5.0.1, serialize-javascript@^5.0.1:
+serialize-javascript@5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
   integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==
@@ -20719,13 +20100,6 @@ sort-css-media-queries@2.0.4:
   resolved "https://registry.yarnpkg.com/sort-css-media-queries/-/sort-css-media-queries-2.0.4.tgz#b2badfa519cb4a938acbc6d3aaa913d4949dc908"
   integrity sha512-PAIsEK/XupCQwitjv7XxoMvYhT7EAfyzI3hsy/MyDgTvc+Ft55ctdkctJLOy6cQejaIC+zjpUL4djFVm2ivOOw==
 
-sort-keys@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
-  integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
-  dependencies:
-    is-plain-obj "^1.0.0"
-
 sort-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
@@ -20738,7 +20112,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^1.0.2:
+source-map-js@^1.0.1, source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -20751,6 +20125,15 @@ source-map-loader@^0.2.4:
     async "^2.5.0"
     loader-utils "^1.1.0"
 
+source-map-loader@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-3.0.1.tgz#9ae5edc7c2d42570934be4c95d1ccc6352eba52d"
+  integrity sha512-Vp1UsfyPvgujKQzi4pyDiTOnE3E4H+yHvkVRN3c/9PJmQS4CQJExvcDvaX/D+RV+xQben9HJ56jMJS3CgUeWyA==
+  dependencies:
+    abab "^2.0.5"
+    iconv-lite "^0.6.3"
+    source-map-js "^1.0.1"
+
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -20797,6 +20180,13 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+source-map@^0.8.0-beta.0, source-map@~0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
 source-map@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
@@ -20804,13 +20194,6 @@ source-map@~0.2.0:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@~0.8.0-beta.0:
-  version "0.8.0-beta.0"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
-  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
-  dependencies:
-    whatwg-url "^7.0.0"
-
 sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -21053,11 +20436,6 @@ streamroller@^3.0.8:
     debug "^4.3.4"
     fs-extra "^10.1.0"
 
-strict-uri-encode@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
-  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
-
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
@@ -21179,7 +20557,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-stringify-object@^3.2.2, stringify-object@^3.3.0:
+stringify-object@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
   integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
@@ -21245,13 +20623,10 @@ strip-bom@^4.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
   integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
 
-strip-comments@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
-  integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==
-  dependencies:
-    babel-extract-comments "^1.0.0"
-    babel-plugin-transform-object-rest-spread "^6.26.0"
+strip-comments@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b"
+  integrity sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==
 
 strip-eof@^1.0.0:
   version "1.0.0"
@@ -21313,13 +20688,10 @@ style-loader@^0.13.2:
   dependencies:
     loader-utils "^1.0.2"
 
-style-loader@^1.1.2:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e"
-  integrity sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^2.7.0"
+style-loader@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
+  integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
 style-to-object@0.3.0, style-to-object@^0.3.0:
   version "0.3.0"
@@ -21328,15 +20700,6 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-stylehacks@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
-  integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
 stylehacks@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.0.tgz#a40066490ca0caca04e96c6b02153ddc39913520"
@@ -21424,25 +20787,6 @@ svg-parser@^2.0.2:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
-svgo@^1.0.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
-  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
-  dependencies:
-    chalk "^2.4.1"
-    coa "^2.0.2"
-    css-select "^2.0.0"
-    css-select-base-adapter "^0.1.1"
-    css-tree "1.0.0-alpha.37"
-    csso "^4.0.2"
-    js-yaml "^3.13.1"
-    mkdirp "~0.5.1"
-    object.values "^1.1.0"
-    sax "~1.2.4"
-    stable "^0.1.8"
-    unquote "~1.1.1"
-    util.promisify "~1.0.0"
-
 svgo@^2.5.0, svgo@^2.7.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
@@ -21542,6 +20886,11 @@ temp-dir@^1.0.0:
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
   integrity sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=
 
+temp-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
+  integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
+
 temp-write@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/temp-write/-/temp-write-3.4.0.tgz#8cff630fb7e9da05f047c74ce4ce4d685457d492"
@@ -21554,6 +20903,16 @@ temp-write@^3.4.0:
     temp-dir "^1.0.0"
     uuid "^3.0.1"
 
+tempy@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.6.0.tgz#65e2c35abc06f1124a97f387b08303442bde59f3"
+  integrity sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==
+  dependencies:
+    is-stream "^2.0.0"
+    temp-dir "^2.0.0"
+    type-fest "^0.16.0"
+    unique-string "^2.0.0"
+
 terminal-link@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
@@ -21577,21 +20936,6 @@ terser-webpack-plugin@^1.4.3:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
-terser-webpack-plugin@^3.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-3.1.0.tgz#91e6d39571460ed240c0cf69d295bcf30ebf98cb"
-  integrity sha512-cjdZte66fYkZ65rQ2oJfrdCAkkhJA7YLYk5eGOcGCSGlq0ieZupRdjedSQXYknMPo2IveQL+tPdrxUkERENCFA==
-  dependencies:
-    cacache "^15.0.5"
-    find-cache-dir "^3.3.1"
-    jest-worker "^26.2.1"
-    p-limit "^3.0.2"
-    schema-utils "^2.6.6"
-    serialize-javascript "^4.0.0"
-    source-map "^0.6.1"
-    terser "^4.8.0"
-    webpack-sources "^1.4.3"
-
 terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.1.tgz#0320dcc270ad5372c1e8993fabbd927929773e54"
@@ -21603,7 +20947,7 @@ terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.3.1:
     source-map "^0.6.1"
     terser "^5.7.2"
 
-terser@^4.1.2, terser@^4.6.2, terser@^4.6.3, terser@^4.8.0:
+terser@^4.1.2, terser@^4.6.2:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
   integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
@@ -21612,7 +20956,7 @@ terser@^4.1.2, terser@^4.6.2, terser@^4.6.3, terser@^4.8.0:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-terser@^5.10.0, terser@^5.6.0, terser@^5.7.2:
+terser@^5.0.0, terser@^5.10.0, terser@^5.6.0, terser@^5.7.2:
   version "5.13.1"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.13.1.tgz#66332cdc5a01b04a224c9fad449fc1a18eaa1799"
   integrity sha512-hn4WKOfwnwbYfe48NgrQjqNOH9jzLqRcIfbYytOXCOv46LBfWr9bDS17MQqOi+BWGD0sJK3Sj5NC/gJjiojaoA==
@@ -21710,7 +21054,7 @@ timm@^1.6.1:
   resolved "https://registry.yarnpkg.com/timm/-/timm-1.7.1.tgz#96bab60c7d45b5a10a8a4d0f0117c6b7e5aff76f"
   integrity sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw==
 
-timsort@^0.3.0, timsort@~0.3.0:
+timsort@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
@@ -21829,13 +21173,6 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
-topo@2.x.x:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"
-  integrity sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=
-  dependencies:
-    hoek "4.x.x"
-
 toposort@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
@@ -21972,28 +21309,6 @@ ts-loader@^4.0.1:
     micromatch "^3.1.4"
     semver "^5.0.1"
 
-ts-loader@^5.3.1:
-  version "5.4.5"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-5.4.5.tgz#a0c1f034b017a9344cef0961bfd97cc192492b8b"
-  integrity sha512-XYsjfnRQCBum9AMRZpk2rTYSVpdZBpZK+kDh0TeT3kxmQNBDVIeUjdPjY5RZry4eIAb8XHc4gYSUiUWPYvzSRw==
-  dependencies:
-    chalk "^2.3.0"
-    enhanced-resolve "^4.0.0"
-    loader-utils "^1.0.2"
-    micromatch "^3.1.4"
-    semver "^5.0.1"
-
-ts-loader@^6.2.1:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.2.2.tgz#dffa3879b01a1a1e0a4b85e2b8421dc0dfff1c58"
-  integrity sha512-HDo5kXZCBml3EUPcc7RlZOV/JGlLHwppTLEHb3SHnr5V7NXD4klMEkrhJe5wgRbaWsSXi+Y1SIBN/K9B6zWGWQ==
-  dependencies:
-    chalk "^2.3.0"
-    enhanced-resolve "^4.0.0"
-    loader-utils "^1.0.2"
-    micromatch "^4.0.0"
-    semver "^6.0.0"
-
 ts-loader@^7.0.1, ts-loader@^7.0.2:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-7.0.5.tgz#789338fb01cb5dc0a33c54e50558b34a73c9c4c5"
@@ -22016,6 +21331,16 @@ ts-loader@^8.0.0, ts-loader@^8.1.0:
     micromatch "^4.0.0"
     semver "^7.3.4"
 
+ts-loader@^9.3.0:
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.0.tgz#980f4dbfb60e517179e15e10ed98e454b132159f"
+  integrity sha512-2kLLAdAD+FCKijvGKi9sS0OzoqxLCF3CxHpok7rVgCZ5UldRzH0TkbwG9XECKjBzHsAewntC5oDaI/FwKzEUog==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
+
 ts-node@^8.8.2, ts-node@^8.9.1:
   version "8.10.2"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.10.2.tgz#eee03764633b1234ddd37f8db9ec10b75ec7fb8d"
@@ -22095,6 +21420,11 @@ type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5:
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
+type-fest@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860"
+  integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
+
 type-fest@^0.18.0:
   version "0.18.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
@@ -22150,10 +21480,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.6.2, "typescript@~3.9.0 || ~4.3.5 || ^4.6.2", typescript@~4.3.2, typescript@~4.6.3:
-  version "4.6.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"
-  integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==
+typescript@4.7.0-beta, typescript@^4.7.0-beta, "typescript@~3.9.0 || ~4.3.5 || ^4.6.2", typescript@~4.3.2, typescript@~4.6.3:
+  version "4.7.0-dev.20220506"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.0-dev.20220506.tgz#1930c24322b9289188f51a1d2a4acc43eb2bf3ed"
+  integrity sha512-2rqSNvYKymAAknVcWTgZLsDGWkr/PZZ9s7K/zGHa8vhAmTPwoFSyc7YxRHYHe2UcxbovTkMg/g8yCQ/VHsk9oQ==
 
 typical@^4.0.0:
   version "4.0.0"
@@ -22286,16 +21616,6 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
-uniq@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
-  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
-
-uniqs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
-  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
-
 unique-filename@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
@@ -22439,11 +21759,6 @@ unpipe@1.0.0, unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-unquote@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
-
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
@@ -22580,16 +21895,6 @@ util.promisify@1.0.0:
     define-properties "^1.1.2"
     object.getownpropertydescriptors "^2.0.3"
 
-util.promisify@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
-  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.2"
-    has-symbols "^1.0.1"
-    object.getownpropertydescriptors "^2.1.0"
-
 util@0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
@@ -22697,11 +22002,6 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
-vendors@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
-  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
-
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
@@ -22916,7 +22216,7 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
-webpack-bundle-analyzer@^3.0.3, webpack-bundle-analyzer@^3.5.2, webpack-bundle-analyzer@^3.6.0:
+webpack-bundle-analyzer@^3.5.2:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.9.0.tgz#f6f94db108fb574e415ad313de41a2707d33ef3c"
   integrity sha512-Ob8amZfCm3rMB1ScjQVlbYYUEJyEjdEtQ92jqiFUYt5VkEeO2v5UMbv49P/gnmCZm3A6yaFQzCBvpZqN4MUsdA==
@@ -22950,7 +22250,7 @@ webpack-bundle-analyzer@^4.5.0:
     sirv "^1.0.7"
     ws "^7.3.1"
 
-webpack-cli@^3.1.2, webpack-cli@^3.2.1, webpack-cli@^3.3.10, webpack-cli@^3.3.11:
+webpack-cli@^3.2.1, webpack-cli@^3.3.11:
   version "3.3.12"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.12.tgz#94e9ada081453cd0aa609c99e500012fd3ad2d4a"
   integrity sha512-NVWBaz9k839ZH/sinurM+HcDvJOTXwSjYp1ku+5XKeOC03z8v5QitnK/x+lAxGXFyhdayoIf/GOpv85z3/xPag==
@@ -22967,7 +22267,7 @@ webpack-cli@^3.1.2, webpack-cli@^3.2.1, webpack-cli@^3.3.10, webpack-cli@^3.3.11
     v8-compile-cache "^2.1.1"
     yargs "^13.3.2"
 
-webpack-cli@^4.6.0:
+webpack-cli@^4.6.0, webpack-cli@^4.9.2:
   version "4.9.2"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.9.2.tgz#77c1adaea020c3f9e2db8aad8ea78d235c83659d"
   integrity sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==
@@ -23088,7 +22388,7 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
-webpack-merge@^4.2.2:
+webpack-merge@^4.1.5:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
   integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
@@ -23352,132 +22652,174 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
 
-workbox-background-sync@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-3.6.3.tgz#6609a0fac9eda336a7c52e6aa227ba2ae532ad94"
-  integrity sha512-ypLo0B6dces4gSpaslmDg5wuoUWrHHVJfFWwl1udvSylLdXvnrfhFfriCS42SNEe5lsZtcNZF27W/SMzBlva7Q==
+workbox-background-sync@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.3.tgz#7c66c1836aeca6f3762dc48d17a1852a33b3168c"
+  integrity sha512-0DD/V05FAcek6tWv9XYj2w5T/plxhDSpclIcAGjA/b7t/6PdaRkQ7ZgtAX6Q/L7kV7wZ8uYRJUoH11VjNipMZw==
   dependencies:
-    workbox-core "^3.6.3"
+    idb "^6.1.4"
+    workbox-core "6.5.3"
 
-workbox-broadcast-cache-update@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-broadcast-cache-update/-/workbox-broadcast-cache-update-3.6.3.tgz#3f5dff22ada8c93e397fb38c1dc100606a7b92da"
-  integrity sha512-pJl4lbClQcvp0SyTiEw0zLSsVYE1RDlCPtpKnpMjxFtu8lCFTAEuVyzxp9w7GF4/b3P4h5nyQ+q7V9mIR7YzGg==
+workbox-broadcast-update@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.3.tgz#fc2ad79cf507e22950cda9baf1e9a0ccc43f31bc"
+  integrity sha512-4AwCIA5DiDrYhlN+Miv/fp5T3/whNmSL+KqhTwRBTZIL6pvTgE4lVuRzAt1JltmqyMcQ3SEfCdfxczuI4kwFQg==
   dependencies:
-    workbox-core "^3.6.3"
+    workbox-core "6.5.3"
 
-workbox-build@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-3.6.3.tgz#77110f9f52dc5d82fa6c1c384c6f5e2225adcbd8"
-  integrity sha512-w0clZ/pVjL8VXy6GfthefxpEXs0T8uiRuopZSFVQ8ovfbH6c6kUpEh6DcYwm/Y6dyWPiCucdyAZotgjz+nRz8g==
+workbox-build@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.3.tgz#38e3f286d63d2745bff4d1478bb3a6ab5c8b1170"
+  integrity sha512-8JNHHS7u13nhwIYCDea9MNXBNPHXCs5KDZPKI/ZNTr3f4sMGoD7hgFGecbyjX1gw4z6e9bMpMsOEJNyH5htA/w==
+  dependencies:
+    "@apideck/better-ajv-errors" "^0.3.1"
+    "@babel/core" "^7.11.1"
+    "@babel/preset-env" "^7.11.0"
+    "@babel/runtime" "^7.11.2"
+    "@rollup/plugin-babel" "^5.2.0"
+    "@rollup/plugin-node-resolve" "^11.2.1"
+    "@rollup/plugin-replace" "^2.4.1"
+    "@surma/rollup-plugin-off-main-thread" "^2.2.3"
+    ajv "^8.6.0"
+    common-tags "^1.8.0"
+    fast-json-stable-stringify "^2.1.0"
+    fs-extra "^9.0.1"
+    glob "^7.1.6"
+    lodash "^4.17.20"
+    pretty-bytes "^5.3.0"
+    rollup "^2.43.1"
+    rollup-plugin-terser "^7.0.0"
+    source-map "^0.8.0-beta.0"
+    stringify-object "^3.3.0"
+    strip-comments "^2.0.1"
+    tempy "^0.6.0"
+    upath "^1.2.0"
+    workbox-background-sync "6.5.3"
+    workbox-broadcast-update "6.5.3"
+    workbox-cacheable-response "6.5.3"
+    workbox-core "6.5.3"
+    workbox-expiration "6.5.3"
+    workbox-google-analytics "6.5.3"
+    workbox-navigation-preload "6.5.3"
+    workbox-precaching "6.5.3"
+    workbox-range-requests "6.5.3"
+    workbox-recipes "6.5.3"
+    workbox-routing "6.5.3"
+    workbox-strategies "6.5.3"
+    workbox-streams "6.5.3"
+    workbox-sw "6.5.3"
+    workbox-window "6.5.3"
+
+workbox-cacheable-response@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.3.tgz#b1f8c2bc599a7be8f7e3c262535629c558738e47"
+  integrity sha512-6JE/Zm05hNasHzzAGKDkqqgYtZZL2H06ic2GxuRLStA4S/rHUfm2mnLFFXuHAaGR1XuuYyVCEey1M6H3PdZ7SQ==
   dependencies:
-    babel-runtime "^6.26.0"
-    common-tags "^1.4.0"
-    fs-extra "^4.0.2"
-    glob "^7.1.2"
-    joi "^11.1.1"
-    lodash.template "^4.4.0"
-    pretty-bytes "^4.0.2"
-    stringify-object "^3.2.2"
-    strip-comments "^1.0.2"
-    workbox-background-sync "^3.6.3"
-    workbox-broadcast-cache-update "^3.6.3"
-    workbox-cache-expiration "^3.6.3"
-    workbox-cacheable-response "^3.6.3"
-    workbox-core "^3.6.3"
-    workbox-google-analytics "^3.6.3"
-    workbox-navigation-preload "^3.6.3"
-    workbox-precaching "^3.6.3"
-    workbox-range-requests "^3.6.3"
-    workbox-routing "^3.6.3"
-    workbox-strategies "^3.6.3"
-    workbox-streams "^3.6.3"
-    workbox-sw "^3.6.3"
-
-workbox-cache-expiration@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-cache-expiration/-/workbox-cache-expiration-3.6.3.tgz#4819697254a72098a13f94b594325a28a1e90372"
-  integrity sha512-+ECNph/6doYx89oopO/UolYdDmQtGUgo8KCgluwBF/RieyA1ZOFKfrSiNjztxOrGJoyBB7raTIOlEEwZ1LaHoA==
-  dependencies:
-    workbox-core "^3.6.3"
-
-workbox-cacheable-response@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-3.6.3.tgz#869f1a68fce9063f6869ddbf7fa0a2e0a868b3aa"
-  integrity sha512-QpmbGA9SLcA7fklBLm06C4zFg577Dt8u3QgLM0eMnnbaVv3rhm4vbmDpBkyTqvgK/Ly8MBDQzlXDtUCswQwqqg==
-  dependencies:
-    workbox-core "^3.6.3"
-
-workbox-core@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-3.6.3.tgz#69abba70a4f3f2a5c059295a6f3b7c62bd00e15c"
-  integrity sha512-cx9cx0nscPkIWs8Pt98HGrS9/aORuUcSkWjG25GqNWdvD/pSe7/5Oh3BKs0fC+rUshCiyLbxW54q0hA+GqZeSQ==
-
-workbox-google-analytics@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-3.6.3.tgz#99df2a3d70d6e91961e18a6752bac12e91fbf727"
-  integrity sha512-RQBUo/6SXtIaQTRFj4RQZ9e1gAl7D8oS5S+Hi173Kk70/BgJjzPwXpC5A249Jv5YfkCOLMQCeF9A27BiD0b0ig==
-  dependencies:
-    workbox-background-sync "^3.6.3"
-    workbox-core "^3.6.3"
-    workbox-routing "^3.6.3"
-    workbox-strategies "^3.6.3"
-
-workbox-navigation-preload@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-3.6.3.tgz#a2c34eb7c17e7485b795125091215f757b3c4964"
-  integrity sha512-dd26xTX16DUu0i+MhqZK/jQXgfIitu0yATM4jhRXEmpMqQ4MxEeNvl2CgjDMOHBnCVMax+CFZQWwxMx/X/PqCw==
-  dependencies:
-    workbox-core "^3.6.3"
-
-workbox-precaching@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-3.6.3.tgz#5341515e9d5872c58ede026a31e19bafafa4e1c1"
-  integrity sha512-aBqT66BuMFviPTW6IpccZZHzpA8xzvZU2OM1AdhmSlYDXOJyb1+Z6blVD7z2Q8VNtV1UVwQIdImIX+hH3C3PIw==
-  dependencies:
-    workbox-core "^3.6.3"
-
-workbox-range-requests@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-3.6.3.tgz#3cc21cba31f2dd8c43c52a196bcc8f6cdbcde803"
-  integrity sha512-R+yLWQy7D9aRF9yJ3QzwYnGFnGDhMUij4jVBUVtkl67oaVoP1ymZ81AfCmfZro2kpPRI+vmNMfxxW531cqdx8A==
-  dependencies:
-    workbox-core "^3.6.3"
-
-workbox-routing@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-3.6.3.tgz#659cd8f9274986cfa98fda0d050de6422075acf7"
-  integrity sha512-bX20i95OKXXQovXhFOViOK63HYmXvsIwZXKWbSpVeKToxMrp0G/6LZXnhg82ijj/S5yhKNRf9LeGDzaqxzAwMQ==
-  dependencies:
-    workbox-core "^3.6.3"
-
-workbox-strategies@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-3.6.3.tgz#11a0dc249a7bc23d3465ec1322d28fa6643d64a0"
-  integrity sha512-Pg5eulqeKet2y8j73Yw6xTgLdElktcWExGkzDVCGqfV9JCvnGuEpz5eVsCIK70+k4oJcBCin9qEg3g3CwEIH3g==
-  dependencies:
-    workbox-core "^3.6.3"
-
-workbox-streams@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-3.6.3.tgz#beaea5d5b230239836cc327b07d471aa6101955a"
-  integrity sha512-rqDuS4duj+3aZUYI1LsrD2t9hHOjwPqnUIfrXSOxSVjVn83W2MisDF2Bj+dFUZv4GalL9xqErcFW++9gH+Z27w==
-  dependencies:
-    workbox-core "^3.6.3"
-
-workbox-sw@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-3.6.3.tgz#278ea4c1831b92bbe2d420da8399176c4b2789ff"
-  integrity sha512-IQOUi+RLhvYCiv80RP23KBW/NTtIvzvjex28B8NW1jOm+iV4VIu3VXKXTA6er5/wjjuhmtB28qEAUqADLAyOSg==
-
-workbox-webpack-plugin@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-3.6.3.tgz#a807bb891b4e4e3c808df07e58f17de2d5ba6182"
-  integrity sha512-RwmKjc7HFHUFHoOlKoZUq9349u0QN3F8W5tZZU0vc1qsBZDINWXRiIBCAKvo/Njgay5sWz7z4I2adnyTo97qIQ==
+    workbox-core "6.5.3"
+
+workbox-core@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.3.tgz#bca038a9ef0d7a634a6db2a60f45313ed22ac249"
+  integrity sha512-Bb9ey5n/M9x+l3fBTlLpHt9ASTzgSGj6vxni7pY72ilB/Pb3XtN+cZ9yueboVhD5+9cNQrC9n/E1fSrqWsUz7Q==
+
+workbox-expiration@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.3.tgz#efc0811f371a2ede1052b9de1c4f072b71d50503"
+  integrity sha512-jzYopYR1zD04ZMdlbn/R2Ik6ixiXbi15c9iX5H8CTi6RPDz7uhvMLZPKEndZTpfgmUk8mdmT9Vx/AhbuCl5Sqw==
   dependencies:
-    babel-runtime "^6.26.0"
-    json-stable-stringify "^1.0.1"
-    workbox-build "^3.6.3"
+    idb "^6.1.4"
+    workbox-core "6.5.3"
+
+workbox-google-analytics@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.3.tgz#cc8c3a61f449131660a4ed2f5362d9a3599b18fe"
+  integrity sha512-3GLCHotz5umoRSb4aNQeTbILETcrTVEozSfLhHSBaegHs1PnqCmN0zbIy2TjTpph2AGXiNwDrWGF0AN+UgDNTw==
+  dependencies:
+    workbox-background-sync "6.5.3"
+    workbox-core "6.5.3"
+    workbox-routing "6.5.3"
+    workbox-strategies "6.5.3"
+
+workbox-navigation-preload@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.3.tgz#81b74f598b11aa07e2cf1c21af7a826a4f0f70b3"
+  integrity sha512-bK1gDFTc5iu6lH3UQ07QVo+0ovErhRNGvJJO/1ngknT0UQ702nmOUhoN9qE5mhuQSrnK+cqu7O7xeaJ+Rd9Tmg==
+  dependencies:
+    workbox-core "6.5.3"
+
+workbox-precaching@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.3.tgz#c870312b2ef901d790ab9e48da084e776c62af47"
+  integrity sha512-sjNfgNLSsRX5zcc63H/ar/hCf+T19fRtTqvWh795gdpghWb5xsfEkecXEvZ8biEi1QD7X/ljtHphdaPvXDygMQ==
+  dependencies:
+    workbox-core "6.5.3"
+    workbox-routing "6.5.3"
+    workbox-strategies "6.5.3"
+
+workbox-range-requests@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.3.tgz#e624ac82ff266a5e4f236d055797def07949d941"
+  integrity sha512-pGCP80Bpn/0Q0MQsfETSfmtXsQcu3M2QCJwSFuJ6cDp8s2XmbUXkzbuQhCUzKR86ZH2Vex/VUjb2UaZBGamijA==
+  dependencies:
+    workbox-core "6.5.3"
+
+workbox-recipes@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.3.tgz#15beac9d8ae7a3a1c100218094a824b4dd3fd59a"
+  integrity sha512-IcgiKYmbGiDvvf3PMSEtmwqxwfQ5zwI7OZPio3GWu4PfehA8jI8JHI3KZj+PCfRiUPZhjQHJ3v1HbNs+SiSkig==
+  dependencies:
+    workbox-cacheable-response "6.5.3"
+    workbox-core "6.5.3"
+    workbox-expiration "6.5.3"
+    workbox-precaching "6.5.3"
+    workbox-routing "6.5.3"
+    workbox-strategies "6.5.3"
+
+workbox-routing@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.3.tgz#a0a699d8cc90b5692bd3df24679acbbda3913777"
+  integrity sha512-DFjxcuRAJjjt4T34RbMm3MCn+xnd36UT/2RfPRfa8VWJGItGJIn7tG+GwVTdHmvE54i/QmVTJepyAGWtoLPTmg==
+  dependencies:
+    workbox-core "6.5.3"
+
+workbox-strategies@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.3.tgz#4bea9a48fee16cf43766e0d8138296773c8a9783"
+  integrity sha512-MgmGRrDVXs7rtSCcetZgkSZyMpRGw8HqL2aguszOc3nUmzGZsT238z/NN9ZouCxSzDu3PQ3ZSKmovAacaIhu1w==
+  dependencies:
+    workbox-core "6.5.3"
+
+workbox-streams@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.3.tgz#b6860290031caa7d0e46ad7142315c94359c780b"
+  integrity sha512-vN4Qi8o+b7zj1FDVNZ+PlmAcy1sBoV7SC956uhqYvZ9Sg1fViSbOpydULOssVJ4tOyKRifH/eoi6h99d+sJ33w==
+  dependencies:
+    workbox-core "6.5.3"
+    workbox-routing "6.5.3"
+
+workbox-sw@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.3.tgz#cd2f0c086f4496acd25774ed02c48504189bebdd"
+  integrity sha512-BQBzm092w+NqdIEF2yhl32dERt9j9MDGUTa2Eaa+o3YKL4Qqw55W9yQC6f44FdAHdAJrJvp0t+HVrfh8AiGj8A==
+
+workbox-webpack-plugin@^6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.3.tgz#c37bb323be4952311565c07db51054fe59c87d73"
+  integrity sha512-Es8Xr02Gi6Kc3zaUwR691ZLy61hz3vhhs5GztcklQ7kl5k2qAusPh0s6LF3wEtlpfs9ZDErnmy5SErwoll7jBA==
+  dependencies:
+    fast-json-stable-stringify "^2.1.0"
+    pretty-bytes "^5.4.1"
+    upath "^1.2.0"
+    webpack-sources "^1.4.3"
+    workbox-build "6.5.3"
+
+workbox-window@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.3.tgz#4ade70056cb73477ef1cd8fea7cfd0ecbd825c7f"
+  integrity sha512-GnJbx1kcKXDtoJBVZs/P7ddP0Yt52NNy4nocjBpYPiRhMqTpJCNrSL+fGHZ/i/oP6p/vhE8II0sA6AZGKGnssw==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+    workbox-core "6.5.3"
 
 worker-farm@^1.7.0:
   version "1.7.0"

From 1baeaa07f22ce386172c5b2ad796702add7341e3 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Thu, 12 May 2022 14:35:36 -0400
Subject: [PATCH 104/135] chore: modernize package.json and rollup for vNext
 (#5966)

* chore: fast-element package and build modernization

* chore: fast-foundation package and build modernization

* chore: package updates for fast-ssr

* chore: remove rollup of router

* chore: update rollup to enable package exports

* Change files

* chore: remove rollup of react-wrapper

* Change files

* chore: update package.json metadata

* Change files

* chore: ensure default export last for fast-element

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-3fc811a4-c423-4fe9-8f8c-edc0eb9fb9d7.json |  7 ++
 ...-724a6301-1fa9-40d5-b3ff-6884135e43bf.json |  7 ++
 ...-a03c05b3-8265-4661-905b-ac07aa694dfb.json |  7 ++
 ...-e538a7cf-3ae9-40ad-90c2-9e2c28be59db.json |  7 ++
 ...-e2abdadf-c61c-4c28-a79f-fb212d987813.json |  7 ++
 ...-7c20770e-9360-4c50-82ac-642cf2254822.json |  7 ++
 ...-1b8ce00c-e352-4437-9d9f-79ce91500507.json |  7 ++
 ...-0d53d6be-6f49-4ddf-9456-4254b704edeb.json |  7 ++
 .../fast-figma-plugin-msft/package.json       |  4 +-
 .../package.json                              |  4 +-
 .../utilities/fast-animation/package.json     |  4 +-
 .../utilities/fast-benchmarks/package.json    |  4 +-
 packages/utilities/fast-colors/package.json   |  4 +-
 .../utilities/fast-eslint-rules/package.json  |  5 +-
 .../utilities/fast-react-wrapper/package.json | 13 +---
 .../fast-react-wrapper/rollup.config.js       | 57 ---------------
 .../utilities/fast-web-utilities/package.json |  4 +-
 .../web-components/fast-element/package.json  | 22 ++++--
 .../fast-element/rollup.config.js             | 65 ++++++++---------
 .../fast-element/src/index.debug.ts           |  2 +
 .../fast-element/src/index.rollup.debug.ts    |  3 +
 .../fast-element/src/index.rollup.ts          |  2 +
 .../fast-foundation/package.json              | 13 ++--
 .../fast-foundation/rollup.config.js          | 73 +++++++++++--------
 .../fast-foundation/src/index.rollup.debug.ts |  4 +
 .../src/{index-rollup.ts => index.rollup.ts}  |  3 +-
 .../web-components/fast-router/package.json   | 13 +---
 .../fast-router/rollup.config.js              | 57 ---------------
 .../fast-router/src/index-rollup.ts           |  2 -
 packages/web-components/fast-ssr/package.json |  4 +-
 yarn.lock                                     | 14 +++-
 31 files changed, 208 insertions(+), 224 deletions(-)
 create mode 100644 change/@microsoft-eslint-config-fast-dna-3fc811a4-c423-4fe9-8f8c-edc0eb9fb9d7.json
 create mode 100644 change/@microsoft-fast-animation-724a6301-1fa9-40d5-b3ff-6884135e43bf.json
 create mode 100644 change/@microsoft-fast-colors-a03c05b3-8265-4661-905b-ac07aa694dfb.json
 create mode 100644 change/@microsoft-fast-element-e538a7cf-3ae9-40ad-90c2-9e2c28be59db.json
 create mode 100644 change/@microsoft-fast-foundation-e2abdadf-c61c-4c28-a79f-fb212d987813.json
 create mode 100644 change/@microsoft-fast-react-wrapper-7c20770e-9360-4c50-82ac-642cf2254822.json
 create mode 100644 change/@microsoft-fast-router-1b8ce00c-e352-4437-9d9f-79ce91500507.json
 create mode 100644 change/@microsoft-fast-web-utilities-0d53d6be-6f49-4ddf-9456-4254b704edeb.json
 delete mode 100644 packages/utilities/fast-react-wrapper/rollup.config.js
 create mode 100644 packages/web-components/fast-element/src/index.debug.ts
 create mode 100644 packages/web-components/fast-element/src/index.rollup.debug.ts
 create mode 100644 packages/web-components/fast-element/src/index.rollup.ts
 create mode 100644 packages/web-components/fast-foundation/src/index.rollup.debug.ts
 rename packages/web-components/fast-foundation/src/{index-rollup.ts => index.rollup.ts} (59%)
 delete mode 100644 packages/web-components/fast-router/rollup.config.js
 delete mode 100644 packages/web-components/fast-router/src/index-rollup.ts

diff --git a/change/@microsoft-eslint-config-fast-dna-3fc811a4-c423-4fe9-8f8c-edc0eb9fb9d7.json b/change/@microsoft-eslint-config-fast-dna-3fc811a4-c423-4fe9-8f8c-edc0eb9fb9d7.json
new file mode 100644
index 00000000000..6ec4dda8d46
--- /dev/null
+++ b/change/@microsoft-eslint-config-fast-dna-3fc811a4-c423-4fe9-8f8c-edc0eb9fb9d7.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update package.json metadata",
+  "packageName": "@microsoft/eslint-config-fast-dna",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-animation-724a6301-1fa9-40d5-b3ff-6884135e43bf.json b/change/@microsoft-fast-animation-724a6301-1fa9-40d5-b3ff-6884135e43bf.json
new file mode 100644
index 00000000000..5aa50900851
--- /dev/null
+++ b/change/@microsoft-fast-animation-724a6301-1fa9-40d5-b3ff-6884135e43bf.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update package.json metadata",
+  "packageName": "@microsoft/fast-animation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-colors-a03c05b3-8265-4661-905b-ac07aa694dfb.json b/change/@microsoft-fast-colors-a03c05b3-8265-4661-905b-ac07aa694dfb.json
new file mode 100644
index 00000000000..25a774f3508
--- /dev/null
+++ b/change/@microsoft-fast-colors-a03c05b3-8265-4661-905b-ac07aa694dfb.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update package.json metadata",
+  "packageName": "@microsoft/fast-colors",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-element-e538a7cf-3ae9-40ad-90c2-9e2c28be59db.json b/change/@microsoft-fast-element-e538a7cf-3ae9-40ad-90c2-9e2c28be59db.json
new file mode 100644
index 00000000000..13e0754057b
--- /dev/null
+++ b/change/@microsoft-fast-element-e538a7cf-3ae9-40ad-90c2-9e2c28be59db.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: fast-element package and build modernization",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-e2abdadf-c61c-4c28-a79f-fb212d987813.json b/change/@microsoft-fast-foundation-e2abdadf-c61c-4c28-a79f-fb212d987813.json
new file mode 100644
index 00000000000..eeaca8d9850
--- /dev/null
+++ b/change/@microsoft-fast-foundation-e2abdadf-c61c-4c28-a79f-fb212d987813.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: fast-foundation package and build modernization",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-react-wrapper-7c20770e-9360-4c50-82ac-642cf2254822.json b/change/@microsoft-fast-react-wrapper-7c20770e-9360-4c50-82ac-642cf2254822.json
new file mode 100644
index 00000000000..7e491a616d5
--- /dev/null
+++ b/change/@microsoft-fast-react-wrapper-7c20770e-9360-4c50-82ac-642cf2254822.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: remove rollup of react-wrapper",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-router-1b8ce00c-e352-4437-9d9f-79ce91500507.json b/change/@microsoft-fast-router-1b8ce00c-e352-4437-9d9f-79ce91500507.json
new file mode 100644
index 00000000000..0c4e38aedb5
--- /dev/null
+++ b/change/@microsoft-fast-router-1b8ce00c-e352-4437-9d9f-79ce91500507.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: remove rollup of router",
+  "packageName": "@microsoft/fast-router",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-web-utilities-0d53d6be-6f49-4ddf-9456-4254b704edeb.json b/change/@microsoft-fast-web-utilities-0d53d6be-6f49-4ddf-9456-4254b704edeb.json
new file mode 100644
index 00000000000..a4677da3213
--- /dev/null
+++ b/change/@microsoft-fast-web-utilities-0d53d6be-6f49-4ddf-9456-4254b704edeb.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update package.json metadata",
+  "packageName": "@microsoft/fast-web-utilities",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/tooling/fast-figma-plugin-msft/package.json b/packages/tooling/fast-figma-plugin-msft/package.json
index 807d8b5cb99..1007d71eb69 100644
--- a/packages/tooling/fast-figma-plugin-msft/package.json
+++ b/packages/tooling/fast-figma-plugin-msft/package.json
@@ -15,7 +15,8 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "packages/tooling/fast-figma-plugin-msft"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
@@ -24,6 +25,7 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.12.13",
diff --git a/packages/tooling/fast-vscode-syntax-highlighting/package.json b/packages/tooling/fast-vscode-syntax-highlighting/package.json
index 6593deba917..b3eadb4736f 100755
--- a/packages/tooling/fast-vscode-syntax-highlighting/package.json
+++ b/packages/tooling/fast-vscode-syntax-highlighting/package.json
@@ -6,6 +6,7 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "version": "0.1.0",
   "license": "MIT",
   "engines": {
@@ -40,7 +41,8 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/microsoft/fast.git"
+    "url": "https://github.com/microsoft/fast.git",
+    "directory": "packages/tooling/fast-vscode-syntax-highlighting"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
diff --git a/packages/utilities/fast-animation/package.json b/packages/utilities/fast-animation/package.json
index 77ddd617669..49d5cd0eb17 100644
--- a/packages/utilities/fast-animation/package.json
+++ b/packages/utilities/fast-animation/package.json
@@ -6,10 +6,12 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "packages/utilities/fast-animation"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
diff --git a/packages/utilities/fast-benchmarks/package.json b/packages/utilities/fast-benchmarks/package.json
index d4b88544d13..c805713f8db 100644
--- a/packages/utilities/fast-benchmarks/package.json
+++ b/packages/utilities/fast-benchmarks/package.json
@@ -8,10 +8,12 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "packages/utilities/fast-benchmarks"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
diff --git a/packages/utilities/fast-colors/package.json b/packages/utilities/fast-colors/package.json
index 76df4b17a96..68b97c92df6 100644
--- a/packages/utilities/fast-colors/package.json
+++ b/packages/utilities/fast-colors/package.json
@@ -7,10 +7,12 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "packages/utilities/fast-colors"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
diff --git a/packages/utilities/fast-eslint-rules/package.json b/packages/utilities/fast-eslint-rules/package.json
index b60ccb4a9c9..2f8587e4c02 100644
--- a/packages/utilities/fast-eslint-rules/package.json
+++ b/packages/utilities/fast-eslint-rules/package.json
@@ -7,6 +7,7 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "keywords": [
     "eslint",
     "typescript"
@@ -14,13 +15,13 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/microsoft/fast.git"
+    "url": "git+https://github.com/microsoft/fast.git",
+    "directory": "packages/utilities/fast-eslint-rules"
   },
   "bugs": {
     "url": "https://github.com/microsoft/fast/issues"
   },
   "main": ".eslintrc.js",
-  "homepage": "https://github.com/Microsoft/fast-eslint-rules#readme",
   "beachball": {
     "disallowedChangeTypes": []
   },
diff --git a/packages/utilities/fast-react-wrapper/package.json b/packages/utilities/fast-react-wrapper/package.json
index bf0fa9583bd..06fb21da2a6 100644
--- a/packages/utilities/fast-react-wrapper/package.json
+++ b/packages/utilities/fast-react-wrapper/package.json
@@ -7,10 +7,12 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "packages/utilities/fast-react-wrapper"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
@@ -23,7 +25,7 @@
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",
     "doc:ci": "api-extractor run",
-    "build": "tsc -p ./tsconfig.json && yarn rollup -c && yarn doc",
+    "build": "tsc -p ./tsconfig.json && yarn doc",
     "dev": "tsc -p ./tsconfig.json -w",
     "tdd": "yarn dev & yarn test-chrome:watch",
     "prepare": "yarn clean:dist && yarn build",
@@ -70,13 +72,6 @@
     "prettier": "2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "rollup": "^2.7.6",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-transform-tagged-template": "^0.0.3",
-    "rollup-plugin-typescript2": "^0.27.0",
     "source-map": "^0.7.3",
     "source-map-loader": "^3.0.1",
     "ts-loader": "^9.3.0",
diff --git a/packages/utilities/fast-react-wrapper/rollup.config.js b/packages/utilities/fast-react-wrapper/rollup.config.js
deleted file mode 100644
index e0647c9ddca..00000000000
--- a/packages/utilities/fast-react-wrapper/rollup.config.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import commonJS from "rollup-plugin-commonjs";
-import filesize from "rollup-plugin-filesize";
-import resolve from "rollup-plugin-node-resolve";
-import { terser } from "rollup-plugin-terser";
-import transformTaggedTemplate from "rollup-plugin-transform-tagged-template";
-import typescript from "rollup-plugin-typescript2";
-import {
-    transformCSSFragment,
-    transformHTMLFragment,
-} from "../../../build/transform-fragments.js";
-
-const parserOptions = {
-    sourceType: "module",
-};
-
-export default [
-    {
-        context: "this",
-        input: "src/index-rollup.ts",
-        output: [
-            {
-                file: "dist/fast-react-wrapper.js",
-                format: "esm",
-            },
-            {
-                file: "dist/fast-react-wrapper.min.js",
-                format: "esm",
-                plugins: [terser()],
-            },
-        ],
-        plugins: [
-            resolve(),
-            commonJS(),
-            typescript({
-                tsconfigOverride: {
-                    compilerOptions: {
-                        declaration: false,
-                    },
-                },
-            }),
-            transformTaggedTemplate({
-                tagsToProcess: ["css"],
-                transformer: transformCSSFragment,
-                parserOptions,
-            }),
-            transformTaggedTemplate({
-                tagsToProcess: ["html"],
-                transformer: transformHTMLFragment,
-                parserOptions,
-            }),
-            filesize({
-                showMinifiedSize: false,
-                showBrotliSize: true,
-            }),
-        ],
-    },
-];
diff --git a/packages/utilities/fast-web-utilities/package.json b/packages/utilities/fast-web-utilities/package.json
index 4f4ea304bf0..a7bc4c944e3 100644
--- a/packages/utilities/fast-web-utilities/package.json
+++ b/packages/utilities/fast-web-utilities/package.json
@@ -7,10 +7,12 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "packages/utilities/fast-web-utilities"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index fdacaee0bfd..51be45fe044 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -6,10 +6,12 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "packages/web-components/fast-element"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
@@ -20,8 +22,17 @@
   "exports": {
     ".": {
       "types": "./dist/fast-element.d.ts",
+      "production": "./dist/esm/index.js",
+      "development": "./dist/esm/index.debug.js",
       "default": "./dist/esm/index.js"
-
+    },
+    "./polyfills.js": {
+      "types": "./dist/dts/polyfills.d.ts",
+      "default": "./dist/esm/polyfills.js"
+    },
+    "./debug.js": {
+      "types": "./dist/dts/debug.d.ts",
+      "default": "./dist/esm/debug.js"
     }
   },
   "unpkg": "dist/fast-element.min.js",
@@ -83,11 +94,10 @@
     "karma-webpack": "^4.0.2",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
-    "rollup": "^2.7.6",
+    "rollup": "^2.71.1",
     "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-transform-tagged-template": "^0.0.3",
-    "rollup-plugin-typescript2": "^0.27.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "@rollup/plugin-typescript": "^8.3.2",
     "source-map": "^0.7.3",
     "source-map-loader": "^0.2.4",
     "ts-loader": "^7.0.2",
diff --git a/packages/web-components/fast-element/rollup.config.js b/packages/web-components/fast-element/rollup.config.js
index 0bf491c43ac..26903582298 100644
--- a/packages/web-components/fast-element/rollup.config.js
+++ b/packages/web-components/fast-element/rollup.config.js
@@ -1,21 +1,23 @@
-import commonJS from "rollup-plugin-commonjs";
 import filesize from "rollup-plugin-filesize";
-import resolve from "rollup-plugin-node-resolve";
 import { terser } from "rollup-plugin-terser";
-import transformTaggedTemplate from "rollup-plugin-transform-tagged-template";
-import typescript from "rollup-plugin-typescript2";
-import {
-    transformCSSFragment,
-    transformHTMLFragment,
-} from "../../../build/transform-fragments.js";
+import typescript from "@rollup/plugin-typescript";
 
-const parserOptions = {
-    sourceType: "module",
-};
+const plugins = [
+    typescript({
+        compilerOptions: {
+            declaration: false,
+            declarationDir: undefined,
+        },
+    }),
+    filesize({
+        showMinifiedSize: false,
+        showBrotliSize: true,
+    }),
+];
 
 export default [
     {
-        input: "src/index.ts",
+        input: "src/index.rollup.ts",
         output: [
             {
                 file: "dist/fast-element.js",
@@ -27,30 +29,21 @@ export default [
                 plugins: [terser()],
             },
         ],
-        plugins: [
-            resolve(),
-            commonJS(),
-            typescript({
-                tsconfigOverride: {
-                    compilerOptions: {
-                        declaration: false,
-                    },
-                },
-            }),
-            transformTaggedTemplate({
-                tagsToProcess: ["css"],
-                transformer: transformCSSFragment,
-                parserOptions,
-            }),
-            transformTaggedTemplate({
-                tagsToProcess: ["html"],
-                transformer: transformHTMLFragment,
-                parserOptions,
-            }),
-            filesize({
-                showMinifiedSize: false,
-                showBrotliSize: true,
-            }),
+        plugins,
+    },
+    {
+        input: "src/index.rollup.debug.ts",
+        output: [
+            {
+                file: "dist/fast-element.debug.js",
+                format: "esm",
+            },
+            {
+                file: "dist/fast-element.debug.min.js",
+                format: "esm",
+                plugins: [terser()],
+            },
         ],
+        plugins,
     },
 ];
diff --git a/packages/web-components/fast-element/src/index.debug.ts b/packages/web-components/fast-element/src/index.debug.ts
new file mode 100644
index 00000000000..e175ff23b20
--- /dev/null
+++ b/packages/web-components/fast-element/src/index.debug.ts
@@ -0,0 +1,2 @@
+import "./debug.js";
+export * from "./index.js";
diff --git a/packages/web-components/fast-element/src/index.rollup.debug.ts b/packages/web-components/fast-element/src/index.rollup.debug.ts
new file mode 100644
index 00000000000..3ad67807d7e
--- /dev/null
+++ b/packages/web-components/fast-element/src/index.rollup.debug.ts
@@ -0,0 +1,3 @@
+import "./polyfills.js";
+import "./debug.js";
+export * from "./index.js";
diff --git a/packages/web-components/fast-element/src/index.rollup.ts b/packages/web-components/fast-element/src/index.rollup.ts
new file mode 100644
index 00000000000..41f9da0d2f1
--- /dev/null
+++ b/packages/web-components/fast-element/src/index.rollup.ts
@@ -0,0 +1,2 @@
+import "./polyfills.js";
+export * from "./index.js";
diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
index fe120f6de2f..bb17e8d7439 100644
--- a/packages/web-components/fast-foundation/package.json
+++ b/packages/web-components/fast-foundation/package.json
@@ -7,10 +7,12 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "packages/web-components/fast-foundation"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
@@ -89,13 +91,12 @@
     "karma-webpack": "^4.0.2",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
-    "rollup": "^2.7.6",
-    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup": "^2.71.1",
     "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "rollup-plugin-transform-tagged-template": "^0.0.3",
-    "rollup-plugin-typescript2": "^0.27.0",
     "source-map": "^0.7.3",
     "source-map-loader": "^0.2.4",
     "ts-loader": "^7.0.2",
diff --git a/packages/web-components/fast-foundation/rollup.config.js b/packages/web-components/fast-foundation/rollup.config.js
index d5ad8cd481f..ac28472916a 100644
--- a/packages/web-components/fast-foundation/rollup.config.js
+++ b/packages/web-components/fast-foundation/rollup.config.js
@@ -1,22 +1,45 @@
-import commonJS from "rollup-plugin-commonjs";
 import filesize from "rollup-plugin-filesize";
-import resolve from "rollup-plugin-node-resolve";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
 import { terser } from "rollup-plugin-terser";
 import transformTaggedTemplate from "rollup-plugin-transform-tagged-template";
-import typescript from "rollup-plugin-typescript2";
+import typescript from "@rollup/plugin-typescript";
 import {
     transformCSSFragment,
     transformHTMLFragment,
-} from "../../../build/transform-fragments";
+} from "../../../build/transform-fragments.js";
 
 const parserOptions = {
     sourceType: "module",
 };
 
+const plugins = [
+    nodeResolve(),
+    typescript({
+        compilerOptions: {
+            declaration: false,
+            declarationDir: undefined,
+        },
+    }),
+    transformTaggedTemplate({
+        tagsToProcess: ["css"],
+        transformer: transformCSSFragment,
+        parserOptions,
+    }),
+    transformTaggedTemplate({
+        tagsToProcess: ["html"],
+        transformer: transformHTMLFragment,
+        parserOptions,
+    }),
+    filesize({
+        showMinifiedSize: false,
+        showBrotliSize: true,
+    }),
+];
+
 export default [
     {
         context: "this",
-        input: "src/index-rollup.ts",
+        input: "src/index.rollup.ts",
         output: [
             {
                 file: "dist/fast-foundation.js",
@@ -28,30 +51,22 @@ export default [
                 plugins: [terser()],
             },
         ],
-        plugins: [
-            resolve(),
-            commonJS(),
-            typescript({
-                tsconfigOverride: {
-                    compilerOptions: {
-                        declaration: false,
-                    },
-                },
-            }),
-            transformTaggedTemplate({
-                tagsToProcess: ["css"],
-                transformer: transformCSSFragment,
-                parserOptions,
-            }),
-            transformTaggedTemplate({
-                tagsToProcess: ["html"],
-                transformer: transformHTMLFragment,
-                parserOptions,
-            }),
-            filesize({
-                showMinifiedSize: false,
-                showBrotliSize: true,
-            }),
+        plugins,
+    },
+    {
+        context: "this",
+        input: "src/index.rollup.debug.ts",
+        output: [
+            {
+                file: "dist/fast-foundation.debug.js",
+                format: "esm",
+            },
+            {
+                file: "dist/fast-foundation.debug.min.js",
+                format: "esm",
+                plugins: [terser()],
+            },
         ],
+        plugins,
     },
 ];
diff --git a/packages/web-components/fast-foundation/src/index.rollup.debug.ts b/packages/web-components/fast-foundation/src/index.rollup.debug.ts
new file mode 100644
index 00000000000..09cf4f56145
--- /dev/null
+++ b/packages/web-components/fast-foundation/src/index.rollup.debug.ts
@@ -0,0 +1,4 @@
+import "@microsoft/fast-element/polyfills.js";
+import "@microsoft/fast-element/debug.js";
+export * from "@microsoft/fast-element";
+export * from "./index.js";
diff --git a/packages/web-components/fast-foundation/src/index-rollup.ts b/packages/web-components/fast-foundation/src/index.rollup.ts
similarity index 59%
rename from packages/web-components/fast-foundation/src/index-rollup.ts
rename to packages/web-components/fast-foundation/src/index.rollup.ts
index c7726b959e7..714c93365ae 100644
--- a/packages/web-components/fast-foundation/src/index-rollup.ts
+++ b/packages/web-components/fast-foundation/src/index.rollup.ts
@@ -1,2 +1,3 @@
-export * from "./index.js";
+import "@microsoft/fast-element/polyfills.js";
 export * from "@microsoft/fast-element";
+export * from "./index.js";
diff --git a/packages/web-components/fast-router/package.json b/packages/web-components/fast-router/package.json
index bf494f409f5..b15061e0aec 100644
--- a/packages/web-components/fast-router/package.json
+++ b/packages/web-components/fast-router/package.json
@@ -7,10 +7,12 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "packages/web-components/fast-router"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
@@ -23,7 +25,7 @@
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",
     "doc:ci": "api-extractor run",
-    "build": "tsc -p ./tsconfig.json && yarn rollup -c && yarn doc",
+    "build": "tsc -p ./tsconfig.json && yarn doc",
     "dev": "tsc -p ./tsconfig.json -w",
     "tdd": "yarn dev & yarn test-chrome:watch",
     "prepare": "yarn clean:dist && yarn build",
@@ -68,13 +70,6 @@
     "karma-webpack": "^4.0.2",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
-    "rollup": "^2.7.6",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-transform-tagged-template": "^0.0.3",
-    "rollup-plugin-typescript2": "^0.27.0",
     "source-map": "^0.7.3",
     "source-map-loader": "^0.2.4",
     "ts-loader": "^7.0.2",
diff --git a/packages/web-components/fast-router/rollup.config.js b/packages/web-components/fast-router/rollup.config.js
deleted file mode 100644
index 3a35f05e48b..00000000000
--- a/packages/web-components/fast-router/rollup.config.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import commonJS from "rollup-plugin-commonjs";
-import filesize from "rollup-plugin-filesize";
-import resolve from "rollup-plugin-node-resolve";
-import { terser } from "rollup-plugin-terser";
-import transformTaggedTemplate from "rollup-plugin-transform-tagged-template";
-import typescript from "rollup-plugin-typescript2";
-import {
-    transformCSSFragment,
-    transformHTMLFragment,
-} from "../../../build/transform-fragments.js";
-
-const parserOptions = {
-    sourceType: "module",
-};
-
-export default [
-    {
-        context: "this",
-        input: "src/index-rollup.ts",
-        output: [
-            {
-                file: "dist/fast-router.js",
-                format: "esm",
-            },
-            {
-                file: "dist/fast-router.min.js",
-                format: "esm",
-                plugins: [terser()],
-            },
-        ],
-        plugins: [
-            resolve(),
-            commonJS(),
-            typescript({
-                tsconfigOverride: {
-                    compilerOptions: {
-                        declaration: false,
-                    },
-                },
-            }),
-            transformTaggedTemplate({
-                tagsToProcess: ["css"],
-                transformer: transformCSSFragment,
-                parserOptions,
-            }),
-            transformTaggedTemplate({
-                tagsToProcess: ["html"],
-                transformer: transformHTMLFragment,
-                parserOptions,
-            }),
-            filesize({
-                showMinifiedSize: false,
-                showBrotliSize: true,
-            }),
-        ],
-    },
-];
diff --git a/packages/web-components/fast-router/src/index-rollup.ts b/packages/web-components/fast-router/src/index-rollup.ts
deleted file mode 100644
index c7726b959e7..00000000000
--- a/packages/web-components/fast-router/src/index-rollup.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./index.js";
-export * from "@microsoft/fast-element";
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index 004d04cadbb..d968dba6b5d 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -6,10 +6,12 @@
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
   },
+  "homepage": "https://www.fast.design/",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
+    "url": "git+https://github.com/Microsoft/fast.git",
+    "directory": "packages/web-components/fast-ssr"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
diff --git a/yarn.lock b/yarn.lock
index 0678059f4f7..b054f574d18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3863,7 +3863,7 @@
     is-module "^1.0.0"
     resolve "^1.19.0"
 
-"@rollup/plugin-node-resolve@^13.1.3":
+"@rollup/plugin-node-resolve@^13.1.3", "@rollup/plugin-node-resolve@^13.3.0":
   version "13.3.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.3.0.tgz#da1c5c5ce8316cef96a2f823d111c1e4e498801c"
   integrity sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==
@@ -3883,6 +3883,14 @@
     "@rollup/pluginutils" "^3.1.0"
     magic-string "^0.25.7"
 
+"@rollup/plugin-typescript@^8.3.2":
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.3.2.tgz#e1b719e2ed3e752bbc092001656c48378f2d15f0"
+  integrity sha512-MtgyR5LNHZr3GyN0tM7gNO9D0CS+Y+vflS4v/PHmrX17JCkHUYKvQ5jN5o3cz1YKllM3duXUqu3yOHwMPUxhDg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    resolve "^1.17.0"
+
 "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -19312,7 +19320,7 @@ rollup-plugin-terser@^5.3.0:
     serialize-javascript "^4.0.0"
     terser "^4.6.2"
 
-rollup-plugin-terser@^7.0.0:
+rollup-plugin-terser@^7.0.0, rollup-plugin-terser@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
   integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
@@ -19357,7 +19365,7 @@ rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^2.43.1:
+rollup@^2.43.1, rollup@^2.71.1:
   version "2.72.1"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.72.1.tgz#861c94790537b10008f0ca0fbc60e631aabdd045"
   integrity sha512-NTc5UGy/NWFGpSqF1lFY8z9Adri6uhyMLI6LvPAXdBKoPRFhIIiBUpt+Qg2awixqO3xvzSijjhnb4+QEZwJmxA==

From 3bc27582712d3de43f3b520db4650c5f1b3b19a0 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Fri, 13 May 2022 16:00:49 -0400
Subject: [PATCH 105/135] refactor: separate update queue from DOM and fix
 architectural layers (#5972)

* refactor: separate update queue from DOM and fix architectural layers

* fix: update fast-foundation to not use deprecated APIs

* fix: update fast-ssr to not use deprecated APIs

* fix: update fast-react-wrapper to not use deprecated APIs

* fix: update fast-website to not use deprecated APIs

* Change files

* chore: re-enable deprecated APIs after package updates

* docs: fix some API comment typos in the update queue docs

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-3a8ab9d7-d5fb-4e05-abe6-afc934737ac1.json |   7 +
 ...-c0af75dd-e94b-4000-b0ed-0921f6208ce2.json |   7 +
 ...-ea4834af-cf1c-4719-9912-e0f70b074157.json |   7 +
 .../fast-react-wrapper/src/index.spec.tsx     |   6 +-
 .../fast-element/docs/api-report.md           |  16 ++-
 .../fast-element/src/components/attributes.ts |   5 +-
 .../src/components/controller.spec.ts         |   6 +-
 .../src/components/fast-definitions.spec.ts   |   3 +-
 .../web-components/fast-element/src/index.ts  |  32 +++--
 .../src/observation/array-observer.ts         |   9 +-
 .../src/observation/observable.spec.ts        |  52 +++----
 .../src/observation/observable.ts             |   4 +-
 .../update-queue.spec.ts}                     | 128 ++++++++---------
 .../{dom.ts => observation/update-queue.ts}   | 133 +++++++-----------
 .../fast-element/src/styles/css-directive.ts  |  14 ++
 .../fast-element/src/styles/element-styles.ts |   7 +
 .../fast-element/src/styles/styles.spec.ts    |   7 +-
 .../src/templating/binding.spec.ts            |  20 +--
 .../fast-element/src/templating/binding.ts    |   2 +-
 .../src/templating/children.spec.ts           |  10 +-
 .../src/templating/compiler.spec.ts           |   4 +-
 .../fast-element/src/templating/dom.ts        |  54 +++++++
 .../src/templating/html-directive.ts          |  17 ++-
 .../src/templating/repeat.spec.ts             |  28 ++--
 .../src/templating/slotted.spec.ts            |   8 +-
 .../src/accordion/accordion.spec.ts           |   8 +-
 .../anchored-region/anchored-region.spec.ts   |   6 +-
 .../src/anchored-region/anchored-region.ts    |   4 +-
 .../src/breadcrumb/breadcrumb.spec.ts         |   6 +-
 .../fast-foundation/src/button/button.spec.ts |  10 +-
 .../src/calendar/calendar.spec.ts             |   6 +-
 .../src/checkbox/checkbox.spec.ts             |  14 +-
 .../src/combobox/combobox.spec.ts             |  28 ++--
 .../fast-foundation/src/combobox/combobox.ts  |   6 +-
 .../src/data-grid/data-grid-row.spec.ts       |   6 +-
 .../src/data-grid/data-grid.spec.ts           |  28 ++--
 .../src/data-grid/data-grid.ts                |   8 +-
 .../src/design-system/design-system.spec.ts   |  12 +-
 .../design-token/custom-property-manager.ts   |  18 +--
 .../src/design-token/design-token.spec.ts     |  86 +++++------
 .../fast-foundation/src/dialog/dialog.spec.ts |  26 ++--
 .../fast-foundation/src/dialog/dialog.ts      |   4 +-
 .../src/directives/reflect-attributes.spec.ts |  18 +--
 .../src/disclosure/disclosure.spec.ts         |  16 +--
 .../src/divider/divider.spec.ts               |   8 +-
 .../src/flipper/flipper.spec.ts               |   8 +-
 .../form-associated/form-associated.spec.ts   |  16 +--
 .../src/form-associated/form-associated.ts    |   6 +-
 .../horizontal-scroll.spec.ts                 |  62 ++++----
 .../horizontal-scroll/horizontal-scroll.ts    |   4 +-
 .../src/listbox-option/listbox-option.spec.ts |  12 +-
 .../src/listbox/listbox.element.ts            |   9 +-
 .../src/listbox/listbox.spec.ts               |  28 ++--
 .../src/menu-item/menu-item.spec.ts           |  20 +--
 .../src/menu-item/menu-item.ts                |   9 +-
 .../fast-foundation/src/menu/menu.spec.ts     |  58 ++++----
 .../fast-foundation/src/menu/menu.ts          |   4 +-
 .../src/number-field/number-field.spec.ts     |  30 ++--
 .../src/number-field/number-field.ts          |   4 +-
 .../fast-foundation/src/picker/picker.spec.ts |  33 ++---
 .../fast-foundation/src/picker/picker.ts      |  22 +--
 .../src/radio-group/radio-group.spec.ts       |  22 +--
 .../fast-foundation/src/radio/radio.spec.ts   |  14 +-
 .../fast-foundation/src/search/search.ts      |   9 +-
 .../fast-foundation/src/select/select.spec.ts |  36 ++---
 .../fast-foundation/src/select/select.ts      |   6 +-
 .../src/slider-label/slider-label.spec.ts     |   4 +-
 .../fast-foundation/src/slider/slider.spec.ts |  14 +-
 .../fast-foundation/src/switch/switch.spec.ts |  14 +-
 .../fast-foundation/src/tabs/tabs.spec.ts     |  16 +--
 .../src/testing/fixture.spec.ts               |   4 +-
 .../src/text-field/text-field.ts              |   9 +-
 .../src/toolbar/toolbar.spec.ts               |   6 +-
 .../src/tooltip/tooltip.spec.ts               |   9 +-
 .../fast-foundation/src/tooltip/tooltip.ts    |   4 +-
 .../src/tree-item/tree-item.spec.ts           |  38 ++---
 .../src/tree-view/tree-view.spec.ts           |  20 +--
 .../src/tree-view/tree-view.ts                |   4 +-
 .../src/utilities/composed-contains.spec.ts   |   6 +-
 .../web-components/fast-ssr/src/exports.ts    |   4 +-
 .../app/components/fast-frame/fast-frame.ts   |  19 +--
 81 files changed, 795 insertions(+), 692 deletions(-)
 create mode 100644 change/@microsoft-fast-element-3a8ab9d7-d5fb-4e05-abe6-afc934737ac1.json
 create mode 100644 change/@microsoft-fast-foundation-c0af75dd-e94b-4000-b0ed-0921f6208ce2.json
 create mode 100644 change/@microsoft-fast-react-wrapper-ea4834af-cf1c-4719-9912-e0f70b074157.json
 rename packages/web-components/fast-element/src/{dom.spec.ts => observation/update-queue.spec.ts} (83%)
 rename packages/web-components/fast-element/src/{dom.ts => observation/update-queue.ts} (50%)
 create mode 100644 packages/web-components/fast-element/src/templating/dom.ts

diff --git a/change/@microsoft-fast-element-3a8ab9d7-d5fb-4e05-abe6-afc934737ac1.json b/change/@microsoft-fast-element-3a8ab9d7-d5fb-4e05-abe6-afc934737ac1.json
new file mode 100644
index 00000000000..efb64f67613
--- /dev/null
+++ b/change/@microsoft-fast-element-3a8ab9d7-d5fb-4e05-abe6-afc934737ac1.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "refactor: separate update queue from DOM and fix architectural layers",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-c0af75dd-e94b-4000-b0ed-0921f6208ce2.json b/change/@microsoft-fast-foundation-c0af75dd-e94b-4000-b0ed-0921f6208ce2.json
new file mode 100644
index 00000000000..b8cd2c5f78e
--- /dev/null
+++ b/change/@microsoft-fast-foundation-c0af75dd-e94b-4000-b0ed-0921f6208ce2.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update fast-foundation to not use deprecated APIs",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-react-wrapper-ea4834af-cf1c-4719-9912-e0f70b074157.json b/change/@microsoft-fast-react-wrapper-ea4834af-cf1c-4719-9912-e0f70b074157.json
new file mode 100644
index 00000000000..f756806dcc6
--- /dev/null
+++ b/change/@microsoft-fast-react-wrapper-ea4834af-cf1c-4719-9912-e0f70b074157.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update fast-react-wrapper to not use deprecated APIs",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/utilities/fast-react-wrapper/src/index.spec.tsx b/packages/utilities/fast-react-wrapper/src/index.spec.tsx
index ba6939580a3..6489fb1388b 100644
--- a/packages/utilities/fast-react-wrapper/src/index.spec.tsx
+++ b/packages/utilities/fast-react-wrapper/src/index.spec.tsx
@@ -1,4 +1,4 @@
-import { attr, customElement, DOM, FASTElement, html, nullableNumberConverter, observable } from '@microsoft/fast-element';
+import { attr, customElement, DOM, FASTElement, html, nullableNumberConverter, observable, Updates } from '@microsoft/fast-element';
 import React from "react";
 import ReactDOM from "react-dom";
 import { uniqueElementName } from '@microsoft/fast-foundation/testing';
@@ -298,7 +298,7 @@ for (const scenario of scenarios) {
         rnum: 5,
       });
 
-      await DOM.nextUpdate();
+      await Updates.next();
 
       const firstEl = el;
       expect(el.rbool).equal(true);
@@ -315,7 +315,7 @@ for (const scenario of scenarios) {
         rnum: 10,
       });
 
-      await DOM.nextUpdate();
+      await Updates.next();
 
       expect(firstEl).equal(el);
       expect(el.rbool).equal(false);
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 3825ee9cbad..18552a5dd10 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -273,10 +273,8 @@ export type DefaultBindingOptions = {
 
 // @public
 export const DOM: Readonly<{
-    supportsAdoptedStyleSheets: boolean;
-    setUpdateMode: (isAsync: boolean) => void;
     queueUpdate: (callable: Callable) => void;
-    nextUpdate(): Promise<void>;
+    nextUpdate: () => Promise<void>;
     processUpdates: () => void;
     setAttribute(element: HTMLElement, attributeName: string, value: any): void;
     setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
@@ -304,6 +302,7 @@ export class ElementStyles {
     get strategy(): StyleStrategy;
     // @internal (undocumented)
     readonly styles: ReadonlyArray<ComposableStyles>;
+    static readonly supportsAdoptedStyleSheets: boolean;
     withBehaviors(...behaviors: Behavior<HTMLElement>[]): this;
     withStrategy(Strategy: ConstructibleStyleStrategy): this;
 }
@@ -776,6 +775,17 @@ export interface TypeRegistry<TDefinition extends TypeDefinition> {
     register(definition: TDefinition): boolean;
 }
 
+// @public
+export interface UpdateQueue {
+    enqueue(callable: Callable): void;
+    next(): Promise<void>;
+    process(): void;
+    setMode(isAsync: boolean): void;
+}
+
+// @public
+export const Updates: UpdateQueue;
+
 // @public
 export interface ValueConverter {
     fromView(value: any): any;
diff --git a/packages/web-components/fast-element/src/components/attributes.ts b/packages/web-components/fast-element/src/components/attributes.ts
index 09923498593..10f37f1f222 100644
--- a/packages/web-components/fast-element/src/components/attributes.ts
+++ b/packages/web-components/fast-element/src/components/attributes.ts
@@ -1,7 +1,8 @@
 import { Accessor, Observable } from "../observation/observable.js";
-import { DOM } from "../dom.js";
 import type { Notifier } from "../observation/notifier.js";
 import { isString } from "../interfaces.js";
+import { Updates } from "../observation/update-queue.js";
+import { DOM } from "../templating/dom.js";
 
 /**
  * Represents objects that can convert values to and from
@@ -223,7 +224,7 @@ export class AttributeDefinition implements Accessor {
             return;
         }
 
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             guards.add(element);
 
             const latestValue = element[this.fieldName];
diff --git a/packages/web-components/fast-element/src/components/controller.spec.ts b/packages/web-components/fast-element/src/components/controller.spec.ts
index 953f2418c16..83e2d5a79f1 100644
--- a/packages/web-components/fast-element/src/components/controller.spec.ts
+++ b/packages/web-components/fast-element/src/components/controller.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { DOM } from "../dom";
+import { ElementStyles } from "../index.debug";
 import type { Behavior } from "../observation/behavior";
 import { Observable } from "../observation/observable";
 import { css } from "../styles/css";
@@ -194,7 +194,7 @@ describe("The Controller", () => {
             expect(toHTML(element)).to.equal("b");
         });
 
-        if (DOM.supportsAdoptedStyleSheets) {
+        if (ElementStyles.supportsAdoptedStyleSheets) {
             it("sets no styles when none are provided", () => {
                 const { shadowRoot, controller } = createController();
 
@@ -289,7 +289,7 @@ describe("The Controller", () => {
             expect(toHTML(element)).to.equal("b");
         });
 
-        if (DOM.supportsAdoptedStyleSheets) {
+        if (ElementStyles.supportsAdoptedStyleSheets) {
             it("can dynamically change the styles", () => {
                 const { shadowRoot, controller } = createController({ styles: stylesA });
 
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.spec.ts b/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
index f77df48fe27..bd2c162e7c5 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
@@ -1,5 +1,4 @@
 import { expect } from "chai";
-import { DOM } from "../dom";
 import { FASTElementDefinition } from "./fast-definitions";
 import { ElementStyles } from "../styles/element-styles";
 
@@ -71,7 +70,7 @@ describe("FASTElementDefinition", () => {
             expect(def.styles!.styles).to.contain(existingStyles2);
         });
 
-        if (DOM.supportsAdoptedStyleSheets) {
+        if (ElementStyles.supportsAdoptedStyleSheets) {
             it("can accept a CSSStyleSheet", () => {
                 const styles = new CSSStyleSheet();
                 const options = {
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index 9e0a9ac3e61..cb934747e92 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -1,9 +1,4 @@
-export * from "./platform.js";
-export * from "./templating/template.js";
-export * from "./components/fast-element.js";
-export * from "./components/fast-definitions.js";
-export * from "./components/attributes.js";
-export * from "./components/controller.js";
+// Kernel
 export type {
     Callable,
     Constructable,
@@ -14,16 +9,25 @@ export type {
     TrustedTypes,
     TrustedTypesPolicy,
 } from "./interfaces.js";
-export * from "./templating/compiler.js";
-export * from "./styles/element-styles.js";
-export * from "./styles/css.js";
-export * from "./styles/css-directive.js";
+export * from "./platform.js";
+
+// Observation
 export * from "./observation/observable.js";
 export * from "./observation/notifier.js";
 export * from "./observation/array-change-records.js";
 export * from "./observation/array-observer.js";
-export * from "./dom.js";
+export * from "./observation/update-queue.js";
 export type { Behavior } from "./observation/behavior.js";
+
+// Styles
+export * from "./styles/element-styles.js";
+export * from "./styles/css.js";
+export * from "./styles/css-directive.js";
+
+// Templating
+export * from "./templating/dom.js";
+export * from "./templating/template.js";
+export * from "./templating/compiler.js";
 export { Markup, Parser } from "./templating/markup.js";
 export {
     bind,
@@ -43,3 +47,9 @@ export * from "./templating/slotted.js";
 export * from "./templating/children.js";
 export * from "./templating/view.js";
 export * from "./templating/node-observation.js";
+
+// Components
+export * from "./components/fast-element.js";
+export * from "./components/fast-definitions.js";
+export * from "./components/attributes.js";
+export * from "./components/controller.js";
diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index d4764c9aad5..0942a9000e4 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -1,7 +1,6 @@
-import { DOM } from "../dom.js";
-import { calcSplices, newSplice, projectArraySplices } from "./array-change-records.js";
-import type { Splice } from "./array-change-records.js";
-import { Subscriber, SubscriberSet } from "./notifier.js";
+import { Updates } from "./update-queue.js";
+import { Splice } from "./array-change-records.js";
+import { SubscriberSet } from "./notifier.js";
 import type { Notifier } from "./notifier.js";
 import { Observable } from "./observable.js";
 
@@ -61,7 +60,7 @@ class ArrayObserver extends SubscriberSet {
     private enqueue(): void {
         if (this.needsQueue) {
             this.needsQueue = false;
-            DOM.queueUpdate(this);
+            Updates.enqueue(this);
         }
     }
 }
diff --git a/packages/web-components/fast-element/src/observation/observable.spec.ts b/packages/web-components/fast-element/src/observation/observable.spec.ts
index 08909a23bf3..fa81979fc97 100644
--- a/packages/web-components/fast-element/src/observation/observable.spec.ts
+++ b/packages/web-components/fast-element/src/observation/observable.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { DOM } from "../dom";
+import { Updates } from "./update-queue";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier";
 import { ExecutionContext, Observable, observable, volatile } from "./observable";
 
@@ -151,7 +151,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.child = new ChildModel();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -175,7 +175,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.child.value = "something completely different";
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -199,7 +199,7 @@ describe("The Observable", () => {
             model.child.value = "something completely different";
             observer.disconnect();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(called).to.be.false;
 
@@ -208,7 +208,7 @@ describe("The Observable", () => {
 
             model.child.value = "another completely different thing";
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(called).to.be.true;
         });
@@ -231,7 +231,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.child.value = "something completely different";
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -242,7 +242,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.child2.value = "another thing";
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -253,7 +253,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.child = new ChildModel();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -264,7 +264,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.child2 = new ChildModel();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -289,7 +289,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.incrementTrigger();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -299,7 +299,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.value = 20;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -324,7 +324,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.incrementTrigger();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -334,7 +334,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.value = 20;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -365,7 +365,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.incrementTrigger();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -375,7 +375,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.value = 20;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -400,7 +400,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.incrementTrigger();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -410,7 +410,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.value = 20;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -435,7 +435,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.incrementTrigger();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -445,7 +445,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.value = 20;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -470,7 +470,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.incrementTrigger();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -480,7 +480,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.value = 20;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -507,7 +507,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.decrementTrigger();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -517,7 +517,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.value = 20;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -549,7 +549,7 @@ describe("The Observable", () => {
             expect(wasNotified).to.be.false;
             model.incrementTrigger();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -559,7 +559,7 @@ describe("The Observable", () => {
             wasNotified = false;
             model.value = 20;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasNotified).to.be.true;
 
@@ -585,7 +585,7 @@ describe("The Observable", () => {
             model.value++;
             observer.disconnect();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasCalled).to.equal(false);
         });
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index b63703a24fe..53031a33b60 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -1,6 +1,6 @@
-import { DOM } from "../dom.js";
 import { isFunction, isString, KernelServiceId, Message } from "../interfaces.js";
 import { FAST } from "../platform.js";
+import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
 import type { Notifier, Subscriber } from "./notifier.js";
 
@@ -91,7 +91,7 @@ export interface BindingObserver<TSource = any, TReturn = any, TParent = any>
  * @public
  */
 export const Observable = FAST.getById(KernelServiceId.observable, () => {
-    const queueUpdate = DOM.queueUpdate;
+    const queueUpdate = Updates.enqueue;
     const volatileRegex = /(:|&&|\|\||if)/;
     const notifierLookup = new WeakMap<any, Notifier>();
     const accessorLookup = new WeakMap<any, Accessor[]>();
diff --git a/packages/web-components/fast-element/src/dom.spec.ts b/packages/web-components/fast-element/src/observation/update-queue.spec.ts
similarity index 83%
rename from packages/web-components/fast-element/src/dom.spec.ts
rename to packages/web-components/fast-element/src/observation/update-queue.spec.ts
index a201d7808e5..c3c971ad062 100644
--- a/packages/web-components/fast-element/src/dom.spec.ts
+++ b/packages/web-components/fast-element/src/observation/update-queue.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { DOM } from "./dom";
+import { Updates } from "./update-queue";
 
 const waitMilliseconds = 100;
 const maxRecursion = 10;
@@ -24,12 +24,12 @@ function watchSetTimeoutForErrors<TError = any>() {
     };
 }
 
-describe("The DOM facade", () => {
+describe("The UpdateQueue", () => {
     context("when updating DOM asynchronously", () => {
         it("calls task in a future turn", done => {
             let called = false;
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 called = true;
                 done();
             });
@@ -40,7 +40,7 @@ describe("The DOM facade", () => {
         it("calls task.call method in a future turn", done => {
             let called = false;
 
-            DOM.queueUpdate({
+            Updates.enqueue({
                 call: () => {
                     called = true;
                     done();
@@ -53,13 +53,13 @@ describe("The DOM facade", () => {
         it("calls multiple tasks in order", done => {
             const calls:number[] = [];
 
-            DOM.queueUpdate(() =>  {
+            Updates.enqueue(() =>  {
                 calls.push(0);
             });
-            DOM.queueUpdate(() =>  {
+            Updates.enqueue(() =>  {
                 calls.push(1);
             });
-            DOM.queueUpdate(() =>  {
+            Updates.enqueue(() =>  {
                 calls.push(2);
             });
 
@@ -74,30 +74,30 @@ describe("The DOM facade", () => {
         it("calls tasks in breadth-first order", done => {
             let calls: number[] = [];
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(0);
 
-                DOM.queueUpdate(() => {
+                Updates.enqueue(() => {
                     calls.push(2);
 
-                    DOM.queueUpdate(() => {
+                    Updates.enqueue(() => {
                         calls.push(5);
                     });
 
-                    DOM.queueUpdate(() => {
+                    Updates.enqueue(() => {
                         calls.push(6);
                     });
                 });
 
-                DOM.queueUpdate(() => {
+                Updates.enqueue(() => {
                     calls.push(3);
                 });
             });
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(1);
 
-                DOM.queueUpdate(() => {
+                Updates.enqueue(() => {
                     calls.push(4);
                 });
             });
@@ -121,7 +121,7 @@ describe("The DOM facade", () => {
             const newList: number[] = [];
             for (var i=0; i < target; i++) {
                 (function(i) {
-                    DOM.queueUpdate(() => {
+                    Updates.enqueue(() => {
                         newList.push(i);
                     });
                 })(i);
@@ -144,7 +144,7 @@ describe("The DOM facade", () => {
             const newList: number[] = [];
             for (var i=0; i<target; i++) {
                 (function(i) {
-                    DOM.queueUpdate(() => {
+                    Updates.enqueue(() => {
                         newList.push(i);
                     });
                 })(i);
@@ -159,11 +159,11 @@ describe("The DOM facade", () => {
         it("can schedule tasks recursively", done => {
             const steps: number[] = [];
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 steps.push(0);
-                DOM.queueUpdate(() => {
+                Updates.enqueue(() => {
                     steps.push(2);
-                    DOM.queueUpdate(() => {
+                    Updates.enqueue(() => {
                         steps.push(4);
                     });
                     steps.push(3);
@@ -181,11 +181,11 @@ describe("The DOM facade", () => {
             let recurseCount = 0;
             function go() {
                 if (++recurseCount < maxRecursion) {
-                    DOM.queueUpdate(go);
+                    Updates.enqueue(go);
                 }
             }
 
-            DOM.queueUpdate(go);
+            Updates.enqueue(go);
 
             setTimeout(() => {
                 expect(recurseCount).to.equal(maxRecursion);
@@ -201,19 +201,19 @@ describe("The DOM facade", () => {
             function go1() {
                 calls.push(recurseCount1 * 2);
                 if (++recurseCount1 < maxRecursion) {
-                    DOM.queueUpdate(go1);
+                    Updates.enqueue(go1);
                 }
             }
 
             function go2() {
                 calls.push(recurseCount2 * 2 + 1);
                 if (++recurseCount2 < maxRecursion) {
-                    DOM.queueUpdate(go2);
+                    Updates.enqueue(go2);
                 }
             }
 
-            DOM.queueUpdate(go1);
-            DOM.queueUpdate(go2);
+            Updates.enqueue(go1);
+            Updates.enqueue(go2);
 
             setTimeout(function () {
                 expect(calls.length).to.equal(maxRecursion * 2);
@@ -228,17 +228,17 @@ describe("The DOM facade", () => {
             const calls: number[] = [];
             const dispose = watchSetTimeoutForErrors<number>();
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(0);
                 throw 0;
             });
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(1);
                 throw 1;
             });
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(2);
                 throw 2;
             });
@@ -257,25 +257,25 @@ describe("The DOM facade", () => {
             const calls: number[] = [];
             const dispose = watchSetTimeoutForErrors<number>();
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(0);
             });
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(1);
                 throw 1;
             });
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(2);
             });
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(3);
                 throw 3;
             });
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(4);
                 throw 4;
             });
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(5);
             });
 
@@ -292,8 +292,8 @@ describe("The DOM facade", () => {
         it("executes tasks scheduled by another task that later throws an error", done => {
             const dispose = watchSetTimeoutForErrors<number>();
 
-            DOM.queueUpdate(() => {
-                DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
+                Updates.enqueue(() => {
                     throw 1;
                 });
 
@@ -311,33 +311,33 @@ describe("The DOM facade", () => {
             const calls: number[] = [];
             const dispose = watchSetTimeoutForErrors<number>();
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(0);
 
-                DOM.queueUpdate(() => {
+                Updates.enqueue(() => {
                     calls.push(2);
 
-                    DOM.queueUpdate(() => {
+                    Updates.enqueue(() => {
                         calls.push(5);
                         throw 5;
                     });
 
-                    DOM.queueUpdate(() => {
+                    Updates.enqueue(() => {
                         calls.push(6);
                     });
                 });
 
-                DOM.queueUpdate(() => {
+                Updates.enqueue(() => {
                     calls.push(3);
                 });
 
                 throw 0;
             });
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 calls.push(1);
 
-                DOM.queueUpdate(() => {
+                Updates.enqueue(() => {
                     calls.push(4);
                     throw 4;
                 });
@@ -359,12 +359,12 @@ describe("The DOM facade", () => {
 
             function go() {
                 if (++recursionCount < maxRecursion) {
-                    DOM.queueUpdate(go);
+                    Updates.enqueue(go);
                     throw recursionCount - 1;
                 }
             }
 
-            DOM.queueUpdate(go);
+            Updates.enqueue(go);
 
             setTimeout(function () {
                 const errors = dispose();
@@ -390,28 +390,28 @@ describe("The DOM facade", () => {
             function go1() {
                 calls.push(recurseCount1 * 3);
                 if (++recurseCount1 < maxRecursion) {
-                    DOM.queueUpdate(go1);
+                    Updates.enqueue(go1);
                 }
             }
 
             function go2() {
                 calls.push(recurseCount2 * 3 + 1);
                 if (++recurseCount2 < maxRecursion) {
-                    DOM.queueUpdate(go2);
+                    Updates.enqueue(go2);
                 }
             }
 
             function go3() {
                 calls.push(recurseCount3 * 3 + 2);
                 if (++recurseCount3 < maxRecursion) {
-                    DOM.queueUpdate(go3);
+                    Updates.enqueue(go3);
                     throw recurseCount3 - 1;
                 }
             }
 
-            DOM.queueUpdate(go1);
-            DOM.queueUpdate(go2);
-            DOM.queueUpdate(go3);
+            Updates.enqueue(go1);
+            Updates.enqueue(go2);
+            Updates.enqueue(go3);
 
             setTimeout(function () {
                 const errors = dispose();
@@ -433,17 +433,17 @@ describe("The DOM facade", () => {
 
     context("when updating DOM synchronously", () => {
         beforeEach(() => {
-            DOM.setUpdateMode(false);
+            Updates.setMode(false);
         });
 
         afterEach(() => {
-            DOM.setUpdateMode(true);
+            Updates.setMode(true);
         });
 
         it("calls task immediately", () => {
             let called = false;
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 called = true;
             });
 
@@ -453,7 +453,7 @@ describe("The DOM facade", () => {
         it("calls task.call method immediately", () => {
             let called = false;
 
-            DOM.queueUpdate({
+            Updates.enqueue({
                 call: () => {
                     called = true;
                 }
@@ -465,13 +465,13 @@ describe("The DOM facade", () => {
         it("calls multiple tasks in order", () => {
             const calls:number[] = [];
 
-            DOM.queueUpdate(() =>  {
+            Updates.enqueue(() =>  {
                 calls.push(0);
             });
-            DOM.queueUpdate(() =>  {
+            Updates.enqueue(() =>  {
                 calls.push(1);
             });
-            DOM.queueUpdate(() =>  {
+            Updates.enqueue(() =>  {
                 calls.push(2);
             });
 
@@ -481,11 +481,11 @@ describe("The DOM facade", () => {
         it("can schedule tasks recursively", () => {
             const steps: number[] = [];
 
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 steps.push(0);
-                DOM.queueUpdate(() => {
+                Updates.enqueue(() => {
                     steps.push(2);
-                    DOM.queueUpdate(() => {
+                    Updates.enqueue(() => {
                         steps.push(4);
                     });
                     steps.push(3);
@@ -500,11 +500,11 @@ describe("The DOM facade", () => {
             let recurseCount = 0;
             function go() {
                 if (++recurseCount < maxRecursion) {
-                    DOM.queueUpdate(go);
+                    Updates.enqueue(go);
                 }
             }
 
-            DOM.queueUpdate(go);
+            Updates.enqueue(go);
 
             expect(recurseCount).to.equal(maxRecursion);
         });
@@ -514,7 +514,7 @@ describe("The DOM facade", () => {
             let caught: any;
 
             try {
-                DOM.queueUpdate(() => {
+                Updates.enqueue(() => {
                     calls.push(0);
                     throw 0;
                 });
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/observation/update-queue.ts
similarity index 50%
rename from packages/web-components/fast-element/src/dom.ts
rename to packages/web-components/fast-element/src/observation/update-queue.ts
index ebcc1f9fcdd..572f69946d3 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/observation/update-queue.ts
@@ -1,7 +1,49 @@
-import { Callable, KernelServiceId } from "./interfaces.js";
-import { FAST } from "./platform.js";
+import { Callable, KernelServiceId } from "../interfaces.js";
+import { FAST } from "../platform.js";
 
-const updateQueue = FAST.getById(KernelServiceId.updateQueue, () => {
+/**
+ * A work queue used to synchronize writes to the DOM.
+ * @public
+ */
+export interface UpdateQueue {
+    /**
+     * Schedules DOM update work in the next batch.
+     * @param callable - The callable function or object to queue.
+     */
+    enqueue(callable: Callable): void;
+
+    /**
+     * Resolves with the next DOM update.
+     */
+    next(): Promise<void>;
+
+    /**
+     * Immediately processes all work previously scheduled
+     * through enqueue.
+     * @remarks
+     * This also forces next() promises
+     * to resolve.
+     */
+    process(): void;
+
+    /**
+     * Sets the update mode used by enqueue.
+     * @param isAsync - Indicates whether DOM updates should be asynchronous.
+     * @remarks
+     * By default, the update mode is asynchronous, since that provides the best
+     * performance in the browser. Passing false to setMode will instead cause
+     * the queue to be immediately processed for each call to enqueue. However,
+     * ordering will still be preserved so that nested tasks do not run until
+     * after parent tasks complete.
+     */
+    setMode(isAsync: boolean): void;
+}
+
+/**
+ * The default UpdateQueue.
+ * @public
+ */
+export const Updates: UpdateQueue = FAST.getById(KernelServiceId.updateQueue, () => {
     const tasks: Callable[] = [];
     const pendingErrors: any[] = [];
     const rAF = globalThis.requestAnimationFrame;
@@ -35,8 +77,8 @@ const updateQueue = FAST.getById(KernelServiceId.updateQueue, () => {
             tryRunTask(tasks[index]);
             index++;
 
-            // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
-            // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
+            // Prevent leaking memory for long chains of recursive calls to `enqueue`.
+            // If we call `enqueue` within a task scheduled by `enqueue`, the queue will
             // grow, but to avoid an O(n) walk for every task we execute, we don't
             // shift tasks off the queue after they have been executed.
             // Instead, we periodically shift 1024 tasks off the queue.
@@ -69,85 +111,8 @@ const updateQueue = FAST.getById(KernelServiceId.updateQueue, () => {
 
     return Object.freeze({
         enqueue,
+        next: () => new Promise(enqueue),
         process,
-        setUpdateMode(isAsync: boolean) {
-            updateAsync = isAsync;
-        },
+        setMode: (isAsync: boolean) => (updateAsync = isAsync),
     });
 });
-
-/**
- * Common DOM APIs.
- * @public
- */
-export const DOM = Object.freeze({
-    /**
-     * Indicates whether the DOM supports the adoptedStyleSheets feature.
-     */
-    supportsAdoptedStyleSheets:
-        Array.isArray((document as any).adoptedStyleSheets) &&
-        "replace" in CSSStyleSheet.prototype,
-
-    /**
-     * Sets the update mode used by queueUpdate.
-     * @param isAsync - Indicates whether DOM updates should be asynchronous.
-     * @remarks
-     * By default, the update mode is asynchronous, since that provides the best
-     * performance in the browser. Passing false to setUpdateMode will instead cause
-     * the queue to be immediately processed for each call to queueUpdate. However,
-     * ordering will still be preserved so that nested tasks do not run until
-     * after parent tasks complete.
-     */
-    setUpdateMode: updateQueue.setUpdateMode,
-
-    /**
-     * Schedules DOM update work in the next async batch.
-     * @param callable - The callable function or object to queue.
-     */
-    queueUpdate: updateQueue.enqueue,
-
-    /**
-     * Resolves with the next DOM update.
-     */
-    nextUpdate(): Promise<void> {
-        return new Promise(updateQueue.enqueue);
-    },
-
-    /**
-     * Immediately processes all work previously scheduled
-     * through queueUpdate.
-     * @remarks
-     * This also forces nextUpdate promises
-     * to resolve.
-     */
-    processUpdates: updateQueue.process,
-
-    /**
-     * Sets an attribute value on an element.
-     * @param element - The element to set the attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is `null` or `undefined`, the attribute is removed, otherwise
-     * it is set to the provided value using the standard `setAttribute` API.
-     */
-    setAttribute(element: HTMLElement, attributeName: string, value: any) {
-        value === null || value === undefined
-            ? element.removeAttribute(attributeName)
-            : element.setAttribute(attributeName, value);
-    },
-
-    /**
-     * Sets a boolean attribute value.
-     * @param element - The element to set the boolean attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is true, the attribute is added; otherwise it is removed.
-     */
-    setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean) {
-        value
-            ? element.setAttribute(attributeName, "")
-            : element.removeAttribute(attributeName);
-    },
-});
diff --git a/packages/web-components/fast-element/src/styles/css-directive.ts b/packages/web-components/fast-element/src/styles/css-directive.ts
index 74f26c4586c..e174984e9fb 100644
--- a/packages/web-components/fast-element/src/styles/css-directive.ts
+++ b/packages/web-components/fast-element/src/styles/css-directive.ts
@@ -43,8 +43,22 @@ const registry = createTypeRegistry<CSSDirectiveDefinition>();
  * @public
  */
 export const CSSDirective = Object.freeze({
+    /**
+     * Gets the directive definition associated with the instance.
+     * @param instance - The directive instance to retrieve the definition for.
+     */
     getForInstance: registry.getForInstance,
+
+    /**
+     * Gets the directive definition associated with the specified type.
+     * @param type - The directive type to retrieve the definition for.
+     */
     getByType: registry.getByType,
+
+    /**
+     * Defines a CSSDirective.
+     * @param type - The type to define as a directive.
+     */
     define<TType extends Constructable<CSSDirective>>(type): TType {
         registry.register({ type });
         return type;
diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index a510001d666..a9089ba6e22 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -120,6 +120,13 @@ export class ElementStyles {
     public static setDefaultStrategy(Strategy: ConstructibleStyleStrategy): void {
         DefaultStyleStrategy = Strategy;
     }
+
+    /**
+     * Indicates whether the DOM supports the adoptedStyleSheets feature.
+     */
+    public static readonly supportsAdoptedStyleSheets =
+        Array.isArray((document as any).adoptedStyleSheets) &&
+        "replace" in CSSStyleSheet.prototype;
 }
 
 /**
diff --git a/packages/web-components/fast-element/src/styles/styles.spec.ts b/packages/web-components/fast-element/src/styles/styles.spec.ts
index ece6fdbe0f8..9a5ee06945f 100644
--- a/packages/web-components/fast-element/src/styles/styles.spec.ts
+++ b/packages/web-components/fast-element/src/styles/styles.spec.ts
@@ -4,7 +4,6 @@ import {
     ComposableStyles,
     ElementStyles,
 } from "./element-styles";
-import { DOM } from "../dom";
 import { AddBehavior, cssDirective, CSSDirective } from "./css-directive";
 import { css } from "./css";
 import type { Behavior } from "../observation/behavior";
@@ -12,7 +11,7 @@ import { StyleElementStrategy } from "../polyfills";
 import type { StyleTarget } from "../interfaces";
 import { ExecutionContext } from "../observation/observable";
 
-if (DOM.supportsAdoptedStyleSheets) {
+if (ElementStyles.supportsAdoptedStyleSheets) {
     describe("AdoptedStyleSheetsStrategy", () => {
         context("when removing styles", () => {
             it("should remove an associated stylesheet", () => {
@@ -207,7 +206,7 @@ describe("ElementStyles", () => {
         expect(styles.styles).to.contain(existingStyles2);
     });
 
-    if (DOM.supportsAdoptedStyleSheets) {
+    if (ElementStyles.supportsAdoptedStyleSheets) {
         it("can create from a CSSStyleSheet", () => {
             const styleSheet = new CSSStyleSheet();
             const styles = new ElementStyles([styleSheet]);
@@ -267,7 +266,7 @@ describe("css", () => {
                 expect(styles.styles.includes(_styles)).to.equal(true)
             });
 
-            if (DOM.supportsAdoptedStyleSheets) {
+            if (ElementStyles.supportsAdoptedStyleSheets) {
                 it("when the result is a CSSStyleSheet", () => {
                     const _styles = new CSSStyleSheet();
 
diff --git a/packages/web-components/fast-element/src/templating/binding.spec.ts b/packages/web-components/fast-element/src/templating/binding.spec.ts
index 7bb45456916..5969df7f4ea 100644
--- a/packages/web-components/fast-element/src/templating/binding.spec.ts
+++ b/packages/web-components/fast-element/src/templating/binding.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from "chai";
 import { bind, HTMLBindingDirective } from "./binding";
 import { ExecutionContext, observable } from "../observation/observable";
-import { DOM } from "../dom";
 import { html, ViewTemplate } from "./template";
 import { toHTML } from "../__test__/helpers";
 import { SyntheticView, HTMLView } from "./view";
+import { Updates } from "../observation/update-queue";
 
 describe("The HTML binding directive", () => {
     class Model {
@@ -61,7 +61,7 @@ describe("The HTML binding directive", () => {
 
             model.value = "This is another test, different from the first.";
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(node.textContent).to.equal(model.value);
         });
@@ -89,7 +89,7 @@ describe("The HTML binding directive", () => {
 
             model.value = "This is a test.";
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(toHTML(parentNode)).to.equal(model.value);
         });
@@ -105,7 +105,7 @@ describe("The HTML binding directive", () => {
 
             model.value = null;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(toHTML(parentNode)).to.equal("");
         });
@@ -121,7 +121,7 @@ describe("The HTML binding directive", () => {
 
             model.value = void 0;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(toHTML(parentNode)).to.equal("");
         });
@@ -138,7 +138,7 @@ describe("The HTML binding directive", () => {
             const newTemplate = html<Model>`This is a new template ${x => x.knownValue}`;
             model.value = newTemplate;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(toHTML(parentNode)).to.equal(`This is a new template value`);
         });
@@ -159,13 +159,13 @@ describe("The HTML binding directive", () => {
 
             model.value = "This is a test string.";
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(toHTML(parentNode)).to.equal(model.value);
 
             model.value = template;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             const newView = (node as any).$fastView as SyntheticView;
             const newCapturedTemplate = (node as any).$fastTemplate as ViewTemplate;
@@ -187,7 +187,7 @@ describe("The HTML binding directive", () => {
             model.value = template;
             model.forceComputedUpdate();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
         });
@@ -204,7 +204,7 @@ describe("The HTML binding directive", () => {
 
             model.knownValue = "a"
 
-            await DOM.nextUpdate()
+            await Updates.next()
 
             expect(toHTML(parentNode)).to.equal(`<a>Hi there!</a>`);
         })
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 55806b3e5de..0e2a8d4b770 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,4 +1,3 @@
-import { DOM } from "../dom.js";
 import { isString, Message } from "../interfaces.js";
 import {
     Binding,
@@ -7,6 +6,7 @@ import {
     Observable,
 } from "../observation/observable.js";
 import { FAST } from "../platform.js";
+import { DOM } from "./dom.js";
 import {
     AddViewBehaviorFactory,
     Aspect,
diff --git a/packages/web-components/fast-element/src/templating/children.spec.ts b/packages/web-components/fast-element/src/templating/children.spec.ts
index a74dbbc8491..9080b0288d3 100644
--- a/packages/web-components/fast-element/src/templating/children.spec.ts
+++ b/packages/web-components/fast-element/src/templating/children.spec.ts
@@ -2,7 +2,7 @@ import { expect } from "chai";
 import { children, ChildrenDirective } from "./children";
 import { ExecutionContext, observable } from "../observation/observable";
 import { elements } from "./node-observation";
-import { DOM } from "../dom";
+import { Updates } from "../observation/update-queue";
 
 describe("The children", () => {
     context("template function", () => {
@@ -90,7 +90,7 @@ describe("The children", () => {
 
             const updatedChildren = children.concat(createAndAppendChildren(host));
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(model.nodes).members(updatedChildren);
         });
@@ -110,7 +110,7 @@ describe("The children", () => {
 
             const updatedChildren = children.concat(createAndAppendChildren(host));
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(model.nodes).members(updatedChildren.filter(elements("foo-bar")));
         });
@@ -151,7 +151,7 @@ describe("The children", () => {
                 }
             }
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(model.nodes).members(subtreeChildren);
         });
@@ -174,7 +174,7 @@ describe("The children", () => {
 
             host.appendChild(document.createElement("div"));
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(model.nodes).members([]);
         });
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index ddc8dea5219..33b392943bf 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -1,5 +1,4 @@
 import { expect } from "chai";
-import { DOM } from "../dom";
 import { customElement, FASTElement } from "../components/fast-element";
 import { Markup } from './markup';
 import { ExecutionContext } from "../observation/observable";
@@ -10,6 +9,7 @@ import { Compiler } from "./compiler";
 import type { HTMLDirective, ViewBehaviorFactory } from "./html-directive";
 import { html } from "./template";
 import type { StyleTarget } from "../interfaces";
+import { ElementStyles } from "../index.debug";
 
 /**
  * Used to satisfy TS by exposing some internal properties of the
@@ -381,7 +381,7 @@ describe("The template compiler", () => {
 
     context("when compiling hosts", () => {});
 
-    if (DOM.supportsAdoptedStyleSheets) {
+    if (ElementStyles.supportsAdoptedStyleSheets) {
         it("handles templates with adoptedStyleSheets", () => {
             const name = uniqueElementName();
 
diff --git a/packages/web-components/fast-element/src/templating/dom.ts b/packages/web-components/fast-element/src/templating/dom.ts
new file mode 100644
index 00000000000..9358bd36d91
--- /dev/null
+++ b/packages/web-components/fast-element/src/templating/dom.ts
@@ -0,0 +1,54 @@
+import { Updates } from "../observation/update-queue.js";
+
+/**
+ * Common DOM APIs.
+ * @public
+ */
+export const DOM = Object.freeze({
+    /**
+     * @deprecated
+     * Use Updates.enqueue().
+     */
+    queueUpdate: Updates.enqueue,
+
+    /**
+     * @deprecated
+     * Use Updates.next()
+     */
+    nextUpdate: Updates.next,
+
+    /**
+     * @deprecated
+     * Use Updates.process()
+     */
+    processUpdates: Updates.process,
+
+    /**
+     * Sets an attribute value on an element.
+     * @param element - The element to set the attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is `null` or `undefined`, the attribute is removed, otherwise
+     * it is set to the provided value using the standard `setAttribute` API.
+     */
+    setAttribute(element: HTMLElement, attributeName: string, value: any) {
+        value === null || value === undefined
+            ? element.removeAttribute(attributeName)
+            : element.setAttribute(attributeName, value);
+    },
+
+    /**
+     * Sets a boolean attribute value.
+     * @param element - The element to set the boolean attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is true, the attribute is added; otherwise it is removed.
+     */
+    setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean) {
+        value
+            ? element.setAttribute(attributeName, "")
+            : element.removeAttribute(attributeName);
+    },
+});
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 918eb7e1b17..92d86c2bf97 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -115,8 +115,23 @@ const registry = createTypeRegistry<HTMLDirectiveDefinition>();
  * @public
  */
 export const HTMLDirective = Object.freeze({
+    /**
+     * Gets the directive definition associated with the instance.
+     * @param instance - The directive instance to retrieve the definition for.
+     */
     getForInstance: registry.getForInstance,
+
+    /**
+     * Gets the directive definition associated with the specified type.
+     * @param type - The directive type to retrieve the definition for.
+     */
     getByType: registry.getByType,
+
+    /**
+     * Defines an HTMLDirective based on the options.
+     * @param type - The type to define as a directive.
+     * @param options - Options that specify the directive's application.
+     */
     define<TType extends Constructable<HTMLDirective>>(
         type: TType,
         options?: PartialHTMLDirectiveDefinition
@@ -130,7 +145,7 @@ export const HTMLDirective = Object.freeze({
 
 /**
  * Decorator: Defines an HTMLDirective.
- * @param options - Provides options that specify the directives application.
+ * @param options - Provides options that specify the directive's application.
  * @public
  */
 export function htmlDirective(options?: PartialHTMLDirectiveDefinition) {
diff --git a/packages/web-components/fast-element/src/templating/repeat.spec.ts b/packages/web-components/fast-element/src/templating/repeat.spec.ts
index 653b33f930e..c24561a9835 100644
--- a/packages/web-components/fast-element/src/templating/repeat.spec.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.spec.ts
@@ -2,8 +2,8 @@ import { expect } from "chai";
 import { repeat, RepeatDirective, RepeatBehavior } from "./repeat";
 import { child, html } from "./template";
 import { ExecutionContext, observable } from "../observation/observable";
-import { DOM } from "../dom";
 import { toHTML } from "../__test__/helpers";
+import { Updates } from "../observation/update-queue";
 
 describe("The repeat", () => {
     function createLocation() {
@@ -132,13 +132,13 @@ describe("The repeat", () => {
 
                 data.items = [];
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(toHTML(parent)).to.equal("");
 
                 data.items = createArray(size);
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(toHTML(parent)).to.equal(
                     createOutput(size, void 0, void 0, input => `<div>${input}</div>`)
@@ -160,7 +160,7 @@ describe("The repeat", () => {
                 behavior.bind(vm, ExecutionContext.default);
                 vm.items.push({ name: "newitem" });
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(toHTML(parent)).to.equal(`${createOutput(size)}newitem`);
             });
@@ -182,7 +182,7 @@ describe("The repeat", () => {
                 const index = size - 1;
                 vm.items.splice(index, 1);
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(toHTML(parent)).to.equal(
                     `${createOutput(size, x => x !== index)}`
@@ -205,7 +205,7 @@ describe("The repeat", () => {
 
                 vm.items.splice(0, 1);
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(toHTML(parent)).to.equal(`${createOutput(size, x => x !== 0)}`);
             });
@@ -227,7 +227,7 @@ describe("The repeat", () => {
                 const index = size - 1;
                 vm.items.splice(index, 1, { name: "newitem1" }, { name: "newitem2" });
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(toHTML(parent)).to.equal(
                     `${createOutput(size, x => x !== index)}newitem1newitem2`
@@ -250,7 +250,7 @@ describe("The repeat", () => {
 
                 vm.items.splice(0, 1, { name: "newitem1" }, { name: "newitem2" });
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(toHTML(parent)).to.equal(
                     `newitem1newitem2${createOutput(size, x => x !== 0)}`
@@ -275,7 +275,7 @@ describe("The repeat", () => {
 
                 vm.template = altItemTemplate;
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(toHTML(parent)).to.equal(createOutput(size, () => true, "*"));
             });
@@ -326,7 +326,7 @@ describe("The repeat", () => {
                 vm.items.shift();
                 vm.items.unshift({ name: "shift" });
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(toHTML(parent)).to.equal(
                     `shift${createOutput(size, index => index !== 0)}`
@@ -347,19 +347,19 @@ describe("The repeat", () => {
 
                 behavior.bind(vm, ExecutionContext.default);
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 behavior.unbind();
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 behavior.bind(vm, ExecutionContext.default);
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 vm.items.push({ name: "newitem" });
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(toHTML(parent)).to.equal(`${createOutput(size)}newitem`);
             });
diff --git a/packages/web-components/fast-element/src/templating/slotted.spec.ts b/packages/web-components/fast-element/src/templating/slotted.spec.ts
index ccdec09d260..c6c73be7d5c 100644
--- a/packages/web-components/fast-element/src/templating/slotted.spec.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.spec.ts
@@ -2,7 +2,7 @@ import { expect } from "chai";
 import { slotted, SlottedDirective } from "./slotted";
 import { ExecutionContext, observable } from "../observation/observable";
 import { elements } from "./node-observation";
-import { DOM } from "../dom";
+import { Updates } from "../observation/update-queue";
 
 describe("The slotted", () => {
     context("template function", () => {
@@ -92,7 +92,7 @@ describe("The slotted", () => {
 
             const updatedChildren = children.concat(createAndAppendChildren(host));
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(model.nodes).members(updatedChildren);
         });
@@ -112,7 +112,7 @@ describe("The slotted", () => {
 
             const updatedChildren = children.concat(createAndAppendChildren(host));
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(model.nodes).members(updatedChildren.filter(elements("foo-bar")));
         });
@@ -133,7 +133,7 @@ describe("The slotted", () => {
 
             host.appendChild(document.createElement("div"));
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(model.nodes).members([]);
         });
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts b/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts
index ecaeb397bc0..33c77241abd 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts
@@ -2,7 +2,7 @@ import { expect } from "chai";
 import { Accordion, accordionTemplate as template } from "./index";
 import { AccordionItem, accordionItemTemplate as itemTemplate } from "../accordion-item";
 import { fixture } from "../testing/fixture";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { AccordionExpandMode } from "./accordion";
 
 const FASTAccordion = Accordion.compose({
@@ -36,7 +36,7 @@ describe("Accordion", () => {
         element.expandmode = AccordionExpandMode.multi;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("expand-mode")).to.equal(AccordionExpandMode.multi);
 
@@ -49,7 +49,7 @@ describe("Accordion", () => {
         element.expandmode = AccordionExpandMode.single;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("expand-mode")).to.equal(AccordionExpandMode.single);
 
@@ -60,7 +60,7 @@ describe("Accordion", () => {
         const { element, connect, disconnect } = await setup();
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect((element as Accordion).expandmode).to.equal(AccordionExpandMode.multi);
         expect(element.getAttribute("expand-mode")).to.equal(AccordionExpandMode.multi);
diff --git a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts
index d9dd4a729f9..bc4e628dea1 100644
--- a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts
+++ b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { AnchoredRegion, anchoredRegionTemplate as template } from "./index";
 import { fixture } from "../testing/fixture";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 
 const FASTAnchoredRegion = AnchoredRegion.compose({
     baseName: "anchored-region",
@@ -48,7 +48,7 @@ describe("Anchored Region", () => {
         const { element, connect, disconnect } = await setup();
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.anchorElement?.id).to.equal("anchor");
         expect(element.viewportElement?.id).to.equal("viewport");
@@ -60,7 +60,7 @@ describe("Anchored Region", () => {
         const { element, connect, disconnect, content } = await setup();
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.clientHeight).to.equal(content.clientHeight);
         expect(element.clientWidth).to.equal(content.clientWidth);
diff --git a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts
index 22ddb843ab0..0a8bb4a7ae1 100644
--- a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts
+++ b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts
@@ -1,4 +1,4 @@
-import { attr, DOM, observable } from "@microsoft/fast-element";
+import { attr, observable, Updates } from "@microsoft/fast-element";
 import { Direction, eventResize, eventScroll } from "@microsoft/fast-web-utilities";
 import { FoundationElement } from "../foundation-element/foundation-element.js";
 import { getDirection } from "../utilities/direction.js";
@@ -498,7 +498,7 @@ export class AnchoredRegion extends FoundationElement {
             this.pendingReset === false
         ) {
             this.setInitialState();
-            DOM.queueUpdate(() => this.reset());
+            Updates.enqueue(() => this.reset());
             this.pendingReset = true;
         }
     }
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts
index 89275ee4b8b..72162f40e95 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts
@@ -2,7 +2,7 @@ import { expect } from "chai";
 import { Breadcrumb, breadcrumbTemplate as template } from "./index";
 import { fixture } from "../testing/fixture";
 import { BreadcrumbItem, breadcrumbItemTemplate } from "../breadcrumb-item";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 
 const FASTBreadcrumb = Breadcrumb.compose({
     baseName: "breadcrumb",
@@ -105,7 +105,7 @@ describe("Breadcrumb", () => {
         (item4 as BreadcrumbItem).setAttribute("href", "#");
         element.appendChild(item4);
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.querySelectorAll("fast-breadcrumb-item")[2].hasAttribute("aria-current")
@@ -147,7 +147,7 @@ describe("Breadcrumb", () => {
         item4.appendChild(anchor4);
         element.appendChild(item4);
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.querySelectorAll("a[href]")[2].hasAttribute("aria-current")
diff --git a/packages/web-components/fast-foundation/src/button/button.spec.ts b/packages/web-components/fast-foundation/src/button/button.spec.ts
index dd977c786a6..0b6a5d4c777 100644
--- a/packages/web-components/fast-foundation/src/button/button.spec.ts
+++ b/packages/web-components/fast-foundation/src/button/button.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { fixture } from "../testing/fixture";
 import { Button, buttonTemplate as template } from "./index";
 import { eventClick } from "@microsoft/fast-web-utilities";
@@ -530,7 +530,7 @@ describe("Button", () => {
                 element.click();
 
                 // Resolve false on the next update in case reset hasn't happened
-                DOM.queueUpdate(() => resolve(false));
+                Updates.enqueue(() => resolve(false));
             });
 
             expect(wasSumbitted).to.equal(true);
@@ -556,7 +556,7 @@ describe("Button", () => {
                 element.click();
 
                 // Resolve false on the next update in case reset hasn't happened
-                DOM.queueUpdate(() => resolve(false));
+                Updates.enqueue(() => resolve(false));
             });
 
             expect(wasReset).to.equal(true);
@@ -579,7 +579,7 @@ describe("Button", () => {
                 wasClicked = true;
             })
 
-            await DOM.nextUpdate();
+            await Updates.next();
             element.click()
 
             expect(wasClicked).to.equal(false);
@@ -601,7 +601,7 @@ describe("Button", () => {
                 wasClicked = true;
             })
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             const elements = element.shadowRoot?.querySelectorAll("span");
             if (elements) {
diff --git a/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts b/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts
index 77c0ba232d5..b1a80623e7b 100644
--- a/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts
+++ b/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts
@@ -1,4 +1,4 @@
-import { customElement, DOM, html } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { fixture } from "../testing/fixture";
 import { Calendar, calendarTemplate } from "./index";
@@ -54,7 +54,7 @@ async function setup(props?: {}) {
 
     await connect();
 
-    await DOM.nextUpdate();
+    await Updates.next();
 
     return { document, element, connect, disconnect };
 }
@@ -264,7 +264,7 @@ describe("Calendar", () => {
         it("Should be 31 days in January", async () => {
             const { element, disconnect } = await setup({month: 1, year: 2021});
 
-            await DOM.nextUpdate();
+            await Updates.next();
             const info = (element as Calendar).getMonthInfo();
             expect(info.length).to.equal(31);
 
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts
index 554c3214580..4eb502d21a6 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts
@@ -1,7 +1,7 @@
 import { assert, expect } from "chai";
 import { Checkbox, checkboxTemplate as template } from "./index";
 import { fixture } from "../testing/fixture";
-import { DOM, customElement } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { keySpace } from "@microsoft/fast-web-utilities";
 
 const FASTCheckbox = Checkbox.compose({
@@ -37,7 +37,7 @@ describe("Checkbox", () => {
 
         element.checked = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal("false");
 
@@ -77,7 +77,7 @@ describe("Checkbox", () => {
 
         element.required = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-required")).to.equal("false");
 
@@ -105,7 +105,7 @@ describe("Checkbox", () => {
 
         element.disabled = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-disabled")).to.equal("false");
 
@@ -133,7 +133,7 @@ describe("Checkbox", () => {
 
         element.readOnly = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-readonly")).to.equal("false");
 
@@ -283,7 +283,7 @@ describe("Checkbox", () => {
 
                 element.click();
 
-                DOM.queueUpdate(() => resolve(false));
+                Updates.enqueue(() => resolve(false));
             });
 
             expect(wasClicked).to.equal(true);
@@ -306,7 +306,7 @@ describe("Checkbox", () => {
                 element.dispatchEvent(event);
 
                 // Resolve false on the next update in case the event hasn't happened
-                DOM.queueUpdate(() => resolve(false));
+                Updates.enqueue(() => resolve(false));
             });
 
             expect(wasInvoked).to.equal(true);
diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts b/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts
index e8c9944fc8e..9481a01300c 100644
--- a/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts
+++ b/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts
@@ -1,4 +1,4 @@
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp } from "@microsoft/fast-web-utilities";
 import { expect } from "chai";
 import { ListboxOption, listboxOptionTemplate } from "../listbox-option";
@@ -62,7 +62,7 @@ describe("Combobox", () => {
 
         element.disabled = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-disabled")).to.equal("false");
 
@@ -169,7 +169,7 @@ describe("Combobox", () => {
                     element.addEventListener("change", () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.false;
@@ -199,7 +199,7 @@ describe("Combobox", () => {
                     element.addEventListener("change", () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.false;
@@ -226,7 +226,7 @@ describe("Combobox", () => {
 
                     element.value = "two";
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.false;
@@ -297,7 +297,7 @@ describe("Combobox", () => {
 
             form.reset();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal("two");
 
@@ -329,7 +329,7 @@ describe("Combobox", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.control).to.exist;
 
@@ -343,31 +343,31 @@ describe("Combobox", () => {
 
         element.open = true;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.control.getAttribute("aria-activedescendant")).to.exist.and.be.empty;
 
         element.selectNextOption();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.control.getAttribute("aria-activedescendant")).to.equal(option1.id);
 
         element.selectNextOption();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.control.getAttribute("aria-activedescendant")).to.equal(option2.id);
 
         element.selectNextOption();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.control.getAttribute("aria-activedescendant")).to.equal(option3.id);
 
         element.value = "other";
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.control.getAttribute("aria-activedescendant")).to.be.empty;
 
@@ -391,13 +391,13 @@ describe("Combobox", () => {
 
         element.open = true;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.control.getAttribute("aria-controls")).to.equal(listboxId);
 
         element.open = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.control.getAttribute("aria-controls")).to.be.empty;
 
diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.ts b/packages/web-components/fast-foundation/src/combobox/combobox.ts
index c40b19fbaf1..ffea26188ef 100644
--- a/packages/web-components/fast-foundation/src/combobox/combobox.ts
+++ b/packages/web-components/fast-foundation/src/combobox/combobox.ts
@@ -1,5 +1,5 @@
-import type { SyntheticViewTemplate } from "@microsoft/fast-element";
-import { attr, DOM, Observable, observable } from "@microsoft/fast-element";
+import { SyntheticViewTemplate, Updates } from "@microsoft/fast-element";
+import { attr, Observable, observable } from "@microsoft/fast-element";
 import { limit, uniqueId } from "@microsoft/fast-web-utilities";
 import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
 import type { ListboxOption } from "../listbox-option/listbox-option.js";
@@ -157,7 +157,7 @@ export class Combobox extends FormAssociatedCombobox {
             this.focusAndScrollOptionIntoView();
 
             // focus is directed to the element when `open` is changed programmatically
-            DOM.queueUpdate(() => this.focus());
+            Updates.enqueue(() => this.focus());
 
             return;
         }
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts
index 7af8ec35d06..ea0cbf61123 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { fixture } from "../testing/fixture";
 import { ColumnDefinition, dataGridRowTemplate, DataGridCell, dataGridCellTemplate, DataGridRow } from "./index";
 import { newDataRow } from "./data-grid.spec";
@@ -103,14 +103,14 @@ describe("Data grid row", () => {
         expect(element.querySelectorAll(cellQueryString).length).to.equal(0);
 
         element.columnDefinitions = [{ columnDataKey: "item1" }];
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(element.querySelectorAll(cellQueryString).length).to.equal(1);
 
         element.columnDefinitions = [
             { columnDataKey: "item1" },
             { columnDataKey: "item2" },
         ];
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(element.querySelectorAll(cellQueryString).length).to.equal(2);
 
         await disconnect();
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts
index f8c3725cd6f..3a514a732e8 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts
@@ -10,7 +10,7 @@ import {
 } from "./index";
 import type { ColumnDefinition } from "./data-grid";
 import { DataGridRowTypes, GenerateHeaderOptions } from "./data-grid.options";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp, keyEnd, keyHome } from "@microsoft/fast-web-utilities";
 
 const FASTDataGridCell = DataGridCell.compose({
@@ -115,7 +115,7 @@ describe("Data grid", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const rows: Element[] = Array.from(element.querySelectorAll('[role="row"]'));
         expect(rows.length).to.equal(3);
@@ -196,7 +196,7 @@ describe("Data grid", () => {
 
         const rows: DataGridRow[] = Array.from(element.querySelectorAll('[role="row"]'));
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(rows.length).to.equal(6);
         expect(rows[0].rowIndex).to.equal(0);
@@ -216,7 +216,7 @@ describe("Data grid", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const rows: Element[] = Array.from(element.querySelectorAll('[role="row"]'));
         expect(rows.length).to.equal(3);
@@ -254,7 +254,7 @@ describe("Data grid", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const rows: Element[] = Array.from(element.querySelectorAll('[role="row"]'));
         expect(rows.length).to.equal(3);
@@ -280,7 +280,7 @@ describe("Data grid", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const rows: Element[] = Array.from(element.querySelectorAll('[role="row"]'));
         expect(rows.length).to.equal(3);
@@ -291,15 +291,15 @@ describe("Data grid", () => {
         expect(document.activeElement?.textContent).to.contain("item1");
 
         element.focusRowIndex = 1;
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(document.activeElement?.textContent).to.contain("value 1-1");
 
         element.focusRowIndex = 2;
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(document.activeElement?.textContent).to.contain("value 1-2");
 
         element.focusRowIndex = 3;
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(document.activeElement?.textContent).to.contain("value 1-2");
 
         await disconnect();
@@ -312,7 +312,7 @@ describe("Data grid", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const rows: Element[] = Array.from(element.querySelectorAll('[role="row"]'));
         expect(rows.length).to.equal(3);
@@ -323,15 +323,15 @@ describe("Data grid", () => {
         expect(document.activeElement?.textContent).to.contain("item1");
 
         element.focusColumnIndex = 1;
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(document.activeElement?.textContent).to.contain("item2");
 
         element.focusColumnIndex = 6;
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(document.activeElement?.textContent).to.contain("item6");
 
         element.focusColumnIndex = 7;
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(document.activeElement?.textContent).to.contain("item6");
 
         await disconnect();
@@ -345,7 +345,7 @@ describe("Data grid", () => {
         row.appendChild(new DataGridCell());
         element.appendChild(row);
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(row.gridTemplateColumns).to.equal("1fr 1fr");
 
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
index e8993f4ef78..b35f8080cf9 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts
@@ -1,10 +1,10 @@
 import {
     attr,
-    DOM,
     ItemViewTemplate,
     observable,
     RepeatBehavior,
     RepeatDirective,
+    Updates,
     ViewTemplate,
 } from "@microsoft/fast-element";
 import {
@@ -366,7 +366,7 @@ export class DataGrid extends FoundationElement {
             this.setAttribute("tabindex", "-1");
         }
 
-        DOM.queueUpdate(this.queueRowIndexUpdate);
+        Updates.enqueue(this.queueRowIndexUpdate);
     }
 
     /**
@@ -574,7 +574,7 @@ export class DataGrid extends FoundationElement {
         }
         if (this.pendingFocusUpdate === false) {
             this.pendingFocusUpdate = true;
-            DOM.queueUpdate(() => this.updateFocus());
+            Updates.enqueue(() => this.updateFocus());
         }
     }
 
@@ -637,7 +637,7 @@ export class DataGrid extends FoundationElement {
     private queueRowIndexUpdate = (): void => {
         if (!this.rowindexUpdateQueued) {
             this.rowindexUpdateQueued = true;
-            DOM.queueUpdate(this.updateRowIndexes);
+            Updates.enqueue(this.updateRowIndexes);
         }
     };
 
diff --git a/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts b/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts
index ecd43152d65..ba0f3ebdfc9 100644
--- a/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts
+++ b/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts
@@ -1,4 +1,4 @@
-import { Constructable, DOM } from "@microsoft/fast-element";
+import { Constructable, DOM, Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { FoundationElement } from "..";
 import { Container, DI, Registration } from "../di";
@@ -395,11 +395,11 @@ describe("DesignSystem", () => {
             });
 
 
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(window.getComputedStyle(document.body).getPropertyValue(token.cssCustomProperty)).to.equal("12");
 
         DesignToken.unregisterRoot();
-        await DOM.nextUpdate();
+        await Updates.next();
     });
 
     it("should provide a way to specify the DesignToken root", async () => {
@@ -414,12 +414,12 @@ describe("DesignSystem", () => {
             });
 
 
-        await DOM.nextUpdate();
+        await Updates.next();
         const value = host.style.getPropertyValue(token.cssCustomProperty)
         expect(value).to.equal("12");
         expect(window.getComputedStyle(document.body).getPropertyValue(token.cssCustomProperty)).to.equal("");
         DesignToken.unregisterRoot(host);
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(window.getComputedStyle(document.body).getPropertyValue(token.cssCustomProperty)).to.equal("");
     });
     it("should provide a way to disable DesignToken root registration", async () => {
@@ -433,7 +433,7 @@ describe("DesignSystem", () => {
             });
 
 
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(window.getComputedStyle(document.body).getPropertyValue(token.cssCustomProperty)).to.equal("");
     });
 });
diff --git a/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts b/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts
index 2ecb8899f00..2765e613032 100644
--- a/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts
+++ b/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts
@@ -1,11 +1,11 @@
 import {
     Constructable,
     Controller,
-    DOM,
     ElementStyles,
     FASTElement,
     observable,
     Observable,
+    Updates,
 } from "@microsoft/fast-element";
 
 export const defaultElement = document.createElement("div");
@@ -23,10 +23,10 @@ abstract class QueuedStyleSheetTarget implements PropertyTarget {
     protected abstract target: PropertyTarget;
 
     public setProperty(name: string, value: string) {
-        DOM.queueUpdate(() => this.target.setProperty(name, value));
+        Updates.enqueue(() => this.target.setProperty(name, value));
     }
     public removeProperty(name: string) {
-        DOM.queueUpdate(() => this.target.removeProperty(name));
+        Updates.enqueue(() => this.target.removeProperty(name));
     }
 }
 /**
@@ -110,7 +110,7 @@ class StyleElementStyleSheetTarget implements PropertyTarget {
     public setProperty(name: string, value: string) {
         this.store.set(name, value);
 
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             if (this.target !== null) {
                 this.target.setProperty(name, value);
             }
@@ -120,7 +120,7 @@ class StyleElementStyleSheetTarget implements PropertyTarget {
     public removeProperty(name: string) {
         this.store.delete(name);
 
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             if (this.target !== null) {
                 this.target.removeProperty(name);
             }
@@ -158,11 +158,11 @@ class ElementStyleSheetTarget implements PropertyTarget {
     }
 
     setProperty(name: string, value: any) {
-        DOM.queueUpdate(() => this.target.setProperty(name, value));
+        Updates.enqueue(() => this.target.setProperty(name, value));
     }
 
     removeProperty(name: string) {
-        DOM.queueUpdate(() => this.target.removeProperty(name));
+        Updates.enqueue(() => this.target.removeProperty(name));
     }
 }
 
@@ -237,7 +237,7 @@ const propertyTargetCache: WeakMap<
 > = new WeakMap();
 // Use Constructable StyleSheets for FAST elements when supported, otherwise use
 // HTMLStyleElement instances
-const propertyTargetCtor: Constructable<PropertyTarget> = DOM.supportsAdoptedStyleSheets
+const propertyTargetCtor: Constructable<PropertyTarget> = ElementStyles.supportsAdoptedStyleSheets
     ? ConstructableStyleSheetTarget
     : StyleElementStyleSheetTarget;
 
@@ -258,7 +258,7 @@ export const PropertyTargetManager = Object.freeze({
         if (source === defaultElement) {
             target = new RootStyleSheetTarget();
         } else if (source instanceof Document) {
-            target = DOM.supportsAdoptedStyleSheets
+            target = ElementStyles.supportsAdoptedStyleSheets
                 ? new DocumentStyleSheetTarget()
                 : new HeadStyleElementStyleSheetTarget();
         } else if (isFastElement(source as HTMLElement)) {
diff --git a/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts b/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
index 5ba7939898d..0cf2682b801 100644
--- a/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
+++ b/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
@@ -1,4 +1,4 @@
-import { css, DOM, FASTElement, html, Observable } from "@microsoft/fast-element";
+import { css, FASTElement, html, Observable, Updates } from "@microsoft/fast-element";
 import chia, { expect } from "chai";
 import { DesignSystem } from "../design-system";
 import { uniqueElementName } from "../testing/fixture";
@@ -33,12 +33,12 @@ function removeElement(...els: HTMLElement[]) {
 describe("A DesignToken", () => {
     beforeEach(async () => {
         DesignToken.registerRoot();
-        await DOM.nextUpdate();
+        await Updates.next();
     });
 
     after(async () => {
         DesignToken.unregisterRoot();
-        await DOM.nextUpdate();
+        await Updates.next();
     });
     it("should support declared types", () => {
         const number: DesignToken<number> = DesignToken.create<number>('number');
@@ -114,7 +114,7 @@ describe("A DesignToken", () => {
 
             token.setValueFor(parent, 14);
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(token.getValueFor(target)).to.equal(14);
             removeElement(grandparent);
@@ -160,7 +160,7 @@ describe("A DesignToken", () => {
                 const target = addElement();
                 const token = DesignToken.create<number>("test");
                 token.setValueFor(target, 12);
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(token.cssCustomProperty)).to.equal('12');
                 removeElement(target)
             });
@@ -196,7 +196,7 @@ describe("A DesignToken", () => {
             expect(token.getValueFor(target)).to.equal(12);
 
             dependencies.value = 7;
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(token.getValueFor(target)).to.equal(14);
             removeElement(target)
@@ -212,7 +212,7 @@ describe("A DesignToken", () => {
             expect(tokenB.getValueFor(target)).to.equal(12);
 
             tokenA.setValueFor(target, 7);
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(tokenB.getValueFor(target)).to.equal(14);
             removeElement(target);
@@ -233,7 +233,7 @@ describe("A DesignToken", () => {
             removeElement(ancestor, parent, target);
         });
 
-        it("should update value of a dependent token when getting a token for a target", () => {
+        it("should update value of a dependent token when getting a token for a target", async () => {
             const ancestor = addElement()
             const parent = addElement(ancestor);
             const target = addElement(parent);
@@ -247,7 +247,7 @@ describe("A DesignToken", () => {
             expect(tokenB.getValueFor(target)).to.equal(12);
 
             tokenA.setValueFor(parent, 7);
-            DOM.nextUpdate();
+            await Updates.next();
 
             expect(tokenB.getValueFor(target)).to.equal(14);
             removeElement(ancestor);
@@ -278,7 +278,7 @@ describe("A DesignToken", () => {
 
                 token.setValueFor(target, (target) => 12);
 
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(token.cssCustomProperty)).to.equal('12');
 
                 removeElement(target);
@@ -291,7 +291,7 @@ describe("A DesignToken", () => {
                 tokenA.setValueFor(target, 6);
                 tokenB.setValueFor(target, (target) => tokenA.getValueFor(target) * 2);
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(window.getComputedStyle(target).getPropertyValue(tokenB.cssCustomProperty)).to.equal('12');
                 removeElement(target);
@@ -305,11 +305,11 @@ describe("A DesignToken", () => {
                 tokenA.setValueFor(target, 6);
                 tokenB.setValueFor(target, (target) => tokenA.getValueFor(target) * 2);
 
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(tokenB.cssCustomProperty)).to.equal('12');
 
                 tokenA.setValueFor(target, 7);
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(tokenB.cssCustomProperty)).to.equal('14');
 
                 removeElement(target);
@@ -325,7 +325,7 @@ describe("A DesignToken", () => {
                 tokenB.setValueFor(parent, (target) => tokenA.getValueFor(target) * 2);
                 tokenA.setValueFor(target, 7);
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(window.getComputedStyle(parent).getPropertyValue(tokenB.cssCustomProperty)).to.equal('12');
                 expect(window.getComputedStyle(target).getPropertyValue(tokenB.cssCustomProperty)).to.equal('14');
@@ -344,7 +344,7 @@ describe("A DesignToken", () => {
                 tokenB.setValueFor(parent, (target) => tokenA.getValueFor(target) * 2);
                 tokenA.setValueFor(target, 7);
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(window.getComputedStyle(parent).getPropertyValue(tokenB.cssCustomProperty)).to.equal('12');
                 expect(window.getComputedStyle(target).getPropertyValue(tokenB.cssCustomProperty)).to.equal('14');
@@ -361,7 +361,7 @@ describe("A DesignToken", () => {
                 tokenA.setValueFor(target, 7);
                 tokenB.setValueFor(parent, (target) => tokenA.getValueFor(target) * 2);
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(window.getComputedStyle(parent).getPropertyValue(tokenB.cssCustomProperty)).to.equal('12');
                 expect(window.getComputedStyle(target).getPropertyValue(tokenB.cssCustomProperty)).to.equal('14');
@@ -373,15 +373,15 @@ describe("A DesignToken", () => {
                 const target = addElement();
 
                 token.setValueFor(target, 12);
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(token.cssCustomProperty)).to.equal('12');
 
                 token.setValueFor(target, 14);
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(token.cssCustomProperty)).to.equal('14');
 
                 token.setValueFor(target, 12);
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(token.cssCustomProperty)).to.equal('12');
             })
         });
@@ -485,12 +485,12 @@ describe("A DesignToken", () => {
                 tokenA.setValueFor(target, 12);
                 tokenB.setValueFor(target, tokenA);
 
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(tokenB.cssCustomProperty)).to.equal("12");
 
                 tokenA.setValueFor(target, 14);
 
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(tokenB.cssCustomProperty)).to.equal("14");
 
                 removeElement(target);
@@ -505,12 +505,12 @@ describe("A DesignToken", () => {
                 tokenB.setValueFor(target, (target) => tokenA.getValueFor(target) * 2);
                 tokenC.setValueFor(target, tokenB);
 
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(tokenC.cssCustomProperty)).to.equal("12");
 
                 tokenA.setValueFor(target, 7);
 
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(window.getComputedStyle(target).getPropertyValue(tokenC.cssCustomProperty)).to.equal("14");
 
                 removeElement(target);
@@ -541,14 +541,14 @@ describe("A DesignToken", () => {
                 tokenB.setValueFor(grandparent, (el: HTMLElement) => tokenA.getValueFor(el) * 2);
                 tokenC.setValueFor(grandparent, (el) => tokenB.getValueFor(el) * 2)
 
-                await DOM.nextUpdate();
+                await Updates.next();
 
                 expect(tokenC.getValueFor(child)).to.equal(12);
                 expect(window.getComputedStyle(child).getPropertyValue(tokenC.cssCustomProperty)).to.equal("12");
 
                 tokenA.setValueFor(child, 4);
 
-                await DOM.nextUpdate();
+                await Updates.next();
                 expect(tokenC.getValueFor(child)).to.equal(16);
                 expect(window.getComputedStyle(child).getPropertyValue(tokenC.cssCustomProperty)).to.equal("16");
         });
@@ -567,7 +567,7 @@ describe("A DesignToken", () => {
 
             document.body.appendChild(element);
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(window.getComputedStyle(element).getPropertyValue(tokenB.cssCustomProperty)).to.equal('14');
         });
@@ -590,13 +590,13 @@ describe("A DesignToken", () => {
 
             document.body.appendChild(parent);
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(handleChange).not.to.have.been.called();
 
             tokenA.setValueFor(parent, () => 7);
             expect(tokenB.getValueFor(child)).to.equal(14);
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(handleChange).to.have.been.called.once;
         });
         it("should notify a subscriber for a token after being appended to a parent with a different token value than the previous context", async () => {
@@ -731,7 +731,7 @@ describe("A DesignToken", () => {
             const styles = css`:host{width: calc(${token} * 1px);}`
             target.$fastController.addStyles(styles);
 
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(window.getComputedStyle(target).getPropertyValue(token.cssCustomProperty)).to.equal("12");
             removeElement(target)
         });
@@ -743,7 +743,7 @@ describe("A DesignToken", () => {
             const styles = css`:host{width: calc(${token} * 1px);}`
             target.$fastController.addStyles(styles);
 
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(window.getComputedStyle(target).getPropertyValue(token.cssCustomProperty)).to.equal("12");
             removeElement(parent)
         })
@@ -894,7 +894,7 @@ describe("A DesignToken", () => {
             tokenB.subscribe(subscriber);
 
             tokenA.withDefault(7);
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(handleChange).to.have.been.called();
         });
 
@@ -916,7 +916,7 @@ describe("A DesignToken", () => {
             tokenC.subscribe(subscriber);
 
             tokenA.withDefault(7);
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(handleChange).to.have.been.called()
         });
 
@@ -938,7 +938,7 @@ describe("A DesignToken", () => {
             tokenB.subscribe(subscriber);
 
             tokenA.setValueFor(target, 7);
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(handleChange).to.have.been.called();
         })
         it("should notify a subscriber when a static-value dependency of subscribed token changes for a parent of the subscription target", async () => {
@@ -960,7 +960,7 @@ describe("A DesignToken", () => {
             tokenB.subscribe(subscriber, target);
 
             tokenA.setValueFor(parent, 7);
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(handleChange).to.have.been.called();
             expect(tokenB.getValueFor(target)).to.equal(14)
         });
@@ -983,7 +983,7 @@ describe("A DesignToken", () => {
             tokenB.subscribe(subscriber, target);
 
             tokenA.setValueFor(parent, () => 7);
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(handleChange).to.have.been.called();
             expect(tokenB.getValueFor(target)).to.equal(14)
         });
@@ -1007,7 +1007,7 @@ describe("A DesignToken", () => {
             tokenB.subscribe(subscriber, child);
 
             tokenA.setValueFor(grandparent, () => 7);
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(handleChange).to.have.been.called();
         });
     });
@@ -1027,7 +1027,7 @@ describe("A DesignToken", () => {
 
             DesignToken.registerRoot();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(styles.getPropertyValue(token.cssCustomProperty)).to.equal("12");
             DesignToken.unregisterRoot();
@@ -1039,12 +1039,12 @@ describe("A DesignToken", () => {
 
             DesignToken.registerRoot();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(styles.getPropertyValue(token.cssCustomProperty)).to.equal("12");
             DesignToken.unregisterRoot();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(styles.getPropertyValue(token.cssCustomProperty)).to.equal("");
         });
@@ -1055,7 +1055,7 @@ describe("A DesignToken", () => {
 
             DesignToken.registerRoot(element);
 
-            await DOM.nextUpdate();
+            await Updates.next();
             const styles = window.getComputedStyle(element);
 
             expect(styles.getPropertyValue(token.cssCustomProperty)).to.equal("12");
@@ -1068,20 +1068,20 @@ describe("A DesignToken", () => {
             const b = addElement();
 
             DesignToken.registerRoot(a);
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(window.getComputedStyle(a).getPropertyValue(token.cssCustomProperty)).to.equal("12");
             expect(window.getComputedStyle(b).getPropertyValue(token.cssCustomProperty)).to.equal("");
             expect(window.getComputedStyle(document.body).getPropertyValue(token.cssCustomProperty)).to.equal("");
 
             DesignToken.registerRoot(b);
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(window.getComputedStyle(a).getPropertyValue(token.cssCustomProperty)).to.equal("12");
             expect(window.getComputedStyle(b).getPropertyValue(token.cssCustomProperty)).to.equal("12");
             expect(window.getComputedStyle(document.body).getPropertyValue(token.cssCustomProperty)).to.equal("");
 
             DesignToken.registerRoot();
-            await DOM.nextUpdate();
+            await Updates.next();
             expect(window.getComputedStyle(a).getPropertyValue(token.cssCustomProperty)).to.equal("12");
             expect(window.getComputedStyle(b).getPropertyValue(token.cssCustomProperty)).to.equal("12");
             expect(window.getComputedStyle(document.body).getPropertyValue(token.cssCustomProperty)).to.equal("12");
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
index ac7a6974119..e736890eef7 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { Dialog, dialogTemplate as template } from "./index";
 import { fixture } from "../testing/fixture";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { keyEscape } from "@microsoft/fast-web-utilities";
 
 const FASTDialog = Dialog.compose({
@@ -35,13 +35,13 @@ describe("Dialog", () => {
         element.hidden = true;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.hasAttribute("hidden")).to.equal(true);
 
         element.hidden = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.hasAttribute("hidden")).to.equal(false);
 
@@ -65,7 +65,7 @@ describe("Dialog", () => {
 
         element.modal = true;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.shadowRoot
@@ -75,7 +75,7 @@ describe("Dialog", () => {
 
         element.modal = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.shadowRoot
@@ -107,7 +107,7 @@ describe("Dialog", () => {
 
         element.modal = true;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.shadowRoot?.querySelector(".overlay")?.getAttribute("role")
@@ -134,7 +134,7 @@ describe("Dialog", () => {
         element.trapFocus = true;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.hasAttribute("trap-focus")).to.equal(true);
 
@@ -145,7 +145,7 @@ describe("Dialog", () => {
         const { element, connect, disconnect } = await setup();
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.trapFocus).to.equal(true);
         expect(element.hasAttribute("trap-focus")).to.equal(true);
@@ -254,7 +254,7 @@ describe("Dialog", () => {
 
             element.modal = true;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             const overlay = element.shadowRoot!.querySelector(".overlay")! as HTMLElement;
 
@@ -264,7 +264,7 @@ describe("Dialog", () => {
                 overlay.click();
 
                 // Resolve false on the next update in case click hasn't happened
-                DOM.queueUpdate(() => resolve(false));
+                Updates.enqueue(() => resolve(false));
             });
 
             expect(wasDismissed).to.equal(true);
@@ -286,7 +286,7 @@ describe("Dialog", () => {
                 overlay.click();
 
                 // Resolve false on the next update in case click hasn't happened
-                DOM.queueUpdate(() => resolve(false));
+                Updates.enqueue(() => resolve(false));
             });
 
             expect(wasDismissed).to.equal(true);
@@ -312,7 +312,7 @@ describe("Dialog", () => {
                 button.click();
 
                 // Resolve false on the next update in case click hasn't happened
-                DOM.queueUpdate(() => resolve(false));
+                Updates.enqueue(() => resolve(false));
             });
 
             expect(wasDismissed).to.equal(true);
@@ -335,7 +335,7 @@ describe("Dialog", () => {
                 document.dispatchEvent(event);
 
                 // Resolve false on the next update in case the event hasn't happened
-                DOM.queueUpdate(() => resolve(false));
+                Updates.enqueue(() => resolve(false));
             });
 
             expect(wasDismissed).to.equal(true);
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.ts b/packages/web-components/fast-foundation/src/dialog/dialog.ts
index 6071ad22dfd..f8af810fe78 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.ts
@@ -1,4 +1,4 @@
-import { attr, DOM, Notifier, Observable } from "@microsoft/fast-element";
+import { attr, Notifier, Observable, Updates } from "@microsoft/fast-element";
 import { keyEscape, keyTab } from "@microsoft/fast-web-utilities";
 import { isTabbable } from "tabbable";
 import { FoundationElement } from "../foundation-element/foundation-element.js";
@@ -268,7 +268,7 @@ export class Dialog extends FoundationElement {
             this.isTrappingFocus = true;
             // Add an event listener for focusin events if we are trapping focus
             document.addEventListener("focusin", this.handleDocumentFocus);
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 if (this.shouldForceFocus(document.activeElement)) {
                     this.focusFirstElement();
                 }
diff --git a/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts b/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
index 585c3a4e2a3..4d23160175d 100644
--- a/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
+++ b/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
@@ -1,4 +1,4 @@
-import { html, ref, customElement, DOM, FASTElement } from "@microsoft/fast-element";
+import { html, ref, customElement, FASTElement, Updates } from "@microsoft/fast-element";
 import { fixture, uniqueElementName } from "../testing/fixture";
 import { reflectAttributes } from "./reflect-attributes";
 import { expect } from "chai";
@@ -45,7 +45,7 @@ describe("reflectAttributes", () => {
 
         await connect();
         element.setAttribute("foo", "bar");
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.a.getAttribute("foo")).to.equal("bar");
         await disconnect();
@@ -56,7 +56,7 @@ describe("reflectAttributes", () => {
 
         await connect();
         element.setAttribute("bar", "bat");
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.a.getAttribute("bar")).to.equal("bat");
         expect(element.b.getAttribute("bar")).to.equal("bat");
@@ -69,10 +69,10 @@ describe("reflectAttributes", () => {
 
         await connect();
         element.setAttribute("foo", "bar");
-        await DOM.nextUpdate();
+        await Updates.next();
 
         element.removeAttribute("foo");
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.a.hasAttribute("foo")).to.equal(false);
 
@@ -84,10 +84,10 @@ describe("reflectAttributes", () => {
 
         await connect();
         element.setAttribute("bar", "bat");
-        await DOM.nextUpdate();
+        await Updates.next();
 
         element.removeAttribute("bar");
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.a.hasAttribute("bar")).to.equal(false);
         expect(element.b.hasAttribute("bar")).to.equal(false);
@@ -101,7 +101,7 @@ describe("reflectAttributes", () => {
         await connect();
         element.setAttribute("foo", "bar");
 
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(element.b.hasAttribute("foo")).to.equal(false);
 
         await disconnect();
@@ -112,7 +112,7 @@ describe("reflectAttributes", () => {
 
         await connect();
         element.setAttribute("bee", "bar");
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.a.hasAttribute("bee")).to.equal(false);
         expect(element.b.hasAttribute("bee")).to.equal(false);
diff --git a/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts b/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
index c99d8108822..60d63c8e9b6 100644
--- a/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
+++ b/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
@@ -1,4 +1,4 @@
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { fixture } from "../testing/fixture";
 import { Disclosure, disclosureTemplate as template } from "./index";
@@ -19,7 +19,7 @@ describe("Disclosure", () => {
         const { element, connect, disconnect } = await createDisclosure();
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.expanded).to.equal(false);
 
@@ -33,7 +33,7 @@ describe("Disclosure", () => {
 
         element.expanded = true;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.expanded).to.equal(true);
 
@@ -47,7 +47,7 @@ describe("Disclosure", () => {
 
         element.expanded = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.expanded).to.equal(false);
 
@@ -63,7 +63,7 @@ describe("Disclosure", () => {
 
         element.summary = summary;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.shadowRoot?.querySelector("slot[name='summary']")?.innerHTML).to.equal(summary);
 
@@ -77,7 +77,7 @@ describe("Disclosure", () => {
 
             element.toggle();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.expanded).to.equal(true);
 
@@ -91,13 +91,13 @@ describe("Disclosure", () => {
 
             element.show();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.expanded).to.equal(true);
 
             element.hide();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.expanded).to.equal(false);
 
diff --git a/packages/web-components/fast-foundation/src/divider/divider.spec.ts b/packages/web-components/fast-foundation/src/divider/divider.spec.ts
index 7cb02bcad06..b07ed6548c8 100644
--- a/packages/web-components/fast-foundation/src/divider/divider.spec.ts
+++ b/packages/web-components/fast-foundation/src/divider/divider.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { fixture } from "../testing/fixture";
 import { DividerRole } from "./divider.options";
 import { Divider, dividerTemplate as template } from "./index";
@@ -28,7 +28,7 @@ describe("Divider", () => {
 
         element.role = DividerRole.presentation;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("role")).to.equal(`${DividerRole.presentation}`);
 
@@ -39,7 +39,7 @@ describe("Divider", () => {
         const { element, connect, disconnect } = await setup();
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("role")).to.equal(`${DividerRole.separator}`);
 
@@ -59,7 +59,7 @@ describe("Divider", () => {
 
         element.orientation = Orientation.vertical;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-orientation")).to.equal(
             `${Orientation.vertical}`
diff --git a/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts b/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts
index 09c5254b65a..cc39c97a6af 100644
--- a/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts
+++ b/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { fixture } from "../testing/fixture";
 import { FlipperDirection } from "./flipper.options";
 import { Flipper, flipperTemplate as template } from "./index";
@@ -54,7 +54,7 @@ describe("Flipper", () => {
         const { element, connect, disconnect } = await setup();
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-hidden")).to.equal("true");
 
@@ -77,7 +77,7 @@ describe("Flipper", () => {
         element.setAttribute("aria-hidden", "false");
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("tabindex")).to.equal("0");
 
@@ -116,7 +116,7 @@ describe("Flipper", () => {
         const { element, connect, disconnect } = await setup();
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.shadowRoot?.querySelector("span")?.classList.contains("next")
diff --git a/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts b/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts
index c03e2c7a0b4..976ad615960 100644
--- a/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts
+++ b/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts
@@ -1,7 +1,7 @@
 import { FormAssociated, CheckableFormAssociated } from "./form-associated";
 import { assert, expect } from "chai";
 import { fixture } from "../testing/fixture";
-import { customElement, FASTElement, html, elements, DOM } from "@microsoft/fast-element";
+import { customElement, FASTElement, html, Updates } from "@microsoft/fast-element";
 
 const template = html`
     <slot></slot>
@@ -383,7 +383,7 @@ describe("CheckableFormAssociated:", () => {
         const { connect, element } = await setup<Checkable>("checkable-form-associated");
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         assertChecked(element)(false);
     });
@@ -391,36 +391,36 @@ describe("CheckableFormAssociated:", () => {
         const { connect, element } = await setup<Checkable>("checkable-form-associated");
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
         const test = assertChecked(element);
 
         test(false);
 
         element.checked = true;
 
-        await DOM.nextUpdate();
+        await Updates.next();
         test(true);
 
         element.checked = false;
-        await DOM.nextUpdate();
+        await Updates.next();
         test(false)
     });
     it("should align the `checked` property and `current-checked` attribute with `currentChecked` property changes", async () => {
         const { connect, element } = await setup<Checkable>("checkable-form-associated");
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
         const test = assertChecked(element);
 
         test(false);
 
         element.setAttribute("current-checked", "true");
 
-        await DOM.nextUpdate();
+        await Updates.next();
         test(true);
 
         element.setAttribute("current-checked", "false");
-        await DOM.nextUpdate();
+        await Updates.next();
         test(false)
     });
 });
diff --git a/packages/web-components/fast-foundation/src/form-associated/form-associated.ts b/packages/web-components/fast-foundation/src/form-associated/form-associated.ts
index 532cc991da4..6f047050231 100644
--- a/packages/web-components/fast-foundation/src/form-associated/form-associated.ts
+++ b/packages/web-components/fast-foundation/src/form-associated/form-associated.ts
@@ -1,9 +1,9 @@
 import {
     attr,
     booleanConverter,
-    DOM,
     emptyArray,
     observable,
+    Updates,
 } from "@microsoft/fast-element";
 import type { Constructable, FASTElement } from "@microsoft/fast-element";
 import { keyEnter } from "@microsoft/fast-web-utilities";
@@ -393,7 +393,7 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
                 this.proxy.disabled = this.disabled;
             }
 
-            DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+            Updates.enqueue(() => this.classList.toggle("disabled", this.disabled));
         }
 
         /**
@@ -445,7 +445,7 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
                 this.proxy.required = this.required;
             }
 
-            DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+            Updates.enqueue(() => this.classList.toggle("required", this.required));
             this.validate();
         }
 
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts
index 47a518522a6..d46fc0746ad 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts
@@ -1,4 +1,4 @@
-import { css, DOM, html } from "@microsoft/fast-element";
+import { css, Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { fixture } from "../testing/fixture";
 import { HorizontalScroll, horizontalScrollTemplate as template } from "./index";
@@ -74,7 +74,7 @@ async function setup(options: {
     element.innerHTML = getCards(8);
 
     await connect();
-    await DOM.nextUpdate();
+    await Updates.next();
 
     return { element, disconnect };
 }
@@ -93,7 +93,7 @@ describe("HorizontalScroll", () => {
             const { element, disconnect } = await setup();
 
             element.innerHTML = cardTemplate;
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(true);
 
@@ -112,8 +112,8 @@ describe("HorizontalScroll", () => {
             const { element, disconnect } = await setup();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
-            await DOM.nextUpdate();
+            await Updates.next();
+            await Updates.next();
 
             expect(element.shadowRoot?.querySelector(".scroll-prev")?.classList.contains("disabled")).to.equal(false);
             await disconnect();
@@ -123,11 +123,11 @@ describe("HorizontalScroll", () => {
             const { element, disconnect } = await setup();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.scrollToPrevious();
-            await DOM.nextUpdate();
-            await DOM.nextUpdate();
+            await Updates.next();
+            await Updates.next();
 
             expect(element.shadowRoot?.querySelector(".scroll-prev")?.classList.contains("disabled")).to.equal(true);
             await disconnect();
@@ -137,17 +137,17 @@ describe("HorizontalScroll", () => {
             const { element, disconnect } = await setup();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
-            await DOM.nextUpdate();
+            await Updates.next();
+            await Updates.next();
 
             expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(true);
             await disconnect();
@@ -157,20 +157,20 @@ describe("HorizontalScroll", () => {
             const { element, disconnect } = await setup();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.scrollToPrevious();
-            await DOM.nextUpdate();
-            await DOM.nextUpdate();
+            await Updates.next();
+            await Updates.next();
 
             expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(false);
 
@@ -181,23 +181,23 @@ describe("HorizontalScroll", () => {
             const { element, disconnect } = await setup();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(true);
 
             element.scrollToPrevious();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(false);
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.shadowRoot?.querySelector(".scroll-next")?.classList.contains("disabled")).to.equal(true);
 
@@ -218,7 +218,7 @@ describe("HorizontalScroll", () => {
             const { element, disconnect } = await setup();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             const position: number = getXPosition(element) || 0;
 
@@ -232,7 +232,7 @@ describe("HorizontalScroll", () => {
             const { element, disconnect } = await setup();
 
             element.scrollToPrevious();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             const scrollPosition: number | null = getXPosition(element);
 
@@ -252,7 +252,7 @@ describe("HorizontalScroll", () => {
             element.scrollToNext();
             element.scrollToNext();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             const cardViewWidth: number = cardSpace * 5 * -1;
             const scrollPosition: number | null = getXPosition(element);
@@ -267,14 +267,14 @@ describe("HorizontalScroll", () => {
             const { element, disconnect } = await setup();
 
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             const firstXPos: number | null = getXPosition(element);
             element.scrollToPrevious();
 
             element.style.width = `${horizontalScrollWidth * 2}px`;
             element.scrollToNext();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             const secondXPos: number | null = getXPosition(element);
 
@@ -288,7 +288,7 @@ describe("HorizontalScroll", () => {
 
             element.scrollToNext();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             const firstXPos: number | null = getXPosition(element);
             expect(firstXPos).to.not.null;
@@ -296,7 +296,7 @@ describe("HorizontalScroll", () => {
 
             element.scrollToPrevious();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             const secondXPosition: number | null = getXPosition(element);
             expect(secondXPosition).to.equal(0);
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
index 93118a1df2d..3adee665c52 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
@@ -1,9 +1,9 @@
 import {
     attr,
     booleanConverter,
-    DOM,
     nullableNumberConverter,
     observable,
+    Updates,
 } from "@microsoft/fast-element";
 import type { SyntheticViewTemplate } from "@microsoft/fast-element";
 import { FoundationElement } from "../foundation-element/foundation-element.js";
@@ -237,7 +237,7 @@ export class HorizontalScroll extends FoundationElement {
      */
     public scrollItemsChanged(previous: HTMLElement[], next: HTMLElement[]) {
         if (next && !this.updatingItems) {
-            DOM.queueUpdate(() => this.setStops());
+            Updates.enqueue(() => this.setStops());
         }
     }
 
diff --git a/packages/web-components/fast-foundation/src/listbox-option/listbox-option.spec.ts b/packages/web-components/fast-foundation/src/listbox-option/listbox-option.spec.ts
index 0b242a6e10f..9f33e1e3ef6 100644
--- a/packages/web-components/fast-foundation/src/listbox-option/listbox-option.spec.ts
+++ b/packages/web-components/fast-foundation/src/listbox-option/listbox-option.spec.ts
@@ -1,4 +1,4 @@
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { listboxOptionTemplate } from "../listbox-option/listbox-option.template.js";
 import { fixture } from "../testing/fixture.js";
@@ -37,7 +37,7 @@ describe("ListboxOption", () => {
 
         element.selected = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-selected")).to.equal("false");
 
@@ -55,7 +55,7 @@ describe("ListboxOption", () => {
 
         element.disabled = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-disabled")).to.equal("false");
 
@@ -71,19 +71,19 @@ describe("ListboxOption", () => {
 
         element.checked = true;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal("true");
 
         element.checked = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal("false");
 
         element.checked = undefined;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.hasAttribute("aria-checked")).to.be.false;
 
diff --git a/packages/web-components/fast-foundation/src/listbox/listbox.element.ts b/packages/web-components/fast-foundation/src/listbox/listbox.element.ts
index 3042b82901a..677a300d178 100644
--- a/packages/web-components/fast-foundation/src/listbox/listbox.element.ts
+++ b/packages/web-components/fast-foundation/src/listbox/listbox.element.ts
@@ -1,4 +1,9 @@
-import { attr, DOM, nullableNumberConverter, observable } from "@microsoft/fast-element";
+import {
+    attr,
+    nullableNumberConverter,
+    observable,
+    Updates,
+} from "@microsoft/fast-element";
 import {
     inRange,
     keyArrowDown,
@@ -456,7 +461,7 @@ export class ListboxElement extends Listbox {
     protected sizeChanged(prev: number | unknown, next: number): void {
         const size = Math.max(0, parseInt(next?.toFixed() ?? "", 10));
         if (size !== next) {
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 this.size = size;
             });
         }
diff --git a/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts b/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts
index 4de8a5e500a..2e211204a61 100644
--- a/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts
+++ b/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts
@@ -1,4 +1,4 @@
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
 import { ListboxOption } from "../listbox-option/listbox-option";
 import { listboxOptionTemplate as itemTemplate } from "../listbox-option/listbox-option.template";
@@ -52,7 +52,7 @@ describe("Listbox", () => {
 
         element.disabled = true;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("tabindex")).to.be.null;
 
@@ -128,7 +128,7 @@ describe("Listbox", () => {
 
         element.size = 4;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("size")).to.equal("4");
 
@@ -143,14 +143,14 @@ describe("Listbox", () => {
 
             element.size = 1;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.size).to.equal(1);
             expect(element.getAttribute("size")).to.equal("1");
 
             element.size = -1;
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.size).to.equal(0);
             expect(element.getAttribute("size")).to.equal("0");
@@ -170,7 +170,7 @@ describe("Listbox", () => {
 
             element.setAttribute("size", "-1");
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.size).to.equal(0);
             expect(element.getAttribute("size")).to.equal("0");
@@ -184,7 +184,7 @@ describe("Listbox", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(option1.getAttribute("aria-posinset")).to.equal("1");
         expect(option1.getAttribute("aria-setsize")).to.equal("3");
@@ -205,7 +205,7 @@ describe("Listbox", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(option1.id).to.match(/option-\d+/);
 
@@ -221,23 +221,23 @@ describe("Listbox", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         element.selectNextOption();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-activedescendant")).to.exist.and.equal(option1.id);
 
         element.selectNextOption();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-activedescendant")).to.equal(option2.id);
 
         element.selectNextOption();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-activedescendant")).to.equal(option3.id);
 
@@ -251,13 +251,13 @@ describe("Listbox", () => {
 
         element.multiple = true;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-multiselectable")).to.equal("true");
 
         element.multiple = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-multiselectable")).to.not.exist;
 
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts
index 74bb136deff..dff665db746 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { MenuItem, menuItemTemplate as template } from "./index";
 import { fixture } from "../testing/fixture";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { MenuItemRole } from "./menu-item";
 import { keyEnter, keySpace } from "@microsoft/fast-web-utilities";
 import { AnchoredRegion, anchoredRegionTemplate } from "../anchored-region";
@@ -129,19 +129,19 @@ describe("Menu item", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal(null);
 
         element.click();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal("true");
 
         element.click();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal("false");
 
@@ -154,19 +154,19 @@ describe("Menu item", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal(null);
 
         element.click();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal("true");
 
         element.click();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal("true");
 
@@ -186,7 +186,7 @@ describe("Menu item", () => {
                 wasClicked = true;
             });
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.click();
 
@@ -210,7 +210,7 @@ describe("Menu item", () => {
                 wasInvoked = true;
             });
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.dispatchEvent(event);
 
@@ -234,7 +234,7 @@ describe("Menu item", () => {
                 wasInvoked = true;
             });
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.dispatchEvent(event);
 
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
index 92bb18c5975..c1851b2224c 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.ts
@@ -1,4 +1,9 @@
-import { attr, DOM, observable, SyntheticViewTemplate } from "@microsoft/fast-element";
+import {
+    attr,
+    observable,
+    SyntheticViewTemplate,
+    Updates,
+} from "@microsoft/fast-element";
 import {
     Direction,
     keyArrowLeft,
@@ -161,7 +166,7 @@ export class MenuItem extends FoundationElement {
      */
     public connectedCallback(): void {
         super.connectedCallback();
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             this.updateSubmenu();
         });
 
diff --git a/packages/web-components/fast-foundation/src/menu/menu.spec.ts b/packages/web-components/fast-foundation/src/menu/menu.spec.ts
index 1d0a83f4dd6..6d511d8b774 100644
--- a/packages/web-components/fast-foundation/src/menu/menu.spec.ts
+++ b/packages/web-components/fast-foundation/src/menu/menu.spec.ts
@@ -2,7 +2,7 @@ import { expect } from "chai";
 import { Menu, menuTemplate as template } from "./index";
 import { MenuItem, menuItemTemplate as itemTemplate, MenuItemRole } from "../menu-item";
 import { fixture } from "../testing/fixture";
-import { DOM, html } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp } from "@microsoft/fast-web-utilities";
 
 const FASTMenu = Menu.compose({
@@ -67,7 +67,7 @@ describe("Menu", () => {
         const { element, connect, disconnect } = await setup();
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         element.focus();
         expect(document.activeElement?.id).to.equal("id1");
@@ -79,7 +79,7 @@ describe("Menu", () => {
         const { element, connect, disconnect } = await fixture(FASTMenu());
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         element.focus();
         expect(document.activeElement?.id).to.equal("");
@@ -104,7 +104,7 @@ describe("Menu", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(document.getElementById("id1")?.getAttribute("tabindex")).to.equal("0");
 
@@ -121,7 +121,7 @@ describe("Menu", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(document.getElementById("not-an-item")?.hasAttribute("tabindex")).to.equal(false);
 
@@ -134,7 +134,7 @@ describe("Menu", () => {
         (menuItem1 as MenuItem).disabled = true;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(document.getElementById("id1")?.getAttribute("tabindex")).to.equal("0");
 
@@ -163,7 +163,7 @@ describe("Menu", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.querySelector("[role='menuitem']")?.getAttribute("tabindex")
@@ -192,7 +192,7 @@ describe("Menu", () => {
         menuItem3.setAttribute("role", "menuitemcheckbox");
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.querySelector("[role='menuitemcheckbox']")?.getAttribute("tabindex")
@@ -221,7 +221,7 @@ describe("Menu", () => {
         menuItem3.setAttribute("role", "menuitemradio");
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.querySelector("[role='menuitemradio']")?.getAttribute("tabindex")
@@ -240,7 +240,7 @@ describe("Menu", () => {
         hr.setAttribute("id", "hrid");
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(document.getElementById("hrid")?.className).to.not.contain("indent");
 
@@ -251,7 +251,7 @@ describe("Menu", () => {
         const { element, connect, disconnect, menuItem1, menuItem2, menuItem3 } = await setup();
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const item1 = element.querySelector('[id="id1"]');
 
@@ -269,7 +269,7 @@ describe("Menu", () => {
         element.insertBefore(anchor, menuItem2);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const item1 = element.querySelector('[id="id1"]');
 
@@ -284,7 +284,7 @@ describe("Menu", () => {
         (menuItem3 as MenuItem).role = MenuItemRole.menuitemradio;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const item1 = element.querySelector('[id="id1"]');
 
@@ -305,7 +305,7 @@ describe("Menu", () => {
         menuItem3.appendChild(startSlot);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const item1 = element.querySelector('[id="id1"]');
 
@@ -327,7 +327,7 @@ describe("Menu", () => {
         element.insertBefore(hiddenItem2, menuItem4);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const item1 = element.querySelector('[id="id1"]');
         (item1 as HTMLElement).focus();
@@ -373,7 +373,7 @@ describe("Menu", () => {
         element.insertBefore(notMenuItem2, menuItem4);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const item1 = element.querySelector('[id="id1"]');
         (item1 as HTMLElement).focus();
@@ -414,7 +414,7 @@ describe("Menu", () => {
         (menuItem3 as MenuItem).role = MenuItemRole.menuitemcheckbox;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const item1 = element.querySelector('[id="id1"]');
         const item2 = element.querySelector('[id="id2"]');
@@ -425,25 +425,25 @@ describe("Menu", () => {
         expect(item3?.getAttribute("aria-checked")).to.equal(null);
 
         (item1 as HTMLElement).click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item1?.getAttribute("aria-checked")).to.equal("true");
         expect(item2?.getAttribute("aria-checked")).to.equal(null);
         expect(item3?.getAttribute("aria-checked")).to.equal(null);
 
         (item2 as HTMLElement).click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item1?.getAttribute("aria-checked")).to.equal("true");
         expect(item2?.getAttribute("aria-checked")).to.equal("true");
         expect(item3?.getAttribute("aria-checked")).to.equal(null);
 
         (item3 as HTMLElement).click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item1?.getAttribute("aria-checked")).to.equal("true");
         expect(item2?.getAttribute("aria-checked")).to.equal("true");
         expect(item3?.getAttribute("aria-checked")).to.equal("true");
 
         (item3 as HTMLElement).click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item1?.getAttribute("aria-checked")).to.equal("true");
         expect(item2?.getAttribute("aria-checked")).to.equal("true");
         expect(item3?.getAttribute("aria-checked")).to.equal("false");
@@ -461,7 +461,7 @@ describe("Menu", () => {
         (menuItem3 as MenuItem).role = MenuItemRole.menuitemradio;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const item1 = element.querySelector('[id="id1"]');
         const item2 = element.querySelector('[id="id2"]');
@@ -472,19 +472,19 @@ describe("Menu", () => {
         expect(item3?.getAttribute("aria-checked")).to.equal(null);
 
         (item1 as HTMLElement).click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item1?.getAttribute("aria-checked")).to.equal("true");
         expect(item2?.getAttribute("aria-checked")).to.equal("false");
         expect(item3?.getAttribute("aria-checked")).to.equal("false");
 
         (item2 as HTMLElement).click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item1?.getAttribute("aria-checked")).to.equal("false");
         expect(item2?.getAttribute("aria-checked")).to.equal("true");
         expect(item3?.getAttribute("aria-checked")).to.equal("false");
 
         (item3 as HTMLElement).click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item1?.getAttribute("aria-checked")).to.equal("false");
         expect(item2?.getAttribute("aria-checked")).to.equal("false");
         expect(item3?.getAttribute("aria-checked")).to.equal("true");
@@ -507,7 +507,7 @@ describe("Menu", () => {
         separator.setAttribute("role", "separator");
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const item1 = element.querySelector('[id="id1"]');
         const item2 = element.querySelector('[id="id2"]');
@@ -520,21 +520,21 @@ describe("Menu", () => {
         expect(item4?.getAttribute("aria-checked")).to.equal(null);
 
         (item1 as HTMLElement).click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item1?.getAttribute("aria-checked")).to.equal("true");
         expect(item2?.getAttribute("aria-checked")).to.equal("false");
         expect(item3?.getAttribute("aria-checked")).to.equal(null);
         expect(item4?.getAttribute("aria-checked")).to.equal(null);
 
         (item2 as HTMLElement).click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item1?.getAttribute("aria-checked")).to.equal("false");
         expect(item2?.getAttribute("aria-checked")).to.equal("true");
         expect(item3?.getAttribute("aria-checked")).to.equal(null);
         expect(item4?.getAttribute("aria-checked")).to.equal(null);
 
         (item3 as HTMLElement).click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item1?.getAttribute("aria-checked")).to.equal("false");
         expect(item2?.getAttribute("aria-checked")).to.equal("true");
         expect(item3?.getAttribute("aria-checked")).to.equal("true");
diff --git a/packages/web-components/fast-foundation/src/menu/menu.ts b/packages/web-components/fast-foundation/src/menu/menu.ts
index 07e80e4444d..d9fecd8b0f5 100644
--- a/packages/web-components/fast-foundation/src/menu/menu.ts
+++ b/packages/web-components/fast-foundation/src/menu/menu.ts
@@ -1,4 +1,4 @@
-import { DOM, observable } from "@microsoft/fast-element";
+import { observable, Updates } from "@microsoft/fast-element";
 import {
     isHTMLElement,
     keyArrowDown,
@@ -54,7 +54,7 @@ export class Menu extends FoundationElement {
      */
     public connectedCallback(): void {
         super.connectedCallback();
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             // wait until children have had a chance to
             // connect before setting/checking their props/attributes
             this.setItems();
diff --git a/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts b/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts
index fea05d6af71..d3f0572e188 100644
--- a/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts
+++ b/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts
@@ -1,5 +1,5 @@
-import { DOM } from "@microsoft/fast-element";
-import { expect, assert } from "chai";
+import { Updates } from "@microsoft/fast-element";
+import { expect } from "chai";
 import { fixture } from "../testing/fixture";
 import { NumberField, numberFieldTemplate as template } from "./index";
 
@@ -483,7 +483,7 @@ describe("NumberField", () => {
 
             element.setAttribute('value', value);
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(
                 (element.shadowRoot?.querySelector(".control") as HTMLInputElement).value
@@ -554,7 +554,7 @@ describe("NumberField", () => {
             expect(element.value).to.equal(value.toString());
 
             element.setAttribute("max", max.toString());
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal(max.toString());
 
@@ -569,7 +569,7 @@ describe("NumberField", () => {
             expect(element.value).to.equal(min.toString());
 
             element.value = `${min - 100}`;
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal(min.toString());
             await disconnect();
@@ -583,7 +583,7 @@ describe("NumberField", () => {
             expect(element.value).to.equal(value.toString());
 
             element.setAttribute("min", min.toString());
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal(min.toString());
 
@@ -665,7 +665,7 @@ describe("NumberField", () => {
             const { element, disconnect } = await setup({step});
 
             element.stepDown();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal(`${0 - step}`);
 
@@ -677,7 +677,7 @@ describe("NumberField", () => {
             const { element, disconnect } = await setup({min});
 
             element.stepDown();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal(`0`);
 
@@ -689,7 +689,7 @@ describe("NumberField", () => {
             const { element, disconnect } = await setup({min});
 
             element.stepUp();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal(`0`);
 
@@ -701,7 +701,7 @@ describe("NumberField", () => {
             const { element, disconnect } = await setup({min});
 
             element.stepDown();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal(min.toString());
 
@@ -713,7 +713,7 @@ describe("NumberField", () => {
             const { element, disconnect } = await setup({min});
 
             element.stepUp();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal(min.toString());
 
@@ -726,7 +726,7 @@ describe("NumberField", () => {
             const { element, disconnect } = await setup({min, max});
 
             element.stepDown();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal(max.toString());
 
@@ -739,7 +739,7 @@ describe("NumberField", () => {
             const { element, disconnect } = await setup({min, max});
 
             element.stepUp();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal(max.toString());
 
@@ -858,7 +858,7 @@ describe("NumberField", () => {
 
             element.setAttribute("hide-step", "");
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(
                 element.shadowRoot?.querySelector(".controls")).to.equal(null);
@@ -875,7 +875,7 @@ describe("NumberField", () => {
 
             element.setAttribute("readonly", "");
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(
                 element.shadowRoot?.querySelector(".controls")).to.equal(null);
diff --git a/packages/web-components/fast-foundation/src/number-field/number-field.ts b/packages/web-components/fast-foundation/src/number-field/number-field.ts
index e8829092a8c..46d48a13a05 100644
--- a/packages/web-components/fast-foundation/src/number-field/number-field.ts
+++ b/packages/web-components/fast-foundation/src/number-field/number-field.ts
@@ -1,9 +1,9 @@
 import {
     attr,
-    DOM,
     nullableNumberConverter,
     observable,
     SyntheticViewTemplate,
+    Updates,
 } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp } from "@microsoft/fast-web-utilities";
 import { StartEnd, StartEndOptions } from "../patterns/start-end.js";
@@ -307,7 +307,7 @@ export class NumberField extends FormAssociatedNumberField {
         this.control.value = this.value;
 
         if (this.autofocus) {
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 this.focus();
             });
         }
diff --git a/packages/web-components/fast-foundation/src/picker/picker.spec.ts b/packages/web-components/fast-foundation/src/picker/picker.spec.ts
index 977d993e686..2f057dd3552 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.spec.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.spec.ts
@@ -12,18 +12,13 @@ import {
     pickerTemplate,
 } from "./index";
 import { fixture } from "../testing/fixture";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import {
-    keyArrowDown,
     keyArrowLeft,
     keyArrowRight,
-    keyArrowUp,
     keyBackspace,
     keyDelete,
-    keyEnd,
     keyEnter,
-    keyEscape,
-    keyHome,
 } from "@microsoft/fast-web-utilities";
 
 const FASTPickerList = PickerList.compose({
@@ -180,7 +175,7 @@ describe("Picker", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.querySelectorAll("fast-picker-list-item").length).to.equal(3);
 
@@ -191,7 +186,7 @@ describe("Picker", () => {
         const { element, connect, disconnect } = await setupPicker();
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         element.focus();
 
@@ -207,7 +202,7 @@ describe("Picker", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
         element.focus();
 
         expect(document.activeElement === element.inputElement).to.equal(true);
@@ -248,7 +243,7 @@ describe("Picker", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
         element.focus();
 
         let listItems: Element[] = Array.from(element.querySelectorAll("fast-picker-list-item"));
@@ -256,13 +251,13 @@ describe("Picker", () => {
         expect(element.selection).to.equal("apples,oranges,bananas");
 
         element.dispatchEvent(backEvent);
-        await DOM.nextUpdate();
+        await Updates.next();
         listItems = Array.from(element.querySelectorAll("fast-picker-list-item"));
         expect(listItems.length).to.equal(2);
         expect(element.selection).to.equal("apples,oranges");
 
         element.dispatchEvent(deleteEvent);
-        await DOM.nextUpdate();
+        await Updates.next();
         listItems = Array.from(element.querySelectorAll("fast-picker-list-item"));
         expect(listItems.length).to.equal(1);
         expect(element.selection).to.equal("apples");
@@ -274,7 +269,7 @@ describe("Picker", () => {
         const { element, connect, disconnect } = await setupPicker();
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.menuConfig.verticalDefaultPosition).to.equal("bottom");
         expect(element.menuConfig.verticalScaling).to.equal("fill");
@@ -287,42 +282,42 @@ describe("Picker", () => {
         element.menuPlacement = "top-fill";
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.menuConfig.verticalDefaultPosition).to.equal("top");
         expect(element.menuConfig.verticalPositioningMode).to.equal("locktodefault");
         expect(element.menuConfig.verticalScaling).to.equal("fill");
 
         element.menuPlacement = "top";
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.menuConfig.verticalDefaultPosition).to.equal("top");
         expect(element.menuConfig.verticalPositioningMode).to.equal("locktodefault");
         expect(element.menuConfig.verticalScaling).to.equal("content");
 
         element.menuPlacement = "bottom";
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.menuConfig.verticalDefaultPosition).to.equal("bottom");
         expect(element.menuConfig.verticalPositioningMode).to.equal("locktodefault");
         expect(element.menuConfig.verticalScaling).to.equal("content");
 
         element.menuPlacement = "bottom-fill";
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.menuConfig.verticalDefaultPosition).to.equal("bottom");
         expect(element.menuConfig.verticalPositioningMode).to.equal("locktodefault");
         expect(element.menuConfig.verticalScaling).to.equal("fill");
 
         element.menuPlacement = "tallest-fill";
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.menuConfig.verticalDefaultPosition).to.equal(undefined);
         expect(element.menuConfig.verticalPositioningMode).to.equal("dynamic");
         expect(element.menuConfig.verticalScaling).to.equal("fill");
 
         element.menuPlacement = "tallest";
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.menuConfig.verticalDefaultPosition).to.equal(undefined);
         expect(element.menuConfig.verticalPositioningMode).to.equal("dynamic");
diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts
index c3960b6b30e..7d51c10eb37 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.ts
@@ -1,12 +1,12 @@
 import {
     attr,
-    DOM,
     html,
     HTMLView,
     observable,
     ref,
     RepeatBehavior,
     RepeatDirective,
+    Updates,
     ViewTemplate,
 } from "@microsoft/fast-element";
 import {
@@ -220,7 +220,7 @@ export class Picker extends FormAssociatedPicker {
     public showLoading: boolean = false;
     protected showLoadingChanged(): void {
         if (this.$fastController.isConnected) {
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 this.setFocusedOption(0);
             });
         }
@@ -359,7 +359,7 @@ export class Picker extends FormAssociatedPicker {
     public flyoutOpen: boolean = false;
     protected flyoutOpenChanged(): void {
         if (this.flyoutOpen) {
-            DOM.queueUpdate(this.setRegionProps);
+            Updates.enqueue(this.setRegionProps);
             this.$emit("menuopening", { bubbles: false });
         } else {
             this.$emit("menuclosing", { bubbles: false });
@@ -415,7 +415,7 @@ export class Picker extends FormAssociatedPicker {
     public showNoOptions: boolean = false;
     private showNoOptionsChanged(): void {
         if (this.$fastController.isConnected) {
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 this.setFocusedOption(0);
             });
         }
@@ -510,7 +510,7 @@ export class Picker extends FormAssociatedPicker {
 
         this.updateMenuConfig();
 
-        DOM.queueUpdate(() => this.initialize());
+        Updates.enqueue(() => this.initialize());
     }
 
     public disconnectedCallback() {
@@ -584,7 +584,7 @@ export class Picker extends FormAssociatedPicker {
 
         if (open && document.activeElement === this.inputElement) {
             this.flyoutOpen = open;
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 if (this.menuElement !== undefined) {
                     this.setFocusedOption(0);
                 } else {
@@ -745,7 +745,7 @@ export class Picker extends FormAssociatedPicker {
                     this.selection = this.selectedItems
                         .splice(currentFocusedItemIndex, 1)
                         .toString();
-                    DOM.queueUpdate(() => {
+                    Updates.enqueue(() => {
                         (selectedItems[
                             Math.min(selectedItems.length, currentFocusedItemIndex)
                         ] as HTMLElement).focus();
@@ -792,7 +792,7 @@ export class Picker extends FormAssociatedPicker {
 
         this.updateFilteredOptions();
 
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             this.checkMaxItems();
         });
         this.$emit("selectionchange", { bubbles: false });
@@ -802,7 +802,7 @@ export class Picker extends FormAssociatedPicker {
      * Anchored region is loaded, menu and options exist in the DOM.
      */
     public handleRegionLoaded(e: Event): void {
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             this.setFocusedOption(0);
             this.$emit("menuloaded", { bubbles: false });
         });
@@ -817,7 +817,7 @@ export class Picker extends FormAssociatedPicker {
         }
         if (this.region === null || this.region === undefined) {
             // TODO: limit this
-            DOM.queueUpdate(this.setRegionProps);
+            Updates.enqueue(this.setRegionProps);
             return;
         }
         this.region.anchorElement = this.inputElement;
@@ -864,7 +864,7 @@ export class Picker extends FormAssociatedPicker {
                 const newSelection: string[] = this.selectedItems.slice();
                 newSelection.splice(itemIndex, 1);
                 this.selection = newSelection.toString();
-                DOM.queueUpdate(() => this.incrementFocusedItem(0));
+                Updates.enqueue(() => this.incrementFocusedItem(0));
             }
             return false;
         }
diff --git a/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts b/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts
index 37072eac8d8..a9ea59fc279 100644
--- a/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts
+++ b/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts
@@ -2,7 +2,7 @@ import { assert, expect } from "chai";
 import { RadioGroup, radioGroupTemplate as template } from "./index";
 import { Radio, radioTemplate as itemTemplate } from "../radio";
 import { fixture } from "../testing/fixture";
-import { DOM, html } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { Orientation } from "@microsoft/fast-web-utilities";
 
 const FASTRadioGroup = RadioGroup.compose({
@@ -107,7 +107,7 @@ describe("Radio Group", () => {
 
         element.disabled = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-disabled")).to.equal("false");
 
@@ -129,7 +129,7 @@ describe("Radio Group", () => {
         element.disabled = true;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect((element.querySelector(".one") as Radio).disabled).to.equal(true);
         expect((element.querySelector(".two") as Radio).disabled).to.equal(true);
@@ -159,7 +159,7 @@ describe("Radio Group", () => {
 
         element.readOnly = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-readonly")).to.equal("false");
 
@@ -181,7 +181,7 @@ describe("Radio Group", () => {
         element.readOnly = true;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect((element.querySelector(".one") as Radio).readOnly).to.equal(true);
         expect((element.querySelector(".two") as Radio).readOnly).to.equal(true);
@@ -222,7 +222,7 @@ describe("Radio Group", () => {
         element.appendChild(radio3);
 
         await connect()
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.querySelectorAll("fast-radio")[2].getAttribute("tabindex")
@@ -253,7 +253,7 @@ describe("Radio Group", () => {
         element.appendChild(radio3);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.querySelectorAll("fast-radio")[0].getAttribute("tabindex")
@@ -287,7 +287,7 @@ describe("Radio Group", () => {
         element.appendChild(radio3);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect((element.querySelectorAll("fast-radio")[2] as Radio).checked).to.equal(
             true
@@ -322,7 +322,7 @@ describe("Radio Group", () => {
         element.appendChild(radio3);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const radios: NodeList = element.querySelectorAll("fast-radio");
         expect((radios[2] as HTMLInputElement).checked).to.equal(true);
@@ -356,7 +356,7 @@ describe("Radio Group", () => {
         element.appendChild(radio3);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         const radios: NodeList = element.querySelectorAll("fast-radio");
         expect((radios[1] as HTMLInputElement).checked).to.equal(true);
@@ -391,7 +391,7 @@ describe("Radio Group", () => {
         element.appendChild(radio3);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect((element.querySelectorAll("fast-radio")[0] as Radio).checked).to.equal(
             false
diff --git a/packages/web-components/fast-foundation/src/radio/radio.spec.ts b/packages/web-components/fast-foundation/src/radio/radio.spec.ts
index 77aa57d3864..8bfdcc9a6c5 100644
--- a/packages/web-components/fast-foundation/src/radio/radio.spec.ts
+++ b/packages/web-components/fast-foundation/src/radio/radio.spec.ts
@@ -1,7 +1,7 @@
 import { expect, assert } from "chai";
 import { Radio, radioTemplate as template } from "./index";
 import { fixture } from "../testing/fixture";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { keySpace } from "@microsoft/fast-web-utilities";
 
 const FASTRadio = Radio.compose({
@@ -37,7 +37,7 @@ describe("Radio", () => {
 
         element.checked = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal("false");
 
@@ -77,7 +77,7 @@ describe("Radio", () => {
 
         element.required = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-required")).to.equal("false");
 
@@ -105,7 +105,7 @@ describe("Radio", () => {
 
         element.disabled = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-disabled")).to.equal("false");
 
@@ -133,7 +133,7 @@ describe("Radio", () => {
 
         element.readOnly = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-readonly")).to.equal("false");
 
@@ -272,7 +272,7 @@ describe("Radio", () => {
                 wasClicked = true;
             });
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.click();
 
@@ -296,7 +296,7 @@ describe("Radio", () => {
                 wasInvoked = true;
             });
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.dispatchEvent(event);
 
diff --git a/packages/web-components/fast-foundation/src/search/search.ts b/packages/web-components/fast-foundation/src/search/search.ts
index 7c77b4f55b7..aca3fe552b6 100644
--- a/packages/web-components/fast-foundation/src/search/search.ts
+++ b/packages/web-components/fast-foundation/src/search/search.ts
@@ -1,4 +1,9 @@
-import { attr, DOM, nullableNumberConverter, observable } from "@microsoft/fast-element";
+import {
+    attr,
+    nullableNumberConverter,
+    observable,
+    Updates,
+} from "@microsoft/fast-element";
 import {
     ARIAGlobalStatesAndProperties,
     StartEnd,
@@ -190,7 +195,7 @@ export class Search extends FormAssociatedSearch {
         this.validate();
 
         if (this.autofocus) {
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 this.focus();
             });
         }
diff --git a/packages/web-components/fast-foundation/src/select/select.spec.ts b/packages/web-components/fast-foundation/src/select/select.spec.ts
index 285a4004f1a..5d3d0a35039 100644
--- a/packages/web-components/fast-foundation/src/select/select.spec.ts
+++ b/packages/web-components/fast-foundation/src/select/select.spec.ts
@@ -1,4 +1,4 @@
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp, keyEnd, keyHome } from "@microsoft/fast-web-utilities";
 import { expect } from "chai";
 import { ListboxOption, listboxOptionTemplate } from "../listbox-option/index.js";
@@ -60,7 +60,7 @@ describe("Select", () => {
 
         element.disabled = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-disabled")).to.equal("false");
 
@@ -249,7 +249,7 @@ describe("Select", () => {
 
         element.click();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-expanded")).to.equal("true");
 
@@ -287,7 +287,7 @@ describe("Select", () => {
                     element.addEventListener("change", () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.false;
@@ -319,7 +319,7 @@ describe("Select", () => {
                     element.addEventListener("change", () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.false;
@@ -347,7 +347,7 @@ describe("Select", () => {
                     element.addEventListener("change", () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.false;
@@ -377,7 +377,7 @@ describe("Select", () => {
                     element.addEventListener("change", () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.false;
@@ -529,7 +529,7 @@ describe("Select", () => {
                     element.addEventListener("change", () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.true;
@@ -559,7 +559,7 @@ describe("Select", () => {
                     element.addEventListener("change", () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.true;
@@ -589,7 +589,7 @@ describe("Select", () => {
                     element.addEventListener("change", () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.true;
@@ -615,7 +615,7 @@ describe("Select", () => {
                     element.addEventListener("change", () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                DOM.nextUpdate().then(() => false),
+                Updates.next().then(() => false),
             ]);
 
             expect(wasChanged).to.be.true;
@@ -804,7 +804,7 @@ describe("Select", () => {
 
                 element.value = "two";
             }),
-            DOM.nextUpdate().then(() => false),
+            Updates.next().then(() => false),
         ]);
 
         expect(wasChanged).to.be.false;
@@ -829,7 +829,7 @@ describe("Select", () => {
 
                 element.value = "two";
             }),
-            DOM.nextUpdate().then(() => false),
+            Updates.next().then(() => false),
         ]);
 
         expect(wasChanged).to.be.false;
@@ -872,19 +872,19 @@ describe("Select", () => {
 
         await connect();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-activedescendant")).to.exist.and.equal(option1.id);
 
         element.selectNextOption();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-activedescendant")).to.equal(option2.id);
 
         element.selectNextOption();
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-activedescendant")).to.equal(option3.id);
 
@@ -904,13 +904,13 @@ describe("Select", () => {
 
         element.open = true;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-controls")).to.equal(listboxId);
 
         element.open = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-controls")).to.be.empty;
 
diff --git a/packages/web-components/fast-foundation/src/select/select.ts b/packages/web-components/fast-foundation/src/select/select.ts
index bbf0aa6a5fe..77c035621ee 100644
--- a/packages/web-components/fast-foundation/src/select/select.ts
+++ b/packages/web-components/fast-foundation/src/select/select.ts
@@ -1,5 +1,5 @@
-import type { SyntheticViewTemplate } from "@microsoft/fast-element";
-import { attr, DOM, Observable, observable, volatile } from "@microsoft/fast-element";
+import { SyntheticViewTemplate, Updates } from "@microsoft/fast-element";
+import { attr, Observable, observable, volatile } from "@microsoft/fast-element";
 import {
     keyArrowDown,
     keyArrowUp,
@@ -81,7 +81,7 @@ export class Select extends FormAssociatedSelect {
             this.indexWhenOpened = this.selectedIndex;
 
             // focus is directed to the element when `open` is changed programmatically
-            DOM.queueUpdate(() => this.focus());
+            Updates.enqueue(() => this.focus());
 
             return;
         }
diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts
index 818a0f5958d..d32b69f996d 100644
--- a/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts
+++ b/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { SliderLabel, sliderLabelTemplate as template } from "../index";
 import { fixture } from "../testing/fixture";
-import { DOM } from "@microsoft/fast-element";
+import { DOM, Updates } from "@microsoft/fast-element";
 import { Orientation } from "@microsoft/fast-web-utilities";
 
 const FASTSliderLabel = SliderLabel.compose({
@@ -50,7 +50,7 @@ describe("Slider label", () => {
 
         (element as SliderLabel).sliderOrientation = Orientation.vertical;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.classList.contains(`${Orientation.vertical}`)).to.equal(true);
         await disconnect();
diff --git a/packages/web-components/fast-foundation/src/slider/slider.spec.ts b/packages/web-components/fast-foundation/src/slider/slider.spec.ts
index be338237fba..7750d4c4832 100644
--- a/packages/web-components/fast-foundation/src/slider/slider.spec.ts
+++ b/packages/web-components/fast-foundation/src/slider/slider.spec.ts
@@ -1,7 +1,7 @@
 import { expect, assert } from "chai";
 import { Slider, sliderTemplate as template } from "./index";
 import { fixture } from "../testing/fixture";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { Orientation, Direction } from "@microsoft/fast-web-utilities";
 
 const FASTSlider = Slider.compose({
@@ -96,7 +96,7 @@ describe("Slider", () => {
 
         element.orientation = Orientation.vertical;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-orientation")).to.equal(
             `${Orientation.vertical}`
@@ -116,7 +116,7 @@ describe("Slider", () => {
 
         element.orientation = Orientation.vertical;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.classList.contains(`${Orientation.vertical}`)).to.equal(true);
         await disconnect();
@@ -133,7 +133,7 @@ describe("Slider", () => {
 
         element.direction = Direction.rtl;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.direction).to.equal(Direction.rtl);
         await disconnect();
@@ -201,7 +201,7 @@ describe("Slider", () => {
         element.value = "50";
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.value).to.equal("5");
         expect(element.getAttribute("aria-valuenow")).to.equal("5");
@@ -343,7 +343,7 @@ describe("Slider", () => {
 
             element.increment();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal("55");
             expect(element.getAttribute("aria-valuenow")).to.equal("55");
@@ -365,7 +365,7 @@ describe("Slider", () => {
 
             element.decrement();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.value).to.equal("45");
             expect(element.getAttribute("aria-valuenow")).to.equal("45");
diff --git a/packages/web-components/fast-foundation/src/switch/switch.spec.ts b/packages/web-components/fast-foundation/src/switch/switch.spec.ts
index c98f6fe4d90..0c98b26b9e6 100644
--- a/packages/web-components/fast-foundation/src/switch/switch.spec.ts
+++ b/packages/web-components/fast-foundation/src/switch/switch.spec.ts
@@ -1,7 +1,7 @@
 import { expect, assert } from "chai";
 import { Switch, switchTemplate as template } from "./index";
 import { fixture } from "../testing/fixture";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { keySpace, keyEnter } from "@microsoft/fast-web-utilities";
 
 const FASTSwitch = Switch.compose({
@@ -37,7 +37,7 @@ describe("Switch", () => {
 
         element.checked = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-checked")).to.equal("false");
 
@@ -77,7 +77,7 @@ describe("Switch", () => {
 
         element.disabled = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-disabled")).to.equal("false");
 
@@ -105,7 +105,7 @@ describe("Switch", () => {
 
         element.readOnly = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-readonly")).to.equal("false");
 
@@ -233,7 +233,7 @@ describe("Switch", () => {
                 wasClicked = true;
             });
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.click();
 
@@ -257,7 +257,7 @@ describe("Switch", () => {
                 wasInvoked = true;
             });
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.dispatchEvent(event);
 
@@ -281,7 +281,7 @@ describe("Switch", () => {
                 wasInvoked = true;
             });
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.dispatchEvent(event);
 
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
index 325ce09a69f..3e0e18d940f 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
@@ -1,5 +1,5 @@
-import { assert, expect } from "chai";
-import { css, DOM, customElement, html } from "@microsoft/fast-element";
+import { expect } from "chai";
+import { css, Updates } from "@microsoft/fast-element";
 import { fixture } from "../testing/fixture";
 import { Tab, tabTemplate } from "../tab";
 import { TabPanel, tabPanelTemplate } from "../tab-panel";
@@ -89,7 +89,7 @@ describe("Tabs", () => {
 
         element.orientation = TabsOrientation.vertical;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.classList.contains(TabsOrientation.vertical)).to.equal(true);
         await disconnect();
@@ -208,7 +208,7 @@ describe("Tabs", () => {
         element.appendChild(newPanel);
         element.insertBefore(newTab, element.querySelector("fast-tab-panel"));
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         tabId0 = element.querySelectorAll("fast-tab")[0]?.getAttribute("id");
         tabId1 = element.querySelectorAll("fast-tab")[1]?.getAttribute("id");
@@ -295,7 +295,7 @@ describe("Tabs", () => {
         element.appendChild(newPanel);
         element.insertBefore(newTab, element.querySelector("fast-tab-panel"));
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         tabpanelId0 = element.querySelectorAll("fast-tab-panel")[0]?.getAttribute("id");
         tabpanelId1 = element.querySelectorAll("fast-tab-panel")[1]?.getAttribute("id");
@@ -383,7 +383,7 @@ describe("Tabs", () => {
                     .be.true;
             });
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             tab2.click();
 
@@ -497,7 +497,7 @@ describe("Tabs", () => {
             element.activeid = "tab1";
             const tab3 = element.querySelectorAll("fast-tab")[2] as Tab;
             tab3.disabled = true;
-            await DOM.nextUpdate();
+            await Updates.next();
             tab3.click();
 
             expect(element.activeid).to.equal("tab1");
@@ -527,7 +527,7 @@ describe("Tabs", () => {
             element.activeid = "tab1";
             const tab3 = element.querySelectorAll("fast-tab")[2] as Tab;
             tab3.disabled = false;
-            await DOM.nextUpdate();
+            await Updates.next();
             tab3.click();
 
             expect(element.activeid).to.equal("tab3");
diff --git a/packages/web-components/fast-foundation/src/testing/fixture.spec.ts b/packages/web-components/fast-foundation/src/testing/fixture.spec.ts
index 814286f1cad..99fcde9f424 100644
--- a/packages/web-components/fast-foundation/src/testing/fixture.spec.ts
+++ b/packages/web-components/fast-foundation/src/testing/fixture.spec.ts
@@ -4,8 +4,8 @@ import {
     customElement,
     FASTElement,
     html,
-    DOM,
     observable,
+    Updates,
 } from "@microsoft/fast-element";
 import { uniqueElementName, fixture } from "./fixture";
 
@@ -83,7 +83,7 @@ describe("The fixture helper", () => {
 
         source.value = "something else";
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.value).to.equal(source.value);
 
diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.ts b/packages/web-components/fast-foundation/src/text-field/text-field.ts
index e3c95cf230d..8b4c9fb6979 100644
--- a/packages/web-components/fast-foundation/src/text-field/text-field.ts
+++ b/packages/web-components/fast-foundation/src/text-field/text-field.ts
@@ -1,4 +1,9 @@
-import { attr, DOM, nullableNumberConverter, observable } from "@microsoft/fast-element";
+import {
+    attr,
+    nullableNumberConverter,
+    observable,
+    Updates,
+} from "@microsoft/fast-element";
 import {
     ARIAGlobalStatesAndProperties,
     StartEnd,
@@ -202,7 +207,7 @@ export class TextField extends FormAssociatedTextField {
         this.validate();
 
         if (this.autofocus) {
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 this.focus();
             });
         }
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
index 6b222dd7436..850e0ca54de 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
@@ -1,4 +1,4 @@
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { keyArrowRight, Orientation } from "@microsoft/fast-web-utilities";
 import { expect } from "chai";
 import { fixture } from "../testing/fixture";
@@ -190,7 +190,7 @@ describe("Toolbar", () => {
     element.appendChild(startButton1);
     element.appendChild(startButton2);
 
-    await DOM.nextUpdate();
+    await Updates.next();
 
     element.focus();
 
@@ -219,7 +219,7 @@ describe("Toolbar", () => {
     element.appendChild(endButton1);
     element.appendChild(endButton2);
 
-    await DOM.nextUpdate();
+    await Updates.next();
 
     element.focus();
 
diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts
index 2ad05f72790..331f0b64659 100644
--- a/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts
+++ b/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts
@@ -1,10 +1,9 @@
 import { expect } from "chai";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 import { fixture } from "../testing/fixture";
 import { tooltipTemplate as template, Tooltip } from "./index";
 import { TooltipPosition } from "./tooltip";
 import { AnchoredRegion, anchoredRegionTemplate } from '../anchored-region';
-import { contentRect } from "../utilities/resize-observer";
 
 const FASTTooltip = Tooltip.compose({
     baseName: "tooltip",
@@ -41,7 +40,7 @@ describe("Tooltip", () => {
         tooltip.delay = 0;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(tooltip.tooltipVisible).to.equal(false);
         expect(tooltip.shadowRoot?.querySelector("fast-anchored-region")).to.equal(null);
@@ -57,7 +56,7 @@ describe("Tooltip", () => {
         tooltip.delay = 0;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(tooltip.tooltipVisible).to.equal(true);
         expect(tooltip.shadowRoot?.querySelector("fast-anchored-region")).not.to.equal(
@@ -75,7 +74,7 @@ describe("Tooltip", () => {
         tooltip.delay = 0;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(tooltip.tooltipVisible).to.equal(false);
         expect(tooltip.shadowRoot?.querySelector("fast-anchored-region")).to.equal(null);
diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts
index db9f9b18c63..e8f76f1c9b6 100644
--- a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts
+++ b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts
@@ -1,4 +1,4 @@
-import { attr, DOM, FASTElement, observable } from "@microsoft/fast-element";
+import { attr, FASTElement, observable, Updates } from "@microsoft/fast-element";
 import { Direction, keyEscape } from "@microsoft/fast-web-utilities";
 import type {
     AnchoredRegion,
@@ -567,7 +567,7 @@ export class Tooltip extends FoundationElement {
         this.currentDirection = getDirection(this);
         this.tooltipVisible = true;
         document.addEventListener("keydown", this.handleDocumentKeydown);
-        DOM.queueUpdate(this.setRegionProps);
+        Updates.enqueue(this.setRegionProps);
     };
 
     /**
diff --git a/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts b/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts
index df365e01a6e..59358191665 100644
--- a/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts
+++ b/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { TreeItem, treeItemTemplate as template } from "./index";
 import { fixture } from "../testing/fixture";
-import { DOM } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 
 const FASTTreeItem = TreeItem.compose({
     baseName: "tree-item",
@@ -34,7 +34,7 @@ describe("TreeItem", () => {
         element.expanded = true;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-expanded")).to.equal("true");
 
@@ -85,7 +85,7 @@ describe("TreeItem", () => {
 
         element.selected = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-selected")).to.equal("false");
 
@@ -125,7 +125,7 @@ describe("TreeItem", () => {
 
         element.disabled = false;
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.getAttribute("aria-disabled")).to.equal("false");
 
@@ -196,7 +196,7 @@ describe("TreeItem", () => {
         await connect();
 
         element.focus();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(element.hasAttribute("tabindex")).to.equal(true);
         expect(element.getAttribute("tabindex")).to.equal("0");
 
@@ -210,7 +210,7 @@ describe("TreeItem", () => {
         element.appendChild(nestedItem);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(element.shadowRoot?.querySelector(".expand-collapse-button")).to.exist;
 
         await disconnect();
@@ -223,7 +223,7 @@ describe("TreeItem", () => {
         element.appendChild(nestedItem);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         let button = element.shadowRoot?.querySelector(".expand-collapse-button");
 
@@ -240,7 +240,7 @@ describe("TreeItem", () => {
         element.expanded = true;
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(
             element.shadowRoot?.querySelector(".items")?.getAttribute("role")
@@ -256,7 +256,7 @@ describe("TreeItem", () => {
         element.appendChild(nestedItem);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(element.shadowRoot?.querySelector(".items")).not.to.exist;
 
@@ -278,14 +278,14 @@ describe("TreeItem", () => {
             });
 
             await connect();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             let button = element.shadowRoot?.querySelector(
                 ".expand-collapse-button"
             ) as any;
             button?.click();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasClicked).to.equal(true);
 
@@ -299,21 +299,21 @@ describe("TreeItem", () => {
             element.appendChild(nestedItem);
 
             await connect();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             let button = element.shadowRoot?.querySelector(
                 ".expand-collapse-button"
             ) as any;
             button?.click();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.expanded).to.equal(true);
             expect(element.getAttribute("aria-expanded")).to.equal("true");
 
             button?.click();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.expanded).to.equal(false);
             expect(element.getAttribute("aria-expanded")).to.equal("false");
@@ -337,7 +337,7 @@ describe("TreeItem", () => {
             await connect();
 
             element.setAttribute("selected", "true");
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(wasSelected).to.equal(true);
 
@@ -352,11 +352,11 @@ describe("TreeItem", () => {
             element.disabled = true;
 
             await connect();
-            await DOM.nextUpdate();
+            await Updates.next();
 
             element.click();
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(element.selected).to.not.equal(true);
             expect(element.getAttribute("aria-selected")).to.equal(null);
@@ -374,7 +374,7 @@ describe("TreeItem", () => {
 
                 element.setAttribute("expanded", "true");
 
-                DOM.queueUpdate(() => resolve(false));
+                Updates.enqueue(() => resolve(false));
             });
 
             expect(wasExpanded).to.equal(true);
@@ -392,7 +392,7 @@ describe("TreeItem", () => {
 
                 element.setAttribute("selected", "true");
 
-                DOM.queueUpdate(() => resolve(false));
+                Updates.enqueue(() => resolve(false));
             });
 
             expect(wasSelected).to.equal(true);
diff --git a/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts b/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts
index c37f642ed41..3ea3d3fa597 100644
--- a/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts
+++ b/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts
@@ -2,7 +2,7 @@ import { expect } from "chai";
 import { TreeView, treeViewTemplate as template } from "./index";
 import { TreeItem, treeItemTemplate as itemTemplate } from "../tree-item";
 import { fixture } from "../testing/fixture";
-import { DOM, customElement } from "@microsoft/fast-element";
+import { Updates } from "@microsoft/fast-element";
 
 const FASTTreeView = TreeView.compose({
     baseName: "tree-view",
@@ -46,7 +46,7 @@ describe("TreeView", () => {
         item1.appendChild(nestedItem);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(item1.classList.contains("nested")).to.equal(true);
         expect(item2.classList.contains("nested")).to.equal(true);
@@ -66,12 +66,12 @@ describe("TreeView", () => {
         element.appendChild(item3);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         item3.click();
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(item3.getAttribute("aria-selected")).to.equal("true");
 
@@ -89,14 +89,14 @@ describe("TreeView", () => {
         element.appendChild(item3);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         item3.click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item3.getAttribute("aria-selected")).to.equal("true");
 
         item2.click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item3.getAttribute("aria-selected")).to.equal("false");
         expect(item2.getAttribute("aria-selected")).to.equal("true");
 
@@ -114,14 +114,14 @@ describe("TreeView", () => {
         element.appendChild(item3);
 
         await connect();
-        await DOM.nextUpdate();
+        await Updates.next();
 
         item3.click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item3.getAttribute("aria-selected")).to.equal("true");
 
         item3.click();
-        await DOM.nextUpdate();
+        await Updates.next();
         expect(item3.getAttribute("aria-selected")).to.equal("false");
 
         await disconnect();
diff --git a/packages/web-components/fast-foundation/src/tree-view/tree-view.ts b/packages/web-components/fast-foundation/src/tree-view/tree-view.ts
index 99e1a0d61b5..53c0bb61744 100644
--- a/packages/web-components/fast-foundation/src/tree-view/tree-view.ts
+++ b/packages/web-components/fast-foundation/src/tree-view/tree-view.ts
@@ -1,4 +1,4 @@
-import { attr, DOM, observable } from "@microsoft/fast-element";
+import { attr, observable, Updates } from "@microsoft/fast-element";
 import {
     getDisplayedNodes,
     isHTMLElement,
@@ -115,7 +115,7 @@ export class TreeView extends FoundationElement {
     public connectedCallback(): void {
         super.connectedCallback();
         this.setAttribute("tabindex", "0");
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             this.setItems();
         });
     }
diff --git a/packages/web-components/fast-foundation/src/utilities/composed-contains.spec.ts b/packages/web-components/fast-foundation/src/utilities/composed-contains.spec.ts
index d0e45f14817..510cde91f6a 100644
--- a/packages/web-components/fast-foundation/src/utilities/composed-contains.spec.ts
+++ b/packages/web-components/fast-foundation/src/utilities/composed-contains.spec.ts
@@ -1,6 +1,6 @@
 import { composedContains } from "./composed-contains";
 import { expect } from "chai";
-import { html, customElement, ref, FASTElement, observable, DOM } from "@microsoft/fast-element";
+import { html, customElement, ref, FASTElement, observable, Updates } from "@microsoft/fast-element";
 
 @customElement({
     name: "composed-contains-element",
@@ -46,7 +46,7 @@ describe("The composedContains function", () => {
             parent.appendChild(child);
             document.body.appendChild(parent);
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(composedContains(parent, child.root)).to.be.true;
         });
@@ -58,7 +58,7 @@ describe("The composedContains function", () => {
             document.body.appendChild(parent);
             document.body.appendChild(child);
 
-            await DOM.nextUpdate();
+            await Updates.next();
 
             expect(composedContains(parent, child.root)).to.be.false;
         });
diff --git a/packages/web-components/fast-ssr/src/exports.ts b/packages/web-components/fast-ssr/src/exports.ts
index 5ca3b65dde9..030527ef999 100644
--- a/packages/web-components/fast-ssr/src/exports.ts
+++ b/packages/web-components/fast-ssr/src/exports.ts
@@ -1,8 +1,8 @@
 import { RenderInfo } from "@lit-labs/ssr";
 import {
     Compiler,
-    DOM,
     ElementStyles,
+    Updates,
     ViewBehaviorFactory,
 } from "@microsoft/fast-element";
 import { FASTElementRenderer } from "./element-renderer/element-renderer.js";
@@ -31,7 +31,7 @@ Compiler.setDefaultStrategy(
 );
 
 ElementStyles.setDefaultStrategy(FASTSSRStyleStrategy);
-DOM.setUpdateMode(false);
+Updates.setMode(false);
 
 /**
  * Factory for creating SSR rendering assets.
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.ts
index 04ccf7c2de5..2d3361394af 100644
--- a/sites/fast-website/src/app/components/fast-frame/fast-frame.ts
+++ b/sites/fast-website/src/app/components/fast-frame/fast-frame.ts
@@ -1,9 +1,8 @@
-import { FASTElement, attr, observable, DOM } from "@microsoft/fast-element";
+import { FASTElement, attr, observable, Updates } from "@microsoft/fast-element";
 import {
     StandardLuminance,
     PaletteRGB,
     SwatchRGB,
-    neutralLayer1Recipe,
     baseLayerLuminance,
     neutralPalette,
     accentPalette,
@@ -13,10 +12,6 @@ import {
     baseHorizontalSpacingMultiplier,
     controlCornerRadius,
     strokeWidth,
-    neutralLayer1,
-    neutralLayer2,
-    neutralLayer2Recipe,
-    neutralLayerCardContainerRecipe,
     neutralLayerCardContainer,
 } from "@microsoft/fast-components";
 import { RadioGroup, Slider } from "@microsoft/fast-foundation";
@@ -38,7 +33,7 @@ export class FastFrame extends FASTElement {
     public baseLayerLuminance: number = StandardLuminance.DarkMode;
     baseLayerLuminanceChanged() {
         if (typeof this.baseLayerLuminance === "number") {
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 baseLayerLuminance.setValueFor(this.preview, this.baseLayerLuminance);
             });
         }
@@ -68,7 +63,7 @@ export class FastFrame extends FASTElement {
     public neutralPalette: PaletteRGB;
     neutralPaletteChanged() {
         if (this.neutralPalette) {
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 neutralPalette.setValueFor(this.preview, this.neutralPalette);
             });
         }
@@ -78,7 +73,7 @@ export class FastFrame extends FASTElement {
     public accentPalette: PaletteRGB;
     accentPaletteChanged() {
         if (this.accentPalette) {
-            DOM.queueUpdate(() => {
+            Updates.enqueue(() => {
                 accentPalette.setValueFor(this.preview, this.accentPalette);
             });
         }
@@ -87,7 +82,7 @@ export class FastFrame extends FASTElement {
     @observable
     public density: number = 0;
     densityChanged() {
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             density.setValueFor(this.preview, this.density);
         });
     }
@@ -95,7 +90,7 @@ export class FastFrame extends FASTElement {
     @observable
     public borderRadius: number = 3;
     borderRadiusChanged() {
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             controlCornerRadius.setValueFor(this.preview, this.borderRadius);
         });
     }
@@ -103,7 +98,7 @@ export class FastFrame extends FASTElement {
     @observable
     public strokeWidth: number = 1;
     strokeWidthChanged() {
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             strokeWidth.setValueFor(this.preview, this.strokeWidth);
         });
     }

From 4e94509fde5be4b81ca1f63314208c47325675d8 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Fri, 13 May 2022 16:02:11 -0400
Subject: [PATCH 106/135] fix: enable safer type inference on the repeat helper
 (#5975)

* fix: enable safer type inference on the repeat helper

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...t-230be6d2-2fd7-4d50-938b-fd03e18f362f.json |  7 +++++++
 .../fast-element/docs/api-report.md            |  8 +++-----
 .../fast-element/src/interfaces.ts             | 10 ----------
 .../fast-element/src/templating/repeat.ts      | 18 +++++++-----------
 .../fast-element/src/templating/template.ts    |  2 +-
 5 files changed, 18 insertions(+), 27 deletions(-)
 create mode 100644 change/@microsoft-fast-element-230be6d2-2fd7-4d50-938b-fd03e18f362f.json

diff --git a/change/@microsoft-fast-element-230be6d2-2fd7-4d50-938b-fd03e18f362f.json b/change/@microsoft-fast-element-230be6d2-2fd7-4d50-938b-fd03e18f362f.json
new file mode 100644
index 00000000000..b31148d6654
--- /dev/null
+++ b/change/@microsoft-fast-element-230be6d2-2fd7-4d50-938b-fd03e18f362f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: enable safer type inference on the repeat helper",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 18552a5dd10..c600650516a 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -570,10 +570,8 @@ export class RefDirective extends StatelessAttachedAttributeDirective<string> {
     unbind(): void;
 }
 
-// Warning: (ae-forgotten-export) The symbol "ArrayItem" needs to be exported by the entry point index.d.ts
-//
 // @public
-export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: SyntheticViewTemplate<ArrayItem<TArray>, TSource, RootContext> | Binding<TSource, SyntheticViewTemplate<ArrayItem<TArray>, TSource, RootContext>>, options?: {
+export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: ViewTemplate | Binding<TSource, ViewTemplate, RootContext>, options?: {
     positioning: false;
 } | {
     recycle: true;
@@ -586,7 +584,7 @@ export function repeat<TSource = any, TArray extends ReadonlyArray<any> = Readon
 }): CaptureType<TSource>;
 
 // @public
-export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: ChildViewTemplate<ArrayItem<TArray>, TSource> | Binding<TSource, ChildViewTemplate<ArrayItem<TArray>, TSource>>, options?: {
+export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: ChildViewTemplate | Binding<TSource, ChildViewTemplate, ChildContext>, options?: {
     positioning: false;
 } | {
     recycle: true;
@@ -599,7 +597,7 @@ export function repeat<TSource = any, TArray extends ReadonlyArray<any> = Readon
 }): CaptureType<TSource>;
 
 // @public
-export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: ItemViewTemplate<ArrayItem<TArray>, TSource> | Binding<TSource, ItemViewTemplate<ArrayItem<TArray>, TSource>>, options: {
+export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: ItemViewTemplate | Binding<TSource, ItemViewTemplate, ItemContext>, options: {
     positioning: true;
 } | {
     positioning: true;
diff --git a/packages/web-components/fast-element/src/interfaces.ts b/packages/web-components/fast-element/src/interfaces.ts
index c12b72c44db..7f7179b6f8f 100644
--- a/packages/web-components/fast-element/src/interfaces.ts
+++ b/packages/web-components/fast-element/src/interfaces.ts
@@ -21,16 +21,6 @@ export type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
 
-/**
- * Extracts the item type from an array.
- * @public
- */
-export type ArrayItem<T> = T extends ReadonlyArray<infer TItem>
-    ? TItem
-    : T extends Array<infer TItem>
-    ? TItem
-    : any;
-
 /**
  * A policy for use with the standard trustedTypes platform API.
  * @public
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index ab2bcb349ee..63b654daf61 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -1,4 +1,4 @@
-import { ArrayItem, isFunction } from "../interfaces.js";
+import { isFunction } from "../interfaces.js";
 import type { Splice } from "../observation/array-change-records.js";
 import { enableArrayObservation } from "../observation/array-observer.js";
 import type { Behavior } from "../observation/behavior.js";
@@ -25,6 +25,7 @@ import type {
     ChildViewTemplate,
     ItemViewTemplate,
     SyntheticViewTemplate,
+    ViewTemplate,
 } from "./template.js";
 import { HTMLView, SyntheticView } from "./view.js";
 
@@ -369,12 +370,7 @@ export function repeat<
     TArray extends ReadonlyArray<any> = ReadonlyArray<any>
 >(
     itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>,
-    templateOrTemplateBinding:
-        | SyntheticViewTemplate<ArrayItem<TArray>, TSource, RootContext>
-        | Binding<
-              TSource,
-              SyntheticViewTemplate<ArrayItem<TArray>, TSource, RootContext>
-          >,
+    templateOrTemplateBinding: ViewTemplate | Binding<TSource, ViewTemplate, RootContext>,
     options?:
         | { positioning: false }
         | { recycle: true }
@@ -395,8 +391,8 @@ export function repeat<
 >(
     itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>,
     templateOrTemplateBinding:
-        | ChildViewTemplate<ArrayItem<TArray>, TSource>
-        | Binding<TSource, ChildViewTemplate<ArrayItem<TArray>, TSource>>,
+        | ChildViewTemplate
+        | Binding<TSource, ChildViewTemplate, ChildContext>,
     options?:
         | { positioning: false }
         | { recycle: true }
@@ -417,8 +413,8 @@ export function repeat<
 >(
     itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>,
     templateOrTemplateBinding:
-        | ItemViewTemplate<ArrayItem<TArray>, TSource>
-        | Binding<TSource, ItemViewTemplate<ArrayItem<TArray>, TSource>>,
+        | ItemViewTemplate
+        | Binding<TSource, ItemViewTemplate, ItemContext>,
     options:
         | { positioning: true }
         | { positioning: true; recycle: true }
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 1ee73c31511..fb989f05137 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -122,7 +122,7 @@ export class ViewTemplate<
 
     /**
      * Used for TypeScript purposes only.
-     * Do not sure.
+     * Do not use.
      */
     type: any;
 

From 18a1c3321f4333961f68102a9421798bdc1dcf7b Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Fri, 13 May 2022 16:17:41 -0400
Subject: [PATCH 107/135] feat: enable array length observation (#5977)

* feat: enable array length observation

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-b447782c-22f3-4f6a-96f5-b7afc160af0b.json |  7 ++
 .../fast-element/docs/api-report.md           |  8 +-
 .../src/observation/array-observer.spec.ts    | 94 ++++++++++++++++++-
 .../src/observation/array-observer.ts         | 46 ++++++++-
 .../src/observation/observable.ts             |  8 +-
 5 files changed, 155 insertions(+), 8 deletions(-)
 create mode 100644 change/@microsoft-fast-element-b447782c-22f3-4f6a-96f5-b7afc160af0b.json

diff --git a/change/@microsoft-fast-element-b447782c-22f3-4f6a-96f5-b7afc160af0b.json b/change/@microsoft-fast-element-b447782c-22f3-4f6a-96f5-b7afc160af0b.json
new file mode 100644
index 00000000000..df141610244
--- /dev/null
+++ b/change/@microsoft-fast-element-b447782c-22f3-4f6a-96f5-b7afc160af0b.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: enable array length observation",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index c600650516a..6e3f91757ee 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -117,7 +117,7 @@ export type BindingMode = Record<number, BindingType>;
 // @public
 export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier {
     disconnect(): void;
-    observe(source: TSource, context: ExecutionContext<TParent>): TReturn;
+    observe(source: TSource, context?: ExecutionContext<TParent>): TReturn;
     records(): IterableIterator<ObservationRecord>;
 }
 
@@ -458,6 +458,10 @@ export interface ItemViewTemplate<TSource = any, TParent = any> {
     type: "item";
 }
 
+// @public
+function length_2<T>(array: readonly T[]): number;
+export { length_2 as length }
+
 // @public
 export const Markup: Readonly<{
     interpolation: (id: string) => string;
@@ -505,7 +509,7 @@ export const nullableNumberConverter: ValueConverter;
 // @public
 export const Observable: Readonly<{
     setArrayObserverFactory(factory: (collection: any[]) => Notifier): void;
-    getNotifier: (source: any) => Notifier;
+    getNotifier: <T extends Notifier = Notifier>(source: any) => T;
     track(source: unknown, propertyName: string): void;
     trackVolatile(): void;
     notify(source: unknown, args: any): void;
diff --git a/packages/web-components/fast-element/src/observation/array-observer.spec.ts b/packages/web-components/fast-element/src/observation/array-observer.spec.ts
index 61411bea639..26cb122022c 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.spec.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.spec.ts
@@ -1,7 +1,8 @@
 import { expect } from "chai";
 import { Observable } from "./observable";
-import { enableArrayObservation } from "./array-observer";
+import { enableArrayObservation, length } from "./array-observer";
 import { SubscriberSet } from "./notifier";
+import { DOM } from "../dom";
 
 describe("The ArrayObserver", () => {
     it("can be retrieved through Observable.getNotifier()", () => {
@@ -54,3 +55,94 @@ describe("The ArrayObserver", () => {
         expect(keys).eql(["0", "1", "2"])
     });
 });
+
+describe("The array length observer", () => {
+    class Model {
+        items: any[];
+    }
+
+    it("returns zero length if the array is undefined", async () => {
+        const instance = new Model();
+        const observer = Observable.binding<Model>(x => length(x.items));
+
+        const value = observer.observe(instance)
+
+        expect(value).to.equal(0);
+
+        observer.disconnect();
+    });
+
+    it("returns zero length if the array is null", async () => {
+        const instance = new Model();
+        instance.items = null as any;
+        const observer = Observable.binding<Model>(x => length(x.items));
+
+        const value = observer.observe(instance)
+
+        expect(value).to.equal(0);
+
+        observer.disconnect();
+    });
+
+    it("returns length of an array", async () => {
+        const instance = new Model();
+        instance.items = [1,2,3,4,5];
+        const observer = Observable.binding<Model>(x => length(x.items));
+
+        const value = observer.observe(instance)
+
+        expect(value).to.equal(5);
+
+        observer.disconnect();
+    });
+
+    it("notifies when the array length changes", async () => {
+        const instance = new Model();
+        instance.items = [1,2,3,4,5];
+
+        let changed = false;
+        const observer = Observable.binding<Model>(x => length(x.items), {
+            handleChange() {
+                changed = true;
+            }
+        });
+
+        const value = observer.observe(instance)
+
+        expect(value).to.equal(5);
+
+        instance.items.push(6);
+
+        await DOM.nextUpdate();
+
+        expect(changed).to.be.true;
+        expect(observer.observe(instance)).to.equal(6);
+
+        observer.disconnect();
+    });
+
+    it("does not notify on changes that don't change the length", async () => {
+        const instance = new Model();
+        instance.items = [1,2,3,4,5];
+
+        let changed = false;
+        const observer = Observable.binding<Model>(x => length(x.items), {
+            handleChange() {
+                changed = true;
+            }
+        });
+
+        const value = observer.observe(instance);
+
+        expect(value).to.equal(5);
+
+        instance.items.splice(2, 1, 6);
+
+        await DOM.nextUpdate();
+
+        expect(changed).to.be.false;
+        expect(observer.observe(instance)).to.equal(5);
+
+        observer.disconnect();
+    });
+});
diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index 0942a9000e4..270938ba478 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -1,6 +1,6 @@
 import { Updates } from "./update-queue.js";
 import { Splice } from "./array-change-records.js";
-import { SubscriberSet } from "./notifier.js";
+import { Subscriber, SubscriberSet } from "./notifier.js";
 import type { Notifier } from "./notifier.js";
 import { Observable } from "./observable.js";
 
@@ -11,10 +11,18 @@ function setNonEnumerable(target: any, property: string, value: any): void {
     });
 }
 
+interface LengthSubscriber extends Subscriber {
+    length: number;
+}
+
 class ArrayObserver extends SubscriberSet {
     private oldCollection: any[] | undefined = void 0;
     private splices: Splice[] | undefined = void 0;
     private needsQueue: boolean = true;
+
+    /** @internal */
+    public lengthSubscriber: LengthSubscriber | undefined = void 0;
+
     call: () => void = this.flush;
 
     constructor(subject: any[]) {
@@ -228,3 +236,39 @@ export function enableArrayObservation(): void {
         });
     }
 }
+
+/**
+ * Enables observing the length of an array.
+ * @param array - The array to observe the length of.
+ * @returns The length of the array.
+ * @public
+ */
+export function length<T>(array: readonly T[]): number {
+    if (!array) {
+        return 0;
+    }
+
+    let arrayObserver = (array as any).$fastController as ArrayObserver;
+    if (arrayObserver === void 0) {
+        enableArrayObservation();
+        arrayObserver = Observable.getNotifier<ArrayObserver>(array);
+    }
+
+    let lengthSubscriber = arrayObserver.lengthSubscriber;
+    if (lengthSubscriber === void 0) {
+        arrayObserver.lengthSubscriber = lengthSubscriber = {
+            length: array.length,
+            handleChange() {
+                if (this.length !== array.length) {
+                    this.length = array.length;
+                    Observable.notify(lengthSubscriber, "length");
+                }
+            },
+        };
+
+        arrayObserver.subscribe(lengthSubscriber);
+    }
+
+    Observable.track(lengthSubscriber, "length");
+    return array.length;
+}
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index 53031a33b60..4c147b681d7 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -72,7 +72,7 @@ export interface BindingObserver<TSource = any, TReturn = any, TParent = any>
      * @param context - The execution context to execute the binding within.
      * @returns The value of the binding.
      */
-    observe(source: TSource, context: ExecutionContext<TParent>): TReturn;
+    observe(source: TSource, context?: ExecutionContext<TParent>): TReturn;
 
     /**
      * Unsubscribe from all dependent observables of the binding.
@@ -100,7 +100,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
         throw FAST.error(Message.needsArrayObservation);
     };
 
-    function getNotifier(source: any): Notifier {
+    function getNotifier<T extends Notifier = Notifier>(source: any): T {
         let found = source.$fastController ?? notifierLookup.get(source);
 
         if (found === void 0) {
@@ -191,7 +191,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             super(binding, initialSubscriber);
         }
 
-        public observe(source: TSource, context: ExecutionContext): TReturn {
+        public observe(source: TSource, context?: ExecutionContext): TReturn {
             if (this.needsRefresh && this.last !== null) {
                 this.disconnect();
             }
@@ -199,7 +199,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             const previousWatcher = watcher;
             watcher = this.needsRefresh ? this : void 0;
             this.needsRefresh = this.isVolatileBinding;
-            const result = this.binding(source, context);
+            const result = this.binding(source, context ?? ExecutionContext.default);
             watcher = previousWatcher;
 
             return result;

From e9094a902d4972da92a66251f5d3dfde8e85d92a Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Fri, 13 May 2022 16:39:27 -0400
Subject: [PATCH 108/135] fix: merge bug related to moved APIs (#5978)

* fix: merge bug related to moved APIs

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-fast-element-95550d39-9c8c-4e02-9145-6e5ff25316da.json | 7 +++++++
 .../fast-element/src/observation/array-observer.spec.ts    | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 change/@microsoft-fast-element-95550d39-9c8c-4e02-9145-6e5ff25316da.json

diff --git a/change/@microsoft-fast-element-95550d39-9c8c-4e02-9145-6e5ff25316da.json b/change/@microsoft-fast-element-95550d39-9c8c-4e02-9145-6e5ff25316da.json
new file mode 100644
index 00000000000..5938101aaa2
--- /dev/null
+++ b/change/@microsoft-fast-element-95550d39-9c8c-4e02-9145-6e5ff25316da.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: merge bug related to moved APIs",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/src/observation/array-observer.spec.ts b/packages/web-components/fast-element/src/observation/array-observer.spec.ts
index 26cb122022c..b8b0b6bcfea 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.spec.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.spec.ts
@@ -2,7 +2,7 @@ import { expect } from "chai";
 import { Observable } from "./observable";
 import { enableArrayObservation, length } from "./array-observer";
 import { SubscriberSet } from "./notifier";
-import { DOM } from "../dom";
+import { Updates } from "./update-queue";
 
 describe("The ArrayObserver", () => {
     it("can be retrieved through Observable.getNotifier()", () => {
@@ -113,7 +113,7 @@ describe("The array length observer", () => {
 
         instance.items.push(6);
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(changed).to.be.true;
         expect(observer.observe(instance)).to.equal(6);
@@ -138,7 +138,7 @@ describe("The array length observer", () => {
 
         instance.items.splice(2, 1, 6);
 
-        await DOM.nextUpdate();
+        await Updates.next();
 
         expect(changed).to.be.false;
         expect(observer.observe(instance)).to.equal(5);

From cd0b1ca4f8b8a9540dbbbbe747ceb22e08130c44 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Mon, 16 May 2022 11:17:05 -0700
Subject: [PATCH 109/135] chore: add SSR documentation (#5969)

* adding ssr documentation

* exporting ViewBehaviorFactoryRenderer type

* pretty pretty

* fixing api docs

* pretty pretty pretty

* Update packages/web-components/fast-ssr/README.md

Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

* Update packages/web-components/fast-ssr/README.md

Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

* Update packages/web-components/fast-ssr/README.md

Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

* Update packages/web-components/fast-ssr/README.md

Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

* Update packages/web-components/fast-ssr/README.md

Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

* Update packages/web-components/fast-ssr/README.md

Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>
---
 packages/web-components/fast-ssr/README.md    | 151 +++++++++++++++++-
 .../fast-ssr/docs/api-report.md               |   8 +-
 .../web-components/fast-ssr/src/exports.ts    |  10 +-
 .../fast-command-buffer/index.fixture.html    |   8 +-
 .../src/styles/fast-style.fixture.html        |  40 ++---
 .../src/template-renderer/directives.ts       |  16 +-
 yarn.lock                                     |  27 +---
 7 files changed, 191 insertions(+), 69 deletions(-)

diff --git a/packages/web-components/fast-ssr/README.md b/packages/web-components/fast-ssr/README.md
index c9302b92748..7067f09fc0b 100644
--- a/packages/web-components/fast-ssr/README.md
+++ b/packages/web-components/fast-ssr/README.md
@@ -1,7 +1,150 @@
 # FAST SSR
-This package contains tools to render FAST components outside the browser. More details to follow...
 
-## Testing
-This package uses Playwright and a lightweight web server for running tests. You can run the tests by running `npm run test`.
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-ssr.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-ssr)
 
-> Playwright may prompt you to install browsers to run the tests. If so, follow the instructions provided or run `npm run install-playwright-browsers`.
\ No newline at end of file
+The `@microsoft/fast-ssr` package contains a NodeJS solution for rendering FAST templates and components. While primarily intended for supporting server-side rendering (SSR) scenarios, it also allows FAST to be used as a general purpose HTML templating solution.
+
+## Requirements
+- [NodeJS ^16.0.0](https://nodejs.org) 
+- [`@microsoft/fast-element@^2.0.0`](https://www.npmjs.com/package/@microsoft/fast-element)
+
+## Important Notes
+`@microsoft/fast-ssr` is built using ES modules. This documentation assumes all JavaScript is run as ES module scripts. If that is not the case in your project, you can force ES module format by converting `.js` extensions to `.mjs`. [Details on this here.](https://nodejs.org/api/packages.html)
+
+### Design Philosophy
+Performance is a core tenant of this package. To help achieve that, it avoids needing a comprehensive DOM implementation to render components, instead relying on a minimal set of DOM globals provided by the packaged DOM shim. Doing so comes with an important idea to understand; non-custom elements (`<div>`, `<p>`, etc) are never instantiated as JavaScript objects and you cannot gain references to these elements declared in a template. The parts of a template containing these elements are emitted as-is to the SSR string result (with any bindings evaluated). It is for this reason [certain directives are no-ops](#directive-support-matrix). Additionally, components are rendered using only their template. Imperative code that adds elements or DOM content to a component will be invisible to the template renderer and will not be yielded in the final string result.
+
+## Community Alignment
+`@microsoft/fast-ssr` internally implements the `ElementRenderer` interface proposed [here](https://github.com/webcomponents-cg/community-protocols/issues/7#issuecomment-825151215) and implemented in [`@lit-labs/ssr`](https://github.com/lit/lit/tree/main/packages/labs/ssr). The `ElementRenderer` interface allows Custom Elements created by different component authoring libraries to be rendered side-by-side, maximizing the portability and interoperability of Web Components. For more on how to do that, see the section on [configuring the RenderInfo object](#configuring-the-renderinfo-object).
+
+## Installation
+Install `@microsoft/fast-ssr` and `@microsoft/fast-element` using your package manager of choice:
+
+```shell
+npm install --save @microsoft/fast-ssr @microsoft/fast-element
+```
+## Usage
+### Installing the DOM Shim
+`@microsoft/fast-ssr` requires a minimal DOM implementation to function. Install the shim by importing it. Doing so will ensure availability of certain DOM globals like `HTMLElement`, `Document`, etc.
+
+```js
+import "@microsoft/fast-ssr/install-dom-shim";
+```
+
+Alternatively, a full DOM implementation such as [`jsdom`](https://github.com/jsdom/jsdom) or [`happy-dom`](https://github.com/capricorn86/happy-dom) can be used.
+
+### Construct the Renderer
+Import the renderer factory and construct a `TemplateRenderer`. You will also need a `RenderInfo` object. A default is provided, more on this [here](#configuring-the-renderinfo-object).
+```js
+import fastSSR from "@microsoft/fast-ssr";
+
+const { templateRenderer, defaultRenderInfo } = fastSSR();
+```
+
+### Define Custom Elements
+Ensure that the custom elements used in the template you are rendering are defined in the `customElements` registry. This example defines a component directly, but you can also import any components being used:
+```js
+import { customElement, html, FASTElement } from "@microsoft/fast-element":
+
+@customElement({name: "my-element", template: html`<h1>${x => x.message}</h1>`})
+class MyElement extends FASTElement {
+    @attr
+    public message = "Hello World";
+}
+```
+
+### Rendering
+With the `TemplateRenderer` created and a custom element defined, the `TemplateRenderer` can now render a template with that element. The result will be an `iterableIterator<string>`, which allows the result to be streamed to the client before the entire template has been rendered.
+
+```js
+const result = templateRenderer.render(html`
+    <!DOCTYPE HTML>
+    <html>
+        <body>
+            <my-element></my-element>
+        </body>
+    </html>
+`, defaultRenderInfo);
+```
+
+The template being rendered can also be a fragment of HTML, it does not need to be a valid document:
+
+```js
+const result = templateRenderer.render(html`<my-element></my-element>`, defaultRenderInfo);
+```
+
+#### Rendering Strings
+The template renderer can also render `string` types just as it would a template:
+
+```js
+const result = templateRenderer.render("<!DOCTYPE HTML><html><body><my-element></my-element></body></html>", defaultRenderInfo);
+```
+
+#### Rendering Templates with Bindings
+A template can be rendered with arbitrary source data by providing that source as the third argument to `.render()`. When doing so, bindings are invoked with that source data:
+
+```ts
+const result = templateRenderer.render(html`
+    <h1>${x => x.message}</h1>
+`, defaultRenderInfo, { message: "hello world" });
+```
+
+#### Rendering Templates with Directives
+The `TemplateRenderer` can render templates with directives such as `when` and `repeat`. Some directives are no-ops, see the [directive support matrix](#directive-support-matrix) for details.
+
+```ts
+import { when, repeat } from "@microsoft/fast-element";
+
+const result = templateRenderer.render(html`
+    ${when(x => x.shouldRender, html`
+        <h1>Colors of a pixel</h1>
+        ${repeat(x => x.data, html`<li>${color => color}</li>`)}
+    `)}
+`, defaultRenderInfo, { shouldRender: true, data: ["red", "green", "blue"] });
+```
+
+##### Directive Support Matrix
+
+|Directive Name|Support|
+|-|-|
+|[`children`](https://www.fast.design/docs/fast-element/using-directives#the-children-directive)|[![](https://img.shields.io/badge/-Unsupported-red)]()|
+|[`ref`](https://www.fast.design/docs/fast-element/using-directives#the-ref-directive)|[![](https://img.shields.io/badge/-Unsupported-red)]()|
+|[`repeat`](https://www.fast.design/docs/fast-element/using-directives#the-repeat-directive)|[![](https://img.shields.io/badge/-Supported-brightgreen)]()|
+|[`slotted`](https://www.fast.design/docs/fast-element/using-directives#the-slotted-directive)|[![](https://img.shields.io/badge/-Unsupported-red)]()|
+|[`when`](https://www.fast.design/docs/fast-element/using-directives#the-when-directive)|[![](https://img.shields.io/badge/-Supported-brightgreen)]()|
+
+> Unsupported directives are no-ops. To understand more about why, see the [Design Philosophy.](#design-philosophy)
+
+### Configuring the RenderInfo Object
+`TemplateRenderer.render()` must be invoked with a `RenderInfo` object. Its purpose is to provide different element renderers to the process, as well as metadata about the rendering process. It can be used to render custom elements from different templating libraries in the same process. A pre-generated object is created for you by the factory function, but you can also easily construct your own: 
+
+```js
+const { templateRenderer, elementRenderer } = fastSSR();
+templateRenderer.render(html`<some-fast-element></some-fast-element>`, {
+    elementRenderers: [elementRenderer],
+    customElementHostStack: [],
+    customElementInstanceStack: [],
+});
+```
+
+To render elements built with another library, that library will need to provide an `ElementRenderer` for the library. For example, to render a Lit element along-side a FAST element, provide the FAST `ElementRenderer` *and* the Lit `ElementRenderer` to the `RenderInfo` object:
+
+```js
+import fastSSR from "@microsoft/fast-ssr";
+import { html } from "@microsoft/fast-element";
+import { LitElementRenderer } from "@lit-labs/ssr/lib/lit-element-renderer.js"
+
+const { templateRenderer, elementRenderer } = fastSSR();
+// Some implementation that defines both FAST and Lit components
+defineComponents();
+
+const result = templateRenderer.render(html`
+    <my-fast-element></my-fast-element>
+    <my-lit-element></my-lit-element>
+`, {
+    elementRenderers: [elementRenderer, LitElementRenderer],
+    customElementHostStack: [],
+    customElementInstanceStack: []
+});
+```
diff --git a/packages/web-components/fast-ssr/docs/api-report.md b/packages/web-components/fast-ssr/docs/api-report.md
index 51c8333c316..e3ca9580a8d 100644
--- a/packages/web-components/fast-ssr/docs/api-report.md
+++ b/packages/web-components/fast-ssr/docs/api-report.md
@@ -51,12 +51,16 @@ export class TemplateRenderer {
     //
     // @internal
     renderOpCodes(codes: Op[], renderInfo: RenderInfo, source: unknown, context: ExecutionContext): IterableIterator<string>;
-    // Warning: (ae-forgotten-export) The symbol "ViewBehaviorFactoryRenderer" needs to be exported by the entry point exports.d.ts
-    //
     // @internal
     withViewBehaviorFactoryRenderers(...renderers: ViewBehaviorFactoryRenderer<any>[]): void;
 }
 
+// @beta
+export interface ViewBehaviorFactoryRenderer<T extends ViewBehaviorFactory> {
+    matcher: Constructable<T>;
+    render(behavior: T, renderInfo: RenderInfo, source: any, renderer: TemplateRenderer, context: ExecutionContext): IterableIterator<string>;
+}
+
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/web-components/fast-ssr/src/exports.ts b/packages/web-components/fast-ssr/src/exports.ts
index 030527ef999..47872e61ca0 100644
--- a/packages/web-components/fast-ssr/src/exports.ts
+++ b/packages/web-components/fast-ssr/src/exports.ts
@@ -8,7 +8,10 @@ import {
 import { FASTElementRenderer } from "./element-renderer/element-renderer.js";
 import { FASTSSRStyleStrategy } from "./element-renderer/style-strategy.js";
 import { StyleElementStyleRenderer, StyleRenderer } from "./styles/style-renderer.js";
-import { defaultViewBehaviorFactoryRenderers } from "./template-renderer/directives.js";
+import {
+    defaultViewBehaviorFactoryRenderers,
+    ViewBehaviorFactoryRenderer,
+} from "./template-renderer/directives.js";
 import {
     ComponentDOMEmissionMode,
     TemplateRenderer,
@@ -74,8 +77,9 @@ export default function fastSSR(): {
 }
 
 export type {
-    TemplateRenderer,
+    ComponentDOMEmissionMode,
     FASTElementRenderer,
     StyleRenderer,
-    ComponentDOMEmissionMode,
+    TemplateRenderer,
+    ViewBehaviorFactoryRenderer,
 };
diff --git a/packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html b/packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html
index 641b897e4db..37b33f0d628 100644
--- a/packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html
+++ b/packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html
@@ -203,9 +203,7 @@ <h2>Heading</h2>
                                     fast-id="button1"
                                     data-fast-buffer-events="click"
                                 >
-                                    <span>
-                                        Button
-                                    </span>
+                                    <span>Button</span>
                                 </button>
                                 <fake-hydrate-button class="fakeHydrateBtn">
                                     Fake hydrate
@@ -244,9 +242,7 @@ <h2>Heading</h2>
                                     fast-id="button2"
                                     data-fast-buffer-events="click,mouseover"
                                 >
-                                    <span>
-                                        Button
-                                    </span>
+                                    <span>Button</span>
                                 </button>
                                 <fake-hydrate-button class="fakeHydrateBtn">
                                     Fake hydrate
diff --git a/packages/web-components/fast-ssr/src/styles/fast-style.fixture.html b/packages/web-components/fast-ssr/src/styles/fast-style.fixture.html
index 08413597c27..7cc614424f2 100644
--- a/packages/web-components/fast-ssr/src/styles/fast-style.fixture.html
+++ b/packages/web-components/fast-ssr/src/styles/fast-style.fixture.html
@@ -189,9 +189,7 @@ <h2>Heading</h2>
                             }"
                             ></fast-style>
                             <button class="control">
-                                <span>
-                                    Button
-                                </span>
+                                <span>Button</span>
                             </button>
                         </template>
                     </fast-button>
@@ -215,9 +213,7 @@ <h2>Heading</h2>
                         <template shadowroot="open">
                             <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
-                                <span>
-                                    Button
-                                </span>
+                                <span>Button</span>
                             </button>
                         </template>
                     </fast-button>
@@ -241,9 +237,7 @@ <h2>Heading</h2>
                         <template shadowroot="open">
                             <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
-                                <span>
-                                    Button
-                                </span>
+                                <span>Button</span>
                             </button>
                         </template>
                     </fast-button>
@@ -267,9 +261,7 @@ <h2>Heading</h2>
                         <template shadowroot="open">
                             <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
-                                <span>
-                                    Button
-                                </span>
+                                <span>Button</span>
                             </button>
                         </template>
                     </fast-button>
@@ -293,9 +285,7 @@ <h2>Heading</h2>
                         <template shadowroot="open">
                             <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
-                                <span>
-                                    Button
-                                </span>
+                                <span>Button</span>
                             </button>
                         </template>
                     </fast-button>
@@ -319,9 +309,7 @@ <h2>Heading</h2>
                         <template shadowroot="open">
                             <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
-                                <span>
-                                    Button
-                                </span>
+                                <span>Button</span>
                             </button>
                         </template>
                     </fast-button>
@@ -345,9 +333,7 @@ <h2>Heading</h2>
                         <template shadowroot="open">
                             <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
-                                <span>
-                                    Button
-                                </span>
+                                <span>Button</span>
                             </button>
                         </template>
                     </fast-button>
@@ -371,9 +357,7 @@ <h2>Heading</h2>
                         <template shadowroot="open">
                             <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
-                                <span>
-                                    Button
-                                </span>
+                                <span>Button</span>
                             </button>
                         </template>
                     </fast-button>
@@ -397,9 +381,7 @@ <h2>Heading</h2>
                         <template shadowroot="open">
                             <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
-                                <span>
-                                    Button
-                                </span>
+                                <span>Button</span>
                             </button>
                         </template>
                     </fast-button>
@@ -423,9 +405,7 @@ <h2>Heading</h2>
                         <template shadowroot="open">
                             <fast-style style-id="fast-button"></fast-style>
                             <button class="control">
-                                <span>
-                                    Button
-                                </span>
+                                <span>Button</span>
                             </button>
                         </template>
                     </fast-button>
diff --git a/packages/web-components/fast-ssr/src/template-renderer/directives.ts b/packages/web-components/fast-ssr/src/template-renderer/directives.ts
index 59ab38fccba..d0d38af7af3 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/directives.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/directives.ts
@@ -13,9 +13,19 @@ import {
 import { TemplateRenderer } from "./template-renderer.js";
 
 /**
- * Describes an implementation that can render a directive
+ * Describes an implementation that can render a directive.
+ *
+ * @beta
  */
 export interface ViewBehaviorFactoryRenderer<T extends ViewBehaviorFactory> {
+    /**
+     * Renders a ViewBehaviorFactory
+     * @param behavior - The behavior to render
+     * @param renderInfo - The current RenderInfo context
+     * @param source - Source data
+     * @param renderer - The current TemplateRenderer
+     * @param context - The ExecutionContext
+     */
     render(
         behavior: T,
         renderInfo: RenderInfo,
@@ -23,6 +33,10 @@ export interface ViewBehaviorFactoryRenderer<T extends ViewBehaviorFactory> {
         renderer: TemplateRenderer,
         context: ExecutionContext
     ): IterableIterator<string>;
+
+    /**
+     * The behavior constructor to use this renderer for.
+     */
     matcher: Constructable<T>;
 }
 
diff --git a/yarn.lock b/yarn.lock
index b054f574d18..f774474c6fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -147,7 +147,7 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@babel/code-frame@7.16.7", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
+"@babel/code-frame@7.16.7", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.8.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
   integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
@@ -13805,14 +13805,6 @@ jest-watcher@^27.5.1:
     jest-util "^27.5.1"
     string-length "^4.0.1"
 
-jest-worker@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
-  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
-  dependencies:
-    merge-stream "^2.0.0"
-    supports-color "^6.1.0"
-
 jest-worker@^25.5.0:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.5.0.tgz#2611d071b79cea0f43ee57a3d118593ac1547db1"
@@ -19309,17 +19301,6 @@ rollup-plugin-svg@^2.0.0:
   dependencies:
     rollup-pluginutils "^1.3.1"
 
-rollup-plugin-terser@^5.3.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.1.tgz#8c650062c22a8426c64268548957463bf981b413"
-  integrity sha512-1pkwkervMJQGFYvM9nscrUoncPwiKR/K+bHdjv6PFgRo3cgPHoRT83y2Aa3GvINj4539S15t/tpFPb775TDs6w==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    jest-worker "^24.9.0"
-    rollup-pluginutils "^2.8.2"
-    serialize-javascript "^4.0.0"
-    terser "^4.6.2"
-
 rollup-plugin-terser@^7.0.0, rollup-plugin-terser@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
@@ -19339,7 +19320,7 @@ rollup-plugin-transform-tagged-template@^0.0.3:
     "@babel/parser" "^7.10.3"
     "@babel/traverse" "^7.10.3"
 
-rollup-plugin-typescript2@^0.27.0, rollup-plugin-typescript2@^0.27.1:
+rollup-plugin-typescript2@^0.27.1:
   version "0.27.3"
   resolved "https://registry.yarnpkg.com/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.27.3.tgz#cd9455ac026d325b20c5728d2cc54a08a771b68b"
   integrity sha512-gmYPIFmALj9D3Ga1ZbTZAKTXq1JKlTQBtj299DXhqYz9cL3g/AQfUvbb2UhH+Nf++cCq941W2Mv7UcrcgLzJJg==
@@ -19358,7 +19339,7 @@ rollup-pluginutils@^1.3.1:
     estree-walker "^0.2.1"
     minimatch "^3.0.2"
 
-rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
+rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.8.1:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
@@ -20955,7 +20936,7 @@ terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.3.1:
     source-map "^0.6.1"
     terser "^5.7.2"
 
-terser@^4.1.2, terser@^4.6.2:
+terser@^4.1.2:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
   integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==

From 21c94d1e8e2b4fd95e70f9cc498b103b88395c66 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Mon, 16 May 2022 19:40:05 -0400
Subject: [PATCH 110/135] feat: introduce binding mode and binding config
 define APIs (#5988)

* feat: introduce AspectType

* feat: introduce binding mode and binding config define APIs

* refactor: refine binding mode types

* docs: document binding APIs

* Change files

* refactor: make the standard event binding a default for mode creation

* fix: correct a generics issue and export a missing type

* fix: default event type for binding modes never undefined

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-751fe02e-2247-4050-b738-7a9f48349f54.json |   7 +
 .../fast-element/docs/api-report.md           | 134 +++--
 .../web-components/fast-element/src/index.ts  |  11 +-
 .../fast-element/src/templating/binding.ts    | 481 ++++++++++++------
 .../src/templating/html-directive.ts          |  29 +-
 5 files changed, 454 insertions(+), 208 deletions(-)
 create mode 100644 change/@microsoft-fast-element-751fe02e-2247-4050-b738-7a9f48349f54.json

diff --git a/change/@microsoft-fast-element-751fe02e-2247-4050-b738-7a9f48349f54.json b/change/@microsoft-fast-element-751fe02e-2247-4050-b738-7a9f48349f54.json
new file mode 100644
index 00000000000..4ce6e4dd7bc
--- /dev/null
+++ b/change/@microsoft-fast-element-751fe02e-2247-4050-b738-7a9f48349f54.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "refactor: refine binding mode types",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 6e3f91757ee..7e064f29149 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -44,12 +44,17 @@ export const Aspect: Readonly<{
 
 // @public
 export interface Aspected {
-    aspectType: number;
+    aspectType: AspectType;
     binding?: Binding;
     sourceAspect: string;
     targetAspect: string;
 }
 
+// @public
+export type AspectType = Exclude<{
+    [K in keyof typeof Aspect]: typeof Aspect[K] extends number ? typeof Aspect[K] : never;
+}[keyof typeof Aspect], typeof Aspect.none>;
+
 // @public
 export function attr(config?: DecoratorAttributeConfiguration): (target: {}, property: string) => void;
 
@@ -92,27 +97,33 @@ export interface Behavior<TSource = any, TParent = any, TContext extends Executi
     unbind(source: TSource, context: TContext): void;
 }
 
-// @alpha (undocumented)
-export function bind<T = any>(binding: Binding<T>, config?: BindingConfig<T> | DefaultBindingOptions): CaptureType<T>;
+// @public
+export function bind<T = any>(binding: Binding<T>, config?: BindingConfig | DefaultBindingOptions): CaptureType<T>;
 
 // @public
 export type Binding<TSource = any, TReturn = any, TContext extends ExecutionContext = ExecutionContext> = (source: TSource, context: TContext) => TReturn;
 
-// @alpha (undocumented)
-export type BindingBehaviorFactory = {
-    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
-};
-
-// @alpha (undocumented)
+// @public
 export interface BindingConfig<T = any> {
-    // (undocumented)
     mode: BindingMode;
-    // (undocumented)
-    options: any;
+    options: T;
 }
 
-// @alpha (undocumented)
-export type BindingMode = Record<number, BindingType>;
+// @public
+export const BindingConfig: Readonly<{
+    define<T>(mode: BindingMode, defaultOptions: T): BindingConfig<T> & BindingConfigResolver<T>;
+}>;
+
+// @public
+export type BindingConfigResolver<T> = (options: T) => BindingConfig<T>;
+
+// @public
+export type BindingMode = Record<AspectType, (directive: HTMLBindingDirective) => Pick<ViewBehaviorFactory, "createBehavior">>;
+
+// @public
+export const BindingMode: Readonly<{
+    define(UpdateType: typeof UpdateBinding, EventType?: typeof EventBinding): BindingMode;
+}>;
 
 // @public
 export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier {
@@ -121,11 +132,6 @@ export interface BindingObserver<TSource = any, TReturn = any, TParent = any> ex
     records(): IterableIterator<ObservationRecord>;
 }
 
-// Warning: (ae-forgotten-export) The symbol "HTMLBindingDirective" needs to be exported by the entry point index.d.ts
-//
-// @alpha (undocumented)
-export type BindingType = (directive: HTMLBindingDirective) => BindingBehaviorFactory;
-
 // @public
 export const booleanConverter: ValueConverter;
 
@@ -138,6 +144,15 @@ export type Callable = typeof Function.prototype.call | {
 export interface CaptureType<TSource> {
 }
 
+// @public
+export class ChangeBinding extends UpdateBinding {
+    constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget);
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    // @internal (undocumented)
+    handleChange(binding: Binding, observer: BindingObserver): void;
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+}
+
 // @public
 export const child: <TChild = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TChild, TParent, ChildContext<TParent>>[]) => ChildViewTemplate<TChild, TParent>;
 
@@ -266,10 +281,8 @@ export function customElement(nameOrDef: string | PartialFASTElementDefinition):
 // @public
 export type DecoratorAttributeConfiguration = Omit<AttributeConfiguration, "property">;
 
-// @alpha (undocumented)
-export type DefaultBindingOptions = {
-    capture?: boolean;
-};
+// @public
+export type DefaultBindingOptions = AddEventListenerOptions;
 
 // @public
 export const DOM: Readonly<{
@@ -328,6 +341,18 @@ export const emptyArray: readonly never[];
 // @public
 export function enableArrayObservation(): void;
 
+// @public
+export class EventBinding {
+    constructor(directive: HTMLBindingDirective);
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
+    // (undocumented)
+    readonly directive: HTMLBindingDirective;
+    // @internal (undocumented)
+    handleEvent(event: Event): void;
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+}
+
 // @public
 export const ExecutionContext: Readonly<{
     default: RootContext;
@@ -395,6 +420,24 @@ export interface FASTGlobal {
 // @public
 export function html<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent, TContext>[]): ViewTemplate<TSource, TParent>;
 
+// @public
+export class HTMLBindingDirective implements HTMLDirective, ViewBehaviorFactory, Aspected {
+    constructor(binding: Binding, mode: BindingMode, options: any);
+    aspectType: AspectType;
+    // (undocumented)
+    binding: Binding;
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
+    createHTML(add: AddViewBehaviorFactory): string;
+    id: string;
+    // (undocumented)
+    mode: BindingMode;
+    nodeId: string;
+    // (undocumented)
+    options: any;
+    sourceAspect: string;
+    targetAspect: string;
+}
+
 // @public
 export interface HTMLDirective {
     createHTML(add: AddViewBehaviorFactory): string;
@@ -528,13 +571,16 @@ export interface ObservationRecord {
     propertySource: any;
 }
 
-// Warning: (ae-forgotten-export) The symbol "BindingConfigResolver" needs to be exported by the entry point index.d.ts
-//
-// @alpha (undocumented)
-export const onChange: BindingConfig<DefaultBindingOptions> & BindingConfigResolver<DefaultBindingOptions>;
+// @public
+export const onChange: BindingConfig<AddEventListenerOptions> & BindingConfigResolver<AddEventListenerOptions>;
+
+// @public
+export const oneTime: BindingConfig<AddEventListenerOptions> & BindingConfigResolver<AddEventListenerOptions>;
 
-// @alpha (undocumented)
-export const oneTime: BindingConfig<DefaultBindingOptions> & BindingConfigResolver<DefaultBindingOptions>;
+// @public
+export class OneTimeBinding extends UpdateBinding {
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+}
 
 // @public
 export const Parser: Readonly<{
@@ -649,6 +695,16 @@ export interface RootContext {
     eventTarget<TTarget extends EventTarget = EventTarget>(): TTarget;
 }
 
+// @public
+export const signal: <T = any>(options: string | Binding<T, any, ExecutionContext<any>>) => BindingConfig<string | Binding<T, any, ExecutionContext<any>>>;
+
+// @public
+export class SignalBinding extends UpdateBinding {
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    static send(signal: string): void;
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+}
+
 // @public
 export function slotted<T = any>(propertyOrOptions: (keyof T & string) | SlottedDirectiveOptions<keyof T & string>): CaptureType<T>;
 
@@ -777,6 +833,18 @@ export interface TypeRegistry<TDefinition extends TypeDefinition> {
     register(definition: TDefinition): boolean;
 }
 
+// @public
+export class UpdateBinding implements ViewBehavior {
+    constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget);
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
+    // (undocumented)
+    readonly directive: HTMLBindingDirective;
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    // (undocumented)
+    protected updateTarget: UpdateTarget;
+}
+
 // @public
 export interface UpdateQueue {
     enqueue(callable: Callable): void;
@@ -788,6 +856,14 @@ export interface UpdateQueue {
 // @public
 export const Updates: UpdateQueue;
 
+// @public
+export type UpdateTarget = (this: UpdateTargetThis, target: Node, aspect: string, value: any, source: any, context: ExecutionContext) => void;
+
+// @public
+export interface UpdateTargetThis {
+    directive: HTMLBindingDirective;
+}
+
 // @public
 export interface ValueConverter {
     fromView(value: any): any;
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index cb934747e92..03e44761575 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -29,16 +29,7 @@ export * from "./templating/dom.js";
 export * from "./templating/template.js";
 export * from "./templating/compiler.js";
 export { Markup, Parser } from "./templating/markup.js";
-export {
-    bind,
-    oneTime,
-    onChange,
-    BindingConfig,
-    BindingMode,
-    BindingType,
-    BindingBehaviorFactory,
-    DefaultBindingOptions,
-} from "./templating/binding.js";
+export * from "./templating/binding.js";
 export * from "./templating/html-directive.js";
 export * from "./templating/ref.js";
 export * from "./templating/when.js";
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 0e2a8d4b770..b271586656e 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -11,6 +11,7 @@ import {
     AddViewBehaviorFactory,
     Aspect,
     Aspected,
+    AspectType,
     HTMLDirective,
     ViewBehavior,
     ViewBehaviorFactory,
@@ -20,68 +21,179 @@ import { Markup } from "./markup.js";
 import type { CaptureType } from "./template.js";
 import type { SyntheticView } from "./view.js";
 
-// TODO: Fix the code docs in this file.
+declare class TrustedHTML {}
+const createInnerHTMLBinding = globalThis.TrustedHTML
+    ? (binding: Binding) => (s, c) => {
+          const value = binding(s, c);
+
+          if (value instanceof TrustedHTML) {
+              return value;
+          }
+
+          throw FAST.error(Message.bindingInnerHTMLRequiresTrustedTypes);
+      }
+    : (binding: Binding) => binding;
 
 /**
- * @alpha
+ * Describes how aspects of an HTML element will be affected by bindings.
+ * @public
  */
-export type BindingBehaviorFactory = {
-    createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
-};
+export type BindingMode = Record<
+    AspectType,
+    (directive: HTMLBindingDirective) => Pick<ViewBehaviorFactory, "createBehavior">
+>;
 
 /**
- * @alpha
+ * Describes how aspects of an HTML element will be affected by bindings.
+ * @public
  */
-export type BindingType = (directive: HTMLBindingDirective) => BindingBehaviorFactory;
+export const BindingMode = Object.freeze({
+    /**
+     * Creates a binding mode based on the supplied behavior types.
+     * @param UpdateType - The base behavior type used to update aspects.
+     * @param EventType - The base behavior type used to respond to events.
+     * @returns A new binding mode.
+     */
+    define(
+        UpdateType: typeof UpdateBinding,
+        EventType: typeof EventBinding = EventBinding
+    ): BindingMode {
+        return Object.freeze({
+            [1]: d => new UpdateType(d, DOM.setAttribute),
+            [2]: d => new UpdateType(d, DOM.setBooleanAttribute),
+            [3]: d => new UpdateType(d, (t, a, v) => (t[a] = v)),
+            [4]: d => new (createContentBinding(UpdateType))(d, updateContentTarget),
+            [5]: d => new UpdateType(d, updateTokenListTarget),
+            [6]: d => new EventType(d),
+        });
+    },
+});
 
 /**
- * @alpha
+ * Describes the configuration for a binding expression.
+ * @public
  */
-export const notSupportedBindingType: BindingType = () => {
-    throw new Error();
-};
+export interface BindingConfig<T = any> {
+    /**
+     * The binding mode to configure the binding with.
+     */
+    mode: BindingMode;
+
+    /**
+     * Options to be supplied to the binding behaviors.
+     */
+    options: T;
+}
 
 /**
- * @alpha
+ * Creates a new binding configuration based on the supplied options.
+ * @public
  */
-export type BindingMode = Record<number, BindingType>;
+export type BindingConfigResolver<T> = (options: T) => BindingConfig<T>;
 
 /**
- * @alpha
+ * Describes the configuration for a binding expression.
+ * @public
  */
-export interface BindingConfig<T = any> {
-    mode: BindingMode;
-    options: any;
-}
+export const BindingConfig = Object.freeze({
+    /**
+     * Creates a binding configuration based on the provided mode and options.
+     * @param mode - The mode to use for the configuration.
+     * @param defaultOptions - The default options to use for the configuration.
+     * @returns A new binding configuration.
+     */
+    define<T>(
+        mode: BindingMode,
+        defaultOptions: T
+    ): BindingConfig<T> & BindingConfigResolver<T> {
+        const config: BindingConfig<T> & BindingConfigResolver<T> = (
+            options: T
+        ): BindingConfig<T> => {
+            return {
+                mode: config.mode,
+                options: Object.assign({}, defaultOptions, options),
+            };
+        };
+
+        config.options = defaultOptions;
+        config.mode = mode;
+
+        return config;
+    },
+});
 
-interface UpdateTargetThis {
+/**
+ * The "this" context for an update target function.
+ * @public
+ */
+export interface UpdateTargetThis {
+    /**
+     * The directive configuration for the update.
+     */
     directive: HTMLBindingDirective;
 }
 
-type UpdateTarget = (
+/**
+ * A target update function.
+ * @param this - The "this" context for the update.
+ * @param target - The node that is targeted by the update.
+ * @param aspect - The aspect of the node that is being targeted.
+ * @param value - The value to assign to the aspect.
+ * @param source - The source object that the value was derived from.
+ * @param context - The execution context that the binding is being run under.
+ * @public
+ */
+export type UpdateTarget = (
     this: UpdateTargetThis,
-    target,
+    target: Node,
     aspect: string,
-    value,
+    value: any,
     source: any,
     context: ExecutionContext
 ) => void;
 
-class BindingBase {
-    constructor(public readonly directive: HTMLBindingDirective) {}
-
+/**
+ * A base binding behavior for DOM updates.
+ * @public
+ */
+export class UpdateBinding implements ViewBehavior {
+    /**
+     * Creates an instance of UpdateBinding.
+     * @param directive - The directive that has the configuration for this behavior.
+     * @param updateTarget - The function used to update the target with the latest value.
+     */
+    constructor(
+        public readonly directive: HTMLBindingDirective,
+        protected updateTarget: UpdateTarget
+    ) {}
+
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {}
+
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {}
 
-    createBehavior(): ViewBehavior {
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
         return this;
     }
 }
 
-function createContentBinding(
-    BaseType: typeof TargetUpdateBinding
-): typeof TargetUpdateBinding {
-    return class extends BaseType {
+function createContentBinding(Type: typeof UpdateBinding): typeof UpdateBinding {
+    return class extends Type {
         unbind(
             source: any,
             context: ExecutionContext,
@@ -100,6 +212,16 @@ function createContentBinding(
     };
 }
 
+type ComposableView = SyntheticView & {
+    isComposed?: boolean;
+    needsBindOnly?: boolean;
+};
+
+type ContentTarget = Node & {
+    $fastView?: ComposableView;
+    $fastTemplate?: { create(): SyntheticView };
+};
+
 function updateContentTarget(
     target: ContentTarget,
     aspect: string,
@@ -221,57 +343,22 @@ function updateTokenListTarget(
     }
 }
 
-type BindingConfigResolver<T> = (options: T) => BindingConfig<T>;
-
-class TargetUpdateBinding extends BindingBase {
-    constructor(directive: HTMLBindingDirective, protected updateTarget: UpdateTarget) {
-        super(directive);
-    }
-
-    static createBindingConfig<T>(
-        defaultOptions: T,
-        eventType?: BindingType
-    ): BindingConfig<T> & BindingConfigResolver<T> {
-        const config: BindingConfig<T> & BindingConfigResolver<T> = (
-            options: T
-        ): BindingConfig<T> => {
-            return {
-                mode: config.mode,
-                options: Object.assign({}, defaultOptions, options),
-            };
-        };
-
-        config.options = defaultOptions;
-        config.mode = this.createBindingMode(eventType);
-
-        return config;
-    }
-
-    static createBindingMode(
-        eventType: BindingType = notSupportedBindingType
-    ): BindingMode {
-        return Object.freeze({
-            [Aspect.attribute]: this.createType(DOM.setAttribute),
-            [Aspect.booleanAttribute]: this.createType(DOM.setBooleanAttribute),
-            [Aspect.property]: this.createType((t, a, v) => (t[a] = v)),
-            [Aspect.content]: createContentBinding(this).createType(updateContentTarget),
-            [Aspect.tokenList]: this.createType(updateTokenListTarget),
-            [Aspect.event]: eventType,
-        });
-    }
-
-    private static createType(updateTarget: UpdateTarget) {
-        return directive => new this(directive, updateTarget);
-    }
-}
-
-class OneTimeBinding extends TargetUpdateBinding {
+/**
+ * A binding behavior for one-time bindings.
+ * @public
+ */
+export class OneTimeBinding extends UpdateBinding {
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
-        const target = targets[directive.nodeId];
         this.updateTarget(
-            target,
-            directive.targetAspect!,
+            targets[directive.nodeId],
+            directive.targetAspect,
             directive.binding(source, context),
             source,
             context
@@ -282,16 +369,16 @@ class OneTimeBinding extends TargetUpdateBinding {
 const signals: Record<string, undefined | Function | Function[]> = Object.create(null);
 
 /**
- * @alpha
+ * A binding behavior for signal bindings.
+ * @public
  */
-export function sendSignal(signal: string): void {
-    const found = signals[signal];
-    if (found) {
-        Array.isArray(found) ? found.forEach(x => x()) : found();
-    }
-}
-
-class OnSignalBinding extends TargetUpdateBinding {
+export class SignalBinding extends UpdateBinding {
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
         const target = targets[directive.nodeId];
@@ -319,6 +406,12 @@ class OnSignalBinding extends TargetUpdateBinding {
         }
     }
 
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const signal = this.getSignal(source, context);
         const found = signals[signal];
@@ -340,16 +433,43 @@ class OnSignalBinding extends TargetUpdateBinding {
         const options = this.directive.options;
         return isString(options) ? options : options(source, context);
     }
+
+    /**
+     * Sends the specified signal to signaled bindings.
+     * @param signal - The signal to send.
+     * @public
+     */
+    public static send(signal: string): void {
+        const found = signals[signal];
+        if (found) {
+            Array.isArray(found) ? found.forEach(x => x()) : found();
+        }
+    }
 }
 
-class OnChangeBinding extends TargetUpdateBinding {
+/**
+ * A binding behavior for bindings that change.
+ * @public
+ */
+export class ChangeBinding extends UpdateBinding {
     private isBindingVolatile: boolean;
 
+    /**
+     * Creates an instance of ChangeBinding.
+     * @param directive - The directive that has the configuration for this behavior.
+     * @param updateTarget - The function used to update the target with the latest value.
+     */
     constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget) {
         super(directive, updateTarget);
         this.isBindingVolatile = Observable.isVolatileBinding(directive.binding);
     }
 
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
         const target = targets[directive.nodeId];
@@ -374,6 +494,12 @@ class OnChangeBinding extends TargetUpdateBinding {
         );
     }
 
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const target = targets[this.directive.nodeId];
         const observer = target[this.directive.id];
@@ -398,51 +524,67 @@ class OnChangeBinding extends TargetUpdateBinding {
     }
 }
 
-type ComposableView = SyntheticView & {
-    isComposed?: boolean;
-    needsBindOnly?: boolean;
-};
-
-type ContentTarget = Node & {
-    $fastView?: ComposableView;
-    $fastTemplate?: { create(): SyntheticView };
-};
-
 type FASTEventSource = Node & {
     $fastSource: any;
     $fastContext: ExecutionContext | null;
 };
 
-class EventListener extends BindingBase {
+/**
+ * A binding behavior for handling events.
+ * @public
+ */
+export class EventBinding {
+    /**
+     * Creates an instance of EventBinding.
+     * @param directive - The directive that has the configuration for this behavior.
+     */
+    constructor(public readonly directive: HTMLBindingDirective) {}
+
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
         const target = targets[directive.nodeId] as FASTEventSource;
         target.$fastSource = source;
         target.$fastContext = context;
-        target.addEventListener(directive.targetAspect!, this, directive.options);
+        target.addEventListener(directive.targetAspect, this, directive.options);
     }
 
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        this.removeEventListener(targets[this.directive.nodeId] as FASTEventSource);
-    }
-
-    protected removeEventListener(target: FASTEventSource): void {
-        target.$fastSource = null;
-        target.$fastContext = null;
+        const target = targets[this.directive.nodeId] as FASTEventSource;
+        target.$fastSource = target.$fastContext = null;
         target.removeEventListener(
-            this.directive.targetAspect!,
+            this.directive.targetAspect,
             this,
             this.directive.options
         );
     }
 
-    handleEvent(event: Event): void {
-        const target = event.currentTarget as any;
-        const source = target.$fastSource;
-        const context = target.$fastContext;
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
+        return this;
+    }
 
+    /**
+     * @internal
+     */
+    handleEvent(event: Event): void {
+        const target = event.currentTarget as FASTEventSource;
         ExecutionContext.setEvent(event);
-        const result = this.directive.binding(source, context);
+        const result = this.directive.binding(target.$fastSource, target.$fastContext!);
         ExecutionContext.setEvent(null);
 
         if (result !== true) {
@@ -451,83 +593,96 @@ class EventListener extends BindingBase {
     }
 }
 
-class OneTimeEventListener extends EventListener {
-    handleEvent(event: Event): void {
-        super.handleEvent(event);
-        this.removeEventListener(event.currentTarget as FASTEventSource);
-    }
-}
-
 /**
- * @alpha
+ * The default binding options.
+ * @public
  */
-export type DefaultBindingOptions = {
-    capture?: boolean;
-};
-
-const defaultBindingOptions: DefaultBindingOptions = {
-    capture: false,
-};
+export type DefaultBindingOptions = AddEventListenerOptions;
 
 /**
- * @alpha
+ * The default onChange binding configuration.
+ * @public
  */
-export const onChange = OnChangeBinding.createBindingConfig(
-    defaultBindingOptions,
-    directive => new EventListener(directive)
+export const onChange = BindingConfig.define(
+    BindingMode.define(ChangeBinding),
+    {} as DefaultBindingOptions
 );
 
 /**
- * @alpha
+ * The default onTime binding configuration.
+ * @public
  */
-export const oneTime = OneTimeBinding.createBindingConfig(
-    defaultBindingOptions,
-    directive => new OneTimeEventListener(directive)
-);
+export const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding), {
+    once: true,
+} as DefaultBindingOptions);
 
-const signalMode: BindingMode = OnSignalBinding.createBindingMode();
+const signalMode: BindingMode = BindingMode.define(SignalBinding);
 
 /**
- * @alpha
+ * Creates a signal binding configuration with the supplied options.
+ * @param options - The signal name or a binding to use to retrieve the signal name.
+ * @returns A binding configuration.
+ * @public
  */
-export const signal = <T = any>(options: string | Binding<T>): BindingConfig<T> => {
+export const signal = <T = any>(
+    options: string | Binding<T>
+): BindingConfig<string | Binding<T>> => {
     return { mode: signalMode, options };
 };
 
-declare class TrustedHTML {}
-const createInnerHTMLBinding = globalThis.TrustedHTML
-    ? (binding: Binding) => (s, c) => {
-          const value = binding(s, c);
-
-          if (value instanceof TrustedHTML) {
-              return value;
-          }
-
-          throw FAST.error(Message.bindingInnerHTMLRequiresTrustedTypes);
-      }
-    : (binding: Binding) => binding;
-
 /**
- * @internal
+ * A directive that applies bindings.
+ * @public
  */
 export class HTMLBindingDirective
     implements HTMLDirective, ViewBehaviorFactory, Aspected {
-    private factory: BindingBehaviorFactory | null = null;
+    private factory: Pick<ViewBehaviorFactory, "createBehavior"> | null = null;
 
+    /**
+     * The unique id of the factory.
+     */
     id: string;
+
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
     nodeId: string;
+
+    /**
+     * The original source aspect exactly as represented in markup.
+     */
     sourceAspect: string;
-    targetAspect: string;
-    aspectType: number;
 
-    constructor(public binding: Binding, public mode: BindingMode, public options: any) {
-        this.aspectType = Aspect.content;
-    }
+    /**
+     * The evaluated target aspect, determined after processing the source.
+     */
+    targetAspect: string;
 
+    /**
+     * The type of aspect to target.
+     */
+    aspectType: AspectType = Aspect.content;
+
+    /**
+     * Creates an instance of HTMLBindingDirective.
+     * @param binding - The binding to apply.
+     * @param mode - The binding mode to use when applying the binding.
+     * @param options - The options to configure the binding with.
+     */
+    constructor(public binding: Binding, public mode: BindingMode, public options: any) {}
+
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
     createHTML(add: AddViewBehaviorFactory): string {
         return Markup.interpolation(add(this));
     }
 
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior {
         if (this.factory == null) {
             if (this.targetAspect === "innerHTML") {
@@ -544,11 +699,15 @@ export class HTMLBindingDirective
 HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 
 /**
- * @alpha
+ * Creates a binding directive with the specified configuration.
+ * @param binding - The binding expression.
+ * @param config - The binding configuration.
+ * @returns A binding directive.
+ * @public
  */
 export function bind<T = any>(
     binding: Binding<T>,
-    config: BindingConfig<T> | DefaultBindingOptions = onChange
+    config: BindingConfig | DefaultBindingOptions = onChange
 ): CaptureType<T> {
     if (!("mode" in config)) {
         config = onChange(config);
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 92d86c2bf97..2e1711f897b 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -163,37 +163,37 @@ export const Aspect = Object.freeze({
     /**
      * Not aspected.
      */
-    none: 0,
+    none: 0 as const,
 
     /**
      * An attribute.
      */
-    attribute: 1,
+    attribute: 1 as const,
 
     /**
      * A boolean attribute.
      */
-    booleanAttribute: 2,
+    booleanAttribute: 2 as const,
 
     /**
      * A property.
      */
-    property: 3,
+    property: 3 as const,
 
     /**
      * Content
      */
-    content: 4,
+    content: 4 as const,
 
     /**
      * A token list.
      */
-    tokenList: 5,
+    tokenList: 5 as const,
 
     /**
      * An event.
      */
-    event: 6,
+    event: 6 as const,
 
     /**
      *
@@ -243,6 +243,19 @@ export const Aspect = Object.freeze({
     },
 });
 
+/**
+ * Valid aspect type values.
+ * @public
+ */
+export type AspectType = Exclude<
+    {
+        [K in keyof typeof Aspect]: typeof Aspect[K] extends number
+            ? typeof Aspect[K]
+            : never;
+    }[keyof typeof Aspect],
+    typeof Aspect.none
+>;
+
 /**
  * Represents something that applies to a specific aspect of the DOM.
  * @public
@@ -261,7 +274,7 @@ export interface Aspected {
     /**
      * The type of aspect to target.
      */
-    aspectType: number;
+    aspectType: AspectType;
 
     /**
      * A binding if one is associated with the aspect.

From aa3bcddd739573a37b3c449c2e76c314dc5b7b60 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Tue, 17 May 2022 17:43:06 -0400
Subject: [PATCH 111/135] feat: add two-way binding (#5995)

* feat: add two-way binding

* test: add tests for previously created binding modes

* test: add tests for two-way bindings

* test: add event binding tests

* Change files

* fix: prevent memory leek in one-time events

* fix: prevent clashing state for behaviors on the same node

* fix: more internal consistency for binding state

* fix: more consistency and prevent internal clobber of directive state

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-812c3a96-4de5-4429-907a-86c354742b82.json |   7 +
 .../fast-element/docs/api-report.md           |  25 ++
 .../src/templating/binding.spec.ts            | 386 +++++++++++++++++-
 .../fast-element/src/templating/binding.ts    | 199 +++++++--
 .../fast-element/src/templating/children.ts   |  16 +-
 .../src/templating/node-observation.ts        |  15 +-
 .../fast-element/src/templating/slotted.ts    |   3 +-
 7 files changed, 605 insertions(+), 46 deletions(-)
 create mode 100644 change/@microsoft-fast-element-812c3a96-4de5-4429-907a-86c354742b82.json

diff --git a/change/@microsoft-fast-element-812c3a96-4de5-4429-907a-86c354742b82.json b/change/@microsoft-fast-element-812c3a96-4de5-4429-907a-86c354742b82.json
new file mode 100644
index 00000000000..02ee907948f
--- /dev/null
+++ b/change/@microsoft-fast-element-812c3a96-4de5-4429-907a-86c354742b82.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add two-way binding",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 7e064f29149..60e857fe552 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -148,6 +148,7 @@ export interface CaptureType<TSource> {
 export class ChangeBinding extends UpdateBinding {
     constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget);
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    protected getObserver(target: Node): BindingObserver;
     // @internal (undocumented)
     handleChange(binding: Binding, observer: BindingObserver): void;
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
@@ -284,6 +285,12 @@ export type DecoratorAttributeConfiguration = Omit<AttributeConfiguration, "prop
 // @public
 export type DefaultBindingOptions = AddEventListenerOptions;
 
+// @public
+export type DefaultTwoWayBindingOptions = DefaultBindingOptions & {
+    changeEvent?: string;
+    fromView?: (value: any) => any;
+};
+
 // @public
 export const DOM: Readonly<{
     queueUpdate: (callable: Callable) => void;
@@ -533,6 +540,7 @@ export abstract class NodeObservationDirective<T extends NodeBehaviorOptions> ex
     protected computeNodes(target: any): Node[];
     protected abstract disconnect(target: any): void;
     protected abstract getNodes(target: any): Node[];
+    protected getSource(target: Node): any;
     protected abstract observe(target: any): void;
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
     protected updateTarget(source: any, value: ReadonlyArray<any>): void;
@@ -813,6 +821,23 @@ export type TrustedTypesPolicy = {
     createHTML(html: string): string;
 };
 
+// @public
+export const twoWay: BindingConfig<DefaultTwoWayBindingOptions> & BindingConfigResolver<DefaultTwoWayBindingOptions>;
+
+// @public
+export class TwoWayBinding extends ChangeBinding {
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    static configure(settings: TwoWaySettings): void;
+    // @internal (undocumented)
+    handleEvent(event: Event): void;
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+}
+
+// @public
+export interface TwoWaySettings {
+    determineChangeEvent(directive: HTMLBindingDirective, target: HTMLElement): string;
+}
+
 // Warning: (ae-internal-missing-underscore) The name "TypeDefinition" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
diff --git a/packages/web-components/fast-element/src/templating/binding.spec.ts b/packages/web-components/fast-element/src/templating/binding.spec.ts
index 5969df7f4ea..422c5a257e1 100644
--- a/packages/web-components/fast-element/src/templating/binding.spec.ts
+++ b/packages/web-components/fast-element/src/templating/binding.spec.ts
@@ -1,10 +1,12 @@
 import { expect } from "chai";
-import { bind, HTMLBindingDirective } from "./binding";
+import { bind, BindingConfig, BindingMode, HTMLBindingDirective, onChange, oneTime, signal, SignalBinding, twoWay } from "./binding";
 import { ExecutionContext, observable } from "../observation/observable";
 import { html, ViewTemplate } from "./template";
 import { toHTML } from "../__test__/helpers";
 import { SyntheticView, HTMLView } from "./view";
 import { Updates } from "../observation/update-queue";
+import { Aspect } from "./html-directive";
+import { DOM } from "./dom";
 
 describe("The HTML binding directive", () => {
     class Model {
@@ -15,11 +17,16 @@ describe("The HTML binding directive", () => {
         @observable value: any = null;
         @observable private trigger = 0;
         @observable knownValue = "value";
+        actionInvokeCount = 0;
 
         forceComputedUpdate() {
             this.trigger++;
         }
 
+        invokeAction() {
+            this.actionInvokeCount++;
+        }
+
         get computedValue() {
             const trigger = this.trigger;
             return this.value;
@@ -41,6 +48,42 @@ describe("The HTML binding directive", () => {
         return { directive, behavior, node, parentNode, targets };
     }
 
+    function bindingWithConfig(config: BindingConfig, sourceAspect?: string) {
+        const directive = bind<Model>(x => x.value, config) as HTMLBindingDirective;
+        directive.nodeId = 'r';
+
+        if (sourceAspect) {
+            Aspect.assign(directive, sourceAspect);
+        }
+
+        const node = document.createElement("div");
+        const targets = { r: node };
+
+        const behavior = directive.createBehavior(targets);
+        const parentNode = document.createElement("div");
+
+        parentNode.appendChild(node);
+
+        return { directive, behavior, node, parentNode, targets };
+    }
+
+    function eventBinding(config: BindingConfig, sourceAspect: string) {
+        const directive = bind<Model>(x => x.invokeAction(), config) as HTMLBindingDirective;
+        directive.nodeId = 'r';
+
+        Aspect.assign(directive, sourceAspect);
+
+        const node = document.createElement("div");
+        const targets = { r: node };
+
+        const behavior = directive.createBehavior(targets);
+        const parentNode = document.createElement("div");
+
+        parentNode.appendChild(node);
+
+        return { directive, behavior, node, parentNode, targets };
+    }
+
     context("when binding text content", () => {
         it("initially sets the text of a node", () => {
             const { behavior, node, targets } = contentBinding();
@@ -249,4 +292,345 @@ describe("The HTML binding directive", () => {
             expect(toHTML(parentNode)).to.equal(`This is a template. value`);
         });
     });
+
+    const aspectScenarios = [
+        {
+            name: "content",
+            sourceAspect: "",
+            originalValue: "This is a test",
+            newValue: "This is another test",
+            getValue(node: HTMLElement) {
+                return node.textContent;
+            },
+            setValue(node: HTMLElement, value: any) {
+                node.textContent = value;
+            }
+        },
+        {
+            name: "attribute",
+            sourceAspect: "test-attribute",
+            originalValue: "This is a test",
+            newValue: "This is another test",
+            getValue(node: HTMLElement) {
+                return node.getAttribute("test-attribute");
+            },
+            setValue(node: HTMLElement, value: any) {
+                DOM.setAttribute(node, "test-attribute", value);
+            }
+        },
+        {
+            name: "boolean attribute",
+            sourceAspect: "?test-boolean-attribute",
+            originalValue: true,
+            newValue: false,
+            getValue(node: HTMLElement) {
+                return node.hasAttribute("test-boolean-attribute");
+            },
+            setValue(node: HTMLElement, value: any) {
+                DOM.setBooleanAttribute(node, "test-boolean-attribute", value);
+            }
+        },
+        {
+            name: "property",
+            sourceAspect: ":testProperty",
+            originalValue: "This is a test",
+            newValue: "This is another test",
+            getValue(node: HTMLElement) {
+                return (node as any).testProperty;
+            },
+            setValue(node: HTMLElement, value: any) {
+                (node as any).testProperty = value;
+            }
+        },
+    ];
+
+    context("when binding on-change", () => {
+        for (const aspectScenario of aspectScenarios) {
+            it(`sets the initial value of a ${aspectScenario.name} binding`, () => {
+                const { behavior, node, targets } = bindingWithConfig(onChange, aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+            });
+
+            it(`updates the ${aspectScenario.name} when the model changes`, async () => {
+                const { behavior, node, targets } = bindingWithConfig(onChange, aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+
+                model.value = aspectScenario.newValue;
+
+                await Updates.next();
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+            });
+
+            it(`doesn't update the ${aspectScenario.name} after unbind`, async () => {
+                const { behavior, node, targets } = bindingWithConfig(onChange, aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+
+                behavior.unbind(model, ExecutionContext.default, targets) ;
+                model.value = aspectScenario.newValue;
+
+                await Updates.next();
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+            });
+        }
+    });
+
+    context("when binding one-time", () => {
+        for (const aspectScenario of aspectScenarios) {
+            it(`sets the initial value of a ${aspectScenario.name} binding`, () => {
+                const { behavior, node, targets } = bindingWithConfig(oneTime, aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+            });
+
+            it(`does not update the ${aspectScenario.name} after the initial set`, async () => {
+                const { behavior, node, targets } = bindingWithConfig(oneTime, aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+
+                model.value = aspectScenario.newValue;
+
+                await Updates.next();
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+            });
+
+            it(`doesn't update the ${aspectScenario.name} after unbind`, async () => {
+                const { behavior, node, targets } = bindingWithConfig(oneTime, aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+
+                behavior.unbind(model, ExecutionContext.default, targets);
+                model.value = aspectScenario.newValue;
+                await Updates.next();
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+            });
+        }
+    });
+
+    context("when binding with a signal", () => {
+        for (const aspectScenario of aspectScenarios) {
+            it(`sets the initial value of the ${aspectScenario.name} binding`, () => {
+                const { behavior, node, targets } = bindingWithConfig(signal("test-signal"), aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+            });
+
+            it(`updates the ${aspectScenario.name} only when the signal is sent`, async () => {
+                const signalName = "test-signal";
+                const { behavior, node, targets } = bindingWithConfig(signal(signalName), aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+
+                model.value = aspectScenario.newValue;
+
+                await Updates.next();
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+
+                SignalBinding.send(signalName);
+
+                await Updates.next();
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+            });
+
+            it(`doesn't respond to signals for a ${aspectScenario.name} binding after unbind`, async () => {
+                const signalName = "test-signal";
+                const { behavior, node, targets } = bindingWithConfig(signal(signalName), aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+
+                behavior.unbind(model, ExecutionContext.default, targets);
+                model.value = aspectScenario.newValue;
+                SignalBinding.send(signalName);
+
+                await Updates.next();
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+            });
+        }
+    });
+
+    context("when binding two-way", () => {
+        for (const aspectScenario of aspectScenarios) {
+            it(`sets the initial value of the ${aspectScenario.name} binding`, () => {
+                const { behavior, node, targets } = bindingWithConfig(twoWay, aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+            });
+
+            it(`updates the ${aspectScenario.name} when the model changes`, async () => {
+                const { behavior, node, targets } = bindingWithConfig(twoWay, aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+
+                model.value = aspectScenario.newValue;
+
+                await Updates.next();
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+            });
+
+            it(`updates the model when a change event fires for the ${aspectScenario.name}`, async () => {
+                const { behavior, node, targets } = bindingWithConfig(twoWay, aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+
+                aspectScenario.setValue(node, aspectScenario.newValue);
+                node.dispatchEvent(new CustomEvent("change"));
+
+                await Updates.next();
+
+                expect(model.value).to.equal(aspectScenario.newValue);
+            });
+
+            it(`updates the model when a change event fires for the ${aspectScenario.name} with conversion`, async () => {
+                const fromView = value => "fixed value";
+                const { behavior, node, targets } = bindingWithConfig(twoWay({ fromView }), aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+
+                aspectScenario.setValue(node, aspectScenario.newValue);
+                node.dispatchEvent(new CustomEvent("change"));
+
+                await Updates.next();
+
+                expect(model.value).to.equal("fixed value");
+            });
+
+            it(`updates the model when a configured event fires for the ${aspectScenario.name}`, async () => {
+                const changeEvent = "foo";
+                const { behavior, node, targets } = bindingWithConfig(twoWay({changeEvent}), aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+
+                aspectScenario.setValue(node, aspectScenario.newValue);
+                node.dispatchEvent(new CustomEvent(changeEvent));
+
+                await Updates.next();
+
+                expect(model.value).to.equal(aspectScenario.newValue);
+            });
+
+            it(`doesn't update the ${aspectScenario.name} after unbind`, async () => {
+                const { behavior, node, targets } = bindingWithConfig(twoWay, aspectScenario.sourceAspect);
+                const model = new Model(aspectScenario.originalValue);
+
+                behavior.bind(model, ExecutionContext.default, targets);
+
+                expect(aspectScenario.getValue(node)).to.equal(model.value);
+
+                behavior.unbind(model, ExecutionContext.default, targets);
+                model.value = aspectScenario.newValue;
+                await Updates.next();
+
+                expect(aspectScenario.getValue(node)).to.equal(aspectScenario.originalValue);
+            });
+        }
+    });
+
+    context("when binding events", () => {
+        it("does not invoke the method on bind", () => {
+            const { behavior, targets } = eventBinding(onChange, "@my-event");
+            const model = new Model("Test value.");
+
+            behavior.bind(model, ExecutionContext.default, targets);
+            expect(model.actionInvokeCount).to.equal(0);
+        });
+
+        it("invokes the method each time the event is raised", () => {
+            const { behavior, node, targets } = eventBinding(onChange, "@my-event");
+            const model = new Model("Test value.");
+
+            behavior.bind(model, ExecutionContext.default, targets);
+            expect(model.actionInvokeCount).to.equal(0);
+
+            node.dispatchEvent(new CustomEvent("my-event"));
+            expect(model.actionInvokeCount).to.equal(1);
+
+            node.dispatchEvent(new CustomEvent("my-event"));
+            expect(model.actionInvokeCount).to.equal(2);
+
+            node.dispatchEvent(new CustomEvent("my-event"));
+            expect(model.actionInvokeCount).to.equal(3);
+        });
+
+        it("invokes the method one time for a one time event", () => {
+            const { behavior, node, targets } = eventBinding(oneTime, "@my-event");
+            const model = new Model("Test value.");
+
+            behavior.bind(model, ExecutionContext.default, targets);
+            expect(model.actionInvokeCount).to.equal(0);
+
+            node.dispatchEvent(new CustomEvent("my-event"));
+            expect(model.actionInvokeCount).to.equal(1);
+
+            node.dispatchEvent(new CustomEvent("my-event"));
+            expect(model.actionInvokeCount).to.equal(1);
+        });
+
+        it("does not invoke the method after unbind", () => {
+            const { behavior, node, targets } = eventBinding(onChange, "@my-event");
+            const model = new Model("Test value.");
+
+            behavior.bind(model, ExecutionContext.default, targets);
+            expect(model.actionInvokeCount).to.equal(0);
+
+            node.dispatchEvent(new CustomEvent("my-event"));
+            expect(model.actionInvokeCount).to.equal(1);
+
+            behavior.unbind(model, ExecutionContext.default, targets);
+
+            node.dispatchEvent(new CustomEvent("my-event"));
+            expect(model.actionInvokeCount).to.equal(1);
+        });
+    });
 });
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index b271586656e..824d1cdca43 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -4,6 +4,7 @@ import {
     BindingObserver,
     ExecutionContext,
     Observable,
+    ObservationRecord,
 } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { DOM } from "./dom.js";
@@ -303,7 +304,7 @@ function updateTokenListTarget(
     value: any
 ): void {
     const directive = this.directive;
-    const lookup = `${directive.id}-token-list`;
+    const lookup = `${directive.id}-t`;
     const state: TokenListState =
         target[lookup] ?? (target[lookup] = { c: 0, v: Object.create(null) });
     const versions = state.v;
@@ -373,6 +374,8 @@ const signals: Record<string, undefined | Function | Function[]> = Object.create
  * @public
  */
 export class SignalBinding extends UpdateBinding {
+    private handlerProperty = `${this.directive.id}-h`;
+
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
@@ -383,7 +386,7 @@ export class SignalBinding extends UpdateBinding {
         const directive = this.directive;
         const target = targets[directive.nodeId];
         const signal = this.getSignal(source, context);
-        const handler = (target[directive.id] = () => {
+        const handler = (target[this.handlerProperty] = () => {
             this.updateTarget(
                 target,
                 directive.targetAspect!,
@@ -419,7 +422,7 @@ export class SignalBinding extends UpdateBinding {
         if (found && Array.isArray(found)) {
             const directive = this.directive;
             const target = targets[directive.nodeId];
-            const handler = target[directive.id];
+            const handler = target[this.handlerProperty];
             const index = found.indexOf(handler);
             if (index !== -1) {
                 found.splice(index, 1);
@@ -453,6 +456,7 @@ export class SignalBinding extends UpdateBinding {
  */
 export class ChangeBinding extends UpdateBinding {
     private isBindingVolatile: boolean;
+    private observerProperty: string;
 
     /**
      * Creates an instance of ChangeBinding.
@@ -462,6 +466,23 @@ export class ChangeBinding extends UpdateBinding {
     constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget) {
         super(directive, updateTarget);
         this.isBindingVolatile = Observable.isVolatileBinding(directive.binding);
+        this.observerProperty = `${directive.id}-o`;
+    }
+
+    /**
+     * Returns the binding observer used to update the node.
+     * @param target - The target node.
+     * @returns A BindingObserver.
+     */
+    protected getObserver(target: Node): BindingObserver {
+        return (
+            target[this.observerProperty] ??
+            (target[this.observerProperty] = Observable.binding(
+                this.directive.binding,
+                this,
+                this.isBindingVolatile
+            ))
+        );
     }
 
     /**
@@ -473,13 +494,7 @@ export class ChangeBinding extends UpdateBinding {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
         const target = targets[directive.nodeId];
-        const observer: BindingObserver =
-            target[directive.id] ??
-            (target[directive.id] = Observable.binding(
-                directive.binding,
-                this,
-                this.isBindingVolatile
-            ));
+        const observer = this.getObserver(target);
 
         (observer as any).target = target;
         (observer as any).source = source;
@@ -487,7 +502,7 @@ export class ChangeBinding extends UpdateBinding {
 
         this.updateTarget(
             target,
-            directive.targetAspect!,
+            directive.targetAspect,
             observer.observe(source, context),
             source,
             context
@@ -502,11 +517,11 @@ export class ChangeBinding extends UpdateBinding {
      */
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const target = targets[this.directive.nodeId];
-        const observer = target[this.directive.id];
+        const observer = this.getObserver(target);
         observer.disconnect();
-        observer.target = null;
-        observer.source = null;
-        observer.context = null;
+        (observer as any).target = null;
+        (observer as any).source = null;
+        (observer as any).context = null;
     }
 
     /** @internal */
@@ -516,7 +531,7 @@ export class ChangeBinding extends UpdateBinding {
         const context = (observer as any).context;
         this.updateTarget(
             target,
-            this.directive.targetAspect!,
+            this.directive.targetAspect,
             observer.observe(source, context!),
             source,
             context
@@ -524,21 +539,22 @@ export class ChangeBinding extends UpdateBinding {
     }
 }
 
-type FASTEventSource = Node & {
-    $fastSource: any;
-    $fastContext: ExecutionContext | null;
-};
-
 /**
  * A binding behavior for handling events.
  * @public
  */
 export class EventBinding {
+    private contextProperty: string;
+    private sourceProperty: string;
+
     /**
      * Creates an instance of EventBinding.
      * @param directive - The directive that has the configuration for this behavior.
      */
-    constructor(public readonly directive: HTMLBindingDirective) {}
+    constructor(public readonly directive: HTMLBindingDirective) {
+        this.sourceProperty = `${directive.id}-s`;
+        this.contextProperty = `${directive.id}-c`;
+    }
 
     /**
      * Bind this behavior to the source.
@@ -548,9 +564,9 @@ export class EventBinding {
      */
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const directive = this.directive;
-        const target = targets[directive.nodeId] as FASTEventSource;
-        target.$fastSource = source;
-        target.$fastContext = context;
+        const target = targets[directive.nodeId];
+        target[this.sourceProperty] = source;
+        target[this.contextProperty] = context;
         target.addEventListener(directive.targetAspect, this, directive.options);
     }
 
@@ -561,13 +577,10 @@ export class EventBinding {
      * @param targets - The targets that behaviors in a view can attach to.
      */
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
-        const target = targets[this.directive.nodeId] as FASTEventSource;
-        target.$fastSource = target.$fastContext = null;
-        target.removeEventListener(
-            this.directive.targetAspect,
-            this,
-            this.directive.options
-        );
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        target[this.sourceProperty] = target[this.contextProperty] = null;
+        target.removeEventListener(directive.targetAspect, this, directive.options);
     }
 
     /**
@@ -582,9 +595,13 @@ export class EventBinding {
      * @internal
      */
     handleEvent(event: Event): void {
-        const target = event.currentTarget as FASTEventSource;
+        const target = event.currentTarget!;
+
         ExecutionContext.setEvent(event);
-        const result = this.directive.binding(target.$fastSource, target.$fastContext!);
+        const result = this.directive.binding(
+            target[this.sourceProperty],
+            target[this.contextProperty]
+        );
         ExecutionContext.setEvent(null);
 
         if (result !== true) {
@@ -593,6 +610,103 @@ export class EventBinding {
     }
 }
 
+/**
+ * The settings required to enable two-way binding.
+ * @public
+ */
+export interface TwoWaySettings {
+    /**
+     * Determines which event to listen to, to detect changes in the view.
+     * @param directive - The directive to determine the change event for.
+     * @param target - The target element to determine the change event for.
+     */
+    determineChangeEvent(directive: HTMLBindingDirective, target: HTMLElement): string;
+}
+
+let twoWaySettings: TwoWaySettings = {
+    determineChangeEvent() {
+        return "change";
+    },
+};
+
+/**
+ * A binding behavior for bindings that update in two directions.
+ * @public
+ */
+export class TwoWayBinding extends ChangeBinding {
+    private changeEvent: string;
+
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
+        super.bind(source, context, targets);
+
+        const directive = this.directive;
+        const target = targets[directive.nodeId] as HTMLElement;
+
+        if (!this.changeEvent) {
+            this.changeEvent =
+                directive.options.changeEvent ??
+                twoWaySettings.determineChangeEvent(directive, target);
+        }
+
+        target.addEventListener(this.changeEvent, this);
+    }
+
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
+        super.unbind(source, context, targets);
+        (targets[this.directive.nodeId] as HTMLElement).removeEventListener(
+            this.changeEvent,
+            this
+        );
+    }
+
+    /** @internal */
+    public handleEvent(event: Event): void {
+        const directive = this.directive;
+        const target = event.currentTarget as HTMLElement;
+
+        let value;
+
+        switch (directive.aspectType) {
+            case 1:
+                value = target.getAttribute(directive.targetAspect);
+                break;
+            case 2:
+                value = target.hasAttribute(directive.targetAspect);
+                break;
+            case 4:
+                value = target.innerText;
+                break;
+            default:
+                value = target[directive.targetAspect];
+                break;
+        }
+
+        const observer = this.getObserver(target);
+        const last = (observer as any).last as ObservationRecord; // using internal API!!!
+        last.propertySource[last.propertyName] = directive.options.fromView(value);
+    }
+
+    /**
+     * Configures two-way binding.
+     * @param settings - The settings to use for the two-way binding system.
+     */
+    public static configure(settings: TwoWaySettings) {
+        twoWaySettings = settings;
+    }
+}
+
 /**
  * The default binding options.
  * @public
@@ -608,6 +722,23 @@ export const onChange = BindingConfig.define(
     {} as DefaultBindingOptions
 );
 
+/**
+ * The default twoWay binding options.
+ * @public
+ */
+export type DefaultTwoWayBindingOptions = DefaultBindingOptions & {
+    changeEvent?: string;
+    fromView?: (value: any) => any;
+};
+
+/**
+ * The default twoWay binding configuration.
+ * @public
+ */
+export const twoWay = BindingConfig.define(BindingMode.define(TwoWayBinding), {
+    fromView: v => v,
+} as DefaultTwoWayBindingOptions);
+
 /**
  * The default onTime binding configuration.
  * @public
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index ea5767224e0..1e251570a2d 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -45,6 +45,8 @@ export type ChildrenDirectiveOptions<T = any> =
 export class ChildrenDirective extends NodeObservationDirective<
     ChildrenDirectiveOptions
 > {
+    private observerProperty = `${this.id}-o`;
+
     /**
      * Creates an instance of ChildrenDirective.
      * @param options - The options to use in configuring the child observation behavior.
@@ -60,8 +62,9 @@ export class ChildrenDirective extends NodeObservationDirective<
      */
     observe(target: any): void {
         const observer =
-            target[this.id] ?? (target[this.id] = new MutationObserver(this.handleEvent));
-        observer.$fastTarget = target;
+            target[this.observerProperty] ??
+            (target[this.observerProperty] = new MutationObserver(this.handleEvent));
+        observer.target = target;
         observer.observe(target, this.options);
     }
 
@@ -70,8 +73,8 @@ export class ChildrenDirective extends NodeObservationDirective<
      * @param target - The target to unobserve.
      */
     disconnect(target: any): void {
-        const observer = target[this.id];
-        observer.$fastTarget = null;
+        const observer = target[this.observerProperty];
+        observer.target = null;
         observer.disconnect();
     }
 
@@ -88,9 +91,8 @@ export class ChildrenDirective extends NodeObservationDirective<
     }
 
     private handleEvent = (mutations: MutationRecord[], observer: any): void => {
-        const target = observer.$fastTarget;
-        const source = target.$fastSource;
-        this.updateTarget(source, this.computeNodes(target));
+        const target = observer.target;
+        this.updateTarget(this.getSource(target), this.computeNodes(target));
     };
 }
 
diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index 7951388f783..b78cae48f1b 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -51,6 +51,8 @@ export const elements = (selector?: string): ElementsFilter =>
 export abstract class NodeObservationDirective<
     T extends NodeBehaviorOptions
 > extends StatelessAttachedAttributeDirective<T> {
+    private sourceProperty = `${this.id}-s`;
+
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
@@ -59,7 +61,7 @@ export abstract class NodeObservationDirective<
      */
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const target = targets[this.nodeId] as any;
-        target.$fastSource = source;
+        target[this.sourceProperty] = source;
         this.updateTarget(source, this.computeNodes(target));
         this.observe(target);
     }
@@ -74,7 +76,16 @@ export abstract class NodeObservationDirective<
         const target = targets[this.nodeId] as any;
         this.updateTarget(source, emptyArray);
         this.disconnect(target);
-        target.$fastSource = null;
+        target[this.sourceProperty] = null;
+    }
+
+    /**
+     * Gets the data source for the target.
+     * @param target - The target to get the source for.
+     * @returns The source.
+     */
+    protected getSource(target: Node) {
+        return target[this.sourceProperty];
     }
 
     /**
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index 14436f36829..9db73ead2dd 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -45,8 +45,7 @@ export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveO
     /** @internal */
     handleEvent(event: Event): void {
         const target = event.currentTarget as any;
-        const source = target.$fastSource;
-        this.updateTarget(source, this.computeNodes(target));
+        this.updateTarget(this.getSource(target), this.computeNodes(target));
     }
 }
 

From cc23450f19654101e3414385d8b7979c5bf6d499 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Wed, 18 May 2022 11:43:40 -0700
Subject: [PATCH 112/135] chore: remove dependency on ie11 types (#5941)

* feat: new execution context design (#5800)

* refactor: new design for execution context

* feat: add two new event helpers to the execution context and tests

* fix: wip update types to match new context apis

* fix: update foundation and components template types

* Change files

* fix: update template type in fast-website

* fix: update site components for new template types

* fix: add missing api updates

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>

* remove unnecessary dependency on @types/ie11 package

* Change files

Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...t-element-5a826d6a-4945-4423-873e-27ef3dba737b.json |  7 +++++++
 packages/web-components/fast-element/package.json      |  1 -
 packages/web-components/fast-element/src/interfaces.ts | 10 ++++++++++
 packages/web-components/fast-element/tsconfig.json     |  3 +--
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 change/@microsoft-fast-element-5a826d6a-4945-4423-873e-27ef3dba737b.json

diff --git a/change/@microsoft-fast-element-5a826d6a-4945-4423-873e-27ef3dba737b.json b/change/@microsoft-fast-element-5a826d6a-4945-4423-873e-27ef3dba737b.json
new file mode 100644
index 00000000000..69a7eef07b2
--- /dev/null
+++ b/change/@microsoft-fast-element-5a826d6a-4945-4423-873e-27ef3dba737b.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "remove unnecessary dependency on @types/ie11 package",
+  "packageName": "@microsoft/fast-element",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index 51be45fe044..cf44d110b72 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -73,7 +73,6 @@
     "@types/karma": "^5.0.0",
     "@types/mocha": "^7.0.2",
     "@types/webpack-env": "^1.15.2",
-    "@types/web-ie11": "^0.0.0",
     "chai": "^4.2.0",
     "chai-spies": "^1.0.0",
     "esm": "^3.2.25",
diff --git a/packages/web-components/fast-element/src/interfaces.ts b/packages/web-components/fast-element/src/interfaces.ts
index 7f7179b6f8f..c12b72c44db 100644
--- a/packages/web-components/fast-element/src/interfaces.ts
+++ b/packages/web-components/fast-element/src/interfaces.ts
@@ -21,6 +21,16 @@ export type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
 
+/**
+ * Extracts the item type from an array.
+ * @public
+ */
+export type ArrayItem<T> = T extends ReadonlyArray<infer TItem>
+    ? TItem
+    : T extends Array<infer TItem>
+    ? TItem
+    : any;
+
 /**
  * A policy for use with the standard trustedTypes platform API.
  * @public
diff --git a/packages/web-components/fast-element/tsconfig.json b/packages/web-components/fast-element/tsconfig.json
index 8b6f39845b9..649f0095b1c 100644
--- a/packages/web-components/fast-element/tsconfig.json
+++ b/packages/web-components/fast-element/tsconfig.json
@@ -11,8 +11,7 @@
         "module": "ESNext",
         "types": [
             "mocha",
-            "webpack-env",
-            "web-ie11"
+            "webpack-env"
         ],
         "lib": [
             "DOM",

From f2391f5d93329c332ce6df9c9adc90abfa5fe342 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Wed, 18 May 2022 12:01:51 -0700
Subject: [PATCH 113/135] fix incorrect and non-semantic slot names for search
 (#5942)

* fix incorrect and unsemantic slot names for search

* Change files
---
 ...st-foundation-119dceba-853f-4809-8a2b-169352ebe125.json | 7 +++++++
 .../web-components/fast-foundation/src/search/README.md    | 4 ++--
 .../fast-foundation/src/search/search.template.ts          | 4 ++--
 .../web-components/fast-foundation/src/search/search.ts    | 4 ++--
 4 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-119dceba-853f-4809-8a2b-169352ebe125.json

diff --git a/change/@microsoft-fast-foundation-119dceba-853f-4809-8a2b-169352ebe125.json b/change/@microsoft-fast-foundation-119dceba-853f-4809-8a2b-169352ebe125.json
new file mode 100644
index 00000000000..5d2db48a179
--- /dev/null
+++ b/change/@microsoft-fast-foundation-119dceba-853f-4809-8a2b-169352ebe125.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix incorrect and unsemantic slot names for search",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/search/README.md b/packages/web-components/fast-foundation/src/search/README.md
index 232e03bdb8c..d7fb15c74d6 100644
--- a/packages/web-components/fast-foundation/src/search/README.md
+++ b/packages/web-components/fast-foundation/src/search/README.md
@@ -132,8 +132,8 @@ This component is built with the expectation that focus is delegated to the inpu
 | `start`        | Content which can be provided before the search input       |
 | `end`          | Content which can be provided after the search clear button |
 |                | The default slot for the label                              |
-| `close-button` | The clear button                                            |
-| `close-glyph`  | The clear glyph                                             |
+| `clear-button` | The clear button                                            |
+| `clear-glyph`  | The clear glyph                                             |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/search/search.template.ts b/packages/web-components/fast-foundation/src/search/search.template.ts
index 5a2175a278d..206366daf8e 100644
--- a/packages/web-components/fast-foundation/src/search/search.template.ts
+++ b/packages/web-components/fast-foundation/src/search/search.template.ts
@@ -73,7 +73,7 @@ export const searchTemplate: FoundationElementTemplate<
                     aria-roledescription="${x => x.ariaRoledescription}"
                     ${ref("control")}
                 />
-                <slot name="close-button">
+                <slot name="clear-button">
                     <button
                         class="clear-button ${x =>
                             x.value ? "" : "clear-button__hidden"}"
@@ -81,7 +81,7 @@ export const searchTemplate: FoundationElementTemplate<
                         tabindex="-1"
                         @click=${x => x.handleClearInput()}
                     >
-                        <slot name="close-glyph">
+                        <slot name="clear-glyph">
                             <svg
                                 width="9"
                                 height="9"
diff --git a/packages/web-components/fast-foundation/src/search/search.ts b/packages/web-components/fast-foundation/src/search/search.ts
index aca3fe552b6..74bf3a5d0ef 100644
--- a/packages/web-components/fast-foundation/src/search/search.ts
+++ b/packages/web-components/fast-foundation/src/search/search.ts
@@ -25,8 +25,8 @@ export type SearchOptions = FoundationElementDefinition & StartEndOptions;
  * @slot start - Content which can be provided before the search input
  * @slot end - Content which can be provided after the search clear button
  * @slot - The default slot for the label
- * @slot close-button - The clear button
- * @slot close-glyph - The clear glyph
+ * @slot clear-button - The clear button
+ * @slot clear-glyph - The clear glyph
  * @csspart label - The label
  * @csspart root - The element wrapping the control, including start and end slots
  * @csspart control - The element representing the input

From b6238306c8ed1f8e375289d6b13dac6aa87b6c48 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Wed, 18 May 2022 12:27:59 -0700
Subject: [PATCH 114/135] remove deprecated keyCodes and add additional "keys"
 (#5944)

* remove deprecated keycodes and add additional keys

* Change files

* remove deprecated keyCode m fn
---
 ...-9d255289-3c46-4338-97c9-3ad30b39a4e0.json |   7 +
 .../fast-web-utilities/src/dom.spec.ts        | 165 -------
 .../utilities/fast-web-utilities/src/dom.ts   |   8 -
 .../fast-web-utilities/src/key-codes.ts       | 449 +-----------------
 4 files changed, 32 insertions(+), 597 deletions(-)
 create mode 100644 change/@microsoft-fast-web-utilities-9d255289-3c46-4338-97c9-3ad30b39a4e0.json

diff --git a/change/@microsoft-fast-web-utilities-9d255289-3c46-4338-97c9-3ad30b39a4e0.json b/change/@microsoft-fast-web-utilities-9d255289-3c46-4338-97c9-3ad30b39a4e0.json
new file mode 100644
index 00000000000..4f4f878dd45
--- /dev/null
+++ b/change/@microsoft-fast-web-utilities-9d255289-3c46-4338-97c9-3ad30b39a4e0.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "remove deprecated keycodes and add additional keys",
+  "packageName": "@microsoft/fast-web-utilities",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/utilities/fast-web-utilities/src/dom.spec.ts b/packages/utilities/fast-web-utilities/src/dom.spec.ts
index 3bd33c023f0..0a166fdb4a3 100644
--- a/packages/utilities/fast-web-utilities/src/dom.spec.ts
+++ b/packages/utilities/fast-web-utilities/src/dom.spec.ts
@@ -5,11 +5,9 @@ import {
     canUseFocusVisible,
     canUseForcedColors,
     getDisplayedNodes,
-    getKeyCode,
     isHTMLElement,
     resetDocumentCache,
 } from "./dom";
-import { KeyCodes } from "./key-codes";
 
 chai.use(spies);
 
@@ -45,169 +43,6 @@ describe("getDisplayedNodes", () => {
     });
 });
 
-describe("getKeyCode", () => {
-    it("should correctly handle null", () => {
-        expect(getKeyCode(null)).to.equal(null);
-    });
-
-    it("should correctly handle keyboard events with `keyCode` values", () => {
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keypress", {
-                    keyCode: 39,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.arrowRight);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keypress", {
-                    keyCode: 37,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.arrowLeft);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keypress", {
-                    keyCode: 38,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.arrowUp);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keydown", {
-                    keyCode: 40,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.arrowDown);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keydown", {
-                    keyCode: 13,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.enter);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keydown", {
-                    keyCode: 32,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.space);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keydown", {
-                    keyCode: 9,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.tab);
-    });
-
-    it("should correctly handle keyboard events with `which` values", () => {
-        // Since `which` is deprecated, it can no longer be set using KeyboardEvent
-        expect(
-            getKeyCode({
-                which: 39,
-                keyCode: 39,
-                charCode: 39,
-            } as any)
-        ).to.equal(KeyCodes.arrowRight);
-        expect(
-            getKeyCode({
-                which: 37,
-                keyCode: 37,
-                charCode: 37,
-            } as any)
-        ).to.equal(KeyCodes.arrowLeft);
-        expect(
-            getKeyCode({
-                which: 38,
-                keyCode: 38,
-                charCode: 38,
-            } as any)
-        ).to.equal(KeyCodes.arrowUp);
-        expect(
-            getKeyCode({
-                which: 40,
-                keyCode: 40,
-                charCode: 40,
-            } as any)
-        ).to.equal(KeyCodes.arrowDown);
-        expect(
-            getKeyCode({
-                which: 13,
-                keyCode: 13,
-                charCode: 13,
-            } as any)
-        ).to.equal(KeyCodes.enter);
-        expect(
-            getKeyCode({
-                which: 32,
-                keyCode: 32,
-                charCode: 32,
-            } as any)
-        ).to.equal(KeyCodes.space);
-        expect(
-            getKeyCode({
-                which: 9,
-                keyCode: 9,
-                charCode: 9,
-            } as any)
-        ).to.equal(KeyCodes.tab);
-    });
-
-    it("should correctly handle keyboard events with `charCode` values", () => {
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keypress", {
-                    charCode: 39,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.arrowRight);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keypress", {
-                    charCode: 37,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.arrowLeft);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keypress", {
-                    charCode: 38,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.arrowUp);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keypress", {
-                    charCode: 40,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.arrowDown);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keypress", {
-                    charCode: 13,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.enter);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keypress", {
-                    charCode: 32,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.space);
-        expect(
-            getKeyCode(
-                new KeyboardEvent("keypress", {
-                    charCode: 9,
-                } as KeyboardEventInit)
-            )
-        ).to.equal(KeyCodes.tab);
-    });
-});
-
 describe("canUseFocusVisible", () => {
     beforeEach(() => {
         resetDocumentCache();
diff --git a/packages/utilities/fast-web-utilities/src/dom.ts b/packages/utilities/fast-web-utilities/src/dom.ts
index d9467076319..eac4af8f5d8 100644
--- a/packages/utilities/fast-web-utilities/src/dom.ts
+++ b/packages/utilities/fast-web-utilities/src/dom.ts
@@ -25,14 +25,6 @@ export function getDisplayedNodes(
     return nodes.filter((node: HTMLElement) => node.offsetParent !== null);
 }
 
-/**
- * Gets the numeric key code associated with a keyboard event. This method is for use with DOM level 3 events
- * that still use the deprecated keyCode property.
- */
-export function getKeyCode(event: KeyboardEvent | null): number | null {
-    return event === null ? null : event.which || event.keyCode || event.charCode;
-}
-
 /**
  * Returns the nonce used in the page, if any.
  *
diff --git a/packages/utilities/fast-web-utilities/src/key-codes.ts b/packages/utilities/fast-web-utilities/src/key-codes.ts
index 719abe6dc98..0c8d624a853 100644
--- a/packages/utilities/fast-web-utilities/src/key-codes.ts
+++ b/packages/utilities/fast-web-utilities/src/key-codes.ts
@@ -1,442 +1,43 @@
-/**
- * Key Code values
- * @deprecated - KeyCodes are deprecated, use individual string key exports
- */
-export enum KeyCodes {
-    alt = 18,
-    arrowDown = 40,
-    arrowLeft = 37,
-    arrowRight = 39,
-    arrowUp = 38,
-    back = 8,
-    backSlash = 220,
-    break = 19,
-    capsLock = 20,
-    closeBracket = 221,
-    colon = 186,
-    colon2 = 59, // Opera and Firefox
-    comma = 188,
-    ctrl = 17,
-    delete = 46,
-    end = 35,
-    enter = 13,
-    equals = 187,
-    equals2 = 61, // Opera
-    equals3 = 107, // Firefox
-    escape = 27,
-    forwardSlash = 191,
-    function1 = 112,
-    function10 = 121,
-    function11 = 122,
-    function12 = 123,
-    function2 = 113,
-    function3 = 114,
-    function4 = 115,
-    function5 = 116,
-    function6 = 117,
-    function7 = 118,
-    function8 = 119,
-    function9 = 120,
-    home = 36,
-    insert = 45,
-    menu = 93,
-    minus = 189,
-    minus2 = 109, // Opera and Firefox
-    numLock = 144,
-    numPad0 = 96,
-    numPad1 = 97,
-    numPad2 = 98,
-    numPad3 = 99,
-    numPad4 = 100,
-    numPad5 = 101,
-    numPad6 = 102,
-    numPad7 = 103,
-    numPad8 = 104,
-    numPad9 = 105,
-    numPadDivide = 111,
-    numPadDot = 110,
-    numPadMinus = 109,
-    numPadMultiply = 106,
-    numPadPlus = 107,
-    openBracket = 219,
-    pageDown = 34,
-    pageUp = 33,
-    period = 190,
-    print = 44,
-    quote = 222,
-    scrollLock = 145,
-    shift = 16,
-    space = 32,
-    tab = 9,
-    tilde = 192,
-    windowsLeft = 91,
-    windowsOpera = 219, // Opera
-    windowsRight = 92,
-}
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeAlt: number = 18;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeArrowDown: number = 40;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeArrowLeft: number = 37;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeArrowRight: number = 39;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeArrowUp: number = 38;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeBack: number = 8;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeBackSlash: number = 220;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeBreak: number = 19;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeCapsLock: number = 20;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeCloseBracket: number = 221;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeColon: number = 186;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeColon2: number = 59; // Opera and Firefox
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeComma: number = 188;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeCtrl: number = 17;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeDelete: number = 46;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeEnd: number = 35;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeEnter: number = 13;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeEquals: number = 187;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeEquals2: number = 61; // Opera
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeEquals3: number = 107; // Firefox
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeEscape: number = 27;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeForwardSlash: number = 191;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction1: number = 112;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction10: number = 121;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction11: number = 122;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction12: number = 123;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction2: number = 113;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction3: number = 114;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction4: number = 115;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction5: number = 116;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction6: number = 117;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction7: number = 118;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction8: number = 119;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeFunction9: number = 120;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeHome: number = 36;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeInsert: number = 45;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeMenu: number = 93;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeMinus: number = 189;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeMinus2: number = 109; // Opera and Firefox
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumLock: number = 144;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPad0: number = 96;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPad1: number = 97;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPad2: number = 98;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPad3: number = 99;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPad4: number = 100;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPad5: number = 101;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPad6: number = 102;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPad7: number = 103;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPad8: number = 104;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPad9: number = 105;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPadDivide: number = 111;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPadDot: number = 110;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPadMinus: number = 109;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPadMultiply: number = 106;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeNumPadPlus: number = 107;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeOpenBracket: number = 219;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodePageDown: number = 34;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodePageUp: number = 33;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodePeriod: number = 190;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodePrint: number = 44;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeQuote: number = 222;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeScrollLock: number = 145;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeShift: number = 16;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeSpace: number = 32;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeTab: number = 9;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeTilde: number = 192;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeWindowsLeft: number = 91;
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeWindowsOpera: number = 219; // Opera
-
-/**
- * @deprecated - KeyCodes are deprecated, use string key exports
- */
-export const keyCodeWindowsRight: number = 92;
-
 /**
  * String values for use with KeyboardEvent.key
  */
+export const keyAlt: "Alt" = "Alt" as const;
+export const keyAltGraph: "AltGraph" = "AltGraph" as const;
+export const keyCapsLock: "CapsLock" = "CapsLock" as const;
+export const keyControl: "Control" = "Control" as const;
 export const keyArrowDown: "ArrowDown" = "ArrowDown" as const;
 export const keyArrowLeft: "ArrowLeft" = "ArrowLeft" as const;
 export const keyArrowRight: "ArrowRight" = "ArrowRight" as const;
 export const keyArrowUp: "ArrowUp" = "ArrowUp" as const;
+export const keyBackspace: "Backspace" = "Backspace" as const;
+export const keyDelete: "Delete" = "Delete" as const;
+export const keyEnd: "End" = "End" as const;
 export const keyEnter: "Enter" = "Enter" as const;
 export const keyEscape: "Escape" = "Escape" as const;
 export const keyHome: "Home" = "Home" as const;
-export const keyEnd: "End" = "End" as const;
+export const keyFunction: "Fn" = "Fn" as const;
+export const keyFunctionLock: "FnLock" = "FnLock" as const;
 export const keyFunction2: "F2" = "F2" as const;
+export const keyFunction3: "F3" = "F3" as const;
+export const keyFunction4: "F4" = "F4" as const;
+export const keyFunction5: "F5" = "F5" as const;
+export const keyFunction6: "F6" = "F6" as const;
+export const keyFunction7: "F7" = "F7" as const;
+export const keyFunction8: "F8" = "F8" as const;
+export const keyFunction9: "F9" = "F9" as const;
+export const keyFunction10: "F10" = "F10" as const;
+export const keyFunction11: "F11" = "F11" as const;
+export const keyFunction12: "F12" = "F12" as const;
+export const keyFunction13: "F13" = "F13" as const;
+export const keyFunction14: "F14" = "F14" as const;
+export const keyFunction15: "F15" = "F15" as const;
+export const keyNumLock: "NumLock" = "NumLock" as const;
 export const keyPageDown: "PageDown" = "PageDown" as const;
 export const keyPageUp: "PageUp" = "PageUp" as const;
+export const keyScrollLock: "ScrollLock" = "ScrollLock" as const;
+export const keyShift: "Shift" = "Shift" as const;
 export const keySpace: " " = " " as const;
 export const keyTab: "Tab" = "Tab" as const;
-export const keyBackspace: "Backspace" = "Backspace" as const;
-export const keyDelete: "Delete" = "Delete" as const;
 
 export const ArrowKeys = {
     ArrowDown: keyArrowDown,

From 4685bc40cffdf0640bdaa673c04e8994c1cbbe1f Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Wed, 18 May 2022 12:48:06 -0700
Subject: [PATCH 115/135] remove deprecated item slot on accordion (#5945)

* remove deprecated item slot on accordion

* Change files
---
 ...st-foundation-d461d7cb-5136-4816-94e9-04b46fa8a11e.json | 7 +++++++
 .../fast-foundation/src/accordion/accordion.template.ts    | 3 +--
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-d461d7cb-5136-4816-94e9-04b46fa8a11e.json

diff --git a/change/@microsoft-fast-foundation-d461d7cb-5136-4816-94e9-04b46fa8a11e.json b/change/@microsoft-fast-foundation-d461d7cb-5136-4816-94e9-04b46fa8a11e.json
new file mode 100644
index 00000000000..b600014a1d0
--- /dev/null
+++ b/change/@microsoft-fast-foundation-d461d7cb-5136-4816-94e9-04b46fa8a11e.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "remove deprecated item slot name on accordion as it is the default slot",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.template.ts b/packages/web-components/fast-foundation/src/accordion/accordion.template.ts
index 17faac03206..1453ef8261e 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion.template.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion.template.ts
@@ -10,9 +10,8 @@ import type { Accordion } from "./accordion.js";
 export const accordionTemplate: FoundationElementTemplate<ViewTemplate<Accordion>> = (
     context,
     definition
-) => /* TODO: deprecate slot name `item` to only support default slot https://github.com/microsoft/fast/issues/5515 */ html`
+) => html`
     <template>
         <slot ${slotted({ property: "accordionItems", filter: elements() })}></slot>
-        <slot name="item" part="item" ${slotted("accordionItems")}></slot>
     </template>
 `;

From fd1a827f3c917129c27ef4dd17d6c07261d29464 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Wed, 18 May 2022 13:00:35 -0700
Subject: [PATCH 116/135] remove classes and parts from slots on
 `fast-foundation` templates (#5946)

* fixes build-break caused by rebase

* feat: update private change handlers to protected (#5872)

* update attribute and observable change handlers with internal logic to be protected instead of private

* Change files

* udpate api docs

* fixing build / test after rebase

* remove class and part names from slots in fast foundation templates

* Change files

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...st-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json | 7 +++++++
 .../src/accordion-item/accordion-item.template.ts          | 4 ++--
 .../fast-foundation/src/accordion-item/accordion-item.ts   | 2 --
 .../web-components/fast-foundation/src/accordion/README.md | 2 --
 .../web-components/fast-foundation/src/avatar/README.md    | 1 -
 .../fast-foundation/src/avatar/avatar.template.ts          | 6 +++---
 .../web-components/fast-foundation/src/avatar/avatar.ts    | 1 -
 .../fast-foundation/src/directives/reflect-attributes.ts   | 1 -
 .../src/progress-ring/progress-ring.template.ts            | 2 +-
 .../fast-foundation/src/progress/progress.template.ts      | 2 +-
 packages/web-components/fast-foundation/src/tabs/README.md | 2 --
 .../fast-foundation/src/tabs/tabs.template.ts              | 4 ++--
 packages/web-components/fast-foundation/src/tabs/tabs.ts   | 2 --
 13 files changed, 16 insertions(+), 20 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json

diff --git a/change/@microsoft-fast-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json b/change/@microsoft-fast-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json
new file mode 100644
index 00000000000..4bad6fdfbce
--- /dev/null
+++ b/change/@microsoft-fast-foundation-85e04ad1-6a33-4d0e-9ec8-0017d5523bde.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "remove class and part names from slots in fast foundation templates",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
index feb010d0131..c9340bbd839 100644
--- a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
+++ b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
@@ -35,10 +35,10 @@ export const accordionItemTemplate: FoundationElementTemplate<
             ${startSlotTemplate(context, definition)}
             ${endSlotTemplate(context, definition)}
             <span class="icon" part="icon" aria-hidden="true">
-                <slot name="expanded-icon" part="expanded-icon">
+                <slot name="expanded-icon">
                     ${definition.expandedIcon || ""}
                 </slot>
-                <slot name="collapsed-icon" part="collapsed-icon">
+                <slot name="collapsed-icon">
                     ${definition.collapsedIcon || ""}
                 </slot>
             <span>
diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts
index c75cb84f59f..134d55faedb 100644
--- a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts
+++ b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts
@@ -34,8 +34,6 @@ export type AccordionItemOptions = FoundationElementDefinition &
  * @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 expanded-icon - The expanded icon slot
- * @csspart collapsed-icon - The collapsed icon
  * @csspart region - The wrapper for the accordion item content
  *
  * @public
diff --git a/packages/web-components/fast-foundation/src/accordion/README.md b/packages/web-components/fast-foundation/src/accordion/README.md
index e3091a2af11..1073dea3b27 100644
--- a/packages/web-components/fast-foundation/src/accordion/README.md
+++ b/packages/web-components/fast-foundation/src/accordion/README.md
@@ -206,8 +206,6 @@ export const myAccordionItem = AccordionItem.compose<AccordionItemOptions>({
 | `button`          | The button which serves to invoke the item               |
 | `heading-content` | Wraps the slot for the heading content within the button |
 | `icon`            | The icon container                                       |
-| `expanded-icon`   | The expanded icon slot                                   |
-| `collapsed-icon`  | The collapsed icon                                       |
 | `region`          | The wrapper for the accordion item content               |
 
 #### Slots
diff --git a/packages/web-components/fast-foundation/src/avatar/README.md b/packages/web-components/fast-foundation/src/avatar/README.md
index 36519df50a8..20a54166157 100644
--- a/packages/web-components/fast-foundation/src/avatar/README.md
+++ b/packages/web-components/fast-foundation/src/avatar/README.md
@@ -165,7 +165,6 @@ This component is built with the expectation that focus is delegated to the anch
 | ----------- | ------------------------------------- |
 | `backplate` | The wrapping container for the avatar |
 | `link`      | The avatar link                       |
-| `media`     | The media slot                        |
 | `content`   | The default slot                      |
 
 #### Slots
diff --git a/packages/web-components/fast-foundation/src/avatar/avatar.template.ts b/packages/web-components/fast-foundation/src/avatar/avatar.template.ts
index 40727c731f2..546804dfeea 100644
--- a/packages/web-components/fast-foundation/src/avatar/avatar.template.ts
+++ b/packages/web-components/fast-foundation/src/avatar/avatar.template.ts
@@ -23,9 +23,9 @@ export const avatarTemplate: FoundationElementTemplate<
             href="${x => (x.link ? x.link : void 0)}"
             style="${x => (x.color ? `color: var(--avatar-color-${x.color});` : void 0)}"
         >
-            <slot name="media" part="media">${definition.media || ""}</slot>
-            <slot class="content" part="content"><slot>
+            <slot name="media">${definition.media || ""}</slot>
+            <slot><slot>
         </a>
     </div>
-    <slot name="badge" part="badge"></slot>
+    <slot name="badge"></slot>
 `;
diff --git a/packages/web-components/fast-foundation/src/avatar/avatar.ts b/packages/web-components/fast-foundation/src/avatar/avatar.ts
index 843e3371539..171752c7583 100644
--- a/packages/web-components/fast-foundation/src/avatar/avatar.ts
+++ b/packages/web-components/fast-foundation/src/avatar/avatar.ts
@@ -22,7 +22,6 @@ export type AvatarOptions = FoundationElementDefinition & {
  * @slot badge - Used to provide a badge, such as a status badge
  * @csspart backplate - The wrapping container for the avatar
  * @csspart link - The avatar link
- * @csspart media - The media slot
  * @csspart content - The default slot
  *
  * @public
diff --git a/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts b/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
index cf2e32d7739..f42e9d9c7c8 100644
--- a/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
+++ b/packages/web-components/fast-foundation/src/directives/reflect-attributes.ts
@@ -77,7 +77,6 @@ class ReflectAttributesDirective extends StatelessAttachedAttributeDirective<str
      * The attributes the behavior is reflecting
      */
     public attributes: Readonly<string[]>;
-
     constructor(attributes: string[]) {
         super(attributes);
         this.attributes = Object.freeze(attributes);
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
index 2da6ae80e37..e9a485a00ff 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
@@ -52,7 +52,7 @@ export const progressRingTemplate: FoundationElementTemplate<
         ${when(
             x => typeof x.value !== "number",
             html<BaseProgress>`
-                <slot name="indeterminate" slot="indeterminate">
+                <slot name="indeterminate">
                     ${definition.indeterminateIndicator || ""}
                 </slot>
             `
diff --git a/packages/web-components/fast-foundation/src/progress/progress.template.ts b/packages/web-components/fast-foundation/src/progress/progress.template.ts
index afeef212cc7..ca3dda045d8 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.template.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.template.ts
@@ -34,7 +34,7 @@ export const progressTemplate: FoundationElementTemplate<
             x => typeof x.value !== "number",
             html<BaseProgress>`
                 <div class="progress" part="progress" slot="indeterminate">
-                    <slot class="indeterminate" name="indeterminate">
+                    <slot name="indeterminate">
                         ${defintion.indeterminateIndicator1 || ""}
                         ${defintion.indeterminateIndicator2 || ""}
                     </slot>
diff --git a/packages/web-components/fast-foundation/src/tabs/README.md b/packages/web-components/fast-foundation/src/tabs/README.md
index 58f5cf1aee9..33d881d8f6a 100644
--- a/packages/web-components/fast-foundation/src/tabs/README.md
+++ b/packages/web-components/fast-foundation/src/tabs/README.md
@@ -153,9 +153,7 @@ export const myTabs = Tabs.compose({
 | Name              | Description                       |
 | ----------------- | --------------------------------- |
 | `tablist`         | The element wrapping for the tabs |
-| `tab`             | The tab slot                      |
 | `activeIndicator` | The visual indicator              |
-| `tabpanel`        | The tabpanel slot                 |
 
 #### Slots
 
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.template.ts b/packages/web-components/fast-foundation/src/tabs/tabs.template.ts
index a159e2f82da..6bbb0dcb5e9 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.template.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.template.ts
@@ -15,7 +15,7 @@ export const tabsTemplate: FoundationElementTemplate<ViewTemplate<Tabs>, TabsOpt
     <template class="${x => x.orientation}">
         ${startSlotTemplate(context, definition)}
         <div class="tablist" part="tablist" role="tablist">
-            <slot class="tab" name="tab" part="tab" ${slotted("tabs")}></slot>
+            <slot name="tab" ${slotted("tabs")}></slot>
 
             ${when(
                 x => x.showActiveIndicator,
@@ -30,7 +30,7 @@ export const tabsTemplate: FoundationElementTemplate<ViewTemplate<Tabs>, TabsOpt
         </div>
         ${endSlotTemplate(context, definition)}
         <div class="tabpanel">
-            <slot name="tabpanel" part="tabpanel" ${slotted("tabpanels")}></slot>
+            <slot name="tabpanel" ${slotted("tabpanels")}></slot>
         </div>
     </template>
 `;
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
index 2a7625ff44b..991ab0e3fd0 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts
@@ -46,9 +46,7 @@ export type TabsOrientation = typeof TabsOrientation[keyof typeof TabsOrientatio
  * @slot tab - The slot for tabs
  * @slot tabpanel - The slot for tabpanels
  * @csspart tablist - The element wrapping for the tabs
- * @csspart tab - The tab slot
  * @csspart activeIndicator - The visual indicator
- * @csspart tabpanel - The tabpanel slot
  * @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
  *
  * @public

From c7c2b8b1929d58b88a524cf80cdb25d31ad986fe Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Fri, 20 May 2022 11:05:55 -0400
Subject: [PATCH 117/135] feat: add splice strategies for array observation
 (#5999)

* feat: extract splice merging to a strategy

* feat: enable splice strategy to control splice creation per array method

* feat: add reset splice strategy

* refactor: made array length observation part of the standard interface

* feat: add SpliceStrategySupport and fix enum/literals

* refactor: re-organize array observation code

* chore: add splice-strategies to the package and clean up exports

* Change files

* chore: remove invalid eslint comments

* test: add array observer tests for all array mutations

* fix: adding extensions back to exports

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-19034156-dca2-4efc-8995-4003df6c2107.json |   7 +
 ...-0f273d05-e607-443b-ae31-aa5ab842432a.json |   7 +
 .../fast-element/docs/api-report.md           |  91 ++-
 .../web-components/fast-element/package.json  |   4 +
 .../web-components/fast-element/src/index.ts  |   3 +-
 .../src/observation/array-observer.spec.ts    | 148 -----
 .../src/observation/array-observer.ts         | 274 ---------
 .../src/observation/arrays.spec.ts            | 430 ++++++++++++++
 .../fast-element/src/observation/arrays.ts    | 544 ++++++++++++++++++
 .../src/observation/observable.ts             |   5 -
 ...change-records.ts => splice-strategies.ts} | 267 +++++++--
 .../fast-element/src/templating/binding.ts    |   5 +-
 .../src/templating/html-directive.ts          |  15 +-
 .../fast-element/src/templating/repeat.ts     |   7 +-
 14 files changed, 1292 insertions(+), 515 deletions(-)
 create mode 100644 change/@microsoft-fast-element-19034156-dca2-4efc-8995-4003df6c2107.json
 create mode 100644 change/@microsoft-fast-foundation-0f273d05-e607-443b-ae31-aa5ab842432a.json
 delete mode 100644 packages/web-components/fast-element/src/observation/array-observer.spec.ts
 delete mode 100644 packages/web-components/fast-element/src/observation/array-observer.ts
 create mode 100644 packages/web-components/fast-element/src/observation/arrays.spec.ts
 create mode 100644 packages/web-components/fast-element/src/observation/arrays.ts
 rename packages/web-components/fast-element/src/observation/{array-change-records.ts => splice-strategies.ts} (67%)

diff --git a/change/@microsoft-fast-element-19034156-dca2-4efc-8995-4003df6c2107.json b/change/@microsoft-fast-element-19034156-dca2-4efc-8995-4003df6c2107.json
new file mode 100644
index 00000000000..71293dae9c1
--- /dev/null
+++ b/change/@microsoft-fast-element-19034156-dca2-4efc-8995-4003df6c2107.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: add splice strategies for array observation",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-0f273d05-e607-443b-ae31-aa5ab842432a.json b/change/@microsoft-fast-foundation-0f273d05-e607-443b-ae31-aa5ab842432a.json
new file mode 100644
index 00000000000..ad20afd8611
--- /dev/null
+++ b/change/@microsoft-fast-foundation-0f273d05-e607-443b-ae31-aa5ab842432a.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: update imports to match latest fast-element exports",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 60e857fe552..51af4a73528 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -30,31 +30,43 @@ export class AdoptedStyleSheetsStrategy implements StyleStrategy {
     readonly sheets: CSSStyleSheet[];
 }
 
+// @public
+export interface ArrayObserver extends SubscriberSet {
+    addSplice(splice: Splice): void;
+    flush(): void;
+    readonly lengthObserver: LengthObserver;
+    reset(oldCollection: any[] | undefined): void;
+    strategy: SpliceStrategy | null;
+}
+
+// @public
+export const ArrayObserver: Readonly<{
+    readonly enable: () => void;
+}>;
+
 // @public
 export const Aspect: Readonly<{
-    none: 0;
-    attribute: 1;
-    booleanAttribute: 2;
-    property: 3;
-    content: 4;
-    tokenList: 5;
-    event: 6;
-    assign(directive: Aspected, value: string): void;
+    readonly none: 0;
+    readonly attribute: 1;
+    readonly booleanAttribute: 2;
+    readonly property: 3;
+    readonly content: 4;
+    readonly tokenList: 5;
+    readonly event: 6;
+    readonly assign: (directive: Aspected, value: string) => void;
 }>;
 
+// @public
+export type Aspect = typeof Aspect[Exclude<keyof typeof Aspect, "assign" | "none">];
+
 // @public
 export interface Aspected {
-    aspectType: AspectType;
+    aspectType: Aspect;
     binding?: Binding;
     sourceAspect: string;
     targetAspect: string;
 }
 
-// @public
-export type AspectType = Exclude<{
-    [K in keyof typeof Aspect]: typeof Aspect[K] extends number ? typeof Aspect[K] : never;
-}[keyof typeof Aspect], typeof Aspect.none>;
-
 // @public
 export function attr(config?: DecoratorAttributeConfiguration): (target: {}, property: string) => void;
 
@@ -118,7 +130,7 @@ export const BindingConfig: Readonly<{
 export type BindingConfigResolver<T> = (options: T) => BindingConfig<T>;
 
 // @public
-export type BindingMode = Record<AspectType, (directive: HTMLBindingDirective) => Pick<ViewBehaviorFactory, "createBehavior">>;
+export type BindingMode = Record<Aspect, (directive: HTMLBindingDirective) => Pick<ViewBehaviorFactory, "createBehavior">>;
 
 // @public
 export const BindingMode: Readonly<{
@@ -345,9 +357,6 @@ export interface ElementViewTemplate<TSource = any, TParent = any> {
 // @internal
 export const emptyArray: readonly never[];
 
-// @public
-export function enableArrayObservation(): void;
-
 // @public
 export class EventBinding {
     constructor(directive: HTMLBindingDirective);
@@ -430,7 +439,7 @@ export function html<TSource = any, TParent = any, TContext extends ExecutionCon
 // @public
 export class HTMLBindingDirective implements HTMLDirective, ViewBehaviorFactory, Aspected {
     constructor(binding: Binding, mode: BindingMode, options: any);
-    aspectType: AspectType;
+    aspectType: Aspect;
     // (undocumented)
     binding: Binding;
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
@@ -512,6 +521,11 @@ export interface ItemViewTemplate<TSource = any, TParent = any> {
 function length_2<T>(array: readonly T[]): number;
 export { length_2 as length }
 
+// @public
+export interface LengthObserver extends Subscriber {
+    length: number;
+}
+
 // @public
 export const Markup: Readonly<{
     interpolation: (id: string) => string;
@@ -733,17 +747,46 @@ export interface SlottedDirectiveOptions<T = any> extends NodeBehaviorOptions<T>
 
 // @public
 export class Splice {
-    constructor(
-    index: number,
-    removed: any[],
-    addedCount: number);
+    constructor(index: number, removed: any[], addedCount: number);
+    // (undocumented)
     addedCount: number;
+    adjustTo(array: any[]): this;
+    // (undocumented)
     index: number;
     // (undocumented)
-    static normalize(previous: unknown[] | undefined, current: unknown[], changes: Splice[] | undefined): Splice[] | undefined;
     removed: any[];
+    reset?: boolean;
 }
 
+// @public
+export interface SpliceStrategy {
+    normalize(previous: unknown[] | undefined, current: unknown[], changes: Splice[] | undefined): readonly Splice[];
+    pop(array: any[], observer: ArrayObserver, pop: typeof Array.prototype.pop, args: any[]): any;
+    push(array: any[], observer: ArrayObserver, push: typeof Array.prototype.push, args: any[]): any;
+    reverse(array: any[], observer: ArrayObserver, reverse: typeof Array.prototype.reverse, args: any[]): any;
+    shift(array: any[], observer: ArrayObserver, shift: typeof Array.prototype.shift, args: any[]): any;
+    sort(array: any[], observer: ArrayObserver, sort: typeof Array.prototype.sort, args: any[]): any[];
+    splice(array: any[], observer: ArrayObserver, splice: typeof Array.prototype.splice, args: any[]): any;
+    readonly support: SpliceStrategySupport;
+    unshift(array: any[], observer: ArrayObserver, unshift: typeof Array.prototype.unshift, args: any[]): any[];
+}
+
+// @public
+export const SpliceStrategy: Readonly<{
+    readonly reset: Splice[];
+    readonly setDefaultStrategy: (strategy: SpliceStrategy) => void;
+}>;
+
+// @public
+export const SpliceStrategySupport: Readonly<{
+    readonly reset: 1;
+    readonly splice: 2;
+    readonly optimized: 3;
+}>;
+
+// @public
+export type SpliceStrategySupport = typeof SpliceStrategySupport[keyof typeof SpliceStrategySupport];
+
 // @public
 export abstract class StatelessAttachedAttributeDirective<T> implements HTMLDirective, ViewBehaviorFactory, ViewBehavior {
     constructor(options: T);
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index cf44d110b72..0e31693bd5c 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -33,6 +33,10 @@
     "./debug.js": {
       "types": "./dist/dts/debug.d.ts",
       "default": "./dist/esm/debug.js"
+    },
+    "./splice-strategies.js": {
+      "types": "./dist/dts/observation/splice-strategies.d.ts",
+      "default": "./dist/esm/observation/splice-strategies.js"
     }
   },
   "unpkg": "dist/fast-element.min.js",
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index 03e44761575..78ccf6540e5 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -14,8 +14,7 @@ export * from "./platform.js";
 // Observation
 export * from "./observation/observable.js";
 export * from "./observation/notifier.js";
-export * from "./observation/array-change-records.js";
-export * from "./observation/array-observer.js";
+export * from "./observation/arrays.js";
 export * from "./observation/update-queue.js";
 export type { Behavior } from "./observation/behavior.js";
 
diff --git a/packages/web-components/fast-element/src/observation/array-observer.spec.ts b/packages/web-components/fast-element/src/observation/array-observer.spec.ts
deleted file mode 100644
index b8b0b6bcfea..00000000000
--- a/packages/web-components/fast-element/src/observation/array-observer.spec.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { expect } from "chai";
-import { Observable } from "./observable";
-import { enableArrayObservation, length } from "./array-observer";
-import { SubscriberSet } from "./notifier";
-import { Updates } from "./update-queue";
-
-describe("The ArrayObserver", () => {
-    it("can be retrieved through Observable.getNotifier()", () => {
-        enableArrayObservation();
-        const array = [];
-        const notifier = Observable.getNotifier(array);
-        expect(notifier).to.be.instanceOf(SubscriberSet);
-    });
-
-    it("is the same instance for multiple calls to Observable.getNotifier() on the same array", () => {
-        enableArrayObservation();
-        const array = [];
-        const notifier = Observable.getNotifier(array);
-        const notifier2 = Observable.getNotifier(array);
-        expect(notifier).to.equal(notifier2);
-    });
-
-    it("is different for different arrays", () => {
-        enableArrayObservation();
-        const notifier = Observable.getNotifier([]);
-        const notifier2 = Observable.getNotifier([]);
-        expect(notifier).to.not.equal(notifier2);
-    });
-
-    it("doesn't affect for/in loops on arrays when enabled", () => {
-        enableArrayObservation();
-
-        const array = [1, 2, 3];
-        const keys: string[] = [];
-
-        for (const key in array) {
-            keys.push(key);
-        }
-
-        expect(keys).eql(["0", "1", "2"]);
-    });
-
-    it("doesn't affect for/in loops on arrays when the array is observed", () => {
-        enableArrayObservation();
-
-        const array = [1, 2, 3];
-        const keys: string[] = [];
-        const notifier = Observable.getNotifier(array);
-
-        for (const key in array) {
-            keys.push(key);
-        }
-
-        expect(notifier).to.be.instanceOf(SubscriberSet);
-        expect(keys).eql(["0", "1", "2"])
-    });
-});
-
-describe("The array length observer", () => {
-    class Model {
-        items: any[];
-    }
-
-    it("returns zero length if the array is undefined", async () => {
-        const instance = new Model();
-        const observer = Observable.binding<Model>(x => length(x.items));
-
-        const value = observer.observe(instance)
-
-        expect(value).to.equal(0);
-
-        observer.disconnect();
-    });
-
-    it("returns zero length if the array is null", async () => {
-        const instance = new Model();
-        instance.items = null as any;
-        const observer = Observable.binding<Model>(x => length(x.items));
-
-        const value = observer.observe(instance)
-
-        expect(value).to.equal(0);
-
-        observer.disconnect();
-    });
-
-    it("returns length of an array", async () => {
-        const instance = new Model();
-        instance.items = [1,2,3,4,5];
-        const observer = Observable.binding<Model>(x => length(x.items));
-
-        const value = observer.observe(instance)
-
-        expect(value).to.equal(5);
-
-        observer.disconnect();
-    });
-
-    it("notifies when the array length changes", async () => {
-        const instance = new Model();
-        instance.items = [1,2,3,4,5];
-
-        let changed = false;
-        const observer = Observable.binding<Model>(x => length(x.items), {
-            handleChange() {
-                changed = true;
-            }
-        });
-
-        const value = observer.observe(instance)
-
-        expect(value).to.equal(5);
-
-        instance.items.push(6);
-
-        await Updates.next();
-
-        expect(changed).to.be.true;
-        expect(observer.observe(instance)).to.equal(6);
-
-        observer.disconnect();
-    });
-
-    it("does not notify on changes that don't change the length", async () => {
-        const instance = new Model();
-        instance.items = [1,2,3,4,5];
-
-        let changed = false;
-        const observer = Observable.binding<Model>(x => length(x.items), {
-            handleChange() {
-                changed = true;
-            }
-        });
-
-        const value = observer.observe(instance);
-
-        expect(value).to.equal(5);
-
-        instance.items.splice(2, 1, 6);
-
-        await Updates.next();
-
-        expect(changed).to.be.false;
-        expect(observer.observe(instance)).to.equal(5);
-
-        observer.disconnect();
-    });
-});
diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
deleted file mode 100644
index 270938ba478..00000000000
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import { Updates } from "./update-queue.js";
-import { Splice } from "./array-change-records.js";
-import { Subscriber, SubscriberSet } from "./notifier.js";
-import type { Notifier } from "./notifier.js";
-import { Observable } from "./observable.js";
-
-function setNonEnumerable(target: any, property: string, value: any): void {
-    Reflect.defineProperty(target, property, {
-        value,
-        enumerable: false,
-    });
-}
-
-interface LengthSubscriber extends Subscriber {
-    length: number;
-}
-
-class ArrayObserver extends SubscriberSet {
-    private oldCollection: any[] | undefined = void 0;
-    private splices: Splice[] | undefined = void 0;
-    private needsQueue: boolean = true;
-
-    /** @internal */
-    public lengthSubscriber: LengthSubscriber | undefined = void 0;
-
-    call: () => void = this.flush;
-
-    constructor(subject: any[]) {
-        super(subject);
-        setNonEnumerable(subject, "$fastController", this);
-    }
-
-    public subscribe(subscriber: Subscriber): void {
-        this.flush();
-        super.subscribe(subscriber);
-    }
-
-    public addSplice(splice: Splice): void {
-        if (this.splices === void 0) {
-            this.splices = [splice];
-        } else {
-            this.splices.push(splice);
-        }
-
-        this.enqueue();
-    }
-
-    public reset(oldCollection: any[] | undefined): void {
-        this.oldCollection = oldCollection;
-        this.enqueue();
-    }
-
-    public flush(): void {
-        const splices = this.splices;
-        const oldCollection = this.oldCollection;
-
-        if (splices === void 0 && oldCollection === void 0) {
-            return;
-        }
-
-        this.needsQueue = true;
-        this.splices = void 0;
-        this.oldCollection = void 0;
-
-        this.notify(Splice.normalize(oldCollection, this.subject, splices));
-    }
-
-    private enqueue(): void {
-        if (this.needsQueue) {
-            this.needsQueue = false;
-            Updates.enqueue(this);
-        }
-    }
-}
-
-let enabled = false;
-
-/* eslint-disable prefer-rest-params */
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-/**
- * Enables the array observation mechanism.
- * @remarks
- * Array observation is enabled automatically when using the
- * {@link RepeatDirective}, so calling this API manually is
- * not typically necessary.
- * @public
- */
-export function enableArrayObservation(): void {
-    if (enabled) {
-        return;
-    }
-
-    enabled = true;
-
-    Observable.setArrayObserverFactory(
-        (collection: any[]): Notifier => new ArrayObserver(collection)
-    );
-
-    const proto = Array.prototype;
-
-    if (!(proto as any).$fastPatch) {
-        setNonEnumerable(proto, "$fastPatch", 1);
-
-        const pop = proto.pop;
-        const push = proto.push;
-        const reverse = proto.reverse;
-        const shift = proto.shift;
-        const sort = proto.sort;
-        const splice = proto.splice;
-        const unshift = proto.unshift;
-        const adjustIndex = (changeRecord: Splice, array: any[]): Splice => {
-            let index = changeRecord.index;
-            const arrayLength = array.length;
-
-            if (index > arrayLength) {
-                index = arrayLength - changeRecord.addedCount;
-            } else if (index < 0) {
-                index =
-                    arrayLength +
-                    changeRecord.removed.length +
-                    index -
-                    changeRecord.addedCount;
-            }
-
-            changeRecord.index = index < 0 ? 0 : index;
-            return changeRecord;
-        };
-
-        Object.assign(proto, {
-            pop(...args) {
-                const notEmpty = this.length > 0;
-                const result = pop.apply(this, args);
-                const o = this.$fastController as ArrayObserver;
-
-                if (o !== void 0 && notEmpty) {
-                    o.addSplice(new Splice(this.length, [result], 0));
-                }
-
-                return result;
-            },
-
-            push(...args) {
-                const result = push.apply(this, args);
-                const o = this.$fastController as ArrayObserver;
-
-                if (o !== void 0) {
-                    o.addSplice(
-                        adjustIndex(
-                            new Splice(this.length - args.length, [], args.length),
-                            this
-                        )
-                    );
-                }
-
-                return result;
-            },
-
-            reverse(...args) {
-                let oldArray;
-                const o = this.$fastController as ArrayObserver;
-
-                if (o !== void 0) {
-                    o.flush();
-                    oldArray = this.slice();
-                }
-
-                const result = reverse.apply(this, args);
-
-                if (o !== void 0) {
-                    o.reset(oldArray);
-                }
-
-                return result;
-            },
-
-            shift(...args) {
-                const notEmpty = this.length > 0;
-                const result = shift.apply(this, args);
-                const o = this.$fastController as ArrayObserver;
-
-                if (o !== void 0 && notEmpty) {
-                    o.addSplice(new Splice(0, [result], 0));
-                }
-
-                return result;
-            },
-
-            sort(...args) {
-                let oldArray;
-                const o = this.$fastController as ArrayObserver;
-
-                if (o !== void 0) {
-                    o.flush();
-                    oldArray = this.slice();
-                }
-
-                const result = sort.apply(this, args);
-
-                if (o !== void 0) {
-                    o.reset(oldArray);
-                }
-
-                return result;
-            },
-
-            splice(...args) {
-                const result = splice.apply(this, args);
-                const o = this.$fastController as ArrayObserver;
-
-                if (o !== void 0) {
-                    o.addSplice(
-                        adjustIndex(
-                            new Splice(
-                                +args[0],
-                                result,
-                                args.length > 2 ? args.length - 2 : 0
-                            ),
-                            this
-                        )
-                    );
-                }
-
-                return result;
-            },
-
-            unshift(...args) {
-                const result = unshift.apply(this, args);
-                const o = this.$fastController as ArrayObserver;
-
-                if (o !== void 0) {
-                    o.addSplice(adjustIndex(new Splice(0, [], args.length), this));
-                }
-
-                return result;
-            },
-        });
-    }
-}
-
-/**
- * Enables observing the length of an array.
- * @param array - The array to observe the length of.
- * @returns The length of the array.
- * @public
- */
-export function length<T>(array: readonly T[]): number {
-    if (!array) {
-        return 0;
-    }
-
-    let arrayObserver = (array as any).$fastController as ArrayObserver;
-    if (arrayObserver === void 0) {
-        enableArrayObservation();
-        arrayObserver = Observable.getNotifier<ArrayObserver>(array);
-    }
-
-    let lengthSubscriber = arrayObserver.lengthSubscriber;
-    if (lengthSubscriber === void 0) {
-        arrayObserver.lengthSubscriber = lengthSubscriber = {
-            length: array.length,
-            handleChange() {
-                if (this.length !== array.length) {
-                    this.length = array.length;
-                    Observable.notify(lengthSubscriber, "length");
-                }
-            },
-        };
-
-        arrayObserver.subscribe(lengthSubscriber);
-    }
-
-    Observable.track(lengthSubscriber, "length");
-    return array.length;
-}
diff --git a/packages/web-components/fast-element/src/observation/arrays.spec.ts b/packages/web-components/fast-element/src/observation/arrays.spec.ts
new file mode 100644
index 00000000000..0c1cd50ebff
--- /dev/null
+++ b/packages/web-components/fast-element/src/observation/arrays.spec.ts
@@ -0,0 +1,430 @@
+import { expect } from "chai";
+import { Observable } from "./observable";
+import { ArrayObserver, length, Splice } from "./arrays";
+import { SubscriberSet } from "./notifier";
+import { Updates } from "./update-queue";
+
+describe("The ArrayObserver", () => {
+    it("can be retrieved through Observable.getNotifier()", () => {
+        ArrayObserver.enable();
+        const array = [];
+        const notifier = Observable.getNotifier(array);
+        expect(notifier).to.be.instanceOf(SubscriberSet);
+    });
+
+    it("is the same instance for multiple calls to Observable.getNotifier() on the same array", () => {
+        ArrayObserver.enable();
+        const array = [];
+        const notifier = Observable.getNotifier(array);
+        const notifier2 = Observable.getNotifier(array);
+        expect(notifier).to.equal(notifier2);
+    });
+
+    it("is different for different arrays", () => {
+        ArrayObserver.enable();
+        const notifier = Observable.getNotifier([]);
+        const notifier2 = Observable.getNotifier([]);
+        expect(notifier).to.not.equal(notifier2);
+    });
+
+    it("doesn't affect for/in loops on arrays when enabled", () => {
+        ArrayObserver.enable();
+
+        const array = [1, 2, 3];
+        const keys: string[] = [];
+
+        for (const key in array) {
+            keys.push(key);
+        }
+
+        expect(keys).eql(["0", "1", "2"]);
+    });
+
+    it("doesn't affect for/in loops on arrays when the array is observed", () => {
+        ArrayObserver.enable();
+
+        const array = [1, 2, 3];
+        const keys: string[] = [];
+        const notifier = Observable.getNotifier(array);
+
+        for (const key in array) {
+            keys.push(key);
+        }
+
+        expect(notifier).to.be.instanceOf(SubscriberSet);
+        expect(keys).eql(["0", "1", "2"])
+    });
+
+    it("observes pops", async () => {
+        ArrayObserver.enable();
+        const array = ["foo", "bar", "hello", "world"];
+
+        array.pop();
+        expect(array).members(["foo", "bar", "hello"]);
+
+        Array.prototype.pop.call(array);
+        expect(array).members(["foo", "bar"]);
+
+        const observer = Observable.getNotifier<ArrayObserver>(array);
+        let changeArgs: Splice[] | null = null;
+
+        observer.subscribe({
+            handleChange(array, args) {
+                changeArgs = args;
+            }
+        });
+
+        array.pop();
+        expect(array).members(["foo"]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(0);
+        expect(changeArgs![0].removed).members(["bar"]);
+        expect(changeArgs![0].index).equal(1);
+
+        Array.prototype.pop.call(array);
+        expect(array).members([]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(0);
+        expect(changeArgs![0].removed).members(["foo"]);
+        expect(changeArgs![0].index).equal(0);
+    });
+
+    it("observes pushes", async () => {
+        ArrayObserver.enable();
+        const array: string[] = [];
+
+        array.push("foo");
+        expect(array).members(["foo"]);
+
+        Array.prototype.push.call(array, "bar");
+        expect(array).members(["foo", "bar"]);
+
+        const observer = Observable.getNotifier<ArrayObserver>(array);
+        let changeArgs: Splice[] | null = null;
+
+        observer.subscribe({
+            handleChange(array, args) {
+                changeArgs = args;
+            }
+        });
+
+        array.push("hello");
+        expect(array).members(["foo", "bar", "hello"]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(1);
+        expect(changeArgs![0].removed).members([]);
+        expect(changeArgs![0].index).equal(2);
+
+        Array.prototype.push.call(array, "world");
+        expect(array).members(["foo", "bar", "hello", "world"]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(1);
+        expect(changeArgs![0].removed).members([]);
+        expect(changeArgs![0].index).equal(3);
+    });
+
+    it("observes reverses", async () => {
+        ArrayObserver.enable();
+        const array = [1, 2, 3, 4];
+        array.reverse();
+
+        expect(array).members([4, 3, 2, 1]);
+
+        Array.prototype.reverse.call(array);
+        expect(array).members([1, 2, 3, 4]);
+
+        const observer = Observable.getNotifier<ArrayObserver>(array);
+        let changeArgs: Splice[] | null = null;
+
+        observer.subscribe({
+            handleChange(array, args) {
+                changeArgs = args;
+            }
+        });
+
+        array.reverse();
+        expect(array).members([4, 3, 2, 1]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(0);
+        expect(changeArgs![0].removed).members([]);
+        expect(changeArgs![0].index).equal(0);
+        expect(changeArgs![0].reset).equal(true);
+
+        Array.prototype.reverse.call(array);
+        expect(array).members([1, 2, 3, 4]);
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(0);
+        expect(changeArgs![0].removed).members([]);
+        expect(changeArgs![0].index).equal(0);
+        expect(changeArgs![0].reset).equal(true);
+    });
+
+    it("observes shifts", async () => {
+        ArrayObserver.enable();
+        const array = ["foo", "bar", "hello", "world"];
+
+        array.shift();
+        expect(array).members(["bar", "hello", "world"]);
+
+        Array.prototype.shift.call(array);
+        expect(array).members(["hello", "world"]);
+
+        const observer = Observable.getNotifier<ArrayObserver>(array);
+        let changeArgs: Splice[] | null = null;
+
+        observer.subscribe({
+            handleChange(array, args) {
+                changeArgs = args;
+            }
+        });
+
+        array.shift();
+        expect(array).members(["world"]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(0);
+        expect(changeArgs![0].removed).members(["hello"]);
+        expect(changeArgs![0].index).equal(0);
+
+        Array.prototype.shift.call(array);
+        expect(array).members([]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(0);
+        expect(changeArgs![0].removed).members(["world"]);
+        expect(changeArgs![0].index).equal(0);
+    });
+
+    it("observes sorts", async () => {
+        ArrayObserver.enable();
+        let array = [1, 2, 3, 4];
+
+        array.sort((a, b) => b - a);
+        expect(array).members([4, 3, 2, 1]);
+
+        Array.prototype.sort.call(array, (a, b) => a - b);
+        expect(array).members([1, 2, 3, 4]);
+
+        const observer = Observable.getNotifier<ArrayObserver>(array);
+        let changeArgs: Splice[] | null = null;
+
+        observer.subscribe({
+            handleChange(array, args) {
+                changeArgs = args;
+            }
+        });
+
+        array.sort((a, b) => b - a);
+        expect(array).members([4, 3, 2, 1]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(0);
+        expect(changeArgs![0].removed).members([]);
+        expect(changeArgs![0].index).equal(0);
+        expect(changeArgs![0].reset).equal(true);
+
+        Array.prototype.sort.call(array, (a, b) => a - b);
+        expect(array).members([1, 2, 3, 4]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(0);
+        expect(changeArgs![0].removed).members([]);
+        expect(changeArgs![0].index).equal(0);
+        expect(changeArgs![0].reset).equal(true);
+    });
+
+    it("observes splices", async () => {
+        ArrayObserver.enable();
+        let array: any[] = [1, 2, 3, 4];
+
+        array.splice(1, 1, 'hello');
+        expect(array).members([1, "hello", 3, 4])
+
+        Array.prototype.splice.call(array, 2, 1, "world");
+        expect(array).members([1, "hello", "world", 4]);
+
+        const observer = Observable.getNotifier<ArrayObserver>(array);
+        let changeArgs: Splice[] | null = null;
+
+        observer.subscribe({
+            handleChange(array, args) {
+                changeArgs = args;
+            }
+        });
+
+        array.splice(1, 1, "foo");
+        expect(array).members([1, "foo", "world", 4]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(1);
+        expect(changeArgs![0].removed).members(["hello"]);
+        expect(changeArgs![0].index).equal(1);
+
+        Array.prototype.splice.call(array, 2, 1, 'bar');
+        expect(array).members([1, "foo", "bar", 4]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(1);
+        expect(changeArgs![0].removed).members(["world"]);
+        expect(changeArgs![0].index).equal(2);
+    });
+
+    it("observes unshifts", async () => {
+        ArrayObserver.enable();
+        let array: string[] = [];
+
+        array.unshift("foo");
+        expect(array).members(["foo"])
+
+        Array.prototype.unshift.call(array, "bar");
+        expect(array).members(["bar", "foo"]);
+
+        const observer = Observable.getNotifier<ArrayObserver>(array);
+        let changeArgs: Splice[] | null = null;
+
+        observer.subscribe({
+            handleChange(array, args) {
+                changeArgs = args;
+            }
+        });
+
+        array.unshift("hello");
+        expect(array).members(["hello", "bar", "foo"]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(1);
+        expect(changeArgs![0].removed).members([]);
+        expect(changeArgs![0].index).equal(0);
+
+        Array.prototype.unshift.call(array, 'world');
+        expect(array).members(["world", "hello", "bar", "foo"]);
+
+        await Updates.next();
+
+        expect(changeArgs).length(1);
+        expect(changeArgs![0].addedCount).equal(1);
+        expect(changeArgs![0].removed).members([]);
+        expect(changeArgs![0].index).equal(0);
+    });
+});
+
+describe("The array length observer", () => {
+    class Model {
+        items: any[];
+    }
+
+    it("returns zero length if the array is undefined", async () => {
+        const instance = new Model();
+        const observer = Observable.binding<Model>(x => length(x.items));
+
+        const value = observer.observe(instance)
+
+        expect(value).to.equal(0);
+
+        observer.disconnect();
+    });
+
+    it("returns zero length if the array is null", async () => {
+        const instance = new Model();
+        instance.items = null as any;
+        const observer = Observable.binding<Model>(x => length(x.items));
+
+        const value = observer.observe(instance)
+
+        expect(value).to.equal(0);
+
+        observer.disconnect();
+    });
+
+    it("returns length of an array", async () => {
+        const instance = new Model();
+        instance.items = [1,2,3,4,5];
+        const observer = Observable.binding<Model>(x => length(x.items));
+
+        const value = observer.observe(instance)
+
+        expect(value).to.equal(5);
+
+        observer.disconnect();
+    });
+
+    it("notifies when the array length changes", async () => {
+        const instance = new Model();
+        instance.items = [1,2,3,4,5];
+
+        let changed = false;
+        const observer = Observable.binding<Model>(x => length(x.items), {
+            handleChange() {
+                changed = true;
+            }
+        });
+
+        const value = observer.observe(instance)
+
+        expect(value).to.equal(5);
+
+        instance.items.push(6);
+
+        await Updates.next();
+
+        expect(changed).to.be.true;
+        expect(observer.observe(instance)).to.equal(6);
+
+        observer.disconnect();
+    });
+
+    it("does not notify on changes that don't change the length", async () => {
+        const instance = new Model();
+        instance.items = [1,2,3,4,5];
+
+        let changed = false;
+        const observer = Observable.binding<Model>(x => length(x.items), {
+            handleChange() {
+                changed = true;
+            }
+        });
+
+        const value = observer.observe(instance);
+
+        expect(value).to.equal(5);
+
+        instance.items.splice(2, 1, 6);
+
+        await Updates.next();
+
+        expect(changed).to.be.false;
+        expect(observer.observe(instance)).to.equal(5);
+
+        observer.disconnect();
+    });
+});
diff --git a/packages/web-components/fast-element/src/observation/arrays.ts b/packages/web-components/fast-element/src/observation/arrays.ts
new file mode 100644
index 00000000000..ea240ab242e
--- /dev/null
+++ b/packages/web-components/fast-element/src/observation/arrays.ts
@@ -0,0 +1,544 @@
+import { emptyArray } from "../platform.js";
+import { Notifier, Subscriber, SubscriberSet } from "./notifier.js";
+import { Observable } from "./observable.js";
+import { Updates } from "./update-queue.js";
+
+/**
+ * A splice map is a representation of how a previous array of items
+ * was transformed into a new array of items. Conceptually it is a list of
+ * tuples of
+ *
+ *   (index, removed, addedCount)
+ *
+ * which are kept in ascending index order of. The tuple represents that at
+ * the |index|, |removed| sequence of items were removed, and counting forward
+ * from |index|, |addedCount| items were added.
+ * @public
+ */
+export class Splice {
+    /**
+     * Indicates that this splice represents a complete array reset.
+     */
+    public reset?: boolean;
+
+    /**
+     * Creates a splice.
+     * @param index - The index that the splice occurs at.
+     * @param removed - The items that were removed.
+     * @param addedCount - The  number of items that were added.
+     */
+    public constructor(
+        public index: number,
+        public removed: any[],
+        public addedCount: number
+    ) {}
+
+    /**
+     * Adjusts the splice index based on the provided array.
+     * @param array - The array to adjust to.
+     * @returns The same splice, mutated based on the reference array.
+     */
+    public adjustTo(array: any[]): this {
+        let index = this.index;
+        const arrayLength = array.length;
+
+        if (index > arrayLength) {
+            index = arrayLength - this.addedCount;
+        } else if (index < 0) {
+            index = arrayLength + this.removed.length + index - this.addedCount;
+        }
+
+        this.index = index < 0 ? 0 : index;
+        return this;
+    }
+}
+
+/**
+ * Indicates what level of feature support the splice
+ * strategy provides.
+ * @public
+ */
+export const SpliceStrategySupport = Object.freeze({
+    /**
+     * Only supports resets.
+     */
+    reset: 1,
+    /**
+     * Supports tracking splices and resets.
+     */
+    splice: 2,
+    /**
+     * Supports tracking splices and resets, while applying some form
+     * of optimization, such as merging, to the splices.
+     */
+    optimized: 3,
+} as const);
+
+/**
+ * The available values for SpliceStrategySupport.
+ * @public
+ */
+export type SpliceStrategySupport = typeof SpliceStrategySupport[keyof typeof SpliceStrategySupport];
+
+/**
+ * An approach to tracking changes in an array.
+ * @public
+ */
+export interface SpliceStrategy {
+    /**
+     * The level of feature support the splice strategy provides.
+     */
+    readonly support: SpliceStrategySupport;
+
+    /**
+     * Normalizes the splices before delivery to array change subscribers.
+     * @param previous - The previous version of the array if a reset has taken place.
+     * @param current - The current version of the array.
+     * @param changes - The set of changes tracked against the array.
+     */
+    normalize(
+        previous: unknown[] | undefined,
+        current: unknown[],
+        changes: Splice[] | undefined
+    ): readonly Splice[];
+
+    /**
+     * Performs and tracks a pop operation on an array.
+     * @param array - The array to track the change for.
+     * @param observer - The observer to register the change with.
+     * @param pop - The operation to perform.
+     * @param args - The arguments for the operation.
+     */
+    pop(
+        array: any[],
+        observer: ArrayObserver,
+        pop: typeof Array.prototype.pop,
+        args: any[]
+    ): any;
+
+    /**
+     * Performs and tracks a push operation on an array.
+     * @param array - The array to track the change for.
+     * @param observer - The observer to register the change with.
+     * @param push - The operation to perform.
+     * @param args - The arguments for the operation.
+     */
+    push(
+        array: any[],
+        observer: ArrayObserver,
+        push: typeof Array.prototype.push,
+        args: any[]
+    ): any;
+
+    /**
+     * Performs and tracks a reverse operation on an array.
+     * @param array - The array to track the change for.
+     * @param observer - The observer to register the change with.
+     * @param reverse - The operation to perform.
+     * @param args - The arguments for the operation.
+     */
+    reverse(
+        array: any[],
+        observer: ArrayObserver,
+        reverse: typeof Array.prototype.reverse,
+        args: any[]
+    ): any;
+
+    /**
+     * Performs and tracks a shift operation on an array.
+     * @param array - The array to track the change for.
+     * @param observer - The observer to register the change with.
+     * @param shift - The operation to perform.
+     * @param args - The arguments for the operation.
+     */
+    shift(
+        array: any[],
+        observer: ArrayObserver,
+        shift: typeof Array.prototype.shift,
+        args: any[]
+    ): any;
+
+    /**
+     * Performs and tracks a sort operation on an array.
+     * @param array - The array to track the change for.
+     * @param observer - The observer to register the change with.
+     * @param sort - The operation to perform.
+     * @param args - The arguments for the operation.
+     */
+    sort(
+        array: any[],
+        observer: ArrayObserver,
+        sort: typeof Array.prototype.sort,
+        args: any[]
+    ): any[];
+
+    /**
+     * Performs and tracks a splice operation on an array.
+     * @param array - The array to track the change for.
+     * @param observer - The observer to register the change with.
+     * @param splice - The operation to perform.
+     * @param args - The arguments for the operation.
+     */
+    splice(
+        array: any[],
+        observer: ArrayObserver,
+        splice: typeof Array.prototype.splice,
+        args: any[]
+    ): any;
+
+    /**
+     * Performs and tracks an unshift operation on an array.
+     * @param array - The array to track the change for.
+     * @param observer - The observer to register the change with.
+     * @param unshift - The operation to perform.
+     * @param args - The arguments for the operation.
+     */
+    unshift(
+        array: any[],
+        observer: ArrayObserver,
+        unshift: typeof Array.prototype.unshift,
+        args: any[]
+    ): any[];
+}
+
+const reset = new Splice(0, emptyArray as any, 0);
+reset.reset = true;
+const resetSplices = [reset];
+
+let defaultSpliceStrategy: SpliceStrategy = Object.freeze({
+    support: SpliceStrategySupport.splice,
+
+    normalize(
+        previous: unknown[] | undefined,
+        current: unknown[],
+        changes: Splice[] | undefined
+    ): readonly Splice[] {
+        return previous === void 0 ? changes ?? emptyArray : resetSplices;
+    },
+
+    pop(
+        array: any[],
+        observer: ArrayObserver,
+        pop: typeof Array.prototype.pop,
+        args: any[]
+    ) {
+        const notEmpty = array.length > 0;
+        const result = pop.apply(array, args);
+
+        if (notEmpty) {
+            observer.addSplice(new Splice(array.length, [result], 0));
+        }
+
+        return result;
+    },
+
+    push(
+        array: any[],
+        observer: ArrayObserver,
+        push: typeof Array.prototype.push,
+        args: any[]
+    ): any {
+        const result = push.apply(array, args);
+        observer.addSplice(
+            new Splice(array.length - args.length, [], args.length).adjustTo(array)
+        );
+        return result;
+    },
+
+    reverse(
+        array: any[],
+        observer: ArrayObserver,
+        reverse: typeof Array.prototype.reverse,
+        args: any[]
+    ): any {
+        const result = reverse.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+
+    shift(
+        array: any[],
+        observer: ArrayObserver,
+        shift: typeof Array.prototype.shift,
+        args: any[]
+    ): any {
+        const notEmpty = array.length > 0;
+        const result = shift.apply(array, args);
+
+        if (notEmpty) {
+            observer.addSplice(new Splice(0, [result], 0));
+        }
+
+        return result;
+    },
+
+    sort(
+        array: any[],
+        observer: ArrayObserver,
+        sort: typeof Array.prototype.sort,
+        args: any[]
+    ): any[] {
+        const result = sort.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+
+    splice(
+        array: any[],
+        observer: ArrayObserver,
+        splice: typeof Array.prototype.splice,
+        args: any[]
+    ): any {
+        const result = splice.apply(array, args);
+        observer.addSplice(
+            new Splice(+args[0], result, args.length > 2 ? args.length - 2 : 0).adjustTo(
+                array
+            )
+        );
+        return result;
+    },
+
+    unshift(
+        array: any[],
+        observer: ArrayObserver,
+        unshift: typeof Array.prototype.unshift,
+        args: any[]
+    ): any[] {
+        const result = unshift.apply(array, args);
+        observer.addSplice(new Splice(0, [], args.length).adjustTo(array));
+        return result;
+    },
+});
+
+/**
+ * Functionality related to tracking changes in arrays.
+ * @public
+ */
+export const SpliceStrategy = Object.freeze({
+    /**
+     * A set of changes that represent a full array reset.
+     */
+    reset: resetSplices,
+
+    /**
+     * Sets the default strategy to use for array observers.
+     * @param strategy - The splice strategy to use.
+     */
+    setDefaultStrategy(strategy: SpliceStrategy) {
+        defaultSpliceStrategy = strategy;
+    },
+} as const);
+
+function setNonEnumerable(target: any, property: string, value: any): void {
+    Reflect.defineProperty(target, property, {
+        value,
+        enumerable: false,
+    });
+}
+
+/**
+ * Observes array lengths.
+ * @public
+ */
+export interface LengthObserver extends Subscriber {
+    /**
+     * The length of the observed array.
+     */
+    length: number;
+}
+
+/**
+ * An observer for arrays.
+ * @public
+ */
+export interface ArrayObserver extends SubscriberSet {
+    /**
+     * The strategy to use for tracking changes.
+     */
+    strategy: SpliceStrategy | null;
+
+    /**
+     * The length observer for the array.
+     */
+    readonly lengthObserver: LengthObserver;
+
+    /**
+     * Adds a splice to the list of changes.
+     * @param splice - The splice to add.
+     */
+    addSplice(splice: Splice): void;
+
+    /**
+     * Indicates that a reset change has occurred.
+     * @param oldCollection - The collection as it was before the reset.
+     */
+    reset(oldCollection: any[] | undefined): void;
+
+    /**
+     * Flushes the changes to subscribers.
+     */
+    flush(): void;
+}
+
+class DefaultArrayObserver extends SubscriberSet implements ArrayObserver {
+    private oldCollection: any[] | undefined = void 0;
+    private splices: Splice[] | undefined = void 0;
+    private needsQueue: boolean = true;
+    private _strategy: SpliceStrategy | null = null;
+    private _lengthObserver: LengthObserver | undefined = void 0;
+
+    public get strategy(): SpliceStrategy | null {
+        return this._strategy;
+    }
+
+    public set strategy(value: SpliceStrategy | null) {
+        this._strategy = value;
+    }
+
+    public get lengthObserver(): LengthObserver {
+        let observer = this._lengthObserver;
+
+        if (observer === void 0) {
+            const array = this.subject;
+            this._lengthObserver = observer = {
+                length: array.length,
+                handleChange() {
+                    if (this.length !== array.length) {
+                        this.length = array.length;
+                        Observable.notify(observer, "length");
+                    }
+                },
+            };
+
+            this.subscribe(observer);
+        }
+
+        return observer;
+    }
+
+    call: () => void = this.flush;
+
+    constructor(subject: any[]) {
+        super(subject);
+        setNonEnumerable(subject, "$fastController", this);
+    }
+
+    public addSplice(splice: Splice) {
+        if (this.splices === void 0) {
+            this.splices = [splice];
+        } else {
+            this.splices.push(splice);
+        }
+
+        this.enqueue();
+    }
+
+    public reset(oldCollection: any[] | undefined): void {
+        this.oldCollection = oldCollection;
+        this.enqueue();
+    }
+
+    public flush(): void {
+        const splices = this.splices;
+        const oldCollection = this.oldCollection;
+
+        if (splices === void 0 && oldCollection === void 0) {
+            return;
+        }
+
+        this.needsQueue = true;
+        this.splices = void 0;
+        this.oldCollection = void 0;
+
+        this.notify(
+            (this._strategy ?? defaultSpliceStrategy).normalize(
+                oldCollection,
+                this.subject,
+                splices
+            )
+        );
+    }
+
+    private enqueue(): void {
+        if (this.needsQueue) {
+            this.needsQueue = false;
+            Updates.enqueue(this);
+        }
+    }
+}
+
+let enabled = false;
+
+/**
+ * An observer for arrays.
+ * @public
+ */
+export const ArrayObserver = Object.freeze({
+    /**
+     * Enables the array observation mechanism.
+     * @remarks
+     * Array observation is enabled automatically when using the
+     * {@link RepeatDirective}, so calling this API manually is
+     * not typically necessary.
+     */
+    enable(): void {
+        if (enabled) {
+            return;
+        }
+
+        enabled = true;
+
+        Observable.setArrayObserverFactory(
+            (collection: any[]): Notifier => new DefaultArrayObserver(collection)
+        );
+
+        const proto = Array.prototype;
+
+        if (!(proto as any).$fastPatch) {
+            setNonEnumerable(proto, "$fastPatch", 1);
+
+            [
+                proto.pop,
+                proto.push,
+                proto.reverse,
+                proto.shift,
+                proto.sort,
+                proto.splice,
+                proto.unshift,
+            ].forEach(method => {
+                proto[method.name] = function (...args) {
+                    const o = this.$fastController as ArrayObserver;
+                    return o === void 0
+                        ? method.apply(this, args)
+                        : (o.strategy ?? defaultSpliceStrategy)[method.name](
+                              this,
+                              o,
+                              method,
+                              args
+                          );
+                };
+            });
+        }
+    },
+} as const);
+
+/**
+ * Enables observing the length of an array.
+ * @param array - The array to observe the length of.
+ * @returns The length of the array.
+ * @public
+ */
+export function length<T>(array: readonly T[]): number {
+    if (!array) {
+        return 0;
+    }
+
+    let arrayObserver = (array as any).$fastController as ArrayObserver;
+    if (arrayObserver === void 0) {
+        ArrayObserver.enable();
+        arrayObserver = Observable.getNotifier<ArrayObserver>(array);
+    }
+
+    Observable.track(arrayObserver.lengthObserver, "length");
+    return array.length;
+}
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index 4c147b681d7..e40954388d3 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -164,7 +164,6 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
                     callback.call(source, oldValue, newValue);
                 }
 
-                /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
                 getNotifier(source).notify(this.name);
             }
         }
@@ -219,7 +218,6 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             }
         }
 
-        /** @internal */
         public watch(propertySource: unknown, propertyName: string): void {
             const prev = this.last;
             const notifier = getNotifier(propertySource);
@@ -254,7 +252,6 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             this.last = current!;
         }
 
-        /** @internal */
         handleChange(): void {
             if (this.needsQueue) {
                 this.needsQueue = false;
@@ -262,7 +259,6 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             }
         }
 
-        /** @internal */
         call(): void {
             if (this.last !== null) {
                 this.needsQueue = true;
@@ -365,7 +361,6 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             initialSubscriber?: Subscriber,
             isVolatileBinding: boolean = this.isVolatileBinding(binding)
         ): BindingObserver<TSource, TReturn> {
-            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
             return new BindingObserverImplementation(
                 binding,
                 initialSubscriber,
diff --git a/packages/web-components/fast-element/src/observation/array-change-records.ts b/packages/web-components/fast-element/src/observation/splice-strategies.ts
similarity index 67%
rename from packages/web-components/fast-element/src/observation/array-change-records.ts
rename to packages/web-components/fast-element/src/observation/splice-strategies.ts
index 33bc6ad55ce..1385f7f31ea 100644
--- a/packages/web-components/fast-element/src/observation/array-change-records.ts
+++ b/packages/web-components/fast-element/src/observation/splice-strategies.ts
@@ -1,4 +1,10 @@
 import { emptyArray } from "../platform.js";
+import {
+    ArrayObserver,
+    Splice,
+    SpliceStrategy,
+    SpliceStrategySupport,
+} from "./arrays.js";
 
 const enum Edit {
     leave = 0,
@@ -164,51 +170,6 @@ function intersect(start1: number, end1: number, start2: number, end2: number):
     return end1 - start1; // Contained
 }
 
-/**
- * A splice map is a representation of how a previous array of items
- * was transformed into a new array of items. Conceptually it is a list of
- * tuples of
- *
- *   (index, removed, addedCount)
- *
- * which are kept in ascending index order of. The tuple represents that at
- * the |index|, |removed| sequence of items were removed, and counting forward
- * from |index|, |addedCount| items were added.
- * @public
- */
-export class Splice {
-    constructor(
-        /**
-         * The index that the splice occurs at.
-         */
-        public index: number,
-
-        /**
-         * The items that were removed.
-         */
-        public removed: any[],
-
-        /**
-         * The  number of items that were added.
-         */
-        public addedCount: number
-    ) {}
-
-    static normalize(
-        previous: unknown[] | undefined,
-        current: unknown[],
-        changes: Splice[] | undefined
-    ): Splice[] | undefined {
-        return previous === void 0
-            ? changes!.length > 1
-                ? /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-                  project(current, changes!)
-                : changes
-            : /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-              calc(current, 0, current.length, previous, 0, previous.length);
-    }
-}
-
 /**
  * @remarks
  * Lacking individual splice mutation information, the minimal set of
@@ -431,3 +392,219 @@ function project(array: unknown[], changes: Splice[]): Splice[] {
 
     return splices;
 }
+
+/**
+ * A SpliceStrategy that attempts to merge all splices into the minimal set of
+ * splices needed to represent the change from the old array to the new array.
+ * @public
+ */
+export const mergeSpliceStrategy: SpliceStrategy = Object.freeze({
+    support: SpliceStrategySupport.optimized,
+
+    normalize(
+        previous: unknown[] | undefined,
+        current: unknown[],
+        changes: Splice[] | undefined
+    ): readonly Splice[] {
+        if (previous === void 0) {
+            if (changes === void 0) {
+                return emptyArray;
+            }
+
+            return changes.length > 1 ? project(current, changes) : changes;
+        }
+
+        return calc(current, 0, current.length, previous, 0, previous.length);
+    },
+
+    pop(
+        array: any[],
+        observer: ArrayObserver,
+        pop: typeof Array.prototype.pop,
+        args: any[]
+    ) {
+        const notEmpty = array.length > 0;
+        const result = pop.apply(array, args);
+
+        if (notEmpty) {
+            observer.addSplice(new Splice(array.length, [result], 0));
+        }
+
+        return result;
+    },
+
+    push(
+        array: any[],
+        observer: ArrayObserver,
+        push: typeof Array.prototype.push,
+        args: any[]
+    ): any {
+        const result = push.apply(array, args);
+        observer.addSplice(
+            new Splice(array.length - args.length, [], args.length).adjustTo(array)
+        );
+        return result;
+    },
+
+    reverse(
+        array: any[],
+        observer: ArrayObserver,
+        reverse: typeof Array.prototype.reverse,
+        args: any[]
+    ): any {
+        observer.flush();
+        const oldArray = array.slice();
+        const result = reverse.apply(array, args);
+        observer.reset(oldArray);
+        return result;
+    },
+
+    shift(
+        array: any[],
+        observer: ArrayObserver,
+        shift: typeof Array.prototype.shift,
+        args: any[]
+    ): any {
+        const notEmpty = array.length > 0;
+        const result = shift.apply(array, args);
+
+        if (notEmpty) {
+            observer.addSplice(new Splice(0, [result], 0));
+        }
+
+        return result;
+    },
+
+    sort(
+        array: any[],
+        observer: ArrayObserver,
+        sort: typeof Array.prototype.sort,
+        args: any[]
+    ): any[] {
+        observer.flush();
+        const oldArray = array.slice();
+        const result = sort.apply(array, args);
+        observer.reset(oldArray);
+        return result;
+    },
+
+    splice(
+        array: any[],
+        observer: ArrayObserver,
+        splice: typeof Array.prototype.splice,
+        args: any[]
+    ): any {
+        const result = splice.apply(array, args);
+        observer.addSplice(
+            new Splice(+args[0], result, args.length > 2 ? args.length - 2 : 0).adjustTo(
+                array
+            )
+        );
+        return result;
+    },
+
+    unshift(
+        array: any[],
+        observer: ArrayObserver,
+        unshift: typeof Array.prototype.unshift,
+        args: any[]
+    ): any[] {
+        const result = unshift.apply(array, args);
+        observer.addSplice(new Splice(0, [], args.length).adjustTo(array));
+        return result;
+    },
+});
+
+/**
+ * A splice strategy that doesn't create splices, but instead
+ * tracks every change as a full array reset.
+ * @public
+ */
+export const resetSpliceStrategy: SpliceStrategy = Object.freeze({
+    support: SpliceStrategySupport.reset,
+
+    normalize(
+        previous: unknown[] | undefined,
+        current: unknown[],
+        changes: Splice[] | undefined
+    ): readonly Splice[] {
+        return SpliceStrategy.reset;
+    },
+
+    pop(
+        array: any[],
+        observer: ArrayObserver,
+        pop: typeof Array.prototype.pop,
+        args: any[]
+    ) {
+        const result = pop.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+
+    push(
+        array: any[],
+        observer: ArrayObserver,
+        push: typeof Array.prototype.push,
+        args: any[]
+    ): any {
+        const result = push.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+
+    reverse(
+        array: any[],
+        observer: ArrayObserver,
+        reverse: typeof Array.prototype.reverse,
+        args: any[]
+    ): any {
+        const result = reverse.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+
+    shift(
+        array: any[],
+        observer: ArrayObserver,
+        shift: typeof Array.prototype.shift,
+        args: any[]
+    ): any {
+        const result = shift.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+
+    sort(
+        array: any[],
+        observer: ArrayObserver,
+        sort: typeof Array.prototype.sort,
+        args: any[]
+    ): any[] {
+        const result = sort.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+
+    splice(
+        array: any[],
+        observer: ArrayObserver,
+        splice: typeof Array.prototype.splice,
+        args: any[]
+    ): any {
+        const result = splice.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+
+    unshift(
+        array: any[],
+        observer: ArrayObserver,
+        unshift: typeof Array.prototype.unshift,
+        args: any[]
+    ): any[] {
+        const result = unshift.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+});
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 824d1cdca43..94c2406ea56 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -12,7 +12,6 @@ import {
     AddViewBehaviorFactory,
     Aspect,
     Aspected,
-    AspectType,
     HTMLDirective,
     ViewBehavior,
     ViewBehaviorFactory,
@@ -40,7 +39,7 @@ const createInnerHTMLBinding = globalThis.TrustedHTML
  * @public
  */
 export type BindingMode = Record<
-    AspectType,
+    Aspect,
     (directive: HTMLBindingDirective) => Pick<ViewBehaviorFactory, "createBehavior">
 >;
 
@@ -792,7 +791,7 @@ export class HTMLBindingDirective
     /**
      * The type of aspect to target.
      */
-    aspectType: AspectType = Aspect.content;
+    aspectType: Aspect = Aspect.content;
 
     /**
      * Creates an instance of HTMLBindingDirective.
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index 2e1711f897b..0fd034a3b3a 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -241,20 +241,13 @@ export const Aspect = Object.freeze({
                 break;
         }
     },
-});
+} as const);
 
 /**
- * Valid aspect type values.
+ * The type of HTML aspect to target.
  * @public
  */
-export type AspectType = Exclude<
-    {
-        [K in keyof typeof Aspect]: typeof Aspect[K] extends number
-            ? typeof Aspect[K]
-            : never;
-    }[keyof typeof Aspect],
-    typeof Aspect.none
->;
+export type Aspect = typeof Aspect[Exclude<keyof typeof Aspect, "assign" | "none">];
 
 /**
  * Represents something that applies to a specific aspect of the DOM.
@@ -274,7 +267,7 @@ export interface Aspected {
     /**
      * The type of aspect to target.
      */
-    aspectType: AspectType;
+    aspectType: Aspect;
 
     /**
      * A binding if one is associated with the aspect.
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index 63b654daf61..77b10c0d225 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -1,6 +1,4 @@
 import { isFunction } from "../interfaces.js";
-import type { Splice } from "../observation/array-change-records.js";
-import { enableArrayObservation } from "../observation/array-observer.js";
 import type { Behavior } from "../observation/behavior.js";
 import type { Notifier, Subscriber } from "../observation/notifier.js";
 import {
@@ -13,6 +11,7 @@ import {
     RootContext,
 } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
+import { ArrayObserver, Splice } from "../observation/arrays.js";
 import { Markup } from "./markup.js";
 import {
     AddViewBehaviorFactory,
@@ -162,6 +161,8 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
                 this.context!
             );
             this.refreshAllViews(true);
+        } else if (args[0].reset) {
+            this.refreshAllViews();
         } else {
             this.updateViews(args);
         }
@@ -334,7 +335,7 @@ export class RepeatDirective<TSource = any>
         public readonly templateBinding: Binding<TSource, SyntheticViewTemplate>,
         public readonly options: RepeatOptions
     ) {
-        enableArrayObservation();
+        ArrayObserver.enable();
         this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);
         this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
     }

From a5db4c3d0c8ded1772c3518df7e139abd789e735 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Mon, 23 May 2022 13:33:24 -0700
Subject: [PATCH 118/135] Implement ElementRenderer and DOM shim directly into
 SSR package, remove lit-labs/ssr dependency (#5997)

* integrate DOM shim and update acknowledgements

* remove lit-labs/ssr dependency

* add license info to acknowledgements

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 .../fast-ssr/ACKNOWLEDGEMENTS.md              |  41 +++
 .../fast-ssr/docs/api-report.md               |  32 ++-
 packages/web-components/fast-ssr/package.json |  11 +-
 .../fast-ssr/src/dom-shim.spec.ts             |  23 ++
 .../web-components/fast-ssr/src/dom-shim.ts   | 262 ++++++++++--------
 .../elemenent-renderer.spec.ts                |   4 +-
 .../src/element-renderer/element-renderer.ts  | 212 +++++++-------
 .../element-renderer/fast-element-renderer.ts | 139 ++++++++++
 .../fast-ssr/src/escape-html.ts               |  21 ++
 .../web-components/fast-ssr/src/exports.ts    |  11 +-
 .../fast-ssr/src/install-dom-shim.ts          |   3 +
 .../fast-ssr/src/render-info.ts               |  28 ++
 .../src/styles/style-renderer.spec.ts         |   2 +-
 .../template-parser/template-parser.spec.ts   |   2 +-
 .../src/template-parser/template-parser.ts    |   4 +-
 .../src/template-renderer/directives.ts       |   2 +-
 .../template-renderer.spec.ts                 |   2 +-
 .../template-renderer/template-renderer.ts    |   4 +-
 yarn.lock                                     |  62 +----
 19 files changed, 562 insertions(+), 303 deletions(-)
 create mode 100644 packages/web-components/fast-ssr/ACKNOWLEDGEMENTS.md
 create mode 100644 packages/web-components/fast-ssr/src/dom-shim.spec.ts
 create mode 100644 packages/web-components/fast-ssr/src/element-renderer/fast-element-renderer.ts
 create mode 100644 packages/web-components/fast-ssr/src/escape-html.ts
 create mode 100644 packages/web-components/fast-ssr/src/install-dom-shim.ts
 create mode 100644 packages/web-components/fast-ssr/src/render-info.ts

diff --git a/packages/web-components/fast-ssr/ACKNOWLEDGEMENTS.md b/packages/web-components/fast-ssr/ACKNOWLEDGEMENTS.md
new file mode 100644
index 00000000000..fac21d02af7
--- /dev/null
+++ b/packages/web-components/fast-ssr/ACKNOWLEDGEMENTS.md
@@ -0,0 +1,41 @@
+# Acknowledgements
+A big thank you to [Lit](https://github.com/lit) for their work on server-side rendering for Web Components. This package builds off the ideas and tentative community protocols proposed and implemented in [@lit-labs/ssr](https://github.com/lit/lit/tree/main/packages/labs/ssr), with the goal of aligning `@microsoft/fast-ssr` to these community protocols as they mature.
+
+Several modules have been copied with some modification from [@lit-labs/ssr](https://github.com/lit/lit/tree/main/packages/labs/ssr). Our hope is that as these protocols mature, these files can be removed and common resources leveraged instead. The following list of files have been copied / modified:
+- [./src/element-renderer/element-renderer.ts]()
+- [./src/template-parser/template-parser.ts]()
+- [./src/escape-html.ts]()
+- [./src/dom-shim.ts]()
+- [./src/render-info.ts]()
+
+and written with the following [license](https://github.com/lit/lit/blob/main/packages/labs/ssr/LICENSE):
+
+---
+BSD 3-Clause License
+
+Copyright (c) 2019 Google LLC. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\ No newline at end of file
diff --git a/packages/web-components/fast-ssr/docs/api-report.md b/packages/web-components/fast-ssr/docs/api-report.md
index e3ca9580a8d..5161f610a78 100644
--- a/packages/web-components/fast-ssr/docs/api-report.md
+++ b/packages/web-components/fast-ssr/docs/api-report.md
@@ -7,16 +7,37 @@
 import { Binding } from '@microsoft/fast-element';
 import { ComposableStyles } from '@microsoft/fast-element';
 import { Constructable } from '@microsoft/fast-element';
-import { ElementRenderer } from '@lit-labs/ssr';
 import { ExecutionContext } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
-import { RenderInfo } from '@lit-labs/ssr';
 import { ViewBehaviorFactory } from '@microsoft/fast-element';
 import { ViewTemplate } from '@microsoft/fast-element';
 
 // @beta
 export type ComponentDOMEmissionMode = "shadow";
 
+// @beta (undocumented)
+export type ConstructableElementRenderer = (new (tagName: string) => ElementRenderer) & typeof ElementRenderer;
+
+// @beta (undocumented)
+export abstract class ElementRenderer {
+    constructor(tagName: string);
+    // (undocumented)
+    abstract attributeChangedCallback(name: string, prev: string | null, next: string | null): void;
+    // (undocumented)
+    abstract connectedCallback(): void;
+    // (undocumented)
+    abstract readonly element?: HTMLElement;
+    // Warning: (ae-forgotten-export) The symbol "AttributesMap" needs to be exported by the entry point exports.d.ts
+    static matchesClass(ctor: typeof HTMLElement, tagName: string, attributes: AttributesMap): boolean;
+    renderAttributes(): IterableIterator<string>;
+    // (undocumented)
+    abstract renderShadow(renderInfo: RenderInfo): IterableIterator<string>;
+    setAttribute(name: string, value: string): void;
+    setProperty(name: string, value: unknown): void;
+    // (undocumented)
+    readonly tagName: string;
+}
+
 // @beta
 export abstract class FASTElementRenderer extends ElementRenderer {
     constructor(tagName: string);
@@ -38,6 +59,13 @@ function fastSSR(): {
 };
 export default fastSSR;
 
+// @beta (undocumented)
+export type RenderInfo = {
+    elementRenderers: ConstructableElementRenderer[];
+    customElementInstanceStack: ElementRenderer[];
+    customElementHostStack: ElementRenderer[];
+};
+
 // @beta
 export interface StyleRenderer {
     render(styles: ComposableStyles): string;
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index d968dba6b5d..97e3f854c57 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -38,14 +38,17 @@
   "types": "./dist/fast-ssr.d.ts",
   "exports": {
     "." : {
-      "default": "./dist/esm/exports.js",
-      "types": "./dist/fast-ssr.d.ts"
+      "types": "./dist/fast-ssr.d.ts",
+      "default": "./dist/esm/exports.js"
     },
-    "./install-dom-shim": "./dist/esm/dom-shim.js"
+    "./install-dom-shim": "./dist/esm/install-dom-shim.js",
+    "./dom-shim": {
+      "types": "./dist/dts/dom-shim.d.ts",
+      "default": "./dist/esm/dom-shim.js"
+    }
   },
   "private": true,
   "dependencies": {
-    "@lit-labs/ssr": "^2.1.0",
     "@microsoft/fast-element": "^1.5.0",
     "parse5": "^6.0.1",
     "tslib": "^2.4.0"
diff --git a/packages/web-components/fast-ssr/src/dom-shim.spec.ts b/packages/web-components/fast-ssr/src/dom-shim.spec.ts
new file mode 100644
index 00000000000..66a30db0ae3
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/dom-shim.spec.ts
@@ -0,0 +1,23 @@
+import { expect, test } from "@playwright/test";
+import  { createWindow } from "./dom-shim.js";
+
+test.describe("createWindow", () => {
+    test("should create a window with a document property that is an instance of the window's Document constructor", () => {
+        const window = createWindow();
+
+        expect(window.document instanceof (window.Document as any)).toBe(true);
+
+        class MyDocument {}
+        const windowOverride = createWindow({ Document: MyDocument });
+        expect(windowOverride.document instanceof MyDocument).toBe(true);
+    });
+    test("should create a window with a customElements property that is an instance of the window's CustomElementRegistry constructor", () => {
+        const window = createWindow();
+
+        expect(window.customElements instanceof (window.CustomElementRegistry as any)).toBe(true);
+
+        class MyRegistry {}
+        const windowOverride = createWindow({ CustomElementRegistry: MyRegistry });
+        expect(windowOverride.customElements instanceof MyRegistry).toBe(true);
+    });
+})
diff --git a/packages/web-components/fast-ssr/src/dom-shim.ts b/packages/web-components/fast-ssr/src/dom-shim.ts
index 95bf68dddab..b6a7f3ac8e3 100644
--- a/packages/web-components/fast-ssr/src/dom-shim.ts
+++ b/packages/web-components/fast-ssr/src/dom-shim.ts
@@ -1,151 +1,179 @@
-import { installWindowOnGlobal } from "@lit-labs/ssr/lib/dom-shim.js";
-
-class DOMTokenList {
-    #tokens = new Set<string>();
-
-    public add(value: string) {
-        this.#tokens.add(value);
-    }
-
-    public remove(value: string) {
-        this.#tokens.delete(value);
-    }
-
-    public contains(value: string) {
-        return this.#tokens.has(value);
-    }
-
-    public toggle(value: string, force?: boolean) {
-        const add = force === undefined ? !this.contains(value) : force;
-
-        if (add) {
-            this.add(value);
-            return true;
-        } else {
-            this.remove(value);
-            return false;
+/**
+ * This file was heavily inspired by {@link https://github.com/lit/lit/tree/main/packages/labs/ssr} with some adjustments made.
+ * Please see {@link ../ACKNOWLEDGEMENTS.md}
+ */
+
+/**
+ * @beta
+ */
+export class Element {}
+
+/**
+ * @beta
+ */
+export abstract class HTMLElement extends Element {
+    private static attributes: WeakMap<HTMLElement, Map<string, string>> = new WeakMap();
+    private static getOrCreateAttributesForElement(element: HTMLElement) {
+        let attrs = HTMLElement.attributes.get(element);
+        if (!attrs) {
+            HTMLElement.attributes.set(element, (attrs = new Map()));
         }
+        return attrs;
     }
-
-    public toString() {
-        return Array.from(this.#tokens).join(" ");
-    }
-
-    *[Symbol.iterator]() {
-        yield* this.#tokens.values();
+    get attributes() {
+        return Array.from(HTMLElement.getOrCreateAttributesForElement(this)).map(
+            ([name, value]) => ({
+                name,
+                value,
+            })
+        );
     }
-}
-class Node {
-    appendChild() {}
-    removeChild() {}
-}
-
-class Element extends Node {}
-
-abstract class HTMLElement extends Element {
-    #attributes = new Map<string, string | DOMTokenList>();
-    #shadowRoot: null | ShadowRoot = null;
-
-    public readonly classList = new DOMTokenList();
-
-    public get attributes(): { name: string; value: string }[] {
-        return Array.from(this.#attributes).map(([name, value]) => {
-            if (typeof value === "string") {
-                return { name, value };
-            } else {
-                return { name, value: value.toString() };
-            }
-        });
+    private _shadowRoot: null | ShadowRoot = null;
+    get shadowRoot() {
+        return this._shadowRoot;
     }
-
-    public get shadowRoot() {
-        return this.#shadowRoot;
-    }
-
-    public abstract attributeChangedCallback?(
+    abstract attributeChangedCallback?(
         name: string,
         old: string | null,
         value: string | null
     ): void;
-
-    public setAttribute(name: string, value: string) {
-        let _value: string | DOMTokenList = value;
-        if (name === "class") {
-            _value = new DOMTokenList();
-            value.split(" ").forEach(className => {
-                (_value as DOMTokenList).add(className);
-            });
-        }
-        this.#attributes.set(name, _value);
+    setAttribute(name: string, value: string) {
+        HTMLElement.getOrCreateAttributesForElement(this).set(name, value);
     }
-
-    public removeAttribute(name: string) {
-        this.#attributes.delete(name);
+    removeAttribute(name: string) {
+        HTMLElement.getOrCreateAttributesForElement(this).delete(name);
     }
-
-    public hasAttribute(name: string) {
-        return this.#attributes.has(name);
+    hasAttribute(name: string) {
+        return HTMLElement.getOrCreateAttributesForElement(this).has(name);
     }
-
-    public attachShadow(init: ShadowRootInit) {
-        const shadowRoot = ({ host: this } as unknown) as ShadowRoot;
+    attachShadow(init: ShadowRootInit): ShadowRoot {
+        const shadowRoot = { host: this };
         if (init && init.mode === "open") {
-            this.#shadowRoot = shadowRoot;
+            this._shadowRoot = shadowRoot;
         }
         return shadowRoot;
     }
-
-    public getAttribute(name: string) {
-        const value = this.#attributes.get(name);
-        return value === undefined
-            ? null
-            : value instanceof DOMTokenList
-            ? value.toString()
-            : value;
+    getAttribute(name: string) {
+        const value = HTMLElement.getOrCreateAttributesForElement(this).get(name);
+        return value === undefined ? null : value;
     }
 }
 
-class Document {
-    head = new Node();
-    adoptedStyleSheets = [];
+/**
+ * @beta
+ */
+export interface CustomHTMLElement {
+    new (): HTMLElement;
+    observedAttributes?: string[];
+}
+
+/**
+ * @beta
+ */
+export class ShadowRoot {}
+
+/**
+ * @beta
+ */
+export class Document {
+    get adoptedStyleSheets() {
+        return [];
+    }
     createTreeWalker() {
         return {};
     }
     createTextNode() {
         return {};
     }
-    createElement(tagName: string) {
-        return { tagName };
-    }
-    querySelector() {
-        return undefined;
+    createElement() {
+        return {};
     }
-    addEventListener() {}
 }
 
-class CSSStyleDeclaration {
-    setProperty() {}
+/**
+ * @beta
+ */
+export class CSSStyleSheet {
+    replace() {}
 }
 
-class CSSStyleSheet {
-    get cssRules() {
-        return [{ style: new CSSStyleDeclaration() }];
+/**
+ * @beta
+ */
+export type CustomElementRegistration = {
+    ctor: { new (): HTMLElement };
+    observedAttributes: string[];
+};
+
+/**
+ * @beta
+ */
+export class CustomElementRegistry {
+    private __definitions = new Map<string, CustomElementRegistration>();
+
+    define(name: string, ctor: CustomHTMLElement) {
+        this.__definitions.set(name, {
+            ctor,
+            observedAttributes: (ctor as CustomHTMLElement).observedAttributes ?? [],
+        });
     }
-    replace() {}
-    insertRule() {
-        return 0;
+
+    get(name: string) {
+        const definition = this.__definitions.get(name);
+        return definition && definition.ctor;
     }
 }
 
-class MediaQueryList {
-    addListener() {}
-    matches = false;
+/**
+ * @beta
+ */
+export class MutationObserver {
+    observe() {}
+}
+
+/**
+ * Creates a window object.
+ * @param props - Additional properties to expose on the window.
+ *
+ * @beta
+ */
+export function createWindow(
+    props: { [key: string]: unknown } = {}
+): { [key: string]: unknown } {
+    const window = {
+        Element,
+        HTMLElement,
+        Document,
+        CSSStyleSheet,
+        ShadowRoot,
+        CustomElementRegistry,
+        MutationObserver,
+
+        // Set below
+        window: undefined as unknown,
+        document: undefined as unknown,
+        customElements: undefined as unknown,
+
+        // User-provided globals
+        ...props,
+    };
+
+    window.window = window;
+    window.document = new window.Document();
+    window.customElements = new window.CustomElementRegistry();
+    return window;
+}
+
+/**
+ * Constructs a window object and installs it on the global, exposing properties directly on globalThis and globalthis.window
+ * @param props - Additional properties to expose on the window.
+ *
+ * @beta
+ */
+export function installWindowOnGlobal(props: { [key: string]: unknown } = {}) {
+    if (globalThis.window === undefined) {
+        const window = createWindow(props);
+        Object.assign(globalThis, window);
+        globalThis.window = globalThis as typeof globalThis & Window;
+    }
 }
-installWindowOnGlobal({
-    matchMedia: () => new MediaQueryList(),
-    HTMLElement,
-    Document,
-    document: new Document(),
-    Node,
-    CSSStyleSheet,
-});
diff --git a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
index 7951ae0c325..f9887b3bb93 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
@@ -1,7 +1,7 @@
-import "../dom-shim.js";
+import "../install-dom-shim.js";
 import { FASTElement, customElement, css, html, attr } from "@microsoft/fast-element";
 import { expect, test } from '@playwright/test';
-import { FASTElementRenderer } from "./element-renderer.js";
+import { FASTElementRenderer } from "./fast-element-renderer.js";
 import fastSSR from "../exports.js";
 import { consolidate } from "../test-utils.js";
 
diff --git a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
index f5daa06570b..82f850b17d8 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/element-renderer.ts
@@ -1,138 +1,134 @@
-import { ElementRenderer, RenderInfo } from "@lit-labs/ssr";
-import { Aspect, DOM, ExecutionContext, FASTElement } from "@microsoft/fast-element";
-import { StyleRenderer } from "../styles/style-renderer.js";
-import { TemplateRenderer } from "../template-renderer/template-renderer.js";
-import { SSRView } from "../view.js";
-import { FASTSSRStyleStrategy } from "./style-strategy.js";
+/**
+ * This file was ported from {@link https://github.com/lit/lit/tree/main/packages/labs/ssr}.
+ * Please see {@link ../ACKNOWLEDGEMENTS.md}
+ */
+import { RenderInfo } from "../render-info.js";
+import { escapeHtml } from "../escape-html.js";
+
+type AttributesMap = Map<string, string>;
 
 /**
- * An {@link @lit-labs/ssr#ElementRenderer} implementation designed to render components
- * built with FAST.
- *
  * @beta
  */
-export abstract class FASTElementRenderer extends ElementRenderer {
-    /**
-     * The element instance represented by the {@link FASTElementRenderer}.
-     */
-    public readonly element!: FASTElement;
-
-    /**
-     * The template renderer to use when rendering a component template
-     */
-    protected abstract templateRenderer: TemplateRenderer;
+export type ConstructableElementRenderer = (new (tagName: string) => ElementRenderer) &
+    typeof ElementRenderer;
+
+export const getElementRenderer = (
+    { elementRenderers }: RenderInfo,
+    tagName: string,
+    ceClass: typeof HTMLElement | undefined = customElements.get(tagName),
+    attributes: AttributesMap = new Map()
+): ElementRenderer => {
+    if (ceClass === undefined) {
+        console.warn(`Custom element ${tagName} was not registered.`);
+        return new FallbackRenderer(tagName);
+    }
+    for (const renderer of elementRenderers) {
+        if (renderer.matchesClass(ceClass, tagName, attributes)) {
+            return new renderer(tagName);
+        }
+    }
+    return new FallbackRenderer(tagName);
+};
 
-    /**
-     * Responsible for rendering stylesheets
-     */
-    protected abstract styleRenderer: StyleRenderer;
+/**
+ * @beta
+ */
+export abstract class ElementRenderer {
+    abstract readonly element?: HTMLElement;
 
     /**
-     * Tests a constructor to determine if it should be managed by a {@link FASTElementRenderer}.
-     * @param ctor - The constructor to test.
+     * Should return true when the renderer should handle rendering for a custom element ctor or tag name.
+     * @param ctor - the custom element class
+     * @param tagName - the custom element tag name
+     * @param attributes - the attribute map
+     * @returns
      */
-    public static matchesClass(ctor: typeof HTMLElement): boolean {
-        return ctor.prototype instanceof FASTElement;
+    static matchesClass(
+        ctor: typeof HTMLElement,
+        tagName: string,
+        attributes: AttributesMap
+    ): boolean {
+        return false;
     }
 
-    /**
-     * Indicate to the {@link FASTElementRenderer} that the instance should execute DOM connection behavior.
-     */
-    public connectedCallback(): void {
-        this.element.connectedCallback();
-        const view = this.element.$fastController.view;
-
-        if (view && SSRView.isSSRView(view)) {
-            if (view.hostStaticAttributes) {
-                view.hostStaticAttributes.forEach((value, key) => {
-                    this.element.setAttribute(key, value);
-                });
-            }
+    constructor(public readonly tagName: string) {}
 
-            if (view.hostDynamicAttributes) {
-                for (const attr of view.hostDynamicAttributes) {
-                    const result = attr.binding(this.element, ExecutionContext.default);
-
-                    const { target } = attr;
-                    switch (attr.aspect) {
-                        case Aspect.property:
-                            (this.element as any)[target] = result;
-                            break;
-                        case Aspect.attribute:
-                            DOM.setAttribute(this.element, target, result);
-                            break;
-                        case Aspect.booleanAttribute:
-                            DOM.setBooleanAttribute(this.element, target, result);
-                            break;
-                    }
-                }
-            }
-        }
-    }
-
-    /**
-     * Indicate to the {@link FASTElementRenderer} that an attribute has been changed.
-     * @param name - The name of the changed attribute
-     * @param old - The old attribute value
-     * @param value - The new attribute value
-     */
-    public attributeChangedCallback(
+    abstract connectedCallback(): void;
+    abstract attributeChangedCallback(
         name: string,
-        old: string | null,
-        value: string | null
-    ): void {
-        this.element.attributeChangedCallback(name, old, value);
-    }
+        prev: string | null,
+        next: string | null
+    ): void;
 
     /**
-     * Constructs a new {@link FASTElementRenderer}.
-     * @param tagName - the tag-name of the element to create.
+     * Sets a property for the element if it exists.
      */
-    constructor(tagName: string) {
-        super(tagName);
-
-        const ctor = customElements.get(this.tagName);
-
-        if (ctor) {
-            this.element = new ctor() as FASTElement;
-            (this.element as any).tagName = tagName;
-        } else {
-            throw new Error(
-                `FASTElementRenderer was unable to find a constructor for a custom element with the tag name '${tagName}'.`
-            );
+    public setProperty(name: string, value: unknown) {
+        if (this.element) {
+            (this.element as any)[name] = value;
         }
     }
 
     /**
-     * Renders the component internals to light DOM instead of shadow DOM.
-     * @param renderInfo - information about the current rendering context.
+     * Sets an attribute for the element if it exists.
      */
-    public *renderLight(renderInfo: RenderInfo): IterableIterator<string> {
-        // TODO - this will yield out the element's template using the template renderer, skipping any shadow-DOM specific emission.
-        yield "";
+    public setAttribute(name: string, value: string) {
+        if (this.element) {
+            const prev = this.element.getAttribute(name);
+            this.element.setAttribute(name, value);
+            this.attributeChangedCallback(name, prev, value);
+        }
     }
 
+    public abstract renderShadow(renderInfo: RenderInfo): IterableIterator<string>;
+
     /**
-     * Render the component internals to shadow DOM.
-     * @param renderInfo - information about the current rendering context.
+     * Render an element's attributes.
+     *
+     * Default implementation serializes all attributes on the element instance.
      */
-    public *renderShadow(renderInfo: RenderInfo): IterableIterator<string> {
-        const view = this.element.$fastController.view;
-        const styles = FASTSSRStyleStrategy.getStylesFor(this.element);
-
-        if (styles) {
-            for (const style of styles) {
-                yield this.styleRenderer.render(style);
+    *renderAttributes(): IterableIterator<string> {
+        if (this.element !== undefined) {
+            const { attributes } = this.element;
+            for (
+                let i = 0, name, value;
+                i < attributes.length && ({ name, value } = attributes[i]);
+                i++
+            ) {
+                if (value === "" || value === undefined || value === null) {
+                    yield ` ${name}`;
+                } else {
+                    yield ` ${name}="${escapeHtml(value)}"`;
+                }
             }
         }
+    }
+}
+/**
+ * An ElementRenderer used as a fallback in the case where a custom element is
+ * either unregistered or has no other matching renderer.
+ */
+class FallbackRenderer extends ElementRenderer {
+    public element?: HTMLElement | undefined;
+    private readonly _attributes: { [name: string]: string } = {};
+
+    public setAttribute(name: string, value: string) {
+        this._attributes[name] = value;
+    }
 
-        if (view !== null) {
-            yield* this.templateRenderer.renderOpCodes(
-                ((view as unknown) as SSRView).codes,
-                renderInfo,
-                this.element,
-                ExecutionContext.default
-            );
+    public *renderAttributes(): IterableIterator<string> {
+        for (const [name, value] of Object.entries(this._attributes)) {
+            if (value === "" || value === undefined || value === null) {
+                yield ` ${name}`;
+            } else {
+                yield ` ${name}="${escapeHtml(value)}"`;
+            }
         }
     }
+
+    connectedCallback() {}
+    attributeChangedCallback() {}
+    /* eslint-disable-next-line */
+    *renderShadow() {}
 }
diff --git a/packages/web-components/fast-ssr/src/element-renderer/fast-element-renderer.ts b/packages/web-components/fast-ssr/src/element-renderer/fast-element-renderer.ts
new file mode 100644
index 00000000000..d4260242fdf
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/element-renderer/fast-element-renderer.ts
@@ -0,0 +1,139 @@
+import { Aspect, DOM, ExecutionContext, FASTElement } from "@microsoft/fast-element";
+import { RenderInfo } from "../render-info.js";
+import { StyleRenderer } from "../styles/style-renderer.js";
+import { TemplateRenderer } from "../template-renderer/template-renderer.js";
+import { SSRView } from "../view.js";
+import { ElementRenderer } from "./element-renderer.js";
+import { FASTSSRStyleStrategy } from "./style-strategy.js";
+
+/**
+ * An {@link ElementRenderer} implementation designed to render components
+ * built with FAST.
+ *
+ * @beta
+ */
+export abstract class FASTElementRenderer extends ElementRenderer {
+    /**
+     * The element instance represented by the {@link FASTElementRenderer}.
+     */
+    public readonly element!: FASTElement;
+
+    /**
+     * The template renderer to use when rendering a component template
+     */
+    protected abstract templateRenderer: TemplateRenderer;
+
+    /**
+     * Responsible for rendering stylesheets
+     */
+    protected abstract styleRenderer: StyleRenderer;
+
+    /**
+     * Tests a constructor to determine if it should be managed by a {@link FASTElementRenderer}.
+     * @param ctor - The constructor to test.
+     */
+    public static matchesClass(ctor: typeof HTMLElement): boolean {
+        return ctor.prototype instanceof FASTElement;
+    }
+
+    /**
+     * Indicate to the {@link FASTElementRenderer} that the instance should execute DOM connection behavior.
+     */
+    public connectedCallback(): void {
+        this.element.connectedCallback();
+        const view = this.element.$fastController.view;
+
+        if (view && SSRView.isSSRView(view)) {
+            if (view.hostStaticAttributes) {
+                view.hostStaticAttributes.forEach((value, key) => {
+                    this.element.setAttribute(key, value);
+                });
+            }
+
+            if (view.hostDynamicAttributes) {
+                for (const attr of view.hostDynamicAttributes) {
+                    const result = attr.binding(this.element, ExecutionContext.default);
+
+                    const { target } = attr;
+                    switch (attr.aspect) {
+                        case Aspect.property:
+                            (this.element as any)[target] = result;
+                            break;
+                        case Aspect.attribute:
+                            DOM.setAttribute(this.element, target, result);
+                            break;
+                        case Aspect.booleanAttribute:
+                            DOM.setBooleanAttribute(this.element, target, result);
+                            break;
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Indicate to the {@link FASTElementRenderer} that an attribute has been changed.
+     * @param name - The name of the changed attribute
+     * @param old - The old attribute value
+     * @param value - The new attribute value
+     */
+    public attributeChangedCallback(
+        name: string,
+        old: string | null,
+        value: string | null
+    ): void {
+        this.element.attributeChangedCallback(name, old, value);
+    }
+
+    /**
+     * Constructs a new {@link FASTElementRenderer}.
+     * @param tagName - the tag-name of the element to create.
+     */
+    constructor(tagName: string) {
+        super(tagName);
+
+        const ctor = customElements.get(this.tagName);
+
+        if (ctor) {
+            this.element = new ctor() as FASTElement;
+            (this.element as any).tagName = tagName;
+        } else {
+            throw new Error(
+                `FASTElementRenderer was unable to find a constructor for a custom element with the tag name '${tagName}'.`
+            );
+        }
+    }
+
+    /**
+     * Renders the component internals to light DOM instead of shadow DOM.
+     * @param renderInfo - information about the current rendering context.
+     */
+    public *renderLight(renderInfo: RenderInfo): IterableIterator<string> {
+        // TODO - this will yield out the element's template using the template renderer, skipping any shadow-DOM specific emission.
+        yield "";
+    }
+
+    /**
+     * Render the component internals to shadow DOM.
+     * @param renderInfo - information about the current rendering context.
+     */
+    public *renderShadow(renderInfo: RenderInfo): IterableIterator<string> {
+        const view = this.element.$fastController.view;
+        const styles = FASTSSRStyleStrategy.getStylesFor(this.element);
+
+        if (styles) {
+            for (const style of styles) {
+                yield this.styleRenderer.render(style);
+            }
+        }
+
+        if (view !== null) {
+            yield* this.templateRenderer.renderOpCodes(
+                ((view as unknown) as SSRView).codes,
+                renderInfo,
+                this.element,
+                ExecutionContext.default
+            );
+        }
+    }
+}
diff --git a/packages/web-components/fast-ssr/src/escape-html.ts b/packages/web-components/fast-ssr/src/escape-html.ts
new file mode 100644
index 00000000000..8b1cb954714
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/escape-html.ts
@@ -0,0 +1,21 @@
+/**
+ * This file was ported from {@link https://github.com/lit/lit/tree/main/packages/labs/ssr}.
+ * Please see {@link ../ACKNOWLEDGEMENTS.md}
+ */
+
+const replacements = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    // Note &apos; was not defined in the HTML4 spec, and is not supported by very
+    // old browsers like IE8, so a codepoint entity is used instead.
+    "'": "&#39;",
+};
+
+/**
+ * Replaces characters which have special meaning in HTML (&<>"') with escaped
+ * HTML entities ("&amp;", "&lt;", etc.).
+ */
+export const escapeHtml = (str: string) =>
+    str.replace(/[&<>"']/g, char => replacements[char as keyof typeof replacements]);
diff --git a/packages/web-components/fast-ssr/src/exports.ts b/packages/web-components/fast-ssr/src/exports.ts
index 47872e61ca0..7505e1b2ab3 100644
--- a/packages/web-components/fast-ssr/src/exports.ts
+++ b/packages/web-components/fast-ssr/src/exports.ts
@@ -1,11 +1,11 @@
-import { RenderInfo } from "@lit-labs/ssr";
 import {
     Compiler,
     ElementStyles,
     Updates,
     ViewBehaviorFactory,
 } from "@microsoft/fast-element";
-import { FASTElementRenderer } from "./element-renderer/element-renderer.js";
+import { RenderInfo } from "./render-info.js";
+import { FASTElementRenderer } from "./element-renderer/fast-element-renderer.js";
 import { FASTSSRStyleStrategy } from "./element-renderer/style-strategy.js";
 import { StyleElementStyleRenderer, StyleRenderer } from "./styles/style-renderer.js";
 import {
@@ -17,6 +17,10 @@ import {
     TemplateRenderer,
 } from "./template-renderer/template-renderer.js";
 import { SSRView } from "./view.js";
+import {
+    ConstructableElementRenderer,
+    ElementRenderer,
+} from "./element-renderer/element-renderer.js";
 
 Compiler.setDefaultStrategy(
     (
@@ -78,8 +82,11 @@ export default function fastSSR(): {
 
 export type {
     ComponentDOMEmissionMode,
+    ElementRenderer,
     FASTElementRenderer,
     StyleRenderer,
     TemplateRenderer,
     ViewBehaviorFactoryRenderer,
+    RenderInfo,
+    ConstructableElementRenderer,
 };
diff --git a/packages/web-components/fast-ssr/src/install-dom-shim.ts b/packages/web-components/fast-ssr/src/install-dom-shim.ts
new file mode 100644
index 00000000000..68e44cd26b2
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/install-dom-shim.ts
@@ -0,0 +1,3 @@
+import { installWindowOnGlobal } from "./dom-shim.js";
+
+installWindowOnGlobal();
diff --git a/packages/web-components/fast-ssr/src/render-info.ts b/packages/web-components/fast-ssr/src/render-info.ts
new file mode 100644
index 00000000000..8c1524f89ac
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/render-info.ts
@@ -0,0 +1,28 @@
+/**
+ * This file was ported from {@link https://github.com/lit/lit/tree/main/packages/labs/ssr}.
+ * Please see {@link ../ACKNOWLEDGEMENTS.md}
+ */
+import {
+    ConstructableElementRenderer,
+    ElementRenderer,
+} from "./element-renderer/element-renderer.js";
+
+/**
+ * @beta
+ */
+export type RenderInfo = {
+    /**
+     * Element renderers to use
+     */
+    elementRenderers: ConstructableElementRenderer[];
+
+    /**
+     * Stack of open custom elements (in light dom or shadow dom)
+     */
+    customElementInstanceStack: ElementRenderer[];
+
+    /**
+     * Stack of open host custom elements (n-1 will be n's host)
+     */
+    customElementHostStack: ElementRenderer[];
+};
diff --git a/packages/web-components/fast-ssr/src/styles/style-renderer.spec.ts b/packages/web-components/fast-ssr/src/styles/style-renderer.spec.ts
index 3c768d8b80c..6f8c6c5fbe8 100644
--- a/packages/web-components/fast-ssr/src/styles/style-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/styles/style-renderer.spec.ts
@@ -1,4 +1,4 @@
-import "../dom-shim.js";
+import "../install-dom-shim.js";
 import { test, expect } from "@playwright/test";
 import { FASTStyleStyleRenderer } from "./style-renderer.js";
 import { css } from "@microsoft/fast-element";
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
index 323dc95aab0..58d3544d858 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.spec.ts
@@ -1,5 +1,5 @@
 
-import "../dom-shim.js";
+import "../install-dom-shim.js";
 import { Aspect, customElement, FASTElement, html, ViewBehaviorFactory, ViewTemplate } from "@microsoft/fast-element";
 import { expect, test } from "@playwright/test";
 import { AttributeBindingOp, CustomElementOpenOp, ViewBehaviorFactoryOp, OpType, TemplateElementOpenOp, TextOp } from "./op-codes.js";
diff --git a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
index 38ba99e3e10..be923296fda 100644
--- a/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
+++ b/packages/web-components/fast-ssr/src/template-parser/template-parser.ts
@@ -1,6 +1,6 @@
 /**
- * This code is largely a fork of lit's rendering implementation: https://github.com/lit/lit/blob/main/packages/labs/ssr/src/lib/render-lit-html.ts
- * with changes as necessary to render FAST components. A big thank you to those who contributed to lit's code above.
+ * This file was heavily inspired by {@link https://github.com/lit/lit/tree/main/packages/labs/ssr}, with adjustments to render parse FAST elements.
+ * Please see {@link ../ACKNOWLEDGEMENTS.md}
  */
 import {
     Aspect,
diff --git a/packages/web-components/fast-ssr/src/template-renderer/directives.ts b/packages/web-components/fast-ssr/src/template-renderer/directives.ts
index d0d38af7af3..0391d5b9d5b 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/directives.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/directives.ts
@@ -1,4 +1,3 @@
-import { RenderInfo } from "@lit-labs/ssr";
 import {
     ChildrenDirective,
     Constructable,
@@ -10,6 +9,7 @@ import {
     ViewBehaviorFactory,
     ViewTemplate,
 } from "@microsoft/fast-element";
+import { RenderInfo } from "../render-info.js";
 import { TemplateRenderer } from "./template-renderer.js";
 
 /**
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
index cb2f75c1671..dacdf196ca9 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
@@ -1,4 +1,4 @@
-import "../dom-shim.js";
+import "../install-dom-shim.js";
 import { child, children, customElement, ExecutionContext, FASTElement, html, item, ref, repeat, slotted, when } from "@microsoft/fast-element";
 import { expect, test } from "@playwright/test";
 import fastSSR from "../exports.js";
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
index 5836c95658d..391729edfd9 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.ts
@@ -1,5 +1,3 @@
-import { RenderInfo } from "@lit-labs/ssr";
-import { getElementRenderer } from "@lit-labs/ssr/lib/element-renderer.js";
 import {
     Aspect,
     Aspected,
@@ -7,6 +5,8 @@ import {
     ViewBehaviorFactory,
     ViewTemplate,
 } from "@microsoft/fast-element";
+import { RenderInfo } from "../render-info.js";
+import { getElementRenderer } from "../element-renderer/element-renderer.js";
 import { AttributeBindingOp, Op, OpType } from "../template-parser/op-codes.js";
 import {
     parseStringToOpCodes,
diff --git a/yarn.lock b/yarn.lock
index f774474c6fd..0b39b9afea8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3197,35 +3197,6 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
-"@lit-labs/ssr-client@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@lit-labs/ssr-client/-/ssr-client-1.0.1.tgz#b97e121184aa201bbe6f165f3a7dc919f67129a2"
-  integrity sha512-rr/UVhxbKWNUr+3qRyvZk+glC7v7ph8Gk/W0z96YG64COJKf9ilnWY6JGW77TRqhrRMmS2nsvAXOyQgcF+4jrA==
-  dependencies:
-    "@lit/reactive-element" "^1.0.0"
-    lit "^2.0.0"
-    lit-html "^2.0.0"
-
-"@lit-labs/ssr@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@lit-labs/ssr/-/ssr-2.1.0.tgz#28de42723a9d7224d5e9ab53c420ae102502a033"
-  integrity sha512-Tnz/S99G57QKQkI+5QhpfOyVxdHM/IbSa3DZmbF5aeIugivONjurHOuMn6AHzzgdteae3ihcGV2eehKPJuG4/w==
-  dependencies:
-    "@lit-labs/ssr-client" "^1.0.0"
-    "@lit/reactive-element" "^1.1.0"
-    "@types/node" "^16.0.0"
-    lit "^2.1.0"
-    lit-element "^3.1.0"
-    lit-html "^2.1.0"
-    node-fetch "^2.6.0"
-    parse5 "^6.0.1"
-    resolve "^1.10.1"
-
-"@lit/reactive-element@^1.0.0", "@lit/reactive-element@^1.1.0", "@lit/reactive-element@^1.3.0":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.3.2.tgz#43e470537b6ec2c23510c07812616d5aa27a17cd"
-  integrity sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA==
-
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"
@@ -4471,11 +4442,6 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.9.tgz#bc43c990c3c9be7281868bbc7b8fdd6e2b57adfa"
   integrity sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A==
 
-"@types/node@^16.0.0":
-  version "16.11.33"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.33.tgz#566713b1b626f781c5c58fe3531307283e00720c"
-  integrity sha512-0PJ0vg+JyU0MIan58IOIFRtSvsb7Ri+7Wltx2qAg94eMOrpg4+uuP3aUHCpxXc1i0jCXiC+zIamSZh3l9AbcQA==
-
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -14490,30 +14456,6 @@ listr2@^3.2.2:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
-lit-element@^3.1.0, lit-element@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.0.tgz#9c981c55dfd9a8f124dc863edb62cc529d434db7"
-  integrity sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==
-  dependencies:
-    "@lit/reactive-element" "^1.3.0"
-    lit-html "^2.2.0"
-
-lit-html@^2.0.0, lit-html@^2.1.0, lit-html@^2.2.0:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.2.3.tgz#dcb2744d0f0c1800b2eb2de37bc42384434a74f7"
-  integrity sha512-vI4j3eWwtQaR8q/O63juZVliBIFMio716X719/lSsGH4UWPy2/7Qf377jsNs4cx3gCHgIbx8yxFgXFQ/igZyXQ==
-  dependencies:
-    "@types/trusted-types" "^2.0.2"
-
-lit@^2.0.0, lit@^2.1.0:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.3.tgz#77203d8f247de7c0d4955817f89e40c927349b9c"
-  integrity sha512-5/v+r9dH3Pw/o0rhp/qYk3ERvOUclNF31bWb0FiW6MPgwdQIr+/KCt/p3zcd8aPl8lIGnxdGrVcZA+gWS6oFOQ==
-  dependencies:
-    "@lit/reactive-element" "^1.3.0"
-    lit-element "^3.2.0"
-    lit-html "^2.2.0"
-
 load-bmfont@^1.3.1, load-bmfont@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/load-bmfont/-/load-bmfont-1.4.1.tgz#c0f5f4711a1e2ccff725a7b6078087ccfcddd3e9"
@@ -16300,7 +16242,7 @@ node-fetch-npm@^2.0.2:
     json-parse-better-errors "^1.0.0"
     safe-buffer "^5.1.1"
 
-node-fetch@2.6.7, node-fetch@^2.5.0, node-fetch@^2.6.0, node-fetch@^2.6.7:
+node-fetch@2.6.7, node-fetch@^2.5.0, node-fetch@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
   integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
@@ -19137,7 +19079,7 @@ resolve@1.17.0, resolve@~1.17.0:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.9.0:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.9.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==

From bbbafc2f5be5b7cdfce87d3c23d000c9680a9cca Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Mon, 23 May 2022 17:40:51 -0400
Subject: [PATCH 119/135] fix(fast-element): do not notify splices for changes
 pre-subscription (v2) (#6006)

* fix(fast-element): do not notify splices for changes pre-subscription

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...t-65662448-c859-4bfd-b06d-a52379348361.json |  7 +++++++
 .../src/observation/arrays.spec.ts             | 18 ++++++++++++++++++
 .../fast-element/src/observation/arrays.ts     |  5 +++++
 .../fast-element/src/observation/notifier.ts   |  8 ++++----
 4 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 change/@microsoft-fast-element-65662448-c859-4bfd-b06d-a52379348361.json

diff --git a/change/@microsoft-fast-element-65662448-c859-4bfd-b06d-a52379348361.json b/change/@microsoft-fast-element-65662448-c859-4bfd-b06d-a52379348361.json
new file mode 100644
index 00000000000..23e1ac5b431
--- /dev/null
+++ b/change/@microsoft-fast-element-65662448-c859-4bfd-b06d-a52379348361.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(fast-element): do not notify splices for changes pre-subscription",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/src/observation/arrays.spec.ts b/packages/web-components/fast-element/src/observation/arrays.spec.ts
index 0c1cd50ebff..1a6f12ccc4f 100644
--- a/packages/web-components/fast-element/src/observation/arrays.spec.ts
+++ b/packages/web-components/fast-element/src/observation/arrays.spec.ts
@@ -336,6 +336,24 @@ describe("The ArrayObserver", () => {
         expect(changeArgs![0].removed).members([]);
         expect(changeArgs![0].index).equal(0);
     });
+
+    it("should not deliver splices for changes prior to subscription", async () => {
+        ArrayObserver.enable();
+        const array = [1,2,3,4,5];
+        const observer = Observable.getNotifier(array);
+        let wasCalled = false;
+
+        array.push(6);
+        observer.subscribe({
+            handleChange() {
+                wasCalled = true;
+            }
+        });
+
+        await Updates.next();
+
+        expect(wasCalled).to.be.false;
+    })
 });
 
 describe("The array length observer", () => {
diff --git a/packages/web-components/fast-element/src/observation/arrays.ts b/packages/web-components/fast-element/src/observation/arrays.ts
index ea240ab242e..05de71724ea 100644
--- a/packages/web-components/fast-element/src/observation/arrays.ts
+++ b/packages/web-components/fast-element/src/observation/arrays.ts
@@ -423,6 +423,11 @@ class DefaultArrayObserver extends SubscriberSet implements ArrayObserver {
         setNonEnumerable(subject, "$fastController", this);
     }
 
+    public subscribe(subscriber: Subscriber): void {
+        this.flush();
+        super.subscribe(subscriber);
+    }
+
     public addSplice(splice: Splice) {
         if (this.splices === void 0) {
             this.splices = [splice];
diff --git a/packages/web-components/fast-element/src/observation/notifier.ts b/packages/web-components/fast-element/src/observation/notifier.ts
index c885ff918ce..f52c2a52412 100644
--- a/packages/web-components/fast-element/src/observation/notifier.ts
+++ b/packages/web-components/fast-element/src/observation/notifier.ts
@@ -150,22 +150,22 @@ export class SubscriberSet implements Notifier {
      */
     public notify(args: any): void {
         const spillover = this.spillover;
-        const source = this.source;
+        const subject = this.subject;
 
         if (spillover === void 0) {
             const sub1 = this.sub1;
             const sub2 = this.sub2;
 
             if (sub1 !== void 0) {
-                sub1.handleChange(source, args);
+                sub1.handleChange(subject, args);
             }
 
             if (sub2 !== void 0) {
-                sub2.handleChange(source, args);
+                sub2.handleChange(subject, args);
             }
         } else {
             for (let i = 0, ii = spillover.length; i < ii; ++i) {
-                spillover[i].handleChange(source, args);
+                spillover[i].handleChange(subject, args);
             }
         }
     }

From f37accfb1dd8c2a56c62024b784f8aa130ca3e8c Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Mon, 23 May 2022 15:11:39 -0700
Subject: [PATCH 120/135] remove private field from fast-ssr (#6010)

* remove private field from package.json

* Change files

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...soft-fast-ssr-53a23675-ae44-49d8-954c-dd87a429567e.json | 7 +++++++
 packages/web-components/fast-ssr/package.json              | 3 +--
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 change/@microsoft-fast-ssr-53a23675-ae44-49d8-954c-dd87a429567e.json

diff --git a/change/@microsoft-fast-ssr-53a23675-ae44-49d8-954c-dd87a429567e.json b/change/@microsoft-fast-ssr-53a23675-ae44-49d8-954c-dd87a429567e.json
new file mode 100644
index 00000000000..439252218e7
--- /dev/null
+++ b/change/@microsoft-fast-ssr-53a23675-ae44-49d8-954c-dd87a429567e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "remove private field from package.json",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index 97e3f854c57..f4288a1a49d 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -33,7 +33,7 @@
     "test-server": "node server/dist/server.js",
     "install-playwright-browsers": "yarn playwright install"
   },
-  "description": "A package for rendering FAST components outside the browser.",
+  "description": "A package for rendering FAST Web Components outside the browser.",
   "main": "./dist/esm/exports.js",
   "types": "./dist/fast-ssr.d.ts",
   "exports": {
@@ -47,7 +47,6 @@
       "default": "./dist/esm/dom-shim.js"
     }
   },
-  "private": true,
   "dependencies": {
     "@microsoft/fast-element": "^1.5.0",
     "parse5": "^6.0.1",

From 72a92dc64707f34af1a97aaeef821d208507832b Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Mon, 23 May 2022 15:12:19 -0700
Subject: [PATCH 121/135] changed fast-element to a peer dependency (#6011)

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 packages/web-components/fast-ssr/package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index f4288a1a49d..4f041b683c1 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -48,11 +48,14 @@
     }
   },
   "dependencies": {
-    "@microsoft/fast-element": "^1.5.0",
     "parse5": "^6.0.1",
     "tslib": "^2.4.0"
   },
+  "peerDependencies": {
+    "@microsoft/fast-element": "^1.10.1"
+  },
   "devDependencies": {
+    "@microsoft/fast-element": "^1.10.1",
     "@microsoft/api-extractor": "7.23.1",
     "@playwright/test": "^1.20.1",
     "@types/express": "^4.17.13",

From 0a3df2c94130efcb3462562611711452da443098 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Tue, 24 May 2022 15:10:39 -0400
Subject: [PATCH 122/135] chore: strip internals from package d.ts files
 (#6015)

* chore: configure fast-element for internal stripping

* chore: configure fast-foundation for internals stripping

* chore: configure fast-ssr for internals stripping

* chore: configure fast-router for internals stripping

* chore: finish cleanup of internals stripping

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 ...-ec659aa5-28ef-47e2-99e0-cd5859520900.json |   7 +
 ...-57e2a77a-2351-4de9-9f09-232296e06ccd.json |   7 +
 ...-814d8db1-9182-494f-a347-89ef6840cbc2.json |   7 +
 ...-62ff5dee-3371-44cd-afe8-e319157c0d3e.json |   7 +
 ...-74c43e3e-f32e-4823-8e84-215a21f9f333.json |   7 +
 .../fast-react-wrapper/src/index.spec.tsx     |   2 +-
 .../fast-element/api-extractor.json           |   8 +-
 .../fast-element/docs/api-report.md           |  19 +--
 .../fast-element/src/platform.ts              |   2 +-
 .../fast-element/src/styles/element-styles.ts |   9 +-
 .../src/templating/node-observation.ts        |   4 +-
 .../fast-element/src/templating/repeat.ts     |   6 +-
 .../fast-foundation/api-extractor.json        |  16 +-
 .../fast-foundation/docs/api-report.md        |  51 +++---
 .../fast-foundation/package.json              |   2 +-
 .../fast-foundation/src/button/README.md      |  34 ++++
 .../src/button/button.form-associated.ts      |   2 +-
 .../fast-foundation/src/checkbox/README.md    |  34 ++++
 .../src/checkbox/checkbox.form-associated.ts  |   2 +-
 .../fast-foundation/src/combobox/README.md    |  54 +++++++
 .../src/combobox/combobox.form-associated.ts  |   2 +-
 .../src/form-associated/README.md             |   2 +-
 .../src/form-associated/form-associated.ts    |  27 ++--
 .../foundation-element/foundation-element.ts  |   3 +-
 .../src/number-field/README.md                |  34 ++++
 .../number-field.form-associated.ts           |   2 +-
 .../fast-foundation/src/picker/README.md      |  34 ++++
 .../src/picker/picker-list-item.ts            |   4 +-
 .../fast-foundation/src/picker/picker-list.ts |   2 +-
 .../src/picker/picker-menu-option.ts          |   5 +-
 .../fast-foundation/src/picker/picker-menu.ts |   3 +-
 .../src/picker/picker.form-associated.ts      |   2 +-
 .../fast-foundation/src/picker/picker.ts      |  24 +--
 .../fast-foundation/src/radio/README.md       |  46 +++++-
 .../src/radio/radio.form-associated.ts        |   2 +-
 .../fast-foundation/src/radio/radio.ts        |  10 +-
 .../fast-foundation/src/search/README.md      |  34 ++++
 .../src/search/search.form-associated.ts      |   2 +-
 .../fast-foundation/src/select/README.md      |  56 +++++++
 .../src/select/select.form-associated.ts      |   2 +-
 .../fast-foundation/src/slider/README.md      |  34 ++++
 .../src/slider/slider.form-associated.ts      |   2 +-
 .../fast-foundation/src/switch/README.md      |  34 ++++
 .../src/switch/switch.form-associated.ts      |   2 +-
 .../fast-foundation/src/text-area/README.md   |  34 ++++
 .../text-area/text-area.form-associated.ts    |   2 +-
 .../fast-foundation/src/text-field/README.md  |  34 ++++
 .../text-field/text-field.form-associated.ts  |   2 +-
 .../match-media-stylesheet-behavior.ts        |   1 -
 .../utilities/property-stylesheet-behavior.ts |   1 -
 .../fast-router/api-extractor.json            |   5 +
 .../fast-router/docs/api-report.md            | 150 +++++++++---------
 .../fast-router/src/commands.ts               |  10 +-
 .../fast-router/src/configuration.ts          |   2 +-
 .../fast-router/src/contributors.ts           |   8 +-
 .../web-components/fast-router/src/events.ts  |   4 +-
 .../fast-router/src/fast-router.ts            |   2 +-
 .../web-components/fast-router/src/links.ts   |   4 +-
 .../fast-router/src/navigation.ts             |  14 +-
 .../web-components/fast-router/src/phases.ts  |  12 +-
 .../web-components/fast-router/src/process.ts |   4 +-
 .../fast-router/src/query-string.ts           |   2 +-
 .../fast-router/src/recognizer.ts             |  12 +-
 .../web-components/fast-router/src/router.ts  |  12 +-
 .../web-components/fast-router/src/routes.ts  |  52 +++---
 .../web-components/fast-router/src/titles.ts  |   4 +-
 .../web-components/fast-router/src/view.ts    |  16 +-
 .../fast-ssr/api-extractor.json               |   1 +
 68 files changed, 751 insertions(+), 285 deletions(-)
 create mode 100644 change/@microsoft-fast-element-ec659aa5-28ef-47e2-99e0-cd5859520900.json
 create mode 100644 change/@microsoft-fast-foundation-57e2a77a-2351-4de9-9f09-232296e06ccd.json
 create mode 100644 change/@microsoft-fast-react-wrapper-814d8db1-9182-494f-a347-89ef6840cbc2.json
 create mode 100644 change/@microsoft-fast-router-62ff5dee-3371-44cd-afe8-e319157c0d3e.json
 create mode 100644 change/@microsoft-fast-ssr-74c43e3e-f32e-4823-8e84-215a21f9f333.json

diff --git a/change/@microsoft-fast-element-ec659aa5-28ef-47e2-99e0-cd5859520900.json b/change/@microsoft-fast-element-ec659aa5-28ef-47e2-99e0-cd5859520900.json
new file mode 100644
index 00000000000..03e6060fdb6
--- /dev/null
+++ b/change/@microsoft-fast-element-ec659aa5-28ef-47e2-99e0-cd5859520900.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: configure fast-element for internal stripping",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-57e2a77a-2351-4de9-9f09-232296e06ccd.json b/change/@microsoft-fast-foundation-57e2a77a-2351-4de9-9f09-232296e06ccd.json
new file mode 100644
index 00000000000..086ed54cffb
--- /dev/null
+++ b/change/@microsoft-fast-foundation-57e2a77a-2351-4de9-9f09-232296e06ccd.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: configure fast-foundation for internals stripping",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-react-wrapper-814d8db1-9182-494f-a347-89ef6840cbc2.json b/change/@microsoft-fast-react-wrapper-814d8db1-9182-494f-a347-89ef6840cbc2.json
new file mode 100644
index 00000000000..55e9dfb0317
--- /dev/null
+++ b/change/@microsoft-fast-react-wrapper-814d8db1-9182-494f-a347-89ef6840cbc2.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: update fast-react-wrapper to latest core APIs",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-router-62ff5dee-3371-44cd-afe8-e319157c0d3e.json b/change/@microsoft-fast-router-62ff5dee-3371-44cd-afe8-e319157c0d3e.json
new file mode 100644
index 00000000000..6dc2c56eee0
--- /dev/null
+++ b/change/@microsoft-fast-router-62ff5dee-3371-44cd-afe8-e319157c0d3e.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: configure fast-router for internals stripping",
+  "packageName": "@microsoft/fast-router",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-ssr-74c43e3e-f32e-4823-8e84-215a21f9f333.json b/change/@microsoft-fast-ssr-74c43e3e-f32e-4823-8e84-215a21f9f333.json
new file mode 100644
index 00000000000..4c20d27c0dd
--- /dev/null
+++ b/change/@microsoft-fast-ssr-74c43e3e-f32e-4823-8e84-215a21f9f333.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: configure fast-ssr for internals stripping",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/utilities/fast-react-wrapper/src/index.spec.tsx b/packages/utilities/fast-react-wrapper/src/index.spec.tsx
index 6489fb1388b..26bdf2217c0 100644
--- a/packages/utilities/fast-react-wrapper/src/index.spec.tsx
+++ b/packages/utilities/fast-react-wrapper/src/index.spec.tsx
@@ -1,7 +1,7 @@
 import { attr, customElement, DOM, FASTElement, html, nullableNumberConverter, observable, Updates } from '@microsoft/fast-element';
 import React from "react";
 import ReactDOM from "react-dom";
-import { uniqueElementName } from '@microsoft/fast-foundation/testing';
+import { uniqueElementName } from '@microsoft/fast-foundation/testing.js';
 import { expect } from "chai";
 import { DesignSystem, FoundationElement } from "@microsoft/fast-foundation";
 import { provideReactWrapper } from './index.js';
diff --git a/packages/web-components/fast-element/api-extractor.json b/packages/web-components/fast-element/api-extractor.json
index c16150bd4b2..540814c7535 100644
--- a/packages/web-components/fast-element/api-extractor.json
+++ b/packages/web-components/fast-element/api-extractor.json
@@ -1,4 +1,10 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-  "extends": "../../../api-extractor.json"
+  "extends": "../../../api-extractor.json",
+  "mainEntryPointFilePath": "./dist/dts/index.d.ts",
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "./dist/fast-element.untrimmed.d.ts",
+    "betaTrimmedFilePath": "./dist/fast-element.d.ts"
+  }
 }
\ No newline at end of file
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 51af4a73528..0a77c20f359 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -183,8 +183,6 @@ export interface ChildListDirectiveOptions<T = any> extends NodeBehaviorOptions<
 // @public
 export function children<T = any>(propertyOrOptions: (keyof T & string) | ChildListDirectiveOptions<keyof T & string>): CaptureType<T>;
 
-// Warning: (ae-incompatible-release-tags) The symbol "ChildrenDirective" is marked as @public, but its signature references "NodeObservationDirective" which is marked as @internal
-//
 // @public
 export class ChildrenDirective extends NodeObservationDirective<ChildrenDirectiveOptions> {
     constructor(options: ChildrenDirectiveOptions);
@@ -320,11 +318,9 @@ export type ElementsFilter = (value: Node, index: number, array: Node[]) => bool
 
 // @public
 export class ElementStyles {
-    constructor(
-    styles: ReadonlyArray<ComposableStyles>);
+    constructor(styles: ReadonlyArray<ComposableStyles>);
     // @internal (undocumented)
     addStylesTo(target: StyleTarget): void;
-    // @internal (undocumented)
     readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
     // @internal (undocumented)
     isAttachedTo(target: StyleTarget): boolean;
@@ -332,7 +328,7 @@ export class ElementStyles {
     removeStylesFrom(target: StyleTarget): void;
     static setDefaultStrategy(Strategy: ConstructibleStyleStrategy): void;
     get strategy(): StyleStrategy;
-    // @internal (undocumented)
+    // (undocumented)
     readonly styles: ReadonlyArray<ComposableStyles>;
     static readonly supportsAdoptedStyleSheets: boolean;
     withBehaviors(...behaviors: Behavior<HTMLElement>[]): this;
@@ -352,9 +348,7 @@ export interface ElementViewTemplate<TSource = any, TParent = any> {
     type: "element";
 }
 
-// Warning: (ae-internal-missing-underscore) The name "emptyArray" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
+// @public
 export const emptyArray: readonly never[];
 
 // @public
@@ -546,9 +540,7 @@ export interface NodeBehaviorOptions<T = any> {
     property: T;
 }
 
-// Warning: (ae-internal-missing-underscore) The name "NodeObservationDirective" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
+// @public
 export abstract class NodeObservationDirective<T extends NodeBehaviorOptions> extends StatelessAttachedAttributeDirective<T> {
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
     protected computeNodes(target: any): Node[];
@@ -683,7 +675,6 @@ export function repeat<TSource = any, TArray extends ReadonlyArray<any> = Readon
 export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
     constructor(location: Node, itemsBinding: Binding<TSource, any[]>, isItemsBindingVolatile: boolean, templateBinding: Binding<TSource, SyntheticViewTemplate>, isTemplateBindingVolatile: boolean, options: RepeatOptions);
     bind(source: TSource, context: ExecutionContext): void;
-    // @internal (undocumented)
     handleChange(source: any, args: Splice[]): void;
     unbind(): void;
 }
@@ -730,8 +721,6 @@ export class SignalBinding extends UpdateBinding {
 // @public
 export function slotted<T = any>(propertyOrOptions: (keyof T & string) | SlottedDirectiveOptions<keyof T & string>): CaptureType<T>;
 
-// Warning: (ae-incompatible-release-tags) The symbol "SlottedDirective" is marked as @public, but its signature references "NodeObservationDirective" which is marked as @internal
-//
 // @public
 export class SlottedDirective extends NodeObservationDirective<SlottedDirectiveOptions> {
     disconnect(target: EventSource): void;
diff --git a/packages/web-components/fast-element/src/platform.ts b/packages/web-components/fast-element/src/platform.ts
index 25e04791de4..d7e32849117 100644
--- a/packages/web-components/fast-element/src/platform.ts
+++ b/packages/web-components/fast-element/src/platform.ts
@@ -52,7 +52,7 @@ if (FAST.error === void 0) {
  * @remarks
  * Typically returned by APIs that return arrays when there are
  * no actual items to return.
- * @internal
+ * @public
  */
 export const emptyArray = Object.freeze([]);
 
diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index a9089ba6e22..7f87fdbf23f 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -41,7 +41,9 @@ export class ElementStyles {
     private targets: WeakSet<StyleTarget> = new WeakSet();
     private _strategy: StyleStrategy | null = null;
 
-    /** @internal */
+    /**
+     * The behaviors associated with this set of styles.
+     */
     public readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
 
     /**
@@ -59,10 +61,7 @@ export class ElementStyles {
      * Creates an instance of ElementStyles.
      * @param styles - The styles that will be associated with elements.
      */
-    public constructor(
-        /** @internal */
-        public readonly styles: ReadonlyArray<ComposableStyles>
-    ) {
+    public constructor(public readonly styles: ReadonlyArray<ComposableStyles>) {
         this.behaviors = styles
             .map((x: ComposableStyles) =>
                 x instanceof ElementStyles ? x.behaviors : null
diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index b78cae48f1b..ccfbd3408e7 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -46,7 +46,9 @@ export const elements = (selector?: string): ElementsFilter =>
 
 /**
  * A base class for node observation.
- * @internal
+ * @public
+ * @remarks
+ * Internally used by the SlottedDirective and the ChildrenDirective.
  */
 export abstract class NodeObservationDirective<
     T extends NodeBehaviorOptions
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index 77b10c0d225..c52c34d1b84 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -149,7 +149,11 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
         this.templateBindingObserver.disconnect();
     }
 
-    /** @internal */
+    /**
+     * Handles changes in the array, its items, and the repeat template.
+     * @param source - The source of the change.
+     * @param args - The details about what was changed.
+     */
     public handleChange(source: any, args: Splice[]): void {
         if (source === this.itemsBinding) {
             this.items = this.itemsBindingObserver.observe(this.source!, this.context!);
diff --git a/packages/web-components/fast-foundation/api-extractor.json b/packages/web-components/fast-foundation/api-extractor.json
index b4d0421594e..2985b1d0c62 100644
--- a/packages/web-components/fast-foundation/api-extractor.json
+++ b/packages/web-components/fast-foundation/api-extractor.json
@@ -1,12 +1,18 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
   "extends": "../../../api-extractor.json",
+  "mainEntryPointFilePath": "./dist/dts/index.d.ts",
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "./dist/fast-foundation.untrimmed.d.ts",
+    "betaTrimmedFilePath": "./dist/fast-foundation.d.ts"
+  },
   "messages": {
-      "extractorMessageReporting": {
-        "ae-different-release-tags": {
-            "logLevel": "none",
-            "addToApiReportFile": true
-        }
+    "extractorMessageReporting": {
+      "ae-different-release-tags": {
+        "logLevel": "none",
+        "addToApiReportFile": true
       }
     }
+  }
 }
\ No newline at end of file
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 5ff48e7f879..056156554c3 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -430,10 +430,10 @@ export class Card extends FoundationElement {
 // @public
 export const cardTemplate: FoundationElementTemplate<ViewTemplate<Card>>;
 
-// @alpha (undocumented)
+// @beta
 export function CheckableFormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
 
-// @alpha
+// @beta
 export interface CheckableFormAssociated extends FormAssociated {
     // (undocumented)
     checked: boolean;
@@ -451,7 +451,7 @@ export interface CheckableFormAssociated extends FormAssociated {
     dirtyChecked: boolean;
 }
 
-// @alpha
+// @beta
 export type CheckableFormAssociatedElement = FormAssociatedElement & CheckableFormAssociated & {
     proxy: HTMLInputElement;
 };
@@ -600,7 +600,7 @@ export function composedContains(reference: HTMLElement, test: HTMLElement): boo
 // @public
 export function composedParent<T extends HTMLElement>(element: T): HTMLElement | null;
 
-// @alpha
+// @beta
 export type ConstructableFormAssociated = Constructable<HTMLElement & FASTElement>;
 
 // @public
@@ -1249,12 +1249,12 @@ export const focusVisible: string;
 // @public
 export const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
 
-// @alpha
+// @beta
 export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
 
 // Warning: (ae-forgotten-export) The symbol "ElementInternals" needs to be exported by the entry point index.d.ts
 //
-// @alpha
+// @beta
 export interface FormAssociated extends Omit<ElementInternals_2, "labels"> {
     // (undocumented)
     attachProxy(): void;
@@ -1300,10 +1300,10 @@ export interface FormAssociated extends Omit<ElementInternals_2, "labels"> {
     valueChanged(previous: string, next: string): void;
 }
 
-// @alpha
+// @beta
 export type FormAssociatedElement = FormAssociated & FASTElement & HTMLElement & FormAssociatedProxy;
 
-// @alpha
+// @beta
 export interface FormAssociatedProxy {
     // (undocumented)
     disabledChanged?(previous: boolean, next: boolean): void;
@@ -1324,7 +1324,6 @@ export interface FormAssociatedProxy {
 // @public
 export class FoundationElement extends FASTElement {
     protected get $presentation(): ComponentPresentation | null;
-    // Warning: (ae-incompatible-release-tags) The symbol "compose" is marked as @public, but its signature references "FoundationElementRegistry" which is marked as @internal
     static compose<T extends FoundationElementDefinition = FoundationElementDefinition, K extends Constructable<FoundationElement> = Constructable<FoundationElement>>(this: K, elementDefinition: T): (overrideDefinition?: OverrideFoundationElementDefinition<T>) => FoundationElementRegistry<T, K>;
     connectedCallback(): void;
     styles: ElementStyles | void | null;
@@ -1347,9 +1346,7 @@ export interface FoundationElementDefinition {
     readonly template?: EagerOrLazyFoundationOption<ElementViewTemplate, this>;
 }
 
-// Warning: (ae-internal-missing-underscore) The name "FoundationElementRegistry" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
+// @public
 export class FoundationElementRegistry<TDefinition extends FoundationElementDefinition, TType> implements Registry {
     constructor(type: Constructable<FoundationElement>, elementDefinition: TDefinition, overrideDefinition: OverrideFoundationElementDefinition<TDefinition>);
     // (undocumented)
@@ -1661,7 +1658,6 @@ export abstract class MatchMediaBehavior implements Behavior {
 // @public
 export class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
     constructor(query: MediaQueryList, styles: ElementStyles);
-    // @internal
     protected constructListener(source: typeof FASTElement): MediaQueryListListener;
     readonly query: MediaQueryList;
     readonly styles: ElementStyles;
@@ -1857,7 +1853,7 @@ export type ParentLocator = (owner: any) => Container | null;
 
 // Warning: (ae-forgotten-export) The symbol "FormAssociatedPicker" needs to be exported by the entry point index.d.ts
 //
-// @alpha
+// @beta
 export class Picker extends FormAssociatedPicker {
     // @internal
     activeListItemTemplate?: ViewTemplate;
@@ -1950,11 +1946,11 @@ export class Picker extends FormAssociatedPicker {
     suggestionsAvailableText: string;
 }
 
-// @alpha
+// @beta
 export class PickerList extends FoundationElement {
 }
 
-// @alpha
+// @beta
 export class PickerListItem extends FoundationElement {
     // @internal (undocumented)
     connectedCallback(): void;
@@ -1970,17 +1966,17 @@ export class PickerListItem extends FoundationElement {
     value: string;
 }
 
-// Warning: (ae-incompatible-release-tags) The symbol "pickerListItemTemplate" is marked as @public, but its signature references "PickerListItem" which is marked as @alpha
+// Warning: (ae-incompatible-release-tags) The symbol "pickerListItemTemplate" is marked as @public, but its signature references "PickerListItem" which is marked as @beta
 //
 // @public (undocumented)
 export const pickerListItemTemplate: FoundationElementTemplate<ViewTemplate<PickerListItem>>;
 
-// Warning: (ae-incompatible-release-tags) The symbol "pickerListTemplate" is marked as @public, but its signature references "PickerList" which is marked as @alpha
+// Warning: (ae-incompatible-release-tags) The symbol "pickerListTemplate" is marked as @public, but its signature references "PickerList" which is marked as @beta
 //
 // @public (undocumented)
 export const pickerListTemplate: FoundationElementTemplate<ViewTemplate<PickerList>>;
 
-// @alpha
+// @beta
 export class PickerMenu extends FoundationElement {
     // @internal
     footerElements: HTMLElement[];
@@ -1999,7 +1995,7 @@ export class PickerMenu extends FoundationElement {
     suggestionsAvailableText: string;
 }
 
-// @alpha
+// @beta
 export class PickerMenuOption extends FoundationElement {
     // @internal (undocumented)
     connectedCallback(): void;
@@ -2013,17 +2009,17 @@ export class PickerMenuOption extends FoundationElement {
     value: string;
 }
 
-// Warning: (ae-incompatible-release-tags) The symbol "pickerMenuOptionTemplate" is marked as @public, but its signature references "PickerMenuOption" which is marked as @alpha
+// Warning: (ae-incompatible-release-tags) The symbol "pickerMenuOptionTemplate" is marked as @public, but its signature references "PickerMenuOption" which is marked as @beta
 //
 // @public (undocumented)
 export const pickerMenuOptionTemplate: FoundationElementTemplate<ViewTemplate<PickerMenuOption>>;
 
-// Warning: (ae-incompatible-release-tags) The symbol "pickerMenuTemplate" is marked as @public, but its signature references "PickerMenu" which is marked as @alpha
+// Warning: (ae-incompatible-release-tags) The symbol "pickerMenuTemplate" is marked as @public, but its signature references "PickerMenu" which is marked as @beta
 //
 // @public
 export const pickerMenuTemplate: FoundationElementTemplate<ViewTemplate<PickerMenu>>;
 
-// Warning: (ae-incompatible-release-tags) The symbol "pickerTemplate" is marked as @public, but its signature references "Picker" which is marked as @alpha
+// Warning: (ae-incompatible-release-tags) The symbol "pickerTemplate" is marked as @public, but its signature references "Picker" which is marked as @beta
 //
 // @public
 export const pickerTemplate: FoundationElementTemplate<ViewTemplate<Picker>>;
@@ -2051,11 +2047,10 @@ export class PropertyStyleSheetBehavior implements Behavior {
     bind(elementInstance: FASTElement): void;
     // @internal
     handleChange(source: FASTElement, key: string): void;
-    // @internal
     unbind(source: typeof FASTElement & HTMLElement): void;
 }
 
-// @alpha
+// @beta
 export type ProxyElement = HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement;
 
 // Warning: (ae-forgotten-export) The symbol "FormAssociatedRadio" needs to be exported by the entry point index.d.ts
@@ -2063,7 +2058,7 @@ export type ProxyElement = HTMLSelectElement | HTMLTextAreaElement | HTMLInputEl
 // @public
 export class Radio extends FormAssociatedRadio implements RadioControl {
     constructor();
-    // @internal (undocumented)
+    // @beta
     clickHandler(e: MouseEvent): boolean | void;
     // @internal (undocumented)
     connectedCallback(): void;
@@ -2073,8 +2068,8 @@ export class Radio extends FormAssociatedRadio implements RadioControl {
     defaultSlottedNodes: Node[];
     // @internal
     initialValue: string;
-    // @internal (undocumented)
-    keypressHandler: (e: KeyboardEvent) => boolean | void;
+    // @beta
+    keypressHandler(e: KeyboardEvent): boolean | void;
     name: string;
     readOnly: boolean;
     // (undocumented)
diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
index bb17e8d7439..c23f89cd4e7 100644
--- a/packages/web-components/fast-foundation/package.json
+++ b/packages/web-components/fast-foundation/package.json
@@ -26,7 +26,7 @@
       "types": "./dist/fast-foundation.d.ts",
       "default": "./dist/esm/index.js"
     },
-    "./testing": {
+    "./testing.js": {
       "types": "./dist/dts/testing/exports.d.ts",
       "default": "./dist/esm/testing/exports.js"
     }
diff --git a/packages/web-components/fast-foundation/src/button/README.md b/packages/web-components/fast-foundation/src/button/README.md
index 01d9f819fe7..cedefb5a130 100644
--- a/packages/web-components/fast-foundation/src/button/README.md
+++ b/packages/web-components/fast-foundation/src/button/README.md
@@ -59,6 +59,40 @@ This component is built with the expectation that focus is delegated to the butt
 
 
 
+### class: `FormAssociatedButton`
+
+#### Superclass
+
+| Name      | Module                               | Package |
+| --------- | ------------------------------------ | ------- |
+| `_Button` | src/button/button.form-associated.ts |         |
+
+#### Mixins
+
+| Name             | Module                                  | Package |
+| ---------------- | --------------------------------------- | ------- |
+| `FormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Fields
+
+| Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`         |         |                                       |         |                                                                                                                                                                                     |                   |
+| `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `templateChanged` | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+
+<hr/>
+
+
+
 ### class: `Button`
 
 #### Superclass
diff --git a/packages/web-components/fast-foundation/src/button/button.form-associated.ts b/packages/web-components/fast-foundation/src/button/button.form-associated.ts
index e4fd08f7d95..10f26c47408 100644
--- a/packages/web-components/fast-foundation/src/button/button.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/button/button.form-associated.ts
@@ -7,7 +7,7 @@ interface _Button extends FormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedButton extends FormAssociated(_Button) {
     proxy = document.createElement("input");
diff --git a/packages/web-components/fast-foundation/src/checkbox/README.md b/packages/web-components/fast-foundation/src/checkbox/README.md
index 6d012132a35..bb6ef0a90ad 100644
--- a/packages/web-components/fast-foundation/src/checkbox/README.md
+++ b/packages/web-components/fast-foundation/src/checkbox/README.md
@@ -76,6 +76,40 @@ export const myCheckbox = Checkbox.compose<CheckboxOptions>({
 
 
 
+### class: `FormAssociatedCheckbox`
+
+#### Superclass
+
+| Name        | Module                                   | Package |
+| ----------- | ---------------------------------------- | ------- |
+| `_Checkbox` | src/checkbox/checkbox.form-associated.ts |         |
+
+#### Mixins
+
+| Name                      | Module                                  | Package |
+| ------------------------- | --------------------------------------- | ------- |
+| `CheckableFormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Fields
+
+| Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`         |         |                                       |         |                                                                                                                                                                                     |                   |
+| `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `templateChanged` | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+
+<hr/>
+
+
+
 ### class: `Checkbox`
 
 #### Superclass
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.form-associated.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.form-associated.ts
index 787fe3adcf7..d21aaa31a11 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.form-associated.ts
@@ -7,7 +7,7 @@ interface _Checkbox extends CheckableFormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
     proxy = document.createElement("input");
diff --git a/packages/web-components/fast-foundation/src/combobox/README.md b/packages/web-components/fast-foundation/src/combobox/README.md
index 7416a48c17b..750204e4c35 100644
--- a/packages/web-components/fast-foundation/src/combobox/README.md
+++ b/packages/web-components/fast-foundation/src/combobox/README.md
@@ -88,6 +88,60 @@ See [listbox-option](/docs/components/listbox-option) for more information.
 
 
 
+### class: `FormAssociatedCombobox`
+
+#### Superclass
+
+| Name        | Module                                   | Package |
+| ----------- | ---------------------------------------- | ------- |
+| `_Combobox` | src/combobox/combobox.form-associated.ts |         |
+
+#### Mixins
+
+| Name             | Module                                  | Package |
+| ---------------- | --------------------------------------- | ------- |
+| `FormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Static Fields
+
+| Name                  | Privacy | Type | Default | Description                                         | Inherited From |
+| --------------------- | ------- | ---- | ------- | --------------------------------------------------- | -------------- |
+| `slottedOptionFilter` | public  |      |         | A static filter to include only selectable options. | Listbox        |
+
+#### Fields
+
+| Name               | Privacy   | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| ------------------ | --------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`            |           |                                       |         |                                                                                                                                                                                     |                   |
+| `length`           | public    | `number`                              |         | The number of options.                                                                                                                                                              | Listbox           |
+| `options`          | public    | `ListboxOption[]`                     |         | The list of options.                                                                                                                                                                | Listbox           |
+| `typeAheadExpired` | protected |                                       |         |                                                                                                                                                                                     | Listbox           |
+| `disabled`         | public    | `boolean`                             |         | The disabled state of the listbox.                                                                                                                                                  | Listbox           |
+| `selectedIndex`    | public    | `number`                              | `-1`    | The index of the selected option.                                                                                                                                                   | Listbox           |
+| `selectedOptions`  | public    | `ListboxOption[]`                     | `[]`    | A collection of the selected options.                                                                                                                                               | Listbox           |
+| `$presentation`    | public    | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`         | public    | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`           | public    | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name                 | Privacy   | Description                                    | Parameters | Return | Inherited From    |
+| -------------------- | --------- | ---------------------------------------------- | ---------- | ------ | ----------------- |
+| `selectFirstOption`  | public    | Moves focus to the first selectable option.    |            | `void` | Listbox           |
+| `setSelectedOptions` | public    | Sets an option as selected and gives it focus. |            |        | Listbox           |
+| `templateChanged`    | protected |                                                |            | `void` | FoundationElement |
+| `stylesChanged`      | protected |                                                |            | `void` | FoundationElement |
+
+#### Attributes
+
+| Name | Field    | Inherited From |
+| ---- | -------- | -------------- |
+|      | disabled | Listbox        |
+
+<hr/>
+
+
+
 ### Variables
 
 | Name                   | Description                       | Type                                                              |
diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.form-associated.ts b/packages/web-components/fast-foundation/src/combobox/combobox.form-associated.ts
index 7aa20c2817a..0abfa8906a8 100644
--- a/packages/web-components/fast-foundation/src/combobox/combobox.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/combobox/combobox.form-associated.ts
@@ -7,7 +7,7 @@ interface _Combobox extends FormAssociated {}
 /**
  * A form-associated base class for the {@link (Combobox:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedCombobox extends FormAssociated(_Combobox) {
     proxy = document.createElement("input");
diff --git a/packages/web-components/fast-foundation/src/form-associated/README.md b/packages/web-components/fast-foundation/src/form-associated/README.md
index c45e7740d1f..3991539ba36 100644
--- a/packages/web-components/fast-foundation/src/form-associated/README.md
+++ b/packages/web-components/fast-foundation/src/form-associated/README.md
@@ -21,7 +21,7 @@ For more information view the [specification](https://github.com/microsoft/fast/
 | Name                      | Description                                                  | Parameters    | Return |
 | ------------------------- | ------------------------------------------------------------ | ------------- | ------ |
 | `FormAssociated`          | Base function for providing Custom Element Form Association. | `BaseCtor: T` | `T`    |
-| `CheckableFormAssociated` |                                                              | `BaseCtor: T` | `T`    |
+| `CheckableFormAssociated` | Creates a checkable form associated component.               | `BaseCtor: T` | `T`    |
 
 <hr/>
 
diff --git a/packages/web-components/fast-foundation/src/form-associated/form-associated.ts b/packages/web-components/fast-foundation/src/form-associated/form-associated.ts
index 6f047050231..8d2f28e9757 100644
--- a/packages/web-components/fast-foundation/src/form-associated/form-associated.ts
+++ b/packages/web-components/fast-foundation/src/form-associated/form-associated.ts
@@ -103,7 +103,7 @@ const InternalsMap = new WeakMap();
 /**
  * Base class for providing Custom Element Form Association.
  *
- * @alpha
+ * @beta
  */
 export interface FormAssociated extends Omit<ElementInternals, "labels"> {
     dirtyValue: boolean;
@@ -132,7 +132,7 @@ export interface FormAssociated extends Omit<ElementInternals, "labels"> {
 /**
  * Base class for providing Custom Element Form Association with checkable features.
  *
- * @alpha
+ * @beta
  */
 export interface CheckableFormAssociated extends FormAssociated {
     currentChecked: boolean;
@@ -146,7 +146,7 @@ export interface CheckableFormAssociated extends FormAssociated {
 
 /**
  * Avaiable types for the `proxy` property.
- * @alpha
+ * @beta
  */
 export type ProxyElement = HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement;
 
@@ -154,7 +154,7 @@ export type ProxyElement = HTMLSelectElement | HTMLTextAreaElement | HTMLInputEl
  * Identifies a class as having a proxy element and optional submethods related
  * to the proxy element.
  *
- * @alpha
+ * @beta
  */
 export interface FormAssociatedProxy {
     proxy: ProxyElement;
@@ -169,7 +169,7 @@ export interface FormAssociatedProxy {
 /**
  * Combined type to describe a Form-associated element.
  *
- * @alpha
+ * @beta
  */
 export type FormAssociatedElement = FormAssociated &
     FASTElement &
@@ -179,7 +179,7 @@ export type FormAssociatedElement = FormAssociated &
 /**
  * Combined type to describe a checkable Form-associated element.
  *
- * @alpha
+ * @beta
  */
 export type CheckableFormAssociatedElement = FormAssociatedElement &
     CheckableFormAssociated & { proxy: HTMLInputElement };
@@ -187,14 +187,14 @@ export type CheckableFormAssociatedElement = FormAssociatedElement &
 /**
  * Combined type to describe a Constructable Form-Associated type.
  *
- * @alpha
+ * @beta
  */
 export type ConstructableFormAssociated = Constructable<HTMLElement & FASTElement>;
 
 /**
  * Base function for providing Custom Element Form Association.
  *
- * @alpha
+ * @beta
  */
 export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T {
     const C = class extends BaseCtor {
@@ -202,7 +202,7 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
          * The proxy element - this element serves as the communication layer with the parent form
          * when form association is not supported by the browser.
          *
-         * @alpha
+         * @beta
          */
         public proxy: ProxyElement;
 
@@ -219,7 +219,7 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
         /**
          * Returns the validity state of the element
          *
-         * @alpha
+         * @beta
          */
         public get validity(): ValidityState {
             return this.elementInternals
@@ -231,7 +231,7 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
          * Retrieve a reference to the associated form.
          * Returns null if not associated to any form.
          *
-         * @alpha
+         * @beta
          */
         public get form(): HTMLFormElement | null {
             return this.elementInternals ? this.elementInternals.form : this.proxy.form;
@@ -241,7 +241,7 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
          * Retrieve the localized validation message,
          * or custom validation message if set.
          *
-         * @alpha
+         * @beta
          */
         public get validationMessage(): string {
             return this.elementInternals
@@ -683,7 +683,8 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
 }
 
 /**
- * @alpha
+ * Creates a checkable form associated component.
+ * @beta
  */
 export function CheckableFormAssociated<T extends ConstructableFormAssociated>(
     BaseCtor: T
diff --git a/packages/web-components/fast-foundation/src/foundation-element/foundation-element.ts b/packages/web-components/fast-foundation/src/foundation-element/foundation-element.ts
index c539ec20b90..b567015682c 100644
--- a/packages/web-components/fast-foundation/src/foundation-element/foundation-element.ts
+++ b/packages/web-components/fast-foundation/src/foundation-element/foundation-element.ts
@@ -205,8 +205,7 @@ function resolveOption<T, K extends FoundationElementDefinition>(
 
 /**
  * Registry capable of defining presentation properties for a DOM Container hierarchy.
- *
- * @internal
+ * @public
  */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 export class FoundationElementRegistry<
diff --git a/packages/web-components/fast-foundation/src/number-field/README.md b/packages/web-components/fast-foundation/src/number-field/README.md
index 33a1bbb6881..945b2992869 100644
--- a/packages/web-components/fast-foundation/src/number-field/README.md
+++ b/packages/web-components/fast-foundation/src/number-field/README.md
@@ -77,6 +77,40 @@ This component is built with the expectation that focus is delegated to the inpu
 
 
 
+### class: `FormAssociatedNumberField`
+
+#### Superclass
+
+| Name           | Module                                           | Package |
+| -------------- | ------------------------------------------------ | ------- |
+| `_NumberField` | src/number-field/number-field.form-associated.ts |         |
+
+#### Mixins
+
+| Name             | Module                                  | Package |
+| ---------------- | --------------------------------------- | ------- |
+| `FormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Fields
+
+| Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`         |         |                                       |         |                                                                                                                                                                                     |                   |
+| `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `templateChanged` | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+
+<hr/>
+
+
+
 ### class: `NumberField`
 
 #### Superclass
diff --git a/packages/web-components/fast-foundation/src/number-field/number-field.form-associated.ts b/packages/web-components/fast-foundation/src/number-field/number-field.form-associated.ts
index e69b5798497..a3db8ac31a1 100644
--- a/packages/web-components/fast-foundation/src/number-field/number-field.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/number-field/number-field.form-associated.ts
@@ -7,7 +7,7 @@ interface _NumberField extends FormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedNumberField extends FormAssociated(_NumberField) {
     proxy = document.createElement("input");
diff --git a/packages/web-components/fast-foundation/src/picker/README.md b/packages/web-components/fast-foundation/src/picker/README.md
index 7156e767545..b482eabd654 100644
--- a/packages/web-components/fast-foundation/src/picker/README.md
+++ b/packages/web-components/fast-foundation/src/picker/README.md
@@ -175,6 +175,40 @@ export class FASTTextField extends TextField {}
 
 
 
+### class: `FormAssociatedPicker`
+
+#### Superclass
+
+| Name      | Module                               | Package |
+| --------- | ------------------------------------ | ------- |
+| `_Picker` | src/picker/picker.form-associated.ts |         |
+
+#### Mixins
+
+| Name             | Module                                  | Package |
+| ---------------- | --------------------------------------- | ------- |
+| `FormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Fields
+
+| Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`         |         |                                       |         |                                                                                                                                                                                     |                   |
+| `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `templateChanged` | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+
+<hr/>
+
+
+
 ### class: `Picker`
 
 #### Superclass
diff --git a/packages/web-components/fast-foundation/src/picker/picker-list-item.ts b/packages/web-components/fast-foundation/src/picker/picker-list-item.ts
index 7ce19dab8f9..c71f1783b19 100644
--- a/packages/web-components/fast-foundation/src/picker/picker-list-item.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker-list-item.ts
@@ -11,13 +11,12 @@ const defaultContentsTemplate: ViewTemplate<PickerListItem> = html`
 /**
  * A picker list item Custom HTML Element.
  *
- * @alpha
+ * @beta
  */
 export class PickerListItem extends FoundationElement {
     /**
      * The underlying string value of the item
      *
-     * @alpha
      * @remarks
      * HTML Attribute: value
      */
@@ -27,7 +26,6 @@ export class PickerListItem extends FoundationElement {
     /**
      *  The template used to render the contents of the list item
      *
-     * @alpha
      */
     @observable
     public contentsTemplate: ViewTemplate;
diff --git a/packages/web-components/fast-foundation/src/picker/picker-list.ts b/packages/web-components/fast-foundation/src/picker/picker-list.ts
index 64423c2bb31..5b52c09cd86 100644
--- a/packages/web-components/fast-foundation/src/picker/picker-list.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker-list.ts
@@ -3,6 +3,6 @@ import { FoundationElement } from "../foundation-element/foundation-element.js";
 /**
  * A List Picker Menu Custom HTML Element.
  *
- * @alpha
+ * @beta
  */
 export class PickerList extends FoundationElement {}
diff --git a/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts b/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts
index 8d26b44cbe7..4016729a552 100644
--- a/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker-menu-option.ts
@@ -10,13 +10,12 @@ const defaultContentsTemplate: ViewTemplate<PickerMenuOption> = html`
 /**
  * A picker list item Custom HTML Element.
  *
- * @alpha
+ * @beta
  */
 export class PickerMenuOption extends FoundationElement {
     /**
      * The underlying string value of the item
      *
-     * @alpha
      * @remarks
      * HTML Attribute: value
      */
@@ -25,8 +24,6 @@ export class PickerMenuOption extends FoundationElement {
 
     /**
      *  The template used to render the contents of the list item
-     *
-     * @alpha
      */
     @observable
     public contentsTemplate: ViewTemplate;
diff --git a/packages/web-components/fast-foundation/src/picker/picker-menu.ts b/packages/web-components/fast-foundation/src/picker/picker-menu.ts
index e425270aa3c..6b0f760308e 100644
--- a/packages/web-components/fast-foundation/src/picker/picker-menu.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker-menu.ts
@@ -5,7 +5,7 @@ import { FoundationElement } from "../foundation-element/foundation-element.js";
 /**
  * A List Picker Menu Custom HTML Element.
  *
- * @alpha
+ * @beta
  */
 export class PickerMenu extends FoundationElement {
     /**
@@ -47,7 +47,6 @@ export class PickerMenu extends FoundationElement {
      * Text to display to assistive technology when
      * suggestions are available
      *
-     * @alpha
      */
     @observable
     public suggestionsAvailableText: string;
diff --git a/packages/web-components/fast-foundation/src/picker/picker.form-associated.ts b/packages/web-components/fast-foundation/src/picker/picker.form-associated.ts
index 830312443f4..229473df17e 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.form-associated.ts
@@ -7,7 +7,7 @@ interface _Picker extends FormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(Picker:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedPicker extends FormAssociated(_Picker) {
     proxy = document.createElement("input");
diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts
index 7d51c10eb37..e30ea76fca3 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.ts
@@ -68,13 +68,12 @@ export type menuConfigs =
  * A Picker Custom HTML Element.  This is an early "alpha" version of the component.
  * Developers should expect the api to evolve, breaking changes are possible.
  *
- * @alpha
+ * @beta
  */
 export class Picker extends FormAssociatedPicker {
     /**
      * Currently selected items. Comma delineated string ie. "apples,oranges".
      *
-     * @alpha
      * @remarks
      * HTML Attribute: selection
      */
@@ -93,7 +92,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * Currently available options. Comma delineated string ie. "apples,oranges".
      *
-     * @alpha
      * @remarks
      * HTML Attribute: options
      */
@@ -109,7 +107,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * Whether the component should remove an option from the list when it is in the selection
      *
-     * @alpha
      * @remarks
      * HTML Attribute: filter-selected
      */
@@ -119,7 +116,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * Whether the component should remove options based on the current query
      *
-     * @alpha
      * @remarks
      * HTML Attribute: filter-query
      */
@@ -129,7 +125,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * The maximum number of items that can be selected.
      *
-     * @alpha
      * @remarks
      * HTML Attribute: max-selected
      */
@@ -139,7 +134,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * The text to present to assistive technolgies when no suggestions are available.
      *
-     * @alpha
      * @remarks
      * HTML Attribute: no-suggestions-text
      */
@@ -149,7 +143,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      *  The text to present to assistive technolgies when suggestions are available.
      *
-     * @alpha
      * @remarks
      * HTML Attribute: suggestions-available-text
      */
@@ -159,7 +152,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * The text to present to assistive technologies when suggestions are loading.
      *
-     * @alpha
      * @remarks
      * HTML Attribute: loading-text
      */
@@ -169,7 +161,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * Applied to the aria-label attribute of the input element
      *
-     * @alpha
      * @remarks
      * HTML Attribute: label
      */
@@ -179,7 +170,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * Applied to the aria-labelledby attribute of the input element
      *
-     * @alpha
      * @remarks
      * HTML Attribute: labelledby
      */
@@ -189,7 +179,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * Applied to the placeholder attribute of the input element
      *
-     * @alpha
      * @remarks
      * HTML Attribute: placholder
      */
@@ -199,7 +188,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * Controls menu placement
      *
-     * @alpha
      * @remarks
      * HTML Attribute: menu-placement
      */
@@ -214,7 +202,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * Whether to display a loading state if the menu is opened.
      *
-     * @alpha
      */
     @observable
     public showLoading: boolean = false;
@@ -230,7 +217,6 @@ export class Picker extends FormAssociatedPicker {
      * Template used to generate selected items.
      * This is used in a repeat directive.
      *
-     * @alpha
      */
     @observable
     public listItemTemplate: ViewTemplate;
@@ -242,7 +228,6 @@ export class Picker extends FormAssociatedPicker {
      * Default template to use for selected items (usually specified in the component template).
      * This is used in a repeat directive.
      *
-     * @alpha
      */
     @observable
     public defaultListItemTemplate?: ViewTemplate;
@@ -262,7 +247,6 @@ export class Picker extends FormAssociatedPicker {
      * Template to use for available options.
      * This is used in a repeat directive.
      *
-     * @alpha
      */
     @observable
     public menuOptionTemplate: ViewTemplate;
@@ -274,7 +258,6 @@ export class Picker extends FormAssociatedPicker {
      * Default template to use for available options (usually specified in the template).
      * This is used in a repeat directive.
      *
-     * @alpha
      */
     @observable
     public defaultMenuOptionTemplate?: ViewTemplate;
@@ -293,7 +276,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      *  Template to use for the contents of a selected list item
      *
-     * @alpha
      */
     @observable
     public listItemContentsTemplate: ViewTemplate;
@@ -301,7 +283,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      *  Template to use for the contents of menu options
      *
-     * @alpha
      */
     @observable
     public menuOptionContentsTemplate: ViewTemplate;
@@ -309,7 +290,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      *  Current list of options in array form
      *
-     * @alpha
      */
     @observable
     public optionsList: string[] = [];
@@ -320,7 +300,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      * The text value currently in the input field
      *
-     * @alpha
      */
     @observable
     public query: string;
@@ -432,7 +411,6 @@ export class Picker extends FormAssociatedPicker {
     /**
      *  Reference to the placeholder element for the repeat directive
      *
-     * @alpha
      */
     public itemsPlaceholderElement: Node;
 
diff --git a/packages/web-components/fast-foundation/src/radio/README.md b/packages/web-components/fast-foundation/src/radio/README.md
index d4133ebf7b4..f458b05bad4 100644
--- a/packages/web-components/fast-foundation/src/radio/README.md
+++ b/packages/web-components/fast-foundation/src/radio/README.md
@@ -79,6 +79,40 @@ export const myRadio = Radio.compose<RadioOptions>({
 
 
 
+### class: `FormAssociatedRadio`
+
+#### Superclass
+
+| Name     | Module                             | Package |
+| -------- | ---------------------------------- | ------- |
+| `_Radio` | src/radio/radio.form-associated.ts |         |
+
+#### Mixins
+
+| Name                      | Module                                  | Package |
+| ------------------------- | --------------------------------------- | ------- |
+| `CheckableFormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Fields
+
+| Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`         |         |                                       |         |                                                                                                                                                                                     |                   |
+| `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `templateChanged` | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+
+<hr/>
+
+
+
 ### class: `Radio`
 
 #### Superclass
@@ -100,11 +134,13 @@ export const myRadio = Radio.compose<RadioOptions>({
 
 #### Methods
 
-| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
-| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
-| `readOnlyChanged` | protected |             |            | `void` |                   |
-| `templateChanged` | protected |             |            | `void` | FoundationElement |
-| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+| Name              | Privacy   | Description                       | Parameters         | Return            | Inherited From    |
+| ----------------- | --------- | --------------------------------- | ------------------ | ----------------- | ----------------- |
+| `readOnlyChanged` | protected |                                   |                    | `void`            |                   |
+| `keypressHandler` | public    | Handles key presses on the radio. | `e: KeyboardEvent` | `boolean or void` |                   |
+| `clickHandler`    | public    | Handles clicks on the radio.      | `e: MouseEvent`    | `boolean or void` |                   |
+| `templateChanged` | protected |                                   |                    | `void`            | FoundationElement |
+| `stylesChanged`   | protected |                                   |                    | `void`            | FoundationElement |
 
 #### Events
 
diff --git a/packages/web-components/fast-foundation/src/radio/radio.form-associated.ts b/packages/web-components/fast-foundation/src/radio/radio.form-associated.ts
index abb66f86f7b..3bb46127e57 100644
--- a/packages/web-components/fast-foundation/src/radio/radio.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/radio/radio.form-associated.ts
@@ -7,7 +7,7 @@ interface _Radio extends CheckableFormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(Radio:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
     proxy = document.createElement("input");
diff --git a/packages/web-components/fast-foundation/src/radio/radio.ts b/packages/web-components/fast-foundation/src/radio/radio.ts
index 818ee01b81e..e9cc64ef26f 100644
--- a/packages/web-components/fast-foundation/src/radio/radio.ts
+++ b/packages/web-components/fast-foundation/src/radio/radio.ts
@@ -124,9 +124,10 @@ export class Radio extends FormAssociatedRadio implements RadioControl {
     }
 
     /**
-     * @internal
+     * Handles key presses on the radio.
+     * @beta
      */
-    public keypressHandler = (e: KeyboardEvent): boolean | void => {
+    public keypressHandler(e: KeyboardEvent): boolean | void {
         switch (e.key) {
             case keySpace:
                 if (!this.checked && !this.readOnly) {
@@ -136,10 +137,11 @@ export class Radio extends FormAssociatedRadio implements RadioControl {
         }
 
         return true;
-    };
+    }
 
     /**
-     * @internal
+     * Handles clicks on the radio.
+     * @beta
      */
     public clickHandler(e: MouseEvent): boolean | void {
         if (!this.disabled && !this.readOnly && !this.checked) {
diff --git a/packages/web-components/fast-foundation/src/search/README.md b/packages/web-components/fast-foundation/src/search/README.md
index d7fb15c74d6..219b7d6ad0a 100644
--- a/packages/web-components/fast-foundation/src/search/README.md
+++ b/packages/web-components/fast-foundation/src/search/README.md
@@ -59,6 +59,40 @@ This component is built with the expectation that focus is delegated to the inpu
 
 
 
+### class: `FormAssociatedSearch`
+
+#### Superclass
+
+| Name      | Module                               | Package |
+| --------- | ------------------------------------ | ------- |
+| `_Search` | src/search/search.form-associated.ts |         |
+
+#### Mixins
+
+| Name             | Module                                  | Package |
+| ---------------- | --------------------------------------- | ------- |
+| `FormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Fields
+
+| Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`         |         |                                       |         |                                                                                                                                                                                     |                   |
+| `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `templateChanged` | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+
+<hr/>
+
+
+
 ### class: `Search`
 
 #### Superclass
diff --git a/packages/web-components/fast-foundation/src/search/search.form-associated.ts b/packages/web-components/fast-foundation/src/search/search.form-associated.ts
index 7ff800b8d19..467b6c10632 100644
--- a/packages/web-components/fast-foundation/src/search/search.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/search/search.form-associated.ts
@@ -7,7 +7,7 @@ interface _Search extends FormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(Search:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedSearch extends FormAssociated(_Search) {
     proxy = document.createElement("input");
diff --git a/packages/web-components/fast-foundation/src/select/README.md b/packages/web-components/fast-foundation/src/select/README.md
index b599a8d6669..16d6ef0ae0e 100644
--- a/packages/web-components/fast-foundation/src/select/README.md
+++ b/packages/web-components/fast-foundation/src/select/README.md
@@ -78,6 +78,62 @@ See [listbox-option](/docs/components/listbox-option) for more information.
 
 
 
+### class: `FormAssociatedSelect`
+
+#### Superclass
+
+| Name      | Module                               | Package |
+| --------- | ------------------------------------ | ------- |
+| `_Select` | src/select/select.form-associated.ts |         |
+
+#### Mixins
+
+| Name             | Module                                  | Package |
+| ---------------- | --------------------------------------- | ------- |
+| `FormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Static Fields
+
+| Name                  | Privacy | Type | Default | Description                                         | Inherited From |
+| --------------------- | ------- | ---- | ------- | --------------------------------------------------- | -------------- |
+| `slottedOptionFilter` | public  |      |         | A static filter to include only selectable options. | Listbox        |
+
+#### Fields
+
+| Name               | Privacy   | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| ------------------ | --------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`            |           |                                       |         |                                                                                                                                                                                     |                   |
+| `multiple`         | public    | `boolean`                             |         | Indicates if the listbox is in multi-selection mode.                                                                                                                                | ListboxElement    |
+| `size`             | public    | `number`                              |         | The maximum number of options to display.                                                                                                                                           | ListboxElement    |
+| `length`           | public    | `number`                              |         | The number of options.                                                                                                                                                              | Listbox           |
+| `options`          | public    | `ListboxOption[]`                     |         | The list of options.                                                                                                                                                                | Listbox           |
+| `typeAheadExpired` | protected |                                       |         |                                                                                                                                                                                     | Listbox           |
+| `disabled`         | public    | `boolean`                             |         | The disabled state of the listbox.                                                                                                                                                  | Listbox           |
+| `selectedIndex`    | public    | `number`                              | `-1`    | The index of the selected option.                                                                                                                                                   | Listbox           |
+| `selectedOptions`  | public    | `ListboxOption[]`                     | `[]`    | A collection of the selected options.                                                                                                                                               | Listbox           |
+| `$presentation`    | public    | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`         | public    | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`           | public    | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name                 | Privacy   | Description                                    | Parameters | Return | Inherited From    |
+| -------------------- | --------- | ---------------------------------------------- | ---------- | ------ | ----------------- |
+| `setSelectedOptions` | public    | Sets an option as selected and gives it focus. |            |        | Listbox           |
+| `selectFirstOption`  | public    | Moves focus to the first selectable option.    |            | `void` | Listbox           |
+| `templateChanged`    | protected |                                                |            | `void` | FoundationElement |
+| `stylesChanged`      | protected |                                                |            | `void` | FoundationElement |
+
+#### Attributes
+
+| Name | Field    | Inherited From |
+| ---- | -------- | -------------- |
+|      | multiple | Listbox        |
+
+<hr/>
+
+
+
 ### Variables
 
 | Name             | Description                                                   | Type                                  |
diff --git a/packages/web-components/fast-foundation/src/select/select.form-associated.ts b/packages/web-components/fast-foundation/src/select/select.form-associated.ts
index 988d9497b9f..49bca8cfa9b 100644
--- a/packages/web-components/fast-foundation/src/select/select.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/select/select.form-associated.ts
@@ -7,7 +7,7 @@ interface _Select extends FormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(Select:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedSelect extends FormAssociated(_Select) {
     proxy = document.createElement("select");
diff --git a/packages/web-components/fast-foundation/src/slider/README.md b/packages/web-components/fast-foundation/src/slider/README.md
index d5f7ef19742..695d34c25a0 100644
--- a/packages/web-components/fast-foundation/src/slider/README.md
+++ b/packages/web-components/fast-foundation/src/slider/README.md
@@ -121,6 +121,40 @@ export const mySliderLabel = SliderLabel.compose({
 
 
 
+### class: `FormAssociatedSlider`
+
+#### Superclass
+
+| Name      | Module                               | Package |
+| --------- | ------------------------------------ | ------- |
+| `_Slider` | src/slider/slider.form-associated.ts |         |
+
+#### Mixins
+
+| Name             | Module                                  | Package |
+| ---------------- | --------------------------------------- | ------- |
+| `FormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Fields
+
+| Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`         |         |                                       |         |                                                                                                                                                                                     |                   |
+| `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `templateChanged` | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+
+<hr/>
+
+
+
 ### class: `Slider`
 
 #### Superclass
diff --git a/packages/web-components/fast-foundation/src/slider/slider.form-associated.ts b/packages/web-components/fast-foundation/src/slider/slider.form-associated.ts
index 55cbfd520f2..b47f9853d82 100644
--- a/packages/web-components/fast-foundation/src/slider/slider.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/slider/slider.form-associated.ts
@@ -7,7 +7,7 @@ interface _Slider extends FormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(Slider:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedSlider extends FormAssociated(_Slider) {
     proxy = document.createElement("input");
diff --git a/packages/web-components/fast-foundation/src/switch/README.md b/packages/web-components/fast-foundation/src/switch/README.md
index 48b6d0f9c0a..9635014ee81 100644
--- a/packages/web-components/fast-foundation/src/switch/README.md
+++ b/packages/web-components/fast-foundation/src/switch/README.md
@@ -72,6 +72,40 @@ export const mySwitch = Switch.compose<SwitchOptions>({
 
 
 
+### class: `FormAssociatedSwitch`
+
+#### Superclass
+
+| Name      | Module                               | Package |
+| --------- | ------------------------------------ | ------- |
+| `_Switch` | src/switch/switch.form-associated.ts |         |
+
+#### Mixins
+
+| Name                      | Module                                  | Package |
+| ------------------------- | --------------------------------------- | ------- |
+| `CheckableFormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Fields
+
+| Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`         |         |                                       |         |                                                                                                                                                                                     |                   |
+| `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `templateChanged` | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+
+<hr/>
+
+
+
 ### class: `Switch`
 
 #### Superclass
diff --git a/packages/web-components/fast-foundation/src/switch/switch.form-associated.ts b/packages/web-components/fast-foundation/src/switch/switch.form-associated.ts
index 534a18132b7..f512837b77a 100644
--- a/packages/web-components/fast-foundation/src/switch/switch.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/switch/switch.form-associated.ts
@@ -7,7 +7,7 @@ interface _Switch extends CheckableFormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(Switch:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
     proxy = document.createElement("input");
diff --git a/packages/web-components/fast-foundation/src/text-area/README.md b/packages/web-components/fast-foundation/src/text-area/README.md
index 4dd9b069c9d..dff7bffec3e 100644
--- a/packages/web-components/fast-foundation/src/text-area/README.md
+++ b/packages/web-components/fast-foundation/src/text-area/README.md
@@ -55,6 +55,40 @@ This component is built with the expectation that focus is delegated to the inpu
 
 
 
+### class: `FormAssociatedTextArea`
+
+#### Superclass
+
+| Name        | Module                                     | Package |
+| ----------- | ------------------------------------------ | ------- |
+| `_TextArea` | src/text-area/text-area.form-associated.ts |         |
+
+#### Mixins
+
+| Name             | Module                                  | Package |
+| ---------------- | --------------------------------------- | ------- |
+| `FormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Fields
+
+| Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`         |         |                                       |         |                                                                                                                                                                                     |                   |
+| `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `templateChanged` | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+
+<hr/>
+
+
+
 ### Variables
 
 | Name             | Description                | Type                                                                              |
diff --git a/packages/web-components/fast-foundation/src/text-area/text-area.form-associated.ts b/packages/web-components/fast-foundation/src/text-area/text-area.form-associated.ts
index 0561bc85cd6..055a3b31c7b 100644
--- a/packages/web-components/fast-foundation/src/text-area/text-area.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/text-area/text-area.form-associated.ts
@@ -7,7 +7,7 @@ interface _TextArea extends FormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedTextArea extends FormAssociated(_TextArea) {
     proxy = document.createElement("textarea");
diff --git a/packages/web-components/fast-foundation/src/text-field/README.md b/packages/web-components/fast-foundation/src/text-field/README.md
index 520c6039e6d..a9323162de8 100644
--- a/packages/web-components/fast-foundation/src/text-field/README.md
+++ b/packages/web-components/fast-foundation/src/text-field/README.md
@@ -60,6 +60,40 @@ This component is built with the expectation that focus is delegated to the inpu
 
 
 
+### class: `FormAssociatedTextField`
+
+#### Superclass
+
+| Name         | Module                                       | Package |
+| ------------ | -------------------------------------------- | ------- |
+| `_TextField` | src/text-field/text-field.form-associated.ts |         |
+
+#### Mixins
+
+| Name             | Module                                  | Package |
+| ---------------- | --------------------------------------- | ------- |
+| `FormAssociated` | /src/form-associated/form-associated.js |         |
+
+#### Fields
+
+| Name            | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `proxy`         |         |                                       |         |                                                                                                                                                                                     |                   |
+| `$presentation` | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`      | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`        | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+
+#### Methods
+
+| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
+| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
+| `templateChanged` | protected |             |            | `void` | FoundationElement |
+| `stylesChanged`   | protected |             |            | `void` | FoundationElement |
+
+<hr/>
+
+
+
 ### Variables
 
 | Name            | Description          | Type                                                                              |
diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.form-associated.ts b/packages/web-components/fast-foundation/src/text-field/text-field.form-associated.ts
index 7c66a2ccc6e..d27f18a6460 100644
--- a/packages/web-components/fast-foundation/src/text-field/text-field.form-associated.ts
+++ b/packages/web-components/fast-foundation/src/text-field/text-field.form-associated.ts
@@ -7,7 +7,7 @@ interface _TextField extends FormAssociated {}
 /**
  * A form-associated base class for the {@link @microsoft/fast-foundation#(TextField:class)} component.
  *
- * @internal
+ * @beta
  */
 export class FormAssociatedTextField extends FormAssociated(_TextField) {
     proxy = document.createElement("input");
diff --git a/packages/web-components/fast-foundation/src/utilities/match-media-stylesheet-behavior.ts b/packages/web-components/fast-foundation/src/utilities/match-media-stylesheet-behavior.ts
index bb8314a1035..3e5339e38f7 100644
--- a/packages/web-components/fast-foundation/src/utilities/match-media-stylesheet-behavior.ts
+++ b/packages/web-components/fast-foundation/src/utilities/match-media-stylesheet-behavior.ts
@@ -139,7 +139,6 @@ export class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
     /**
      * Constructs a match-media listener for a provided element.
      * @param source - the element for which to attach or detach styles.
-     * @internal
      */
     protected constructListener(source: typeof FASTElement): MediaQueryListListener {
         let attached = false;
diff --git a/packages/web-components/fast-foundation/src/utilities/property-stylesheet-behavior.ts b/packages/web-components/fast-foundation/src/utilities/property-stylesheet-behavior.ts
index 0c948fb2bb9..f272de55cc1 100644
--- a/packages/web-components/fast-foundation/src/utilities/property-stylesheet-behavior.ts
+++ b/packages/web-components/fast-foundation/src/utilities/property-stylesheet-behavior.ts
@@ -37,7 +37,6 @@ export class PropertyStyleSheetBehavior implements Behavior {
     /**
      * Unbinds the behavior from the element.
      * @param source - The element for which the behavior is unbinding.
-     * @internal
      */
     public unbind(source: typeof FASTElement & HTMLElement) {
         Observable.getNotifier(source).unsubscribe(this, this.propertyName);
diff --git a/packages/web-components/fast-router/api-extractor.json b/packages/web-components/fast-router/api-extractor.json
index ea29a7a791a..fe89294975a 100644
--- a/packages/web-components/fast-router/api-extractor.json
+++ b/packages/web-components/fast-router/api-extractor.json
@@ -2,6 +2,11 @@
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
   "extends": "../../../api-extractor.json",
   "mainEntryPointFilePath": "dist/dts/index.d.ts",
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "./dist/fast-router.untrimmed.d.ts",
+    "betaTrimmedFilePath": "./dist/fast-router.d.ts"
+  },
   "messages": {
       "extractorMessageReporting": {
         "ae-different-release-tags": {
diff --git a/packages/web-components/fast-router/docs/api-report.md b/packages/web-components/fast-router/docs/api-report.md
index baeda3e3b62..fd00bab11b7 100644
--- a/packages/web-components/fast-router/docs/api-report.md
+++ b/packages/web-components/fast-router/docs/api-report.md
@@ -19,13 +19,13 @@ import { ViewTemplate } from '@microsoft/fast-element';
 // @internal (undocumented)
 export const childRouteParameter = "fast-child-route";
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type CommandFallbackRouteDefinition<TSettings = any> = HasCommand & SupportsSettings<TSettings> & HasTitle;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type CommandRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> & HasCommand & HasTitle;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class ConfigurableRoute implements Route {
     constructor(path: string, name: string, caseSensitive: boolean);
     // (undocumented)
@@ -36,18 +36,18 @@ export class ConfigurableRoute implements Route {
     readonly path: string;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type ContributorOptions = {
     lifecycle?: boolean;
     parameters?: boolean;
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type ConverterObject = {
     convert: RouteParameterConverter;
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class DefaultLinkHandler implements LinkHandler {
     // (undocumented)
     connect(): void;
@@ -55,7 +55,7 @@ export class DefaultLinkHandler implements LinkHandler {
     disconnect(): void;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class DefaultNavigationProcess<TSettings> {
     // Warning: (ae-forgotten-export) The symbol "NavigationPhaseImpl" needs to be exported by the entry point index.d.ts
     //
@@ -65,7 +65,7 @@ export class DefaultNavigationProcess<TSettings> {
     run(router: Router, message: NavigationMessage): Promise<void>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class DefaultNavigationQueue implements NavigationQueue, NavigationHandler {
     // (undocumented)
     connect(): void;
@@ -79,7 +79,7 @@ export class DefaultNavigationQueue implements NavigationQueue, NavigationHandle
     receive(): Promise<NavigationMessage>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class DefaultRouter implements Router {
     constructor(host: HTMLElement);
     // (undocumented)
@@ -110,7 +110,7 @@ export class DefaultRouter implements Router {
     shouldRender(route: RecognizedRoute): boolean;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class DefaultRouteRecognizer<TSettings> implements RouteRecognizer<TSettings> {
     // (undocumented)
     add(routeOrRoutes: Route | readonly Route[], settings?: TSettings): void;
@@ -120,16 +120,16 @@ export class DefaultRouteRecognizer<TSettings> implements RouteRecognizer<TSetti
     recognize(path: string, converters?: Readonly<Record<string, RouteParameterConverter>>): Promise<RecognizedRoute<TSettings> | null>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type DefinitionCallback = () => Promise<FallbackRouteDefinition> | FallbackRouteDefinition;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type ElementFallbackRouteDefinition<TSettings = any> = LayoutAndTransitionRouteDefinition & HasElement & SupportsSettings<TSettings> & HasTitle;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type ElementRouteDefinition<TSettings = any> = NavigableRouteDefinition<TSettings> & HasElement;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class Endpoint<TSettings = any> {
     constructor(route: ConfigurableRoute, paramNames: readonly string[], paramTypes: readonly string[], settings: TSettings | null);
     // (undocumented)
@@ -144,13 +144,13 @@ export class Endpoint<TSettings = any> {
     readonly settings: TSettings | null;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type FallbackRouteDefinition<TSettings = any> = ElementFallbackRouteDefinition<TSettings> | TemplateFallbackRouteDefinition<TSettings> | Pick<RedirectRouteDefinition<TSettings>, "redirect"> | CommandFallbackRouteDefinition<TSettings>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type FASTElementConstructor = new () => FASTElement;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class FASTElementLayout implements Layout {
     constructor(template?: ViewTemplate | null, styles?: ComposableStyles | ComposableStyles[] | null, runBeforeCommit?: boolean);
     // (undocumented)
@@ -161,34 +161,34 @@ export class FASTElementLayout implements Layout {
 
 // Warning: (ae-forgotten-export) The symbol "FASTRouter_base" needs to be exported by the entry point index.d.ts
 //
-// @alpha (undocumented)
+// @beta (undocumented)
 export class FASTRouter extends FASTRouter_base {
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type HasCommand = {
     command: NavigationCommand;
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type HasElement = {
     element: string | FASTElementConstructor | HTMLElement | (() => Promise<string | FASTElementConstructor | HTMLElement>);
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type HasTemplate = {
     template: ViewTemplate | (() => Promise<ViewTemplate>);
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type HasTitle = {
     title?: string;
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type IgnorableRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class Ignore implements NavigationCommand {
     // (undocumented)
     createContributor(): Promise<{
@@ -196,13 +196,13 @@ export class Ignore implements NavigationCommand {
     }>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export function isFASTElementHost(host: HTMLElement): host is HTMLElement & FASTElement;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export function isNavigationPhaseContributor<T extends NavigationPhaseName>(object: any, phase: T): object is Record<T, NavigationPhaseHook>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface Layout {
     // (undocumented)
     afterCommit(routerElement: HTMLElement): Promise<void>;
@@ -210,18 +210,18 @@ export interface Layout {
     beforeCommit(routerElement: HTMLElement): Promise<void>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export const Layout: Readonly<{
     default: Readonly<Layout>;
 }>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type LayoutAndTransitionRouteDefinition = {
     layout?: Layout | ViewTemplate;
     transition?: Transition;
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface LinkHandler {
     // (undocumented)
     connect(): void;
@@ -229,59 +229,59 @@ export interface LinkHandler {
     disconnect(): void;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type MappableRouteDefinition<TSettings = any> = RenderableRouteDefinition<TSettings> | RedirectRouteDefinition<TSettings> | CommandRouteDefinition<TSettings> | ParentRouteDefinition<TSettings>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type NavigableRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> & LayoutAndTransitionRouteDefinition & HasTitle & {
     childRouters?: boolean;
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface NavigationCommand {
     // (undocumented)
     createContributor(router: Router, route: RecognizedRoute): Promise<NavigationContributor>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface NavigationCommitPhase<TSettings = any> extends Omit<NavigationPhase<TSettings>, "cancel" | "canceled" | "onCancel"> {
     // (undocumented)
     setTitle(title: string): any;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type NavigationCommitPhaseHook<TSettings = any> = (phase: NavigationCommitPhase<TSettings>) => Promise<any> | any;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type NavigationContributor<TSettings = any> = Partial<Record<Exclude<NavigationPhaseName, "commit">, NavigationPhaseHook<TSettings>>> & {
     commit?: NavigationCommitPhaseHook<TSettings>;
 };
 
 // Warning: (ae-forgotten-export) The symbol "NavigationContributorDirective" needs to be exported by the entry point index.d.ts
 //
-// @alpha (undocumented)
+// @beta (undocumented)
 export function navigationContributor(options?: ContributorOptions): NavigationContributorDirective;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface NavigationHandler {
     // (undocumented)
     enqueue(msg: NavigationMessage): void;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export const NavigationHandler: Readonly<{
     register(handler: NavigationHandler): void;
     unregister(handler: NavigationHandler): void;
 }>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class NavigationMessage {
     constructor(path: string);
     // (undocumented)
     path: string;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface NavigationPhase<TSettings = any> {
     // (undocumented)
     cancel(callback?: NavigationPhaseFollowupAction): void;
@@ -301,22 +301,22 @@ export interface NavigationPhase<TSettings = any> {
     readonly router: Router<TSettings>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type NavigationPhaseFollowupAction = () => Promise<any> | any;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type NavigationPhaseHook<TSettings = any> = (phase: NavigationPhase<TSettings>) => Promise<any> | any;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type NavigationPhaseName = "navigate" | "leave" | "construct" | "enter" | "commit";
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface NavigationProcess {
     // (undocumented)
     run(router: Router, message: NavigationMessage): Promise<void>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface NavigationQueue {
     // (undocumented)
     connect(): void;
@@ -326,18 +326,18 @@ export interface NavigationQueue {
     receive(): Promise<NavigationMessage>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type ParameterConverter = RouteParameterConverter | ConverterObject | Constructable<ConverterObject>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type ParentRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> & LayoutAndTransitionRouteDefinition & {
     children: MappableRouteDefinition<TSettings>[];
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type PathedRouteDefinition<TSettings = any> = SupportsSettings<TSettings> & Route;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export const QueryString: Readonly<{
     readonly current: string;
     build(params: Object, traditional?: boolean): string;
@@ -348,7 +348,7 @@ export const QueryString: Readonly<{
     parse(queryString: string): Readonly<Record<string, string>>;
 }>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class RecognizedRoute<TSettings = any> {
     constructor(endpoint: Endpoint<TSettings>, params: Readonly<Record<string, string | undefined>>, typedParams: Readonly<Record<string, any>>, queryParams: Readonly<Record<string, string>>);
     // (undocumented)
@@ -367,7 +367,7 @@ export class RecognizedRoute<TSettings = any> {
     readonly typedParams: Readonly<Record<string, any>>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class Redirect implements NavigationCommand {
     constructor(redirect: string);
     // (undocumented)
@@ -376,12 +376,12 @@ export class Redirect implements NavigationCommand {
     }>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type RedirectRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> & {
     redirect: string;
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class Render implements RenderCommand {
     constructor(owner: RouterConfiguration, createView: () => Promise<RouteView>);
     // Warning: (ae-forgotten-export) The symbol "RenderContributor" needs to be exported by the entry point index.d.ts
@@ -402,10 +402,10 @@ export class Render implements RenderCommand {
     set transition(value: Transition);
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type RenderableRouteDefinition<TSettings = any> = ElementRouteDefinition<TSettings> | TemplateRouteDefinition<TSettings>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface RenderCommand extends NavigationCommand {
     // (undocumented)
     createView(): Promise<RouteView>;
@@ -415,7 +415,7 @@ export interface RenderCommand extends NavigationCommand {
     transition: Transition;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface RenderOperation {
     // (undocumented)
     commit(): Promise<void>;
@@ -423,7 +423,7 @@ export interface RenderOperation {
     rollback(): Promise<void>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface Route {
     // (undocumented)
     readonly caseSensitive?: boolean;
@@ -433,7 +433,7 @@ export interface Route {
     readonly path: string;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export const Route: Readonly<{
     path: Readonly<{
         readonly current: string;
@@ -450,7 +450,7 @@ export const Route: Readonly<{
     }>;
 }>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export class RouteCollection<TSettings = any> {
     constructor(owner: RouterConfiguration);
     // (undocumented)
@@ -467,16 +467,16 @@ export class RouteCollection<TSettings = any> {
     recognize(path: string): Promise<RouteMatch<TSettings> | null>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type RouteMatch<TSettings = any> = {
     route: RecognizedRoute<TSettings>;
     command: NavigationCommand;
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type RouteParameterConverter = (value: string | undefined) => any | Promise<any>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface Router<TSettings = any> {
     // (undocumented)
     addContributor(contributor: NavigationContributor): void;
@@ -500,7 +500,7 @@ export interface Router<TSettings = any> {
     shouldRender(route: RecognizedRoute<TSettings>): boolean;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export const Router: Readonly<{
     getOrCreateFor(element: HTMLElement): Router<any> | DefaultRouter;
     find(element: HTMLElement): Router | null;
@@ -510,7 +510,7 @@ export const Router: Readonly<{
     }>(BaseType: TBase): new () => InstanceType<TBase> & RouterElement;
 }>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export abstract class RouterConfiguration<TSettings = any> {
     // (undocumented)
     protected cached(ElementType: new () => HTMLElement): () => Promise<HTMLElement>;
@@ -554,7 +554,7 @@ export abstract class RouterConfiguration<TSettings = any> {
     title: string;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface RouteRecognizer<TSettings> {
     // (undocumented)
     add(routeOrRoutes: Route | readonly Route[], settings?: TSettings): void;
@@ -566,7 +566,7 @@ export interface RouteRecognizer<TSettings> {
     recognize(path: string, converters?: Readonly<Record<string, RouteParameterConverter>>): Promise<RecognizedRoute<TSettings> | null>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface RouterElement extends HTMLElement {
     // Warning: (ae-forgotten-export) The symbol "routerProperty" needs to be exported by the entry point index.d.ts
     //
@@ -580,17 +580,17 @@ export interface RouterElement extends HTMLElement {
     disconnectedCallback(): any;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type RouterExecutionContext = ExecutionContext & {
     router: Router;
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export const RouterExecutionContext: Readonly<{
     create(router: Router): any;
 }>;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface RouteView {
     // (undocumented)
     appendTo(host: HTMLElement): void;
@@ -600,18 +600,18 @@ export interface RouteView {
     dispose(): void;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type SupportsSettings<TSettings = any> = {
     settings?: TSettings;
 };
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type TemplateFallbackRouteDefinition<TSettings = any> = LayoutAndTransitionRouteDefinition & HasTemplate & SupportsSettings<TSettings> & HasTitle;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export type TemplateRouteDefinition<TSettings = any> = NavigableRouteDefinition<TSettings> & HasTemplate;
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export interface Transition {
     // (undocumented)
     begin(host: HTMLElement, prev: RouteView | null, next: RouteView): Promise<void>;
@@ -621,7 +621,7 @@ export interface Transition {
     rollback(host: HTMLElement, prev: RouteView | null, next: RouteView): Promise<void>;
 }
 
-// @alpha (undocumented)
+// @beta (undocumented)
 export const Transition: Readonly<{
     default: Readonly<Transition>;
 }>;
diff --git a/packages/web-components/fast-router/src/commands.ts b/packages/web-components/fast-router/src/commands.ts
index 9b328a1ef8b..527e47c161a 100644
--- a/packages/web-components/fast-router/src/commands.ts
+++ b/packages/web-components/fast-router/src/commands.ts
@@ -19,7 +19,7 @@ import { navigationContributor, NavigationContributor } from "./contributors.js"
 import { NavigationCommitPhase, NavigationPhase } from "./phases.js";
 
 /**
- * @alpha
+ * @beta
  */
 export interface NavigationCommand {
     createContributor(
@@ -29,7 +29,7 @@ export interface NavigationCommand {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export interface RenderCommand extends NavigationCommand {
     layout: Layout;
@@ -38,7 +38,7 @@ export interface RenderCommand extends NavigationCommand {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class Ignore implements NavigationCommand {
     public async createContributor() {
@@ -51,7 +51,7 @@ export class Ignore implements NavigationCommand {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class Redirect implements NavigationCommand {
     constructor(private redirect: string) {}
@@ -133,7 +133,7 @@ class RenderContributor {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class Render implements RenderCommand {
     private _layout: Layout | null = null;
diff --git a/packages/web-components/fast-router/src/configuration.ts b/packages/web-components/fast-router/src/configuration.ts
index cf1a30d6639..32607d17792 100644
--- a/packages/web-components/fast-router/src/configuration.ts
+++ b/packages/web-components/fast-router/src/configuration.ts
@@ -11,7 +11,7 @@ import { NavigationPhaseHook, NavigationPhaseName } from "./phases.js";
 import { DefaultRouteRecognizer, RouteRecognizer } from "./recognizer.js";
 
 /**
- * @alpha
+ * @beta
  */
 export abstract class RouterConfiguration<TSettings = any> {
     private isConfigured = false;
diff --git a/packages/web-components/fast-router/src/contributors.ts b/packages/web-components/fast-router/src/contributors.ts
index 2aa25ece54a..4d0e944a3bf 100644
--- a/packages/web-components/fast-router/src/contributors.ts
+++ b/packages/web-components/fast-router/src/contributors.ts
@@ -14,7 +14,7 @@ import { Router } from "./router.js";
 import { RouterExecutionContext } from "./view.js";
 
 /**
- * @alpha
+ * @beta
  */
 export type NavigationContributor<TSettings = any> = Partial<
     Record<Exclude<NavigationPhaseName, "commit">, NavigationPhaseHook<TSettings>>
@@ -23,7 +23,7 @@ export type NavigationContributor<TSettings = any> = Partial<
 };
 
 /**
- * @alpha
+ * @beta
  */
 export function isNavigationPhaseContributor<T extends NavigationPhaseName>(
     object: any,
@@ -33,7 +33,7 @@ export function isNavigationPhaseContributor<T extends NavigationPhaseName>(
 }
 
 /**
- * @alpha
+ * @beta
  */
 export type ContributorOptions = {
     lifecycle?: boolean;
@@ -97,7 +97,7 @@ class NavigationContributorBehavior implements Behavior {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export function navigationContributor(
     options?: ContributorOptions
diff --git a/packages/web-components/fast-router/src/events.ts b/packages/web-components/fast-router/src/events.ts
index 2be7e8f3ac2..5ef62f78ac4 100644
--- a/packages/web-components/fast-router/src/events.ts
+++ b/packages/web-components/fast-router/src/events.ts
@@ -5,7 +5,7 @@ import { RecognizedRoute } from "./recognizer.js";
 import { Router } from "./router.js";
 
 /**
- * @alpha
+ * @beta
  */
 export interface RoutingEventSink {
     onUnhandledNavigationMessage(router: Router, message: NavigationMessage): void;
@@ -24,7 +24,7 @@ export interface RoutingEventSink {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class DefaultRoutingEventSink implements RoutingEventSink {
     onUnhandledNavigationMessage(router: Router, message: NavigationMessage): void {}
diff --git a/packages/web-components/fast-router/src/fast-router.ts b/packages/web-components/fast-router/src/fast-router.ts
index 85e58642c2c..c94bbacda9e 100644
--- a/packages/web-components/fast-router/src/fast-router.ts
+++ b/packages/web-components/fast-router/src/fast-router.ts
@@ -2,7 +2,7 @@ import { customElement, FASTElement } from "@microsoft/fast-element";
 import { Router, RouterElement } from "./router.js";
 
 /**
- * @alpha
+ * @beta
  */
 @customElement("fast-router")
 export class FASTRouter extends (Router.from(FASTElement) as {
diff --git a/packages/web-components/fast-router/src/links.ts b/packages/web-components/fast-router/src/links.ts
index fb395bf0b7d..24b0155ec17 100644
--- a/packages/web-components/fast-router/src/links.ts
+++ b/packages/web-components/fast-router/src/links.ts
@@ -7,7 +7,7 @@ interface AnchorEventInfo {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export interface LinkHandler {
     connect(): void;
@@ -15,7 +15,7 @@ export interface LinkHandler {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class DefaultLinkHandler implements LinkHandler {
     private handler = (e: MouseEvent) => {
diff --git a/packages/web-components/fast-router/src/navigation.ts b/packages/web-components/fast-router/src/navigation.ts
index f8b93baba6b..e7323354fa9 100644
--- a/packages/web-components/fast-router/src/navigation.ts
+++ b/packages/web-components/fast-router/src/navigation.ts
@@ -1,7 +1,7 @@
 import { Router } from "./router.js";
 
 /**
- * @alpha
+ * @beta
  */
 export interface Route {
     readonly path: string;
@@ -10,14 +10,14 @@ export interface Route {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class NavigationMessage {
     constructor(public path: string) {}
 }
 
 /**
- * @alpha
+ * @beta
  */
 export interface NavigationHandler {
     enqueue(msg: NavigationMessage): void;
@@ -26,7 +26,7 @@ export interface NavigationHandler {
 const handlers = new Set<NavigationHandler>();
 
 /**
- * @alpha
+ * @beta
  */
 export const NavigationHandler = Object.freeze({
     register(handler: NavigationHandler) {
@@ -39,7 +39,7 @@ export const NavigationHandler = Object.freeze({
 });
 
 /**
- * @alpha
+ * @beta
  */
 export interface NavigationQueue {
     connect(): void;
@@ -53,7 +53,7 @@ export interface NavigationQueue {
 const absoluteUrl = /^([a-z][a-z0-9+\-.]*:)?\/\//i;
 
 /**
- * @alpha
+ * @beta
  */
 export const Route = Object.freeze({
     path: Object.freeze({
@@ -178,7 +178,7 @@ export const Route = Object.freeze({
 });
 
 /**
- * @alpha
+ * @beta
  */
 export class DefaultNavigationQueue implements NavigationQueue, NavigationHandler {
     private queue: NavigationMessage[] = [];
diff --git a/packages/web-components/fast-router/src/phases.ts b/packages/web-components/fast-router/src/phases.ts
index 0dc683969de..107f8159ae6 100644
--- a/packages/web-components/fast-router/src/phases.ts
+++ b/packages/web-components/fast-router/src/phases.ts
@@ -2,31 +2,31 @@ import { RecognizedRoute } from "./recognizer.js";
 import { Router } from "./router.js";
 
 /**
- * @alpha
+ * @beta
  */
 export type NavigationPhaseName = "navigate" | "leave" | "construct" | "enter" | "commit";
 
 /**
- * @alpha
+ * @beta
  */
 export type NavigationPhaseHook<TSettings = any> = (
     phase: NavigationPhase<TSettings>
 ) => Promise<any> | any;
 
 /**
- * @alpha
+ * @beta
  */
 export type NavigationCommitPhaseHook<TSettings = any> = (
     phase: NavigationCommitPhase<TSettings>
 ) => Promise<any> | any;
 
 /**
- * @alpha
+ * @beta
  */
 export type NavigationPhaseFollowupAction = () => Promise<any> | any;
 
 /**
- * @alpha
+ * @beta
  */
 export interface NavigationPhase<TSettings = any> {
     readonly name: NavigationPhaseName;
@@ -46,7 +46,7 @@ export interface NavigationPhase<TSettings = any> {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export interface NavigationCommitPhase<TSettings = any>
     extends Omit<NavigationPhase<TSettings>, "cancel" | "canceled" | "onCancel"> {
diff --git a/packages/web-components/fast-router/src/process.ts b/packages/web-components/fast-router/src/process.ts
index 5fc56f51104..6b45c832314 100644
--- a/packages/web-components/fast-router/src/process.ts
+++ b/packages/web-components/fast-router/src/process.ts
@@ -75,14 +75,14 @@ class NavigationPhaseImpl<TSettings = any> implements NavigationCommitPhase<TSet
 }
 
 /**
- * @alpha
+ * @beta
  */
 export interface NavigationProcess {
     run(router: Router, message: NavigationMessage): Promise<void>;
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class DefaultNavigationProcess<TSettings> {
     private phases: NavigationPhaseName[] = [
diff --git a/packages/web-components/fast-router/src/query-string.ts b/packages/web-components/fast-router/src/query-string.ts
index 8ecde842e34..81dbf82659e 100644
--- a/packages/web-components/fast-router/src/query-string.ts
+++ b/packages/web-components/fast-router/src/query-string.ts
@@ -73,7 +73,7 @@ function parseComplexParam(queryParams: Object, keys: string[], value: any): voi
 }
 
 /**
- * @alpha
+ * @beta
  */
 export const QueryString = Object.freeze({
     get current() {
diff --git a/packages/web-components/fast-router/src/recognizer.ts b/packages/web-components/fast-router/src/recognizer.ts
index 0dbe5702853..06c4f1fb94b 100644
--- a/packages/web-components/fast-router/src/recognizer.ts
+++ b/packages/web-components/fast-router/src/recognizer.ts
@@ -2,14 +2,14 @@ import { Route } from "./navigation.js";
 import { QueryString } from "./query-string.js";
 
 /**
- * @alpha
+ * @beta
  */
 export type RouteParameterConverter = (value: string | undefined) => any | Promise<any>;
 const defaultParameterConverter: RouteParameterConverter = (value: string | undefined) =>
     value;
 
 /**
- * @alpha
+ * @beta
  */
 export class ConfigurableRoute implements Route {
     public constructor(
@@ -20,7 +20,7 @@ export class ConfigurableRoute implements Route {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class Endpoint<TSettings = any> {
     public constructor(
@@ -36,7 +36,7 @@ export class Endpoint<TSettings = any> {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class RecognizedRoute<TSettings = any> {
     public readonly allParams: Readonly<Record<string, string | undefined>>;
@@ -364,7 +364,7 @@ class RecognizeResult<T> {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export interface RouteRecognizer<TSettings> {
     add(routeOrRoutes: Route | readonly Route[], settings?: TSettings): void;
@@ -377,7 +377,7 @@ export interface RouteRecognizer<TSettings> {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class DefaultRouteRecognizer<TSettings> implements RouteRecognizer<TSettings> {
     private names = new Map<string, AnySegment<any>[]>();
diff --git a/packages/web-components/fast-router/src/router.ts b/packages/web-components/fast-router/src/router.ts
index 610d45b8c72..f524f608cf5 100644
--- a/packages/web-components/fast-router/src/router.ts
+++ b/packages/web-components/fast-router/src/router.ts
@@ -10,7 +10,7 @@ import { childRouteParameter } from "./routes.js";
 import { Layout, RouterExecutionContext, RouteView, Transition } from "./view.js";
 
 /**
- * @alpha
+ * @beta
  */
 export interface RenderOperation {
     commit(): Promise<void>;
@@ -18,7 +18,7 @@ export interface RenderOperation {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export interface Router<TSettings = any> {
     readonly level: number;
@@ -73,7 +73,7 @@ function findParentRouterForElement(element: HTMLElement) {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export interface RouterElement extends HTMLElement {
     readonly [routerProperty]: Router;
@@ -83,7 +83,7 @@ export interface RouterElement extends HTMLElement {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export const Router = Object.freeze({
     getOrCreateFor(element: HTMLElement) {
@@ -151,14 +151,14 @@ export const Router = Object.freeze({
 });
 
 /**
- * @alpha
+ * @beta
  */
 export function isFASTElementHost(host: HTMLElement): host is HTMLElement & FASTElement {
     return host instanceof FASTElement;
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class DefaultRouter implements Router {
     private parentRouter: Router | null | undefined = void 0;
diff --git a/packages/web-components/fast-router/src/routes.ts b/packages/web-components/fast-router/src/routes.ts
index db4ed7cce30..584355b9fed 100644
--- a/packages/web-components/fast-router/src/routes.ts
+++ b/packages/web-components/fast-router/src/routes.ts
@@ -19,24 +19,24 @@ import { Route } from "./navigation.js";
 export const childRouteParameter = "fast-child-route";
 
 /**
- * @alpha
+ * @beta
  */
 export type SupportsSettings<TSettings = any> = {
     settings?: TSettings;
 };
 
 /**
- * @alpha
+ * @beta
  */
 export type PathedRouteDefinition<TSettings = any> = SupportsSettings<TSettings> & Route;
 
 /**
- * @alpha
+ * @beta
  */
 export type IgnorableRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings>;
 
 /**
- * @alpha
+ * @beta
  */
 export type LayoutAndTransitionRouteDefinition = {
     layout?: Layout | ViewTemplate;
@@ -44,7 +44,7 @@ export type LayoutAndTransitionRouteDefinition = {
 };
 
 /**
- * @alpha
+ * @beta
  */
 export type RedirectRouteDefinition<TSettings = any> = PathedRouteDefinition<
     TSettings
@@ -53,14 +53,14 @@ export type RedirectRouteDefinition<TSettings = any> = PathedRouteDefinition<
 };
 
 /**
- * @alpha
+ * @beta
  */
 export type HasTitle = {
     title?: string;
 };
 
 /**
- * @alpha
+ * @beta
  */
 export type NavigableRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> &
     LayoutAndTransitionRouteDefinition &
@@ -69,12 +69,12 @@ export type NavigableRouteDefinition<TSettings = any> = PathedRouteDefinition<TS
     };
 
 /**
- * @alpha
+ * @beta
  */
 export type FASTElementConstructor = new () => FASTElement;
 
 /**
- * @alpha
+ * @beta
  */
 export type HasElement = {
     element:
@@ -85,7 +85,7 @@ export type HasElement = {
 };
 
 /**
- * @alpha
+ * @beta
  */
 export type ElementFallbackRouteDefinition<
     TSettings = any
@@ -95,7 +95,7 @@ export type ElementFallbackRouteDefinition<
     HasTitle;
 
 /**
- * @alpha
+ * @beta
  */
 export type ElementRouteDefinition<TSettings = any> = NavigableRouteDefinition<
     TSettings
@@ -103,14 +103,14 @@ export type ElementRouteDefinition<TSettings = any> = NavigableRouteDefinition<
     HasElement;
 
 /**
- * @alpha
+ * @beta
  */
 export type HasTemplate = {
     template: ViewTemplate | (() => Promise<ViewTemplate>);
 };
 
 /**
- * @alpha
+ * @beta
  */
 export type TemplateFallbackRouteDefinition<
     TSettings = any
@@ -120,7 +120,7 @@ export type TemplateFallbackRouteDefinition<
     HasTitle;
 
 /**
- * @alpha
+ * @beta
  */
 export type TemplateRouteDefinition<TSettings = any> = NavigableRouteDefinition<
     TSettings
@@ -128,28 +128,28 @@ export type TemplateRouteDefinition<TSettings = any> = NavigableRouteDefinition<
     HasTemplate;
 
 /**
- * @alpha
+ * @beta
  */
 export type HasCommand = {
     command: NavigationCommand;
 };
 
 /**
- * @alpha
+ * @beta
  */
 export type CommandRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> &
     HasCommand &
     HasTitle;
 
 /**
- * @alpha
+ * @beta
  */
 export type CommandFallbackRouteDefinition<TSettings = any> = HasCommand &
     SupportsSettings<TSettings> &
     HasTitle;
 
 /**
- * @alpha
+ * @beta
  */
 export type FallbackRouteDefinition<TSettings = any> =
     | ElementFallbackRouteDefinition<TSettings>
@@ -158,21 +158,21 @@ export type FallbackRouteDefinition<TSettings = any> =
     | CommandFallbackRouteDefinition<TSettings>;
 
 /**
- * @alpha
+ * @beta
  */
 export type DefinitionCallback = () =>
     | Promise<FallbackRouteDefinition>
     | FallbackRouteDefinition;
 
 /**
- * @alpha
+ * @beta
  */
 export type RenderableRouteDefinition<TSettings = any> =
     | ElementRouteDefinition<TSettings>
     | TemplateRouteDefinition<TSettings>;
 
 /**
- * @alpha
+ * @beta
  */
 export type MappableRouteDefinition<TSettings = any> =
     | RenderableRouteDefinition<TSettings>
@@ -181,7 +181,7 @@ export type MappableRouteDefinition<TSettings = any> =
     | ParentRouteDefinition<TSettings>;
 
 /**
- * @alpha
+ * @beta
  */
 export type ParentRouteDefinition<TSettings = any> = PathedRouteDefinition<TSettings> &
     LayoutAndTransitionRouteDefinition & {
@@ -189,7 +189,7 @@ export type ParentRouteDefinition<TSettings = any> = PathedRouteDefinition<TSett
     };
 
 /**
- * @alpha
+ * @beta
  */
 export type RouteMatch<TSettings = any> = {
     route: RecognizedRoute<TSettings>;
@@ -210,14 +210,14 @@ function getFallbackCommand(
 }
 
 /**
- * @alpha
+ * @beta
  */
 export type ConverterObject = {
     convert: RouteParameterConverter;
 };
 
 /**
- * @alpha
+ * @beta
  */
 export type ParameterConverter =
     | RouteParameterConverter
@@ -250,7 +250,7 @@ const defaultConverters = {
 };
 
 /**
- * @alpha
+ * @beta
  */
 export class RouteCollection<TSettings = any> {
     private _recognizer: RouteRecognizer<TSettings> | null = null;
diff --git a/packages/web-components/fast-router/src/titles.ts b/packages/web-components/fast-router/src/titles.ts
index f31de7427a3..f72bf0609b5 100644
--- a/packages/web-components/fast-router/src/titles.ts
+++ b/packages/web-components/fast-router/src/titles.ts
@@ -1,5 +1,5 @@
 /**
- * @alpha
+ * @beta
  */
 export interface TitleBuilder {
     joinTitles(parentTitle: string, childTitle: string): string;
@@ -7,7 +7,7 @@ export interface TitleBuilder {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class DefaultTitleBuilder implements TitleBuilder {
     public constructor(
diff --git a/packages/web-components/fast-router/src/view.ts b/packages/web-components/fast-router/src/view.ts
index 2d5f0e60153..741c7db9d82 100644
--- a/packages/web-components/fast-router/src/view.ts
+++ b/packages/web-components/fast-router/src/view.ts
@@ -8,14 +8,14 @@ import {
 import { isFASTElementHost, Router } from "./router.js";
 
 /**
- * @alpha
+ * @beta
  */
 export type RouterExecutionContext = ExecutionContext & {
     router: Router;
 };
 
 /**
- * @alpha
+ * @beta
  */
 export const RouterExecutionContext = Object.freeze({
     create(router: Router) {
@@ -28,7 +28,7 @@ export const RouterExecutionContext = Object.freeze({
 });
 
 /**
- * @alpha
+ * @beta
  */
 export interface RouteView {
     bind(
@@ -40,7 +40,7 @@ export interface RouteView {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export interface Transition {
     begin(host: HTMLElement, prev: RouteView | null, next: RouteView): Promise<void>;
@@ -49,7 +49,7 @@ export interface Transition {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export const Transition = Object.freeze({
     default: Object.freeze({
@@ -72,7 +72,7 @@ export const Transition = Object.freeze({
 });
 
 /**
- * @alpha
+ * @beta
  */
 export interface Layout {
     beforeCommit(routerElement: HTMLElement): Promise<void>;
@@ -80,7 +80,7 @@ export interface Layout {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export class FASTElementLayout implements Layout {
     private styles: ElementStyles | null;
@@ -126,7 +126,7 @@ export class FASTElementLayout implements Layout {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export const Layout = Object.freeze({
     default: new FASTElementLayout(
diff --git a/packages/web-components/fast-ssr/api-extractor.json b/packages/web-components/fast-ssr/api-extractor.json
index eedc82e737f..d5150d319db 100644
--- a/packages/web-components/fast-ssr/api-extractor.json
+++ b/packages/web-components/fast-ssr/api-extractor.json
@@ -4,6 +4,7 @@
   "mainEntryPointFilePath": "./dist/dts/exports.d.ts",
   "dtsRollup": {
     "enabled": true,
+    "untrimmedFilePath": "./dist/fast-ssr.untrimmed.d.ts",
     "betaTrimmedFilePath": "./dist/fast-ssr.d.ts"
   }
 }
\ No newline at end of file

From 7c10fdc049f0e4c005c3450b849544e49a6f43c1 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Tue, 24 May 2022 17:48:38 -0700
Subject: [PATCH 123/135] feat: update tabs bool attr defaulting to true
 (#6020)

* change activeindicator attribute in tabs to hide-active-indicator to better support boolean attribute behavior

* Change files
---
 ...-70646681-8dcc-4511-92e1-0062ddbdda8f.json |  7 +++++
 .../fast-foundation/docs/api-report.md        |  2 +-
 .../fast-foundation/src/tabs/README.md        | 28 +++++++++----------
 .../fast-foundation/src/tabs/tabs.spec.ts     | 20 +++++++++----
 .../fast-foundation/src/tabs/tabs.template.ts |  4 +--
 .../fast-foundation/src/tabs/tabs.ts          |  8 +++---
 6 files changed, 43 insertions(+), 26 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-70646681-8dcc-4511-92e1-0062ddbdda8f.json

diff --git a/change/@microsoft-fast-foundation-70646681-8dcc-4511-92e1-0062ddbdda8f.json b/change/@microsoft-fast-foundation-70646681-8dcc-4511-92e1-0062ddbdda8f.json
new file mode 100644
index 00000000000..0ad19b9f31a
--- /dev/null
+++ b/change/@microsoft-fast-foundation-70646681-8dcc-4511-92e1-0062ddbdda8f.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "change activeindicator attribute in tabs to hide-active-indicator to better support boolean attribute behavior",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 056156554c3..a5afbcdb482 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -2586,13 +2586,13 @@ export class Tabs extends FoundationElement {
     activeid: string;
     // @internal (undocumented)
     activeidChanged(oldValue: string, newValue: string): void;
-    activeindicator: boolean;
     // @internal (undocumented)
     activeIndicatorRef: HTMLElement;
     activetab: HTMLElement;
     adjust(adjustment: number): void;
     // @internal (undocumented)
     connectedCallback(): void;
+    hideActiveIndicator: boolean;
     orientation: TabsOrientation;
     // @internal (undocumented)
     orientationChanged(): void;
diff --git a/packages/web-components/fast-foundation/src/tabs/README.md b/packages/web-components/fast-foundation/src/tabs/README.md
index 33d881d8f6a..eabcf3e683f 100644
--- a/packages/web-components/fast-foundation/src/tabs/README.md
+++ b/packages/web-components/fast-foundation/src/tabs/README.md
@@ -116,15 +116,15 @@ export const myTabs = Tabs.compose({
 
 #### Fields
 
-| Name              | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
-| ----------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
-| `orientation`     | public  | `TabsOrientation`                     |         | The orientation                                                                                                                                                                     |                   |
-| `activeid`        | public  | `string`                              |         | The id of the active tab                                                                                                                                                            |                   |
-| `activeindicator` | public  | `boolean`                             | `true`  | Whether or not to show the active indicator                                                                                                                                         |                   |
-| `activetab`       | public  | `HTMLElement`                         |         | A reference to the active tab                                                                                                                                                       |                   |
-| `$presentation`   | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
-| `template`        | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
-| `styles`          | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
+| Name                  | Privacy | Type                                  | Default | Description                                                                                                                                                                         | Inherited From    |
+| --------------------- | ------- | ------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `orientation`         | public  | `TabsOrientation`                     |         | The orientation                                                                                                                                                                     |                   |
+| `activeid`            | public  | `string`                              |         | The id of the active tab                                                                                                                                                            |                   |
+| `hideActiveIndicator` | public  | `boolean`                             | `false` | Whether or not to show the active indicator                                                                                                                                         |                   |
+| `activetab`           | public  | `HTMLElement`                         |         | A reference to the active tab                                                                                                                                                       |                   |
+| `$presentation`       | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                             | FoundationElement |
+| `template`            | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.          | FoundationElement |
+| `styles`              | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
 
 #### Methods
 
@@ -142,11 +142,11 @@ export const myTabs = Tabs.compose({
 
 #### Attributes
 
-| Name          | Field           | Inherited From |
-| ------------- | --------------- | -------------- |
-| `orientation` | orientation     |                |
-| `activeid`    | activeid        |                |
-|               | activeindicator |                |
+| Name                    | Field               | Inherited From |
+| ----------------------- | ------------------- | -------------- |
+| `orientation`           | orientation         |                |
+| `activeid`              | activeid            |                |
+| `hide-active-indicator` | hideActiveIndicator |                |
 
 #### CSS Parts
 
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
index 3e0e18d940f..53225ba5a8e 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
@@ -95,22 +95,32 @@ describe("Tabs", () => {
         await disconnect();
     });
 
-    it("should set a property equal to activeIndicator when `activeIndicator` property is true", async () => {
+    it("should set a property equal to hideActiveIndicator when `hideActiveIndicator` property is true", async () => {
         const { element, connect, disconnect } = await setup();
-        element.setAttribute("activeIndicator", "false");
+        element.setAttribute("hide-active-indicator", "true");
 
         await connect();
 
-        expect(element.activeindicator).to.equal(false);
+        expect(element.hideActiveIndicator).to.equal(true);
 
         await disconnect();
     });
 
-    it("should render an internal element with a class of 'activeIndicator' when `activeIndicator` is true", async () => {
+    it("should set a default value of `hideActiveIndicator` to false", async () => {
         const { element, connect, disconnect } = await setup();
         await connect();
 
-        expect(element.shadowRoot?.querySelector(".activeIndicator")).to.exist;
+        expect(element.hideActiveIndicator).to.equal(false);
+        expect(element.hasAttribute("hide-active-indicator")).to.equal(false);
+
+        await disconnect();
+    });
+
+    it("should render an internal element with a class of 'active-indicator' when `hide-active-indicator` is false", async () => {
+        const { element, connect, disconnect } = await setup();
+        await connect();
+
+        expect(element.shadowRoot?.querySelector(".active-indicator")).to.exist;
 
         await disconnect();
     });
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.template.ts b/packages/web-components/fast-foundation/src/tabs/tabs.template.ts
index 6bbb0dcb5e9..4ee32172bbe 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.template.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.template.ts
@@ -22,8 +22,8 @@ export const tabsTemplate: FoundationElementTemplate<ViewTemplate<Tabs>, TabsOpt
                 html<Tabs>`
                     <div
                         ${ref("activeIndicatorRef")}
-                        class="activeIndicator"
-                        part="activeIndicator"
+                        class="active-indicator"
+                        part="active-indicator"
                     ></div>
                 `
             )}
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts
index 991ab0e3fd0..dd74c64b20c 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts
@@ -146,8 +146,8 @@ export class Tabs extends FoundationElement {
      * @remarks
      * HTML Attribute: activeindicator
      */
-    @attr({ mode: "boolean" })
-    public activeindicator = true;
+    @attr({ attribute: "hide-active-indicator", mode: "boolean" })
+    public hideActiveIndicator = false;
 
     /**
      * @internal
@@ -209,7 +209,7 @@ export class Tabs extends FoundationElement {
             if (tab.slot === "tab") {
                 const isActiveTab =
                     this.activeTabIndex === index && this.isFocusableElement(tab);
-                if (this.activeindicator && this.isFocusableElement(tab)) {
+                if (!this.hideActiveIndicator && this.isFocusableElement(tab)) {
                     this.showActiveIndicator = true;
                 }
                 const tabId: string = this.tabIds[index];
@@ -321,7 +321,7 @@ export class Tabs extends FoundationElement {
         // Ignore if we click twice on the same tab
         if (
             this.showActiveIndicator &&
-            this.activeindicator &&
+            !this.hideActiveIndicator &&
             this.activeTabIndex !== this.prevActiveTabIndex
         ) {
             if (this.ticking) {

From dd58c3910ad98c0f199b790659d5f3c49473ba39 Mon Sep 17 00:00:00 2001
From: Brian Heston <47367562+bheston@users.noreply.github.com>
Date: Wed, 25 May 2022 13:04:06 -0700
Subject: [PATCH 124/135] Add adaptive-ui package (#5989)

---
 ...-63900c6a-7460-40f4-bb44-42cedac1ac3c.json |   7 +
 packages/utilities/adaptive-ui/.eslintignore  |  10 +
 packages/utilities/adaptive-ui/.eslintrc.json |  10 +
 packages/utilities/adaptive-ui/.gitignore     |   3 +
 packages/utilities/adaptive-ui/.mocharc.json  |   6 +
 packages/utilities/adaptive-ui/.npmignore     |  10 +
 packages/utilities/adaptive-ui/.npmrc         |   1 +
 .../utilities/adaptive-ui/.prettierignore     |   3 +
 packages/utilities/adaptive-ui/README.md      |  59 ++
 .../utilities/adaptive-ui/api-extractor.json  |   4 +
 .../utilities/adaptive-ui/docs/api-report.md  | 667 +++++++++++++
 packages/utilities/adaptive-ui/package.json   |  59 ++
 .../utilities/adaptive-ui/src/color/README.md |  27 +
 .../utilities/adaptive-ui/src/color/index.ts  |   6 +
 .../adaptive-ui/src/color/palette-rgb.spec.ts |  15 +
 .../adaptive-ui/src/color/palette-rgb.ts      | 299 ++++++
 .../adaptive-ui/src/color/palette.ts          | 238 +++++
 .../utilities/adaptive-ui/src/color/recipe.ts |  58 ++
 .../recipes/black-or-white-by-contrast-set.ts |  49 +
 .../black-or-white-by-contrast.spec.ts        |  21 +
 .../recipes/black-or-white-by-contrast.ts     |  22 +
 .../recipes/contrast-and-delta-swatch-set.ts  |  71 ++
 .../src/color/recipes/contrast-swatch.spec.ts |  38 +
 .../src/color/recipes/contrast-swatch.ts      |  22 +
 .../src/color/recipes/delta-swatch-set.ts     |  38 +
 .../src/color/recipes/delta-swatch.ts         |  23 +
 .../ideal-color-delta-swatch-set.spec.ts      |  96 ++
 .../recipes/ideal-color-delta-swatch-set.ts   |  88 ++
 .../adaptive-ui/src/color/recipes/index.ts    |   6 +
 .../utilities/adaptive-ui/src/color/swatch.ts |  98 ++
 .../src/color/utilities/binary-search.ts      |  31 +
 .../src/color/utilities/color-constants.ts    |  15 +
 .../color/utilities/direction-by-is-dark.ts   |  15 +
 .../adaptive-ui/src/color/utilities/index.ts  |   5 +
 .../src/color/utilities/is-dark.ts            |  22 +
 .../src/color/utilities/luminance-swatch.ts   |  13 +
 .../src/color/utilities/relative-luminance.ts |  29 +
 .../src/design-tokens/appearance.ts           |  16 +
 .../adaptive-ui/src/design-tokens/color.ts    | 930 ++++++++++++++++++
 .../adaptive-ui/src/design-tokens/create.ts   |   9 +
 .../adaptive-ui/src/design-tokens/general.ts  |   5 +
 .../adaptive-ui/src/design-tokens/index.ts    |   5 +
 .../adaptive-ui/src/design-tokens/palette.ts  |  40 +
 .../adaptive-ui/src/design-tokens/type.ts     | 166 ++++
 packages/utilities/adaptive-ui/src/index.ts   |   3 +
 .../utilities/adaptive-ui/src/type/index.ts   |   1 +
 .../adaptive-ui/src/type/type-ramp.ts         | 129 +++
 .../utilities/adaptive-ui/tsconfig.build.json |  11 +
 packages/utilities/adaptive-ui/tsconfig.json  |   8 +
 .../utilities/adaptive-ui/tsconfig.test.json  |   8 +
 50 files changed, 3515 insertions(+)
 create mode 100644 change/@microsoft-adaptive-ui-63900c6a-7460-40f4-bb44-42cedac1ac3c.json
 create mode 100644 packages/utilities/adaptive-ui/.eslintignore
 create mode 100644 packages/utilities/adaptive-ui/.eslintrc.json
 create mode 100644 packages/utilities/adaptive-ui/.gitignore
 create mode 100644 packages/utilities/adaptive-ui/.mocharc.json
 create mode 100644 packages/utilities/adaptive-ui/.npmignore
 create mode 100644 packages/utilities/adaptive-ui/.npmrc
 create mode 100644 packages/utilities/adaptive-ui/.prettierignore
 create mode 100644 packages/utilities/adaptive-ui/README.md
 create mode 100644 packages/utilities/adaptive-ui/api-extractor.json
 create mode 100644 packages/utilities/adaptive-ui/docs/api-report.md
 create mode 100644 packages/utilities/adaptive-ui/package.json
 create mode 100644 packages/utilities/adaptive-ui/src/color/README.md
 create mode 100644 packages/utilities/adaptive-ui/src/color/index.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/palette-rgb.spec.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/palette-rgb.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/palette.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipe.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast-set.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast.spec.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/contrast-and-delta-swatch-set.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/contrast-swatch.spec.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/contrast-swatch.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/delta-swatch-set.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/delta-swatch.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/ideal-color-delta-swatch-set.spec.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/ideal-color-delta-swatch-set.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/recipes/index.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/swatch.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/utilities/binary-search.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/utilities/color-constants.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/utilities/direction-by-is-dark.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/utilities/index.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/utilities/is-dark.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/utilities/luminance-swatch.ts
 create mode 100644 packages/utilities/adaptive-ui/src/color/utilities/relative-luminance.ts
 create mode 100644 packages/utilities/adaptive-ui/src/design-tokens/appearance.ts
 create mode 100644 packages/utilities/adaptive-ui/src/design-tokens/color.ts
 create mode 100644 packages/utilities/adaptive-ui/src/design-tokens/create.ts
 create mode 100644 packages/utilities/adaptive-ui/src/design-tokens/general.ts
 create mode 100644 packages/utilities/adaptive-ui/src/design-tokens/index.ts
 create mode 100644 packages/utilities/adaptive-ui/src/design-tokens/palette.ts
 create mode 100644 packages/utilities/adaptive-ui/src/design-tokens/type.ts
 create mode 100644 packages/utilities/adaptive-ui/src/index.ts
 create mode 100644 packages/utilities/adaptive-ui/src/type/index.ts
 create mode 100644 packages/utilities/adaptive-ui/src/type/type-ramp.ts
 create mode 100644 packages/utilities/adaptive-ui/tsconfig.build.json
 create mode 100644 packages/utilities/adaptive-ui/tsconfig.json
 create mode 100644 packages/utilities/adaptive-ui/tsconfig.test.json

diff --git a/change/@microsoft-adaptive-ui-63900c6a-7460-40f4-bb44-42cedac1ac3c.json b/change/@microsoft-adaptive-ui-63900c6a-7460-40f4-bb44-42cedac1ac3c.json
new file mode 100644
index 00000000000..9e8c5334ffd
--- /dev/null
+++ b/change/@microsoft-adaptive-ui-63900c6a-7460-40f4-bb44-42cedac1ac3c.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add adaptive-ui package",
+  "packageName": "@microsoft/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/utilities/adaptive-ui/.eslintignore b/packages/utilities/adaptive-ui/.eslintignore
new file mode 100644
index 00000000000..6fde7dc2651
--- /dev/null
+++ b/packages/utilities/adaptive-ui/.eslintignore
@@ -0,0 +1,10 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint coverage output
+coverage
+# don't lint www
+www
+# don't lint test files
+__test__
diff --git a/packages/utilities/adaptive-ui/.eslintrc.json b/packages/utilities/adaptive-ui/.eslintrc.json
new file mode 100644
index 00000000000..ea40c852980
--- /dev/null
+++ b/packages/utilities/adaptive-ui/.eslintrc.json
@@ -0,0 +1,10 @@
+{
+    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
+    "rules": {
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "import/extensions": [
+            "error",
+            "always"
+        ]
+    }
+}
diff --git a/packages/utilities/adaptive-ui/.gitignore b/packages/utilities/adaptive-ui/.gitignore
new file mode 100644
index 00000000000..55e944cd3e6
--- /dev/null
+++ b/packages/utilities/adaptive-ui/.gitignore
@@ -0,0 +1,3 @@
+tsdoc-metadata.json
+temp
+test
diff --git a/packages/utilities/adaptive-ui/.mocharc.json b/packages/utilities/adaptive-ui/.mocharc.json
new file mode 100644
index 00000000000..364e9651b90
--- /dev/null
+++ b/packages/utilities/adaptive-ui/.mocharc.json
@@ -0,0 +1,6 @@
+{
+  "colors": true,
+  "recursive": true,
+  "timeout": 5000,
+  "spec": "test/**/*.spec.js"
+}
\ No newline at end of file
diff --git a/packages/utilities/adaptive-ui/.npmignore b/packages/utilities/adaptive-ui/.npmignore
new file mode 100644
index 00000000000..8ae9ed66b33
--- /dev/null
+++ b/packages/utilities/adaptive-ui/.npmignore
@@ -0,0 +1,10 @@
+# Tests
+__test__/
+*.spec.*
+*.test.*
+
+# Source files
+src/
+
+# babel config
+babel.config.js
diff --git a/packages/utilities/adaptive-ui/.npmrc b/packages/utilities/adaptive-ui/.npmrc
new file mode 100644
index 00000000000..43c97e719a5
--- /dev/null
+++ b/packages/utilities/adaptive-ui/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/packages/utilities/adaptive-ui/.prettierignore b/packages/utilities/adaptive-ui/.prettierignore
new file mode 100644
index 00000000000..60aa645faec
--- /dev/null
+++ b/packages/utilities/adaptive-ui/.prettierignore
@@ -0,0 +1,3 @@
+dist/*
+test/*
+src/__test__/*
diff --git a/packages/utilities/adaptive-ui/README.md b/packages/utilities/adaptive-ui/README.md
new file mode 100644
index 00000000000..e072f96ff86
--- /dev/null
+++ b/packages/utilities/adaptive-ui/README.md
@@ -0,0 +1,59 @@
+# Adaptive UI
+
+Adaptive UI is a library for building highly-consistent design systems based around your visual decisions. This represents an evolution of many token implementations that provide end-result values without the means to track how they were derived or easily adjust them.
+
+This is a core feature of [FAST](https://fast.design) and is incorporated into the [Fluent UI Web Components](https://aka.ms/fluentwebcomponents) and other design systems.
+
+## Installation
+
+```shell
+npm install --save @microsoft/adaptive-ui
+```
+
+```shell
+yarn add @microsoft/adaptive-ui
+```
+
+## Getting started
+
+The most common way to use this library is through the `DesignToken`s.
+
+For example, in a FAST style sheet:
+
+```ts
+css`
+    :host {
+        background: ${neutralFillRest};
+    }
+`
+```
+
+This will evaluate the `neutralFillRest` recipe when the component loads and apply the correct color appropriate for the current context within design.
+
+Most of the color recipes are contextually aware of where they're used so they produce accessible colors based on the configuration of the design, for instance between light mode and dark mode, or when personalization is applied, like a blue tint to the neutral colors or orange accent color.
+
+To tint the neutral palette, and thus all color recipes derived from it:
+
+```ts
+neutralBaseColor.withDefault("#73818C");
+```
+
+To switch to dark mode:
+
+```ts
+fillColor.withDefault("#232323");
+```
+
+See more about the [adaptive color system](./src/color/README.md).
+
+## Road map
+
+The layer system for setting content area background colors and improved handling of light and dark mode is evolving and will be added soon.
+
+The latest version of adaptive density, currently in RFC and PR, will come here soon as well.
+
+The color system is being updated to support opacity in colors, which will enable at least the neutral palette to overlay images or background blur effects like in Windows 11.
+
+### Further afield
+
+The fixed design tokens will evolve into a more configurable definition aligning with industry standards in design tokens.
diff --git a/packages/utilities/adaptive-ui/api-extractor.json b/packages/utilities/adaptive-ui/api-extractor.json
new file mode 100644
index 00000000000..a5c079e97d1
--- /dev/null
+++ b/packages/utilities/adaptive-ui/api-extractor.json
@@ -0,0 +1,4 @@
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+    "extends": "../../../api-extractor.json"
+}
\ No newline at end of file
diff --git a/packages/utilities/adaptive-ui/docs/api-report.md b/packages/utilities/adaptive-ui/docs/api-report.md
new file mode 100644
index 00000000000..ee0b3795961
--- /dev/null
+++ b/packages/utilities/adaptive-ui/docs/api-report.md
@@ -0,0 +1,667 @@
+## API Report File for "@microsoft/adaptive-ui"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { CSSDesignToken } from '@microsoft/fast-foundation';
+import { CSSDirective } from '@microsoft/fast-element';
+import { DesignToken } from '@microsoft/fast-foundation';
+import { Direction } from '@microsoft/fast-web-utilities';
+
+// @public (undocumented)
+export const accentBaseColor: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const accentBaseSwatch: DesignToken<Swatch>;
+
+// @public (undocumented)
+export const accentFillActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const accentFillActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const accentFillFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const accentFillFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const accentFillHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const accentFillHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const accentFillMinContrast: DesignToken<number>;
+
+// @public (undocumented)
+export const accentFillRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const accentFillRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const accentFillRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const accentForegroundActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const accentForegroundActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const accentForegroundFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const accentForegroundFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const accentForegroundHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const accentForegroundHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const accentForegroundMinContrast: DesignToken<number>;
+
+// @public (undocumented)
+export const accentForegroundRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const accentForegroundRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const accentForegroundRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const accentPalette: DesignToken<Palette<Swatch>>;
+
+// @public
+export class BasePalette<T extends Swatch> implements Palette<T> {
+    constructor(source: T, swatches: ReadonlyArray<T>);
+    readonly closestIndexCache: Map<number, number>;
+    closestIndexOf(reference: RelativeLuminance): number;
+    colorContrast(reference: RelativeLuminance, contrastTarget: number, initialSearchIndex?: number, direction?: PaletteDirection): T;
+    delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T;
+    get(index: number): T;
+    readonly lastIndex: number;
+    readonly reversedSwatches: ReadonlyArray<T>;
+    readonly source: T;
+    readonly swatches: ReadonlyArray<T>;
+}
+
+// @internal
+export const _black: SwatchRGB;
+
+// @public
+export function blackOrWhiteByContrast(reference: Swatch, minContrast: number, defaultBlack: boolean): Swatch;
+
+// @public (undocumented)
+export const bodyFont: CSSDesignToken<string>;
+
+// @public
+export interface ColorRecipe {
+    evaluate(element: HTMLElement, reference?: Swatch): Swatch;
+}
+
+// @public
+export function contrast(a: RelativeLuminance, b: RelativeLuminance): number;
+
+// @public
+export function contrastAndDeltaSwatchSet(palette: Palette, reference: Swatch, minContrast: number, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, direction?: PaletteDirection): InteractiveSwatchSet;
+
+// @public
+export function contrastSwatch(palette: Palette, reference: Swatch, minContrast: number, direction?: PaletteDirection): Swatch;
+
+// @public (undocumented)
+export const controlCornerRadius: CSSDesignToken<number>;
+
+// @public
+export function deltaSwatch(palette: Palette, reference: Swatch, delta: number, direction?: PaletteDirection): Swatch;
+
+// @public
+export function deltaSwatchSet(palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, direction?: PaletteDirection): InteractiveSwatchSet;
+
+// @public (undocumented)
+export const designUnit: CSSDesignToken<number>;
+
+// @public (undocumented)
+export const direction: CSSDesignToken<Direction>;
+
+// @public
+export function directionByIsDark(color: RelativeLuminance): PaletteDirectionValue;
+
+// @public (undocumented)
+export const fillColor: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const focusStrokeInner: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const focusStrokeInnerRecipe: DesignToken<ColorRecipe>;
+
+// @public (undocumented)
+export const focusStrokeOuter: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const focusStrokeOuterRecipe: DesignToken<ColorRecipe>;
+
+// @public (undocumented)
+export const focusStrokeWidth: CSSDesignToken<number>;
+
+// @public (undocumented)
+export const fontWeight: CSSDesignToken<number>;
+
+// @public (undocumented)
+export const foregroundOnAccentActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const foregroundOnAccentFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const foregroundOnAccentHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const foregroundOnAccentRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const foregroundOnAccentRest: CSSDesignToken<Swatch>;
+
+// @public
+export function idealColorDeltaSwatchSet(palette: Palette, reference: Swatch, minContrast: number, idealColor: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, direction?: PaletteDirection): InteractiveSwatchSet;
+
+// @public
+export interface InteractiveColorRecipe {
+    evaluate(element: HTMLElement, reference?: Swatch): InteractiveSwatchSet;
+}
+
+// @public
+export interface InteractiveSwatchSet {
+    active: Swatch;
+    focus: Swatch;
+    hover: Swatch;
+    rest: Swatch;
+}
+
+// @public
+export function isDark(color: RelativeLuminance): boolean;
+
+// @public (undocumented)
+export const layerCornerRadius: CSSDesignToken<number>;
+
+// @public
+export function luminanceSwatch(luminance: number): Swatch;
+
+// @public (undocumented)
+export const neutralBaseColor: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const neutralBaseSwatch: DesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillInputActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillInputActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillInputFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillInputFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillInputHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillInputHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillInputRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const neutralFillInputRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillInputRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const neutralFillRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillSecondaryActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillSecondaryActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillSecondaryFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillSecondaryFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillSecondaryHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillSecondaryHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillSecondaryRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const neutralFillSecondaryRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillSecondaryRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillStealthActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillStealthActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillStealthFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillStealthFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillStealthHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillStealthHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillStealthRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const neutralFillStealthRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillStealthRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillStrongActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillStrongActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillStrongFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillStrongFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillStrongHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillStrongHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillStrongMinContrast: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralFillStrongRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const neutralFillStrongRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralFillStrongRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralForegroundActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralForegroundActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralForegroundFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralForegroundFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralForegroundHint: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralForegroundHintRecipe: DesignToken<ColorRecipe>;
+
+// @public (undocumented)
+export const neutralForegroundHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralForegroundHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralForegroundMinContrast: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralForegroundRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const neutralForegroundRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralForegroundRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralPalette: DesignToken<Palette<Swatch>>;
+
+// @public (undocumented)
+export const neutralStrokeActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeDividerRecipe: DesignToken<ColorRecipe>;
+
+// @public (undocumented)
+export const neutralStrokeDividerRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeDividerRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeInputActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeInputActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeInputFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeInputFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeInputHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeInputHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeInputRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const neutralStrokeInputRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeInputRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const neutralStrokeRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeRestDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeStrongActive: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeStrongActiveDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeStrongFocus: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeStrongFocusDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeStrongHover: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeStrongHoverDelta: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeStrongMinContrast: DesignToken<number>;
+
+// @public (undocumented)
+export const neutralStrokeStrongRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public (undocumented)
+export const neutralStrokeStrongRest: CSSDesignToken<Swatch>;
+
+// @public (undocumented)
+export const neutralStrokeStrongRestDelta: DesignToken<number>;
+
+// @public
+export interface Palette<T extends Swatch = Swatch> {
+    closestIndexOf(reference: RelativeLuminance): number;
+    colorContrast(reference: RelativeLuminance, minContrast: number, initialIndex?: number, direction?: PaletteDirection): T;
+    delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T;
+    get(index: number): T;
+    readonly source: T;
+    readonly swatches: ReadonlyArray<T>;
+}
+
+// @public
+export type PaletteDirection = PaletteDirectionValue | (() => PaletteDirectionValue);
+
+// @public
+export const PaletteDirectionValue: Readonly<{
+    readonly darker: 1;
+    readonly lighter: -1;
+}>;
+
+// @public
+export type PaletteDirectionValue = typeof PaletteDirectionValue[keyof typeof PaletteDirectionValue];
+
+// @public
+export class PaletteRGB extends BasePalette<SwatchRGB> {
+    static from(source: SwatchRGB, options?: Partial<PaletteRGBOptions>): PaletteRGB;
+}
+
+// @public
+export interface PaletteRGBOptions {
+    preserveSource: boolean;
+    stepContrast: number;
+    stepContrastRamp: number;
+}
+
+// @public
+export interface RelativeLuminance {
+    readonly relativeLuminance: number;
+}
+
+// @public
+export function resolvePaletteDirection(direction: PaletteDirection): PaletteDirectionValue;
+
+// @public
+export const StandardFontWeight: {
+    readonly Thin: 100;
+    readonly ExtraLight: 200;
+    readonly Light: 300;
+    readonly Normal: 400;
+    readonly Medium: 500;
+    readonly SemiBold: 600;
+    readonly Bold: 700;
+    readonly ExtraBold: 800;
+    readonly Black: 900;
+};
+
+// @public (undocumented)
+export const strokeWidth: CSSDesignToken<number>;
+
+// @public
+export interface Swatch extends RelativeLuminance {
+    contrast(target: RelativeLuminance): number;
+    toColorString(): string;
+}
+
+// @public
+export class SwatchRGB implements Swatch {
+    constructor(red: number, green: number, blue: number);
+    readonly b: number;
+    contrast: any;
+    createCSS: () => string;
+    static from(obj: {
+        r: number;
+        g: number;
+        b: number;
+    }): SwatchRGB;
+    readonly g: number;
+    readonly r: number;
+    readonly relativeLuminance: number;
+    toColorString(): string;
+}
+
+// @public (undocumented)
+export const typeRampBase: CSSDirective;
+
+// @public (undocumented)
+export const typeRampBaseFontSize: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampBaseFontVariations: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampBaseLineHeight: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampMinus1: CSSDirective;
+
+// @public (undocumented)
+export const typeRampMinus1FontSize: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampMinus1FontVariations: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampMinus1LineHeight: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampMinus2: CSSDirective;
+
+// @public (undocumented)
+export const typeRampMinus2FontSize: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampMinus2FontVariations: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampMinus2LineHeight: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus1: CSSDirective;
+
+// @public (undocumented)
+export const typeRampPlus1FontSize: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus1FontVariations: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus1LineHeight: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus2: CSSDirective;
+
+// @public (undocumented)
+export const typeRampPlus2FontSize: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus2FontVariations: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus2LineHeight: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus3: CSSDirective;
+
+// @public (undocumented)
+export const typeRampPlus3FontSize: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus3FontVariations: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus3LineHeight: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus4: CSSDirective;
+
+// @public (undocumented)
+export const typeRampPlus4FontSize: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus4FontVariations: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus4LineHeight: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus5: CSSDirective;
+
+// @public (undocumented)
+export const typeRampPlus5FontSize: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus5FontVariations: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus5LineHeight: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus6: CSSDirective;
+
+// @public (undocumented)
+export const typeRampPlus6FontSize: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus6FontVariations: CSSDesignToken<string>;
+
+// @public (undocumented)
+export const typeRampPlus6LineHeight: CSSDesignToken<string>;
+
+// @internal
+export const _white: SwatchRGB;
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/utilities/adaptive-ui/package.json b/packages/utilities/adaptive-ui/package.json
new file mode 100644
index 00000000000..27700c61237
--- /dev/null
+++ b/packages/utilities/adaptive-ui/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "@microsoft/adaptive-ui",
+  "version": "1.0.0-alpha",
+  "description": "A collection of design utilities supporting basic styling and Adaptive UI",
+  "type": "module",
+  "main": "dist/esm/index.js",
+  "types": "dist/adaptive-ui.d.ts",
+  "unpkg": "dist/esm/index.js",
+  "exports": {
+    "." : {
+      "types": "./dist/adaptive-ui.d.ts",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/microsoft/fast.git",
+    "directory": "packages/utilities/adaptive-ui"
+  },
+  "author": {
+    "name": "Microsoft",
+    "url": "https://discord.gg/FcSNfg4"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/microsoft/fast/issues/new/choose"
+  },
+  "homepage": "https://fast.design",
+  "scripts": {
+    "build": "tsc -p ./tsconfig.build.json && yarn doc",
+    "build:tests": "tsc -p ./tsconfig.test.json",
+    "clean:dist": "node ../../../build/clean.js dist",
+    "doc": "api-extractor run --local",
+    "doc:ci": "api-extractor run",
+    "prepare": "yarn clean:dist && yarn build",
+    "prettier": "prettier --config ../../../.prettierrc --write \"**/*.ts\"",
+    "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different",
+    "test": "yarn build:tests && yarn eslint && yarn unit-tests && yarn doc",
+    "eslint": "eslint . --ext .ts",
+    "eslint:fix": "eslint . --ext .ts --fix",
+    "unit-tests": "mocha",
+    "unit-tests:watch": "mocha --watch"
+  },
+  "dependencies": {
+    "@microsoft/fast-colors": "^5.3.0",
+    "@microsoft/fast-foundation": "^2.46.2"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "7.23.1",
+    "@microsoft/eslint-config-fast-dna": "^2.1.0",
+    "@types/chai": "^4.2.11",
+    "@types/mocha": "^7.0.2",
+    "chai": "^4.2.0",
+    "eslint-config-prettier": "^6.10.1",
+    "mocha": "^7.1.2",
+    "prettier": "2.0.2",
+    "typescript": "4.7.0-beta"
+  }
+}
diff --git a/packages/utilities/adaptive-ui/src/color/README.md b/packages/utilities/adaptive-ui/src/color/README.md
new file mode 100644
index 00000000000..e2c5b5bc8d6
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/README.md
@@ -0,0 +1,27 @@
+# Adaptive UI Color Recipes
+
+Color recipes are algorithmic patterns that produce individual or sets of colors from a variety of inputs. Components can apply these recipes to achieve expressive theming options while maintaining color accessability targets.
+
+## Swatch
+A Swatch is a representation of a color that has a `relativeLuminance` value and a method to convert the swatch to a color string. It is used by recipes to determine which colors to use for UI.
+
+### SwatchRGB
+A concrete implementation of `Swatch`, it is a swatch with red, green, and blue 64bit color channels.
+
+**Example: Creating a SwatchRGB**
+```ts
+import { SwatchRGB } from "@microsoft/adaptive-ui";
+
+const red = new SwatchRGB(1, 0, 0);
+```
+
+## Palette
+A palette is a collection `Swatch` instances, ordered by relative luminance, and provides mechanisms to safely retrieve swatches by index and by target contrast ratios. It also contains a `source` color, which is the color from which the palette is derived.
+
+### PaletteRGB
+An implementation of `Palette` of `SwatchRGB` instances. 
+
+```ts
+// Create a PaletteRGB from a SwatchRGB 
+const redPalette = PaletteRGB.from(red):
+```
diff --git a/packages/utilities/adaptive-ui/src/color/index.ts b/packages/utilities/adaptive-ui/src/color/index.ts
new file mode 100644
index 00000000000..a85c7d7976b
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/index.ts
@@ -0,0 +1,6 @@
+export * from "./recipes/index.js";
+export * from "./utilities/index.js";
+export * from "./palette-rgb.js";
+export * from "./palette.js";
+export * from "./recipe.js";
+export * from "./swatch.js";
diff --git a/packages/utilities/adaptive-ui/src/color/palette-rgb.spec.ts b/packages/utilities/adaptive-ui/src/color/palette-rgb.spec.ts
new file mode 100644
index 00000000000..9432d590f4a
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/palette-rgb.spec.ts
@@ -0,0 +1,15 @@
+import chai from "chai";
+import { PaletteRGB } from "./palette-rgb.js";
+import { SwatchRGB } from "./swatch.js";
+
+const { expect } = chai;
+
+const test: SwatchRGB = new SwatchRGB(0, 0, 0);
+
+describe("PaletteRGB.from", () => {
+    it("should create a palette from the provided swatch if it matches a SwatchRGB implementation", () => {
+        const palette = PaletteRGB.from(test);
+
+        expect(palette.source === test).to.be.true;
+    });
+});
diff --git a/packages/utilities/adaptive-ui/src/color/palette-rgb.ts b/packages/utilities/adaptive-ui/src/color/palette-rgb.ts
new file mode 100644
index 00000000000..7d4e449550d
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/palette-rgb.ts
@@ -0,0 +1,299 @@
+import {
+    ColorHSL,
+    ColorLAB,
+    ColorRGBA64,
+    hslToRGB,
+    interpolateRGB,
+    labToRGB,
+    rgbToHSL,
+    rgbToLAB,
+    roundToPrecisionSmall,
+} from "@microsoft/fast-colors";
+import { BasePalette } from "./palette.js";
+import { SwatchRGB } from "./swatch.js";
+import { contrast } from "./utilities/relative-luminance.js";
+
+/**
+ * A utility Palette that generates many Swatches used for selection in the actual Palette.
+ * The algorithm uses the LAB color space and keeps the saturation from the source color throughout.
+ */
+class HighResolutionPaletteRGB extends BasePalette<SwatchRGB> {
+    /**
+     * Bump the saturation if it falls below the reference color saturation.
+     *
+     * @param reference - Color with target saturation
+     * @param color - Color to check and bump if below target saturation
+     * @returns Original or adjusted color
+     */
+    private static saturationBump(
+        reference: ColorRGBA64,
+        color: ColorRGBA64
+    ): ColorRGBA64 {
+        const hslReference = rgbToHSL(reference);
+        const saturationTarget = hslReference.s;
+        const hslColor = rgbToHSL(color);
+        if (hslColor.s < saturationTarget) {
+            const hslNew = new ColorHSL(hslColor.h, saturationTarget, hslColor.l);
+            return hslToRGB(hslNew);
+        }
+        return color;
+    }
+
+    /**
+     * Scales input from 0 to 100 to 0 to 0.5.
+     *
+     * @param l - Input number, 0 to 100
+     * @returns Output number, 0 to 0.5
+     */
+    private static ramp(l: number) {
+        const inputval = l / 100;
+        if (inputval > 0.5) return (inputval - 0.5) / 0.5; //from 0.500001in = 0.00000001out to 1.0in = 1.0out
+        return 2 * inputval; //from 0in = 0out to 0.5in = 1.0out
+    }
+
+    /**
+     * Creates a new high-resolution Palette.
+     *
+     * @param source - The source color
+     * @returns The Palette based on the `source` color
+     */
+    static from(source: SwatchRGB): HighResolutionPaletteRGB {
+        const swatches: SwatchRGB[] = [];
+
+        const labSource = rgbToLAB(ColorRGBA64.fromObject(source)!.roundToPrecision(4));
+        const lab0 = labToRGB(new ColorLAB(0, labSource.a, labSource.b))
+            .clamp()
+            .roundToPrecision(4);
+        const lab50 = labToRGB(new ColorLAB(50, labSource.a, labSource.b))
+            .clamp()
+            .roundToPrecision(4);
+        const lab100 = labToRGB(new ColorLAB(100, labSource.a, labSource.b))
+            .clamp()
+            .roundToPrecision(4);
+        const rgbMin = new ColorRGBA64(0, 0, 0);
+        const rgbMax = new ColorRGBA64(1, 1, 1);
+
+        const lAbove = lab100.equalValue(rgbMax) ? 0 : 14;
+        const lBelow = lab0.equalValue(rgbMin) ? 0 : 14;
+
+        // 257 levels max, depending on whether lab0 or lab100 are black or white respectively.
+        for (let l = 100 + lAbove; l >= 0 - lBelow; l -= 0.5) {
+            let rgb: ColorRGBA64;
+
+            if (l < 0) {
+                // For L less than 0, scale from black to L=0
+                const percentFromRgbMinToLab0 = l / lBelow + 1;
+                rgb = interpolateRGB(percentFromRgbMinToLab0, rgbMin, lab0);
+            } else if (l <= 50) {
+                // For L less than 50, we scale from L=0 to the base color
+                rgb = interpolateRGB(HighResolutionPaletteRGB.ramp(l), lab0, lab50);
+            } else if (l <= 100) {
+                // For L less than 100, scale from the base color to L=100
+                rgb = interpolateRGB(HighResolutionPaletteRGB.ramp(l), lab50, lab100);
+            } else {
+                // For L greater than 100, scale from L=100 to white
+                const percentFromLab100ToRgbMax = (l - 100.0) / lAbove;
+                rgb = interpolateRGB(percentFromLab100ToRgbMax, lab100, rgbMax);
+            }
+
+            rgb = HighResolutionPaletteRGB.saturationBump(lab50, rgb).roundToPrecision(4);
+
+            swatches.push(SwatchRGB.from(rgb));
+        }
+
+        return new HighResolutionPaletteRGB(source, swatches);
+    }
+}
+
+/**
+ * Options to tailor the generation of PaletteRGB.
+ *
+ * @public
+ */
+export interface PaletteRGBOptions {
+    /**
+     * The minimum amount of contrast between steps in the palette. Default 1.05.
+     * Recommended increments by hundredths.
+     */
+    stepContrast: number;
+
+    /**
+     * Multiplier for increasing step contrast as the swatches darken. Default 0.
+     * Recommended increments by hundredths.
+     */
+    stepContrastRamp: number;
+
+    /**
+     * Whether to keep the exact source color in the target palette. Default false.
+     * Only recommended when the exact color is required and used in stateful interaction recipes like hover.
+     * Note that custom recipes can still access the source color even if it's not in the ramp,
+     * but turning this on will potentially increase the contrast between steps toward the ends of the palette.
+     */
+    preserveSource: boolean;
+}
+
+const defaultPaletteRGBOptions: PaletteRGBOptions = {
+    stepContrast: 1.05,
+    stepContrastRamp: 0,
+    preserveSource: false,
+};
+
+/**
+ * An implementation of a {@link Palette} that has a consistent minimum contrast value between Swatches.
+ * This is useful for UI as it means the perception of the difference between colors the same distance
+ * apart in the Palette will be consistent whether the colors are light yellow or dark red.
+ * It generates its curve using the LAB color space and maintains the saturation of the source color throughout.
+ *
+ * @public
+ */
+export class PaletteRGB extends BasePalette<SwatchRGB> {
+    /**
+     * Adjust one end of the contrast-based palette so it doesn't abruptly fall to black (or white).
+     *
+     * @param swatchContrast - Function to get the target contrast for the next swatch
+     * @param referencePalette - The high resolution palette
+     * @param targetPalette - The contrast-based palette to adjust
+     * @param direction - The end to adjust
+     */
+    private static adjustEnd(
+        swatchContrast: (swatch: SwatchRGB) => number,
+        referencePalette: HighResolutionPaletteRGB,
+        targetPalette: SwatchRGB[],
+        direction: 1 | -1
+    ) {
+        // Careful with the use of referencePalette as only the refSwatches is reversed.
+        const refSwatches =
+            direction === -1
+                ? referencePalette.swatches
+                : referencePalette.reversedSwatches;
+        const refIndex = (swatch: SwatchRGB) => {
+            const index = referencePalette.closestIndexOf(swatch);
+            return direction === 1 ? referencePalette.lastIndex - index : index;
+        };
+
+        // Only operates on the 'end' end of the array, so flip if we're adjusting the 'beginning'
+        if (direction === 1) {
+            targetPalette.reverse();
+        }
+
+        const targetContrast = swatchContrast(targetPalette[targetPalette.length - 2]);
+        const actualContrast = roundToPrecisionSmall(
+            contrast(
+                targetPalette[targetPalette.length - 1],
+                targetPalette[targetPalette.length - 2]
+            ),
+            2
+        );
+        if (actualContrast < targetContrast) {
+            // Remove last swatch if not sufficient contrast
+            targetPalette.pop();
+
+            // Distribute to the last swatch
+            const safeSecondSwatch = referencePalette.colorContrast(
+                refSwatches[referencePalette.lastIndex],
+                targetContrast,
+                undefined,
+                direction
+            );
+            const safeSecondRefIndex = refIndex(safeSecondSwatch);
+            const targetSwatchCurrentRefIndex = refIndex(
+                targetPalette[targetPalette.length - 2]
+            );
+            const swatchesToSpace = safeSecondRefIndex - targetSwatchCurrentRefIndex;
+            let space = 1;
+            for (
+                let i = targetPalette.length - swatchesToSpace - 1;
+                i < targetPalette.length;
+                i++
+            ) {
+                const currentRefIndex = refIndex(targetPalette[i]);
+                const nextRefIndex =
+                    i === targetPalette.length - 1
+                        ? referencePalette.lastIndex
+                        : currentRefIndex + space;
+                targetPalette[i] = refSwatches[nextRefIndex];
+                space++;
+            }
+        }
+
+        if (direction === 1) {
+            targetPalette.reverse();
+        }
+    }
+
+    /**
+     * Generate a Palette with consistent minimum contrast between Swatches.
+     *
+     * @param source - The source color
+     * @param options - Palette generation options
+     * @returns A Palette meeting the requested contrast between Swatches.
+     */
+    private static createColorPaletteByContrast(
+        source: SwatchRGB,
+        options: PaletteRGBOptions
+    ): SwatchRGB[] {
+        const referencePalette = HighResolutionPaletteRGB.from(source);
+
+        // Ramp function to increase contrast as the swatches get darker
+        const nextContrast = (swatch: SwatchRGB) => {
+            const c =
+                options.stepContrast +
+                options.stepContrast *
+                    (1 - swatch.relativeLuminance) *
+                    options.stepContrastRamp;
+            return roundToPrecisionSmall(c, 2);
+        };
+
+        const swatches: SwatchRGB[] = [];
+
+        // Start with the source color or the light end color
+        let ref = options.preserveSource ? source : referencePalette.swatches[0];
+        swatches.push(ref);
+
+        // Add swatches with contrast toward dark
+        do {
+            const targetContrast = nextContrast(ref);
+            ref = referencePalette.colorContrast(ref, targetContrast, undefined, 1);
+            swatches.push(ref);
+        } while (ref.relativeLuminance > 0);
+
+        // Add swatches with contrast toward light
+        if (options.preserveSource) {
+            ref = source;
+            do {
+                // This is off from the dark direction because `ref` here is the darker swatch, probably subtle
+                const targetContrast = nextContrast(ref);
+                ref = referencePalette.colorContrast(ref, targetContrast, undefined, -1);
+                swatches.unshift(ref);
+            } while (ref.relativeLuminance < 1);
+        }
+
+        // Validate dark end
+        this.adjustEnd(nextContrast, referencePalette, swatches, -1);
+
+        // Validate light end
+        if (options.preserveSource) {
+            this.adjustEnd(nextContrast, referencePalette, swatches, 1);
+        }
+
+        return swatches;
+    }
+
+    /**
+     * Create a color Palette from a provided Swatch.
+     *
+     * @param source - The source Swatch to create a Palette from
+     * @returns The Palette
+     */
+    static from(source: SwatchRGB, options?: Partial<PaletteRGBOptions>): PaletteRGB {
+        const opts =
+            options === void 0 || null
+                ? defaultPaletteRGBOptions
+                : { ...defaultPaletteRGBOptions, ...options };
+
+        return new PaletteRGB(
+            source,
+            Object.freeze(PaletteRGB.createColorPaletteByContrast(source, opts))
+        );
+    }
+}
diff --git a/packages/utilities/adaptive-ui/src/color/palette.ts b/packages/utilities/adaptive-ui/src/color/palette.ts
new file mode 100644
index 00000000000..7912649cee4
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/palette.ts
@@ -0,0 +1,238 @@
+import { clamp } from "@microsoft/fast-colors";
+import { Swatch } from "./swatch.js";
+import { binarySearch } from "./utilities/binary-search.js";
+import { directionByIsDark } from "./utilities/direction-by-is-dark.js";
+import { contrast, RelativeLuminance } from "./utilities/relative-luminance.js";
+
+/**
+ * Directional values for navigating {@link Swatch}es in {@link Palette}.
+ *
+ * @public
+ */
+export const PaletteDirectionValue = Object.freeze({
+    /**
+     * Move darker, or up the Palette.
+     */
+    darker: 1,
+
+    /**
+     * Move lighter, or down the Palette.
+     */
+    lighter: -1,
+} as const);
+
+/**
+ * Directional values for navigating {@link Swatch}es in {@link Palette}.
+ *
+ * @public
+ */
+export type PaletteDirectionValue = typeof PaletteDirectionValue[keyof typeof PaletteDirectionValue];
+
+// I know we like to avoid enums so I tried to make it an object, but I'm not sure how to make this work with the type and function below.
+// export const PaletteDirectionValue = {
+//     darker: 1,
+//     lighter: -1
+// } as const;
+
+/**
+ * Convenience type to allow a fixed {@link (PaletteDirectionValue:variable)} or a function that resolves to one.
+ *
+ * @public
+ */
+export type PaletteDirection = PaletteDirectionValue | (() => PaletteDirectionValue);
+
+/**
+ * Gets a fixed {@link (PaletteDirectionValue:variable)} from {@link PaletteDirection} which may be a function that needs to be resolved.
+ *
+ * @param direction - A fixed palette direction value or a function that resolves to one
+ * @returns A fixed palette direction value
+ *
+ * @public
+ */
+export function resolvePaletteDirection(
+    direction: PaletteDirection
+): PaletteDirectionValue {
+    if (typeof direction === "function") {
+        return direction();
+    } else {
+        return direction;
+    }
+}
+
+/**
+ * A collection of {@link Swatch}es that form a luminance gradient from light (index 0) to dark.
+ *
+ * @public
+ */
+export interface Palette<T extends Swatch = Swatch> {
+    /**
+     * The Swatch used to create the full palette.
+     */
+    readonly source: T;
+
+    /**
+     * The array of all Swatches from light to dark.
+     */
+    readonly swatches: ReadonlyArray<T>;
+
+    /**
+     * Returns a Swatch from the Palette that most closely meets
+     * the `minContrast` ratio for to the `reference`.
+     *
+     * @param reference - The relative luminance of the reference
+     * @param minContrast - The minimum amount of contrast from the `reference`
+     * @param initialIndex - Optional starting point for the search
+     * @param direction - Optional control for the direction of the search
+     * @returns The Swatch that meets the provided contrast
+     */
+    colorContrast(
+        reference: RelativeLuminance,
+        minContrast: number,
+        initialIndex?: number,
+        direction?: PaletteDirection
+    ): T;
+
+    /**
+     * Returns a Swatch from the Palette that's the specified position and direction away from the `reference`.
+     *
+     * @param reference - The relative luminance of the reference
+     * @param delta - The number of Swatches away from `reference`
+     * @param direction - The direction to go from `reference`, 1 goes darker, -1 goes lighter
+     */
+    delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T;
+
+    /**
+     * Returns the index of the Palette that most closely matches
+     * the provided relative luminance.
+     *
+     * @param reference - The relative luminance of the reference
+     * @returns The index
+     */
+    closestIndexOf(reference: RelativeLuminance): number;
+
+    /**
+     * Gets a Swatch by index. Index is clamped to the limits
+     * of the Palette so a Swatch will always be returned.
+     *
+     * @param index - The index
+     * @returns The Swatch
+     */
+    get(index: number): T;
+}
+
+/**
+ * A base {@link Palette} with a common implementation of the interface. Use PaletteRGB for an implementation
+ * of a palette generation algorithm that is ready to be used directly, or extend this class to generate custom Swatches.
+ *
+ * @public
+ */
+export class BasePalette<T extends Swatch> implements Palette<T> {
+    /**
+     * {@inheritdoc Palette.source}
+     */
+    readonly source: T;
+    /**
+     * {@inheritdoc Palette.swatches}
+     */
+    readonly swatches: ReadonlyArray<T>;
+
+    /**
+     * An index pointer to the end of the palette.
+     */
+    readonly lastIndex: number;
+
+    /**
+     * A copy of the `Swatch`es in reverse order, used for optimized searching.
+     */
+    readonly reversedSwatches: ReadonlyArray<T>;
+
+    /**
+     * Cache from `relativeLuminance` to `Swatch` index in the `Palette`.
+     */
+    readonly closestIndexCache = new Map<number, number>();
+
+    /**
+     * Creates a new Palette.
+     *
+     * @param source - The source color for the Palette
+     * @param swatches - All Swatches in the Palette
+     */
+    constructor(source: T, swatches: ReadonlyArray<T>) {
+        this.source = source;
+        this.swatches = swatches;
+
+        this.reversedSwatches = Object.freeze([...this.swatches].reverse());
+        this.lastIndex = this.swatches.length - 1;
+    }
+
+    /**
+     * {@inheritdoc Palette.colorContrast}
+     */
+    colorContrast(
+        reference: RelativeLuminance,
+        contrastTarget: number,
+        initialSearchIndex?: number,
+        direction: PaletteDirection = directionByIsDark(reference)
+    ): T {
+        if (initialSearchIndex === undefined) {
+            initialSearchIndex = this.closestIndexOf(reference);
+        }
+
+        let source: ReadonlyArray<T> = this.swatches;
+        const endSearchIndex = this.lastIndex;
+        let startSearchIndex = initialSearchIndex;
+
+        const condition = (value: T) => contrast(reference, value) >= contrastTarget;
+
+        if (direction === PaletteDirectionValue.lighter) {
+            source = this.reversedSwatches;
+            startSearchIndex = endSearchIndex - startSearchIndex;
+        }
+
+        return binarySearch(source, condition, startSearchIndex, endSearchIndex);
+    }
+
+    /**
+     * {@inheritdoc Palette.delta}
+     */
+    delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T {
+        const dir = resolvePaletteDirection(direction);
+        return this.get(this.closestIndexOf(reference) + dir * delta);
+    }
+
+    /**
+     * {@inheritdoc Palette.closestIndexOf}
+     */
+    closestIndexOf(reference: RelativeLuminance): number {
+        if (this.closestIndexCache.has(reference.relativeLuminance)) {
+            /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+            return this.closestIndexCache.get(reference.relativeLuminance)!;
+        }
+
+        let index = this.swatches.indexOf(reference as T);
+
+        if (index !== -1) {
+            this.closestIndexCache.set(reference.relativeLuminance, index);
+            return index;
+        }
+
+        const closest = this.swatches.reduce((previous, next) =>
+            Math.abs(next.relativeLuminance - reference.relativeLuminance) <
+            Math.abs(previous.relativeLuminance - reference.relativeLuminance)
+                ? next
+                : previous
+        );
+
+        index = this.swatches.indexOf(closest);
+        this.closestIndexCache.set(reference.relativeLuminance, index);
+
+        return index;
+    }
+
+    /**
+     * {@inheritdoc Palette.get}
+     */
+    get(index: number): T {
+        return this.swatches[index] || this.swatches[clamp(index, 0, this.lastIndex)];
+    }
+}
diff --git a/packages/utilities/adaptive-ui/src/color/recipe.ts b/packages/utilities/adaptive-ui/src/color/recipe.ts
new file mode 100644
index 00000000000..9c7b88dbd1d
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipe.ts
@@ -0,0 +1,58 @@
+import { Swatch } from "./swatch.js";
+
+/**
+ * A recipe that evaluates a single color value.
+ *
+ * @public
+ */
+export interface ColorRecipe {
+    /**
+     * Evaluate a single color value.
+     *
+     * @param element - The element for which to evaluate the color recipe
+     * @param reference - The reference color, implementation defaults to `fillColor`, but sometimes overridden for nested color recipes
+     */
+    evaluate(element: HTMLElement, reference?: Swatch): Swatch;
+}
+
+/**
+ * A recipe that evaluates a color value for rest, hover, active, and focus states.
+ *
+ * @public
+ */
+export interface InteractiveColorRecipe {
+    /**
+     * Evaluate an interactive color set.
+     *
+     * @param element - The element for which to evaluate the color recipe
+     * @param reference - The reference color, implementation defaults to `fillColor`, but sometimes overridden for nested color recipes
+     */
+    evaluate(element: HTMLElement, reference?: Swatch): InteractiveSwatchSet;
+}
+
+/**
+ * A set of {@link Swatch}es to use for an interactive control's states.
+ *
+ * @public
+ */
+export interface InteractiveSwatchSet {
+    /**
+     * The Swatch to apply to the rest state
+     */
+    rest: Swatch;
+
+    /**
+     * The Swatch to apply to the hover state
+     */
+    hover: Swatch;
+
+    /**
+     * The Swatch to apply to the active state
+     */
+    active: Swatch;
+
+    /**
+     * The Swatch to apply to the focus state
+     */
+    focus: Swatch;
+}
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast-set.ts b/packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast-set.ts
new file mode 100644
index 00000000000..fb675fc7d2f
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast-set.ts
@@ -0,0 +1,49 @@
+import { Swatch } from "../swatch.js";
+import { blackOrWhiteByContrast } from "./black-or-white-by-contrast.js";
+
+/**
+ * Gets an interactive set of black or white Swatches based on the reference color for each state and minimum contrast.
+ *
+ * This is commonly used for something like foreground color on an accent-filled Button.
+ *
+ * This algorithm ignores the contrast check for active state if rest and hover produce the same color, and uses that
+ * color directly. This is because many times something like a Button has slight luminance variation between rest, hover,
+ * and active states, but generally flipping the text color produces a flash and is more unexpected.
+ *
+ * @param restReference - The rest state reference color
+ * @param hoverReference - The hover state reference color
+ * @param activeReference - The active state reference color
+ * @param focusReference - The focus state reference color
+ * @param minContrast - The minimum contrast required for black or white from each reference color
+ * @param defaultBlack - True to default to black if both black or white meet contrast
+ * @returns The interactive set of black or white Swatches.
+ *
+ * @public
+ */
+export function blackOrWhiteByContrastSet(
+    restReference: Swatch,
+    hoverReference: Swatch,
+    activeReference: Swatch,
+    focusReference: Swatch,
+    minContrast: number,
+    defaultBlack: boolean
+) {
+    const defaultRule: (reference: Swatch) => Swatch = reference =>
+        blackOrWhiteByContrast(reference, minContrast, defaultBlack);
+
+    const restForeground = defaultRule(restReference);
+    const hoverForeground = defaultRule(hoverReference);
+    // Active doe not have contrast requirements, so if rest and hover use the same color, use that for active even if it would not have passed the contrast check.
+    const activeForeground =
+        restForeground.relativeLuminance === hoverForeground.relativeLuminance
+            ? restForeground
+            : defaultRule(activeReference);
+    const focusForeground = defaultRule(focusReference);
+
+    return {
+        rest: restForeground,
+        hover: hoverForeground,
+        active: activeForeground,
+        focus: focusForeground,
+    };
+}
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast.spec.ts b/packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast.spec.ts
new file mode 100644
index 00000000000..b08f80465f6
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast.spec.ts
@@ -0,0 +1,21 @@
+import chai from "chai";
+import { SwatchRGB } from "../swatch.js";
+import { _black, _white } from "../utilities/color-constants.js";
+import { blackOrWhiteByContrast } from "./black-or-white-by-contrast.js";
+
+const { expect } = chai;
+
+describe("blackOrWhiteByContrast", (): void => {
+    it("should return black when background does not meet contrast ratio", (): void => {
+        const small = blackOrWhiteByContrast(_white, 4.5, false) as SwatchRGB;
+        const large = blackOrWhiteByContrast(_white, 3, false) as SwatchRGB;
+
+        expect(small.r).to.equal(_black.r);
+        expect(small.g).to.equal(_black.g);
+        expect(small.b).to.equal(_black.b);
+
+        expect(large.r).to.equal(_black.r);
+        expect(large.g).to.equal(_black.g);
+        expect(large.b).to.equal(_black.b);
+    });
+});
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast.ts b/packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast.ts
new file mode 100644
index 00000000000..b652501ef3f
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/black-or-white-by-contrast.ts
@@ -0,0 +1,22 @@
+import { Swatch } from "../swatch.js";
+import { _black, _white } from "../utilities/color-constants.js";
+
+/**
+ * Gets a black or white Swatch based on the reference color and minimum contrast.
+ *
+ * @param reference - The reference color
+ * @param minContrast - The minimum contrast required for black or white from `reference`
+ * @param defaultBlack - True to default to black if both black and white meet contrast
+ * @returns A black or white Swatch
+ *
+ * @public
+ */
+export function blackOrWhiteByContrast(
+    reference: Swatch,
+    minContrast: number,
+    defaultBlack: boolean
+): Swatch {
+    const defaultColor = defaultBlack ? _black : _white;
+    const otherColor = defaultBlack ? _white : _black;
+    return reference.contrast(defaultColor) >= minContrast ? defaultColor : otherColor;
+}
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/contrast-and-delta-swatch-set.ts b/packages/utilities/adaptive-ui/src/color/recipes/contrast-and-delta-swatch-set.ts
new file mode 100644
index 00000000000..4facac39a60
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/contrast-and-delta-swatch-set.ts
@@ -0,0 +1,71 @@
+import {
+    Palette,
+    PaletteDirection,
+    PaletteDirectionValue,
+    resolvePaletteDirection,
+} from "../palette.js";
+import { InteractiveSwatchSet } from "../recipe.js";
+import { Swatch } from "../swatch.js";
+import { directionByIsDark } from "../utilities/direction-by-is-dark.js";
+
+/**
+ * Gets an interactive set of {@link Swatch}es using contrast from the reference color, then deltas for each state.
+ *
+ * Since this is based on contrast it tries to do the right thing for accessibility. Ideally the `restDelta`
+ * and `hoverDelta` should be greater than or equal to zero, because that will ensure those colors meet or
+ * exceed the `minContrast`.
+ *
+ * This algorithm will maintain the difference between the rest and hover deltas, but may slide them on the Palette
+ * to maintain accessibility.
+ *
+ * @param palette - The Palette used to find the Swatches
+ * @param reference - The reference color
+ * @param minContrast - The desired minimum contrast from `reference`, which determines the base color
+ * @param restDelta - The rest state offset from the base color
+ * @param hoverDelta - The hover state offset from the base color
+ * @param activeDelta - The active state offset from the base color
+ * @param focusDelta - The focus state offset from the base color
+ * @param direction - The direction the deltas move on the `palette`, defaults to {@link directionByIsDark} based on `reference`
+ * @returns The interactive set of Swatches
+ *
+ * @public
+ */
+export function contrastAndDeltaSwatchSet(
+    palette: Palette,
+    reference: Swatch,
+    minContrast: number,
+    restDelta: number,
+    hoverDelta: number,
+    activeDelta: number,
+    focusDelta: number,
+    direction: PaletteDirection = directionByIsDark(reference)
+): InteractiveSwatchSet {
+    const dir = resolvePaletteDirection(direction);
+
+    const accessibleSwatch = palette.colorContrast(reference, minContrast);
+
+    const accessibleIndex1 = palette.closestIndexOf(accessibleSwatch);
+    const accessibleIndex2 = accessibleIndex1 + dir * Math.abs(restDelta - hoverDelta);
+    const indexOneIsRestState =
+        dir === PaletteDirectionValue.darker
+            ? restDelta < hoverDelta
+            : dir * restDelta > dir * hoverDelta;
+
+    let restIndex: number;
+    let hoverIndex: number;
+
+    if (indexOneIsRestState) {
+        restIndex = accessibleIndex1;
+        hoverIndex = accessibleIndex2;
+    } else {
+        restIndex = accessibleIndex2;
+        hoverIndex = accessibleIndex1;
+    }
+
+    return {
+        rest: palette.get(restIndex),
+        hover: palette.get(hoverIndex),
+        active: palette.get(restIndex + dir * activeDelta),
+        focus: palette.get(restIndex + dir * focusDelta),
+    };
+}
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/contrast-swatch.spec.ts b/packages/utilities/adaptive-ui/src/color/recipes/contrast-swatch.spec.ts
new file mode 100644
index 00000000000..69bb31e48a8
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/contrast-swatch.spec.ts
@@ -0,0 +1,38 @@
+import chai from "chai";
+import { parseColorHexRGB } from "@microsoft/fast-colors";
+import { PaletteRGB } from "../palette-rgb.js";
+import { SwatchRGB } from "../swatch.js";
+import { contrastSwatch } from "./contrast-swatch.js";
+
+const { expect } = chai;
+
+const neutralBase = SwatchRGB.from(parseColorHexRGB("#808080")!);
+const accentBase = SwatchRGB.from(parseColorHexRGB("#80DEEA")!);
+
+describe("contrastSwatch", (): void => {
+    const neutralPalette = PaletteRGB.from(neutralBase);
+    const accentPalette = PaletteRGB.from(accentBase);
+
+    neutralPalette.swatches.concat(accentPalette.swatches).forEach((swatch): void => {
+        it(`${swatch.toColorString()} should resolve a color from the neutral palette`, (): void => {
+            expect(
+                neutralPalette.swatches.indexOf(
+                    contrastSwatch(neutralPalette, swatch, 4.5) as SwatchRGB
+                )
+            ).not.to.equal(-1);
+        });
+    });
+
+    neutralPalette.swatches.concat(accentPalette.swatches).forEach((swatch): void => {
+        it(`${swatch.toColorString()} should always be at least 4.5 : 1 against the background`, (): void => {
+            expect(
+                swatch.contrast(contrastSwatch(neutralPalette, swatch, 4.5))
+                // Because contrastSwatch follows the direction patterns of neutralForeground,
+                // a backgroundColor #777777 is impossible to hit 4.5 against.
+            ).to.be.gte(swatch.toColorString().toUpperCase() === "#777777" ? 4.48 : 4.5);
+            expect(
+                swatch.contrast(contrastSwatch(neutralPalette, swatch, 4.5))
+            ).to.be.lessThan(5);
+        });
+    });
+});
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/contrast-swatch.ts b/packages/utilities/adaptive-ui/src/color/recipes/contrast-swatch.ts
new file mode 100644
index 00000000000..12f2880b2e2
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/contrast-swatch.ts
@@ -0,0 +1,22 @@
+import { Palette, PaletteDirection } from "../palette.js";
+import { Swatch } from "../swatch.js";
+import { directionByIsDark } from "../utilities/direction-by-is-dark.js";
+
+/**
+ * Gets a Swatch meeting the minimum contrast from the reference color.
+ *
+ * @param palette - The Palette used to find the Swatch
+ * @param reference - The reference color
+ * @param minContrast - The desired minimum contrast
+ * @returns The Swatch
+ *
+ * @public
+ */
+export function contrastSwatch(
+    palette: Palette,
+    reference: Swatch,
+    minContrast: number,
+    direction: PaletteDirection = directionByIsDark(reference)
+): Swatch {
+    return palette.colorContrast(reference, minContrast, undefined, direction);
+}
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/delta-swatch-set.ts b/packages/utilities/adaptive-ui/src/color/recipes/delta-swatch-set.ts
new file mode 100644
index 00000000000..c3510268765
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/delta-swatch-set.ts
@@ -0,0 +1,38 @@
+import { Palette, PaletteDirection, resolvePaletteDirection } from "../palette.js";
+import { InteractiveSwatchSet } from "../recipe.js";
+import { Swatch } from "../swatch.js";
+import { directionByIsDark } from "../utilities/direction-by-is-dark.js";
+
+/**
+ * Gets an interactive set of Swatches the specified positions away from the reference color.
+ *
+ * @param palette - The Palette used to find the Swatches
+ * @param reference - The reference color
+ * @param restDelta - The rest state offset from `reference`
+ * @param hoverDelta - The hover state offset from `reference`
+ * @param activeDelta - The active state offset from `reference`
+ * @param focusDelta - The focus state offset from `reference`
+ * @param direction - The direction the deltas move on the `palette`, defaults to {@link directionByIsDark} based on `reference`
+ * @returns The interactive set of Swatches
+ *
+ * @public
+ */
+export function deltaSwatchSet(
+    palette: Palette,
+    reference: Swatch,
+    restDelta: number,
+    hoverDelta: number,
+    activeDelta: number,
+    focusDelta: number,
+    direction: PaletteDirection = directionByIsDark(reference)
+): InteractiveSwatchSet {
+    const referenceIndex = palette.closestIndexOf(reference);
+    const dir = resolvePaletteDirection(direction);
+
+    return {
+        rest: palette.get(referenceIndex + dir * restDelta),
+        hover: palette.get(referenceIndex + dir * hoverDelta),
+        active: palette.get(referenceIndex + dir * activeDelta),
+        focus: palette.get(referenceIndex + dir * focusDelta),
+    };
+}
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/delta-swatch.ts b/packages/utilities/adaptive-ui/src/color/recipes/delta-swatch.ts
new file mode 100644
index 00000000000..b9c5148c04a
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/delta-swatch.ts
@@ -0,0 +1,23 @@
+import { Swatch } from "../swatch.js";
+import { Palette, PaletteDirection } from "../palette.js";
+import { directionByIsDark } from "../utilities/direction-by-is-dark.js";
+
+/**
+ * Color algorithm to get the Swatch a specified position away from the reference color.
+ *
+ * @param palette - The Palette used to find the Swatch
+ * @param reference - The reference color
+ * @param delta - The offset from the `reference`
+ * @param direction - The direction the delta moves on the `palette`, defaults to {@link directionByIsDark} based on `reference`
+ * @returns The Swatch
+ *
+ * @public
+ */
+export function deltaSwatch(
+    palette: Palette,
+    reference: Swatch,
+    delta: number,
+    direction: PaletteDirection = directionByIsDark(reference)
+): Swatch {
+    return palette.delta(reference, delta, direction);
+}
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/ideal-color-delta-swatch-set.spec.ts b/packages/utilities/adaptive-ui/src/color/recipes/ideal-color-delta-swatch-set.spec.ts
new file mode 100644
index 00000000000..a79f601279f
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/ideal-color-delta-swatch-set.spec.ts
@@ -0,0 +1,96 @@
+import chai from "chai";
+import { parseColorHexRGB } from "@microsoft/fast-colors";
+import { PaletteRGB } from "../palette-rgb.js";
+import { SwatchRGB } from "../swatch.js";
+import { _black, _white } from "../utilities/color-constants.js";
+import { idealColorDeltaSwatchSet } from "./ideal-color-delta-swatch-set.js";
+
+const { expect } = chai;
+
+const neutralBase = SwatchRGB.from(parseColorHexRGB("#808080")!);
+const accentBase = SwatchRGB.from(parseColorHexRGB("#80DEEA")!);
+
+describe("idealColorDeltaSwatchSet", (): void => {
+    const neutralPalette = PaletteRGB.from(neutralBase);
+    const accentPalette = PaletteRGB.from(accentBase);
+
+    it("should increase contrast on hover state and decrease contrast on active state in either mode", (): void => {
+        const lightModeColors = idealColorDeltaSwatchSet(
+            accentPalette,
+            _white,
+            4.5,
+            accentPalette.source,
+            0,
+            6,
+            -4,
+            0
+        );
+        const darkModeColors = idealColorDeltaSwatchSet(
+            accentPalette,
+            _black,
+            4.5,
+            accentPalette.source,
+            0,
+            6,
+            -4,
+            0
+        );
+
+        expect(lightModeColors.hover.contrast(_white)).to.be.greaterThan(
+            lightModeColors.rest.contrast(_white)
+        );
+        expect(darkModeColors.hover.contrast(_black)).to.be.greaterThan(
+            darkModeColors.rest.contrast(_black)
+        );
+    });
+
+    it("should have accessible rest and hover colors against the background color", (): void => {
+        const accentColors = [
+            SwatchRGB.from(parseColorHexRGB("#0078D4")!),
+            SwatchRGB.from(parseColorHexRGB("#107C10")!),
+            SwatchRGB.from(parseColorHexRGB("#5C2D91")!),
+            SwatchRGB.from(parseColorHexRGB("#D83B01")!),
+            SwatchRGB.from(parseColorHexRGB("#F2C812")!),
+        ];
+
+        accentColors.forEach(
+            /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+            (accent): void => {
+                const accentPalette = PaletteRGB.from(accent);
+
+                neutralPalette.swatches.forEach((swatch): void => {
+                    const smallColors = idealColorDeltaSwatchSet(
+                        accentPalette,
+                        swatch,
+                        4.5,
+                        accentPalette.source,
+                        0,
+                        6,
+                        -4,
+                        0
+                    );
+                    const largeColors = idealColorDeltaSwatchSet(
+                        accentPalette,
+                        swatch,
+                        3,
+                        accentPalette.source,
+                        0,
+                        6,
+                        -4,
+                        0
+                    );
+                    expect(
+                        swatch.contrast(smallColors.rest)
+                        // There are a few states that are impossible to meet contrast on
+                    ).to.be.gte(4.47);
+                    expect(
+                        swatch.contrast(smallColors.hover)
+                        // There are a few states that are impossible to meet contrast on
+                    ).to.be.gte(3.7);
+                    expect(swatch.contrast(largeColors.rest)).to.be.gte(3);
+                    expect(swatch.contrast(largeColors.hover)).to.be.gte(3);
+                });
+            }
+        );
+    });
+});
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/ideal-color-delta-swatch-set.ts b/packages/utilities/adaptive-ui/src/color/recipes/ideal-color-delta-swatch-set.ts
new file mode 100644
index 00000000000..e2b84189b26
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/ideal-color-delta-swatch-set.ts
@@ -0,0 +1,88 @@
+import {
+    Palette,
+    PaletteDirection,
+    PaletteDirectionValue,
+    resolvePaletteDirection,
+} from "../palette.js";
+import { InteractiveSwatchSet } from "../recipe.js";
+import { Swatch } from "../swatch.js";
+import { directionByIsDark } from "../utilities/direction-by-is-dark.js";
+
+/**
+ * Gets an interactive set of {@link Swatch}es using contrast from the reference color. If the ideal color meets contrast it
+ * is used for the base color, if not it's adjusted until contrast is met. Then deltas from that color are used for each state.
+ *
+ * This algorithm is similar to {@link contrastAndDeltaSwatchSet}, with the addition of `idealColor`. This is often preferable
+ * for brand colors, like for an accent-filled Button.
+ *
+ * Since this is based on contrast it tries to do the right thing for accessibility. Ideally the `restDelta`
+ * and `hoverDelta` should be greater than or equal to zero, because that will ensure those colors meet or
+ * exceed the `minContrast`.
+ *
+ * This algorithm will maintain the difference between the rest and hover deltas, but may slide them on the Palette
+ * to maintain accessibility.
+ *
+ * @param palette - The Palette used to find the Swatches
+ * @param reference - The reference color
+ * @param idealColor - The color to use as the base color if it meets `minContrast` from `reference`
+ * @param minContrast - The desired minimum contrast from `reference`, which determines the base color
+ * @param restDelta - The rest state offset from the base color
+ * @param hoverDelta - The hover state offset from the base color
+ * @param activeDelta - The active state offset from the base color
+ * @param focusDelta - The focus state offset from the base color
+ * @param direction - The direction the deltas move on the `palette`, defaults to {@link directionByIsDark} based on `reference`
+ * @returns The interactive set of Swatches
+ *
+ * @public
+ */
+export function idealColorDeltaSwatchSet(
+    palette: Palette,
+    reference: Swatch,
+    minContrast: number,
+    idealColor: Swatch,
+    restDelta: number,
+    hoverDelta: number,
+    activeDelta: number,
+    focusDelta: number,
+    direction: PaletteDirection = directionByIsDark(reference)
+): InteractiveSwatchSet {
+    const dir = resolvePaletteDirection(direction);
+
+    const idealIndex = palette.closestIndexOf(idealColor);
+    const startIndex =
+        idealIndex +
+        (dir === PaletteDirectionValue.darker
+            ? Math.min(restDelta, hoverDelta)
+            : Math.max(dir * restDelta, dir * hoverDelta));
+    const accessibleSwatch = palette.colorContrast(
+        reference,
+        minContrast,
+        startIndex,
+        direction
+    );
+
+    const accessibleIndex1 = palette.closestIndexOf(accessibleSwatch);
+    const accessibleIndex2 = accessibleIndex1 + dir * Math.abs(restDelta - hoverDelta);
+    const indexOneIsRestState =
+        dir === PaletteDirectionValue.darker
+            ? restDelta < hoverDelta
+            : dir * restDelta > dir * hoverDelta;
+
+    let restIndex: number;
+    let hoverIndex: number;
+
+    if (indexOneIsRestState) {
+        restIndex = accessibleIndex1;
+        hoverIndex = accessibleIndex2;
+    } else {
+        restIndex = accessibleIndex2;
+        hoverIndex = accessibleIndex1;
+    }
+
+    return {
+        rest: palette.get(restIndex),
+        hover: palette.get(hoverIndex),
+        active: palette.get(restIndex + dir * activeDelta),
+        focus: palette.get(restIndex + dir * focusDelta),
+    };
+}
diff --git a/packages/utilities/adaptive-ui/src/color/recipes/index.ts b/packages/utilities/adaptive-ui/src/color/recipes/index.ts
new file mode 100644
index 00000000000..024e10d8f67
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/recipes/index.ts
@@ -0,0 +1,6 @@
+export * from "./black-or-white-by-contrast.js";
+export * from "./contrast-and-delta-swatch-set.js";
+export * from "./contrast-swatch.js";
+export * from "./delta-swatch-set.js";
+export * from "./delta-swatch.js";
+export * from "./ideal-color-delta-swatch-set.js";
diff --git a/packages/utilities/adaptive-ui/src/color/swatch.ts b/packages/utilities/adaptive-ui/src/color/swatch.ts
new file mode 100644
index 00000000000..1b112fe7246
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/swatch.ts
@@ -0,0 +1,98 @@
+import { ColorRGBA64, rgbToRelativeLuminance } from "@microsoft/fast-colors";
+import { contrast, RelativeLuminance } from "./utilities/relative-luminance.js";
+
+/**
+ * Represents a color in a {@link Palette}.
+ *
+ * @public
+ */
+export interface Swatch extends RelativeLuminance {
+    /**
+     * Gets a string representation of the color.
+     */
+    toColorString(): string;
+
+    /**
+     * Gets the contrast between this Swatch and another one.
+     * @param target - The relative luminance for comparison
+     */
+    contrast(target: RelativeLuminance): number;
+}
+
+/**
+ * Represents a color in a {@link Palette} using RGB.
+ *
+ * @public
+ */
+export class SwatchRGB implements Swatch {
+    /**
+     * Red channel expressed as a number between 0 and 1.
+     */
+    readonly r: number;
+
+    /**
+     * Green channel expressed as a number between 0 and 1.
+     */
+    readonly g: number;
+
+    /**
+     * Blue channel expressed as a number between 0 and 1.
+     */
+    readonly b: number;
+
+    /**
+     * {@inheritdoc RelativeLuminance.relativeLuminance}
+     */
+    readonly relativeLuminance: number;
+
+    private readonly color: ColorRGBA64;
+
+    /**
+     * Creates a new SwatchRGB.
+     *
+     * @param red - Red channel expressed as a number between 0 and 1
+     * @param green - Green channel expressed as a number between 0 and 1
+     * @param blue - Blue channel expressed as a number between 0 and 1
+     */
+    constructor(red: number, green: number, blue: number) {
+        this.r = red;
+        this.g = green;
+        this.b = blue;
+        this.color = new ColorRGBA64(red, blue, green);
+
+        this.relativeLuminance = rgbToRelativeLuminance(this.color);
+    }
+
+    /**
+     * Gets this color value as a string.
+     *
+     * @returns The color value in string format
+     */
+    toColorString() {
+        return this.color.toStringHexRGB();
+    }
+
+    /**
+     * Gets the contrast between this Swatch and another.
+     *
+     * @returns The contrast between the two luminance values, for example, 4.54
+     */
+    contrast = contrast.bind(null, this);
+
+    /**
+     * Gets this color value as a string for use in css.
+     *
+     * @returns The color value in a valid css string format
+     */
+    createCSS = this.toColorString;
+
+    /**
+     * Creates a new SwatchRGB from and object with R, G, and B values expressed as a number between 0 to 1.
+     *
+     * @param obj - An object with `r`, `g`, and `b` values expressed as a number between 0 and 1
+     * @returns A new SwatchRGB
+     */
+    static from(obj: { r: number; g: number; b: number }): SwatchRGB {
+        return new SwatchRGB(obj.r, obj.g, obj.b);
+    }
+}
diff --git a/packages/utilities/adaptive-ui/src/color/utilities/binary-search.ts b/packages/utilities/adaptive-ui/src/color/utilities/binary-search.ts
new file mode 100644
index 00000000000..25f3b4ccc98
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/utilities/binary-search.ts
@@ -0,0 +1,31 @@
+/**
+ * @internal
+ */
+export function binarySearch<T>(
+    valuesToSearch: T[] | ReadonlyArray<T>,
+    searchCondition: (value: T) => boolean,
+    startIndex: number = 0,
+    endIndex: number = valuesToSearch.length - 1
+): T {
+    if (endIndex === startIndex) {
+        return valuesToSearch[startIndex];
+    }
+
+    const middleIndex: number = Math.floor((endIndex - startIndex) / 2) + startIndex;
+
+    // Check to see if this passes on the item in the center of the array
+    // if it does check the previous values
+    return searchCondition(valuesToSearch[middleIndex])
+        ? binarySearch(
+              valuesToSearch,
+              searchCondition,
+              startIndex,
+              middleIndex // include this index because it passed the search condition
+          )
+        : binarySearch(
+              valuesToSearch,
+              searchCondition,
+              middleIndex + 1, // exclude this index because it failed the search condition
+              endIndex
+          );
+}
diff --git a/packages/utilities/adaptive-ui/src/color/utilities/color-constants.ts b/packages/utilities/adaptive-ui/src/color/utilities/color-constants.ts
new file mode 100644
index 00000000000..78fbdb5701f
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/utilities/color-constants.ts
@@ -0,0 +1,15 @@
+import { SwatchRGB } from "../swatch.js";
+
+/**
+ * A {@link SwatchRGB} convenience for white.
+ *
+ * @internal
+ */
+export const _white = new SwatchRGB(1, 1, 1);
+
+/**
+ * A {@link SwatchRGB} convenience for black.
+ *
+ * @internal
+ */
+export const _black = new SwatchRGB(0, 0, 0);
diff --git a/packages/utilities/adaptive-ui/src/color/utilities/direction-by-is-dark.ts b/packages/utilities/adaptive-ui/src/color/utilities/direction-by-is-dark.ts
new file mode 100644
index 00000000000..13a7569b5dd
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/utilities/direction-by-is-dark.ts
@@ -0,0 +1,15 @@
+import { PaletteDirectionValue } from "../palette.js";
+import { isDark } from "./is-dark.js";
+import { RelativeLuminance } from "./relative-luminance.js";
+
+/**
+ * A convenience for many color recipes. Gets a directional multiplier based on whether the `color` is dark or light.
+ *
+ * @param color - The color to check
+ * @returns `darker` if the `color` is light, `lighter` if the `color` is dark
+ *
+ * @public
+ */
+export function directionByIsDark(color: RelativeLuminance): PaletteDirectionValue {
+    return isDark(color) ? PaletteDirectionValue.lighter : PaletteDirectionValue.darker;
+}
diff --git a/packages/utilities/adaptive-ui/src/color/utilities/index.ts b/packages/utilities/adaptive-ui/src/color/utilities/index.ts
new file mode 100644
index 00000000000..3c45dc116dd
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/utilities/index.ts
@@ -0,0 +1,5 @@
+export * from "./color-constants.js";
+export * from "./direction-by-is-dark.js";
+export * from "./is-dark.js";
+export * from "./luminance-swatch.js";
+export * from "./relative-luminance.js";
diff --git a/packages/utilities/adaptive-ui/src/color/utilities/is-dark.ts b/packages/utilities/adaptive-ui/src/color/utilities/is-dark.ts
new file mode 100644
index 00000000000..ad29918a1ac
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/utilities/is-dark.ts
@@ -0,0 +1,22 @@
+import { RelativeLuminance } from "./relative-luminance.js";
+
+/*
+ * A color is "dark" if there is more contrast between #000000 and a reference
+ * color than #FFFFFF and the reference color. That threshold can be expressed as a relative luminance
+ * using the contrast formula as (1 + 0.5) / (R + 0.05) === (R + 0.05) / (0 + 0.05),
+ * which reduces to the following, where 'R' is the relative luminance of the reference color
+ */
+const target = (-0.1 + Math.sqrt(0.21)) / 2;
+
+/**
+ * Determines if a `color` is dark according to relative luminance. That is, from a contrast perspective,
+ * whether it has more contrast against white than black. In grey, dark is #757575 and darker.
+ *
+ * @param color - The color to check
+ * @returns True when the `color` is dark
+ *
+ * @public
+ */
+export function isDark(color: RelativeLuminance): boolean {
+    return color.relativeLuminance <= target;
+}
diff --git a/packages/utilities/adaptive-ui/src/color/utilities/luminance-swatch.ts b/packages/utilities/adaptive-ui/src/color/utilities/luminance-swatch.ts
new file mode 100644
index 00000000000..70a1ec14f54
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/utilities/luminance-swatch.ts
@@ -0,0 +1,13 @@
+import { Swatch, SwatchRGB } from "../swatch.js";
+
+/**
+ * Create a grey swatch for the specified `luminance`. Note this is absolute luminance not 'relative' luminance.
+ *
+ * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey
+ * @returns A swatch for the specified grey value
+ *
+ * @public
+ */
+export function luminanceSwatch(luminance: number): Swatch {
+    return new SwatchRGB(luminance, luminance, luminance);
+}
diff --git a/packages/utilities/adaptive-ui/src/color/utilities/relative-luminance.ts b/packages/utilities/adaptive-ui/src/color/utilities/relative-luminance.ts
new file mode 100644
index 00000000000..69a3e751503
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/color/utilities/relative-luminance.ts
@@ -0,0 +1,29 @@
+/**
+ * An interface for storing the relative luminance value of a color to aid in contrast calculations.
+ *
+ * @public
+ */
+export interface RelativeLuminance {
+    /**
+     * A number between 0 and 1, calculated by {@link https://www.w3.org/WAI/GL/wiki/Relative_luminance}
+     */
+    readonly relativeLuminance: number;
+}
+
+/**
+ * Gets the contrast ratio between two colors expressed as relative luminance values.
+ *
+ * For example, the contrast between #FFFFFF and #767676 is 4.5:1
+ *
+ * @param a - One color relative luminance, for example, 1 for white
+ * @param b - Another color relative luminance, for example, 0.18116 for #767676
+ * @returns The contrast between the two luminance values, for example, 4.54
+ *
+ * @public
+ */
+export function contrast(a: RelativeLuminance, b: RelativeLuminance): number {
+    const y1 = a.relativeLuminance > b.relativeLuminance ? a : b;
+    const y2 = a.relativeLuminance > b.relativeLuminance ? b : a;
+
+    return (y1.relativeLuminance + 0.05) / (y2.relativeLuminance + 0.05);
+}
diff --git a/packages/utilities/adaptive-ui/src/design-tokens/appearance.ts b/packages/utilities/adaptive-ui/src/design-tokens/appearance.ts
new file mode 100644
index 00000000000..daf8b37c696
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/design-tokens/appearance.ts
@@ -0,0 +1,16 @@
+import { create } from "./create.js";
+
+/** @public */
+export const designUnit = create<number>("design-unit").withDefault(4);
+
+/** @public */
+export const controlCornerRadius = create<number>("control-corner-radius").withDefault(4);
+
+/** @public */
+export const layerCornerRadius = create<number>("layer-corner-radius").withDefault(8);
+
+/** @public */
+export const strokeWidth = create<number>("stroke-width").withDefault(1);
+
+/** @public */
+export const focusStrokeWidth = create<number>("focus-stroke-width").withDefault(2);
diff --git a/packages/utilities/adaptive-ui/src/design-tokens/color.ts b/packages/utilities/adaptive-ui/src/design-tokens/color.ts
new file mode 100644
index 00000000000..d40e42aff14
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/design-tokens/color.ts
@@ -0,0 +1,930 @@
+import { parseColorHexRGB } from "@microsoft/fast-colors";
+import { blackOrWhiteByContrast } from "../color/index.js";
+import {
+    ColorRecipe,
+    InteractiveColorRecipe,
+    InteractiveSwatchSet,
+} from "../color/recipe.js";
+import { blackOrWhiteByContrastSet } from "../color/recipes/black-or-white-by-contrast-set.js";
+import { contrastAndDeltaSwatchSet } from "../color/recipes/contrast-and-delta-swatch-set.js";
+import { contrastSwatch } from "../color/recipes/contrast-swatch.js";
+import { deltaSwatchSet } from "../color/recipes/delta-swatch-set.js";
+import { deltaSwatch } from "../color/recipes/delta-swatch.js";
+import { Swatch, SwatchRGB } from "../color/swatch.js";
+import { create, createNonCss } from "./create.js";
+import { accentPalette, neutralPalette } from "./palette.js";
+
+enum ContrastTarget {
+    NormalText = 4.5,
+    LargeText = 3,
+}
+
+/** @public */
+export const fillColor = create<Swatch>("fill-color").withDefault(
+    SwatchRGB.from(parseColorHexRGB("#FFFFFF")!)
+);
+
+// Accent Fill
+
+/** @public */
+export const accentFillMinContrast = createNonCss<number>(
+    "accent-fill-min-contrast"
+).withDefault(5.5);
+
+/** @public */
+export const accentFillRestDelta = createNonCss<number>(
+    "accent-fill-rest-delta"
+).withDefault(0);
+
+/** @public */
+export const accentFillHoverDelta = createNonCss<number>(
+    "accent-fill-hover-delta"
+).withDefault(-2);
+
+/** @public */
+export const accentFillActiveDelta = createNonCss<number>(
+    "accent-fill-active-delta"
+).withDefault(-5);
+
+/** @public */
+export const accentFillFocusDelta = createNonCss<number>(
+    "accent-fill-focus-delta"
+).withDefault(0);
+
+/** @public */
+export const accentFillRecipe = createNonCss<InteractiveColorRecipe>(
+    "accent-fill-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet =>
+        contrastAndDeltaSwatchSet(
+            accentPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            accentFillMinContrast.getValueFor(element),
+            accentFillRestDelta.getValueFor(element),
+            accentFillHoverDelta.getValueFor(element),
+            accentFillActiveDelta.getValueFor(element),
+            accentFillFocusDelta.getValueFor(element)
+        ),
+});
+
+/** @public */
+export const accentFillRest = create<Swatch>("accent-fill-rest").withDefault(
+    (element: HTMLElement) => {
+        return accentFillRecipe.getValueFor(element).evaluate(element).rest;
+    }
+);
+
+/** @public */
+export const accentFillHover = create<Swatch>("accent-fill-hover").withDefault(
+    (element: HTMLElement) => {
+        return accentFillRecipe.getValueFor(element).evaluate(element).hover;
+    }
+);
+
+/** @public */
+export const accentFillActive = create<Swatch>("accent-fill-active").withDefault(
+    (element: HTMLElement) => {
+        return accentFillRecipe.getValueFor(element).evaluate(element).active;
+    }
+);
+
+/** @public */
+export const accentFillFocus = create<Swatch>("accent-fill-focus").withDefault(
+    (element: HTMLElement) => {
+        return accentFillRecipe.getValueFor(element).evaluate(element).focus;
+    }
+);
+
+// Foreground On Accent
+
+/** @public */
+export const foregroundOnAccentRecipe = createNonCss<InteractiveColorRecipe>(
+    "foreground-on-accent-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement): InteractiveSwatchSet =>
+        blackOrWhiteByContrastSet(
+            accentFillRest.getValueFor(element),
+            accentFillHover.getValueFor(element),
+            accentFillActive.getValueFor(element),
+            accentFillFocus.getValueFor(element),
+            ContrastTarget.NormalText,
+            false
+        ),
+});
+
+/** @public */
+export const foregroundOnAccentRest = create<Swatch>(
+    "foreground-on-accent-rest"
+).withDefault(
+    (element: HTMLElement) =>
+        foregroundOnAccentRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const foregroundOnAccentHover = create<Swatch>(
+    "foreground-on-accent-hover"
+).withDefault(
+    (element: HTMLElement) =>
+        foregroundOnAccentRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const foregroundOnAccentActive = create<Swatch>(
+    "foreground-on-accent-active"
+).withDefault(
+    (element: HTMLElement) =>
+        foregroundOnAccentRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const foregroundOnAccentFocus = create<Swatch>(
+    "foreground-on-accent-focus"
+).withDefault(
+    (element: HTMLElement) =>
+        foregroundOnAccentRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Accent Foreground
+
+/** @public */
+export const accentForegroundMinContrast = createNonCss<number>(
+    "accent-foreground-min-contrast"
+).withDefault(0);
+
+/** @public */
+export const accentForegroundRestDelta = createNonCss<number>(
+    "accent-foreground-rest-delta"
+).withDefault(0);
+
+/** @public */
+export const accentForegroundHoverDelta = createNonCss<number>(
+    "accent-foreground-hover-delta"
+).withDefault(3);
+
+/** @public */
+export const accentForegroundActiveDelta = createNonCss<number>(
+    "accent-foreground-active-delta"
+).withDefault(-8);
+
+/** @public */
+export const accentForegroundFocusDelta = createNonCss<number>(
+    "accent-foreground-focus-delta"
+).withDefault(0);
+
+/** @public */
+export const accentForegroundRecipe = createNonCss<InteractiveColorRecipe>(
+    "accent-foreground-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet =>
+        contrastAndDeltaSwatchSet(
+            accentPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            accentForegroundMinContrast.getValueFor(element),
+            accentForegroundRestDelta.getValueFor(element),
+            accentForegroundHoverDelta.getValueFor(element),
+            accentForegroundActiveDelta.getValueFor(element),
+            accentForegroundFocusDelta.getValueFor(element)
+        ),
+});
+
+/** @public */
+export const accentForegroundRest = create<Swatch>("accent-foreground-rest").withDefault(
+    (element: HTMLElement) =>
+        accentForegroundRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const accentForegroundHover = create<Swatch>(
+    "accent-foreground-hover"
+).withDefault(
+    (element: HTMLElement) =>
+        accentForegroundRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const accentForegroundActive = create<Swatch>(
+    "accent-foreground-active"
+).withDefault(
+    (element: HTMLElement) =>
+        accentForegroundRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const accentForegroundFocus = create<Swatch>(
+    "accent-foreground-focus"
+).withDefault(
+    (element: HTMLElement) =>
+        accentForegroundRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Neutral Foreground
+
+/** @public */
+export const neutralForegroundMinContrast = createNonCss<number>(
+    "neutral-foreground-min-contrast"
+).withDefault(16);
+
+/** @public */
+export const neutralForegroundRestDelta = createNonCss<number>(
+    "neutral-foreground-rest-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralForegroundHoverDelta = createNonCss<number>(
+    "neutral-foreground-hover-delta"
+).withDefault(-19);
+
+/** @public */
+export const neutralForegroundActiveDelta = createNonCss<number>(
+    "neutral-foreground-active-delta"
+).withDefault(-30);
+
+/** @public */
+export const neutralForegroundFocusDelta = createNonCss<number>(
+    "neutral-foreground-focus-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralForegroundRecipe = createNonCss<InteractiveColorRecipe>(
+    "neutral-foreground-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet =>
+        contrastAndDeltaSwatchSet(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            neutralForegroundMinContrast.getValueFor(element),
+            neutralForegroundRestDelta.getValueFor(element),
+            neutralForegroundHoverDelta.getValueFor(element),
+            neutralForegroundActiveDelta.getValueFor(element),
+            neutralForegroundFocusDelta.getValueFor(element)
+        ),
+});
+
+/** @public */
+export const neutralForegroundRest = create<Swatch>(
+    "neutral-foreground-rest"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralForegroundRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const neutralForegroundHover = create<Swatch>(
+    "neutral-foreground-hover"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralForegroundRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const neutralForegroundActive = create<Swatch>(
+    "neutral-foreground-active"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralForegroundRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const neutralForegroundFocus = create<Swatch>(
+    "neutral-foreground-focus"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralForegroundRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Neutral Foreground Hint
+
+/** @public */
+export const neutralForegroundHintRecipe = createNonCss<ColorRecipe>(
+    "neutral-foreground-hint-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): Swatch =>
+        contrastSwatch(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            ContrastTarget.NormalText
+        ),
+});
+
+/** @public */
+export const neutralForegroundHint = create<Swatch>(
+    "neutral-foreground-hint"
+).withDefault((element: HTMLElement) =>
+    neutralForegroundHintRecipe.getValueFor(element).evaluate(element)
+);
+
+// Neutral Fill
+
+/** @public */
+export const neutralFillRestDelta = createNonCss<number>(
+    "neutral-fill-rest-delta"
+).withDefault(-1);
+
+/** @public */
+export const neutralFillHoverDelta = createNonCss<number>(
+    "neutral-fill-hover-delta"
+).withDefault(1);
+
+/** @public */
+export const neutralFillActiveDelta = createNonCss<number>(
+    "neutral-fill-active-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralFillFocusDelta = createNonCss<number>(
+    "neutral-fill-focus-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralFillRecipe = createNonCss<InteractiveColorRecipe>(
+    "neutral-fill-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet =>
+        deltaSwatchSet(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            neutralFillRestDelta.getValueFor(element),
+            neutralFillHoverDelta.getValueFor(element),
+            neutralFillActiveDelta.getValueFor(element),
+            neutralFillFocusDelta.getValueFor(element)
+        ),
+});
+
+/** @public */
+export const neutralFillRest = create<Swatch>("neutral-fill-rest").withDefault(
+    (element: HTMLElement) =>
+        neutralFillRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const neutralFillHover = create<Swatch>("neutral-fill-hover").withDefault(
+    (element: HTMLElement) =>
+        neutralFillRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const neutralFillActive = create<Swatch>("neutral-fill-active").withDefault(
+    (element: HTMLElement) =>
+        neutralFillRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const neutralFillFocus = create<Swatch>("neutral-fill-focus").withDefault(
+    (element: HTMLElement) =>
+        neutralFillRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Neutral Fill Input
+
+/** @public */
+export const neutralFillInputRestDelta = createNonCss<number>(
+    "neutral-fill-input-rest-delta"
+).withDefault(-1);
+
+/** @public */
+export const neutralFillInputHoverDelta = createNonCss<number>(
+    "neutral-fill-input-hover-delta"
+).withDefault(1);
+
+/** @public */
+export const neutralFillInputActiveDelta = createNonCss<number>(
+    "neutral-fill-input-active-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralFillInputFocusDelta = createNonCss<number>(
+    "neutral-fill-input-focus-delta"
+).withDefault(-2);
+
+/** @public */
+export const neutralFillInputRecipe = createNonCss<InteractiveColorRecipe>(
+    "neutral-fill-input-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet =>
+        deltaSwatchSet(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            neutralFillInputRestDelta.getValueFor(element),
+            neutralFillInputHoverDelta.getValueFor(element),
+            neutralFillInputActiveDelta.getValueFor(element),
+            neutralFillInputFocusDelta.getValueFor(element)
+        ),
+});
+
+/** @public */
+export const neutralFillInputRest = create<Swatch>("neutral-fill-input-rest").withDefault(
+    (element: HTMLElement) =>
+        neutralFillInputRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const neutralFillInputHover = create<Swatch>(
+    "neutral-fill-input-hover"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillInputRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const neutralFillInputActive = create<Swatch>(
+    "neutral-fill-input-active"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillInputRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const neutralFillInputFocus = create<Swatch>(
+    "neutral-fill-input-focus"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillInputRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Neutral Fill Secondary
+
+/** @public */
+export const neutralFillSecondaryRestDelta = createNonCss<number>(
+    "neutral-fill-secondary-rest-delta"
+).withDefault(3);
+
+/** @public */
+export const neutralFillSecondaryHoverDelta = createNonCss<number>(
+    "neutral-fill-secondary-hover-delta"
+).withDefault(2);
+
+/** @public */
+export const neutralFillSecondaryActiveDelta = createNonCss<number>(
+    "neutral-fill-secondary-active-delta"
+).withDefault(1);
+
+/** @public */
+export const neutralFillSecondaryFocusDelta = createNonCss<number>(
+    "neutral-fill-secondary-focus-delta"
+).withDefault(3);
+
+/** @public */
+export const neutralFillSecondaryRecipe = createNonCss<InteractiveColorRecipe>(
+    "neutral-fill-secondary-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet =>
+        deltaSwatchSet(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            neutralFillSecondaryRestDelta.getValueFor(element),
+            neutralFillSecondaryHoverDelta.getValueFor(element),
+            neutralFillSecondaryActiveDelta.getValueFor(element),
+            neutralFillSecondaryFocusDelta.getValueFor(element)
+        ),
+});
+
+/** @public */
+export const neutralFillSecondaryRest = create<Swatch>(
+    "neutral-fill-secondary-rest"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const neutralFillSecondaryHover = create<Swatch>(
+    "neutral-fill-secondary-hover"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const neutralFillSecondaryActive = create<Swatch>(
+    "neutral-fill-secondary-active"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const neutralFillSecondaryFocus = create<Swatch>(
+    "neutral-fill-secondary-focus"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Neutral Fill Stealth
+
+/** @public */
+export const neutralFillStealthRestDelta = createNonCss<number>(
+    "neutral-fill-stealth-rest-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralFillStealthHoverDelta = createNonCss<number>(
+    "neutral-fill-stealth-hover-delta"
+).withDefault(3);
+
+/** @public */
+export const neutralFillStealthActiveDelta = createNonCss<number>(
+    "neutral-fill-stealth-active-delta"
+).withDefault(2);
+
+/** @public */
+export const neutralFillStealthFocusDelta = createNonCss<number>(
+    "neutral-fill-stealth-focus-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralFillStealthRecipe = createNonCss<InteractiveColorRecipe>(
+    "neutral-fill-stealth-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet =>
+        deltaSwatchSet(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            neutralFillStealthRestDelta.getValueFor(element),
+            neutralFillStealthHoverDelta.getValueFor(element),
+            neutralFillStealthActiveDelta.getValueFor(element),
+            neutralFillStealthFocusDelta.getValueFor(element)
+        ),
+});
+
+/** @public */
+export const neutralFillStealthRest = create<Swatch>(
+    "neutral-fill-stealth-rest"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillStealthRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const neutralFillStealthHover = create<Swatch>(
+    "neutral-fill-stealth-hover"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillStealthRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const neutralFillStealthActive = create<Swatch>(
+    "neutral-fill-stealth-active"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillStealthRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const neutralFillStealthFocus = create<Swatch>(
+    "neutral-fill-stealth-focus"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillStealthRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Neutral Fill Strong
+
+/** @public */
+export const neutralFillStrongMinContrast = createNonCss<number>(
+    "neutral-fill-strong-min-contrast"
+).withDefault(0);
+
+/** @public */
+export const neutralFillStrongRestDelta = createNonCss<number>(
+    "neutral-fill-strong-rest-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralFillStrongHoverDelta = createNonCss<number>(
+    "neutral-fill-strong-hover-delta"
+).withDefault(8);
+
+/** @public */
+export const neutralFillStrongActiveDelta = createNonCss<number>(
+    "neutral-fill-strong-active-delta"
+).withDefault(-5);
+
+/** @public */
+export const neutralFillStrongFocusDelta = createNonCss<number>(
+    "neutral-fill-strong-focus-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralFillStrongRecipe = createNonCss<InteractiveColorRecipe>(
+    "neutral-fill-strong-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet =>
+        contrastAndDeltaSwatchSet(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            neutralFillStrongMinContrast.getValueFor(element),
+            neutralFillStrongRestDelta.getValueFor(element),
+            neutralFillStrongHoverDelta.getValueFor(element),
+            neutralFillStrongActiveDelta.getValueFor(element),
+            neutralFillStrongFocusDelta.getValueFor(element)
+        ),
+});
+
+/** @public */
+export const neutralFillStrongRest = create<Swatch>(
+    "neutral-fill-strong-rest"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillStrongRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const neutralFillStrongHover = create<Swatch>(
+    "neutral-fill-strong-hover"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillStrongRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const neutralFillStrongActive = create<Swatch>(
+    "neutral-fill-strong-active"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillStrongRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const neutralFillStrongFocus = create<Swatch>(
+    "neutral-fill-strong-focus"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralFillStrongRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Neutral Stroke
+
+/** @public */
+export const neutralStrokeRestDelta = createNonCss<number>(
+    "neutral-stroke-rest-delta"
+).withDefault(8);
+
+/** @public */
+export const neutralStrokeHoverDelta = createNonCss<number>(
+    "neutral-stroke-hover-delta"
+).withDefault(12);
+
+/** @public */
+export const neutralStrokeActiveDelta = createNonCss<number>(
+    "neutral-stroke-active-delta"
+).withDefault(6);
+
+/** @public */
+export const neutralStrokeFocusDelta = createNonCss<number>(
+    "neutral-stroke-focus-delta"
+).withDefault(8);
+
+/** @public */
+export const neutralStrokeRecipe = createNonCss<InteractiveColorRecipe>(
+    "neutral-stroke-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet => {
+        return deltaSwatchSet(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            neutralStrokeRestDelta.getValueFor(element),
+            neutralStrokeHoverDelta.getValueFor(element),
+            neutralStrokeActiveDelta.getValueFor(element),
+            neutralStrokeFocusDelta.getValueFor(element)
+        );
+    },
+});
+
+/** @public */
+export const neutralStrokeRest = create<Swatch>("neutral-stroke-rest").withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const neutralStrokeHover = create<Swatch>("neutral-stroke-hover").withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const neutralStrokeActive = create<Swatch>("neutral-stroke-active").withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const neutralStrokeFocus = create<Swatch>("neutral-stroke-focus").withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Neutral Stroke Divider
+
+/** @public */
+export const neutralStrokeDividerRestDelta = createNonCss<number>(
+    "neutral-stroke-divider-rest-delta"
+).withDefault(4);
+
+/** @public */
+export const neutralStrokeDividerRecipe = createNonCss<ColorRecipe>(
+    "neutral-stroke-divider-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): Swatch =>
+        deltaSwatch(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            neutralStrokeDividerRestDelta.getValueFor(element)
+        ),
+});
+
+/** @public */
+export const neutralStrokeDividerRest = create<Swatch>(
+    "neutral-stroke-divider-rest"
+).withDefault(element =>
+    neutralStrokeDividerRecipe.getValueFor(element).evaluate(element)
+);
+
+// Neutral Stroke Input
+
+/** @public */
+export const neutralStrokeInputRestDelta = createNonCss<number>(
+    "neutral-stroke-input-rest-delta"
+).withDefault(3);
+
+/** @public */
+export const neutralStrokeInputHoverDelta = createNonCss<number>(
+    "neutral-stroke-input-hover-delta"
+).withDefault(5);
+
+/** @public */
+export const neutralStrokeInputActiveDelta = createNonCss<number>(
+    "neutral-stroke-input-active-delta"
+).withDefault(5);
+
+/** @public */
+export const neutralStrokeInputFocusDelta = createNonCss<number>(
+    "neutral-stroke-input-focus-delta"
+).withDefault(5);
+
+/** @public */
+export const neutralStrokeInputRecipe = createNonCss<InteractiveColorRecipe>(
+    "neutral-stroke-input-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet => {
+        return deltaSwatchSet(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            neutralStrokeInputRestDelta.getValueFor(element),
+            neutralStrokeInputHoverDelta.getValueFor(element),
+            neutralStrokeInputActiveDelta.getValueFor(element),
+            neutralStrokeInputFocusDelta.getValueFor(element)
+        );
+    },
+});
+
+/** @public */
+export const neutralStrokeInputRest = create<Swatch>(
+    "neutral-stroke-input-rest"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeInputRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const neutralStrokeInputHover = create<Swatch>(
+    "neutral-stroke-input-hover"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeInputRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const neutralStrokeInputActive = create<Swatch>(
+    "neutral-stroke-input-active"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeInputRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const neutralStrokeInputFocus = create<Swatch>(
+    "neutral-stroke-input-focus"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeInputRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Neutral Stroke Strong
+
+/** @public */
+export const neutralStrokeStrongMinContrast = createNonCss<number>(
+    "neutral-stroke-strong-min-contrast"
+).withDefault(5.5);
+
+/** @public */
+export const neutralStrokeStrongRestDelta = createNonCss<number>(
+    "neutral-stroke-strong-rest-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralStrokeStrongHoverDelta = createNonCss<number>(
+    "neutral-stroke-strong-hover-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralStrokeStrongActiveDelta = createNonCss<number>(
+    "neutral-stroke-strong-active-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralStrokeStrongFocusDelta = createNonCss<number>(
+    "neutral-stroke-strong-focus-delta"
+).withDefault(0);
+
+/** @public */
+export const neutralStrokeStrongRecipe = createNonCss<InteractiveColorRecipe>(
+    "neutral-stroke-strong-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet =>
+        contrastAndDeltaSwatchSet(
+            neutralPalette.getValueFor(element),
+            reference || fillColor.getValueFor(element),
+            neutralStrokeStrongMinContrast.getValueFor(element),
+            neutralStrokeStrongRestDelta.getValueFor(element),
+            neutralStrokeStrongHoverDelta.getValueFor(element),
+            neutralStrokeStrongActiveDelta.getValueFor(element),
+            neutralStrokeStrongFocusDelta.getValueFor(element)
+        ),
+});
+
+/** @public */
+export const neutralStrokeStrongRest = create<Swatch>(
+    "neutral-stroke-strong-rest"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).rest
+);
+
+/** @public */
+export const neutralStrokeStrongHover = create<Swatch>(
+    "neutral-stroke-strong-hover"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).hover
+);
+
+/** @public */
+export const neutralStrokeStrongActive = create<Swatch>(
+    "neutral-stroke-strong-active"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).active
+);
+
+/** @public */
+export const neutralStrokeStrongFocus = create<Swatch>(
+    "neutral-stroke-strong-focus"
+).withDefault(
+    (element: HTMLElement) =>
+        neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).focus
+);
+
+// Focus Stroke Outer
+
+/** @public */
+export const focusStrokeOuterRecipe = createNonCss<ColorRecipe>(
+    "focus-stroke-outer-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement): Swatch =>
+        blackOrWhiteByContrast(
+            fillColor.getValueFor(element),
+            ContrastTarget.NormalText,
+            true
+        ),
+});
+
+/** @public */
+export const focusStrokeOuter = create<Swatch>(
+    "focus-stroke-outer"
+).withDefault((element: HTMLElement) =>
+    focusStrokeOuterRecipe.getValueFor(element).evaluate(element)
+);
+
+// Focus Stroke Inner
+
+/** @public */
+export const focusStrokeInnerRecipe = createNonCss<ColorRecipe>(
+    "focus-stroke-inner-recipe"
+).withDefault({
+    evaluate: (element: HTMLElement): Swatch =>
+        blackOrWhiteByContrast(
+            focusStrokeOuter.getValueFor(element),
+            ContrastTarget.NormalText,
+            false
+        ),
+});
+
+/** @public */
+export const focusStrokeInner = create<Swatch>(
+    "focus-stroke-inner"
+).withDefault((element: HTMLElement) =>
+    focusStrokeInnerRecipe.getValueFor(element).evaluate(element)
+);
diff --git a/packages/utilities/adaptive-ui/src/design-tokens/create.ts b/packages/utilities/adaptive-ui/src/design-tokens/create.ts
new file mode 100644
index 00000000000..dae16a1d6bb
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/design-tokens/create.ts
@@ -0,0 +1,9 @@
+import { DesignToken } from "@microsoft/fast-foundation";
+
+/** @internal */
+export const { create } = DesignToken;
+
+/** @internal */
+export function createNonCss<T>(name: string): DesignToken<T> {
+    return DesignToken.create<T>({ name, cssCustomPropertyName: null });
+}
diff --git a/packages/utilities/adaptive-ui/src/design-tokens/general.ts b/packages/utilities/adaptive-ui/src/design-tokens/general.ts
new file mode 100644
index 00000000000..50813564958
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/design-tokens/general.ts
@@ -0,0 +1,5 @@
+import { Direction } from "@microsoft/fast-web-utilities";
+import { create } from "./create.js";
+
+/** @public */
+export const direction = create<Direction>("direction").withDefault(Direction.ltr);
diff --git a/packages/utilities/adaptive-ui/src/design-tokens/index.ts b/packages/utilities/adaptive-ui/src/design-tokens/index.ts
new file mode 100644
index 00000000000..8388993ee24
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/design-tokens/index.ts
@@ -0,0 +1,5 @@
+export * from "./appearance.js";
+export * from "./color.js";
+export * from "./general.js";
+export * from "./palette.js";
+export * from "./type.js";
diff --git a/packages/utilities/adaptive-ui/src/design-tokens/palette.ts b/packages/utilities/adaptive-ui/src/design-tokens/palette.ts
new file mode 100644
index 00000000000..099d4ec468f
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/design-tokens/palette.ts
@@ -0,0 +1,40 @@
+import { parseColorHexRGB } from "@microsoft/fast-colors";
+import { Palette, Swatch, SwatchRGB } from "../color/index.js";
+import { PaletteRGB } from "../color/palette-rgb.js";
+import { create, createNonCss } from "./create.js";
+
+/** @public */
+export const neutralBaseColor = create<string>("neutral-base-color").withDefault(
+    "#808080"
+);
+
+/** @public */
+export const neutralBaseSwatch = createNonCss<Swatch>(
+    "neutral-base-swatch"
+).withDefault((element: HTMLElement) =>
+    SwatchRGB.from(parseColorHexRGB(neutralBaseColor.getValueFor(element))!)
+);
+
+/** @public */
+export const neutralPalette = createNonCss<Palette>(
+    "neutral-palette"
+).withDefault((element: HTMLElement) =>
+    PaletteRGB.from(neutralBaseSwatch.getValueFor(element) as SwatchRGB)
+);
+
+/** @public */
+export const accentBaseColor = create<string>("accent-base-color").withDefault("#0078D4");
+
+/** @public */
+export const accentBaseSwatch = createNonCss<Swatch>(
+    "accent-base-swatch"
+).withDefault((element: HTMLElement) =>
+    SwatchRGB.from(parseColorHexRGB(accentBaseColor.getValueFor(element))!)
+);
+
+/** @public */
+export const accentPalette = createNonCss<Palette>(
+    "accent-palette"
+).withDefault((element: HTMLElement) =>
+    PaletteRGB.from(accentBaseSwatch.getValueFor(element) as SwatchRGB)
+);
diff --git a/packages/utilities/adaptive-ui/src/design-tokens/type.ts b/packages/utilities/adaptive-ui/src/design-tokens/type.ts
new file mode 100644
index 00000000000..81e570c3ac7
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/design-tokens/type.ts
@@ -0,0 +1,166 @@
+import { DesignToken } from "@microsoft/fast-foundation";
+import { StandardFontWeight } from "../type/type-ramp.js";
+import { create } from "./create.js";
+
+/** @public */
+export const bodyFont = create<string>("body-font").withDefault(
+    '"Segoe UI Variable", "Segoe UI", sans-serif'
+);
+
+/** @public */
+export const fontWeight = create<number>("font-weight").withDefault(
+    StandardFontWeight.Normal
+);
+
+function fontVariations(
+    sizeToken: DesignToken<string>
+): (element: HTMLElement) => string {
+    return (element: HTMLElement): string => {
+        const size = sizeToken.getValueFor(element);
+        const weight = fontWeight.getValueFor(element);
+        if (size.endsWith("px")) {
+            const px = Number.parseFloat(size.replace("px", ""));
+            if (px <= 12) {
+                return `"wght" ${weight}, "opsz" 8`;
+            } else if (px > 24) {
+                return `"wght" ${weight}, "opsz" 36`;
+            }
+        }
+        return `"wght" ${weight}, "opsz" 10.5`;
+    };
+}
+
+/** @public */
+export const typeRampBaseFontSize = create<string>(
+    "type-ramp-base-font-size"
+).withDefault("14px");
+
+/** @public */
+export const typeRampBaseLineHeight = create<string>(
+    "type-ramp-base-line-height"
+).withDefault("20px");
+
+/** @public */
+export const typeRampBaseFontVariations = create<string>(
+    "type-ramp-base-font-variations"
+).withDefault(fontVariations(typeRampBaseFontSize));
+
+/** @public */
+export const typeRampMinus1FontSize = create<string>(
+    "type-ramp-minus-1-font-size"
+).withDefault("12px");
+
+/** @public */
+export const typeRampMinus1LineHeight = create<string>(
+    "type-ramp-minus-1-line-height"
+).withDefault("16px");
+
+/** @public */
+export const typeRampMinus1FontVariations = create<string>(
+    "type-ramp-minus-1-font-variations"
+).withDefault(fontVariations(typeRampMinus1FontSize));
+
+/** @public */
+export const typeRampMinus2FontSize = create<string>(
+    "type-ramp-minus-2-font-size"
+).withDefault("10px");
+
+/** @public */
+export const typeRampMinus2LineHeight = create<string>(
+    "type-ramp-minus-2-line-height"
+).withDefault("14px");
+
+/** @public */
+export const typeRampMinus2FontVariations = create<string>(
+    "type-ramp-minus-2-font-variations"
+).withDefault(fontVariations(typeRampMinus2FontSize));
+
+/** @public */
+export const typeRampPlus1FontSize = create<string>(
+    "type-ramp-plus-1-font-size"
+).withDefault("16px");
+
+/** @public */
+export const typeRampPlus1LineHeight = create<string>(
+    "type-ramp-plus-1-line-height"
+).withDefault("22px");
+
+/** @public */
+export const typeRampPlus1FontVariations = create<string>(
+    "type-ramp-plus-1-font-variations"
+).withDefault(fontVariations(typeRampPlus1FontSize));
+
+/** @public */
+export const typeRampPlus2FontSize = create<string>(
+    "type-ramp-plus-2-font-size"
+).withDefault("20px");
+
+/** @public */
+export const typeRampPlus2LineHeight = create<string>(
+    "type-ramp-plus-2-line-height"
+).withDefault("26px");
+
+/** @public */
+export const typeRampPlus2FontVariations = create<string>(
+    "type-ramp-plus-2-font-variations"
+).withDefault(fontVariations(typeRampPlus2FontSize));
+
+/** @public */
+export const typeRampPlus3FontSize = create<string>(
+    "type-ramp-plus-3-font-size"
+).withDefault("24px");
+
+/** @public */
+export const typeRampPlus3LineHeight = create<string>(
+    "type-ramp-plus-3-line-height"
+).withDefault("32px");
+
+/** @public */
+export const typeRampPlus3FontVariations = create<string>(
+    "type-ramp-plus-3-font-variations"
+).withDefault(fontVariations(typeRampPlus3FontSize));
+
+/** @public */
+export const typeRampPlus4FontSize = create<string>(
+    "type-ramp-plus-4-font-size"
+).withDefault("28px");
+
+/** @public */
+export const typeRampPlus4LineHeight = create<string>(
+    "type-ramp-plus-4-line-height"
+).withDefault("36px");
+
+/** @public */
+export const typeRampPlus4FontVariations = create<string>(
+    "type-ramp-plus-4-font-variations"
+).withDefault(fontVariations(typeRampPlus4FontSize));
+
+/** @public */
+export const typeRampPlus5FontSize = create<string>(
+    "type-ramp-plus-5-font-size"
+).withDefault("32px");
+
+/** @public */
+export const typeRampPlus5LineHeight = create<string>(
+    "type-ramp-plus-5-line-height"
+).withDefault("40px");
+
+/** @public */
+export const typeRampPlus5FontVariations = create<string>(
+    "type-ramp-plus-5-font-variations"
+).withDefault(fontVariations(typeRampPlus5FontSize));
+
+/** @public */
+export const typeRampPlus6FontSize = create<string>(
+    "type-ramp-plus-6-font-size"
+).withDefault("40px");
+
+/** @public */
+export const typeRampPlus6LineHeight = create<string>(
+    "type-ramp-plus-6-line-height"
+).withDefault("52px");
+
+/** @public */
+export const typeRampPlus6FontVariations = create<string>(
+    "type-ramp-plus-6-font-variations"
+).withDefault(fontVariations(typeRampPlus6FontSize));
diff --git a/packages/utilities/adaptive-ui/src/index.ts b/packages/utilities/adaptive-ui/src/index.ts
new file mode 100644
index 00000000000..8a0068d0685
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/index.ts
@@ -0,0 +1,3 @@
+export * from "./color/index.js";
+export * from "./design-tokens/index.js";
+export * from "./type/index.js";
diff --git a/packages/utilities/adaptive-ui/src/type/index.ts b/packages/utilities/adaptive-ui/src/type/index.ts
new file mode 100644
index 00000000000..52f257e0aea
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/type/index.ts
@@ -0,0 +1 @@
+export * from "./type-ramp.js";
diff --git a/packages/utilities/adaptive-ui/src/type/type-ramp.ts b/packages/utilities/adaptive-ui/src/type/type-ramp.ts
new file mode 100644
index 00000000000..c2066d7bc02
--- /dev/null
+++ b/packages/utilities/adaptive-ui/src/type/type-ramp.ts
@@ -0,0 +1,129 @@
+import { cssPartial } from "@microsoft/fast-element";
+import {
+    bodyFont,
+    typeRampBaseFontSize,
+    typeRampBaseFontVariations,
+    typeRampBaseLineHeight,
+    typeRampMinus1FontSize,
+    typeRampMinus1FontVariations,
+    typeRampMinus1LineHeight,
+    typeRampMinus2FontSize,
+    typeRampMinus2FontVariations,
+    typeRampMinus2LineHeight,
+    typeRampPlus1FontSize,
+    typeRampPlus1FontVariations,
+    typeRampPlus1LineHeight,
+    typeRampPlus2FontSize,
+    typeRampPlus2FontVariations,
+    typeRampPlus2LineHeight,
+    typeRampPlus3FontSize,
+    typeRampPlus3FontVariations,
+    typeRampPlus3LineHeight,
+    typeRampPlus4FontSize,
+    typeRampPlus4FontVariations,
+    typeRampPlus4LineHeight,
+    typeRampPlus5FontSize,
+    typeRampPlus5FontVariations,
+    typeRampPlus5LineHeight,
+    typeRampPlus6FontSize,
+    typeRampPlus6FontVariations,
+    typeRampPlus6LineHeight,
+} from "../design-tokens/type.js";
+
+/**
+ * Standard font wights.
+ *
+ * @public
+ */
+export const StandardFontWeight = {
+    Thin: 100,
+    ExtraLight: 200,
+    Light: 300,
+    Normal: 400,
+    Medium: 500,
+    SemiBold: 600,
+    Bold: 700,
+    ExtraBold: 800,
+    Black: 900,
+} as const;
+
+/** @public */
+export const typeRampBase = cssPartial`
+    font-family: ${bodyFont};
+    font-size: ${typeRampBaseFontSize};
+    line-height: ${typeRampBaseLineHeight};
+    font-weight: initial;
+    font-variation-settings: ${typeRampBaseFontVariations};
+`;
+
+/** @public */
+export const typeRampMinus1 = cssPartial`
+    font-family: ${bodyFont};
+    font-size: ${typeRampMinus1FontSize};
+    line-height: ${typeRampMinus1LineHeight};
+    font-weight: initial;
+    font-variation-settings: ${typeRampMinus1FontVariations};
+`;
+
+/** @public */
+export const typeRampMinus2 = cssPartial`
+    font-family: ${bodyFont};
+    font-size: ${typeRampMinus2FontSize};
+    line-height: ${typeRampMinus2LineHeight};
+    font-weight: initial;
+    font-variation-settings: ${typeRampMinus2FontVariations};
+`;
+
+/** @public */
+export const typeRampPlus1 = cssPartial`
+    font-family: ${bodyFont};
+    font-size: ${typeRampPlus1FontSize};
+    line-height: ${typeRampPlus1LineHeight};
+    font-weight: initial;
+    font-variation-settings: ${typeRampPlus1FontVariations};
+`;
+
+/** @public */
+export const typeRampPlus2 = cssPartial`
+    font-family: ${bodyFont};
+    font-size: ${typeRampPlus2FontSize};
+    line-height: ${typeRampPlus2LineHeight};
+    font-weight: initial;
+    font-variation-settings: ${typeRampPlus2FontVariations};
+`;
+
+/** @public */
+export const typeRampPlus3 = cssPartial`
+    font-family: ${bodyFont};
+    font-size: ${typeRampPlus3FontSize};
+    line-height: ${typeRampPlus3LineHeight};
+    font-weight: initial;
+    font-variation-settings: ${typeRampPlus3FontVariations};
+`;
+
+/** @public */
+export const typeRampPlus4 = cssPartial`
+    font-family: ${bodyFont};
+    font-size: ${typeRampPlus4FontSize};
+    line-height: ${typeRampPlus4LineHeight};
+    font-weight: initial;
+    font-variation-settings: ${typeRampPlus4FontVariations};
+`;
+
+/** @public */
+export const typeRampPlus5 = cssPartial`
+    font-family: ${bodyFont};
+    font-size: ${typeRampPlus5FontSize};
+    line-height: ${typeRampPlus5LineHeight};
+    font-weight: initial;
+    font-variation-settings: ${typeRampPlus5FontVariations};
+`;
+
+/** @public */
+export const typeRampPlus6 = cssPartial`
+    font-family: ${bodyFont};
+    font-size: ${typeRampPlus6FontSize};
+    line-height: ${typeRampPlus6LineHeight};
+    font-weight: initial;
+    font-variation-settings: ${typeRampPlus6FontVariations};
+`;
diff --git a/packages/utilities/adaptive-ui/tsconfig.build.json b/packages/utilities/adaptive-ui/tsconfig.build.json
new file mode 100644
index 00000000000..4e340029230
--- /dev/null
+++ b/packages/utilities/adaptive-ui/tsconfig.build.json
@@ -0,0 +1,11 @@
+
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "declarationDir": "dist/dts",
+    },
+    "exclude": [
+        "**/*.spec.ts",
+        "**/__test__",
+    ]
+}
diff --git a/packages/utilities/adaptive-ui/tsconfig.json b/packages/utilities/adaptive-ui/tsconfig.json
new file mode 100644
index 00000000000..d5bbaa6f41d
--- /dev/null
+++ b/packages/utilities/adaptive-ui/tsconfig.json
@@ -0,0 +1,8 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "dist/esm",
+        "types": ["mocha"]
+    },
+    "include": ["src"]
+}
diff --git a/packages/utilities/adaptive-ui/tsconfig.test.json b/packages/utilities/adaptive-ui/tsconfig.test.json
new file mode 100644
index 00000000000..440bd4efe05
--- /dev/null
+++ b/packages/utilities/adaptive-ui/tsconfig.test.json
@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": "./src",
+        "outDir": "test",
+        "declaration": false,
+    }
+}

From fc641ba9da96b98448bf16e8b3747afa0a439296 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Wed, 25 May 2022 16:31:19 -0700
Subject: [PATCH 125/135] chore: update api extractor to support node 16
 (#6032)

* update api extractor and typescript to use the latest versions

* Change files
---
 ...-d138d870-102d-4df1-9d46-79f3e4582a34.json |  7 +++
 ...-85ca24c6-343c-4a82-a5a5-770ca5980a3a.json |  7 +++
 ...-398e668e-946a-4842-a881-c1e71e90a878.json |  7 +++
 ...-494da876-89a9-42c8-97e5-fe0abb3b64a9.json |  7 +++
 ...-c6953ec3-9961-4ec1-964a-1f953e3a0d88.json |  7 +++
 ...-39f5e6d9-6471-43c8-a23b-da434e05206e.json |  7 +++
 ...-c0e04b23-627f-41ca-9536-ab92ea4a27da.json |  7 +++
 ...-25c141a5-b953-45f2-ae78-dad40bad5ab1.json |  7 +++
 ...-ed6d118a-71eb-4f19-becf-3ef3e2847aa5.json |  7 +++
 ...-a37be403-bba7-4984-9645-35acca613f43.json |  7 +++
 examples/design-system-tutorial/package.json  |  2 +-
 examples/todo-app-tutorial/package.json       |  2 +-
 package.json                                  |  4 +-
 .../fast-figma-plugin-msft/package.json       |  2 +-
 packages/utilities/adaptive-ui/package.json   |  4 +-
 .../utilities/fast-animation/package.json     |  4 +-
 .../utilities/fast-benchmarks/package.json    |  2 +-
 packages/utilities/fast-colors/package.json   |  2 +-
 .../utilities/fast-eslint-rules/package.json  |  2 +-
 .../utilities/fast-react-wrapper/package.json |  4 +-
 .../utilities/fast-web-utilities/package.json |  2 +-
 .../web-components/fast-element/package.json  |  4 +-
 .../fast-element/src/templating/dom.ts        |  1 +
 .../fast-foundation/package.json              |  4 +-
 .../web-components/fast-router/package.json   |  4 +-
 packages/web-components/fast-ssr/package.json |  4 +-
 sites/fast-color-explorer/package.json        |  2 +-
 sites/fast-website/package.json               |  2 +-
 sites/site-utilities/package.json             |  2 +-
 yarn.lock                                     | 53 +++++++++----------
 30 files changed, 121 insertions(+), 55 deletions(-)
 create mode 100644 change/@microsoft-adaptive-ui-d138d870-102d-4df1-9d46-79f3e4582a34.json
 create mode 100644 change/@microsoft-eslint-config-fast-dna-85ca24c6-343c-4a82-a5a5-770ca5980a3a.json
 create mode 100644 change/@microsoft-fast-animation-398e668e-946a-4842-a881-c1e71e90a878.json
 create mode 100644 change/@microsoft-fast-colors-494da876-89a9-42c8-97e5-fe0abb3b64a9.json
 create mode 100644 change/@microsoft-fast-element-c6953ec3-9961-4ec1-964a-1f953e3a0d88.json
 create mode 100644 change/@microsoft-fast-foundation-39f5e6d9-6471-43c8-a23b-da434e05206e.json
 create mode 100644 change/@microsoft-fast-react-wrapper-c0e04b23-627f-41ca-9536-ab92ea4a27da.json
 create mode 100644 change/@microsoft-fast-router-25c141a5-b953-45f2-ae78-dad40bad5ab1.json
 create mode 100644 change/@microsoft-fast-ssr-ed6d118a-71eb-4f19-becf-3ef3e2847aa5.json
 create mode 100644 change/@microsoft-fast-web-utilities-a37be403-bba7-4984-9645-35acca613f43.json

diff --git a/change/@microsoft-adaptive-ui-d138d870-102d-4df1-9d46-79f3e4582a34.json b/change/@microsoft-adaptive-ui-d138d870-102d-4df1-9d46-79f3e4582a34.json
new file mode 100644
index 00000000000..f80af0b3bad
--- /dev/null
+++ b/change/@microsoft-adaptive-ui-d138d870-102d-4df1-9d46-79f3e4582a34.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update api extractor and typescript to use the latest versions",
+  "packageName": "@microsoft/adaptive-ui",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-eslint-config-fast-dna-85ca24c6-343c-4a82-a5a5-770ca5980a3a.json b/change/@microsoft-eslint-config-fast-dna-85ca24c6-343c-4a82-a5a5-770ca5980a3a.json
new file mode 100644
index 00000000000..c87bb9a0bfb
--- /dev/null
+++ b/change/@microsoft-eslint-config-fast-dna-85ca24c6-343c-4a82-a5a5-770ca5980a3a.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update api extractor and typescript to use the latest versions",
+  "packageName": "@microsoft/eslint-config-fast-dna",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-animation-398e668e-946a-4842-a881-c1e71e90a878.json b/change/@microsoft-fast-animation-398e668e-946a-4842-a881-c1e71e90a878.json
new file mode 100644
index 00000000000..1a876bead43
--- /dev/null
+++ b/change/@microsoft-fast-animation-398e668e-946a-4842-a881-c1e71e90a878.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update api extractor and typescript to use the latest versions",
+  "packageName": "@microsoft/fast-animation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-colors-494da876-89a9-42c8-97e5-fe0abb3b64a9.json b/change/@microsoft-fast-colors-494da876-89a9-42c8-97e5-fe0abb3b64a9.json
new file mode 100644
index 00000000000..cceaaed9e46
--- /dev/null
+++ b/change/@microsoft-fast-colors-494da876-89a9-42c8-97e5-fe0abb3b64a9.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update api extractor and typescript to use the latest versions",
+  "packageName": "@microsoft/fast-colors",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-element-c6953ec3-9961-4ec1-964a-1f953e3a0d88.json b/change/@microsoft-fast-element-c6953ec3-9961-4ec1-964a-1f953e3a0d88.json
new file mode 100644
index 00000000000..e5288d7d222
--- /dev/null
+++ b/change/@microsoft-fast-element-c6953ec3-9961-4ec1-964a-1f953e3a0d88.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update api extractor and typescript to use the latest versions",
+  "packageName": "@microsoft/fast-element",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-foundation-39f5e6d9-6471-43c8-a23b-da434e05206e.json b/change/@microsoft-fast-foundation-39f5e6d9-6471-43c8-a23b-da434e05206e.json
new file mode 100644
index 00000000000..9756d3e3b8b
--- /dev/null
+++ b/change/@microsoft-fast-foundation-39f5e6d9-6471-43c8-a23b-da434e05206e.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update api extractor and typescript to use the latest versions",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-react-wrapper-c0e04b23-627f-41ca-9536-ab92ea4a27da.json b/change/@microsoft-fast-react-wrapper-c0e04b23-627f-41ca-9536-ab92ea4a27da.json
new file mode 100644
index 00000000000..8b8c83531b3
--- /dev/null
+++ b/change/@microsoft-fast-react-wrapper-c0e04b23-627f-41ca-9536-ab92ea4a27da.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update api extractor and typescript to use the latest versions",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-router-25c141a5-b953-45f2-ae78-dad40bad5ab1.json b/change/@microsoft-fast-router-25c141a5-b953-45f2-ae78-dad40bad5ab1.json
new file mode 100644
index 00000000000..738d766a554
--- /dev/null
+++ b/change/@microsoft-fast-router-25c141a5-b953-45f2-ae78-dad40bad5ab1.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update api extractor and typescript to use the latest versions",
+  "packageName": "@microsoft/fast-router",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-ssr-ed6d118a-71eb-4f19-becf-3ef3e2847aa5.json b/change/@microsoft-fast-ssr-ed6d118a-71eb-4f19-becf-3ef3e2847aa5.json
new file mode 100644
index 00000000000..e023cbcc3ff
--- /dev/null
+++ b/change/@microsoft-fast-ssr-ed6d118a-71eb-4f19-becf-3ef3e2847aa5.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update api extractor and typescript to use the latest versions",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-web-utilities-a37be403-bba7-4984-9645-35acca613f43.json b/change/@microsoft-fast-web-utilities-a37be403-bba7-4984-9645-35acca613f43.json
new file mode 100644
index 00000000000..482ad8ba447
--- /dev/null
+++ b/change/@microsoft-fast-web-utilities-a37be403-bba7-4984-9645-35acca613f43.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "update api extractor and typescript to use the latest versions",
+  "packageName": "@microsoft/fast-web-utilities",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/examples/design-system-tutorial/package.json b/examples/design-system-tutorial/package.json
index 2531065cd6d..359a2771ca6 100644
--- a/examples/design-system-tutorial/package.json
+++ b/examples/design-system-tutorial/package.json
@@ -20,7 +20,7 @@
   "devDependencies": {
     "rimraf": "^3.0.2",
     "ts-loader": "^7.0.1",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^4.44.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
diff --git a/examples/todo-app-tutorial/package.json b/examples/todo-app-tutorial/package.json
index cb90a17e361..cce61c0ec83 100644
--- a/examples/todo-app-tutorial/package.json
+++ b/examples/todo-app-tutorial/package.json
@@ -21,7 +21,7 @@
     "http-server": "^14.1.0",
     "rimraf": "^3.0.2",
     "ts-loader": "^7.0.1",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^4.44.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
diff --git a/package.json b/package.json
index eeeda0ccb22..5cf6e27c342 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
     "node-gyp": "^9.0.0",
     "trim-newlines": "^4.0.2",
     "trim": "^0.0.3",
-    "typescript": "^4.7.0-beta",
+    "typescript": "^4.7.0",
     "ua-parser-js": "^0.7.28",
     "ws": "^7.4.6",
     "xmlhttprequest-ssl": "^1.6.2"
@@ -163,7 +163,7 @@
     "rimraf": "^3.0.2",
     "ts-jest": "^25.4.0",
     "ts-node": "^8.8.2",
-    "typescript": "^4.7.0-beta",
+    "typescript": "^4.7.0",
     "yargs": "^16.2.0"
   },
   "dependencies": {
diff --git a/packages/tooling/fast-figma-plugin-msft/package.json b/packages/tooling/fast-figma-plugin-msft/package.json
index 1007d71eb69..a43ea7d4c68 100644
--- a/packages/tooling/fast-figma-plugin-msft/package.json
+++ b/packages/tooling/fast-figma-plugin-msft/package.json
@@ -46,7 +46,7 @@
     "react-dom": "^16.12.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.3.0",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^5.72.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2"
diff --git a/packages/utilities/adaptive-ui/package.json b/packages/utilities/adaptive-ui/package.json
index 27700c61237..d68b82d445b 100644
--- a/packages/utilities/adaptive-ui/package.json
+++ b/packages/utilities/adaptive-ui/package.json
@@ -46,7 +46,7 @@
     "@microsoft/fast-foundation": "^2.46.2"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.23.1",
+    "@microsoft/api-extractor": "7.24.2",
     "@microsoft/eslint-config-fast-dna": "^2.1.0",
     "@types/chai": "^4.2.11",
     "@types/mocha": "^7.0.2",
@@ -54,6 +54,6 @@
     "eslint-config-prettier": "^6.10.1",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
-    "typescript": "4.7.0-beta"
+    "typescript": "^4.7.0"
   }
 }
diff --git a/packages/utilities/fast-animation/package.json b/packages/utilities/fast-animation/package.json
index 49d5cd0eb17..c81eae6dc62 100644
--- a/packages/utilities/fast-animation/package.json
+++ b/packages/utilities/fast-animation/package.json
@@ -72,7 +72,7 @@
     "@babel/core": "^7.12.13",
     "@babel/preset-env": "^7.12.13",
     "@babel/preset-react": "^7.12.13",
-    "@microsoft/api-extractor": "7.23.1",
+    "@microsoft/api-extractor": "7.24.2",
     "@microsoft/eslint-config-fast-dna": "^2.1.0",
     "@types/jest": "^27.0.0",
     "@types/node": "^15.0.1",
@@ -99,7 +99,7 @@
     "style-loader": "^0.13.2",
     "ts-jest": "^27.0.0",
     "ts-loader": "^8.0.0",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^4.44.0",
     "webpack-bundle-analyzer": "^3.5.2",
     "webpack-cli": "^3.2.1",
diff --git a/packages/utilities/fast-benchmarks/package.json b/packages/utilities/fast-benchmarks/package.json
index c805713f8db..26eaa2a1f24 100644
--- a/packages/utilities/fast-benchmarks/package.json
+++ b/packages/utilities/fast-benchmarks/package.json
@@ -31,7 +31,7 @@
     "html-webpack-plugin": "^5.3.1",
     "prettier": "2.0.2",
     "ts-loader": "^8.1.0",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^5.30.0",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^4.0.0-beta.1"
diff --git a/packages/utilities/fast-colors/package.json b/packages/utilities/fast-colors/package.json
index 68b97c92df6..b1c393c6759 100644
--- a/packages/utilities/fast-colors/package.json
+++ b/packages/utilities/fast-colors/package.json
@@ -44,6 +44,6 @@
     "@microsoft/eslint-config-fast-dna": "^2.1.0",
     "eslint-config-prettier": "^6.10.1",
     "prettier": "2.0.2",
-    "typescript": "4.7.0-beta"
+    "typescript": "^4.7.0"
   }
 }
diff --git a/packages/utilities/fast-eslint-rules/package.json b/packages/utilities/fast-eslint-rules/package.json
index 2f8587e4c02..9633dce0971 100644
--- a/packages/utilities/fast-eslint-rules/package.json
+++ b/packages/utilities/fast-eslint-rules/package.json
@@ -30,6 +30,6 @@
     "@typescript-eslint/parser": "^5.0.0",
     "eslint": "^8.0.0",
     "eslint-plugin-import": "^2.25.0",
-    "typescript": "~3.9.0 || ~4.3.5 || ^4.6.2"
+    "typescript": "~3.9.0 || ~4.3.5 || ^4.7.0"
   }
 }
diff --git a/packages/utilities/fast-react-wrapper/package.json b/packages/utilities/fast-react-wrapper/package.json
index 06fb21da2a6..82476fba2d6 100644
--- a/packages/utilities/fast-react-wrapper/package.json
+++ b/packages/utilities/fast-react-wrapper/package.json
@@ -46,7 +46,7 @@
     "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.23.1",
+    "@microsoft/api-extractor": "7.24.2",
     "@types/chai": "^4.2.11",
     "@types/karma": "^5.0.0",
     "@types/mocha": "^7.0.2",
@@ -77,7 +77,7 @@
     "ts-loader": "^9.3.0",
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2"
   },
diff --git a/packages/utilities/fast-web-utilities/package.json b/packages/utilities/fast-web-utilities/package.json
index a7bc4c944e3..a39789a077d 100644
--- a/packages/utilities/fast-web-utilities/package.json
+++ b/packages/utilities/fast-web-utilities/package.json
@@ -68,7 +68,7 @@
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "ts-loader": "^4.0.1",
-    "typescript": "4.7.0-beta"
+    "typescript": "^4.7.0"
   },
   "dependencies": {
     "exenv-es6": "^1.1.1"
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index 0e31693bd5c..59966309af7 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -71,7 +71,7 @@
     "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.23.1",
+    "@microsoft/api-extractor": "7.24.2",
     "@types/chai": "^4.2.11",
     "@types/chai-spies": "^1.0.3",
     "@types/karma": "^5.0.0",
@@ -107,7 +107,7 @@
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
     "tslib": "^2.4.0",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^4.44.0"
   }
 }
diff --git a/packages/web-components/fast-element/src/templating/dom.ts b/packages/web-components/fast-element/src/templating/dom.ts
index 9358bd36d91..faebeaaf401 100644
--- a/packages/web-components/fast-element/src/templating/dom.ts
+++ b/packages/web-components/fast-element/src/templating/dom.ts
@@ -1,4 +1,5 @@
 import { Updates } from "../observation/update-queue.js";
+import type { Callable } from "../interfaces.js";
 
 /**
  * Common DOM APIs.
diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
index c23f89cd4e7..1f723b7c7d7 100644
--- a/packages/web-components/fast-foundation/package.json
+++ b/packages/web-components/fast-foundation/package.json
@@ -65,7 +65,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",
     "@custom-elements-manifest/to-markdown": "^0.1.0",
-    "@microsoft/api-extractor": "7.23.1",
+    "@microsoft/api-extractor": "7.24.2",
     "@microsoft/tsdoc-config": "^0.13.4",
     "@types/chai": "^4.2.11",
     "@types/karma": "^5.0.0",
@@ -102,7 +102,7 @@
     "ts-loader": "^7.0.2",
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^4.44.0"
   },
   "dependencies": {
diff --git a/packages/web-components/fast-router/package.json b/packages/web-components/fast-router/package.json
index b15061e0aec..eec93d08c4f 100644
--- a/packages/web-components/fast-router/package.json
+++ b/packages/web-components/fast-router/package.json
@@ -46,7 +46,7 @@
     "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.23.1",
+    "@microsoft/api-extractor": "7.24.2",
     "@types/chai": "^4.2.11",
     "@types/karma": "^5.0.0",
     "@types/mocha": "^7.0.2",
@@ -75,7 +75,7 @@
     "ts-loader": "^7.0.2",
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^4.44.0"
   },
   "dependencies": {
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index 4f041b683c1..28cb6385b7c 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -56,12 +56,12 @@
   },
   "devDependencies": {
     "@microsoft/fast-element": "^1.10.1",
-    "@microsoft/api-extractor": "7.23.1",
+    "@microsoft/api-extractor": "7.24.2",
     "@playwright/test": "^1.20.1",
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.17",
     "chokidar-cli": "^3.0.0",
     "express": "^4.17.1",
-    "typescript": "4.7.0-beta"
+    "typescript": "^4.7.0"
   }
 }
diff --git a/sites/fast-color-explorer/package.json b/sites/fast-color-explorer/package.json
index 86423025227..2706f945727 100644
--- a/sites/fast-color-explorer/package.json
+++ b/sites/fast-color-explorer/package.json
@@ -44,7 +44,7 @@
     "prettier": "2.0.2",
     "svg-inline-loader": "^0.8.2",
     "ts-loader": "^9.3.0",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^5.72.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
diff --git a/sites/fast-website/package.json b/sites/fast-website/package.json
index 9bdca3ad933..03d08d8bfcc 100644
--- a/sites/fast-website/package.json
+++ b/sites/fast-website/package.json
@@ -33,7 +33,7 @@
     "svg-inline-loader": "^0.8.2",
     "terser-webpack-plugin": "^5.3.1",
     "ts-loader": "^9.3.0",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.0",
diff --git a/sites/site-utilities/package.json b/sites/site-utilities/package.json
index 61a3ec97412..fad3bffbbe4 100644
--- a/sites/site-utilities/package.json
+++ b/sites/site-utilities/package.json
@@ -54,7 +54,7 @@
     "react": "^16.8.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^25.4.0",
-    "typescript": "4.7.0-beta",
+    "typescript": "^4.7.0",
     "vscode-web-custom-data": "^0.3.1"
   },
   "dependencies": {
diff --git a/yarn.lock b/yarn.lock
index 0b39b9afea8..dd084ced091 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3245,14 +3245,14 @@
     js-yaml "~3.13.1"
     resolve "~1.17.0"
 
-"@microsoft/api-extractor-model@7.17.2":
-  version "7.17.2"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.17.2.tgz#033b39a7bac4f3eee3e5ffd406d2af61cedc727e"
-  integrity sha512-fYfCeBeLm7jnZligC64qHiH4/vzswFLDfyPpX+uKO36OI2kIeMHrYG0zaezmuinKvE4vg1dAz38zZeDbPvBKGg==
+"@microsoft/api-extractor-model@7.17.3":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.17.3.tgz#06899902ab1c10b85690232f21c1585cc158d983"
+  integrity sha512-ETslFxVEZTEK6mrOARxM34Ll2W/5H2aTk9Pe9dxsMCnthE8O/CaStV4WZAGsvvZKyjelSWgPVYGowxGVnwOMlQ==
   dependencies:
     "@microsoft/tsdoc" "0.14.1"
     "@microsoft/tsdoc-config" "~0.16.1"
-    "@rushstack/node-core-library" "3.45.4"
+    "@rushstack/node-core-library" "3.45.5"
 
 "@microsoft/api-extractor-model@7.8.8":
   version "7.8.8"
@@ -3262,17 +3262,17 @@
     "@microsoft/tsdoc" "0.12.19"
     "@rushstack/node-core-library" "3.24.1"
 
-"@microsoft/api-extractor@7.23.1":
-  version "7.23.1"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.23.1.tgz#483e339cc73669c709ff215a76eb0e6d9a31de5b"
-  integrity sha512-J5cTjbMzSZPRZT4AKvFI1KmLGHVhV6bHnFcPo3Og9cN9QmknzpKg5BxvpBecEdFKNZxUpUrBkps2xOQ4Fjc6zg==
+"@microsoft/api-extractor@7.24.2":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.24.2.tgz#4abb24319fa77884dab6d807388056e9cd85488e"
+  integrity sha512-QWZh9aQZvBAdRVK+Go8NiW8YNMN//OGiNqgA3iZ2sEy8imUqkRBCybXgmw2HkEYyPnn55CFoMKvnAHvV9+4B/A==
   dependencies:
-    "@microsoft/api-extractor-model" "7.17.2"
+    "@microsoft/api-extractor-model" "7.17.3"
     "@microsoft/tsdoc" "0.14.1"
     "@microsoft/tsdoc-config" "~0.16.1"
-    "@rushstack/node-core-library" "3.45.4"
+    "@rushstack/node-core-library" "3.45.5"
     "@rushstack/rig-package" "0.3.11"
-    "@rushstack/ts-command-line" "4.10.10"
+    "@rushstack/ts-command-line" "4.11.0"
     colors "~1.2.1"
     lodash "~4.17.15"
     resolve "~1.17.0"
@@ -3884,10 +3884,10 @@
     timsort "~0.3.0"
     z-schema "~3.18.3"
 
-"@rushstack/node-core-library@3.45.4":
-  version "3.45.4"
-  resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.45.4.tgz#a5e1246c462940d16a5acc667c1ffe460b514087"
-  integrity sha512-FMoEQWjK7nWAO2uFgV1eVpVhY9ZDGOdIIomi9zTej64cKJ+8/Nvu+ny0xKaUDEjw/ALftN2D2ml7L0RDpW/Z9g==
+"@rushstack/node-core-library@3.45.5":
+  version "3.45.5"
+  resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.45.5.tgz#00f92143cc21c3ad94fcd81ba168a40ac8cb77f2"
+  integrity sha512-KbN7Hp9vH3bD3YJfv6RnVtzzTAwGYIBl7y2HQLY4WEQqRbvE3LgI78W9l9X+cTAXCX//p0EeoiUYNTFdqJrMZg==
   dependencies:
     "@types/node" "12.20.24"
     colors "~1.2.1"
@@ -3907,10 +3907,10 @@
     resolve "~1.17.0"
     strip-json-comments "~3.1.1"
 
-"@rushstack/ts-command-line@4.10.10":
-  version "4.10.10"
-  resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.10.10.tgz#69da17b03ce57795b67ea2aabf7c976c81816078"
-  integrity sha512-F+MH7InPDXqX40qvvcEsnvPpmg566SBpfFqj2fcCh8RjM6AyOoWlXc8zx7giBD3ZN85NVAEjZAgrcLU0z+R2yg==
+"@rushstack/ts-command-line@4.11.0":
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.11.0.tgz#4cd3b9f59b41aed600042936260fdaa55ca0184d"
+  integrity sha512-ptG9L0mjvJ5QtK11GsAFY+jGfsnqHDS6CY6Yw1xT7a9bhjfNYnf6UPwjV+pF6UgiucfNcMDNW9lkDLxvZKKxMg==
   dependencies:
     "@types/argparse" "1.0.38"
     argparse "~1.0.9"
@@ -4610,11 +4610,6 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
-"@types/web-ie11@^0.0.0":
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/@types/web-ie11/-/web-ie11-0.0.0.tgz#d3f8b536175bc9f700ddef462d79bc7725fe1d3e"
-  integrity sha512-44abV3xJfnkWkv0nqdJ7hCa36/rOMpuabXAyYadqpNllqLPnd+JbiRAnJV12sMdO2cNSesaUbMK3+7O9QD00bw==
-
 "@types/webpack-env@^1.15.2":
   version "1.16.4"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.4.tgz#1f4969042bf76d7ef7b5914f59b3b60073f4e1f4"
@@ -21411,10 +21406,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@4.7.0-beta, typescript@^4.7.0-beta, "typescript@~3.9.0 || ~4.3.5 || ^4.6.2", typescript@~4.3.2, typescript@~4.6.3:
-  version "4.7.0-dev.20220506"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.0-dev.20220506.tgz#1930c24322b9289188f51a1d2a4acc43eb2bf3ed"
-  integrity sha512-2rqSNvYKymAAknVcWTgZLsDGWkr/PZZ9s7K/zGHa8vhAmTPwoFSyc7YxRHYHe2UcxbovTkMg/g8yCQ/VHsk9oQ==
+typescript@^4.7.0, "typescript@~3.9.0 || ~4.3.5 || ^4.7.0", typescript@~4.3.2, typescript@~4.6.3:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.2.tgz#1f9aa2ceb9af87cca227813b4310fff0b51593c4"
+  integrity sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==
 
 typical@^4.0.0:
   version "4.0.0"

From cfe670a4b45d8b335bae38d01b174bca8591f111 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Wed, 25 May 2022 23:27:20 -0700
Subject: [PATCH 126/135] update dialog trap focus to default to false (#6016)

* change trapFocus on dialog to noFocusTrap to better support boolean attributes

* Change files
---
 ...-f2ecedda-fb31-42c8-9919-9b0f157cce36.json |  7 ++++++
 .../fast-foundation/docs/api-report.md        |  4 +--
 .../fast-foundation/src/dialog/README.md      | 25 +++++++++----------
 .../fast-foundation/src/dialog/dialog.spec.ts | 12 ++++-----
 .../fast-foundation/src/dialog/dialog.ts      | 14 +++++------
 5 files changed, 33 insertions(+), 29 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-f2ecedda-fb31-42c8-9919-9b0f157cce36.json

diff --git a/change/@microsoft-fast-foundation-f2ecedda-fb31-42c8-9919-9b0f157cce36.json b/change/@microsoft-fast-foundation-f2ecedda-fb31-42c8-9919-9b0f157cce36.json
new file mode 100644
index 00000000000..618eaa5d52b
--- /dev/null
+++ b/change/@microsoft-fast-foundation-f2ecedda-fb31-42c8-9919-9b0f157cce36.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "change trapFocus on dialog to noFocusTrap to better support boolean attributes",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index a5afbcdb482..fda1989628f 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -1085,10 +1085,8 @@ export class Dialog extends FoundationElement {
     hidden: boolean;
     hide(): void;
     modal: boolean;
+    noFocusTrap: boolean;
     show(): void;
-    trapFocus: boolean;
-    // (undocumented)
-    protected trapFocusChanged: () => void;
 }
 
 // @public
diff --git a/packages/web-components/fast-foundation/src/dialog/README.md b/packages/web-components/fast-foundation/src/dialog/README.md
index d3706a3110b..ae76fe03478 100644
--- a/packages/web-components/fast-foundation/src/dialog/README.md
+++ b/packages/web-components/fast-foundation/src/dialog/README.md
@@ -63,18 +63,17 @@ export const myDialog = Dialog.compose({
 
 #### Fields
 
-| Name               | Privacy   | Type                                  | Default | Description                                                                                                                                                                                                   | Inherited From    |
-| ------------------ | --------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
-| `modal`            | public    | `boolean`                             | `false` | Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event. |                   |
-| `hidden`           | public    | `boolean`                             | `false` | The hidden state of the element.                                                                                                                                                                              |                   |
-| `trapFocus`        | public    | `boolean`                             | `true`  | Indicates that the dialog should trap focus.                                                                                                                                                                  |                   |
-| `trapFocusChanged` | protected |                                       |         |                                                                                                                                                                                                               |                   |
-| `ariaDescribedby`  | public    | `string`                              |         | The id of the element describing the dialog.                                                                                                                                                                  |                   |
-| `ariaLabelledby`   | public    | `string`                              |         | The id of the element labeling the dialog.                                                                                                                                                                    |                   |
-| `ariaLabel`        | public    | `string`                              |         | The label surfaced to assistive technologies.                                                                                                                                                                 |                   |
-| `$presentation`    | public    | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                                                       | FoundationElement |
-| `template`         | public    | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.                                    | FoundationElement |
-| `styles`           | public    | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.                           | FoundationElement |
+| Name              | Privacy | Type                                  | Default | Description                                                                                                                                                                                                   | Inherited From    |
+| ----------------- | ------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `modal`           | public  | `boolean`                             | `false` | Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event. |                   |
+| `hidden`          | public  | `boolean`                             | `false` | The hidden state of the element.                                                                                                                                                                              |                   |
+| `noFocusTrap`     | public  | `boolean`                             | `false` | Indicates that the dialog should not trap focus.                                                                                                                                                              |                   |
+| `ariaDescribedby` | public  | `string`                              |         | The id of the element describing the dialog.                                                                                                                                                                  |                   |
+| `ariaLabelledby`  | public  | `string`                              |         | The id of the element labeling the dialog.                                                                                                                                                                    |                   |
+| `ariaLabel`       | public  | `string`                              |         | The label surfaced to assistive technologies.                                                                                                                                                                 |                   |
+| `$presentation`   | public  | `ComponentPresentation or null`       |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                                                       | FoundationElement |
+| `template`        | public  | `ElementViewTemplate or void or null` |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.                                    | FoundationElement |
+| `styles`          | public  | `ElementStyles or void or null`       |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.                           | FoundationElement |
 
 #### Methods
 
@@ -98,7 +97,7 @@ export const myDialog = Dialog.compose({
 | ------------------ | --------------- | -------------- |
 |                    | modal           |                |
 |                    | hidden          |                |
-| `trap-focus`       | trapFocus       |                |
+| `no-focus-trap`    | noFocusTrap     |                |
 | `aria-describedby` | ariaDescribedby |                |
 | `aria-labelledby`  | ariaLabelledby  |                |
 | `aria-label`       | ariaLabel       |                |
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
index e736890eef7..837ee764d9e 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
@@ -128,27 +128,27 @@ describe("Dialog", () => {
         await disconnect();
     });
 
-    it("should add an attribute of `trap-focus` when trapFocus is true", async () => {
+    it("should add an attribute of `no-focus-trap` when noFocusTrap is true", async () => {
         const { element, connect, disconnect } = await setup();
 
-        element.trapFocus = true;
+        element.noFocusTrap = true;
 
         await connect();
         await Updates.next();
 
-        expect(element.hasAttribute("trap-focus")).to.equal(true);
+        expect(element.hasAttribute("no-focus-trap")).to.equal(true);
 
         await disconnect();
     });
 
-    it("should add a default attribute of `trap-focus` when trapFocus not defined", async () => {
+    it("should NOT add a default attribute of `no-focus-trap` when noFocusTrap not defined", async () => {
         const { element, connect, disconnect } = await setup();
 
         await connect();
         await Updates.next();
 
-        expect(element.trapFocus).to.equal(true);
-        expect(element.hasAttribute("trap-focus")).to.equal(true);
+        expect(element.noFocusTrap).to.equal(false);
+        expect(element.hasAttribute("no-focus-trap")).to.equal(false);
 
         await disconnect();
     });
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.ts b/packages/web-components/fast-foundation/src/dialog/dialog.ts
index f8af810fe78..c45657fe2de 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.ts
@@ -40,16 +40,16 @@ export class Dialog extends FoundationElement {
     public hidden: boolean = false;
 
     /**
-     * Indicates that the dialog should trap focus.
+     * Indicates that the dialog should not trap focus.
      *
      * @public
      * @defaultValue - true
      * @remarks
-     * HTML Attribute: trap-focus
+     * HTML Attribute: no-focus-trap
      */
-    @attr({ attribute: "trap-focus", mode: "boolean" })
-    public trapFocus: boolean = true;
-    protected trapFocusChanged = (): void => {
+    @attr({ attribute: "no-focus-trap", mode: "boolean" })
+    public noFocusTrap: boolean = false;
+    private noFocusTrapChanged = (): void => {
         if ((this as FoundationElement).$fastController.isConnected) {
             this.updateTrapFocus();
         }
@@ -190,7 +190,7 @@ export class Dialog extends FoundationElement {
     };
 
     private handleTabKeyDown = (e: KeyboardEvent): void => {
-        if (!this.trapFocus || this.hidden) {
+        if (this.noFocusTrap || this.hidden) {
             return;
         }
 
@@ -250,7 +250,7 @@ export class Dialog extends FoundationElement {
      * we should we be active trapping focus
      */
     private shouldTrapFocus = (): boolean => {
-        return this.trapFocus && !this.hidden;
+        return !this.noFocusTrap && !this.hidden;
     };
 
     /**

From 7bb276e7b18321abd738b1d68ebf450ff3b54ec9 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Thu, 26 May 2022 09:39:54 -0700
Subject: [PATCH 127/135] update SSR npmignore file w/ new project structure
 (#6017)

* update npmignore file w/ new project structure

* Change files

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...ft-fast-ssr-13ec7f53-e846-46e1-890c-e36f781eeb32.json | 7 +++++++
 packages/web-components/fast-ssr/.npmignore              | 9 ++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 change/@microsoft-fast-ssr-13ec7f53-e846-46e1-890c-e36f781eeb32.json

diff --git a/change/@microsoft-fast-ssr-13ec7f53-e846-46e1-890c-e36f781eeb32.json b/change/@microsoft-fast-ssr-13ec7f53-e846-46e1-890c-e36f781eeb32.json
new file mode 100644
index 00000000000..639ad81b210
--- /dev/null
+++ b/change/@microsoft-fast-ssr-13ec7f53-e846-46e1-890c-e36f781eeb32.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update npmignore file w/ new project structure",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-ssr/.npmignore b/packages/web-components/fast-ssr/.npmignore
index 4037e8e7be9..37d8d8ab395 100644
--- a/packages/web-components/fast-ssr/.npmignore
+++ b/packages/web-components/fast-ssr/.npmignore
@@ -1,2 +1,9 @@
-test
 server
+temp
+src
+*.spec.js
+api-extractor.json
+.eslintrc.cjs
+.prettierignore
+playwright.config.cjs
+tsconfig.json

From 30950b341e37ac43146b2caa974f9f89b580f396 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Thu, 26 May 2022 10:30:46 -0700
Subject: [PATCH 128/135] fix: add support for foundation components to SSR DOM
 shim (#6031)

* add files and foundation dev dependency

* fixing issue where getter and static property "attributes" was causing static to clobber the getter

* removing style utilities

* adding uninstall dom shim test util

* adding foundation DOM shim

* Revert "removing style utilities"

This reverts commit bfa5816d72db627f72c5793dff45805af97133a3.

* deprecate styling utilities and hard-code focus-visible

* fixing errors in foundation element rendering

* cleans up foundation-dom-shim spec file

* adding un-install dom shim

* adding exports field for foundation shim and install-foundation-shim

* Change files

* remove foundation DOM shim and integrate it into minimal DOM shim

* fixing deprecation notice

* remove uninstall-dom-shim because it is no longer needed

* removing foundation DOM shim

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...-a3b61195-c74e-48ec-b391-f616432516b0.json |  7 ++
 ...-d198a471-fdb9-442e-affa-97390bd73d95.json |  7 ++
 .../fast-foundation/docs/api-report.md        | 12 ++--
 .../src/utilities/style/disabled.ts           |  1 +
 .../src/utilities/style/display.ts            |  3 +
 .../src/utilities/style/focus.ts              | 10 +--
 packages/web-components/fast-ssr/.npmignore   |  4 +-
 packages/web-components/fast-ssr/package.json |  1 +
 .../fast-ssr/src/dom-shim.spec.ts             | 72 +++++++++++++++++++
 .../web-components/fast-ssr/src/dom-shim.ts   | 47 +++++++++---
 .../elemenent-renderer.spec.ts                |  2 +-
 .../fast-ssr/src/install-dom-shim.ts          |  4 +-
 .../template-renderer.spec.ts                 |  2 +-
 .../consolidate.ts}                           |  0
 14 files changed, 143 insertions(+), 29 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-a3b61195-c74e-48ec-b391-f616432516b0.json
 create mode 100644 change/@microsoft-fast-ssr-d198a471-fdb9-442e-affa-97390bd73d95.json
 rename packages/web-components/fast-ssr/src/{test-utils.ts => test-utilities/consolidate.ts} (100%)

diff --git a/change/@microsoft-fast-foundation-a3b61195-c74e-48ec-b391-f616432516b0.json b/change/@microsoft-fast-foundation-a3b61195-c74e-48ec-b391-f616432516b0.json
new file mode 100644
index 00000000000..227a05d63a1
--- /dev/null
+++ b/change/@microsoft-fast-foundation-a3b61195-c74e-48ec-b391-f616432516b0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Deprecates style utilities and hard-codes focus-visible value",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-ssr-d198a471-fdb9-442e-affa-97390bd73d95.json b/change/@microsoft-fast-ssr-d198a471-fdb9-442e-affa-97390bd73d95.json
new file mode 100644
index 00000000000..6b9ccfae817
--- /dev/null
+++ b/change/@microsoft-fast-ssr-d198a471-fdb9-442e-affa-97390bd73d95.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Adds DOM shim support for APIs in @microsoft/fast-foundation",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index fda1989628f..8d9b2c18641 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -679,7 +679,7 @@ export interface CSSDesignToken<T extends string | number | boolean | BigInteger
     readonly cssCustomProperty: string;
 }
 
-// @public
+// @public @deprecated
 export type CSSDisplayPropertyValue = "block" | "contents" | "flex" | "grid" | "inherit" | "initial" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table" | "list-item" | "none" | "run-in" | "table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row" | "table-row-group";
 
 // @public
@@ -1092,7 +1092,7 @@ export class Dialog extends FoundationElement {
 // @public
 export const dialogTemplate: FoundationElementTemplate<ViewTemplate<Dialog>>;
 
-// @public
+// @public @deprecated
 export const disabledCursor = "not-allowed";
 
 // @public
@@ -1115,7 +1115,7 @@ export class Disclosure extends FoundationElement {
 // @public
 export const disclosureTemplate: FoundationElementTemplate<ViewTemplate<Disclosure>>;
 
-// @public
+// @public @deprecated
 export function display(displayValue: CSSDisplayPropertyValue): string;
 
 // @public
@@ -1241,8 +1241,8 @@ export const FlyoutPosTop: AnchoredRegionConfig;
 // @public
 export const FlyoutPosTopFill: AnchoredRegionConfig;
 
-// @public
-export const focusVisible: string;
+// @public @deprecated
+export const focusVisible = "focus-visible";
 
 // @public
 export const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
@@ -1373,7 +1373,7 @@ export type GenerateHeaderOptions = typeof GenerateHeaderOptions[keyof typeof Ge
 // @public
 export const getDirection: (rootNode: HTMLElement) => Direction;
 
-// @public
+// @public @deprecated
 export const hidden = ":host([hidden]){display:none}";
 
 // @public
diff --git a/packages/web-components/fast-foundation/src/utilities/style/disabled.ts b/packages/web-components/fast-foundation/src/utilities/style/disabled.ts
index a304953b64e..6009e0bf775 100644
--- a/packages/web-components/fast-foundation/src/utilities/style/disabled.ts
+++ b/packages/web-components/fast-foundation/src/utilities/style/disabled.ts
@@ -1,5 +1,6 @@
 /**
  * The CSS value for disabled cursors.
  * @public
+ * @deprecated - fast-foundation is removing styling utilities
  */
 export const disabledCursor = "not-allowed";
diff --git a/packages/web-components/fast-foundation/src/utilities/style/display.ts b/packages/web-components/fast-foundation/src/utilities/style/display.ts
index 26859a147b6..a3c743e1e13 100644
--- a/packages/web-components/fast-foundation/src/utilities/style/display.ts
+++ b/packages/web-components/fast-foundation/src/utilities/style/display.ts
@@ -1,6 +1,7 @@
 /**
  * Define all possible CSS display values.
  * @public
+ * @deprecated - fast-foundation is removing styling utilities
  */
 export type CSSDisplayPropertyValue =
     | "block"
@@ -30,6 +31,7 @@ export type CSSDisplayPropertyValue =
 /**
  * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
  * @public
+ * @deprecated - fast-foundation is removing styling utilities
  */
 export const hidden = `:host([hidden]){display:none}`;
 
@@ -38,6 +40,7 @@ export const hidden = `:host([hidden]){display:none}`;
  * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
  * @param display - The CSS display property value
  * @public
+ * @deprecated - fast-foundation is removing styling utilities
  */
 export function display(displayValue: CSSDisplayPropertyValue): string {
     return `${hidden}:host{display:${displayValue}}`;
diff --git a/packages/web-components/fast-foundation/src/utilities/style/focus.ts b/packages/web-components/fast-foundation/src/utilities/style/focus.ts
index d7e001612c6..bfe6cfa0944 100644
--- a/packages/web-components/fast-foundation/src/utilities/style/focus.ts
+++ b/packages/web-components/fast-foundation/src/utilities/style/focus.ts
@@ -1,10 +1,6 @@
-import { canUseFocusVisible } from "@microsoft/fast-web-utilities";
-
 /**
- * The string representing the focus selector to be used. Value
- * will be "focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
- * is supported and "focus" when it is not.
- *
+ * This will always evaluate to 'focus-visible' due to modern browser support.
  * @public
+ * @deprecated - fast-foundation is removing styling utilities
  */
-export const focusVisible = canUseFocusVisible() ? "focus-visible" : "focus";
+export const focusVisible = "focus-visible";
diff --git a/packages/web-components/fast-ssr/.npmignore b/packages/web-components/fast-ssr/.npmignore
index 37d8d8ab395..f30392d5382 100644
--- a/packages/web-components/fast-ssr/.npmignore
+++ b/packages/web-components/fast-ssr/.npmignore
@@ -1,3 +1,5 @@
+test
+test-utilities
 server
 temp
 src
@@ -6,4 +8,4 @@ api-extractor.json
 .eslintrc.cjs
 .prettierignore
 playwright.config.cjs
-tsconfig.json
+tsconfig.json
\ No newline at end of file
diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json
index 28cb6385b7c..904e33f7c0e 100644
--- a/packages/web-components/fast-ssr/package.json
+++ b/packages/web-components/fast-ssr/package.json
@@ -56,6 +56,7 @@
   },
   "devDependencies": {
     "@microsoft/fast-element": "^1.10.1",
+    "@microsoft/fast-foundation": "^2.46.2",
     "@microsoft/api-extractor": "7.24.2",
     "@playwright/test": "^1.20.1",
     "@types/express": "^4.17.13",
diff --git a/packages/web-components/fast-ssr/src/dom-shim.spec.ts b/packages/web-components/fast-ssr/src/dom-shim.spec.ts
index 66a30db0ae3..9e6ef338f59 100644
--- a/packages/web-components/fast-ssr/src/dom-shim.spec.ts
+++ b/packages/web-components/fast-ssr/src/dom-shim.spec.ts
@@ -1,5 +1,9 @@
+import "./install-dom-shim.js";
 import { expect, test } from "@playwright/test";
 import  { createWindow } from "./dom-shim.js";
+import * as Foundation from "@microsoft/fast-foundation";
+import { ViewTemplate } from "@microsoft/fast-element";
+import fastSSR from "./exports.js";
 
 test.describe("createWindow", () => {
     test("should create a window with a document property that is an instance of the window's Document constructor", () => {
@@ -21,3 +25,71 @@ test.describe("createWindow", () => {
         expect(windowOverride.customElements instanceof MyRegistry).toBe(true);
     });
 })
+
+const designSystem = Foundation.DesignSystem.getOrCreate();
+
+const componentsAndTemplates: [typeof Foundation.FoundationElement, ViewTemplate | Foundation.FoundationElementTemplate<any>][] = [
+    [Foundation.Accordion, Foundation.accordionTemplate],
+    [Foundation.AccordionItem, Foundation.accordionItemTemplate],
+    [Foundation.Anchor, Foundation.anchorTemplate],
+    [Foundation.AnchoredRegion, Foundation.anchoredRegionTemplate],
+    [Foundation.Avatar, Foundation.avatarTemplate],
+    [Foundation.Badge, Foundation.badgeTemplate],
+    [Foundation.Breadcrumb, Foundation.breadcrumbTemplate],
+    [Foundation.BreadcrumbItem, Foundation.breadcrumbItemTemplate],
+    [Foundation.Button, Foundation.buttonTemplate],
+    [Foundation.Calendar, Foundation.calendarTemplate],
+    [Foundation.Card, Foundation.cardTemplate],
+    [Foundation.Checkbox, Foundation.checkboxTemplate],
+    [Foundation.Combobox, Foundation.comboboxTemplate],
+    [Foundation.DataGrid, Foundation.dataGridTemplate],
+    [Foundation.DataGridCell, Foundation.dataGridCellTemplate],
+    [Foundation.DataGridRow, Foundation.dataGridRowTemplate],
+    [Foundation.Dialog, Foundation.dialogTemplate],
+    [Foundation.Disclosure, Foundation.disclosureTemplate],
+    [Foundation.Divider, Foundation.dividerTemplate],
+    [Foundation.Flipper, Foundation.flipperTemplate],
+    [Foundation.HorizontalScroll, Foundation.horizontalScrollTemplate],
+    [Foundation.Listbox as unknown as typeof Foundation.FoundationElement, Foundation.listboxTemplate],
+    [Foundation.ListboxOption, Foundation.listboxOptionTemplate],
+    [Foundation.Menu, Foundation.menuTemplate],
+    [Foundation.MenuItem, Foundation.menuItemTemplate],
+    [Foundation.NumberField, Foundation.numberFieldTemplate],
+    [Foundation.Picker, Foundation.pickerTemplate],
+    [Foundation.PickerList, Foundation.pickerListTemplate],
+    [Foundation.PickerListItem, Foundation.pickerListItemTemplate],
+    [Foundation.PickerMenu, Foundation.pickerMenuTemplate],
+    [Foundation.PickerMenuOption, Foundation.pickerMenuOptionTemplate],
+    [Foundation.BaseProgress, Foundation.progressTemplate],
+    [Foundation.Radio, Foundation.radioTemplate],
+    [Foundation.RadioGroup, Foundation.radioGroupTemplate],
+    [Foundation.Search, Foundation.searchTemplate],
+    [Foundation.Skeleton, Foundation.skeletonTemplate],
+    [Foundation.Slider, Foundation.sliderTemplate],
+    [Foundation.SliderLabel, Foundation.sliderLabelTemplate],
+    [Foundation.Switch, Foundation.switchTemplate],
+    [Foundation.Tab, Foundation.tabTemplate],
+    [Foundation.TabPanel, Foundation.tabPanelTemplate],
+    [Foundation.Tabs, Foundation.tabsTemplate],
+    [Foundation.TextArea, Foundation.textAreaTemplate],
+    [Foundation.TextField, Foundation.textFieldTemplate],
+    [Foundation.Toolbar, Foundation.toolbarTemplate],
+    [Foundation.TreeItem, Foundation.treeItemTemplate],
+    [Foundation.TreeView, Foundation.treeViewTemplate]
+];
+test.describe("The foundation DOM shim", () => {
+    componentsAndTemplates.forEach(([ctor, template]) => {
+        const baseName = ctor.name.toLowerCase();
+        const prefix = "fast";
+        designSystem.withPrefix(prefix).register(ctor.compose({
+            baseName,
+            template
+        }));
+
+        test(`should support construction and connection of the ${ctor.name} component and template during SSR rendering`, () => {
+            const { templateRenderer, defaultRenderInfo } = fastSSR();
+            const templateString = `<${prefix}-${baseName}></${prefix}-${baseName}>`;
+            expect(() => templateRenderer.render(templateString, defaultRenderInfo)).not.toThrow();
+        });
+    });
+})
diff --git a/packages/web-components/fast-ssr/src/dom-shim.ts b/packages/web-components/fast-ssr/src/dom-shim.ts
index b6a7f3ac8e3..aaf334de6e5 100644
--- a/packages/web-components/fast-ssr/src/dom-shim.ts
+++ b/packages/web-components/fast-ssr/src/dom-shim.ts
@@ -6,17 +6,25 @@
 /**
  * @beta
  */
-export class Element {}
+export class Node {}
+
+/**
+ * @beta
+ */
+export class Element extends Node {}
 
 /**
  * @beta
  */
 export abstract class HTMLElement extends Element {
-    private static attributes: WeakMap<HTMLElement, Map<string, string>> = new WeakMap();
+    private static elementAttributes: WeakMap<
+        HTMLElement,
+        Map<string, string>
+    > = new WeakMap();
     private static getOrCreateAttributesForElement(element: HTMLElement) {
-        let attrs = HTMLElement.attributes.get(element);
+        let attrs = HTMLElement.elementAttributes.get(element);
         if (!attrs) {
-            HTMLElement.attributes.set(element, (attrs = new Map()));
+            HTMLElement.elementAttributes.set(element, (attrs = new Map()));
         }
         return attrs;
     }
@@ -76,9 +84,7 @@ export class ShadowRoot {}
  * @beta
  */
 export class Document {
-    get adoptedStyleSheets() {
-        return [];
-    }
+    public adoptedStyleSheets: ReadonlyArray<CSSStyleSheet> = [];
     createTreeWalker() {
         return {};
     }
@@ -95,6 +101,12 @@ export class Document {
  */
 export class CSSStyleSheet {
     replace() {}
+    public readonly cssRules: CSSRule[] = [];
+    insertRule(rule: CSSRule, index: number = 0) {
+        this.cssRules.splice(index, 0, rule);
+
+        return index;
+    }
 }
 
 /**
@@ -131,6 +143,17 @@ export class MutationObserver {
     observe() {}
 }
 
+/**
+ * Shim of MediaQueryList.
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList} */
+export class MediaQueryList {
+    /** No-op */
+    addListener() {}
+
+    /** Always false */
+    matches = false;
+}
+
 /**
  * Creates a window object.
  * @param props - Additional properties to expose on the window.
@@ -141,6 +164,7 @@ export function createWindow(
     props: { [key: string]: unknown } = {}
 ): { [key: string]: unknown } {
     const window = {
+        Node,
         Element,
         HTMLElement,
         Document,
@@ -148,6 +172,8 @@ export function createWindow(
         ShadowRoot,
         CustomElementRegistry,
         MutationObserver,
+        MediaQueryList,
+        matchMedia: () => new MediaQueryList(),
 
         // Set below
         window: undefined as unknown,
@@ -165,14 +191,13 @@ export function createWindow(
 }
 
 /**
- * Constructs a window object and installs it on the global, exposing properties directly on globalThis and globalthis.window
- * @param props - Additional properties to expose on the window.
+ * Installs a window object on the global, exposing properties directly on globalThis and globalthis.window
+ * @param window - The Window object to install
  *
  * @beta
  */
-export function installWindowOnGlobal(props: { [key: string]: unknown } = {}) {
+export function installWindowOnGlobal(window: { [key: string]: unknown }) {
     if (globalThis.window === undefined) {
-        const window = createWindow(props);
         Object.assign(globalThis, window);
         globalThis.window = globalThis as typeof globalThis & Window;
     }
diff --git a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
index f9887b3bb93..941310d2a42 100644
--- a/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/element-renderer/elemenent-renderer.spec.ts
@@ -3,7 +3,7 @@ import { FASTElement, customElement, css, html, attr } from "@microsoft/fast-ele
 import { expect, test } from '@playwright/test';
 import { FASTElementRenderer } from "./fast-element-renderer.js";
 import fastSSR from "../exports.js";
-import { consolidate } from "../test-utils.js";
+import { consolidate } from "../test-utilities/consolidate.js";
 
 
 @customElement({
diff --git a/packages/web-components/fast-ssr/src/install-dom-shim.ts b/packages/web-components/fast-ssr/src/install-dom-shim.ts
index 68e44cd26b2..2ce958e992d 100644
--- a/packages/web-components/fast-ssr/src/install-dom-shim.ts
+++ b/packages/web-components/fast-ssr/src/install-dom-shim.ts
@@ -1,3 +1,3 @@
-import { installWindowOnGlobal } from "./dom-shim.js";
+import { createWindow, installWindowOnGlobal } from "./dom-shim.js";
 
-installWindowOnGlobal();
+installWindowOnGlobal(createWindow());
diff --git a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
index dacdf196ca9..ce6dc7a1ba4 100644
--- a/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
+++ b/packages/web-components/fast-ssr/src/template-renderer/template-renderer.spec.ts
@@ -2,7 +2,7 @@ import "../install-dom-shim.js";
 import { child, children, customElement, ExecutionContext, FASTElement, html, item, ref, repeat, slotted, when } from "@microsoft/fast-element";
 import { expect, test } from "@playwright/test";
 import fastSSR from "../exports.js";
-import { consolidate } from "../test-utils.js";
+import { consolidate } from "../test-utilities/consolidate.js";
 import { TemplateRenderer } from "./template-renderer.js";
 
 @customElement("hello-world")
diff --git a/packages/web-components/fast-ssr/src/test-utils.ts b/packages/web-components/fast-ssr/src/test-utilities/consolidate.ts
similarity index 100%
rename from packages/web-components/fast-ssr/src/test-utils.ts
rename to packages/web-components/fast-ssr/src/test-utilities/consolidate.ts

From c73440fe78f660c457c26e3625fba0a13e9060a1 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Thu, 26 May 2022 16:13:20 -0400
Subject: [PATCH 129/135] docs: update a few readme files (#6035)

* docs: update a few readme files

* Change files

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
---
 README.md                                     | 45 ++++++++++++-------
 ...-368645c9-4e93-418a-83a7-73d35dad4c33.json |  7 +++
 packages/web-components/README.md             | 31 ++++++++-----
 packages/web-components/fast-router/README.md | 35 ++-------------
 4 files changed, 59 insertions(+), 59 deletions(-)
 create mode 100644 change/@microsoft-fast-router-368645c9-4e93-418a-83a7-73d35dad4c33.json

diff --git a/README.md b/README.md
index 4ed62a6d48c..6afcb2035d3 100644
--- a/README.md
+++ b/README.md
@@ -13,11 +13,8 @@
 [![Validate PRs](https://github.com/microsoft/fast/actions/workflows/ci-validate-pr.yml/badge.svg)](https://github.com/microsoft/fast/actions/workflows/ci-validate-pr.yml)
 [![Validate Platforms/Browsers](https://github.com/microsoft/fast/actions/workflows/ci-validate-platforms.yml/badge.svg)](https://github.com/microsoft/fast/actions/workflows/ci-validate-platforms.yml)
 
-[![Deploy Documentation (staging)](https://github.com/microsoft/fast/actions/workflows/cd-deploy-www-staging.yml/badge.svg)](https://github.com/microsoft/fast/actions/workflows/cd-deploy-www-staging.yml)
-[![Deploy Documentation (production)](https://github.com/microsoft/fast/actions/workflows/cd-deploy-www-production.yml/badge.svg)](https://github.com/microsoft/fast/actions/workflows/cd-deploy-www-production.yml)
+[![Deploy Documentation](https://github.com/microsoft/fast/actions/workflows/cd-deploy-www-production.yml/badge.svg)](https://github.com/microsoft/fast/actions/workflows/cd-deploy-www-production.yml)
 [![Deploy CDN](https://github.com/microsoft/fast/actions/workflows/cd-deploy-cdn.yml/badge.svg)](https://github.com/microsoft/fast/actions/workflows/cd-deploy-cdn.yml)
-[![Deploy Component Explorer](https://github.com/microsoft/fast/actions/workflows/cd-deploy-explore-staging.yml/badge.svg)](https://github.com/microsoft/fast/actions/workflows/cd-deploy-explore-staging.yml)
-[![Deploy Color Explorer](https://github.com/microsoft/fast/actions/workflows/cd-deploy-color-staging.yml/badge.svg)](https://github.com/microsoft/fast/actions/workflows/cd-deploy-color-staging.yml)
 
 [![Discord](https://img.shields.io/badge/chat%20on-discord-7289da.svg)](https://discord.gg/FcSNfg4)
 [![Twitter](https://img.shields.io/twitter/follow/fast_ui.svg?style=social&label=Follow)](https://twitter.com/intent/follow?screen_name=fast_ui)
@@ -32,10 +29,12 @@ FAST is a collection of technologies built on Web Components and modern Web Stan
 
 **TL;DR**
 
-* Create reusable UI components based on web component standards.
-* Use our standard library of pre-built web components in your apps.
-* Build your own design system without re-implementing component logic.
-* Integrate with any front-end framework or build system.
+* Create reusable UI components with `@microsoft/fast-element`, all based on W3C Web Component standards.
+* Use our `@microsoft/fast-foundation` library to rapidly build [W3C OpenUI-based](https://open-ui.org/) design systems without re-implementing component logic.
+* Leverage modern, W3C standards-based SSR for Web Components by plugging in `@microsoft/fast-ssr`.
+* Bring all the pieces together to build SPAs and rich experiences with our Web Components router by installing `@microsoft/fast-router`.
+* React users can drop in `@microsoft/fast-react-wrapper` to turn any Web Component into a native React component.
+* Integrate FAST Web Components with any library, framework, or build system. You can adopt incrementally without re-writing your existing systems.
 
 For an in-depth explanation of FAST [see our docs introduction](https://www.fast.design/docs/introduction/).
 
@@ -57,6 +56,20 @@ The `@microsoft/fast-foundation` package is a library of Web Component classes,
 
 This package does not export Web Components registered as [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) - it exports parts and pieces intended to be *composed* into Web Components, allowing you to implement your own design language by simply applying CSS styles and behaviors without having to write all the JavaScript that's involved in building production-quality component implementations.
 
+### `@microsoft/fast-ssr`
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-ssr.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-ssr)
+
+The `@microsoft/fast-ssr` package contains a NodeJS solution for rendering FAST templates and components. While primarily intended for supporting server-side rendering (SSR) scenarios, it also allows FAST to be used as a general purpose HTML templating solution.
+
+### `@microsoft/fast-router`
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-foundation.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-router)
+
+The `@microsoft/fast-router` package contains a history-based navigation and routing solution designed around Web Components. By using `fast-router`, you can create multi-page and full application experiences. The router works with any Web Components, but has special support for Web Components built on FAST.
+
 ### `@fluentui/web-components`
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -64,18 +77,22 @@ This package does not export Web Components registered as [custom elements](http
 
 `@fluentui/web-components` is a library of Web Components that *composes* `@microsoft/fast-foundation`. `@fluentui/web-components` makes use of different stylesheets and may include components that specifically support Microsoft's Fluent design language.
 
-The source for `@fluentui/web-components` is hosted in [the Fluent UI monorepo](https://github.com/microsoft/fluentui/tree/master/packages/web-components).
+The Fluent UI Web Components are built on `@microsoft/fast-element` and `@microsoft/fast-foundation`. The source for `@fluentui/web-components` is hosted in [the Fluent UI monorepo](https://github.com/microsoft/fluentui/tree/master/packages/web-components).
 
 ## Getting Started
 
 We hope you're excited by the possibilities that FAST presents. But, you may be wondering where to start. Here are a few statements that describe various members of our community. We recommend that you pick the statement you most identify with and follow the links where they lead. You can always come back and explore another topic at any time.
 
+* "I just want ready-made components!"
+  * [Check out the FluentUI Web Components.](https://docs.microsoft.com/en-us/fluent-ui/web-components/)
 * "I want to build my own design system."
   * [Jump to the design system docs.](https://fast.design/docs/design-systems/overview)
 * "I want to build my own components."
   * [Jump to the fast-element docs.](https://fast.design/docs/fast-element/getting-started)
 * "I need to integrate FAST with another framework or build system."
   * [Jump to the integration docs.](https://fast.design/docs/integrations/introduction)
+* "I want to look at a quick reference."
+  * [Jump to the Cheat Sheet](https://fast.design/docs/resources/cheat-sheet)
 
 ## Joining the Community
 
@@ -96,15 +113,11 @@ This principle of being unopinionated manifests in several important ways includ
 * A flat component architecture that lets you compose what you need without struggling with rigid patterns and complex objects.
 * Separating base components from styles and design systems to support multiple implementations without re-writing or duplicating styles. Use the design system to customize existing styled components, or build your own styles, with your design system, without having to rebuild or duplicate the base components.
 * Framework agnostic tooling that lets you use our development tools with any view framework.
-* The ability to replace almost any FAST package with your package of choice. Get started with our animation package and add more as you need them. Alternatively, use our suite of packages to build your next project from the ground up; it's your call.
-
-### UI development and style guide tools
-
-When developing components and views, excellent development tooling can make all the difference. FAST offers development and style guide tools that work with FAST components, components from other frameworks, or your components.
+* The ability to replace almost any FAST package with your package of choice. Just use one package or leverage our entire suite of packages to build your next project from the ground up; it's your call.
 
-Try out component properties with an auto-generated property UI, get a live preview of the code based on any property’s configuration, preview localization (RTL/LTR) and themes, and preview component compositing with a transparency grid.
+### Tooling
 
-Also, we built FAST development tools from re-usable packages, so if you have special needs, you can build your tools from the same shared libraries.
+Leverage our (upcoming!) FAST CLI to accelerate your design or development workflow. You can create new projects from scratch, create design systems, and add or customize from dozens of components in our foundation library.
 
 ### Bring your design system
 
diff --git a/change/@microsoft-fast-router-368645c9-4e93-418a-83a7-73d35dad4c33.json b/change/@microsoft-fast-router-368645c9-4e93-418a-83a7-73d35dad4c33.json
new file mode 100644
index 00000000000..7a43aa39f75
--- /dev/null
+++ b/change/@microsoft-fast-router-368645c9-4e93-418a-83a7-73d35dad4c33.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: update a few readme files",
+  "packageName": "@microsoft/fast-router",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/web-components/README.md b/packages/web-components/README.md
index baf9b3da1c6..3713906e648 100644
--- a/packages/web-components/README.md
+++ b/packages/web-components/README.md
@@ -2,32 +2,41 @@
 
 Our web component packages.
 
-## fast-element
+## `@microsoft/fast-element`
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-element.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-element)
 
-The `fast-element` library is a lightweight means to easily building performant, memory-efficient, standards-compliant Web Components. FAST Elements work in every major browser and can be used in combination with any front-end framework or even without a framework. To get up and running with `fast-element` see [the Getting Started guide](https://fast.design/docs/fast-element/getting-started).
+The `@microsoft/fast-element` library is a lightweight means to easily build performant, memory-efficient, standards-compliant Web Components. FAST Elements work in every major browser and can be used in combination with any front-end framework or even without a framework. To get up and running with `@microsoft/fast-element` see [the Getting Started guide](https://fast.design/docs/fast-element/getting-started).
 
-## fast-foundation
+## `@microsoft/fast-foundation`
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-foundation.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-foundation)
 
-The `fast-foundation` package is a library of Web Component classes, templates, and other utilities intended to be composed into registered Web Components by design systems (e.g. Fluent Design, Material Design, etc.). The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior.
+The `@microsoft/fast-foundation` package is a library of Web Component classes, templates, and other utilities intended to be composed into registered Web Components by design systems (e.g. Fluent Design, Material Design, etc.). The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior.
 
 This package does not export Web Components registered as [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) - it exports parts and pieces intended to be *composed* into Web Components, allowing you to implement your own design language by simply applying CSS styles and behaviors without having to write all the JavaScript that's involved in building production-quality component implementations.
 
-## fast-components
+## `@microsoft/fast-ssr`
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components)
+[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-ssr.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-ssr)
 
-`fast-components` is a library of Web Components that *composes* the exports of `fast-foundation` with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the [quick start](https://fast.design/docs/components/getting-started) to get started using the components.
+The `@microsoft/fast-ssr` package contains a NodeJS solution for rendering FAST templates and components. While primarily intended for supporting server-side rendering (SSR) scenarios, it also allows FAST to be used as a general purpose HTML templating solution.
+
+## `@microsoft/fast-router`
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-foundation.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-router)
+
+The `@microsoft/fast-router` package contains a history-based navigation and routing solution designed around Web Components. By using `fast-router`, you can create multi-page and full application experiences. The router works with any Web Components, but has special support for Web Components built on FAST.
+
+## `@fluentui/web-components`
 
-## fast-components-msft
-**This package has been moved to [FluentUI](https://github.com/microsoft/fluentui/) and has been renamed to `@fluentui/web-components`**
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft)
+[![npm version](https://badge.fury.io/js/%40fluentui%2Fweb-components.svg)](https://badge.fury.io/js/%40fluentui%2Fweb-components)
+
+`@fluentui/web-components` is a library of Web Components that *composes* `@microsoft/fast-foundation`. `@fluentui/web-components` makes use of different stylesheets and may include components that specifically support Microsoft's Fluent design language.
 
-`@fluentui/web-components` is a library of Web Components that *composes* `fast-foundation`. `@fluentui/web-components` uses the same custom element names as `fast-components`, but makes use of different stylesheets and may include components that specifically support Microsoft's Fluent design language.
+The Fluent UI Web Components are built on `@microsoft/fast-element` and `@microsoft/fast-foundation`. The source for `@fluentui/web-components` is hosted in [the Fluent UI monorepo](https://github.com/microsoft/fluentui/tree/master/packages/web-components).
\ No newline at end of file
diff --git a/packages/web-components/fast-router/README.md b/packages/web-components/fast-router/README.md
index 8cc8a9b78f4..32313357e3f 100644
--- a/packages/web-components/fast-router/README.md
+++ b/packages/web-components/fast-router/README.md
@@ -1,9 +1,6 @@
 # FAST Router
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-router.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-router)
-
-The `fast-router` package contains a history-based navigation and routing solution designed around web components. By using `fast-router`, you can create multi-page and full application experiences.
+The `@microsoft/fast-router` package contains a history-based navigation and routing solution designed around Web Components. By using `fast-router`, you can create multi-page and full application experiences. The router works with any Web Components, but has special support for Web Components built on FAST.
 
 ## Installation
 
@@ -27,36 +24,10 @@ import { FASTRouter } from '@microsoft/fast-router';
 
 Looking for a setup that integrates with a particular front-end framework or bundler? Check out [our integration docs](https://fast.design/docs/integrations/introduction).
 
-### From CDN
-
-A pre-bundled script that contains all APIs needed to use FAST Router and FAST Element is available on CDN. You can use this script by adding [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to the script element and then importing from the CDN.
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <script type="module">
-          import { FASTRouter } from "https://cdn.jsdelivr.net/npm/@microsoft/fast-router/dist/fast-router.min.js";
-
-          // your code here
-        </script>
-    </head>
-    <!-- ... -->
-</html>
-```
-
-The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:
-
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-router@0.2.11/dist/fast-router.min.js"></script>
-```
-
-:::note
-For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.
-:::
-
 ## Configuration at a Glance
 
+The router is currently in `alpha` while we address a few bugs, finish up some final polish, and write the full documentation. Below is a quick sample of how to configure the router, to help get you going while we complete the full documentation.
+
 #### A Sample Route Configuration
 
 ```ts

From eaa61db02e225554d924c0fb6328fc2dd79129f7 Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>
Date: Thu, 26 May 2022 16:59:24 -0400
Subject: [PATCH 130/135] feat: fast-element utilities, hooks, disposable, and
 binding observer improvements (#6030)

* chore: rebase to accept typescript and api-extractor updates

* feat: enable subscribing deeply to observables

* feat: introduce Disposable interface and use throughout fast-element

* test: add initial tests for makeObservable utility

* test: add initial tests for the watch utility

* feat: initial prototype of useState() and useEffect() hooks

* test: add tests for the useState() hook

* refactor: remove disconnect from BindingObserve and add  sync updates

* chore: fixing up file extension in tests and for disposable

* chore: various fixes for Node16 and package exports

* chore: update core web component library webpack and karma config

* Change files

* fix: temporary fix for site build

* chore: fix adaptive-ui build and test

* Change files

* Users/chhol/remove unnecessary site utilities (#6036)

* remove site util source directory and update website webpack loaders for assets

* fixing fast-foundation dependency version to install workspace version

* fixing test errors in fast-site-utilities

* removing eslint from site-utilties

* fixing path to spect files in adaptive-ui

* fixing color-explorer build

* remove babel-loader from website

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>

* Change files

* chore: remove prettier from site-utilities

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
Co-authored-by: Chris Holt <chhol@microsoft.com>
Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...-2d865848-cbf5-454f-bfe2-2a904e9166fe.json |   7 +
 ...-ba4890fd-3a1b-4c81-8060-f6ac19d90684.json |   7 +
 ...-196c098b-8b17-408f-9bc4-9627469a3812.json |   7 +
 ...-6efa560f-0eb8-4c21-a9b2-7a3898cde092.json |   7 +
 ...-d7930bff-1089-44f5-83f4-ed05b9159edf.json |   7 +
 ...-22404cd2-8e39-4a74-876f-f4fe73bd6300.json |   7 +
 packages/utilities/adaptive-ui/.eslintrc.json |   6 +-
 packages/utilities/adaptive-ui/.mocharc.json  |   2 +-
 .../utilities/adaptive-ui/api-extractor.json  |  10 +-
 packages/utilities/adaptive-ui/package.json   |   4 +-
 .../utilities/adaptive-ui/tsconfig.build.json |  11 -
 packages/utilities/adaptive-ui/tsconfig.json  |  16 +-
 .../utilities/adaptive-ui/tsconfig.test.json  |   8 -
 .../fast-react-wrapper/src/index.spec.tsx     |   2 +-
 .../fast-web-utilities/karma.conf.ts          |   7 +-
 .../utilities/fast-web-utilities/package.json |   2 +-
 .../{setup-browser.ts => setup-browser.cts}   |   0
 .../fast-web-utilities/src/aria.spec.ts       |   2 +-
 .../fast-web-utilities/src/array.spec.ts      |   2 +-
 .../src/class-names.spec.ts                   |   2 +-
 .../fast-web-utilities/src/dom.spec.ts        |   2 +-
 .../fast-web-utilities/src/html.spec.ts       |   2 +-
 .../fast-web-utilities/src/numbers.spec.ts    |   2 +-
 .../fast-web-utilities/src/query.spec.ts      |   2 +-
 .../src/rtl-scroll-converter.spec.ts          |   4 +-
 .../fast-web-utilities/src/strings.spec.ts    |   2 +-
 .../web-components/fast-element/.eslintrc.cjs |  20 -
 .../fast-element/.eslintrc.json               |  19 +
 .../fast-element/docs/api-report.md           |  13 +-
 .../fast-element/karma.conf.cjs               |  23 +-
 .../web-components/fast-element/package.json  |  19 +-
 .../{setup-browser.ts => setup-browser.cts}   |   0
 .../src/components/controller.spec.ts         |  18 +-
 .../src/components/fast-definitions.spec.ts   |   4 +-
 .../fast-element/src/debug.spec.ts            |   2 +-
 .../fast-element/src/hooks.spec.ts            |  97 ++++
 .../web-components/fast-element/src/hooks.ts  |  44 ++
 .../web-components/fast-element/src/index.ts  |   1 +
 .../fast-element/src/interfaces.ts            |  11 +
 .../src/observation/arrays.spec.ts            |  18 +-
 .../src/observation/execution-context.spec.ts |   2 +-
 .../src/observation/notifier.spec.ts          |   5 +-
 .../src/observation/observable.spec.ts        |  10 +-
 .../src/observation/observable.ts             |  41 +-
 .../src/observation/update-queue.spec.ts      |   2 +-
 .../fast-element/src/platform.spec.ts         |   2 +-
 .../fast-element/src/styles/styles.spec.ts    |  14 +-
 .../src/templating/binding.spec.ts            |  16 +-
 .../fast-element/src/templating/binding.ts    |   2 +-
 .../src/templating/children.spec.ts           |   8 +-
 .../src/templating/compiler.spec.ts           |  22 +-
 .../fast-element/src/templating/dom.ts        |   2 +-
 .../src/templating/repeat.spec.ts             |  10 +-
 .../fast-element/src/templating/repeat.ts     |   4 +-
 .../src/templating/slotted.spec.ts            |   8 +-
 .../src/templating/template.spec.ts           |  13 +-
 .../fast-element/src/templating/view.ts       |  15 +-
 .../fast-element/src/templating/when.spec.ts  |   6 +-
 .../fast-element/src/utilities.spec.ts        | 494 ++++++++++++++++++
 .../fast-element/src/utilities.ts             | 183 +++++++
 .../web-components/fast-element/tsconfig.json |   1 +
 .../fast-foundation/.eslintrc.json            |  10 -
 .../fast-foundation/docs/api-report.md        |   8 +-
 .../fast-foundation/karma.conf.cjs            |  23 +-
 .../fast-foundation/package.json              |   7 +-
 .../{setup-browser.ts => setup-browser.cts}   |   0
 .../src/accordion-item/accordion-item.spec.ts |   4 +-
 .../src/accordion/accordion.spec.ts           |   7 +-
 .../fast-foundation/src/anchor/anchor.spec.ts |   4 +-
 .../anchored-region/anchored-region.spec.ts   |   4 +-
 .../fast-foundation/src/badge/badge.spec.ts   |   4 +-
 .../breadcrumb-item/breadcrumb-item.spec.ts   |   4 +-
 .../src/breadcrumb/breadcrumb.spec.ts         |   6 +-
 .../fast-foundation/src/button/button.spec.ts |   4 +-
 .../src/calendar/calendar.spec.ts             |   8 +-
 .../src/checkbox/checkbox.spec.ts             |   4 +-
 .../src/combobox/combobox.spec.ts             |   6 +-
 .../src/data-grid/data-grid-cell.spec.ts      |   8 +-
 .../src/data-grid/data-grid-row.spec.ts       |   6 +-
 .../src/data-grid/data-grid.spec.ts           |   8 +-
 .../src/design-system/design-system.spec.ts   |  12 +-
 .../src/design-token/design-token.spec.ts     |   8 +-
 .../src/design-token/design-token.ts          |  12 +-
 .../src/di/di.containerconfiguration.spec.ts  |   2 +-
 .../src/di/di.exception.spec.ts               |   2 +-
 .../fast-foundation/src/di/di.get.spec.ts     |   2 +-
 .../fast-foundation/src/di/di.getAll.spec.ts  |   2 +-
 .../src/di/di.integration.spec.ts             |   2 +-
 .../fast-foundation/src/di/di.spec.ts         |   2 +-
 .../fast-foundation/src/dialog/dialog.spec.ts |   4 +-
 .../src/directives/reflect-attributes.spec.ts |   4 +-
 .../src/disclosure/disclosure.spec.ts         |   4 +-
 .../src/divider/divider.spec.ts               |   6 +-
 .../src/flipper/flipper.spec.ts               |   6 +-
 .../form-associated/form-associated.spec.ts   |   4 +-
 .../foundation-element.spec.ts                |   8 +-
 .../horizontal-scroll.spec.ts                 |   4 +-
 .../fast-foundation/src/index.rollup.debug.ts |   4 +-
 .../fast-foundation/src/index.rollup.ts       |   2 +-
 .../fast-foundation/src/index.ts              |   3 +
 .../src/listbox/listbox.spec.ts               |   8 +-
 .../src/menu-item/menu-item.spec.ts           |   8 +-
 .../fast-foundation/src/menu/menu.spec.ts     |   6 +-
 .../src/number-field/number-field.spec.ts     |   4 +-
 .../fast-foundation/src/picker/picker.spec.ts |   4 +-
 .../src/progress-ring/progress-ring.spec.ts   |   6 +-
 .../src/progress/progress.spec.ts             |   5 +-
 .../src/radio-group/radio-group.spec.ts       |   6 +-
 .../fast-foundation/src/radio/radio.spec.ts   |   4 +-
 .../fast-foundation/src/search/search.spec.ts |   6 +-
 .../src/slider-label/slider-label.spec.ts     |   4 +-
 .../fast-foundation/src/slider/slider.spec.ts |   4 +-
 .../fast-foundation/src/switch/switch.spec.ts |   4 +-
 .../src/tab-panel/tab-panel.spec.ts           |   4 +-
 .../fast-foundation/src/tab/tab.spec.ts       |   4 +-
 .../fast-foundation/src/tabs/tabs.spec.ts     |   8 +-
 .../src/testing/fixture.spec.ts               |   2 +-
 .../src/text-area/text-area.spec.ts           |   4 +-
 .../src/text-field/text-field.spec.ts         |   6 +-
 .../src/toolbar/toolbar.spec.ts               |   4 +-
 .../src/tooltip/tooltip.spec.ts               |   8 +-
 .../src/tree-item/tree-item.spec.ts           |   4 +-
 .../src/tree-view/tree-view.spec.ts           |   6 +-
 .../src/utilities/composed-contains.spec.ts   |  66 ---
 .../src/utilities/composed-contains.ts        |  26 -
 .../src/utilities/composed-parent.spec.ts     |  14 -
 .../src/utilities/composed-parent.ts          |  25 -
 .../fast-foundation/src/utilities/index.ts    |   2 -
 .../src/utilities/utilities.spec.ts           |   6 +-
 .../fast-foundation/tsconfig.json             |   1 +
 .../web-components/fast-router/.eslintrc.json |   4 -
 .../web-components/fast-router/karma.conf.cjs |  23 +-
 .../web-components/fast-router/package.json   |   5 +-
 .../{setup-browser.ts => setup-browser.cts}   |   0
 .../fast-router/src/recognizer.spec.ts        |   2 +-
 .../web-components/fast-router/src/router.ts  |  20 +-
 .../web-components/fast-router/tsconfig.json  |   1 +
 sites/fast-website/babel.config.js            |  10 -
 sites/fast-website/package.json               |   3 -
 sites/fast-website/webpack.common.js          |  16 +-
 sites/site-utilities/.eslintrc.js             |  20 -
 sites/site-utilities/.prettierignore          |   2 -
 sites/site-utilities/babel.config.js          |  15 -
 sites/site-utilities/build/badges.js          |   6 +-
 .../build/src/generate-component-schemas.js   |  61 ---
 sites/site-utilities/package.json             |  39 +-
 .../accent-color-picker.props.ts              |   6 -
 .../components/accent-color-picker/index.tsx  |  34 --
 .../src/components/categories.ts              | 322 ------------
 .../components/dimension/dimension.props.ts   |   9 -
 .../src/components/dimension/index.tsx        |  79 ---
 .../direction-switch.props.ts                 |   9 -
 .../src/components/direction-switch/index.tsx |  37 --
 .../src/components/editor/editor.props.ts     |  27 -
 .../src/components/editor/editor.style.css    | 278 ----------
 .../src/components/editor/index.tsx           | 352 -------------
 sites/site-utilities/src/components/index.ts  |   8 -
 .../src/components/logo/index.tsx             |  56 --
 .../src/components/logo/logo.props.ts         |  21 -
 sites/site-utilities/src/components/style.ts  |  19 -
 .../src/components/theme-selector/index.tsx   |  39 --
 .../theme-selector/theme-selector.props.ts    |   9 -
 .../components/transparency-toggle/index.tsx  |  34 --
 .../transparency-toggle.props.ts              |   7 -
 sites/site-utilities/src/custom-elements.d.ts |  39 --
 sites/site-utilities/src/definitions/index.ts |  24 -
 sites/site-utilities/src/icons/chevron.tsx    |  21 -
 .../site-utilities/src/icons/dot-dot-dot.tsx  |   9 -
 .../site-utilities/src/icons/editor-logo.tsx  |  16 -
 sites/site-utilities/src/icons/index.ts       |   4 -
 sites/site-utilities/src/icons/rotate.tsx     |  34 --
 sites/site-utilities/src/index.ts             |   4 -
 .../src/schemas/definition-mapper.ts          | 127 -----
 sites/site-utilities/src/schemas/index.ts     |  12 -
 .../site-utilities/src/schemas/text.schema.ts |   9 -
 .../src/web-components/pragma.ts              |   8 -
 sites/site-utilities/tsconfig.json            |  24 -
 yarn.lock                                     | 477 +----------------
 178 files changed, 1273 insertions(+), 2864 deletions(-)
 create mode 100644 change/@microsoft-adaptive-ui-2d865848-cbf5-454f-bfe2-2a904e9166fe.json
 create mode 100644 change/@microsoft-fast-element-ba4890fd-3a1b-4c81-8060-f6ac19d90684.json
 create mode 100644 change/@microsoft-fast-foundation-196c098b-8b17-408f-9bc4-9627469a3812.json
 create mode 100644 change/@microsoft-fast-react-wrapper-6efa560f-0eb8-4c21-a9b2-7a3898cde092.json
 create mode 100644 change/@microsoft-fast-router-d7930bff-1089-44f5-83f4-ed05b9159edf.json
 create mode 100644 change/@microsoft-fast-web-utilities-22404cd2-8e39-4a74-876f-f4fe73bd6300.json
 delete mode 100644 packages/utilities/adaptive-ui/tsconfig.build.json
 delete mode 100644 packages/utilities/adaptive-ui/tsconfig.test.json
 rename packages/utilities/fast-web-utilities/src/__test__/{setup-browser.ts => setup-browser.cts} (100%)
 delete mode 100644 packages/web-components/fast-element/.eslintrc.cjs
 create mode 100644 packages/web-components/fast-element/.eslintrc.json
 rename packages/web-components/fast-element/src/__test__/{setup-browser.ts => setup-browser.cts} (100%)
 create mode 100644 packages/web-components/fast-element/src/hooks.spec.ts
 create mode 100644 packages/web-components/fast-element/src/hooks.ts
 create mode 100644 packages/web-components/fast-element/src/utilities.spec.ts
 create mode 100644 packages/web-components/fast-element/src/utilities.ts
 rename packages/web-components/fast-foundation/src/__test__/{setup-browser.ts => setup-browser.cts} (100%)
 delete mode 100644 packages/web-components/fast-foundation/src/utilities/composed-contains.spec.ts
 delete mode 100644 packages/web-components/fast-foundation/src/utilities/composed-contains.ts
 delete mode 100644 packages/web-components/fast-foundation/src/utilities/composed-parent.spec.ts
 delete mode 100644 packages/web-components/fast-foundation/src/utilities/composed-parent.ts
 rename packages/web-components/fast-router/src/__test__/{setup-browser.ts => setup-browser.cts} (100%)
 delete mode 100644 sites/fast-website/babel.config.js
 delete mode 100644 sites/site-utilities/.eslintrc.js
 delete mode 100644 sites/site-utilities/.prettierignore
 delete mode 100644 sites/site-utilities/babel.config.js
 delete mode 100644 sites/site-utilities/build/src/generate-component-schemas.js
 delete mode 100644 sites/site-utilities/src/components/accent-color-picker/accent-color-picker.props.ts
 delete mode 100644 sites/site-utilities/src/components/accent-color-picker/index.tsx
 delete mode 100644 sites/site-utilities/src/components/categories.ts
 delete mode 100644 sites/site-utilities/src/components/dimension/dimension.props.ts
 delete mode 100644 sites/site-utilities/src/components/dimension/index.tsx
 delete mode 100644 sites/site-utilities/src/components/direction-switch/direction-switch.props.ts
 delete mode 100644 sites/site-utilities/src/components/direction-switch/index.tsx
 delete mode 100644 sites/site-utilities/src/components/editor/editor.props.ts
 delete mode 100644 sites/site-utilities/src/components/editor/editor.style.css
 delete mode 100644 sites/site-utilities/src/components/editor/index.tsx
 delete mode 100644 sites/site-utilities/src/components/index.ts
 delete mode 100644 sites/site-utilities/src/components/logo/index.tsx
 delete mode 100644 sites/site-utilities/src/components/logo/logo.props.ts
 delete mode 100644 sites/site-utilities/src/components/style.ts
 delete mode 100644 sites/site-utilities/src/components/theme-selector/index.tsx
 delete mode 100644 sites/site-utilities/src/components/theme-selector/theme-selector.props.ts
 delete mode 100644 sites/site-utilities/src/components/transparency-toggle/index.tsx
 delete mode 100644 sites/site-utilities/src/components/transparency-toggle/transparency-toggle.props.ts
 delete mode 100644 sites/site-utilities/src/custom-elements.d.ts
 delete mode 100644 sites/site-utilities/src/definitions/index.ts
 delete mode 100644 sites/site-utilities/src/icons/chevron.tsx
 delete mode 100644 sites/site-utilities/src/icons/dot-dot-dot.tsx
 delete mode 100644 sites/site-utilities/src/icons/editor-logo.tsx
 delete mode 100644 sites/site-utilities/src/icons/index.ts
 delete mode 100644 sites/site-utilities/src/icons/rotate.tsx
 delete mode 100644 sites/site-utilities/src/index.ts
 delete mode 100644 sites/site-utilities/src/schemas/definition-mapper.ts
 delete mode 100644 sites/site-utilities/src/schemas/index.ts
 delete mode 100644 sites/site-utilities/src/schemas/text.schema.ts
 delete mode 100644 sites/site-utilities/src/web-components/pragma.ts
 delete mode 100644 sites/site-utilities/tsconfig.json

diff --git a/change/@microsoft-adaptive-ui-2d865848-cbf5-454f-bfe2-2a904e9166fe.json b/change/@microsoft-adaptive-ui-2d865848-cbf5-454f-bfe2-2a904e9166fe.json
new file mode 100644
index 00000000000..d3569f8538a
--- /dev/null
+++ b/change/@microsoft-adaptive-ui-2d865848-cbf5-454f-bfe2-2a904e9166fe.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: fix adaptive-ui build and test",
+  "packageName": "@microsoft/adaptive-ui",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-element-ba4890fd-3a1b-4c81-8060-f6ac19d90684.json b/change/@microsoft-fast-element-ba4890fd-3a1b-4c81-8060-f6ac19d90684.json
new file mode 100644
index 00000000000..ff37698055a
--- /dev/null
+++ b/change/@microsoft-fast-element-ba4890fd-3a1b-4c81-8060-f6ac19d90684.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: add utilities and hooks, and change exports",
+  "packageName": "@microsoft/fast-element",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-196c098b-8b17-408f-9bc4-9627469a3812.json b/change/@microsoft-fast-foundation-196c098b-8b17-408f-9bc4-9627469a3812.json
new file mode 100644
index 00000000000..9c58c85b4e9
--- /dev/null
+++ b/change/@microsoft-fast-foundation-196c098b-8b17-408f-9bc4-9627469a3812.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update to latest fast-element and change exports",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-react-wrapper-6efa560f-0eb8-4c21-a9b2-7a3898cde092.json b/change/@microsoft-fast-react-wrapper-6efa560f-0eb8-4c21-a9b2-7a3898cde092.json
new file mode 100644
index 00000000000..dac6064359f
--- /dev/null
+++ b/change/@microsoft-fast-react-wrapper-6efa560f-0eb8-4c21-a9b2-7a3898cde092.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: various fixes for Node16 and package exports",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-router-d7930bff-1089-44f5-83f4-ed05b9159edf.json b/change/@microsoft-fast-router-d7930bff-1089-44f5-83f4-ed05b9159edf.json
new file mode 100644
index 00000000000..c6fe1f098ff
--- /dev/null
+++ b/change/@microsoft-fast-router-d7930bff-1089-44f5-83f4-ed05b9159edf.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update to latest fast-element utilities",
+  "packageName": "@microsoft/fast-router",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-web-utilities-22404cd2-8e39-4a74-876f-f4fe73bd6300.json b/change/@microsoft-fast-web-utilities-22404cd2-8e39-4a74-876f-f4fe73bd6300.json
new file mode 100644
index 00000000000..01cde150c2e
--- /dev/null
+++ b/change/@microsoft-fast-web-utilities-22404cd2-8e39-4a74-876f-f4fe73bd6300.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: fix broken build",
+  "packageName": "@microsoft/fast-web-utilities",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/utilities/adaptive-ui/.eslintrc.json b/packages/utilities/adaptive-ui/.eslintrc.json
index ea40c852980..42b6e48bec2 100644
--- a/packages/utilities/adaptive-ui/.eslintrc.json
+++ b/packages/utilities/adaptive-ui/.eslintrc.json
@@ -1,10 +1,6 @@
 {
     "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
     "rules": {
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "import/extensions": [
-            "error",
-            "always"
-        ]
+        "@typescript-eslint/no-non-null-assertion": "off"
     }
 }
diff --git a/packages/utilities/adaptive-ui/.mocharc.json b/packages/utilities/adaptive-ui/.mocharc.json
index 364e9651b90..7d7b382b517 100644
--- a/packages/utilities/adaptive-ui/.mocharc.json
+++ b/packages/utilities/adaptive-ui/.mocharc.json
@@ -2,5 +2,5 @@
   "colors": true,
   "recursive": true,
   "timeout": 5000,
-  "spec": "test/**/*.spec.js"
+  "spec": "dist/**/*.spec.js"
 }
\ No newline at end of file
diff --git a/packages/utilities/adaptive-ui/api-extractor.json b/packages/utilities/adaptive-ui/api-extractor.json
index a5c079e97d1..9267aab59cd 100644
--- a/packages/utilities/adaptive-ui/api-extractor.json
+++ b/packages/utilities/adaptive-ui/api-extractor.json
@@ -1,4 +1,10 @@
 {
     "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-    "extends": "../../../api-extractor.json"
-}
\ No newline at end of file
+    "extends": "../../../api-extractor.json",
+    "mainEntryPointFilePath": "./dist/dts/index.d.ts",
+    "dtsRollup": {
+      "enabled": true,
+      "untrimmedFilePath": "./dist/adaptive-ui.untrimmed.d.ts",
+      "betaTrimmedFilePath": "./dist/adaptive-ui.d.ts"
+    }
+  }
\ No newline at end of file
diff --git a/packages/utilities/adaptive-ui/package.json b/packages/utilities/adaptive-ui/package.json
index d68b82d445b..c57615fabc4 100644
--- a/packages/utilities/adaptive-ui/package.json
+++ b/packages/utilities/adaptive-ui/package.json
@@ -27,8 +27,8 @@
   },
   "homepage": "https://fast.design",
   "scripts": {
-    "build": "tsc -p ./tsconfig.build.json && yarn doc",
-    "build:tests": "tsc -p ./tsconfig.test.json",
+    "build": "tsc -p ./tsconfig.json && yarn doc",
+    "build:tests": "tsc -p ./tsconfig.json",
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",
     "doc:ci": "api-extractor run",
diff --git a/packages/utilities/adaptive-ui/tsconfig.build.json b/packages/utilities/adaptive-ui/tsconfig.build.json
deleted file mode 100644
index 4e340029230..00000000000
--- a/packages/utilities/adaptive-ui/tsconfig.build.json
+++ /dev/null
@@ -1,11 +0,0 @@
-
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-        "declarationDir": "dist/dts",
-    },
-    "exclude": [
-        "**/*.spec.ts",
-        "**/__test__",
-    ]
-}
diff --git a/packages/utilities/adaptive-ui/tsconfig.json b/packages/utilities/adaptive-ui/tsconfig.json
index d5bbaa6f41d..611a4e612be 100644
--- a/packages/utilities/adaptive-ui/tsconfig.json
+++ b/packages/utilities/adaptive-ui/tsconfig.json
@@ -1,8 +1,22 @@
 {
     "extends": "../../../tsconfig.json",
     "compilerOptions": {
+        "declarationDir": "dist/dts",
         "outDir": "dist/esm",
-        "types": ["mocha"]
+        "experimentalDecorators": true,
+        "target": "es2015",
+        "module": "ESNext",
+        "moduleResolution": "Node16",
+        "importHelpers": true,
+        "jsx": "react",
+        "types": [
+            "mocha",
+            "webpack-env"
+        ],
+        "lib": [
+            "DOM",
+            "ES2015"
+        ]
     },
     "include": ["src"]
 }
diff --git a/packages/utilities/adaptive-ui/tsconfig.test.json b/packages/utilities/adaptive-ui/tsconfig.test.json
deleted file mode 100644
index 440bd4efe05..00000000000
--- a/packages/utilities/adaptive-ui/tsconfig.test.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-        "baseUrl": "./src",
-        "outDir": "test",
-        "declaration": false,
-    }
-}
diff --git a/packages/utilities/fast-react-wrapper/src/index.spec.tsx b/packages/utilities/fast-react-wrapper/src/index.spec.tsx
index 26bdf2217c0..6489fb1388b 100644
--- a/packages/utilities/fast-react-wrapper/src/index.spec.tsx
+++ b/packages/utilities/fast-react-wrapper/src/index.spec.tsx
@@ -1,7 +1,7 @@
 import { attr, customElement, DOM, FASTElement, html, nullableNumberConverter, observable, Updates } from '@microsoft/fast-element';
 import React from "react";
 import ReactDOM from "react-dom";
-import { uniqueElementName } from '@microsoft/fast-foundation/testing.js';
+import { uniqueElementName } from '@microsoft/fast-foundation/testing';
 import { expect } from "chai";
 import { DesignSystem, FoundationElement } from "@microsoft/fast-foundation";
 import { provideReactWrapper } from './index.js';
diff --git a/packages/utilities/fast-web-utilities/karma.conf.ts b/packages/utilities/fast-web-utilities/karma.conf.ts
index 64ac7ea898b..6ab584050c4 100644
--- a/packages/utilities/fast-web-utilities/karma.conf.ts
+++ b/packages/utilities/fast-web-utilities/karma.conf.ts
@@ -44,9 +44,9 @@ module.exports = function (config: any) {
             require("karma-chrome-launcher"),
             require("karma-firefox-launcher"),
         ],
-        files: [`dist/__test__/${setup}.js`],
+        files: [`dist/__test__/${setup}.cjs`],
         preprocessors: {
-            [`dist/__test__/${setup}.js`]: ["webpack", "sourcemap"],
+            [`dist/__test__/${setup}.cjs`]: ["webpack", "sourcemap"],
         },
         webpackMiddleware: {
             // webpack-dev-middleware configuration
@@ -65,12 +65,9 @@ module.exports = function (config: any) {
                 hints: false,
             },
             optimization: {
-                namedModules: false,
-                namedChunks: false,
                 nodeEnv: false,
                 usedExports: true,
                 flagIncludedChunks: false,
-                occurrenceOrder: false,
                 sideEffects: true,
                 concatenateModules: true,
                 splitChunks: {
diff --git a/packages/utilities/fast-web-utilities/package.json b/packages/utilities/fast-web-utilities/package.json
index a39789a077d..e8706aa1ef5 100644
--- a/packages/utilities/fast-web-utilities/package.json
+++ b/packages/utilities/fast-web-utilities/package.json
@@ -64,7 +64,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-source-map-support": "^1.4.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "ts-loader": "^4.0.1",
diff --git a/packages/utilities/fast-web-utilities/src/__test__/setup-browser.ts b/packages/utilities/fast-web-utilities/src/__test__/setup-browser.cts
similarity index 100%
rename from packages/utilities/fast-web-utilities/src/__test__/setup-browser.ts
rename to packages/utilities/fast-web-utilities/src/__test__/setup-browser.cts
diff --git a/packages/utilities/fast-web-utilities/src/aria.spec.ts b/packages/utilities/fast-web-utilities/src/aria.spec.ts
index ef1b09b6429..b56cdd26eb1 100644
--- a/packages/utilities/fast-web-utilities/src/aria.spec.ts
+++ b/packages/utilities/fast-web-utilities/src/aria.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { Orientation } from "./aria";
+import { Orientation } from "./aria.js";
 
 describe("aria-orientation", () => {
     it("should correctly return orientation values", () => {
diff --git a/packages/utilities/fast-web-utilities/src/array.spec.ts b/packages/utilities/fast-web-utilities/src/array.spec.ts
index 83e33177b77..fec29dee7b8 100644
--- a/packages/utilities/fast-web-utilities/src/array.spec.ts
+++ b/packages/utilities/fast-web-utilities/src/array.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { findLastIndex } from "./array";
+import { findLastIndex } from "./array.js";
 
 describe("findLastIndex", (): void => {
     it("should return -1 when array is empty", (): void => {
diff --git a/packages/utilities/fast-web-utilities/src/class-names.spec.ts b/packages/utilities/fast-web-utilities/src/class-names.spec.ts
index 87bbf3b2d07..3a5e5f20469 100644
--- a/packages/utilities/fast-web-utilities/src/class-names.spec.ts
+++ b/packages/utilities/fast-web-utilities/src/class-names.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { classNames } from "./class-names";
+import { classNames } from "./class-names.js";
 
 describe("classNames", (): void => {
     it("should return a string when invalid values are provided", (): void => {
diff --git a/packages/utilities/fast-web-utilities/src/dom.spec.ts b/packages/utilities/fast-web-utilities/src/dom.spec.ts
index 0a166fdb4a3..251ed29a23f 100644
--- a/packages/utilities/fast-web-utilities/src/dom.spec.ts
+++ b/packages/utilities/fast-web-utilities/src/dom.spec.ts
@@ -7,7 +7,7 @@ import {
     getDisplayedNodes,
     isHTMLElement,
     resetDocumentCache,
-} from "./dom";
+} from "./dom.js";
 
 chai.use(spies);
 
diff --git a/packages/utilities/fast-web-utilities/src/html.spec.ts b/packages/utilities/fast-web-utilities/src/html.spec.ts
index 275ce6e57c8..6053df2809c 100644
--- a/packages/utilities/fast-web-utilities/src/html.spec.ts
+++ b/packages/utilities/fast-web-utilities/src/html.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { convertStylePropertyPixelsToNumber, getClientRectWithMargin } from "./html";
+import { convertStylePropertyPixelsToNumber, getClientRectWithMargin } from "./html.js";
 
 describe("getClientRectWithMargin", () => {
     const mockWidth: number = 120;
diff --git a/packages/utilities/fast-web-utilities/src/numbers.spec.ts b/packages/utilities/fast-web-utilities/src/numbers.spec.ts
index 6b55df2ddae..f34b05adac6 100644
--- a/packages/utilities/fast-web-utilities/src/numbers.spec.ts
+++ b/packages/utilities/fast-web-utilities/src/numbers.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { inRange, limit, wrapInBounds } from "./numbers";
+import { inRange, limit, wrapInBounds } from "./numbers.js";
 
 describe("wrapInBounds", () => {
     it("should not throw if any parameters are null", () => {
diff --git a/packages/utilities/fast-web-utilities/src/query.spec.ts b/packages/utilities/fast-web-utilities/src/query.spec.ts
index e045dfa918d..bd6856ab46b 100644
--- a/packages/utilities/fast-web-utilities/src/query.spec.ts
+++ b/packages/utilities/fast-web-utilities/src/query.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { parseQueryStringParams } from "./query";
+import { parseQueryStringParams } from "./query.js";
 
 describe("parseQueryStringParams", (): void => {
     it("basic query string", (): void => {
diff --git a/packages/utilities/fast-web-utilities/src/rtl-scroll-converter.spec.ts b/packages/utilities/fast-web-utilities/src/rtl-scroll-converter.spec.ts
index f1cf1cb47ab..9b896ba31f8 100644
--- a/packages/utilities/fast-web-utilities/src/rtl-scroll-converter.spec.ts
+++ b/packages/utilities/fast-web-utilities/src/rtl-scroll-converter.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { RtlScrollConverter } from "./rtl-scroll-converter";
-import { Direction } from "./localization";
+import { RtlScrollConverter } from "./rtl-scroll-converter.js";
+import { Direction } from "./localization.js";
 
 function getDummyDiv(): HTMLDivElement {
     const dummy: HTMLDivElement = document.createElement("div");
diff --git a/packages/utilities/fast-web-utilities/src/strings.spec.ts b/packages/utilities/fast-web-utilities/src/strings.spec.ts
index b7c71284d83..2f10d7674fb 100644
--- a/packages/utilities/fast-web-utilities/src/strings.spec.ts
+++ b/packages/utilities/fast-web-utilities/src/strings.spec.ts
@@ -5,7 +5,7 @@ import {
     pascalCase,
     spinalCase,
     startsWith,
-} from "./strings";
+} from "./strings.js";
 
 describe("format", (): void => {
     it("should correctly manage undefined by returning an unformatted string", (): void => {
diff --git a/packages/web-components/fast-element/.eslintrc.cjs b/packages/web-components/fast-element/.eslintrc.cjs
deleted file mode 100644
index 4b5f0dd67d2..00000000000
--- a/packages/web-components/fast-element/.eslintrc.cjs
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
-    rules: {
-        "import/extensions": ["error", "always"],
-        "max-classes-per-file": "off",
-        "no-case-declarations": "off",
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/ban-types": [
-            "error",
-            {
-                types: {
-                    "{}": false,
-                    Function: false,
-                    Object: false,
-                },
-                extendDefaults: true,
-            },
-        ],
-    },
-};
diff --git a/packages/web-components/fast-element/.eslintrc.json b/packages/web-components/fast-element/.eslintrc.json
new file mode 100644
index 00000000000..1cf0d6bf0a7
--- /dev/null
+++ b/packages/web-components/fast-element/.eslintrc.json
@@ -0,0 +1,19 @@
+{
+    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
+    "rules": {
+        "max-classes-per-file": "off",
+        "no-case-declarations": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/ban-types": [
+            "error",
+            {
+                "types": {
+                    "{}": false,
+                    "Function": false,
+                    "Object": false
+                },
+                "extendDefaults": true
+            }
+        ]
+    }
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 0a77c20f359..51d24a2bbd5 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -138,10 +138,10 @@ export const BindingMode: Readonly<{
 }>;
 
 // @public
-export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier {
-    disconnect(): void;
+export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier, Disposable {
     observe(source: TSource, context?: ExecutionContext<TParent>): TReturn;
     records(): IterableIterator<ObservationRecord>;
+    setMode(isAsync: boolean): void;
 }
 
 // @public
@@ -301,6 +301,11 @@ export type DefaultTwoWayBindingOptions = DefaultBindingOptions & {
     fromView?: (value: any) => any;
 };
 
+// @public
+export interface Disposable {
+    dispose(): void;
+}
+
 // @public
 export const DOM: Readonly<{
     queueUpdate: (callable: Callable) => void;
@@ -826,7 +831,6 @@ export interface SubtreeDirectiveOptions<T = any> extends Omit<NodeBehaviorOptio
 
 // @public
 export interface SyntheticView<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> extends View<TSource, TParent, TContext> {
-    dispose(): void;
     readonly firstChild: Node;
     insertBefore(node: Node): void;
     readonly lastChild: Node;
@@ -928,10 +932,9 @@ export interface ValueConverter {
 }
 
 // @public
-export interface View<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> {
+export interface View<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> extends Disposable {
     bind(source: TSource, context: TContext): void;
     readonly context: TContext | null;
-    dispose(): void;
     readonly source: TSource | null;
     unbind(): void;
 }
diff --git a/packages/web-components/fast-element/karma.conf.cjs b/packages/web-components/fast-element/karma.conf.cjs
index 05ea8bcaa25..4e96dbab80e 100644
--- a/packages/web-components/fast-element/karma.conf.cjs
+++ b/packages/web-components/fast-element/karma.conf.cjs
@@ -1,5 +1,4 @@
 const path = require("path");
-
 const basePath = path.resolve(__dirname);
 
 const commonChromeFlags = [
@@ -44,9 +43,9 @@ module.exports = function (config) {
             require("karma-chrome-launcher"),
             require("karma-firefox-launcher"),
         ],
-        files: [`dist/esm/__test__/${setup}.js`],
+        files: [`dist/esm/__test__/${setup}.cjs`],
         preprocessors: {
-            [`dist/esm/__test__/${setup}.js`]: ["webpack", "sourcemap"],
+            [`dist/esm/__test__/${setup}.cjs`]: ["webpack", "sourcemap"],
         },
         webpackMiddleware: {
             // webpack-dev-middleware configuration
@@ -54,7 +53,7 @@ module.exports = function (config) {
             stats: "errors-only",
         },
         webpack: {
-            mode: "none",
+            mode: "development",
             resolve: {
                 extensions: [".js"],
                 modules: ["dist", "node_modules"],
@@ -65,12 +64,8 @@ module.exports = function (config) {
                 hints: false,
             },
             optimization: {
-                namedModules: false,
-                namedChunks: false,
-                nodeEnv: false,
                 usedExports: true,
                 flagIncludedChunks: false,
-                occurrenceOrder: false,
                 sideEffects: true,
                 concatenateModules: true,
                 splitChunks: {
@@ -89,14 +84,8 @@ module.exports = function (config) {
                     },
                     {
                         test: /\.js$/,
-                        use: [
-                            {
-                                loader: "source-map-loader",
-                                options: {
-                                    enforce: "pre",
-                                },
-                            },
-                        ],
+                        use: ["source-map-loader"],
+                        enforce: "pre",
                     },
                 ],
             },
@@ -125,7 +114,7 @@ module.exports = function (config) {
                 timeout: 5000,
             },
         },
-        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
+        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests,
     };
 
     if (config.coverage) {
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index 59966309af7..f7de1a4172d 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -26,17 +26,25 @@
       "development": "./dist/esm/index.debug.js",
       "default": "./dist/esm/index.js"
     },
-    "./polyfills.js": {
+    "./polyfills": {
       "types": "./dist/dts/polyfills.d.ts",
       "default": "./dist/esm/polyfills.js"
     },
-    "./debug.js": {
+    "./debug": {
       "types": "./dist/dts/debug.d.ts",
       "default": "./dist/esm/debug.js"
     },
-    "./splice-strategies.js": {
+    "./splice-strategies": {
       "types": "./dist/dts/observation/splice-strategies.d.ts",
       "default": "./dist/esm/observation/splice-strategies.js"
+    },
+    "./utilities": {
+      "types": "./dist/dts/utilities.d.ts",
+      "default": "./dist/esm/utilities.js"
+    },
+    "./hooks": {
+      "types": "./dist/dts/hooks.d.ts",
+      "default": "./dist/esm/hooks.js"
     }
   },
   "unpkg": "dist/fast-element.min.js",
@@ -94,7 +102,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-source-map-support": "^1.4.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "rollup": "^2.71.1",
@@ -108,6 +116,7 @@
     "tsconfig-paths": "^3.9.0",
     "tslib": "^2.4.0",
     "typescript": "^4.7.0",
-    "webpack": "^4.44.0"
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2"
   }
 }
diff --git a/packages/web-components/fast-element/src/__test__/setup-browser.ts b/packages/web-components/fast-element/src/__test__/setup-browser.cts
similarity index 100%
rename from packages/web-components/fast-element/src/__test__/setup-browser.ts
rename to packages/web-components/fast-element/src/__test__/setup-browser.cts
diff --git a/packages/web-components/fast-element/src/components/controller.spec.ts b/packages/web-components/fast-element/src/components/controller.spec.ts
index 83e2d5a79f1..c5c1dcb8da4 100644
--- a/packages/web-components/fast-element/src/components/controller.spec.ts
+++ b/packages/web-components/fast-element/src/components/controller.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from "chai";
-import { ElementStyles } from "../index.debug";
-import type { Behavior } from "../observation/behavior";
-import { Observable } from "../observation/observable";
-import { css } from "../styles/css";
-import { html } from "../templating/template";
-import { toHTML, uniqueElementName } from "../__test__/helpers";
-import { Controller } from "./controller";
-import { FASTElementDefinition, PartialFASTElementDefinition } from "./fast-definitions";
-import { FASTElement } from "./fast-element";
+import { ElementStyles } from "../index.debug.js";
+import type { Behavior } from "../observation/behavior.js";
+import { Observable } from "../observation/observable.js";
+import { css } from "../styles/css.js";
+import { html } from "../templating/template.js";
+import { toHTML, uniqueElementName } from "../__test__/helpers.js";
+import { Controller } from "./controller.js";
+import { FASTElementDefinition, PartialFASTElementDefinition } from "./fast-definitions.js";
+import { FASTElement } from "./fast-element.js";
 
 describe("The Controller", () => {
     const templateA = html`a`;
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.spec.ts b/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
index bd2c162e7c5..9e27039a90c 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { FASTElementDefinition } from "./fast-definitions";
-import { ElementStyles } from "../styles/element-styles";
+import { FASTElementDefinition } from "./fast-definitions.js";
+import { ElementStyles } from "../styles/element-styles.js";
 
 describe("FASTElementDefinition", () => {
     class MyElement extends HTMLElement {}
diff --git a/packages/web-components/fast-element/src/debug.spec.ts b/packages/web-components/fast-element/src/debug.spec.ts
index b907f3cfa84..25680de511c 100644
--- a/packages/web-components/fast-element/src/debug.spec.ts
+++ b/packages/web-components/fast-element/src/debug.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
 import "./debug.js";
-import { FASTGlobal, Message } from "./interfaces";
+import { FASTGlobal, Message } from "./interfaces.js";
 
 declare const FAST: FASTGlobal;
 
diff --git a/packages/web-components/fast-element/src/hooks.spec.ts b/packages/web-components/fast-element/src/hooks.spec.ts
new file mode 100644
index 00000000000..a3d96fa581f
--- /dev/null
+++ b/packages/web-components/fast-element/src/hooks.spec.ts
@@ -0,0 +1,97 @@
+import { expect } from "chai";
+import { useEffect, useState } from "./hooks.js";
+import { Observable } from "./observation/observable.js";
+import { Updates } from "./observation/update-queue.js";
+
+describe("The useState hook", () => {
+    it("can get and set the value", () => {
+        const [get, set] = useState(1);
+
+        expect(get()).equal(1);
+
+        set(2);
+
+        expect(get()).equal(2);
+    });
+
+    it("can have its value observed", async () => {
+        const [get, set] = useState(1);
+        let wasCalled = false;
+
+        Observable.binding(get, {
+            handleChange() {
+                wasCalled = true;
+            }
+        }).observe({});
+
+        set(2);
+
+        await Updates.next();
+
+        expect(wasCalled).to.be.true;
+    });
+
+    it("can be deeply observed", async () => {
+        const [get] = useState({
+            a: {
+                b: 1,
+                c: 2
+            }
+        }, true);
+
+        let callCount = 0;
+        const subscriber = {
+            handleChange(binding, observer) {
+                callCount++;
+            }
+        };
+
+        Observable.binding(() => get().a.b, subscriber).observe({});
+        Observable.binding(() => get().a.c, subscriber).observe({});
+
+        get().a.b = 2;
+        get().a.c = 3;
+
+        await Updates.next();
+
+        expect(callCount).equals(2);
+    });
+});
+
+describe("The useEffect hook", () => {
+    it("responds to changes in state", () => {
+        const [get, set] = useState(0);
+        const values: number[] = [];
+
+        useEffect(() => {
+            values.push(get());
+        });
+
+        set(get() + 1);
+        set(get() + 1);
+        set(get() + 1);
+        set(get() + 1);
+        set(get() + 1);
+
+        expect(values).members([0, 1, 2, 3, 4, 5]);
+    });
+
+    it("can be disposed", () => {
+        const [get, set] = useState(0);
+        const values: number[] = [];
+
+        const observable = useEffect(() => {
+            values.push(get());
+        });
+
+        observable.dispose();
+
+        set(get() + 1);
+        set(get() + 1);
+        set(get() + 1);
+        set(get() + 1);
+        set(get() + 1);
+
+        expect(values).members([0]);
+    });
+});
diff --git a/packages/web-components/fast-element/src/hooks.ts b/packages/web-components/fast-element/src/hooks.ts
new file mode 100644
index 00000000000..cda1fc34a74
--- /dev/null
+++ b/packages/web-components/fast-element/src/hooks.ts
@@ -0,0 +1,44 @@
+import { BindingObserver, Observable } from "./observation/observable.js";
+import { makeObservable } from "./utilities.js";
+
+/**
+ * Functions used for getting and setting a stateful value.
+ * @beta
+ */
+export type State<T> = [() => T, (newValue: T) => T];
+
+/**
+ * Creates an observable state value.
+ * @param value The initial state value.
+ * @param deep Whether or not to convert the state value to an observable.
+ * @returns The state accessor functions.
+ * @beta
+ */
+export function useState<T>(value: T, deep = false): State<T> {
+    const host = makeObservable({ value }, deep);
+    return [() => host.value, newValue => (host.value = newValue)];
+}
+
+const effectModel = Object.freeze({});
+
+/**
+ * Executes an action once, and then whenever any of its dependent state changes.
+ * @param action An action that is affected by state changes.
+ * @returns A BindingObserver which can be used to dispose of the effect.
+ */
+export function useEffect(action: () => void): BindingObserver {
+    /* eslint prefer-const: 0 */
+    let observer: BindingObserver;
+
+    const subscriber = {
+        handleChange() {
+            observer.observe(effectModel);
+        },
+    };
+
+    observer = Observable.binding(action, subscriber);
+    observer.setMode(false);
+    subscriber.handleChange();
+
+    return observer;
+}
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index 78ccf6540e5..f928c653708 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -2,6 +2,7 @@
 export type {
     Callable,
     Constructable,
+    Disposable,
     FASTGlobal,
     Mutable,
     StyleStrategy,
diff --git a/packages/web-components/fast-element/src/interfaces.ts b/packages/web-components/fast-element/src/interfaces.ts
index c12b72c44db..15616e2323e 100644
--- a/packages/web-components/fast-element/src/interfaces.ts
+++ b/packages/web-components/fast-element/src/interfaces.ts
@@ -13,6 +13,17 @@ export type Constructable<T = {}> = {
     new (...args: any[]): T;
 };
 
+/**
+ * Provides a mechanism for releasing resources.
+ * @public
+ */
+export interface Disposable {
+    /**
+     * Disposes the resources.
+     */
+    dispose(): void;
+}
+
 /**
  * Reverses all readonly members, making them mutable.
  * @internal
diff --git a/packages/web-components/fast-element/src/observation/arrays.spec.ts b/packages/web-components/fast-element/src/observation/arrays.spec.ts
index 1a6f12ccc4f..4cd3958b083 100644
--- a/packages/web-components/fast-element/src/observation/arrays.spec.ts
+++ b/packages/web-components/fast-element/src/observation/arrays.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from "chai";
-import { Observable } from "./observable";
-import { ArrayObserver, length, Splice } from "./arrays";
-import { SubscriberSet } from "./notifier";
-import { Updates } from "./update-queue";
+import { Observable } from "./observable.js";
+import { ArrayObserver, length, Splice } from "./arrays.js";
+import { SubscriberSet } from "./notifier.js";
+import { Updates } from "./update-queue.js";
 
 describe("The ArrayObserver", () => {
     it("can be retrieved through Observable.getNotifier()", () => {
@@ -369,7 +369,7 @@ describe("The array length observer", () => {
 
         expect(value).to.equal(0);
 
-        observer.disconnect();
+        observer.dispose();
     });
 
     it("returns zero length if the array is null", async () => {
@@ -381,7 +381,7 @@ describe("The array length observer", () => {
 
         expect(value).to.equal(0);
 
-        observer.disconnect();
+        observer.dispose();
     });
 
     it("returns length of an array", async () => {
@@ -393,7 +393,7 @@ describe("The array length observer", () => {
 
         expect(value).to.equal(5);
 
-        observer.disconnect();
+        observer.dispose();
     });
 
     it("notifies when the array length changes", async () => {
@@ -418,7 +418,7 @@ describe("The array length observer", () => {
         expect(changed).to.be.true;
         expect(observer.observe(instance)).to.equal(6);
 
-        observer.disconnect();
+        observer.dispose();
     });
 
     it("does not notify on changes that don't change the length", async () => {
@@ -443,6 +443,6 @@ describe("The array length observer", () => {
         expect(changed).to.be.false;
         expect(observer.observe(instance)).to.equal(5);
 
-        observer.disconnect();
+        observer.dispose();
     });
 });
diff --git a/packages/web-components/fast-element/src/observation/execution-context.spec.ts b/packages/web-components/fast-element/src/observation/execution-context.spec.ts
index 73623adced6..5c84951f563 100644
--- a/packages/web-components/fast-element/src/observation/execution-context.spec.ts
+++ b/packages/web-components/fast-element/src/observation/execution-context.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { ExecutionContext, ItemContext } from "./observable";
+import { ExecutionContext, ItemContext } from "./observable.js";
 
 describe("The ExecutionContext", () => {
     it("has a default", () => {
diff --git a/packages/web-components/fast-element/src/observation/notifier.spec.ts b/packages/web-components/fast-element/src/observation/notifier.spec.ts
index cabdeb519b0..9aa86935820 100644
--- a/packages/web-components/fast-element/src/observation/notifier.spec.ts
+++ b/packages/web-components/fast-element/src/observation/notifier.spec.ts
@@ -1,8 +1,5 @@
 import { expect } from "chai";
-import { DOM } from "../dom";
-import { enableArrayObservation } from "./array-observer";
-import { PropertyChangeNotifier, Subscriber, SubscriberSet } from "./notifier";
-import { Observable } from "./observable";
+import { PropertyChangeNotifier, Subscriber, SubscriberSet } from "./notifier.js";
 
 describe(`A SubscriberSet`, () => {
     const oneThroughTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
diff --git a/packages/web-components/fast-element/src/observation/observable.spec.ts b/packages/web-components/fast-element/src/observation/observable.spec.ts
index fa81979fc97..feac55c86ea 100644
--- a/packages/web-components/fast-element/src/observation/observable.spec.ts
+++ b/packages/web-components/fast-element/src/observation/observable.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
-import { Updates } from "./update-queue";
-import { PropertyChangeNotifier, SubscriberSet } from "./notifier";
-import { ExecutionContext, Observable, observable, volatile } from "./observable";
+import { Updates } from "./update-queue.js";
+import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
+import { ExecutionContext, Observable, observable, volatile } from "./observable.js";
 
 describe("The Observable", () => {
     class Model {
@@ -197,7 +197,7 @@ describe("The Observable", () => {
 
             expect(called).to.be.false;
             model.child.value = "something completely different";
-            observer.disconnect();
+            observer.dispose();
 
             await Updates.next();
 
@@ -583,7 +583,7 @@ describe("The Observable", () => {
             expect(wasCalled).to.equal(false);
 
             model.value++;
-            observer.disconnect();
+            observer.dispose();
 
             await Updates.next();
 
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index e40954388d3..0646e0a8ca3 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -1,4 +1,10 @@
-import { isFunction, isString, KernelServiceId, Message } from "../interfaces.js";
+import {
+    Disposable,
+    isFunction,
+    isString,
+    KernelServiceId,
+    Message,
+} from "../interfaces.js";
 import { FAST } from "../platform.js";
 import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
@@ -65,7 +71,8 @@ interface SubscriptionRecord extends ObservationRecord {
  * @public
  */
 export interface BindingObserver<TSource = any, TReturn = any, TParent = any>
-    extends Notifier {
+    extends Notifier,
+        Disposable {
     /**
      * Begins observing the binding for the source and returns the current value.
      * @param source - The source that the binding is based on.
@@ -74,16 +81,21 @@ export interface BindingObserver<TSource = any, TReturn = any, TParent = any>
      */
     observe(source: TSource, context?: ExecutionContext<TParent>): TReturn;
 
-    /**
-     * Unsubscribe from all dependent observables of the binding.
-     */
-    disconnect(): void;
-
     /**
      * Gets {@link ObservationRecord|ObservationRecords} that the {@link BindingObserver}
      * is observing.
      */
     records(): IterableIterator<ObservationRecord>;
+
+    /**
+     * Sets the update mode used by the observer.
+     * @param isAsync - Indicates whether updates should be asynchronous.
+     * @remarks
+     * By default, the update mode is asynchronous, since that provides the best
+     * performance for template rendering scenarios. Passing false to setMode will
+     * instead cause the observer to notify subscribers immediately when changes occur.
+     */
+    setMode(isAsync: boolean): void;
 }
 
 /**
@@ -174,6 +186,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
         implements BindingObserver<TSource, TReturn> {
         public needsRefresh: boolean = true;
         private needsQueue: boolean = true;
+        private isAsync = true;
 
         private first: SubscriptionRecord = this as any;
         private last: SubscriptionRecord | null = null;
@@ -190,9 +203,13 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             super(binding, initialSubscriber);
         }
 
+        public setMode(isAsync: boolean): void {
+            this.isAsync = this.needsQueue = isAsync;
+        }
+
         public observe(source: TSource, context?: ExecutionContext): TReturn {
             if (this.needsRefresh && this.last !== null) {
-                this.disconnect();
+                this.dispose();
             }
 
             const previousWatcher = watcher;
@@ -204,7 +221,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             return result;
         }
 
-        public disconnect(): void {
+        public dispose(): void {
             if (this.last !== null) {
                 let current = this.first;
 
@@ -214,7 +231,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
                 }
 
                 this.last = null;
-                this.needsRefresh = this.needsQueue = true;
+                this.needsRefresh = this.needsQueue = this.isAsync;
             }
         }
 
@@ -256,12 +273,14 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             if (this.needsQueue) {
                 this.needsQueue = false;
                 queueUpdate(this);
+            } else if (!this.isAsync) {
+                this.call();
             }
         }
 
         call(): void {
             if (this.last !== null) {
-                this.needsQueue = true;
+                this.needsQueue = this.isAsync;
                 this.notify(this);
             }
         }
diff --git a/packages/web-components/fast-element/src/observation/update-queue.spec.ts b/packages/web-components/fast-element/src/observation/update-queue.spec.ts
index c3c971ad062..577dbf61993 100644
--- a/packages/web-components/fast-element/src/observation/update-queue.spec.ts
+++ b/packages/web-components/fast-element/src/observation/update-queue.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { Updates } from "./update-queue";
+import { Updates } from "./update-queue.js";
 
 const waitMilliseconds = 100;
 const maxRecursion = 10;
diff --git a/packages/web-components/fast-element/src/platform.spec.ts b/packages/web-components/fast-element/src/platform.spec.ts
index 4e0d7f4e1b7..1bc54e8dcba 100644
--- a/packages/web-components/fast-element/src/platform.spec.ts
+++ b/packages/web-components/fast-element/src/platform.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import type { FASTGlobal } from "./interfaces";
+import type { FASTGlobal } from "./interfaces.js";
 
 declare const FAST: FASTGlobal;
 
diff --git a/packages/web-components/fast-element/src/styles/styles.spec.ts b/packages/web-components/fast-element/src/styles/styles.spec.ts
index 9a5ee06945f..51475edc83e 100644
--- a/packages/web-components/fast-element/src/styles/styles.spec.ts
+++ b/packages/web-components/fast-element/src/styles/styles.spec.ts
@@ -3,13 +3,13 @@ import {
     AdoptedStyleSheetsStrategy,
     ComposableStyles,
     ElementStyles,
-} from "./element-styles";
-import { AddBehavior, cssDirective, CSSDirective } from "./css-directive";
-import { css } from "./css";
-import type { Behavior } from "../observation/behavior";
-import { StyleElementStrategy } from "../polyfills";
-import type { StyleTarget } from "../interfaces";
-import { ExecutionContext } from "../observation/observable";
+} from "./element-styles.js";
+import { AddBehavior, cssDirective, CSSDirective } from "./css-directive.js";
+import { css } from "./css.js";
+import type { Behavior } from "../observation/behavior.js";
+import { StyleElementStrategy } from "../polyfills.js";
+import type { StyleTarget } from "../interfaces.js";
+import { ExecutionContext } from "../observation/observable.js";
 
 if (ElementStyles.supportsAdoptedStyleSheets) {
     describe("AdoptedStyleSheetsStrategy", () => {
diff --git a/packages/web-components/fast-element/src/templating/binding.spec.ts b/packages/web-components/fast-element/src/templating/binding.spec.ts
index 422c5a257e1..84dfc356c78 100644
--- a/packages/web-components/fast-element/src/templating/binding.spec.ts
+++ b/packages/web-components/fast-element/src/templating/binding.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from "chai";
-import { bind, BindingConfig, BindingMode, HTMLBindingDirective, onChange, oneTime, signal, SignalBinding, twoWay } from "./binding";
-import { ExecutionContext, observable } from "../observation/observable";
-import { html, ViewTemplate } from "./template";
-import { toHTML } from "../__test__/helpers";
-import { SyntheticView, HTMLView } from "./view";
-import { Updates } from "../observation/update-queue";
-import { Aspect } from "./html-directive";
-import { DOM } from "./dom";
+import { bind, BindingConfig, BindingMode, HTMLBindingDirective, onChange, oneTime, signal, SignalBinding, twoWay } from "./binding.js";
+import { ExecutionContext, observable } from "../observation/observable.js";
+import { html, ViewTemplate } from "./template.js";
+import { toHTML } from "../__test__/helpers.js";
+import { SyntheticView, HTMLView } from "./view.js";
+import { Updates } from "../observation/update-queue.js";
+import { Aspect } from "./html-directive.js";
+import { DOM } from "./dom.js";
 
 describe("The HTML binding directive", () => {
     class Model {
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 94c2406ea56..73696ca79c2 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -517,7 +517,7 @@ export class ChangeBinding extends UpdateBinding {
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void {
         const target = targets[this.directive.nodeId];
         const observer = this.getObserver(target);
-        observer.disconnect();
+        observer.dispose();
         (observer as any).target = null;
         (observer as any).source = null;
         (observer as any).context = null;
diff --git a/packages/web-components/fast-element/src/templating/children.spec.ts b/packages/web-components/fast-element/src/templating/children.spec.ts
index 9080b0288d3..62f1c5812bc 100644
--- a/packages/web-components/fast-element/src/templating/children.spec.ts
+++ b/packages/web-components/fast-element/src/templating/children.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from "chai";
-import { children, ChildrenDirective } from "./children";
-import { ExecutionContext, observable } from "../observation/observable";
-import { elements } from "./node-observation";
-import { Updates } from "../observation/update-queue";
+import { children, ChildrenDirective } from "./children.js";
+import { ExecutionContext, observable } from "../observation/observable.js";
+import { elements } from "./node-observation.js";
+import { Updates } from "../observation/update-queue.js";
 
 describe("The children", () => {
     context("template function", () => {
diff --git a/packages/web-components/fast-element/src/templating/compiler.spec.ts b/packages/web-components/fast-element/src/templating/compiler.spec.ts
index 33b392943bf..caf08f26393 100644
--- a/packages/web-components/fast-element/src/templating/compiler.spec.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.spec.ts
@@ -1,15 +1,15 @@
 import { expect } from "chai";
-import { customElement, FASTElement } from "../components/fast-element";
-import { Markup } from './markup';
-import { ExecutionContext } from "../observation/observable";
-import { css } from "../styles/css";
-import { toHTML, uniqueElementName } from "../__test__/helpers";
-import { bind, HTMLBindingDirective } from "./binding";
-import { Compiler } from "./compiler";
-import type { HTMLDirective, ViewBehaviorFactory } from "./html-directive";
-import { html } from "./template";
-import type { StyleTarget } from "../interfaces";
-import { ElementStyles } from "../index.debug";
+import { customElement, FASTElement } from "../components/fast-element.js";
+import { Markup } from './markup.js';
+import { ExecutionContext } from "../observation/observable.js";
+import { css } from "../styles/css.js";
+import { toHTML, uniqueElementName } from "../__test__/helpers.js";
+import { bind, HTMLBindingDirective } from "./binding.js";
+import { Compiler } from "./compiler.js";
+import type { HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
+import { html } from "./template.js";
+import type { StyleTarget } from "../interfaces.js";
+import { ElementStyles } from "../index.debug.js";
 
 /**
  * Used to satisfy TS by exposing some internal properties of the
diff --git a/packages/web-components/fast-element/src/templating/dom.ts b/packages/web-components/fast-element/src/templating/dom.ts
index faebeaaf401..5b0837a3cef 100644
--- a/packages/web-components/fast-element/src/templating/dom.ts
+++ b/packages/web-components/fast-element/src/templating/dom.ts
@@ -10,7 +10,7 @@ export const DOM = Object.freeze({
      * @deprecated
      * Use Updates.enqueue().
      */
-    queueUpdate: Updates.enqueue,
+    queueUpdate: Updates.enqueue as (callable: Callable) => void,
 
     /**
      * @deprecated
diff --git a/packages/web-components/fast-element/src/templating/repeat.spec.ts b/packages/web-components/fast-element/src/templating/repeat.spec.ts
index c24561a9835..c94774d1e37 100644
--- a/packages/web-components/fast-element/src/templating/repeat.spec.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from "chai";
-import { repeat, RepeatDirective, RepeatBehavior } from "./repeat";
-import { child, html } from "./template";
-import { ExecutionContext, observable } from "../observation/observable";
-import { toHTML } from "../__test__/helpers";
-import { Updates } from "../observation/update-queue";
+import { repeat, RepeatDirective, RepeatBehavior } from "./repeat.js";
+import { child, html } from "./template.js";
+import { ExecutionContext, observable } from "../observation/observable.js";
+import { toHTML } from "../__test__/helpers.js";
+import { Updates } from "../observation/update-queue.js";
 
 describe("The repeat", () => {
     function createLocation() {
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index c52c34d1b84..fe3f71bbcc5 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -145,8 +145,8 @@ export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
         }
 
         this.unbindAllViews();
-        this.itemsBindingObserver.disconnect();
-        this.templateBindingObserver.disconnect();
+        this.itemsBindingObserver.dispose();
+        this.templateBindingObserver.dispose();
     }
 
     /**
diff --git a/packages/web-components/fast-element/src/templating/slotted.spec.ts b/packages/web-components/fast-element/src/templating/slotted.spec.ts
index c6c73be7d5c..1874e5998df 100644
--- a/packages/web-components/fast-element/src/templating/slotted.spec.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from "chai";
-import { slotted, SlottedDirective } from "./slotted";
-import { ExecutionContext, observable } from "../observation/observable";
-import { elements } from "./node-observation";
-import { Updates } from "../observation/update-queue";
+import { slotted, SlottedDirective } from "./slotted.js";
+import { ExecutionContext, observable } from "../observation/observable.js";
+import { elements } from "./node-observation.js";
+import { Updates } from "../observation/update-queue.js";
 
 describe("The slotted", () => {
     context("template function", () => {
diff --git a/packages/web-components/fast-element/src/templating/template.spec.ts b/packages/web-components/fast-element/src/templating/template.spec.ts
index ac766ddaaff..a49e495e3d2 100644
--- a/packages/web-components/fast-element/src/templating/template.spec.ts
+++ b/packages/web-components/fast-element/src/templating/template.spec.ts
@@ -1,11 +1,10 @@
 import { expect } from "chai";
-import { html, ViewTemplate } from "./template";
-import { Markup, Parser } from "./markup";
-import { HTMLBindingDirective } from "./binding";
-import { Aspect, HTMLDirective, ViewBehaviorFactory, Aspected, htmlDirective, AddViewBehaviorFactory } from "./html-directive";
-import { bind, ViewBehaviorTargets } from "..";
-import { Constructable, isString } from "../interfaces";
-import { ExecutionContext } from "../observation/observable";
+import { html, ViewTemplate } from "./template.js";
+import { Markup, Parser } from "./markup.js";
+import { bind, HTMLBindingDirective } from "./binding.js";
+import { Aspect, HTMLDirective, ViewBehaviorFactory, Aspected, htmlDirective, AddViewBehaviorFactory, ViewBehaviorTargets } from "./html-directive.js";
+import { Constructable, isString } from "../interfaces.js";
+import { ExecutionContext } from "../observation/observable.js";
 
 describe(`The html tag template helper`, () => {
     it(`transforms a string into a ViewTemplate.`, () => {
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index ffbc8952351..e0a1ea7d674 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -1,3 +1,4 @@
+import type { Disposable } from "../interfaces.js";
 import type { Behavior } from "../observation/behavior.js";
 import type { ExecutionContext, RootContext } from "../observation/observable.js";
 import type {
@@ -14,7 +15,7 @@ export interface View<
     TSource = any,
     TParent = any,
     TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>
-> {
+> extends Disposable {
     /**
      * The execution context the view is running within.
      */
@@ -36,12 +37,6 @@ export interface View<
      * Unbinds a view's behaviors from its binding source and context.
      */
     unbind(): void;
-
-    /**
-     * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
-     * Once a view has been disposed, it cannot be inserted or bound again.
-     */
-    dispose(): void;
 }
 
 /**
@@ -87,12 +82,6 @@ export interface SyntheticView<
      * The nodes are not disposed and the view can later be re-inserted.
      */
     remove(): void;
-
-    /**
-     * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
-     * Once a view has been disposed, it cannot be inserted or bound again.
-     */
-    dispose(): void;
 }
 
 function removeNodeSequence(firstNode: Node, lastNode: Node): void {
diff --git a/packages/web-components/fast-element/src/templating/when.spec.ts b/packages/web-components/fast-element/src/templating/when.spec.ts
index 724f22d2fa6..05583fa62fa 100644
--- a/packages/web-components/fast-element/src/templating/when.spec.ts
+++ b/packages/web-components/fast-element/src/templating/when.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
-import { when } from "./when";
-import { html } from "./template";
-import { Binding, ExecutionContext } from "../observation/observable";
+import { when } from "./when.js";
+import { html } from "./template.js";
+import { Binding, ExecutionContext } from "../observation/observable.js";
 
 describe("The 'when' template function", () => {
     it("returns an expression", () => {
diff --git a/packages/web-components/fast-element/src/utilities.spec.ts b/packages/web-components/fast-element/src/utilities.spec.ts
new file mode 100644
index 00000000000..ff696cfab41
--- /dev/null
+++ b/packages/web-components/fast-element/src/utilities.spec.ts
@@ -0,0 +1,494 @@
+import { composedContains, composedParent, makeObservable, watch } from "./utilities.js";
+import { expect } from "chai";
+import { Updates } from "./observation/update-queue.js";
+import { customElement, FASTElement } from "./components/fast-element.js";
+import { Observable, observable } from "./observation/observable.js";
+import { html } from "./templating/template.js";
+import { ref } from "./templating/ref.js";
+import { Splice } from "./observation/arrays.js";
+
+describe("The composedParent function", () => {
+    it("returns the parent of an element, if it has one", () => {
+        const parent = document.createElement("div");
+        const child = document.createElement("div");
+        parent.appendChild(child);
+
+        const found = composedParent(child);
+
+        expect(found).to.equal(parent);
+    });
+});
+
+@customElement({
+    name: "composed-contains-element",
+    template: html<TestElement>`
+        <div ${ref("root")} data-foo="bar"><slot></slot></div>
+    `
+})
+class TestElement extends FASTElement {
+    @observable
+    public root: HTMLElement;
+}
+
+describe("The composedContains function", () => {
+    it("returns true if the test and reference are the same element", () => {
+        // This matches the behavior of Node.contains()
+        const target = document.createElement("div");
+
+        expect(composedContains(target, target)).to.be.true;
+    });
+
+    describe("that are in the same DOM", () => {
+        it("returns true if the test is a child of the reference", () => {
+            const parent = document.createElement("div");
+            const child = document.createElement("div");
+            parent.appendChild(child);
+
+            expect(composedContains(parent, child)).to.be.true;
+        });
+        it("returns false if the test is not a child of the reference", () => {
+            const parent = document.createElement("div");
+            const child = document.createElement("div");
+            parent.appendChild(child);
+
+            expect(composedContains(child, parent)).to.be.false;
+        });
+    });
+
+    describe("that are not in the same DOM", () => {
+        it("should return true if the element being tested is in a shadow DOM of a child element", async () => {
+            const parent = document.createElement("div");
+            const child = document.createElement("composed-contains-element") as TestElement;
+
+            parent.appendChild(child);
+            document.body.appendChild(parent);
+
+            await Updates.next();
+
+            expect(composedContains(parent, child.root)).to.be.true;
+        });
+
+        it("should return false if the element being tested is in a shadow DOM that is not attached to a child", async () => {
+            const parent = document.createElement("div");
+            const child = document.createElement("composed-contains-element") as TestElement;
+
+            document.body.appendChild(parent);
+            document.body.appendChild(child);
+
+            await Updates.next();
+
+            expect(composedContains(parent, child.root)).to.be.false;
+        });
+    });
+});
+
+function createComplexObject() {
+    return {
+        a: {
+            b: {
+                c: 1,
+                d: [
+                    {
+                        e: 2,
+                        f: 3
+                    },
+                    {
+                        g: 4,
+                        h: 5
+                    }
+                ]
+            },
+            i: {
+                j: {
+                    k: 6,
+                    l: [
+                        {
+                            m: 7,
+                            n: 8
+                        },
+                        {
+                            o: 9,
+                            p: 10
+                        }
+                    ]
+                },
+
+            }
+        },
+        q: {
+            r: {
+                s: 11,
+                t: [
+                    {
+                        u: 12,
+                        v: 13
+                    },
+                    {
+                        w: 14,
+                        x: 15
+                    }
+                ]
+            },
+            y: {
+                z: 16
+            }
+        }
+    };
+}
+
+describe("The makeObservable function", () => {
+    it("makes all root properties on the object observable", () => {
+        const obj = makeObservable({
+            a: 1,
+            b: 2,
+            c: 3
+        });
+
+        const names: string[] = [];
+        const subscriber = {
+            handleChange(subject, propertyName) {
+                names.push(propertyName);
+            }
+        };
+
+        Observable.getNotifier(obj).subscribe(subscriber);
+
+        obj.a = 2;
+        obj.b = 3;
+        obj.c = 4;
+
+        expect(names).members(["a", "b", "c"]);
+    });
+
+    it("doesn't fail when making the same object observable multiple times", () => {
+        const obj = makeObservable({
+            a: 1,
+            b: 2,
+            c: 3
+        });
+
+        makeObservable(obj);
+
+        const names: string[] = [];
+        const subscriber = {
+            handleChange(subject, propertyName) {
+                names.push(propertyName);
+            }
+        };
+
+        Observable.getNotifier(obj).subscribe(subscriber);
+
+        obj.a = 2;
+        obj.b = 3;
+        obj.c = 4;
+
+        makeObservable(obj);
+
+        expect(names).members(["a", "b", "c"]);
+    });
+
+    it("makes properties on array items observable", () => {
+        const array = makeObservable([
+            {
+                a: 1,
+                b: 2,
+                c: 3
+            },
+            {
+                d: 4,
+                e: 5,
+                f: 6
+            }
+        ]);
+
+        const names: string[] = [];
+        const subscriber = {
+            handleChange(subject, propertyName) {
+                names.push(propertyName);
+            }
+        };
+
+        Observable.getNotifier(array[0]).subscribe(subscriber);
+
+        Observable.getNotifier(array[1]).subscribe(subscriber);
+
+        array[0].a = 2;
+        array[0].b = 3;
+        array[0].c = 4;
+        array[1].d = 5;
+        array[1].e = 6;
+        array[1].f = 7;
+
+        expect(names).members(["a", "b", "c", "d", "e", "f"]);
+    });
+
+    function subscribeToComplexObject(obj: ReturnType<typeof createComplexObject>) {
+        const names: string[] = [];
+        const subscriber = {
+            handleChange(subject, propertyName) {
+                names.push(propertyName);
+            }
+        };
+
+        Observable.getNotifier(obj.a).subscribe(subscriber);
+        Observable.getNotifier(obj.a.b).subscribe(subscriber);
+        Observable.getNotifier(obj.a.b.d[0]).subscribe(subscriber);
+        Observable.getNotifier(obj.a.b.d[1]).subscribe(subscriber);
+        Observable.getNotifier(obj.a.i).subscribe(subscriber);
+        Observable.getNotifier(obj.a.i.j).subscribe(subscriber);
+        Observable.getNotifier(obj.a.i.j.l[0]).subscribe(subscriber);
+        Observable.getNotifier(obj.a.i.j.l[1]).subscribe(subscriber);
+        Observable.getNotifier(obj.q).subscribe(subscriber);
+        Observable.getNotifier(obj.q.r).subscribe(subscriber);
+        Observable.getNotifier(obj.q.r.t[0]).subscribe(subscriber);
+        Observable.getNotifier(obj.q.r.t[1]).subscribe(subscriber);
+        Observable.getNotifier(obj.q.y).subscribe(subscriber);
+
+        return names;
+    }
+
+    it("does not deeply convert by default", () => {
+        const obj = makeObservable(createComplexObject());
+        const names = subscribeToComplexObject(obj);
+
+        obj.a.b.d[0].e = 1000;
+        obj.a.i.j.l[1].p = 1000;
+        obj.q.y.z = 1000;
+
+        expect(names).members([]);
+    });
+
+    it("can make deeply observable objects", () => {
+        const obj = makeObservable(createComplexObject(), true);
+        const names = subscribeToComplexObject(obj);
+
+        obj.a.b.d[0].e = 1000;
+        obj.a.i.j.l[1].p = 1000;
+        obj.q.y.z = 1000;
+
+        expect(names).members(["e", "p", "z"]);
+    });
+
+    it("handles circular references", () => {
+        const obj = {
+            a: 1,
+            b: 2,
+            c: null as any
+        };
+
+        const obj2 = {
+            d: 3,
+            e: 4,
+            f: obj
+        };
+
+        obj.c = obj2;
+
+        makeObservable(obj, true);
+
+        const names: string[] = [];
+        const subscriber = {
+            handleChange(subject, propertyName) {
+                names.push(propertyName);
+            }
+        };
+
+        Observable.getNotifier(obj).subscribe(subscriber);
+        Observable.getNotifier(obj2).subscribe(subscriber);
+
+        obj.a = 2;
+        obj.b = 3;
+        obj.c.d = 4;
+        obj.c.e = 5;
+        obj.c.f.a = 6;
+
+        expect(names).members(["a", "b", "d", "e", "a"]);
+    });
+});
+
+describe("The watch function", () => {
+    it("can watch simple properties", () => {
+        const obj = makeObservable({
+            a: 1,
+            b: 2,
+            c: 3
+        });
+
+        const names: string[] = [];
+        watch(obj, (subject, propertyName) => {
+            names.push(propertyName);
+        });
+
+        obj.a = 2;
+        obj.b = 3;
+        obj.c = 4;
+
+        expect(names).members(["a", "b", "c"]);
+    });
+
+    it("can dispose the watcher for simple properties", () => {
+        const obj = makeObservable({
+            a: 1,
+            b: 2,
+            c: 3
+        });
+
+        const names: string[] = [];
+        const subscription = watch(obj, (subject, propertyName) => {
+            names.push(propertyName);
+        });
+
+        subscription.dispose();
+
+        obj.a = 2;
+        obj.b = 3;
+        obj.c = 4;
+
+        expect(names).members([]);
+    });
+
+    it("can watch array items", () => {
+        const array = makeObservable([
+            {
+                a: 1,
+                b: 2,
+                c: 3
+            },
+            {
+                d: 4,
+                e: 5,
+                f: 6
+            }
+        ]);
+
+        const names: string[] = [];
+        watch(array, (subject, propertyName) => {
+            names.push(propertyName);
+        });
+
+        array[0].a = 2;
+        array[0].b = 3;
+        array[0].c = 4;
+        array[1].d = 5;
+        array[1].e = 6;
+        array[1].f = 7;
+
+        expect(names).members(["a", "b", "c", "d", "e", "f"]);
+    });
+
+    it("can dispose the watcher for array items", () => {
+        const array = makeObservable([
+            {
+                a: 1,
+                b: 2,
+                c: 3
+            },
+            {
+                d: 4,
+                e: 5,
+                f: 6
+            }
+        ]);
+
+        const names: string[] = [];
+        const subscription = watch(array, (subject, propertyName) => {
+            names.push(propertyName);
+        });
+
+        subscription.dispose();
+
+        array[0].a = 2;
+        array[0].b = 3;
+        array[0].c = 4;
+        array[1].d = 5;
+        array[1].e = 6;
+        array[1].f = 7;
+
+        expect(names).members([]);
+    });
+
+    it("can watch arrays", async () => {
+        const array: any[] = makeObservable([
+            {
+                a: 1,
+                b: 2,
+                c: 3
+            }
+        ]);
+
+        const splices: string[] = [];
+        watch(array, (subject, args) => {
+            splices.push(...args);
+        });
+
+        array.push({
+            d: 4,
+            e: 5,
+            f: 6
+        });
+
+        await Updates.next();
+
+        expect(splices.length).equal(1);
+        expect(splices[0]).instanceOf(Splice);
+    });
+
+    it("can dispose the watcher for an array", async () => {
+        const array: any[] = makeObservable([
+            {
+                a: 1,
+                b: 2,
+                c: 3
+            }
+        ]);
+
+        const splices: string[] = [];
+        const subscription = watch(array, (subject, splice) => {
+            splices.push(splice);
+        });
+
+        subscription.dispose();
+
+        array.push({
+            d: 4,
+            e: 5,
+            f: 6
+        });
+
+        await Updates.next();
+
+        expect(splices.length).equal(0);
+    });
+
+    it("can deeply watch objects", () => {
+        const obj = makeObservable(createComplexObject(), true);
+
+        const names: string[] = [];
+        watch(obj, (subject, propertyName) => {
+            names.push(propertyName);
+        });
+
+        obj.a.b.d[0].e = 1000;
+        obj.a.i.j.l[1].p = 1000;
+        obj.q.y.z = 1000;
+
+        expect(names).members(["e", "p", "z"]);
+    });
+
+    it("can dispose a deep watcher", () => {
+        const obj = makeObservable(createComplexObject(), true);
+
+        const names: string[] = [];
+        const subscription = watch(obj, (subject, propertyName) => {
+            names.push(propertyName);
+        });
+
+        subscription.dispose();
+
+        obj.a.b.d[0].e = 1000;
+        obj.a.i.j.l[1].p = 1000;
+        obj.q.y.z = 1000;
+
+        expect(names).members([]);
+    });
+});
diff --git a/packages/web-components/fast-element/src/utilities.ts b/packages/web-components/fast-element/src/utilities.ts
new file mode 100644
index 00000000000..02420ba6ef5
--- /dev/null
+++ b/packages/web-components/fast-element/src/utilities.ts
@@ -0,0 +1,183 @@
+import { ArrayObserver } from "./index.debug.js";
+import { Disposable, isFunction } from "./interfaces.js";
+import type { Notifier, Subscriber } from "./observation/notifier.js";
+import { Observable } from "./observation/observable.js";
+
+interface ObjectVisitor<TVisitorData> {
+    visitObject(object: any, data: TVisitorData): void;
+    visitArray(array: any[], data: TVisitorData): void;
+    visitProperty(object: any, key: PropertyKey, value: any, data: TVisitorData): void;
+}
+
+function shouldTraverse(value: any, traversed: WeakSet<any> | Set<any>) {
+    return (
+        value !== null &&
+        value !== void 0 &&
+        typeof value === "object" &&
+        !traversed.has(value)
+    );
+}
+
+function traverseObject<TVisitorData>(
+    object: any,
+    deep: boolean,
+    visitor: ObjectVisitor<TVisitorData>,
+    data: TVisitorData,
+    traversed: WeakSet<any> | Set<any>
+): void {
+    if (!shouldTraverse(object, traversed)) {
+        return;
+    }
+
+    traversed.add(object);
+
+    if (Array.isArray(object)) {
+        visitor.visitArray(object, data);
+
+        for (const item of object) {
+            traverseObject(item, deep, visitor, data, traversed);
+        }
+    } else {
+        visitor.visitObject(object, data);
+
+        for (const key in object) {
+            const value = object[key];
+            visitor.visitProperty(object, key, value, data);
+
+            if (deep) {
+                traverseObject(value, deep, visitor, data, traversed);
+            }
+        }
+    }
+}
+
+const noop = () => void 0;
+const observed = new WeakSet<any>();
+
+const makeObserverVisitor: ObjectVisitor<undefined> = {
+    visitObject: noop,
+    visitArray: noop,
+    visitProperty(object: any, propertyName: string, value: any): void {
+        Reflect.defineProperty(object, propertyName, {
+            enumerable: true,
+            get() {
+                Observable.track(object, propertyName);
+                return value;
+            },
+            set(newValue: any) {
+                if (value !== newValue) {
+                    value = newValue;
+                    Observable.notify(object, propertyName);
+                }
+            },
+        });
+    },
+};
+
+interface WatchData {
+    notifiers: Notifier[];
+    subscriber: Subscriber;
+}
+
+function watchObject(object: any, data: WatchData) {
+    const notifier = Observable.getNotifier(object);
+    notifier.subscribe(data.subscriber);
+    data.notifiers.push(notifier);
+}
+
+const watchVisitor: ObjectVisitor<WatchData> = {
+    visitProperty: noop,
+    visitObject: watchObject,
+    visitArray: watchObject,
+};
+
+/**
+ * Converts a plain object to an observable object.
+ * @param object - The object to make observable.
+ * @param deep - Indicates whether or not to deeply convert the oject.
+ * @returns The converted object.
+ * @beta
+ */
+export function makeObservable<T>(object: T, deep = false): T {
+    traverseObject(object, deep, makeObserverVisitor, void 0, observed);
+    return object;
+}
+
+/**
+ * Deeply subscribes to changes in existing observable objects.
+ * @param object - The observable object to watch.
+ * @param subscriber - The handler to call when changes are made to the object.
+ * @returns A disposable that can be used to unsubscribe from change updates.
+ * @beta
+ */
+export function watch(
+    object: any,
+    subscriber: Subscriber | ((subject: any, args: any) => void)
+): Disposable {
+    const data: WatchData = {
+        notifiers: [],
+        subscriber: isFunction(subscriber) ? { handleChange: subscriber } : subscriber,
+    };
+
+    ArrayObserver.enable();
+    traverseObject(object, true, watchVisitor, data, new Set());
+
+    return {
+        dispose() {
+            for (const n of data.notifiers) {
+                n.unsubscribe(data.subscriber);
+            }
+        },
+    };
+}
+
+/**
+ * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
+ * When the parent of a node is a shadow-root, it will return the host
+ * element of the shadow root. Otherwise it will return the parent node or null if
+ * no parent node exists.
+ * @param element - The element for which to retrieve the composed parent
+ *
+ * @public
+ */
+export function composedParent<T extends HTMLElement>(element: T): HTMLElement | null {
+    const parentNode = element.parentElement;
+
+    if (parentNode) {
+        return parentNode;
+    } else {
+        const rootNode = element.getRootNode();
+
+        if ((rootNode as ShadowRoot).host instanceof HTMLElement) {
+            // this is shadow-root
+            return (rootNode as ShadowRoot).host as HTMLElement;
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Determines if the reference element contains the test element in a "composed" DOM tree that
+ * ignores shadow DOM boundaries.
+ *
+ * Returns true of the test element is a descendent of the reference, or exist in
+ * a shadow DOM that is a logical descendent of the reference. Otherwise returns false.
+ * @param reference - The element to test for containment against.
+ * @param test - The element being tested for containment.
+ *
+ * @public
+ */
+export function composedContains(reference: HTMLElement, test: HTMLElement): boolean {
+    let current: HTMLElement | null = test;
+
+    while (current !== null) {
+        if (current === reference) {
+            return true;
+        }
+
+        current = composedParent(current);
+    }
+
+    return false;
+}
diff --git a/packages/web-components/fast-element/tsconfig.json b/packages/web-components/fast-element/tsconfig.json
index 649f0095b1c..287738399ae 100644
--- a/packages/web-components/fast-element/tsconfig.json
+++ b/packages/web-components/fast-element/tsconfig.json
@@ -9,6 +9,7 @@
         "strictPropertyInitialization": false,
         "target": "es2015",
         "module": "ESNext",
+        "moduleResolution": "Node16",
         "types": [
             "mocha",
             "webpack-env"
diff --git a/packages/web-components/fast-foundation/.eslintrc.json b/packages/web-components/fast-foundation/.eslintrc.json
index fd9147f2761..3755386a182 100644
--- a/packages/web-components/fast-foundation/.eslintrc.json
+++ b/packages/web-components/fast-foundation/.eslintrc.json
@@ -20,16 +20,6 @@
                 },
                 "extendDefaults": true
             }
-        ],
-        "import/extensions": [
-            "error",
-            "always",
-            {
-                "template": "never",
-                "form-associated": "never",
-                "options": "never",
-                "element": "never"
-            }
         ]
     }
 }
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 8d9b2c18641..f315d48e800 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -9,6 +9,8 @@ import { Behavior } from '@microsoft/fast-element';
 import type { CaptureType } from '@microsoft/fast-element';
 import { ChildViewTemplate } from '@microsoft/fast-element';
 import { ComposableStyles } from '@microsoft/fast-element';
+import { composedContains } from '@microsoft/fast-element/utilities';
+import { composedParent } from '@microsoft/fast-element/utilities';
 import { Constructable } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
@@ -594,11 +596,9 @@ export const ComponentPresentation: Readonly<{
     forTag(tagName: string, element: HTMLElement): ComponentPresentation | null;
 }>;
 
-// @public
-export function composedContains(reference: HTMLElement, test: HTMLElement): boolean;
+export { composedContains }
 
-// @public
-export function composedParent<T extends HTMLElement>(element: T): HTMLElement | null;
+export { composedParent }
 
 // @beta
 export type ConstructableFormAssociated = Constructable<HTMLElement & FASTElement>;
diff --git a/packages/web-components/fast-foundation/karma.conf.cjs b/packages/web-components/fast-foundation/karma.conf.cjs
index 05ea8bcaa25..4e96dbab80e 100644
--- a/packages/web-components/fast-foundation/karma.conf.cjs
+++ b/packages/web-components/fast-foundation/karma.conf.cjs
@@ -1,5 +1,4 @@
 const path = require("path");
-
 const basePath = path.resolve(__dirname);
 
 const commonChromeFlags = [
@@ -44,9 +43,9 @@ module.exports = function (config) {
             require("karma-chrome-launcher"),
             require("karma-firefox-launcher"),
         ],
-        files: [`dist/esm/__test__/${setup}.js`],
+        files: [`dist/esm/__test__/${setup}.cjs`],
         preprocessors: {
-            [`dist/esm/__test__/${setup}.js`]: ["webpack", "sourcemap"],
+            [`dist/esm/__test__/${setup}.cjs`]: ["webpack", "sourcemap"],
         },
         webpackMiddleware: {
             // webpack-dev-middleware configuration
@@ -54,7 +53,7 @@ module.exports = function (config) {
             stats: "errors-only",
         },
         webpack: {
-            mode: "none",
+            mode: "development",
             resolve: {
                 extensions: [".js"],
                 modules: ["dist", "node_modules"],
@@ -65,12 +64,8 @@ module.exports = function (config) {
                 hints: false,
             },
             optimization: {
-                namedModules: false,
-                namedChunks: false,
-                nodeEnv: false,
                 usedExports: true,
                 flagIncludedChunks: false,
-                occurrenceOrder: false,
                 sideEffects: true,
                 concatenateModules: true,
                 splitChunks: {
@@ -89,14 +84,8 @@ module.exports = function (config) {
                     },
                     {
                         test: /\.js$/,
-                        use: [
-                            {
-                                loader: "source-map-loader",
-                                options: {
-                                    enforce: "pre",
-                                },
-                            },
-                        ],
+                        use: ["source-map-loader"],
+                        enforce: "pre",
                     },
                 ],
             },
@@ -125,7 +114,7 @@ module.exports = function (config) {
                 timeout: 5000,
             },
         },
-        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
+        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests,
     };
 
     if (config.coverage) {
diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
index 1f723b7c7d7..0271e73cf7b 100644
--- a/packages/web-components/fast-foundation/package.json
+++ b/packages/web-components/fast-foundation/package.json
@@ -26,7 +26,7 @@
       "types": "./dist/fast-foundation.d.ts",
       "default": "./dist/esm/index.js"
     },
-    "./testing.js": {
+    "./testing": {
       "types": "./dist/dts/testing/exports.d.ts",
       "default": "./dist/esm/testing/exports.js"
     }
@@ -88,7 +88,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-source-map-support": "^1.4.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "rollup": "^2.71.1",
@@ -103,7 +103,8 @@
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
     "typescript": "^4.7.0",
-    "webpack": "^4.44.0"
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2"
   },
   "dependencies": {
     "@microsoft/fast-element": "^1.10.2",
diff --git a/packages/web-components/fast-foundation/src/__test__/setup-browser.ts b/packages/web-components/fast-foundation/src/__test__/setup-browser.cts
similarity index 100%
rename from packages/web-components/fast-foundation/src/__test__/setup-browser.ts
rename to packages/web-components/fast-foundation/src/__test__/setup-browser.cts
diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.spec.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.spec.ts
index 815fc1f3b94..ac42b9ae059 100644
--- a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.spec.ts
+++ b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { AccordionItem, accordionItemTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { AccordionItem, accordionItemTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 
 
 const FASTAccordionItem = AccordionItem.compose({
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts b/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts
index 33c77241abd..995c6794dfa 100644
--- a/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts
+++ b/packages/web-components/fast-foundation/src/accordion/accordion.spec.ts
@@ -1,9 +1,8 @@
 import { expect } from "chai";
-import { Accordion, accordionTemplate as template } from "./index";
-import { AccordionItem, accordionItemTemplate as itemTemplate } from "../accordion-item";
-import { fixture } from "../testing/fixture";
+import { Accordion, accordionTemplate as template, AccordionExpandMode } from "./index.js";
+import { AccordionItem, accordionItemTemplate as itemTemplate } from "../accordion-item/index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
-import { AccordionExpandMode } from "./accordion";
 
 const FASTAccordion = Accordion.compose({
     baseName: "accordion",
diff --git a/packages/web-components/fast-foundation/src/anchor/anchor.spec.ts b/packages/web-components/fast-foundation/src/anchor/anchor.spec.ts
index 3da3ddd6828..d274e37e942 100644
--- a/packages/web-components/fast-foundation/src/anchor/anchor.spec.ts
+++ b/packages/web-components/fast-foundation/src/anchor/anchor.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { Anchor, anchorTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { Anchor, anchorTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 
 const FASTAnchor = Anchor.compose({
     baseName: "anchor",
diff --git a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts
index bc4e628dea1..019d32a7ec1 100644
--- a/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts
+++ b/packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { AnchoredRegion, anchoredRegionTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { AnchoredRegion, anchoredRegionTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 
 const FASTAnchoredRegion = AnchoredRegion.compose({
diff --git a/packages/web-components/fast-foundation/src/badge/badge.spec.ts b/packages/web-components/fast-foundation/src/badge/badge.spec.ts
index 0ea374c05e8..dc237cc0e6d 100644
--- a/packages/web-components/fast-foundation/src/badge/badge.spec.ts
+++ b/packages/web-components/fast-foundation/src/badge/badge.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { Badge, badgeTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { Badge, badgeTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 
 const FASTBadge = Badge.compose({
     baseName: "badge",
diff --git a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.spec.ts b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.spec.ts
index 9fff06457cd..3ce83bb9214 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.spec.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { BreadcrumbItem, breadcrumbItemTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { BreadcrumbItem, breadcrumbItemTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 
 const FASTBreadcrumbItem = BreadcrumbItem.compose({
     baseName: "breadcrumb-item",
diff --git a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts
index 72162f40e95..02ee9afc29f 100644
--- a/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts
+++ b/packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
-import { Breadcrumb, breadcrumbTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
-import { BreadcrumbItem, breadcrumbItemTemplate } from "../breadcrumb-item";
+import { Breadcrumb, breadcrumbTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
+import { BreadcrumbItem, breadcrumbItemTemplate } from "../breadcrumb-item/index.js";
 import { Updates } from "@microsoft/fast-element";
 
 const FASTBreadcrumb = Breadcrumb.compose({
diff --git a/packages/web-components/fast-foundation/src/button/button.spec.ts b/packages/web-components/fast-foundation/src/button/button.spec.ts
index 0b6a5d4c777..2257e17e684 100644
--- a/packages/web-components/fast-foundation/src/button/button.spec.ts
+++ b/packages/web-components/fast-foundation/src/button/button.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
 import { Updates } from "@microsoft/fast-element";
-import { fixture } from "../testing/fixture";
-import { Button, buttonTemplate as template } from "./index";
+import { fixture } from "../testing/fixture.js";
+import { Button, buttonTemplate as template } from "./index.js";
 import { eventClick } from "@microsoft/fast-web-utilities";
 
 const FASTButton = Button.compose({
diff --git a/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts b/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts
index b1a80623e7b..1d2b3fd0e6a 100644
--- a/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts
+++ b/packages/web-components/fast-foundation/src/calendar/calendar.spec.ts
@@ -1,8 +1,8 @@
 import { Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
-import { fixture } from "../testing/fixture";
-import { Calendar, calendarTemplate } from "./index";
-import { DateFormatter } from "./date-formatter";
+import { fixture } from "../testing/fixture.js";
+import { Calendar, calendarTemplate } from "./index.js";
+import { DateFormatter } from "./date-formatter.js";
 import {
     dataGridTemplate,
     DataGrid,
@@ -10,7 +10,7 @@ import {
     DataGridRow,
     dataGridRowTemplate,
     dataGridCellTemplate
-} from "../data-grid/index";
+} from "../data-grid/index.js";
 
 
 const FASTDataGridCell = DataGridCell.compose({
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts
index 4eb502d21a6..4e3c813bbf0 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.ts
@@ -1,6 +1,6 @@
 import { assert, expect } from "chai";
-import { Checkbox, checkboxTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { Checkbox, checkboxTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 import { keySpace } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts b/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts
index 9481a01300c..04771be5c66 100644
--- a/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts
+++ b/packages/web-components/fast-foundation/src/combobox/combobox.spec.ts
@@ -1,9 +1,9 @@
 import { Updates } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp } from "@microsoft/fast-web-utilities";
 import { expect } from "chai";
-import { ListboxOption, listboxOptionTemplate } from "../listbox-option";
-import { fixture } from "../testing/fixture";
-import { Combobox, comboboxTemplate as template } from "./index";
+import { ListboxOption, listboxOptionTemplate } from "../listbox-option/index.js";
+import { fixture } from "../testing/fixture.js";
+import { Combobox, comboboxTemplate as template } from "./index.js";
 
 describe("Combobox", () => {
     const FASTCombobox = Combobox.compose({
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts
index 04af36e61be..13b44146ff9 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from "chai";
 import { html, ViewTemplate } from "@microsoft/fast-element";
-import { fixture } from "../testing/fixture";
-import { dataGridCellTemplate, DataGridCell } from "./index";
-import { newDataRow } from "./data-grid.spec";
-import { DataGridCellTypes } from "./data-grid.options";
+import { fixture } from "../testing/fixture.js";
+import { dataGridCellTemplate, DataGridCell } from "./index.js";
+import { newDataRow } from "./data-grid.spec.js";
+import { DataGridCellTypes } from "./data-grid.options.js";
 
 
 const FASTDataGridCell = DataGridCell.compose({
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts
index ea0cbf61123..81098a0bc86 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from "chai";
 import { Updates } from "@microsoft/fast-element";
-import { fixture } from "../testing/fixture";
-import { ColumnDefinition, dataGridRowTemplate, DataGridCell, dataGridCellTemplate, DataGridRow } from "./index";
-import { newDataRow } from "./data-grid.spec";
+import { fixture } from "../testing/fixture.js";
+import { ColumnDefinition, dataGridRowTemplate, DataGridCell, dataGridCellTemplate, DataGridRow } from "./index.js";
+import { newDataRow } from "./data-grid.spec.js";
 import { keyArrowLeft, keyArrowRight, keyEnd, keyHome } from "@microsoft/fast-web-utilities";
 
 const FASTDataGridCell = DataGridCell.compose({
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts
index 3a514a732e8..ba3f2796353 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { fixture } from "../testing/fixture";
+import { fixture } from "../testing/fixture.js";
 import {
     dataGridTemplate,
     DataGrid,
@@ -7,9 +7,9 @@ import {
     dataGridRowTemplate,
     DataGridCell,
     dataGridCellTemplate
-} from "./index";
-import type { ColumnDefinition } from "./data-grid";
-import { DataGridRowTypes, GenerateHeaderOptions } from "./data-grid.options";
+} from "./index.js";
+import type { ColumnDefinition } from "./data-grid.js";
+import { DataGridRowTypes, GenerateHeaderOptions } from "./data-grid.options.js";
 import { Updates } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp, keyEnd, keyHome } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts b/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts
index ba0f3ebdfc9..d4bcd971fcd 100644
--- a/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts
+++ b/packages/web-components/fast-foundation/src/design-system/design-system.spec.ts
@@ -1,11 +1,11 @@
 import { Constructable, DOM, Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
-import { FoundationElement } from "..";
-import { Container, DI, Registration } from "../di";
-import { uniqueElementName } from "../testing/fixture";
-import { DesignSystem, ElementDisambiguation } from "./design-system";
-import type { DesignSystemRegistrationContext } from "./registration-context";
-import { DesignToken } from "../design-token/design-token";
+import { Container, DI, Registration } from "../di/di.js";
+import { uniqueElementName } from "../testing/fixture.js";
+import { DesignSystem, ElementDisambiguation } from "./design-system.js";
+import type { DesignSystemRegistrationContext } from "./registration-context.js";
+import { DesignToken } from "../design-token/design-token.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
 
 describe("DesignSystem", () => {
     it("Should return the same instance for the same element", () => {
diff --git a/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts b/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
index 0cf2682b801..11134052a53 100644
--- a/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
+++ b/packages/web-components/fast-foundation/src/design-token/design-token.spec.ts
@@ -1,9 +1,9 @@
 import { css, FASTElement, html, Observable, Updates } from "@microsoft/fast-element";
 import chia, { expect } from "chai";
-import { DesignSystem } from "../design-system";
-import { uniqueElementName } from "../testing/fixture";
-import { FoundationElement } from "../foundation-element";
-import { CSSDesignToken, DesignToken, DesignTokenChangeRecord, DesignTokenSubscriber } from "./design-token";
+import { DesignSystem } from "../design-system/index.js";
+import { uniqueElementName } from "../testing/fixture.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { CSSDesignToken, DesignToken, DesignTokenChangeRecord, DesignTokenSubscriber } from "./design-token.js";
 import spies from "chai-spies";
 
 chia.use(spies);
diff --git a/packages/web-components/fast-foundation/src/design-token/design-token.ts b/packages/web-components/fast-foundation/src/design-token/design-token.ts
index 0a2c562062a..598ee10dab4 100644
--- a/packages/web-components/fast-foundation/src/design-token/design-token.ts
+++ b/packages/web-components/fast-foundation/src/design-token/design-token.ts
@@ -3,14 +3,14 @@ import {
     Binding,
     BindingObserver,
     CSSDirective,
+    Disposable,
     ExecutionContext,
     FASTElement,
     observable,
     Observable,
     Subscriber,
 } from "@microsoft/fast-element";
-import { composedParent } from "../utilities/composed-parent.js";
-import { composedContains } from "../utilities/composed-contains.js";
+import { composedContains, composedParent } from "@microsoft/fast-element/utilities";
 import {
     PropertyTargetManager,
     RootStyleSheetTarget,
@@ -346,7 +346,7 @@ class CustomPropertyReflector {
  * A light wrapper around BindingObserver to handle value caching and
  * token notification
  */
-class DesignTokenBindingObserver<T> {
+class DesignTokenBindingObserver<T> implements Disposable {
     public readonly dependencies = new Set<DesignTokenImpl<any>>();
     private observer: BindingObserver<HTMLElement, DerivedDesignTokenValue<T>>;
     constructor(
@@ -367,8 +367,8 @@ class DesignTokenBindingObserver<T> {
         this.handleChange();
     }
 
-    public disconnect() {
-        this.observer.disconnect();
+    public dispose(): void {
+        this.observer.dispose();
     }
 
     /**
@@ -827,7 +827,7 @@ class DesignTokenNode implements Behavior, Subscriber {
      */
     private tearDownBindingObserver<T>(token: DesignTokenImpl<T>): boolean {
         if (this.bindingObservers.has(token)) {
-            this.bindingObservers.get(token)!.disconnect();
+            this.bindingObservers.get(token)!.dispose();
             this.bindingObservers.delete(token);
             return true;
         }
diff --git a/packages/web-components/fast-foundation/src/di/di.containerconfiguration.spec.ts b/packages/web-components/fast-foundation/src/di/di.containerconfiguration.spec.ts
index 086ff17bbe8..4fb41ba4b90 100644
--- a/packages/web-components/fast-foundation/src/di/di.containerconfiguration.spec.ts
+++ b/packages/web-components/fast-foundation/src/di/di.containerconfiguration.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { ContainerConfiguration, DefaultResolver, DI, Container } from "./di";
+import { ContainerConfiguration, DefaultResolver, DI, Container } from "./di.js";
 
 describe("ContainerConfiguration", function () {
     let container0: Container;
diff --git a/packages/web-components/fast-foundation/src/di/di.exception.spec.ts b/packages/web-components/fast-foundation/src/di/di.exception.spec.ts
index b28dd4cd111..d679a17f94a 100644
--- a/packages/web-components/fast-foundation/src/di/di.exception.spec.ts
+++ b/packages/web-components/fast-foundation/src/di/di.exception.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { DI, optional } from "./di";
+import { DI, optional } from "./di.js";
 
 describe("DI Exception", function () {
     it("No registration for interface", function () {
diff --git a/packages/web-components/fast-foundation/src/di/di.get.spec.ts b/packages/web-components/fast-foundation/src/di/di.get.spec.ts
index 6eae3930603..76bc8678614 100644
--- a/packages/web-components/fast-foundation/src/di/di.get.spec.ts
+++ b/packages/web-components/fast-foundation/src/di/di.get.spec.ts
@@ -8,7 +8,7 @@ import {
     optional,
     Registration,
     singleton,
-} from "./di";
+} from "./di.js";
 
 describe("DI.get", function () {
     let container: Container;
diff --git a/packages/web-components/fast-foundation/src/di/di.getAll.spec.ts b/packages/web-components/fast-foundation/src/di/di.getAll.spec.ts
index 6024fdd976d..68810678765 100644
--- a/packages/web-components/fast-foundation/src/di/di.getAll.spec.ts
+++ b/packages/web-components/fast-foundation/src/di/di.getAll.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { all, DI, Container, Registration } from "./di";
+import { all, DI, Container, Registration } from "./di.js";
 
 describe("Container#.getAll", function () {
     let container: Container;
diff --git a/packages/web-components/fast-foundation/src/di/di.integration.spec.ts b/packages/web-components/fast-foundation/src/di/di.integration.spec.ts
index 085b3268953..cbee163b1fc 100644
--- a/packages/web-components/fast-foundation/src/di/di.integration.spec.ts
+++ b/packages/web-components/fast-foundation/src/di/di.integration.spec.ts
@@ -1,4 +1,4 @@
-import { DI, Container, inject, InterfaceSymbol, Registration, singleton } from "./di";
+import { DI, Container, inject, InterfaceSymbol, Registration, singleton } from "./di.js";
 import chai, { expect } from "chai";
 import spies from "chai-spies";
 
diff --git a/packages/web-components/fast-foundation/src/di/di.spec.ts b/packages/web-components/fast-foundation/src/di/di.spec.ts
index 06360448517..e98219b7b46 100644
--- a/packages/web-components/fast-foundation/src/di/di.spec.ts
+++ b/packages/web-components/fast-foundation/src/di/di.spec.ts
@@ -9,7 +9,7 @@ import {
     ResolverStrategy,
     singleton,
     transient,
-} from "./di";
+} from "./di.js";
 import chai, { expect } from "chai";
 import spies from "chai-spies";
 import { customElement, FASTElement, html, ref } from "@microsoft/fast-element";
diff --git a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
index 837ee764d9e..674ec3ac79a 100644
--- a/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
+++ b/packages/web-components/fast-foundation/src/dialog/dialog.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { Dialog, dialogTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { Dialog, dialogTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 import { keyEscape } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts b/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
index 4d23160175d..cfe846a4e8e 100644
--- a/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
+++ b/packages/web-components/fast-foundation/src/directives/reflect-attributes.spec.ts
@@ -1,6 +1,6 @@
 import { html, ref, customElement, FASTElement, Updates } from "@microsoft/fast-element";
-import { fixture, uniqueElementName } from "../testing/fixture";
-import { reflectAttributes } from "./reflect-attributes";
+import { fixture, uniqueElementName } from "../testing/fixture.js";
+import { reflectAttributes } from "./reflect-attributes.js";
 import { expect } from "chai";
 
 const template = html<AttributeReflectionTestElement>`
diff --git a/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts b/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
index 60d63c8e9b6..299f0194810 100644
--- a/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
+++ b/packages/web-components/fast-foundation/src/disclosure/disclosure.spec.ts
@@ -1,7 +1,7 @@
 import { Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
-import { fixture } from "../testing/fixture";
-import { Disclosure, disclosureTemplate as template } from "./index";
+import { fixture } from "../testing/fixture.js";
+import { Disclosure, disclosureTemplate as template } from "./index.js";
 
 const FastDisclosure = Disclosure.compose({
     baseName: "disclosure",
diff --git a/packages/web-components/fast-foundation/src/divider/divider.spec.ts b/packages/web-components/fast-foundation/src/divider/divider.spec.ts
index b07ed6548c8..278e2405d94 100644
--- a/packages/web-components/fast-foundation/src/divider/divider.spec.ts
+++ b/packages/web-components/fast-foundation/src/divider/divider.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from "chai";
 import { Updates } from "@microsoft/fast-element";
-import { fixture } from "../testing/fixture";
-import { DividerRole } from "./divider.options";
-import { Divider, dividerTemplate as template } from "./index";
+import { fixture } from "../testing/fixture.js";
+import { DividerRole } from "./divider.options.js";
+import { Divider, dividerTemplate as template } from "./index.js";
 import { Orientation } from "@microsoft/fast-web-utilities";
 
 const FASTDivider = Divider.compose({
diff --git a/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts b/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts
index cc39c97a6af..817680cb1fe 100644
--- a/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts
+++ b/packages/web-components/fast-foundation/src/flipper/flipper.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from "chai";
 import { Updates } from "@microsoft/fast-element";
-import { fixture } from "../testing/fixture";
-import { FlipperDirection } from "./flipper.options";
-import { Flipper, flipperTemplate as template } from "./index";
+import { fixture } from "../testing/fixture.js";
+import { FlipperDirection } from "./flipper.options.js";
+import { Flipper, flipperTemplate as template } from "./index.js";
 
 const FASTFlipper = Flipper.compose({
     baseName: "flipper",
diff --git a/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts b/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts
index 976ad615960..91c7fe7a061 100644
--- a/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts
+++ b/packages/web-components/fast-foundation/src/form-associated/form-associated.spec.ts
@@ -1,6 +1,6 @@
-import { FormAssociated, CheckableFormAssociated } from "./form-associated";
+import { FormAssociated, CheckableFormAssociated } from "./form-associated.js";
 import { assert, expect } from "chai";
-import { fixture } from "../testing/fixture";
+import { fixture } from "../testing/fixture.js";
 import { customElement, FASTElement, html, Updates } from "@microsoft/fast-element";
 
 const template = html`
diff --git a/packages/web-components/fast-foundation/src/foundation-element/foundation-element.spec.ts b/packages/web-components/fast-foundation/src/foundation-element/foundation-element.spec.ts
index b6a62b84101..2ae3c7a1c6e 100644
--- a/packages/web-components/fast-foundation/src/foundation-element/foundation-element.spec.ts
+++ b/packages/web-components/fast-foundation/src/foundation-element/foundation-element.spec.ts
@@ -1,14 +1,14 @@
 import { css, customElement, html } from "@microsoft/fast-element";
 import { expect } from "chai";
-import { DI } from "../di";
-import { fixture, uniqueElementName } from "../testing/fixture";
+import { DI } from "../di/di.js";
+import { fixture, uniqueElementName } from "../testing/fixture.js";
 import {
     ComponentPresentation,
     DefaultComponentPresentation,
     DesignSystem,
     ElementDefinitionContext,
-} from "../design-system";
-import { FoundationElement, FoundationElementDefinition, OverrideFoundationElementDefinition } from "./foundation-element";
+} from "../design-system/index.js";
+import { FoundationElement, FoundationElementDefinition, OverrideFoundationElementDefinition } from "./foundation-element.js";
 
 const styles = css`
     :host {
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts
index d46fc0746ad..0b7b3a40643 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts
@@ -1,7 +1,7 @@
 import { css, Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
-import { fixture } from "../testing/fixture";
-import { HorizontalScroll, horizontalScrollTemplate as template } from "./index";
+import { fixture } from "../testing/fixture.js";
+import { HorizontalScroll, horizontalScrollTemplate as template } from "./index.js";
 
 const styles = css`
     :host {
diff --git a/packages/web-components/fast-foundation/src/index.rollup.debug.ts b/packages/web-components/fast-foundation/src/index.rollup.debug.ts
index 09cf4f56145..b82be76bc5d 100644
--- a/packages/web-components/fast-foundation/src/index.rollup.debug.ts
+++ b/packages/web-components/fast-foundation/src/index.rollup.debug.ts
@@ -1,4 +1,4 @@
-import "@microsoft/fast-element/polyfills.js";
-import "@microsoft/fast-element/debug.js";
+import "@microsoft/fast-element/polyfills";
+import "@microsoft/fast-element/debug";
 export * from "@microsoft/fast-element";
 export * from "./index.js";
diff --git a/packages/web-components/fast-foundation/src/index.rollup.ts b/packages/web-components/fast-foundation/src/index.rollup.ts
index 714c93365ae..2dd50cd8fe9 100644
--- a/packages/web-components/fast-foundation/src/index.rollup.ts
+++ b/packages/web-components/fast-foundation/src/index.rollup.ts
@@ -1,3 +1,3 @@
-import "@microsoft/fast-element/polyfills.js";
+import "@microsoft/fast-element/polyfills";
 export * from "@microsoft/fast-element";
 export * from "./index.js";
diff --git a/packages/web-components/fast-foundation/src/index.ts b/packages/web-components/fast-foundation/src/index.ts
index ab6e2859c99..3fb4a9b9fe8 100644
--- a/packages/web-components/fast-foundation/src/index.ts
+++ b/packages/web-components/fast-foundation/src/index.ts
@@ -63,3 +63,6 @@ export * from "./tree-view/index.js";
 
 // export our utilities
 export * from "./utilities/index.js";
+
+// TODO: remove this before final release once site and CLI are ready
+export { composedParent, composedContains } from "@microsoft/fast-element/utilities";
diff --git a/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts b/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts
index 2e211204a61..7a2056a359b 100644
--- a/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts
+++ b/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts
@@ -1,9 +1,9 @@
 import { Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
-import { ListboxOption } from "../listbox-option/listbox-option";
-import { listboxOptionTemplate as itemTemplate } from "../listbox-option/listbox-option.template";
-import { fixture } from "../testing/fixture";
-import { ListboxElement, listboxTemplate as template } from "./index";
+import { ListboxOption } from "../listbox-option/listbox-option.js";
+import { listboxOptionTemplate as itemTemplate } from "../listbox-option/listbox-option.template.js";
+import { fixture } from "../testing/fixture.js";
+import { ListboxElement, listboxTemplate as template } from "./index.js";
 
 describe("Listbox", () => {
     const FASTListbox = ListboxElement.compose({
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts
index dff665db746..d5044becb30 100644
--- a/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts
+++ b/packages/web-components/fast-foundation/src/menu-item/menu-item.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from "chai";
-import { MenuItem, menuItemTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { MenuItem, menuItemTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
-import { MenuItemRole } from "./menu-item";
+import { MenuItemRole } from "./menu-item.js";
 import { keyEnter, keySpace } from "@microsoft/fast-web-utilities";
-import { AnchoredRegion, anchoredRegionTemplate } from "../anchored-region";
+import { AnchoredRegion, anchoredRegionTemplate } from "../anchored-region/index.js";
 
 const FASTMenuItem = MenuItem.compose({
     baseName: "menu-item",
diff --git a/packages/web-components/fast-foundation/src/menu/menu.spec.ts b/packages/web-components/fast-foundation/src/menu/menu.spec.ts
index 6d511d8b774..b6cee2b927c 100644
--- a/packages/web-components/fast-foundation/src/menu/menu.spec.ts
+++ b/packages/web-components/fast-foundation/src/menu/menu.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
-import { Menu, menuTemplate as template } from "./index";
-import { MenuItem, menuItemTemplate as itemTemplate, MenuItemRole } from "../menu-item";
-import { fixture } from "../testing/fixture";
+import { Menu, menuTemplate as template } from "./index.js";
+import { MenuItem, menuItemTemplate as itemTemplate, MenuItemRole } from "../menu-item/index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 import { keyArrowDown, keyArrowUp } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts b/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts
index d3f0572e188..fab8c71c153 100644
--- a/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts
+++ b/packages/web-components/fast-foundation/src/number-field/number-field.spec.ts
@@ -1,7 +1,7 @@
 import { Updates } from "@microsoft/fast-element";
 import { expect } from "chai";
-import { fixture } from "../testing/fixture";
-import { NumberField, numberFieldTemplate as template } from "./index";
+import { fixture } from "../testing/fixture.js";
+import { NumberField, numberFieldTemplate as template } from "./index.js";
 
 const FASTNumberField = NumberField.compose({
     baseName: "number-field",
diff --git a/packages/web-components/fast-foundation/src/picker/picker.spec.ts b/packages/web-components/fast-foundation/src/picker/picker.spec.ts
index 2f057dd3552..9123f5df445 100644
--- a/packages/web-components/fast-foundation/src/picker/picker.spec.ts
+++ b/packages/web-components/fast-foundation/src/picker/picker.spec.ts
@@ -10,8 +10,8 @@ import {
     pickerMenuOptionTemplate,
     pickerMenuTemplate,
     pickerTemplate,
-} from "./index";
-import { fixture } from "../testing/fixture";
+} from "./index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 import {
     keyArrowLeft,
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.spec.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.spec.ts
index 4bac861a640..3902fb43ba6 100644
--- a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.spec.ts
+++ b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
-import { BaseProgress as Progress } from "../progress";
-import { progressRingTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { BaseProgress as Progress } from "../progress/index.js";
+import { progressRingTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 
 const FASTProgressRing = Progress.compose({
     baseName: "progress-ring",
diff --git a/packages/web-components/fast-foundation/src/progress/progress.spec.ts b/packages/web-components/fast-foundation/src/progress/progress.spec.ts
index c29934bc515..bb56410f7aa 100644
--- a/packages/web-components/fast-foundation/src/progress/progress.spec.ts
+++ b/packages/web-components/fast-foundation/src/progress/progress.spec.ts
@@ -1,7 +1,6 @@
 import { expect } from "chai";
-import { BaseProgress as Progress, progressTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
-import { customElement } from "@microsoft/fast-element";
+import { BaseProgress as Progress, progressTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 
 const FASTProgress = Progress.compose({
     baseName: "progress",
diff --git a/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts b/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts
index a9ea59fc279..7d4bdb51d25 100644
--- a/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts
+++ b/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.ts
@@ -1,7 +1,7 @@
 import { assert, expect } from "chai";
-import { RadioGroup, radioGroupTemplate as template } from "./index";
-import { Radio, radioTemplate as itemTemplate } from "../radio";
-import { fixture } from "../testing/fixture";
+import { RadioGroup, radioGroupTemplate as template } from "./index.js";
+import { Radio, radioTemplate as itemTemplate } from "../radio/index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 import { Orientation } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/radio/radio.spec.ts b/packages/web-components/fast-foundation/src/radio/radio.spec.ts
index 8bfdcc9a6c5..0b938a21d79 100644
--- a/packages/web-components/fast-foundation/src/radio/radio.spec.ts
+++ b/packages/web-components/fast-foundation/src/radio/radio.spec.ts
@@ -1,6 +1,6 @@
 import { expect, assert } from "chai";
-import { Radio, radioTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { Radio, radioTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 import { keySpace } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/search/search.spec.ts b/packages/web-components/fast-foundation/src/search/search.spec.ts
index 4b497d802ed..bcf74aaf433 100644
--- a/packages/web-components/fast-foundation/src/search/search.spec.ts
+++ b/packages/web-components/fast-foundation/src/search/search.spec.ts
@@ -1,7 +1,7 @@
 import { expect, assert } from "chai";
-import { Button, buttonTemplate } from "../button";
-import { fixture } from "../testing/fixture";
-import { Search, searchTemplate as template } from "./index";
+import { Button, buttonTemplate } from "../button/index.js";
+import { fixture } from "../testing/fixture.js";
+import { Search, searchTemplate as template } from "./index.js";
 
 const FASTSearch = Search.compose({
     baseName: "search",
diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts
index d32b69f996d..beb982f76e7 100644
--- a/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts
+++ b/packages/web-components/fast-foundation/src/slider-label/slider-label.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { SliderLabel, sliderLabelTemplate as template } from "../index";
-import { fixture } from "../testing/fixture";
+import { SliderLabel, sliderLabelTemplate as template } from "../index.js";
+import { fixture } from "../testing/fixture.js";
 import { DOM, Updates } from "@microsoft/fast-element";
 import { Orientation } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/slider/slider.spec.ts b/packages/web-components/fast-foundation/src/slider/slider.spec.ts
index 7750d4c4832..b359822947c 100644
--- a/packages/web-components/fast-foundation/src/slider/slider.spec.ts
+++ b/packages/web-components/fast-foundation/src/slider/slider.spec.ts
@@ -1,6 +1,6 @@
 import { expect, assert } from "chai";
-import { Slider, sliderTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { Slider, sliderTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 import { Orientation, Direction } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/switch/switch.spec.ts b/packages/web-components/fast-foundation/src/switch/switch.spec.ts
index 0c98b26b9e6..66bb1be72e5 100644
--- a/packages/web-components/fast-foundation/src/switch/switch.spec.ts
+++ b/packages/web-components/fast-foundation/src/switch/switch.spec.ts
@@ -1,6 +1,6 @@
 import { expect, assert } from "chai";
-import { Switch, switchTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { Switch, switchTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 import { keySpace, keyEnter } from "@microsoft/fast-web-utilities";
 
diff --git a/packages/web-components/fast-foundation/src/tab-panel/tab-panel.spec.ts b/packages/web-components/fast-foundation/src/tab-panel/tab-panel.spec.ts
index 97b52235f9f..200290b1076 100644
--- a/packages/web-components/fast-foundation/src/tab-panel/tab-panel.spec.ts
+++ b/packages/web-components/fast-foundation/src/tab-panel/tab-panel.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { TabPanel, tabPanelTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { TabPanel, tabPanelTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 
 const FASTTabPanel = TabPanel.compose({
     baseName: "tab-panel",
diff --git a/packages/web-components/fast-foundation/src/tab/tab.spec.ts b/packages/web-components/fast-foundation/src/tab/tab.spec.ts
index 3bff961aea0..8bdb55fd388 100644
--- a/packages/web-components/fast-foundation/src/tab/tab.spec.ts
+++ b/packages/web-components/fast-foundation/src/tab/tab.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { Tab, tabTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { Tab, tabTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 
 const FASTTab = Tab.compose({
     baseName: "tab",
diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
index 53225ba5a8e..11349b5c079 100644
--- a/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
+++ b/packages/web-components/fast-foundation/src/tabs/tabs.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from "chai";
 import { css, Updates } from "@microsoft/fast-element";
-import { fixture } from "../testing/fixture";
-import { Tab, tabTemplate } from "../tab";
-import { TabPanel, tabPanelTemplate } from "../tab-panel";
-import { TabsOrientation, Tabs, tabsTemplate as template } from "./index";
+import { fixture } from "../testing/fixture.js";
+import { Tab, tabTemplate } from "../tab/index.js";
+import { TabPanel, tabPanelTemplate } from "../tab-panel/index.js";
+import { TabsOrientation, Tabs, tabsTemplate as template } from "./index.js";
 
 const FASTTab = Tab.compose({
     baseName: "tab",
diff --git a/packages/web-components/fast-foundation/src/testing/fixture.spec.ts b/packages/web-components/fast-foundation/src/testing/fixture.spec.ts
index 99fcde9f424..bfed49cd6cd 100644
--- a/packages/web-components/fast-foundation/src/testing/fixture.spec.ts
+++ b/packages/web-components/fast-foundation/src/testing/fixture.spec.ts
@@ -7,7 +7,7 @@ import {
     observable,
     Updates,
 } from "@microsoft/fast-element";
-import { uniqueElementName, fixture } from "./fixture";
+import { uniqueElementName, fixture } from "./fixture.js";
 
 describe("The fixture helper", () => {
     const name = uniqueElementName();
diff --git a/packages/web-components/fast-foundation/src/text-area/text-area.spec.ts b/packages/web-components/fast-foundation/src/text-area/text-area.spec.ts
index c94ca0c2590..30276d7dfa7 100644
--- a/packages/web-components/fast-foundation/src/text-area/text-area.spec.ts
+++ b/packages/web-components/fast-foundation/src/text-area/text-area.spec.ts
@@ -1,6 +1,6 @@
 import { expect, assert } from "chai";
-import { TextArea, textAreaTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { TextArea, textAreaTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 
 const FASTTextArea = TextArea.compose({
     baseName: "text-area",
diff --git a/packages/web-components/fast-foundation/src/text-field/text-field.spec.ts b/packages/web-components/fast-foundation/src/text-field/text-field.spec.ts
index 5c8ab1909f4..33f1d33975b 100644
--- a/packages/web-components/fast-foundation/src/text-field/text-field.spec.ts
+++ b/packages/web-components/fast-foundation/src/text-field/text-field.spec.ts
@@ -1,7 +1,7 @@
 import { expect, assert } from "chai";
-import { fixture } from "../testing/fixture";
-import { TextField, textFieldTemplate as template } from "./index";
-import { TextFieldType } from "./text-field";
+import { fixture } from "../testing/fixture.js";
+import { TextField, textFieldTemplate as template } from "./index.js";
+import { TextFieldType } from "./text-field.js";
 
 const FASTTextField = TextField.compose({
     baseName: "text-field",
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
index 850e0ca54de..af47815aec4 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
@@ -1,8 +1,8 @@
 import { Updates } from "@microsoft/fast-element";
 import { keyArrowRight, Orientation } from "@microsoft/fast-web-utilities";
 import { expect } from "chai";
-import { fixture } from "../testing/fixture";
-import { Toolbar, toolbarTemplate as template } from "./index";
+import { fixture } from "../testing/fixture.js";
+import { Toolbar, toolbarTemplate as template } from "./index.js";
 
 const FASTToolbar = Toolbar.compose({
   baseName: "toolbar",
diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts
index 331f0b64659..b2ad8a71a4e 100644
--- a/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts
+++ b/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from "chai";
 import { Updates } from "@microsoft/fast-element";
-import { fixture } from "../testing/fixture";
-import { tooltipTemplate as template, Tooltip } from "./index";
-import { TooltipPosition } from "./tooltip";
-import { AnchoredRegion, anchoredRegionTemplate } from '../anchored-region';
+import { fixture } from "../testing/fixture.js";
+import { tooltipTemplate as template, Tooltip } from "./index.js";
+import { TooltipPosition } from "./tooltip.js";
+import { AnchoredRegion, anchoredRegionTemplate } from '../anchored-region/index.js';
 
 const FASTTooltip = Tooltip.compose({
     baseName: "tooltip",
diff --git a/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts b/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts
index 59358191665..323b0fa116e 100644
--- a/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts
+++ b/packages/web-components/fast-foundation/src/tree-item/tree-item.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "chai";
-import { TreeItem, treeItemTemplate as template } from "./index";
-import { fixture } from "../testing/fixture";
+import { TreeItem, treeItemTemplate as template } from "./index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 
 const FASTTreeItem = TreeItem.compose({
diff --git a/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts b/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts
index 3ea3d3fa597..17e79b39bd2 100644
--- a/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts
+++ b/packages/web-components/fast-foundation/src/tree-view/tree-view.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from "chai";
-import { TreeView, treeViewTemplate as template } from "./index";
-import { TreeItem, treeItemTemplate as itemTemplate } from "../tree-item";
-import { fixture } from "../testing/fixture";
+import { TreeView, treeViewTemplate as template } from "./index.js";
+import { TreeItem, treeItemTemplate as itemTemplate } from "../tree-item/index.js";
+import { fixture } from "../testing/fixture.js";
 import { Updates } from "@microsoft/fast-element";
 
 const FASTTreeView = TreeView.compose({
diff --git a/packages/web-components/fast-foundation/src/utilities/composed-contains.spec.ts b/packages/web-components/fast-foundation/src/utilities/composed-contains.spec.ts
deleted file mode 100644
index 510cde91f6a..00000000000
--- a/packages/web-components/fast-foundation/src/utilities/composed-contains.spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { composedContains } from "./composed-contains";
-import { expect } from "chai";
-import { html, customElement, ref, FASTElement, observable, Updates } from "@microsoft/fast-element";
-
-@customElement({
-    name: "composed-contains-element",
-    template: html<TestElement>`
-        <div ${ref("root")} data-foo="bar"><slot></slot></div>
-    `
-})
-class TestElement extends FASTElement {
-    @observable
-    public root: HTMLElement;
-}
-
-describe("The composedContains function", () => {
-    it("returns true if the test and reference are the same element", () => {
-        // This matches the behavior of Node.contains()
-        const target = document.createElement("div");
-
-        expect(composedContains(target, target)).to.be.true;
-    });
-
-    describe("that are in the same DOM", () => {
-        it("returns true if the test is a child of the reference", () => {
-            const parent = document.createElement("div");
-            const child = document.createElement("div");
-            parent.appendChild(child);
-
-            expect(composedContains(parent, child)).to.be.true;
-        });
-        it("returns false if the test is not a child of the reference", () => {
-            const parent = document.createElement("div");
-            const child = document.createElement("div");
-            parent.appendChild(child);
-
-            expect(composedContains(child, parent)).to.be.false;
-        });
-    });
-
-    describe("that are not in the same DOM", () => {
-        it("should return true if the element being tested is in a shadow DOM of a child element", async () => {
-            const parent = document.createElement("div");
-            const child = document.createElement("composed-contains-element") as TestElement;
-
-            parent.appendChild(child);
-            document.body.appendChild(parent);
-
-            await Updates.next();
-
-            expect(composedContains(parent, child.root)).to.be.true;
-        });
-
-        it("should return false if the element being tested is in a shadow DOM that is not attached to a child", async () => {
-            const parent = document.createElement("div");
-            const child = document.createElement("composed-contains-element") as TestElement;
-
-            document.body.appendChild(parent);
-            document.body.appendChild(child);
-
-            await Updates.next();
-
-            expect(composedContains(parent, child.root)).to.be.false;
-        });
-    });
-});
diff --git a/packages/web-components/fast-foundation/src/utilities/composed-contains.ts b/packages/web-components/fast-foundation/src/utilities/composed-contains.ts
deleted file mode 100644
index d4f8b555e9b..00000000000
--- a/packages/web-components/fast-foundation/src/utilities/composed-contains.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { composedParent } from "./composed-parent.js";
-
-/**
- * Determines if the reference element contains the test element in a "composed" DOM tree that
- * ignores shadow DOM boundaries.
- *
- * Returns true of the test element is a descendent of the reference, or exist in
- * a shadow DOM that is a logical descendent of the reference. Otherwise returns false.
- * @param reference - The element to test for containment against.
- * @param test - The element being tested for containment.
- *
- * @public
- */
-export function composedContains(reference: HTMLElement, test: HTMLElement): boolean {
-    let current: HTMLElement | null = test;
-
-    while (current !== null) {
-        if (current === reference) {
-            return true;
-        }
-
-        current = composedParent(current);
-    }
-
-    return false;
-}
diff --git a/packages/web-components/fast-foundation/src/utilities/composed-parent.spec.ts b/packages/web-components/fast-foundation/src/utilities/composed-parent.spec.ts
deleted file mode 100644
index 7a6de75b1af..00000000000
--- a/packages/web-components/fast-foundation/src/utilities/composed-parent.spec.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { composedParent } from "./composed-parent";
-import { expect } from "chai";
-
-describe("The composedParent function", () => {
-    it("returns the parent of an element, if it has one", () => {
-        const parent = document.createElement("div");
-        const child = document.createElement("div");
-        parent.appendChild(child);
-
-        const found = composedParent(child);
-
-        expect(found).to.equal(parent);
-    });
-});
diff --git a/packages/web-components/fast-foundation/src/utilities/composed-parent.ts b/packages/web-components/fast-foundation/src/utilities/composed-parent.ts
deleted file mode 100644
index b3dad61cb93..00000000000
--- a/packages/web-components/fast-foundation/src/utilities/composed-parent.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
- * When the parent of a node is a shadow-root, it will return the host
- * element of the shadow root. Otherwise it will return the parent node or null if
- * no parent node exists.
- * @param element - The element for which to retrieve the composed parent
- *
- * @public
- */
-export function composedParent<T extends HTMLElement>(element: T): HTMLElement | null {
-    const parentNode = element.parentElement;
-
-    if (parentNode) {
-        return parentNode;
-    } else {
-        const rootNode = element.getRootNode();
-
-        if ((rootNode as ShadowRoot).host instanceof HTMLElement) {
-            // this is shadow-root
-            return (rootNode as ShadowRoot).host as HTMLElement;
-        }
-    }
-
-    return null;
-}
diff --git a/packages/web-components/fast-foundation/src/utilities/index.ts b/packages/web-components/fast-foundation/src/utilities/index.ts
index d9c1c95569c..d948872a661 100644
--- a/packages/web-components/fast-foundation/src/utilities/index.ts
+++ b/packages/web-components/fast-foundation/src/utilities/index.ts
@@ -1,6 +1,4 @@
 export * from "./apply-mixins.js";
-export * from "./composed-parent.js";
-export { composedContains } from "./composed-contains.js";
 export * from "./match-media-stylesheet-behavior.js";
 export * from "./property-stylesheet-behavior.js";
 export * from "./style/index.js";
diff --git a/packages/web-components/fast-foundation/src/utilities/utilities.spec.ts b/packages/web-components/fast-foundation/src/utilities/utilities.spec.ts
index fee05e6ce7a..e88afd4390c 100644
--- a/packages/web-components/fast-foundation/src/utilities/utilities.spec.ts
+++ b/packages/web-components/fast-foundation/src/utilities/utilities.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from "chai";
-import { whitespaceFilter } from "./whitespace-filter";
+import { whitespaceFilter } from "./whitespace-filter.js";
 
 describe("Utilities", () => {
-    describe("The whitespaceFilter", () => { 
+    describe("The whitespaceFilter", () => {
         const spanEl: HTMLSpanElement = document.createElement("span");
         spanEl.innerText = "span";
 
@@ -21,4 +21,4 @@ describe("Utilities", () => {
             expect(whitespaceFilter(textNode,0,[textNode])).to.be.true;
         })
     })
-})
\ No newline at end of file
+})
diff --git a/packages/web-components/fast-foundation/tsconfig.json b/packages/web-components/fast-foundation/tsconfig.json
index 1ccad07c2a5..7e2dc495c69 100644
--- a/packages/web-components/fast-foundation/tsconfig.json
+++ b/packages/web-components/fast-foundation/tsconfig.json
@@ -9,6 +9,7 @@
         "importsNotUsedAsValues": "error",
         "target": "es2015",
         "module": "ESNext",
+        "moduleResolution": "Node16",
         "importHelpers": true,
         "types": ["mocha", "webpack-env"],
         "lib": ["DOM", "ES2015", "ES2016.Array.Include"]
diff --git a/packages/web-components/fast-router/.eslintrc.json b/packages/web-components/fast-router/.eslintrc.json
index 2d4c8ff9ebb..629b11dd891 100644
--- a/packages/web-components/fast-router/.eslintrc.json
+++ b/packages/web-components/fast-router/.eslintrc.json
@@ -12,10 +12,6 @@
                 },
                 "extendDefaults": true
             }
-        ],
-        "import/extensions": [
-            "error",
-            "always"
         ]
     }
 }
diff --git a/packages/web-components/fast-router/karma.conf.cjs b/packages/web-components/fast-router/karma.conf.cjs
index 05ea8bcaa25..4e96dbab80e 100644
--- a/packages/web-components/fast-router/karma.conf.cjs
+++ b/packages/web-components/fast-router/karma.conf.cjs
@@ -1,5 +1,4 @@
 const path = require("path");
-
 const basePath = path.resolve(__dirname);
 
 const commonChromeFlags = [
@@ -44,9 +43,9 @@ module.exports = function (config) {
             require("karma-chrome-launcher"),
             require("karma-firefox-launcher"),
         ],
-        files: [`dist/esm/__test__/${setup}.js`],
+        files: [`dist/esm/__test__/${setup}.cjs`],
         preprocessors: {
-            [`dist/esm/__test__/${setup}.js`]: ["webpack", "sourcemap"],
+            [`dist/esm/__test__/${setup}.cjs`]: ["webpack", "sourcemap"],
         },
         webpackMiddleware: {
             // webpack-dev-middleware configuration
@@ -54,7 +53,7 @@ module.exports = function (config) {
             stats: "errors-only",
         },
         webpack: {
-            mode: "none",
+            mode: "development",
             resolve: {
                 extensions: [".js"],
                 modules: ["dist", "node_modules"],
@@ -65,12 +64,8 @@ module.exports = function (config) {
                 hints: false,
             },
             optimization: {
-                namedModules: false,
-                namedChunks: false,
-                nodeEnv: false,
                 usedExports: true,
                 flagIncludedChunks: false,
-                occurrenceOrder: false,
                 sideEffects: true,
                 concatenateModules: true,
                 splitChunks: {
@@ -89,14 +84,8 @@ module.exports = function (config) {
                     },
                     {
                         test: /\.js$/,
-                        use: [
-                            {
-                                loader: "source-map-loader",
-                                options: {
-                                    enforce: "pre",
-                                },
-                            },
-                        ],
+                        use: ["source-map-loader"],
+                        enforce: "pre",
                     },
                 ],
             },
@@ -125,7 +114,7 @@ module.exports = function (config) {
                 timeout: 5000,
             },
         },
-        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
+        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests,
     };
 
     if (config.coverage) {
diff --git a/packages/web-components/fast-router/package.json b/packages/web-components/fast-router/package.json
index eec93d08c4f..036cfa79811 100644
--- a/packages/web-components/fast-router/package.json
+++ b/packages/web-components/fast-router/package.json
@@ -67,7 +67,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-source-map-support": "^1.4.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "source-map": "^0.7.3",
@@ -76,7 +76,8 @@
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
     "typescript": "^4.7.0",
-    "webpack": "^4.44.0"
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2"
   },
   "dependencies": {
     "@microsoft/fast-element": "^1.10.2"
diff --git a/packages/web-components/fast-router/src/__test__/setup-browser.ts b/packages/web-components/fast-router/src/__test__/setup-browser.cts
similarity index 100%
rename from packages/web-components/fast-router/src/__test__/setup-browser.ts
rename to packages/web-components/fast-router/src/__test__/setup-browser.cts
diff --git a/packages/web-components/fast-router/src/recognizer.spec.ts b/packages/web-components/fast-router/src/recognizer.spec.ts
index 7f148ee112c..0dfd752aa4f 100644
--- a/packages/web-components/fast-router/src/recognizer.spec.ts
+++ b/packages/web-components/fast-router/src/recognizer.spec.ts
@@ -3,7 +3,7 @@ import {
     DefaultRouteRecognizer,
     Endpoint,
     RecognizedRoute,
-} from "./recognizer";
+} from "./recognizer.js";
 import { expect } from "chai";
 
 describe(DefaultRouteRecognizer.name, function () {
diff --git a/packages/web-components/fast-router/src/router.ts b/packages/web-components/fast-router/src/router.ts
index f524f608cf5..3a76730de87 100644
--- a/packages/web-components/fast-router/src/router.ts
+++ b/packages/web-components/fast-router/src/router.ts
@@ -1,4 +1,5 @@
 import { FASTElement } from "@microsoft/fast-element";
+import { composedParent } from "@microsoft/fast-element/utilities";
 import { RenderCommand } from "./commands.js";
 import { RouterConfiguration } from "./configuration.js";
 import { NavigationContributor } from "./contributors.js";
@@ -41,25 +42,6 @@ export interface Router<TSettings = any> {
 
 const routerProperty = "$router";
 
-// TODO: remove this from here and from fast-foundation
-// TODO: move this to fast-element so router and foundation can both use it
-function composedParent<T extends HTMLElement>(element: T): HTMLElement | null {
-    const parentNode = element.parentElement;
-
-    if (parentNode) {
-        return parentNode;
-    } else {
-        const rootNode = element.getRootNode();
-
-        if ((rootNode as ShadowRoot).host instanceof HTMLElement) {
-            // this is shadow-root
-            return (rootNode as ShadowRoot).host as HTMLElement;
-        }
-    }
-
-    return null;
-}
-
 function findParentRouterForElement(element: HTMLElement) {
     let parent: HTMLElement | null = element;
 
diff --git a/packages/web-components/fast-router/tsconfig.json b/packages/web-components/fast-router/tsconfig.json
index f74b2ab8e8d..2f087eea6ac 100644
--- a/packages/web-components/fast-router/tsconfig.json
+++ b/packages/web-components/fast-router/tsconfig.json
@@ -9,6 +9,7 @@
         "target": "es2015",
         "module": "ESNext",
         "importHelpers": true,
+        "moduleResolution": "Node16",
         "types": [
             "mocha",
             "webpack-env"
diff --git a/sites/fast-website/babel.config.js b/sites/fast-website/babel.config.js
deleted file mode 100644
index c1f111acded..00000000000
--- a/sites/fast-website/babel.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-module.exports = {
-    presets: [
-        [
-            "@babel/preset-env",
-            {
-                targets: "defaults",
-            },
-        ],
-    ],
-};
diff --git a/sites/fast-website/package.json b/sites/fast-website/package.json
index 03d08d8bfcc..5a61686591e 100644
--- a/sites/fast-website/package.json
+++ b/sites/fast-website/package.json
@@ -7,8 +7,6 @@
   "private": true,
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/preset-env": "^7.12.13",
     "@fluentui/svg-icons": "^1.1.139",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.10.2",
@@ -16,7 +14,6 @@
     "@microsoft/fast-web-utilities": "^5.4.1",
     "@microsoft/site-utilities": "^0.9.0",
     "@rollup/plugin-alias": "^3.1.1",
-    "babel-loader": "^8.2.5",
     "clean-webpack-plugin": "^4.0.0",
     "ejs-loader": "^0.5.0",
     "html-webpack-plugin": "^5.5.0",
diff --git a/sites/fast-website/webpack.common.js b/sites/fast-website/webpack.common.js
index 9fcbeb078ce..027cf58c802 100644
--- a/sites/fast-website/webpack.common.js
+++ b/sites/fast-website/webpack.common.js
@@ -34,16 +34,15 @@ module.exports = {
                     },
                 ],
             },
-            {
-                test: /\.js$/,
-                use: "babel-loader",
-            },
             {
                 test: /\.css$/,
                 exclude: /node_modules/,
                 use: [
                     {
                         loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            esModule: false,
+                        },
                     },
                     {
                         loader: "css-loader",
@@ -52,14 +51,7 @@ module.exports = {
             },
             {
                 test: /\.svg$/,
-                use: [
-                    {
-                        loader: "svg-inline-loader",
-                        options: {
-                            removeSVGTagAttrs: false,
-                        },
-                    },
-                ],
+                type: "asset/resource",
             },
             {
                 test: /\.ejs$/,
diff --git a/sites/site-utilities/.eslintrc.js b/sites/site-utilities/.eslintrc.js
deleted file mode 100644
index 32ef5714772..00000000000
--- a/sites/site-utilities/.eslintrc.js
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-    extends: [
-        "@microsoft/eslint-config-fast-dna",
-        "plugin:react/recommended",
-        "prettier",
-    ],
-    rules: {
-        "@typescript-eslint/no-unused-vars": "off",
-        "react/display-name": "off",
-        "@typescript-eslint/ban-types": [
-            "error",
-            {
-                types: {
-                    "{}": false,
-                },
-                extendDefaults: true,
-            },
-        ],
-    },
-};
diff --git a/sites/site-utilities/.prettierignore b/sites/site-utilities/.prettierignore
deleted file mode 100644
index 56e2a7fa581..00000000000
--- a/sites/site-utilities/.prettierignore
+++ /dev/null
@@ -1,2 +0,0 @@
-coverage/*
-dist/*
\ No newline at end of file
diff --git a/sites/site-utilities/babel.config.js b/sites/site-utilities/babel.config.js
deleted file mode 100644
index 34f7e974fb3..00000000000
--- a/sites/site-utilities/babel.config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-module.exports = {
-    presets: [
-        [
-            "@babel/preset-env",
-            {
-                targets: {
-                    node: "current",
-                },
-                modules: false,
-            },
-        ],
-        "@babel/react",
-    ],
-    plugins: ["@babel/plugin-syntax-dynamic-import"],
-};
diff --git a/sites/site-utilities/build/badges.js b/sites/site-utilities/build/badges.js
index 3d8fe545d01..4cc3dca6c67 100644
--- a/sites/site-utilities/build/badges.js
+++ b/sites/site-utilities/build/badges.js
@@ -54,11 +54,7 @@ const formats = {
     },
 };
 
-[
-    "@microsoft/fast-element",
-    "@microsoft/fast-components",
-    "@microsoft/fast-foundation",
-].map(p => {
+["@microsoft/fast-element", "@microsoft/fast-foundation"].map(p => {
     try {
         const dir = getPackageJsonDir(p);
 
diff --git a/sites/site-utilities/build/src/generate-component-schemas.js b/sites/site-utilities/build/src/generate-component-schemas.js
deleted file mode 100644
index ad1fff76244..00000000000
--- a/sites/site-utilities/build/src/generate-component-schemas.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import fs from "fs";
-import path from "path";
-import * as fastComponentDefinitions from "@microsoft/fast-components/dist/esm/component-definitions";
-/**
- * Node is erroring when importing from the root, therefore we are importing directly from the data-utilities folder
- */
-import { mapWebComponentDefinitionToJSONSchema } from "@microsoft/fast-tooling/dist/esm/data-utilities";
-
-const assetsOutFilePath = path.resolve(__dirname, "../../statics/assets/");
-const componentsOutFilePath = path.resolve(assetsOutFilePath, "components");
-const componentList = [];
-
-if (!fs.existsSync(componentsOutFilePath)) {
-    fs.mkdirSync(componentsOutFilePath);
-}
-
-function writeFile(outFilePath, data) {
-    fs.writeFile(outFilePath, data, {}, error => {
-        if (error) {
-            throw Error(error);
-        }
-    });
-}
-
-/**
- * Convert definitions to JSON schemas for use in sites
- */
-Object.entries(fastComponentDefinitions).forEach(([, definition]) => {
-    mapWebComponentDefinitionToJSONSchema(definition).forEach(definitionTagItem => {
-        const filename = `${definitionTagItem.mapsToTagName}.schema.json`;
-        const outFilePath = path.resolve(componentsOutFilePath, filename);
-        componentList.push({
-            $id: definitionTagItem.$id,
-            schema_url: `https://static.fast.design/assets/components/${filename}`,
-        });
-
-        fs.readFile(outFilePath, {}, (err, data) => {
-            if (
-                (err && err.code === "ENOENT") ||
-                data !== JSON.stringify(definitionTagItem, null, 2)
-            ) {
-                writeFile(outFilePath, JSON.stringify(definitionTagItem, null, 2));
-            }
-        });
-    });
-});
-
-/**
- * Write the list of available components to list.json
- * which should have the following format:
- * [
- *     {
- *         $id: "my-component-id",
- *         schema_url: "https://static.fast.design/assets/components/my-component.schema.json"
- *     }
- * ]
- */
-writeFile(
-    path.resolve(componentsOutFilePath, "list.json"),
-    JSON.stringify(componentList)
-);
diff --git a/sites/site-utilities/package.json b/sites/site-utilities/package.json
index fad3bffbbe4..64b151b7b11 100644
--- a/sites/site-utilities/package.json
+++ b/sites/site-utilities/package.json
@@ -5,18 +5,10 @@
   "sideEffects": false,
   "private": true,
   "scripts": {
-    "build": "tsc -p ./tsconfig.json",
-    "clean:dist": "node ../../build/clean.js dist",
-    "generate:schemas": "yarn rollup build/src/generate-component-schemas.js --format cjs --file build/artifacts/generate-component-schemas-built.js -p @rollup/plugin-node-resolve,@rollup/plugin-json && node build/artifacts/generate-component-schemas-built.js",
     "generate:badges": "node ./build/badges.js",
     "generate:icons": "node ./build/icons.js",
-    "generate:all": "yarn generate:badges && yarn generate:icons && generate:schemas",
-    "prepare": "yarn clean:dist && yarn generate:badges && yarn generate:schemas && yarn build",
-    "prettier": "prettier --config ../../.prettierrc --write \"**/*.{ts,tsx}\"",
-    "prettier:diff": "prettier --config ../../.prettierrc \"**/*.{ts,tsx}\" --list-different",
-    "test": "yarn eslint && yarn build",
-    "eslint": "eslint . --ext .ts,.tsx",
-    "eslint:fix": "eslint . --ext .ts,.tsx --fix"
+    "generate:all": "yarn generate:badges && yarn generate:icons",
+    "prepare": "yarn generate:badges"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,44 +19,19 @@
   "author": "Microsoft",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.12.13",
-    "@babel/preset-react": "^7.12.13",
     "@microsoft/eslint-config-fast-dna": "^2.1.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@types/node": "^15.0.1",
-    "@types/react": "^16.8.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
     "badge-maker": "^3.2.0",
     "chalk": "^4.1.0",
     "csstype": "^2.5.8",
     "eslint-config-prettier": "6.10.1",
-    "eslint-plugin-react": "^7.19.0",
     "favicons": "^6.2.2",
     "fs-extra": "^9.0.1",
-    "jest": "^25.4.0",
-    "jss": "^9.8.7",
-    "jss-preset-default": "^4.5.0",
-    "lodash-es": "4.17.15",
-    "prettier": "^1.15.3",
-    "raf-throttle": "^2.0.3",
-    "react": "^16.8.0",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^25.4.0",
-    "typescript": "^4.7.0",
-    "vscode-web-custom-data": "^0.3.1"
+    "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@fluentui/web-components": "^1.2.3",
-    "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-foundation": "^2.46.9",
-    "@microsoft/fast-tooling": "^0.37.9",
-    "@microsoft/fast-tooling-react": "^2.11.4",
-    "@skatejs/val": "^0.5.0",
-    "monaco-editor": "^0.21.2",
-    "vscode-html-languageservice": "^3.1.3"
   }
 }
diff --git a/sites/site-utilities/src/components/accent-color-picker/accent-color-picker.props.ts b/sites/site-utilities/src/components/accent-color-picker/accent-color-picker.props.ts
deleted file mode 100644
index 2aa4bd7825f..00000000000
--- a/sites/site-utilities/src/components/accent-color-picker/accent-color-picker.props.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface AccentColorPickerProps {
-    id: string;
-    accentBaseColor: string;
-    onAccentColorPickerChange: any;
-    disabled: boolean;
-}
diff --git a/sites/site-utilities/src/components/accent-color-picker/index.tsx b/sites/site-utilities/src/components/accent-color-picker/index.tsx
deleted file mode 100644
index ea111d24e7d..00000000000
--- a/sites/site-utilities/src/components/accent-color-picker/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import { labelStyle } from "../style";
-import { AccentColorPickerProps } from "./accent-color-picker.props";
-
-export const AccentColorPicker: React.FC<AccentColorPickerProps> = ({
-    accentBaseColor,
-    onAccentColorPickerChange,
-    id,
-    disabled,
-}: React.PropsWithChildren<AccentColorPickerProps>): React.ReactElement => {
-    return (
-        <div style={{ display: "flex", alignItems: "center" }}>
-            <label htmlFor={id} style={labelStyle}>
-                Accent color
-            </label>
-            <input
-                type={"color"}
-                id={id}
-                value={accentBaseColor}
-                onChange={onAccentColorPickerChange}
-                style={{
-                    padding: "0",
-                    background: "#454545",
-                    width: "22px",
-                    height: "22px",
-                    border: "none",
-                }}
-                disabled={disabled}
-            />
-        </div>
-    );
-};
-
-export * from "./accent-color-picker.props";
diff --git a/sites/site-utilities/src/components/categories.ts b/sites/site-utilities/src/components/categories.ts
deleted file mode 100644
index a2c5a2eb65d..00000000000
--- a/sites/site-utilities/src/components/categories.ts
+++ /dev/null
@@ -1,322 +0,0 @@
-import { FormCategoryDictionary } from "@microsoft/fast-tooling-react/dist/form/form.props";
-import fastAccordionItemDefinition from "@microsoft/fast-components/dist/esm/accordion-item/accordion-item.vscode.definition.js";
-import fastAnchorDefinition from "@microsoft/fast-components/dist/esm/anchor/anchor.vscode.definition.js";
-import fastAnchoredRegionDefinition from "@microsoft/fast-components/dist/esm/anchored-region/anchored-region.vscode.definition.js";
-import fastButtonDefinition from "@microsoft/fast-components/dist/esm/button/button.vscode.definition.js";
-import fastCheckboxDefinition from "@microsoft/fast-components/dist/esm/checkbox/checkbox.vscode.definition.js";
-import fastDataGridDefinition from "@microsoft/fast-components/dist/esm/data-grid/data-grid.vscode.definition.js";
-import fastDataGridCellDefinition from "@microsoft/fast-components/dist/esm/data-grid/data-grid-cell.vscode.definition.js";
-import fastDataGridRowDefinition from "@microsoft/fast-components/dist/esm/data-grid/data-grid-row.vscode.definition.js";
-import fastDialogDefinition from "@microsoft/fast-components/dist/esm/dialog/dialog.vscode.definition.js";
-import fastFlipperDefinition from "@microsoft/fast-components/dist/esm/flipper/flipper.vscode.definition.js";
-import fastListboxDefinition from "@microsoft/fast-components/dist/esm/listbox/listbox.vscode.definition.js";
-import fastListboxOptionDefinition from "@microsoft/fast-components/dist/esm/listbox-option/listbox-option.vscode.definition.js";
-import fastNumberFieldDefinition from "@microsoft/fast-components/dist/esm/number-field/number-field.vscode.definition.js";
-import fastRadioDefinition from "@microsoft/fast-components/dist/esm/radio/radio.vscode.definition.js";
-import fastRadioGroupDefinition from "@microsoft/fast-components/dist/esm/radio-group/radio-group.vscode.definition.js";
-import fastSelectDefinition from "@microsoft/fast-components/dist/esm/select/select.vscode.definition.js";
-import fastSkeletonDefinition from "@microsoft/fast-components/dist/esm/skeleton/skeleton.vscode.definition.js";
-import fastSliderDefinition from "@microsoft/fast-components/dist/esm/slider/slider.vscode.definition.js";
-import fastSwitchDefinition from "@microsoft/fast-components/dist/esm/switch/switch.vscode.definition.js";
-import fastTabsDefinition from "@microsoft/fast-components/dist/esm/tabs/tabs.vscode.definition.js";
-import fastTextAreaDefinition from "@microsoft/fast-components/dist/esm/text-area/text-area.vscode.definition.js";
-import fastTextFieldDefinition from "@microsoft/fast-components/dist/esm/text-field/text-field.vscode.definition.js";
-import fastTooltipDefinition from "@microsoft/fast-components/dist/esm/tooltip/tooltip.vscode.definition.js";
-
-export const componentCategories: FormCategoryDictionary = {
-    [fastAccordionItemDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["heading-level", "id"],
-            },
-        ],
-    },
-    [fastAnchorDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: [
-                    "download",
-                    "hreflang",
-                    "ping",
-                    "referrerpolicy",
-                    "rel",
-                    "target",
-                    "type",
-                ],
-            },
-        ],
-    },
-    fastDesignTokens: {
-        "": [
-            {
-                title: "Color",
-                dataLocations: [
-                    "base-layer-luminance",
-                    "fill-color",
-                    "accent-base-color",
-                ],
-            },
-            {
-                title: "Style",
-                dataLocations: [
-                    "control-corner-radius",
-                    "stroke-width",
-                    "focus-stroke-width",
-                    "disabled-opacity",
-                ],
-            },
-            {
-                title: "Advanced",
-                expandByDefault: false,
-                dataLocations: [
-                    "theme",
-                    "design-unit",
-                    "direction",
-                    "type-ramp-minus-2-font-size",
-                    "type-ramp-minus-2-line-height",
-                    "type-ramp-minus-1-font-size",
-                    "type-ramp-minus-1-line-height",
-                    "type-ramp-base-font-size",
-                    "type-ramp-base-line-height",
-                    "type-ramp-plus-1-font-size",
-                    "type-ramp-plus-1-line-height",
-                    "type-ramp-plus-2-font-size",
-                    "type-ramp-plus-2-line-height",
-                    "type-ramp-plus-3-font-size",
-                    "type-ramp-plus-3-line-height",
-                    "type-ramp-plus-4-font-size",
-                    "type-ramp-plus-4-line-height",
-                    "type-ramp-plus-5-font-size",
-                    "type-ramp-plus-5-line-height",
-                    "type-ramp-plus-6-font-size",
-                    "type-ramp-plus-6-line-height",
-                    "accent-fill-rest-delta",
-                    "accent-fill-hover-delta",
-                    "accent-fill-active-delta",
-                    "accent-fill-focus-delta",
-                    "accent-fill-selected-delta",
-                    "accent-foreground-rest-delta",
-                    "accent-foreground-hover-delta",
-                    "accent-foreground-active-delta",
-                    "accent-foreground-focus-delta",
-                    "neutral-fill-rest-delta",
-                    "neutral-fill-hover-delta",
-                    "neutral-fill-active-delta",
-                    "neutral-fill-focus-delta",
-                    "neutral-fill-selected-delta",
-                    "neutral-fill-input-rest-delta",
-                    "neutral-fill-input-hover-delta",
-                    "neutral-fill-input-active-delta",
-                    "neutral-fill-input-focus-delta",
-                    "neutral-fill-input-selected-delta",
-                    "neutral-fill-stealth-rest-delta",
-                    "neutral-fill-stealth-hover-delta",
-                    "neutral-fill-stealth-active-delta",
-                    "neutral-fill-stealth-focus-delta",
-                    "neutral-fill-stealth-selected-delta",
-                    "neutral-fill-toggle-hover-delta",
-                    "neutral-fill-toggle-active-delta",
-                    "neutral-fill-toggle-focus-delta",
-                    "neutral-fill-card-delta",
-                    "neutral-foreground-hover-delta",
-                    "neutral-foreground-active-delta",
-                    "neutral-foreground-focus-delta",
-                    "neutral-divider-rest-delta",
-                    "neutral-outline-rest-delta",
-                    "neutral-outline-hover-delta",
-                    "neutral-outline-active-delta",
-                    "neutral-outline-focus-delta",
-                    "neutral-contrast-fill-rest-delta",
-                    "neutral-contrast-fill-hover-delta",
-                    "neutral-contrast-fill-active-delta",
-                    "neutral-contrast-fill-focus-delta",
-                    "Slot",
-                ],
-            },
-        ],
-    },
-    [fastAnchoredRegionDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: [
-                    "viewport",
-                    "horizontal-threshold",
-                    "horizontal-scaling",
-                    "vertical-threshold",
-                    "vertical-scaling",
-                    "fixed-placement",
-                ],
-            },
-        ],
-    },
-    [fastButtonDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: [
-                    "autofocus",
-                    "name",
-                    "type",
-                    "value",
-                    "form",
-                    "formaction",
-                    "formenctype",
-                    "formmethod",
-                    "formnovalidate",
-                    "formtarget",
-                ],
-            },
-        ],
-    },
-    [fastCheckboxDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["name"],
-            },
-        ],
-    },
-    [fastDataGridCellDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["cell-type", "grid-column"],
-            },
-        ],
-    },
-    [fastDataGridRowDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["row-type", "grid-template-columns"],
-            },
-        ],
-    },
-    [fastDialogDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: [
-                    "aria-label",
-                    "aria-describedby",
-                    "aria-labelledby",
-                    "hidden",
-                    "trap-focus",
-                ],
-            },
-        ],
-    },
-    [fastFlipperDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["aria-hidden"],
-            },
-        ],
-    },
-    [fastListboxDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["role"],
-            },
-        ],
-    },
-    [fastNumberFieldDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["autofocus", "value", "list"],
-            },
-        ],
-    },
-    [fastRadioDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["name"],
-            },
-        ],
-    },
-    [fastRadioGroupDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["name", "value"],
-            },
-        ],
-    },
-    [fastSelectDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["name"],
-            },
-        ],
-    },
-    [fastSliderDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["name", "value"],
-            },
-        ],
-    },
-    [fastSwitchDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["name"],
-            },
-        ],
-    },
-    [fastTabsDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["activeid"],
-            },
-        ],
-    },
-    [fastTextAreaDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: [
-                    "autofocus",
-                    "form",
-                    "list",
-                    "spellcheck",
-                    "name",
-                    "value",
-                ],
-            },
-        ],
-    },
-    [fastTextFieldDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: [
-                    "value",
-                    "autofocus",
-                    "list",
-                    "pattern",
-                    "spellcheck",
-                    "name",
-                ],
-            },
-        ],
-    },
-    [fastTooltipDefinition.tags[0].name]: {
-        "": [
-            {
-                title: "Advanced",
-                dataLocations: ["anchor"],
-            },
-        ],
-    },
-};
diff --git a/sites/site-utilities/src/components/dimension/dimension.props.ts b/sites/site-utilities/src/components/dimension/dimension.props.ts
deleted file mode 100644
index 535550c8e14..00000000000
--- a/sites/site-utilities/src/components/dimension/dimension.props.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface DimensionProps {
-    width: number;
-    height: number;
-    onDimensionChange: any;
-    onUpdateWidth: any;
-    onUpdateHeight: any;
-    onUpdateOrientation: any;
-    disabled: boolean;
-}
diff --git a/sites/site-utilities/src/components/dimension/index.tsx b/sites/site-utilities/src/components/dimension/index.tsx
deleted file mode 100644
index 52b40e87b1e..00000000000
--- a/sites/site-utilities/src/components/dimension/index.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/** @jsx h */ /* Note: Set the JSX pragma to the wrapped version of createElement */
-
-import React from "react";
-import { fastButton, fastNumberField } from "@microsoft/fast-components";
-import { RotateGlyph } from "../../icons/rotate";
-import h from "../../web-components/pragma";
-import { DimensionProps } from "./dimension.props";
-
-fastButton;
-fastNumberField;
-
-export const Dimension: React.FC<DimensionProps> = ({
-    width,
-    height,
-    onDimensionChange,
-    onUpdateWidth,
-    onUpdateHeight,
-    onUpdateOrientation,
-    disabled,
-}: React.PropsWithChildren<DimensionProps>): React.ReactElement => {
-    return (
-        <div style={{ display: "flex", alignItems: "center", marginLeft: 10 }}>
-            <fast-number-field
-                value={width}
-                size={6}
-                events={{
-                    input: onDimensionChange(onUpdateWidth),
-                }}
-                disabled={disabled ? "true" : undefined}
-                hide-step={true}
-            />
-            <svg
-                width="14"
-                height="14"
-                viewBox="0 0 14 14"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden={true}
-                style={{ marginRight: 4, marginLeft: 4 }}
-            >
-                <path
-                    d="M3.5 3.49997L10.5 10.5"
-                    stroke="#F2F2F2"
-                    strokeWidth="2"
-                    strokeMiterlimit="10"
-                />
-                <path
-                    d="M3.5 10.5L10.5 3.49997"
-                    stroke="#F2F2F2"
-                    strokeWidth="2"
-                    strokeMiterlimit="10"
-                />
-            </svg>
-            <fast-number-field
-                value={height}
-                size={6}
-                events={{
-                    input: onDimensionChange(onUpdateHeight),
-                }}
-                style={{
-                    marginRight: 8,
-                }}
-                disabled={disabled ? "true" : undefined}
-                hide-step={true}
-            />
-            <fast-button
-                aria-label={"Rotate axis"}
-                events={{
-                    click: onUpdateOrientation,
-                }}
-                disabled={disabled ? "true" : undefined}
-            >
-                {RotateGlyph()}
-            </fast-button>
-        </div>
-    );
-};
-
-export * from "./dimension.props";
diff --git a/sites/site-utilities/src/components/direction-switch/direction-switch.props.ts b/sites/site-utilities/src/components/direction-switch/direction-switch.props.ts
deleted file mode 100644
index 7c3c5abf7d8..00000000000
--- a/sites/site-utilities/src/components/direction-switch/direction-switch.props.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Direction } from "@microsoft/fast-jss-utilities";
-
-export interface DirectionSwitchProps {
-    className?: string;
-    id: string;
-    direction: Direction;
-    onUpdateDirection: any;
-    disabled: boolean;
-}
diff --git a/sites/site-utilities/src/components/direction-switch/index.tsx b/sites/site-utilities/src/components/direction-switch/index.tsx
deleted file mode 100644
index e948798b272..00000000000
--- a/sites/site-utilities/src/components/direction-switch/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import { Direction } from "@microsoft/fast-web-utilities";
-import { accentColor, toggleStyle } from "../style";
-import { DirectionSwitchProps } from "./direction-switch.props";
-
-export const DirectionSwitch: React.FC<DirectionSwitchProps> = ({
-    className,
-    id,
-    direction,
-    onUpdateDirection,
-    disabled,
-}: React.PropsWithChildren<DirectionSwitchProps>): React.ReactElement => {
-    return (
-        <button
-            className={className}
-            onClick={onUpdateDirection}
-            title={"Toggle direction"}
-            style={toggleStyle}
-            disabled={disabled}
-        >
-            <svg
-                width="14"
-                height="10"
-                viewBox="0 0 14 10"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    d="M13.1667 8.99967C13.4428 8.99967 13.6667 9.22354 13.6667 9.49967C13.6667 9.77581 13.4428 9.99967 13.1667 9.99967H6.16667C5.89053 9.99967 5.66667 9.77581 5.66667 9.49967C5.66667 9.22354 5.89053 8.99967 6.16667 8.99967H13.1667ZM13.1667 4.66634C13.4428 4.66634 13.6667 4.89021 13.6667 5.16634C13.6667 5.41946 13.4786 5.62867 13.2345 5.66178L13.1667 5.66634H0.833332C0.557192 5.66634 0.333332 5.44247 0.333332 5.16634C0.333332 4.91322 0.521437 4.70402 0.765485 4.67091L0.833332 4.66634H13.1667ZM13.1667 0.333008C13.4428 0.333008 13.6667 0.556868 13.6667 0.833008C13.6667 1.10915 13.4428 1.33301 13.1667 1.33301H2.83333C2.55719 1.33301 2.33333 1.10915 2.33333 0.833008C2.33333 0.556868 2.55719 0.333008 2.83333 0.333008H13.1667Z"
-                    fill={`${direction === Direction.rtl ? accentColor : "white"}`}
-                />
-            </svg>
-        </button>
-    );
-};
-
-export * from "./direction-switch.props";
diff --git a/sites/site-utilities/src/components/editor/editor.props.ts b/sites/site-utilities/src/components/editor/editor.props.ts
deleted file mode 100644
index cd8821ac350..00000000000
--- a/sites/site-utilities/src/components/editor/editor.props.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DataDictionary, SchemaDictionary } from "@microsoft/fast-tooling";
-import { StandardLuminance } from "@microsoft/fast-components";
-import { Direction } from "@microsoft/fast-web-utilities";
-
-/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
-export interface EditorState {
-    schemaDictionary: SchemaDictionary;
-    dataDictionary: DataDictionary<unknown>;
-    viewerWidth: number;
-    viewerHeight: number;
-    mobileNavigationVisible: boolean;
-    mobileFormVisible: boolean;
-    theme: StandardLuminance;
-    direction: Direction;
-    transparentBackground: boolean;
-    previewReady: boolean;
-
-    /**
-     * The last value that was changed from the data dictionary to
-     * a value used by monaco editor.
-     *
-     * This can be used to determine where a change comes from since
-     * any update to the monaco editors value is treated the same (making a change
-     * from within the editor vs setting the value externally)
-     */
-    lastMappedDataDictionaryToMonacoEditorHTMLValue: string;
-}
diff --git a/sites/site-utilities/src/components/editor/editor.style.css b/sites/site-utilities/src/components/editor/editor.style.css
deleted file mode 100644
index 7943d6b0f0b..00000000000
--- a/sites/site-utilities/src/components/editor/editor.style.css
+++ /dev/null
@@ -1,278 +0,0 @@
-html {
-    --container-background: #3B3B3B;
-    --mobile-menu-bar-height: 100px;
-    --desktop-footer-height: 178px;
-    --mobile-footer-height: 283px;
-    --mobile-pane-width: 300;
-    --footer-background-color: #181818;
-    --fast-tooling-l1-color: #3B3B3B;
-    --fast-tooling-l3-color: #2B2B2B;
-    --fast-tooling-l4-color: #1B1B1B;
-    --menu-bar-background: #333333;
-    --container-background-hover: #434343;
-}
-
-@font-face {
-    font-family: SegoeUIVF;
-    src: url("https://static.fast.design/assets/fonts/SegoeUI-Roman-VF_web.ttf") format('truetype');
-    font-weight: 1 1000;
-}
-
-@font-face {
-    font-family: Segoe UI;
-    src: url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Normal/latest.woff2") format('woff2');
-}
-
-body, html {
-    font-family: SegoeUIVF, Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
-    font-size: 12px;
-    padding: 0;
-    margin: 0;
-    overflow-x: hidden;
-}
-
-html::-webkit-scrollbar {
-    background: var(--fast-tooling-l1-color);
-    width: 8px;
-    height: 8px;
-}
-
-html::-webkit-scrollbar-thumb {
-    background: var(--fast-tooling-l3-color);
-    border-radius: 8px;
-}
-
-#root {
-    width: 100%;
-}
-
-.pane {
-    grid-row-start: 1;
-    grid-row-end: 1;
-    max-height: 100vh;
-    overflow: auto;
-    background: var(--fast-tooling-l4-color, #1B1B1B);
-    overflow-x: hidden;
-}
-
-.pane::-webkit-scrollbar {
-    background: var(--fast-tooling-l1-color);
-    width: 8px;
-    height: 8px;
-}
-
-.pane::-webkit-scrollbar-thumb {
-    background: var(--fast-tooling-l3-color);
-    border-radius: 8px;
-}
-
-.pane__start {
-    grid-column-start: 1;
-}
-
-.pane__end {
-    grid-column-start: 3;
-}
-
-.navigation {
-    height: auto !important;
-}
-
-.container {
-    display: grid;
-    background: var(--container-background);
-    grid-template-columns: 300px auto 300px;
-    grid-template-rows: auto var(--desktop-footer-height);
-    height: calc(100vh + var(--desktop-footer-height));
-}
-
-.canvas {
-    grid-column-start: 2;
-    grid-column-end: 2;
-    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: 40px auto;
-    max-height: 100vh;
-}
-
-.canvas-overlay {
-    display: none;
-}
-
-.canvas-content {
-    display: grid;
-    grid-template-rows: calc(50vh - 20px) calc(50vh - 20px);
-}
-
-.canvas-content.canvas-content__dev-tools-hidden, .canvas-content.canvas-content__preview {
-    grid-template-rows: auto 72px;
-}
-
-.canvas-content .tab-panel_region {
-    padding: 0px 12px;
-}
-
-.menu-bar {
-    grid-row-start: 1;
-    z-index: 1;
-}
-
-.canvas-menu-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 14px;
-}
-
-.menu-item-region {
-    display: flex;
-}
-
-.preview {
-    grid-row-start: 1;
-    position: relative;
-}
-
-.dev-tools {
-    position: relative;
-    grid-row-start: 2;
-    overflow: hidden;
-}
-
-.dev-tools.preview
-{
-    display: none;
-}
-
-.dev-tools-trigger {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: var(--container-background);
-    fill: #fff;
-    height: 20px;
-    border: 2px solid transparent;
-    border-radius: 0 0 2px 2px;
-    cursor: pointer;
-    line-height: 1;
-}
-
-.dev-tools-trigger:hover {
-    background-color: var(--container-background-hover);
-}
-
-.dev-tools-trigger svg {
-    display: inline-block;
-    position: relative;
-    width: 14px;
-    height: 14px;
-}
-
-.preview .dev-tools-trigger
-{
-    display: none;
-}
-
-.mobile-menu-bar {
-    display: none;
-}
-
-.footer-region {
-    grid-row-start: 2;
-    grid-column-start: 1;
-    grid-column-end: 4;
-}
-
-@media screen and (max-width: 1279px) {
-    .container {
-        grid-template-columns: calc(var(--mobile-pane-width) * 1px) auto calc(var(--mobile-pane-width) * 1px);
-        grid-template-rows: auto var(--mobile-footer-height);
-        margin: 0 calc(var(--mobile-pane-width) * -1px);
-        width: calc((var(--mobile-pane-width) * 2 * 1px) + 100vw);
-        transition: margin-left 0.2s ease-in;
-        height: calc(100vh + var(--mobile-footer-height));
-    }
-
-    .container.container__form-visible {
-        margin-left: calc(var(--mobile-pane-width) * 2 * -1px);
-    }
-
-    .container.container__navigation-visible {
-        margin-left: 0;
-    }
-
-    .canvas {
-        width: 100vw;
-        position: relative;
-    }
-
-    .canvas-menu-bar {
-        background: #2F2F2F !important;
-    }
-
-    .canvas-overlay {
-        opacity: 0;
-        display: block;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        background: #0B0B0B;
-        transition: opacity 0.2s ease-in;
-    }
-
-    .canvas-overlay.canvas-overlay__active {
-        opacity: 0.85;
-        z-index: 2;
-    }
-
-    .canvas-content {
-        height: calc(100vh - var(--mobile-menu-bar-height));
-        margin-top: var(--mobile-menu-bar-height);
-        overflow: hidden;
-        grid-template-rows: calc(50%) calc(50%);
-    }
-
-    .canvas-content .tab-panel_region {
-        height: calc(50vh - 130px);
-    }
-
-    .pane {
-        width: calc(var(--mobile-pane-width) * 1px);
-        --fast-tooling-l4-color: #1F1F1F;
-    }
-
-    .mobile-pane-trigger {
-        background: none;
-        border: none;
-        padding: 14px;
-    }
-
-    .mobile-pane-trigger:focus {
-        outline: none;
-    }
-
-    .menu-bar {
-        position: fixed;
-        display: grid;
-        grid-template-rows: 60% 40%;
-        z-index: 1;
-        height: var(--mobile-menu-bar-height);
-        width: 100vw;
-    }
-
-    .mobile-menu-bar {
-        display: block;
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        height: 100%;
-        background-color: var(--menu-bar-background);
-    }
-
-    .footer-region {
-        padding: 0 calc(var(--mobile-pane-width) * 1px);
-        background: var(--footer-background-color);
-    }
-}
diff --git a/sites/site-utilities/src/components/editor/index.tsx b/sites/site-utilities/src/components/editor/index.tsx
deleted file mode 100644
index 6dd409cbf27..00000000000
--- a/sites/site-utilities/src/components/editor/index.tsx
+++ /dev/null
@@ -1,352 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { html_beautify } from "vscode-html-languageservice/lib/esm/beautify/beautify-html";
-import { mapDataDictionaryToMonacoEditorHTML } from "@microsoft/fast-tooling/dist/esm/data-utilities/monaco";
-import {
-    AjvMapper,
-    CustomMessage,
-    DataDictionary,
-    MessageSystem,
-    MessageSystemType,
-    MonacoAdapter,
-    MonacoAdapterAction,
-    MonacoAdapterActionCallbackConfig,
-} from "@microsoft/fast-tooling";
-import { ViewerCustomAction } from "@microsoft/fast-tooling-react";
-// This is only used as a typescript reference, the actual monaco import must
-// be passed from the derived class or it will cause import issues
-import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
-import { StandardLuminance } from "@microsoft/fast-components";
-import { classNames, Direction } from "@microsoft/fast-web-utilities";
-import FASTMessageSystemWorker from "@microsoft/fast-tooling/dist/message-system.min.js";
-import { EditorState } from "./editor.props";
-
-export const previewBackgroundTransparency: string = "PREVIEW::TRANSPARENCY";
-export const previewDirection: string = "PREVIEW::DIRECTION";
-export const previewTheme: string = "PREVIEW::THEME";
-
-const fastMessageSystemWorker = new FASTMessageSystemWorker();
-const fastDesignMessageSystemWorker = new FASTMessageSystemWorker();
-
-abstract class Editor<P, S extends EditorState> extends React.Component<P, S> {
-    public editor: monaco.editor.IStandaloneCodeEditor;
-    public abstract editorContainerRef: React.RefObject<HTMLDivElement>;
-    public abstract viewerContainerRef: React.RefObject<HTMLDivElement>;
-    public viewerContentAreaPadding: number = 20;
-    public maxViewerHeight: number = 0;
-    public maxViewerWidth: number = 0;
-    public fastMessageSystem: MessageSystem;
-    public fastDesignMessageSystem: MessageSystem;
-    // This is the current monaco editor models string value
-    public monacoValue: string[];
-    public paneStartClassNames: string = "pane pane__start";
-    public paneEndClassNames: string = "pane pane__end";
-    public viewerClassNames: string = "preview";
-    public canvasContentClassNames: string = "canvas-content";
-    public menuItemRegionClassNames: string = "menu-item-region";
-    public canvasMenuBarClassNames: string = "canvas-menu-bar";
-    public mobileMenuBarClassNames: string = "mobile-menu-bar";
-    public logoClassNames: string = "logo";
-    public navigationClassNames: string = "navigation";
-    public canvasClassNames: string = "canvas";
-    public menuBarClassNames: string = "menu-bar";
-    private adapter: MonacoAdapter;
-    private monacoEditorModel: monaco.editor.ITextModel;
-    private firstRun: boolean = true;
-
-    constructor(props: P) {
-        super(props);
-
-        if ((window as any).Worker) {
-            this.fastMessageSystem = new MessageSystem({
-                webWorker: fastMessageSystemWorker,
-            });
-            this.fastDesignMessageSystem = new MessageSystem({
-                webWorker: fastDesignMessageSystemWorker,
-            });
-            new AjvMapper({
-                messageSystem: this.fastDesignMessageSystem,
-            });
-            new AjvMapper({
-                messageSystem: this.fastMessageSystem,
-            });
-        }
-
-        this.monacoValue = [];
-
-        this.adapter = new MonacoAdapter({
-            messageSystem: this.fastMessageSystem,
-            actions: [
-                new MonacoAdapterAction({
-                    id: "monaco.setValue",
-                    action: (config: MonacoAdapterActionCallbackConfig): void => {
-                        // trigger an update to the monaco value that
-                        // also updates the DataDictionary which fires a
-                        // postMessage to the MessageSystem if the update
-                        // is coming from Monaco and not a data dictionary update
-                        config.updateMonacoModelValue(
-                            this.monacoValue,
-                            this.state.lastMappedDataDictionaryToMonacoEditorHTMLValue ===
-                                this.monacoValue[0]
-                        );
-                    },
-                }),
-            ],
-        });
-    }
-
-    public setupMonacoEditor = (monacoRef: any): void => {
-        monacoRef.editor.onDidCreateModel((listener: monaco.editor.ITextModel) => {
-            this.monacoEditorModel = monacoRef.editor.getModel(
-                listener.uri
-            ) as monaco.editor.ITextModel;
-
-            this.monacoEditorModel.onDidChangeContent(
-                (e: monaco.editor.IModelContentChangedEvent) => {
-                    /**
-                     * Sets the value to be used by monaco
-                     */
-                    if (this.state.previewReady) {
-                        const modelValue = this.monacoEditorModel.getValue();
-                        this.monacoValue = Array.isArray(modelValue)
-                            ? modelValue
-                            : [modelValue];
-
-                        if (!this.firstRun) {
-                            this.adapter.action("monaco.setValue").run();
-                        }
-
-                        this.firstRun = false;
-                    }
-                }
-            );
-        });
-    };
-
-    public createMonacoEditor = (
-        monacoRef: any,
-        alternateContainerRef?: HTMLElement,
-        editorOptions?: any
-    ): void => {
-        if ((alternateContainerRef || this.editorContainerRef.current) && !this.editor) {
-            this.editor = monacoRef.editor.create(
-                alternateContainerRef
-                    ? alternateContainerRef
-                    : this.editorContainerRef.current,
-                {
-                    value: "",
-                    language: "html",
-                    formatOnPaste: true,
-                    lineNumbers: "off",
-                    theme: "vs-dark",
-                    wordWrap: "on",
-                    wordWrapColumn: 80,
-                    wordWrapMinified: true,
-                    wrappingIndent: "same",
-                    minimap: {
-                        showSlider: "mouseover",
-                    },
-                    ...editorOptions,
-                }
-            );
-
-            this.updateEditorContent(this.state.dataDictionary);
-        }
-    };
-
-    public updateEditorContent(dataDictionary: DataDictionary<unknown>): void {
-        if (this.editor) {
-            const lastMappedDataDictionaryToMonacoEditorHTMLValue = html_beautify(
-                mapDataDictionaryToMonacoEditorHTML(
-                    dataDictionary,
-                    this.state.schemaDictionary
-                )
-            );
-
-            this.setState(
-                {
-                    lastMappedDataDictionaryToMonacoEditorHTMLValue,
-                },
-                () => {
-                    this.editor.setValue(lastMappedDataDictionaryToMonacoEditorHTMLValue);
-                }
-            );
-        }
-    }
-
-    public setViewerToFullSize(alternateContainerRef?: HTMLElement): void {
-        const viewerContainer: HTMLElement | null = alternateContainerRef
-            ? alternateContainerRef
-            : this.viewerContainerRef.current;
-
-        if (viewerContainer) {
-            /* eslint-disable-next-line react/no-find-dom-node */
-            const viewerNode: Element | Text | null = ReactDOM.findDOMNode(
-                viewerContainer
-            );
-
-            if (viewerNode instanceof Element) {
-                // 24 is height of view label
-                this.maxViewerHeight =
-                    viewerNode.clientHeight - this.viewerContentAreaPadding * 2 - 24;
-                this.maxViewerWidth =
-                    viewerNode.clientWidth - this.viewerContentAreaPadding * 2;
-
-                this.setState({
-                    viewerWidth: this.maxViewerWidth,
-                    viewerHeight: this.maxViewerHeight,
-                });
-            }
-        }
-    }
-
-    public getContainerClassNames(): string {
-        return classNames(
-            "container",
-            ["container__form-visible", this.state.mobileFormVisible],
-            ["container__navigation-visible", this.state.mobileNavigationVisible]
-        );
-    }
-
-    public getCanvasOverlayClassNames(): string {
-        return classNames("canvas-overlay", [
-            "canvas-overlay__active",
-            this.state.mobileFormVisible || this.state.mobileNavigationVisible,
-        ]);
-    }
-
-    public handleCanvasOverlayTrigger = (): void => {
-        this.setState({
-            mobileFormVisible: false,
-            mobileNavigationVisible: false,
-        });
-    };
-
-    public handleMobileNavigationTrigger = (): void => {
-        this.setState({
-            mobileNavigationVisible: true,
-        });
-    };
-
-    public handleMobileFormTrigger = (): void => {
-        this.setState({
-            mobileFormVisible: true,
-        });
-    };
-
-    public handleUpdateTheme = (): void => {
-        const updatedTheme: StandardLuminance =
-            this.state.theme === StandardLuminance.DarkMode
-                ? StandardLuminance.LightMode
-                : StandardLuminance.DarkMode;
-
-        this.setState({
-            theme: updatedTheme,
-        });
-
-        this.fastMessageSystem.postMessage({
-            type: MessageSystemType.custom,
-            action: ViewerCustomAction.response,
-            id: previewTheme,
-            value: updatedTheme,
-        } as CustomMessage<{}, {}>);
-    };
-
-    public handleUpdateDirection = (): void => {
-        const updatedDirection: Direction =
-            this.state.direction === Direction.ltr ? Direction.rtl : Direction.ltr;
-        this.setState({
-            direction: updatedDirection,
-        });
-
-        this.fastMessageSystem.postMessage({
-            type: MessageSystemType.custom,
-            action: ViewerCustomAction.response,
-            id: previewDirection,
-            value: updatedDirection,
-        } as CustomMessage<{}, {}>);
-    };
-
-    public handleUpdateTransparency = (): void => {
-        this.setState({
-            transparentBackground: !this.state.transparentBackground,
-        });
-
-        this.fastMessageSystem.postMessage({
-            type: MessageSystemType.custom,
-            action: ViewerCustomAction.response,
-            id: previewBackgroundTransparency,
-            value: !this.state.transparentBackground,
-        } as CustomMessage<{}, {}>);
-    };
-
-    public handleUpdateHeight = (updatedHeight: number): void => {
-        this.setState({
-            viewerHeight:
-                updatedHeight > this.maxViewerHeight
-                    ? this.maxViewerHeight
-                    : updatedHeight,
-        });
-    };
-
-    public handleUpdateWidth = (updatedWidth: number): void => {
-        this.setState({
-            viewerWidth:
-                updatedWidth > this.maxViewerWidth ? this.maxViewerWidth : updatedWidth,
-        });
-    };
-
-    public renderCanvasOverlay(): React.ReactNode {
-        return (
-            <div
-                className={this.getCanvasOverlayClassNames()}
-                onClick={this.handleCanvasOverlayTrigger}
-            ></div>
-        );
-    }
-
-    public renderMobileNavigationTrigger(): React.ReactNode {
-        return (
-            <button
-                className={"mobile-pane-trigger"}
-                onClick={this.handleMobileNavigationTrigger}
-            >
-                <svg
-                    width="16"
-                    height="15"
-                    viewBox="0 0 16 15"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <rect width="16" height="1" rx="0.5" fill="white" />
-                    <rect y="7" width="16" height="1" rx="0.5" fill="white" />
-                    <rect y="14" width="16" height="1" rx="0.5" fill="white" />
-                </svg>
-            </button>
-        );
-    }
-
-    public renderMobileFormTrigger(): React.ReactNode {
-        return (
-            <button
-                className={"mobile-pane-trigger"}
-                onClick={this.handleMobileFormTrigger}
-            >
-                <svg
-                    width="18"
-                    height="18"
-                    viewBox="0 0 18 18"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M16.5253 1.47498C17.6898 2.63953 17.6898 4.52764 16.5253 5.69219L6.55167 15.6658C6.32095 15.8965 6.034 16.0631 5.71919 16.1489L1.45612 17.3116C0.989558 17.4388 0.56145 17.0107 0.688694 16.5441L1.85135 12.2811C1.93721 11.9663 2.10373 11.6793 2.33446 11.4486L12.3081 1.47498C13.4726 0.310424 15.3607 0.310424 16.5253 1.47498ZM11.5001 4.05073L3.21834 12.3325C3.14143 12.4094 3.08592 12.505 3.05731 12.61L2.18243 15.8178L5.3903 14.943C5.49523 14.9143 5.59088 14.8588 5.66779 14.7819L13.9493 6.4999L11.5001 4.05073ZM13.1919 2.35886L12.3835 3.16656L14.8326 5.61656L15.6414 4.80831C16.3178 4.13191 16.3178 3.03526 15.6414 2.35886C14.965 1.68246 13.8683 1.68246 13.1919 2.35886Z"
-                        fill="white"
-                    />
-                </svg>
-            </button>
-        );
-    }
-}
-
-export { Editor, EditorState };
diff --git a/sites/site-utilities/src/components/index.ts b/sites/site-utilities/src/components/index.ts
deleted file mode 100644
index c058f29b40b..00000000000
--- a/sites/site-utilities/src/components/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from "./accent-color-picker";
-export * from "./categories";
-export * from "./dimension";
-export * from "./direction-switch";
-export * from "./editor";
-export * from "./logo";
-export * from "./theme-selector";
-export * from "./transparency-toggle";
diff --git a/sites/site-utilities/src/components/logo/index.tsx b/sites/site-utilities/src/components/logo/index.tsx
deleted file mode 100644
index 075cf864fbf..00000000000
--- a/sites/site-utilities/src/components/logo/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/** @jsx h */ /* Note: Set the JSX pragma to the wrapped version of createElement */
-
-import React from "react";
-import { fastBadge } from "@microsoft/fast-components";
-import h from "../../web-components/pragma";
-import { LogoProps } from "./logo.props";
-
-/**
- * Ensure tree-shaking doesn't remove these components from the bundle
- */
-fastBadge;
-
-const backgroundStyle = {
-    display: "flex",
-    height: "32px",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "8px",
-};
-const headerStyle = {
-    fontSize: "var(--type-ramp-base-font-size)",
-    fontWeight: 600,
-    lineHeight: "var(--type-ramp-base-line-height)",
-    color: "#FFFFFF",
-};
-const imageStyle = { verticalAlign: "middle", height: "32px" };
-const spanStyle = { verticalAlign: "middle", margin: "0 10px" };
-const style = `
-fast-badge {
-    --badge-fill-primary: #FFD800;
-    --badge-color-primary: #000000;
-}`;
-
-export const Logo: React.FC<LogoProps> = ({
-    className,
-    logo,
-    title,
-    version,
-}: React.PropsWithChildren<LogoProps>): React.ReactElement => {
-    return (
-        <div className={className} style={backgroundStyle}>
-            <style>{style}</style>
-            <h1 style={headerStyle}>
-                <img src={logo} style={imageStyle} />
-                <span style={spanStyle}>{title}</span>
-            </h1>
-            {version ? (
-                <fast-badge fill="primary" color="primary">
-                    {version}
-                </fast-badge>
-            ) : null}
-        </div>
-    );
-};
-
-export * from "./logo.props";
diff --git a/sites/site-utilities/src/components/logo/logo.props.ts b/sites/site-utilities/src/components/logo/logo.props.ts
deleted file mode 100644
index 04d619d6b7d..00000000000
--- a/sites/site-utilities/src/components/logo/logo.props.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface LogoProps {
-    /**
-     * The class name to add
-     */
-    className?: string;
-
-    /**
-     * The version
-     */
-    version?: string;
-
-    /**
-     * The logo location
-     */
-    logo: string;
-
-    /**
-     * The title
-     */
-    title?: string;
-}
diff --git a/sites/site-utilities/src/components/style.ts b/sites/site-utilities/src/components/style.ts
deleted file mode 100644
index 15c12163280..00000000000
--- a/sites/site-utilities/src/components/style.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export const accentColor = "#FF4387";
-export const selectorStyle = { margin: "0 4px 0 8px" };
-
-export const labelStyle: React.CSSProperties = {
-    fontSize: "var(--type-ramp-base-font-size)",
-    lineHeight: "var(--type-ramp-base-line-height)",
-    color: "var(--neutral-foreground-rest)",
-    ...selectorStyle,
-};
-
-const toggleStyle: React.CSSProperties = {
-    display: "flex",
-    alignItems: "center",
-    background: "none",
-    border: "none",
-    ...selectorStyle,
-};
-
-export { toggleStyle };
diff --git a/sites/site-utilities/src/components/theme-selector/index.tsx b/sites/site-utilities/src/components/theme-selector/index.tsx
deleted file mode 100644
index b96459e2bfc..00000000000
--- a/sites/site-utilities/src/components/theme-selector/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import { StandardLuminance } from "@microsoft/fast-components";
-import { accentColor, toggleStyle } from "../style";
-import { ThemeSelectorProps } from "./theme-selector.props";
-
-export const ThemeSelector: React.FC<ThemeSelectorProps> = ({
-    className,
-    id,
-    theme,
-    onUpdateTheme,
-    disabled,
-}: React.PropsWithChildren<ThemeSelectorProps>): React.ReactElement => {
-    return (
-        <button
-            className={className}
-            onClick={onUpdateTheme}
-            title={"Toggle theme"}
-            style={toggleStyle}
-            disabled={disabled}
-        >
-            <svg
-                width="14"
-                height="14"
-                viewBox="0 0 14 14"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    d="M6.99992 13.6673C10.6818 13.6673 13.6666 10.6825 13.6666 7.00065C13.6666 3.31875 10.6818 0.333984 6.99992 0.333984C3.31802 0.333984 0.333252 3.31875 0.333252 7.00065C0.333252 10.6825 3.31802 13.6673 6.99992 13.6673ZM6.99992 12.6673V1.33398C10.1295 1.33398 12.6666 3.87104 12.6666 7.00065C12.6666 10.1303 10.1295 12.6673 6.99992 12.6673Z"
-                    fill={`${
-                        theme === StandardLuminance.DarkMode ? accentColor : "white"
-                    }`}
-                />
-            </svg>
-        </button>
-    );
-};
-
-export * from "./theme-selector.props";
diff --git a/sites/site-utilities/src/components/theme-selector/theme-selector.props.ts b/sites/site-utilities/src/components/theme-selector/theme-selector.props.ts
deleted file mode 100644
index 0840f2fc880..00000000000
--- a/sites/site-utilities/src/components/theme-selector/theme-selector.props.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { StandardLuminance } from "@microsoft/fast-components";
-
-export interface ThemeSelectorProps {
-    className?: string;
-    id: string;
-    theme: StandardLuminance;
-    onUpdateTheme: any;
-    disabled: boolean;
-}
diff --git a/sites/site-utilities/src/components/transparency-toggle/index.tsx b/sites/site-utilities/src/components/transparency-toggle/index.tsx
deleted file mode 100644
index 1abcc7e7926..00000000000
--- a/sites/site-utilities/src/components/transparency-toggle/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import { accentColor, toggleStyle } from "../style";
-import { TransparencyToggleProps } from "./transparency-toggle.props";
-
-export const TransparencyToggle: React.FC<TransparencyToggleProps> = ({
-    className,
-    id,
-    transparency,
-    onUpdateTransparency,
-    disabled,
-}: React.PropsWithChildren<TransparencyToggleProps>): React.ReactElement => {
-    return (
-        <button
-            className={className}
-            onClick={onUpdateTransparency}
-            title={"Toggle transparency"}
-            style={toggleStyle}
-            disabled={disabled}
-        >
-            <svg
-                width="16"
-                height="14"
-                viewBox="0 0 16 14"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    d="M14 3H16V14H3V12H14V3ZM13 11H0V0H13V11ZM4 9.38281L4.61719 10H6.38281L4 7.61719V9.38281ZM4 6.38281L7.61719 10H9.38281L4 4.61719V6.38281ZM10.6172 10H12V9.61719L6.38281 4H4.61719L10.6172 10ZM9.38281 4H7.61719L12 8.38281V6.61719L9.38281 4ZM12 5.38281V4H10.6172L12 5.38281ZM1 10H3V3H12V1H1V10Z"
-                    fill={`${transparency ? accentColor : "white"}`}
-                />
-            </svg>
-        </button>
-    );
-};
diff --git a/sites/site-utilities/src/components/transparency-toggle/transparency-toggle.props.ts b/sites/site-utilities/src/components/transparency-toggle/transparency-toggle.props.ts
deleted file mode 100644
index 12f933f3506..00000000000
--- a/sites/site-utilities/src/components/transparency-toggle/transparency-toggle.props.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface TransparencyToggleProps {
-    className?: string;
-    id: string;
-    transparency: boolean;
-    onUpdateTransparency: any;
-    disabled: boolean;
-}
diff --git a/sites/site-utilities/src/custom-elements.d.ts b/sites/site-utilities/src/custom-elements.d.ts
deleted file mode 100644
index 6b9407994b4..00000000000
--- a/sites/site-utilities/src/custom-elements.d.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// custom-elements.d.ts
-declare namespace JSX {
-    interface IntrinsicElements {
-        "fast-badge": React.DetailedHTMLProps<
-            React.HTMLAttributes<HTMLElement>,
-            HTMLElement
-        > & {
-            fill?: string;
-            color?: string;
-        };
-        "fast-button": React.DetailedHTMLProps<
-            React.HTMLAttributes<HTMLElement>,
-            HTMLElement
-        > & {
-            disabled?: string;
-            appearance?: string;
-            events?: {
-                click?: (e: React.ChangeEvent<HTMLElement>) => void;
-            };
-        };
-        "fast-number-field": React.DetailedHTMLProps<
-            React.HTMLAttributes<HTMLElement>,
-            HTMLElement
-        > & {
-            value?: number;
-            size?: number;
-            disabled?: string;
-            events?: {
-                input?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-            };
-            "hide-step"?: boolean;
-        };
-    }
-}
-
-/**
- * Satisfy TypeScript importing modules without typings
- */
-declare module "@skatejs/val";
diff --git a/sites/site-utilities/src/definitions/index.ts b/sites/site-utilities/src/definitions/index.ts
deleted file mode 100644
index e2cf3e553e6..00000000000
--- a/sites/site-utilities/src/definitions/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
-    extendElementDefinitions,
-    nativeElementDefinitions,
-    nativeElementExtendedDefinitions,
-} from "@microsoft/fast-tooling/dist/esm/definitions";
-import * as fastComponentDefinitions from "@microsoft/fast-components/dist/esm/component-definitions";
-import * as fluentUIComponentDefinitions from "@fluentui/web-components/dist/esm/component-definitions";
-
-const fastComponentExtendedDefinitions = extendElementDefinitions(
-    fastComponentDefinitions
-);
-
-const fluentUIComponentExtendedDefinitions = extendElementDefinitions(
-    fluentUIComponentDefinitions
-);
-
-export {
-    fastComponentDefinitions,
-    fluentUIComponentDefinitions,
-    nativeElementDefinitions,
-    fastComponentExtendedDefinitions,
-    fluentUIComponentExtendedDefinitions,
-    nativeElementExtendedDefinitions,
-};
diff --git a/sites/site-utilities/src/icons/chevron.tsx b/sites/site-utilities/src/icons/chevron.tsx
deleted file mode 100644
index fe66d567524..00000000000
--- a/sites/site-utilities/src/icons/chevron.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-
-function chevron(rotate: number): (className?: string) => JSX.Element {
-    return (className?: string): JSX.Element => {
-        return (
-            <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
-                className={className}
-                style={{ transform: `rotate(${rotate}deg)` }}
-            >
-                <path d="M13.4551 10.9824L8 5.5332L2.54492 10.9824L2.01758 10.4551L8 4.4668L13.9824 10.4551L13.4551 10.9824Z" />
-            </svg>
-        );
-    };
-}
-
-export const upChevron: ReturnType<typeof chevron> = chevron(0);
-export const downChevron: ReturnType<typeof chevron> = chevron(180);
diff --git a/sites/site-utilities/src/icons/dot-dot-dot.tsx b/sites/site-utilities/src/icons/dot-dot-dot.tsx
deleted file mode 100644
index eca8b964865..00000000000
--- a/sites/site-utilities/src/icons/dot-dot-dot.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-export function dotDotDotGlyph(className?: string): JSX.Element {
-    return (
-        <svg width="14" height="2" viewBox="0 0 14 2" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1 0C1.14062 0 1.27083 0.0260417 1.39062 0.078125C1.51042 0.130208 1.61458 0.203125 1.70312 0.296875C1.79688 0.385417 1.86979 0.489583 1.92188 0.609375C1.97396 0.729167 2 0.859375 2 1C2 1.14062 1.97396 1.27083 1.92188 1.39062C1.86979 1.51042 1.79688 1.61719 1.70312 1.71094C1.61458 1.79948 1.51042 1.86979 1.39062 1.92188C1.27083 1.97396 1.14062 2 1 2C0.859375 2 0.729167 1.97396 0.609375 1.92188C0.489583 1.86979 0.382812 1.79948 0.289062 1.71094C0.200521 1.61719 0.130208 1.51042 0.078125 1.39062C0.0260417 1.27083 0 1.14062 0 1C0 0.859375 0.0260417 0.729167 0.078125 0.609375C0.130208 0.489583 0.200521 0.385417 0.289062 0.296875C0.382812 0.203125 0.489583 0.130208 0.609375 0.078125C0.729167 0.0260417 0.859375 0 1 0ZM7 0C7.14062 0 7.27083 0.0260417 7.39062 0.078125C7.51042 0.130208 7.61458 0.203125 7.70312 0.296875C7.79688 0.385417 7.86979 0.489583 7.92188 0.609375C7.97396 0.729167 8 0.859375 8 1C8 1.14062 7.97396 1.27083 7.92188 1.39062C7.86979 1.51042 7.79688 1.61719 7.70312 1.71094C7.61458 1.79948 7.51042 1.86979 7.39062 1.92188C7.27083 1.97396 7.14062 2 7 2C6.85938 2 6.72917 1.97396 6.60938 1.92188C6.48958 1.86979 6.38281 1.79948 6.28906 1.71094C6.20052 1.61719 6.13021 1.51042 6.07812 1.39062C6.02604 1.27083 6 1.14062 6 1C6 0.859375 6.02604 0.729167 6.07812 0.609375C6.13021 0.489583 6.20052 0.385417 6.28906 0.296875C6.38281 0.203125 6.48958 0.130208 6.60938 0.078125C6.72917 0.0260417 6.85938 0 7 0ZM13 0C13.1406 0 13.2708 0.0260417 13.3906 0.078125C13.5104 0.130208 13.6146 0.203125 13.7031 0.296875C13.7969 0.385417 13.8698 0.489583 13.9219 0.609375C13.974 0.729167 14 0.859375 14 1C14 1.14062 13.974 1.27083 13.9219 1.39062C13.8698 1.51042 13.7969 1.61719 13.7031 1.71094C13.6146 1.79948 13.5104 1.86979 13.3906 1.92188C13.2708 1.97396 13.1406 2 13 2C12.8594 2 12.7292 1.97396 12.6094 1.92188C12.4896 1.86979 12.3828 1.79948 12.2891 1.71094C12.2005 1.61719 12.1302 1.51042 12.0781 1.39062C12.026 1.27083 12 1.14062 12 1C12 0.859375 12.026 0.729167 12.0781 0.609375C12.1302 0.489583 12.2005 0.385417 12.2891 0.296875C12.3828 0.203125 12.4896 0.130208 12.6094 0.078125C12.7292 0.0260417 12.8594 0 13 0Z" />
-        </svg>
-    );
-}
diff --git a/sites/site-utilities/src/icons/editor-logo.tsx b/sites/site-utilities/src/icons/editor-logo.tsx
deleted file mode 100644
index cdd0d74bdd1..00000000000
--- a/sites/site-utilities/src/icons/editor-logo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-export const editorLogo = (
-    <svg
-        width="19"
-        height="19"
-        viewBox="0 0 19 19"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <rect x="1" y="1" width="7" height="7" rx="2" strokeWidth="2" />
-        <rect x="11" y="1" width="7" height="7" rx="2" strokeWidth="2" />
-        <rect x="11" y="11" width="7" height="7" rx="2" strokeWidth="2" />
-        <rect x="1" y="11" width="7" height="7" rx="2" strokeWidth="2" />
-    </svg>
-);
diff --git a/sites/site-utilities/src/icons/index.ts b/sites/site-utilities/src/icons/index.ts
deleted file mode 100644
index 4d2ee941bbb..00000000000
--- a/sites/site-utilities/src/icons/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./chevron";
-export * from "./dot-dot-dot";
-export * from "./editor-logo";
-export * from "./rotate";
diff --git a/sites/site-utilities/src/icons/rotate.tsx b/sites/site-utilities/src/icons/rotate.tsx
deleted file mode 100644
index a65bfb3d271..00000000000
--- a/sites/site-utilities/src/icons/rotate.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/** @jsx h */ /* Note: Set the JSX pragma to the wrapped version of createElement */
-
-import React from "react";
-import h from "../web-components/pragma";
-
-export function RotateGlyph(): React.ReactNode {
-    return (
-        <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <mask
-                id="mask0"
-                mask-type="alpha"
-                maskUnits="userSpaceOnUse"
-                x="0"
-                y="0"
-                width="16"
-                height="16"
-            >
-                <path
-                    d="M10.625 12.375H1V6.25H10.625V12.375ZM9.75 7.125H1.875V11.5H9.75V7.125ZM1.875 5.375H1V4.5H1.875V5.375ZM1.875 3.625H1V2.75H1.875V3.625ZM1.875 1.875H1V1H1.875V1.875ZM7.125 1.875H6.25V1H7.125V1.875ZM3.625 1.875H2.75V1H3.625V1.875ZM5.375 1.875H4.5V1H5.375V1.875ZM7.125 3.625H6.25V2.75H7.125V3.625ZM7.125 5.375H6.25V4.5H7.125V5.375ZM12.1221 1.875C12.5869 2.33984 12.9971 2.79102 13.3525 3.22852C13.7126 3.66146 14.0133 4.11719 14.2549 4.5957C14.501 5.06966 14.6855 5.58236 14.8086 6.13379C14.9362 6.68522 15 7.30729 15 8C15 8.64258 14.9157 9.26237 14.7471 9.85938C14.583 10.4564 14.3483 11.0146 14.043 11.5342C13.7422 12.0537 13.3776 12.5277 12.9492 12.9561C12.5254 13.3799 12.0537 13.7445 11.5342 14.0498C11.0146 14.3506 10.4564 14.5853 9.85938 14.7539C9.26237 14.918 8.64258 15 8 15V14.125C8.56055 14.125 9.10059 14.0521 9.62012 13.9062C10.1442 13.7604 10.6318 13.5553 11.083 13.291C11.5387 13.0221 11.9535 12.7008 12.3271 12.3271C12.7008 11.9535 13.0199 11.541 13.2842 11.0898C13.5531 10.6341 13.7604 10.1465 13.9062 9.62695C14.0521 9.10286 14.125 8.56055 14.125 8C14.125 7.39388 14.0658 6.84245 13.9473 6.3457C13.8333 5.84896 13.6647 5.38411 13.4414 4.95117C13.2227 4.51823 12.9492 4.10352 12.6211 3.70703C12.2975 3.31055 11.9238 2.90723 11.5 2.49707V4.5H10.625V1H14.125V1.875H12.1221Z"
-                    fill="black"
-                />
-            </mask>
-            <g mask="url(#mask0)">
-                <rect x="-2" y="-2" width="20" height="20" fill="white" />
-            </g>
-        </svg>
-    );
-}
diff --git a/sites/site-utilities/src/index.ts b/sites/site-utilities/src/index.ts
deleted file mode 100644
index 818d854a42b..00000000000
--- a/sites/site-utilities/src/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./components";
-export * from "./definitions";
-export * from "./icons";
-export * from "./schemas";
diff --git a/sites/site-utilities/src/schemas/definition-mapper.ts b/sites/site-utilities/src/schemas/definition-mapper.ts
deleted file mode 100644
index 2183ffd89fd..00000000000
--- a/sites/site-utilities/src/schemas/definition-mapper.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import { mapWebComponentDefinitionToJSONSchema } from "@microsoft/fast-tooling";
-import { WebComponentDefinition } from "@microsoft/fast-tooling/dist/esm/data-utilities/web-component";
-import * as fastComponentDefinitions from "@microsoft/fast-components/dist/esm/component-definitions";
-import {
-    fastComponentExtendedDefinitions,
-    fluentUIComponentDefinitions,
-    fluentUIComponentExtendedDefinitions,
-    nativeElementDefinitions,
-    nativeElementExtendedDefinitions,
-} from "../definitions";
-
-const fastComponentSchemas: { [key: string]: any } = {};
-const fluentUIComponentSchemas: { [key: string]: any } = {};
-const nativeElementSchemas: { [key: string]: any } = {};
-const fastComponentExtendedSchemas: { [key: string]: any } = {};
-const fluentUIComponentExtendedSchemas: { [key: string]: any } = {};
-const nativeElementExtendedSchemas: { [key: string]: any } = {};
-
-const headingAlias: string = "Heading level";
-const alias: { [key: string]: string } = {
-    h1: `${headingAlias} 1`,
-    h2: `${headingAlias} 2`,
-    h3: `${headingAlias} 3`,
-    h4: `${headingAlias} 4`,
-    h5: `${headingAlias} 5`,
-    h6: `${headingAlias} 6`,
-    p: "Paragraph",
-    hr: "Thematic Break (Horizontal Rule)",
-    ol: "Ordered list",
-    ul: "Unordered list",
-    li: "List item",
-    div: "Container",
-    a: "Hyperlink",
-    img: "Image",
-};
-
-function mapToJSONSchemas(
-    definitions: { [key: string]: WebComponentDefinition },
-    schemas: { [key: string]: any },
-    libraryName?: string
-): void {
-    Object.entries(definitions).forEach(
-        ([, definition]: [string, WebComponentDefinition]) => {
-            mapWebComponentDefinitionToJSONSchema(definition).forEach(
-                (definitionTagItem: any) => {
-                    const jsonSchema = definitionTagItem;
-                    schemas[jsonSchema.$id] = {
-                        ...jsonSchema,
-                        ...(alias[jsonSchema.$id]
-                            ? {
-                                  alias: alias[jsonSchema.$id],
-                              }
-                            : {}),
-                    };
-
-                    if (libraryName) {
-                        schemas[jsonSchema.$id].title = `${
-                            schemas[jsonSchema.$id].title
-                        } (${libraryName})`;
-                    }
-                }
-            );
-        }
-    );
-}
-
-const fastLibraryName = "FAST";
-const fluentUILibraryName = "Fluent UI";
-
-mapToJSONSchemas(fastComponentDefinitions, fastComponentSchemas, fastLibraryName);
-mapToJSONSchemas(
-    fluentUIComponentDefinitions,
-    fluentUIComponentSchemas,
-    fluentUILibraryName
-);
-mapToJSONSchemas(nativeElementDefinitions, nativeElementSchemas);
-mapToJSONSchemas(
-    fastComponentExtendedDefinitions,
-    fastComponentExtendedSchemas,
-    fastLibraryName
-);
-mapToJSONSchemas(
-    fluentUIComponentExtendedDefinitions,
-    fluentUIComponentExtendedSchemas,
-    fluentUILibraryName
-);
-mapToJSONSchemas(nativeElementExtendedDefinitions, nativeElementExtendedSchemas);
-
-/**
- * Map the formControlId to all property names for use by the <Form /> component
- */
-Object.entries(fluentUIComponentExtendedSchemas).forEach(([schemaKey]: [string, any]) => {
-    Object.keys(fluentUIComponentExtendedSchemas[schemaKey].properties).forEach(
-        (propertyKey: string) => {
-            fluentUIComponentExtendedSchemas[schemaKey].properties[propertyKey][
-                "formControlId"
-            ] = propertyKey;
-        }
-    );
-});
-Object.entries(fastComponentExtendedSchemas).forEach(([schemaKey]: [string, any]) => {
-    Object.keys(fastComponentExtendedSchemas[schemaKey].properties).forEach(
-        (propertyKey: string) => {
-            fastComponentExtendedSchemas[schemaKey].properties[propertyKey][
-                "formControlId"
-            ] = propertyKey;
-        }
-    );
-});
-Object.entries(nativeElementExtendedSchemas).forEach(([schemaKey]: [string, any]) => {
-    Object.keys(nativeElementExtendedSchemas[schemaKey].properties).forEach(
-        (propertyKey: string) => {
-            nativeElementExtendedSchemas[schemaKey].properties[propertyKey][
-                "formControlId"
-            ] = propertyKey;
-        }
-    );
-});
-
-export {
-    fastComponentSchemas,
-    fluentUIComponentSchemas,
-    nativeElementSchemas,
-    fastComponentExtendedSchemas,
-    fluentUIComponentExtendedSchemas,
-    nativeElementExtendedSchemas,
-};
diff --git a/sites/site-utilities/src/schemas/index.ts b/sites/site-utilities/src/schemas/index.ts
deleted file mode 100644
index c13bfb3fb5e..00000000000
--- a/sites/site-utilities/src/schemas/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { SchemaDictionary } from "@microsoft/fast-tooling";
-import textSchema from "./text.schema";
-import { fastComponentSchemas, nativeElementSchemas } from "./definition-mapper";
-
-const schemaDictionary: SchemaDictionary = {
-    ...fastComponentSchemas,
-    ...nativeElementSchemas,
-    [textSchema.$id]: textSchema,
-};
-
-export * from "./definition-mapper";
-export { textSchema, schemaDictionary };
diff --git a/sites/site-utilities/src/schemas/text.schema.ts b/sites/site-utilities/src/schemas/text.schema.ts
deleted file mode 100644
index 18773d12bba..00000000000
--- a/sites/site-utilities/src/schemas/text.schema.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export default {
-    $schema: "http://json-schema.org/schema#",
-    $id: "text",
-    title: "Text",
-    description: "A text strings schema definition.",
-    type: "string",
-    id: "text",
-    formPluginId: "text",
-};
diff --git a/sites/site-utilities/src/web-components/pragma.ts b/sites/site-utilities/src/web-components/pragma.ts
deleted file mode 100644
index 57086229d12..00000000000
--- a/sites/site-utilities/src/web-components/pragma.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createElement } from "react";
-import val from "@skatejs/val";
-
-/**
- * Define the wrapped createElement function - this should be imported and
- * declared as the JSX pragma wherever Web Components are rendered by React
- */
-export default val(createElement);
diff --git a/sites/site-utilities/tsconfig.json b/sites/site-utilities/tsconfig.json
deleted file mode 100644
index 7cdae616698..00000000000
--- a/sites/site-utilities/tsconfig.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-    "compilerOptions": {
-        "declaration": true,
-        "outDir": "./dist",
-        "moduleResolution": "node",
-        "module": "ES6",
-        "target": "ES6",
-        "baseUrl": "./",
-        "jsx": "react",
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "resolveJsonModule": true,
-        "allowJs": true
-    },
-    "include": [
-        "src/**/*"
-    ],
-    "exclude": [
-        "node_modules",
-        "**/*.spec.ts",
-        "**/*.spec.tsx",
-        "**/__tests__/**"
-    ]
-  }
diff --git a/yarn.lock b/yarn.lock
index dd084ced091..07ac8d045fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1156,7 +1156,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.17.9", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.17.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
   integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
@@ -1753,17 +1753,6 @@
   resolved "https://registry.yarnpkg.com/@fluentui/svg-icons/-/svg-icons-1.1.167.tgz#b16f2be02061d438f520c8499ab184e700cfcfbf"
   integrity sha512-db/7i0cJ9DvlZC24h1feJp+oPQmlZ9xGS+8yLnzuEmWYtoaAEg8d0suiM54uUdQo4xyI6DN7ocIyJdNBebLX5Q==
 
-"@fluentui/web-components@^1.2.3":
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/@fluentui/web-components/-/web-components-1.6.3.tgz#0c38046a130997694f711afc4965eb3ea7575321"
-  integrity sha512-qdi/MsH0Z+2CCC7+meWAQ3vzTMHSU5bBFmWurhEGNDfGzEIC/v3b8YtNasDTUwt4Zz3nngccjHp4y9wGPyfm/w==
-  dependencies:
-    "@microsoft/fast-colors" "^5.1.0"
-    "@microsoft/fast-element" "^1.6.0"
-    "@microsoft/fast-foundation" "^2.23.0"
-    "@microsoft/fast-web-utilities" "^5.0.0"
-    tslib "^1.13.0"
-
 "@fluentui/web-components@^2.2.1":
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/@fluentui/web-components/-/web-components-2.5.0.tgz#9fafc58438594f767d8b9fad5ee0b916a9800293"
@@ -2117,27 +2106,6 @@
     source-map "^0.6.1"
     write-file-atomic "^3.0.0"
 
-"@jest/transform@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.6.2.tgz#5ac57c5fa1ad17b2aae83e73e45813894dcf2e4b"
-  integrity sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/types" "^26.6.2"
-    babel-plugin-istanbul "^6.0.0"
-    chalk "^4.0.0"
-    convert-source-map "^1.4.0"
-    fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.2.4"
-    jest-haste-map "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-util "^26.6.2"
-    micromatch "^4.0.2"
-    pirates "^4.0.1"
-    slash "^3.0.0"
-    source-map "^0.6.1"
-    write-file-atomic "^3.0.0"
-
 "@jest/transform@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.5.1.tgz#6c3501dcc00c4c08915f292a600ece5ecfe1f409"
@@ -2169,17 +2137,6 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
-"@jest/types@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
-  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^3.0.0"
-    "@types/node" "*"
-    "@types/yargs" "^15.0.0"
-    chalk "^4.0.0"
-
 "@jest/types@^27.2.5", "@jest/types@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.5.1.tgz#3c79ec4a8ba61c170bf937bcf9e98a9df175ec80"
@@ -3280,16 +3237,6 @@
     source-map "~0.6.1"
     typescript "~4.6.3"
 
-"@microsoft/fast-components-class-name-contracts-base@^4.8.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-components-class-name-contracts-base/-/fast-components-class-name-contracts-base-4.8.0.tgz#e59c85fd7ff88865d2c5bd6a8cf287232c1469f7"
-  integrity sha512-Dns5cmvh9zrFFeoy+hrqn+HvdtABi1uAXXbwudJCPQoBtnWqGeY7Y6iCLAq63h7xTbhi9SoFaOScTBkvpKXzYQ==
-
-"@microsoft/fast-components-foundation-react@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-components-foundation-react/-/fast-components-foundation-react-3.2.0.tgz#1dcd6818b7d235b33a61ad5c285adf1544b4676e"
-  integrity sha512-Lne/ijIf7aU0ixiVr8HWuJyrVLtmCgzE3Ays6T6JFzw0GoOS67wc3kVzykl6EZseo44VzOogXrW+wsOCB79fnA==
-
 "@microsoft/fast-components@^2.30.6":
   version "2.30.6"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-components/-/fast-components-2.30.6.tgz#22449f41c300060831b3545c27906cea03a72476"
@@ -3312,55 +3259,6 @@
     "@microsoft/fast-web-utilities" "^5.4.1"
     tslib "^1.13.0"
 
-"@microsoft/fast-jss-manager-react@^3.0.0 || ^4.0.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-jss-manager-react/-/fast-jss-manager-react-4.8.0.tgz#0694b18e9250a26a443ad0d6ab5938bbca2147ca"
-  integrity sha512-DMTN3I4RWCXQDQ05BsBDCx/xEokZAgRvAYY7WqnjzERYA9k3Q407qgaQcqfKtjpEFzthjLWTemT2NJ5T2WgSNg==
-  dependencies:
-    "@microsoft/fast-jss-manager" "^4.2.0"
-    hoist-non-react-statics "^3.1.0"
-    jss "^9.8.0"
-    jss-preset-default "^4.3.0"
-
-"@microsoft/fast-jss-manager@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-jss-manager/-/fast-jss-manager-4.2.0.tgz#3d310b6f27435c4a57b6862c2b2273df6897ae06"
-  integrity sha512-2ubd6aOgBnF8CHzMnS9mzDAGPK9/3swgUf9fQ9tTWk6EIsdvwJw+auAzZEfM2xWWM6Tphyp+/XQFmMuvyO2ydw==
-  dependencies:
-    "@microsoft/fast-components-class-name-contracts-base" "^4.8.0"
-    csstype "^2.3.0"
-
-"@microsoft/fast-jss-utilities@^4.8.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-jss-utilities/-/fast-jss-utilities-4.8.0.tgz#aa2fce0f5ed29e0bc1bf4aaa8035d3fe6d2f6d06"
-  integrity sha512-gIkGUA07TjD2hlYJw79DChT+QkYtYLpdxquiGXYBfulI6JGkanAM7yRYYg9sSiKksYyZS7wgNfxA+DiVg5LYXA==
-  dependencies:
-    "@microsoft/fast-colors" "^5.1.0"
-    "@microsoft/fast-jss-manager" "^4.2.0"
-    "@microsoft/fast-web-utilities" "^4.6.0"
-    csstype "^2.3.0"
-    exenv-es6 "^1.0.0"
-
-"@microsoft/fast-tooling-react@^2.11.4":
-  version "2.13.12"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-tooling-react/-/fast-tooling-react-2.13.12.tgz#18851caa67ad903f4f7c0c708ac914cb2b06b6c9"
-  integrity sha512-zDLvhIv49Z+WIRXHiXg5OMXK8TwPyf6KJY8xZA1AmuToY8EFBQUb4ghIHcmfYxvJcyR/fi8jxLn4oFEmqsyoxQ==
-  dependencies:
-    "@microsoft/fast-colors" "^5.1.3"
-    "@microsoft/fast-components" "^2.9.2"
-    "@microsoft/fast-components-class-name-contracts-base" "^4.8.0"
-    "@microsoft/fast-components-foundation-react" "^3.2.0"
-    "@microsoft/fast-element" "^1.5.1"
-    "@microsoft/fast-foundation" "^2.13.1"
-    "@microsoft/fast-jss-manager-react" "^3.0.0 || ^4.0.0"
-    "@microsoft/fast-jss-utilities" "^4.8.0"
-    "@microsoft/fast-tooling" "^0.37.9"
-    "@microsoft/fast-web-utilities" "^4.8.1"
-    "@skatejs/val" "^0.5.0"
-    exenv-es6 "^1.0.0"
-    raf-throttle "^2.0.3"
-    react-dnd "^9.0.0"
-
 "@microsoft/fast-tooling@^0.37.7", "@microsoft/fast-tooling@^0.37.9":
   version "0.37.9"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-tooling/-/fast-tooling-0.37.9.tgz#76454362f84e4ea82ec3f9f2aababae29c1b8936"
@@ -3374,7 +3272,7 @@
     vscode-html-languageservice "^3.1.3"
     vscode-web-custom-data "^0.3.5"
 
-"@microsoft/fast-web-utilities@^4.6.0", "@microsoft/fast-web-utilities@^4.8.1":
+"@microsoft/fast-web-utilities@^4.8.1":
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-4.8.1.tgz#c10906711dfaf885b1d9d3d206fb102cf721c84d"
   integrity sha512-P3xeyUwQ9nPkFrgAdmkOzaXxIq8YqMU5K+LXcoHgJddJCBCKfGWW9OZQOTigLddItTyVyfO8qsJpDQb1TskKHA==
@@ -3962,12 +3860,7 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@skatejs/val@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@skatejs/val/-/val-0.5.0.tgz#f9ebaf363fa45edc51a8181fc855b52b024274f8"
-  integrity sha512-QItfWj+EHl/2TWsXoN/Howp3itKeyfU/A4JAgwPPkLAnvetIO7/O/JwBaGFTghwQWEjWxC3ESapPavNxM8LhGA==
-
-"@slorber/static-site-generator-webpack-plugin@^4.0.4":
+"@slorber/static-site-generator-webpack-plugin@^4.0.1":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@slorber/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-4.0.4.tgz#2bf4a2545e027830d2aa5eb950437c26a289b0f1"
   integrity sha512-FvMavoWEIePps6/JwGCOLYKCRhuwIHhMtmbKpBFgzNkxwpa/569LfTkrbRk1m1I3n+ezJK4on9E1A6cjuZmD9g==
@@ -4118,11 +4011,6 @@
   resolved "https://registry.yarnpkg.com/@types/argparse/-/argparse-1.0.38.tgz#a81fd8606d481f873a3800c6ebae4f1d768a56a9"
   integrity sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==
 
-"@types/asap@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/asap/-/asap-2.0.0.tgz#d529e9608c83499a62ae08c871c5e62271aa2963"
-  integrity sha512-upIS0Gt9Mc8eEpCbYMZ1K8rhNosfKUtimNcINce+zLwJF5UpM3Vv7yz3S5l/1IX+DxTa8lTkUjqynvjRXyJzsg==
-
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14", "@types/babel__core@^7.1.7":
   version "7.1.19"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
@@ -4282,14 +4170,6 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
   integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -4302,11 +4182,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/invariant@^2.2.30":
-  version "2.2.35"
-  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
-  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -4523,7 +4398,7 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16", "@types/react@^16.14.0", "@types/react@^16.3.0", "@types/react@^16.8.0", "@types/react@^16.9.17":
+"@types/react@*", "@types/react@^16", "@types/react@^16.14.0", "@types/react@^16.3.0", "@types/react@^16.9.17":
   version "16.14.25"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.25.tgz#d003f712c7563fdef5a87327f1892825af375608"
   integrity sha512-cXRVHd7vBT5v1is72mmvmsg9stZrbJO04DJqFeh3Yj2tVKO6vmxg5BI+ybI6Ls7ROXRG3aFbZj9x0WA3ZAoDQw==
@@ -4578,11 +4453,6 @@
     "@types/mime" "^1"
     "@types/node" "*"
 
-"@types/shallowequal@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/shallowequal/-/shallowequal-1.1.1.tgz#aad262bb3f2b1257d94c71d545268d592575c9b1"
-  integrity sha512-Lhni3aX80zbpdxRuWhnuYPm8j8UQaa571lHP/xI4W+7BAFhSIhRReXnqjEgT/XzPoXZTJkCqstFMJ8CZTK6IlQ==
-
 "@types/sockjs@^0.3.33":
   version "0.3.33"
   resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.33.tgz#570d3a0b99ac995360e3136fd6045113b1bd236f"
@@ -5574,16 +5444,6 @@ array.prototype.flat@^1.2.5:
     es-abstract "^1.19.2"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.2.5:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
-  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.2"
-    es-shim-unscopables "^1.0.0"
-
 arraybuffer.slice@~0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
@@ -5599,7 +5459,7 @@ arrify@^2.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
   integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
 
-asap@^2.0.0, asap@^2.0.6, asap@~2.0.3:
+asap@^2.0.0, asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -5762,20 +5622,6 @@ babel-jest@^25.5.1:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
-babel-jest@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
-  integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
-  dependencies:
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/babel__core" "^7.1.7"
-    babel-plugin-istanbul "^6.0.0"
-    babel-preset-jest "^26.6.2"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    slash "^3.0.0"
-
 babel-jest@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.5.1.tgz#a1bf8d61928edfefd21da27eb86a695bfd691444"
@@ -5856,16 +5702,6 @@ babel-plugin-jest-hoist@^25.5.0:
     "@babel/types" "^7.3.3"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-jest-hoist@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz#8185bd030348d254c6d7dd974355e6a28b21e62d"
-  integrity sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==
-  dependencies:
-    "@babel/template" "^7.3.3"
-    "@babel/types" "^7.3.3"
-    "@types/babel__core" "^7.0.0"
-    "@types/babel__traverse" "^7.0.6"
-
 babel-plugin-jest-hoist@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz#9be98ecf28c331eb9f5df9c72d6f89deb8181c2e"
@@ -5943,14 +5779,6 @@ babel-preset-jest@^25.5.0:
     babel-plugin-jest-hoist "^25.5.0"
     babel-preset-current-node-syntax "^0.1.2"
 
-babel-preset-jest@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz#747872b1171df032252426586881d62d31798fee"
-  integrity sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==
-  dependencies:
-    babel-plugin-jest-hoist "^26.6.2"
-    babel-preset-current-node-syntax "^1.0.0"
-
 babel-preset-jest@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz#91f10f58034cb7989cb4f962b69fa6eef6a6bc81"
@@ -7945,13 +7773,6 @@ css-unit-converter@^1.1.2:
   resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
   integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
 
-css-vendor@^0.3.8:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa"
-  integrity sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=
-  dependencies:
-    is-in-browser "^1.0.2"
-
 css-what@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
@@ -8057,7 +7878,7 @@ cssstyle@^2.0.0, cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.3.0, csstype@^2.5.8:
+csstype@^2.5.8:
   version "2.6.20"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
   integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
@@ -9060,17 +8881,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-dnd-core@^9.5.1:
-  version "9.5.1"
-  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-9.5.1.tgz#e9ec02d33529b68fa528865704d40ac4b14f2baf"
-  integrity sha512-/yEWFF2jg51yyB8uA2UbvBr9Qis0Oo/4p9cqHLEKZdxzHHVSPfq0a/ool8NG6dIS6Q4uN+oKGObY0rNWiopJDA==
-  dependencies:
-    "@types/asap" "^2.0.0"
-    "@types/invariant" "^2.2.30"
-    asap "^2.0.6"
-    invariant "^2.2.4"
-    redux "^4.0.4"
-
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -9711,26 +9521,6 @@ eslint-plugin-import@^2.25.0:
     resolve "^1.22.0"
     tsconfig-paths "^3.14.1"
 
-eslint-plugin-react@^7.19.0:
-  version "7.29.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz#4717de5227f55f3801a5fd51a16a4fa22b5914d2"
-  integrity sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==
-  dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flatmap "^1.2.5"
-    doctrine "^2.1.0"
-    estraverse "^5.3.0"
-    jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.1.2"
-    object.entries "^1.1.5"
-    object.fromentries "^2.0.5"
-    object.hasown "^1.1.0"
-    object.values "^1.1.5"
-    prop-types "^15.8.1"
-    resolve "^2.0.0-next.3"
-    semver "^6.3.0"
-    string.prototype.matchall "^4.0.6"
-
 eslint-scope@5.1.1, eslint-scope@^5.0.0, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -9925,7 +9715,7 @@ estraverse@^4.1.1, estraverse@^4.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
-estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+estraverse@^5.1.0, estraverse@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
@@ -11675,7 +11465,7 @@ hoist-non-react-statics@^2.5.0:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -12004,11 +11794,6 @@ husky@^4.2.5:
     slash "^3.0.0"
     which-pm-runs "^1.0.0"
 
-hyphenate-style-name@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
-  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
-
 iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -12442,7 +12227,7 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-core-module@^2.1.0, is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.8.1:
+is-core-module@^2.1.0, is-core-module@^2.5.0, is-core-module@^2.8.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
   integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
@@ -12564,11 +12349,6 @@ is-hexadecimal@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
-is-in-browser@^1.0.2, is-in-browser@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
-  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
-
 is-installed-globally@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
@@ -13252,27 +13032,6 @@ jest-haste-map@^25.5.1:
   optionalDependencies:
     fsevents "^2.1.2"
 
-jest-haste-map@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
-  integrity sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@types/graceful-fs" "^4.1.2"
-    "@types/node" "*"
-    anymatch "^3.0.3"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.4"
-    jest-regex-util "^26.0.0"
-    jest-serializer "^26.6.2"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
-    micromatch "^4.0.2"
-    sane "^4.0.3"
-    walker "^1.0.7"
-  optionalDependencies:
-    fsevents "^2.1.2"
-
 jest-haste-map@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.5.1.tgz#9fd8bd7e7b4fa502d9c6164c5640512b4e811e7f"
@@ -13439,11 +13198,6 @@ jest-regex-util@^25.2.6:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.2.6.tgz#d847d38ba15d2118d3b06390056028d0f2fd3964"
   integrity sha512-KQqf7a0NrtCkYmZZzodPftn7fL1cq3GQAFVMn5Hg8uKx/fIenLEobNanUxb7abQ1sjADHBseG/2FGpsv/wr+Qw==
 
-jest-regex-util@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
-  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
-
 jest-regex-util@^27.0.6, jest-regex-util@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
@@ -13617,14 +13371,6 @@ jest-serializer@^25.5.0:
   dependencies:
     graceful-fs "^4.2.4"
 
-jest-serializer@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
-  integrity sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==
-  dependencies:
-    "@types/node" "*"
-    graceful-fs "^4.2.4"
-
 jest-serializer@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.5.1.tgz#81438410a30ea66fd57ff730835123dea1fb1f64"
@@ -13693,18 +13439,6 @@ jest-util@^25.5.0:
     is-ci "^2.0.0"
     make-dir "^3.0.0"
 
-jest-util@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
-  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    is-ci "^2.0.0"
-    micromatch "^4.0.2"
-
 jest-util@^27.0.0, jest-util@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.5.1.tgz#3ba9771e8e31a0b85da48fe0b0891fb86c01c2f9"
@@ -13774,7 +13508,7 @@ jest-worker@^25.5.0:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jest-worker@^26.2.1, jest-worker@^26.6.2:
+jest-worker@^26.2.1:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
   integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
@@ -14053,101 +13787,6 @@ jsprim@^1.2.2:
     json-schema "0.4.0"
     verror "1.10.0"
 
-jss-camel-case@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44"
-  integrity sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==
-  dependencies:
-    hyphenate-style-name "^1.0.2"
-
-jss-compose@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-5.0.0.tgz#ce01b2e4521d65c37ea42cf49116e5f7ab596484"
-  integrity sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==
-  dependencies:
-    warning "^3.0.0"
-
-jss-default-unit@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6"
-  integrity sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg==
-
-jss-expand@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.3.0.tgz#02be076efe650125c842f5bb6fb68786fe441ed6"
-  integrity sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg==
-
-jss-extend@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.2.0.tgz#4af09d0b72fb98ee229970f8ca852fec1ca2a8dc"
-  integrity sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==
-  dependencies:
-    warning "^3.0.0"
-
-jss-global@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2"
-  integrity sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q==
-
-jss-nested@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-6.0.1.tgz#ef992b79d6e8f63d939c4397b9d99b5cbbe824ca"
-  integrity sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==
-  dependencies:
-    warning "^3.0.0"
-
-jss-preset-default@^4.3.0, jss-preset-default@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.5.0.tgz#d3a457012ccd7a551312014e394c23c4b301cadd"
-  integrity sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==
-  dependencies:
-    jss-camel-case "^6.1.0"
-    jss-compose "^5.0.0"
-    jss-default-unit "^8.0.2"
-    jss-expand "^5.3.0"
-    jss-extend "^6.2.0"
-    jss-global "^3.0.0"
-    jss-nested "^6.0.1"
-    jss-props-sort "^6.0.0"
-    jss-template "^1.0.1"
-    jss-vendor-prefixer "^7.0.0"
-
-jss-props-sort@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"
-  integrity sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g==
-
-jss-template@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a"
-  integrity sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==
-  dependencies:
-    warning "^3.0.0"
-
-jss-vendor-prefixer@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71"
-  integrity sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==
-  dependencies:
-    css-vendor "^0.3.8"
-
-jss@^9.8.0, jss@^9.8.7:
-  version "9.8.7"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05"
-  integrity sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==
-  dependencies:
-    is-in-browser "^1.1.3"
-    symbol-observable "^1.1.0"
-    warning "^3.0.0"
-
-"jsx-ast-utils@^2.4.1 || ^3.0.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz#e624f259143b9062c92b6413ff92a164c80d3ccb"
-  integrity sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==
-  dependencies:
-    array-includes "^3.1.4"
-    object.assign "^4.1.2"
-
 jszip@^3.1.3:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.9.1.tgz#784e87f328450d1e8151003a9c67733e2b901051"
@@ -14226,18 +13865,6 @@ karma-sourcemap-loader@^0.3.7:
   dependencies:
     graceful-fs "^4.1.2"
 
-karma-webpack@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-4.0.2.tgz#23219bd95bdda853e3073d3874d34447c77bced0"
-  integrity sha512-970/okAsdUOmiMOCY8sb17A2I8neS25Ad9uhyK3GHgmRSIFJbDcNEFE8dqqUhNe9OHiCC9k3DMrSmtd/0ymP1A==
-  dependencies:
-    clone-deep "^4.0.1"
-    loader-utils "^1.1.0"
-    neo-async "^2.6.1"
-    schema-utils "^1.0.0"
-    source-map "^0.7.3"
-    webpack-dev-middleware "^3.7.0"
-
 karma-webpack@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-5.0.0.tgz#2a2c7b80163fe7ffd1010f83f5507f95ef39f840"
@@ -14570,11 +14197,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
-  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
-
 lodash-es@4.17.21, lodash-es@^4.2.1:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
@@ -16016,11 +15638,6 @@ moment-mini@^2.24.0:
   resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
   integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
 
-monaco-editor@^0.21.2:
-  version "0.21.3"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.21.3.tgz#3381b66614b64d1c5e3b77dd5564ad496d1b4e5d"
-  integrity sha512-9N7wATLpi+googstvtm6IKg97vPQ77FDYEpkow5tLriM/VJ0DaTRyUP4UVzcoH7KlPDX+e/rE7/imcOUeGkT6g==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -16617,24 +16234,6 @@ object.assign@^4.1.0, object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.entries@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
-  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
-object.fromentries@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
-  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
 object.getownpropertydescriptors@^2.0.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.3.tgz#b223cf38e17fefb97a63c10c91df72ccb386df9e"
@@ -16644,14 +16243,6 @@ object.getownpropertydescriptors@^2.0.3:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-object.hasown@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.1.tgz#ad1eecc60d03f49460600430d97f23882cf592a3"
-  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
-  dependencies:
-    define-properties "^1.1.4"
-    es-abstract "^1.19.5"
-
 object.pick@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
@@ -17944,7 +17535,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -18149,11 +17740,6 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
-raf-throttle@^2.0.3:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/raf-throttle/-/raf-throttle-2.0.5.tgz#8a466308a0ad7d98ec9b5ac59109515efb765908"
-  integrity sha512-0cRR3glc9bvdTW+mgw/DoSXkK7bnLZlWC+RtD3mubJhDSWKjPO5o2j/i7nOvIfmvAKgRtKPSwQcPI6MvYeDeYw==
-
 ramda@^0.27.1:
   version "0.27.2"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.2.tgz#84463226f7f36dc33592f6f4ed6374c48306c3f1"
@@ -18252,17 +17838,6 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dnd@^9.0.0:
-  version "9.5.1"
-  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-9.5.1.tgz#907e55c791d6c50cbed1a4021c14b989b86ac467"
-  integrity sha512-j2MvziPNLsxXkb3kIJzLvvOv/TQ4sysp6U4CmxAXd4C884dXm/9UGdB7K1wkTW3ZxVpI1K7XhKbX0JgNlPfLcA==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.1"
-    "@types/shallowequal" "^1.1.1"
-    dnd-core "^9.5.1"
-    hoist-non-react-statics "^3.3.0"
-    shallowequal "^1.1.0"
-
 react-dom@^16.12.0, react-dom@^16.3.0, react-dom@^16.9.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
@@ -18402,7 +17977,7 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react@^16.12.0, react@^16.3.0, react@^16.8.0, react@^16.9.0:
+react@^16.12.0, react@^16.3.0, react@^16.9.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
   integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
@@ -18650,13 +18225,6 @@ redux@^3.6.0:
     loose-envify "^1.1.0"
     symbol-observable "^1.0.3"
 
-redux@^4.0.4:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
-  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
@@ -19083,14 +18651,6 @@ resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.14
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.3:
-  version "2.0.0-next.3"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
-  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
-  dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
-
 resolve@~1.19.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
@@ -20726,7 +20286,7 @@ svgo@^2.5.0, svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
-symbol-observable@^1.0.3, symbol-observable@^1.1.0:
+symbol-observable@^1.0.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
@@ -22017,7 +21577,7 @@ vscode-uri@^2.1.2:
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c"
   integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==
 
-vscode-web-custom-data@^0.3.1, vscode-web-custom-data@^0.3.5:
+vscode-web-custom-data@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/vscode-web-custom-data/-/vscode-web-custom-data-0.3.6.tgz#7ff374bd39ee4a7c05c77c997d9410520e1d02bc"
   integrity sha512-9r2DOv4YMXL/WBTBB6zxde93hmg6AM7thr7GMR6c5LvPxXe/lwD8gsrJGe0tha4CUvoz86ElUieThGVpM+4PLg==
@@ -22063,13 +21623,6 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.12"
 
-warning@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
-  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
-  dependencies:
-    loose-envify "^1.0.0"
-
 warning@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
@@ -22211,7 +21764,7 @@ webpack-cli@^4.6.0, webpack-cli@^4.9.2:
     rechoir "^0.7.0"
     webpack-merge "^5.7.3"
 
-webpack-dev-middleware@^3.7.0, webpack-dev-middleware@^3.7.2:
+webpack-dev-middleware@^3.7.2:
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz#0639372b143262e2b84ab95d3b91a7597061c2c5"
   integrity sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==

From f610dedd65b1f7e9f5d49805c1d26612590249ec Mon Sep 17 00:00:00 2001
From: Rob Eisenberg <rob@bluespire.com>
Date: Tue, 31 May 2022 13:10:28 -0400
Subject: [PATCH 131/135] fix: post rebase fixes

---
 .../fast-element/docs/api-report.md           |   4 +-
 .../src/observation/notifier.spec.ts          |  20 -
 .../fast-element/src/templating/children.ts   |  10 +-
 .../src/toolbar/toolbar.spec.ts               |   8 +-
 .../src/toolbar/toolbar.template.ts           |   4 +-
 sites/site-utilities/package.json             |   2 +-
 yarn.lock                                     | 716 +++++++++++++++++-
 7 files changed, 704 insertions(+), 60 deletions(-)

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
index 51d24a2bbd5..b296dfbcca8 100644
--- a/packages/web-components/fast-element/docs/api-report.md
+++ b/packages/web-components/fast-element/docs/api-report.md
@@ -181,7 +181,7 @@ export interface ChildListDirectiveOptions<T = any> extends NodeBehaviorOptions<
 }
 
 // @public
-export function children<T = any>(propertyOrOptions: (keyof T & string) | ChildListDirectiveOptions<keyof T & string>): CaptureType<T>;
+export function children<T = any>(propertyOrOptions: (keyof T & string) | ChildrenDirectiveOptions<keyof T & string>): CaptureType<T>;
 
 // @public
 export class ChildrenDirective extends NodeObservationDirective<ChildrenDirectiveOptions> {
@@ -824,7 +824,7 @@ export class SubscriberSet implements Notifier {
 }
 
 // @public
-export interface SubtreeDirectiveOptions<T = any> extends Omit<NodeBehaviorOptions<T>, "filter">, Omit<MutationObserverInit, "subtree" | "childList"> {
+export interface SubtreeDirectiveOptions<T = any> extends NodeBehaviorOptions<T>, Omit<MutationObserverInit, "subtree" | "childList"> {
     selector: string;
     subtree: boolean;
 }
diff --git a/packages/web-components/fast-element/src/observation/notifier.spec.ts b/packages/web-components/fast-element/src/observation/notifier.spec.ts
index 9aa86935820..e2d12a9122f 100644
--- a/packages/web-components/fast-element/src/observation/notifier.spec.ts
+++ b/packages/web-components/fast-element/src/observation/notifier.spec.ts
@@ -249,23 +249,3 @@ describe(`A PropertyChangeNotifier`, () => {
         });
     });
 });
-
-describe(`An array observer`, () => {
-    it("should not deliver splices for changes prior to subscription", async () => {
-        enableArrayObservation();
-        const array = [1,2,3,4,5];
-        const observer = Observable.getNotifier(array);
-        let wasCalled = false;
-
-        array.push(6);
-        observer.subscribe({
-            handleChange() {
-                wasCalled = true;
-            }
-        });
-
-        await DOM.nextUpdate();
-
-        expect(wasCalled).to.be.false;
-    })
-});
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index 1e251570a2d..ec1760bc1a3 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -16,7 +16,7 @@ export interface ChildListDirectiveOptions<T = any>
  * @public
  */
 export interface SubtreeDirectiveOptions<T = any>
-    extends Omit<NodeBehaviorOptions<T>, "filter">,
+    extends NodeBehaviorOptions<T>,
         Omit<MutationObserverInit, "subtree" | "childList"> {
     /**
      * Indicates that child subtrees should be observed for changes.
@@ -83,7 +83,7 @@ export class ChildrenDirective extends NodeObservationDirective<
      * @param target - The target to get the node to.
      */
     getNodes(target: Element): Node[] {
-        if ("subtree" in this.options) {
+        if ("selector" in this.options) {
             return Array.from(target.querySelectorAll(this.options.selector));
         }
 
@@ -105,7 +105,7 @@ HTMLDirective.define(ChildrenDirective);
  * @public
  */
 export function children<T = any>(
-    propertyOrOptions: (keyof T & string) | ChildListDirectiveOptions<keyof T & string>
+    propertyOrOptions: (keyof T & string) | ChildrenDirectiveOptions<keyof T & string>
 ): CaptureType<T> {
     if (isString(propertyOrOptions)) {
         propertyOrOptions = {
@@ -113,7 +113,5 @@ export function children<T = any>(
         };
     }
 
-    return new ChildrenDirective(
-        propertyOrOptions as ChildListDirectiveOptions<keyof T & string>
-    );
+    return new ChildrenDirective(propertyOrOptions);
 }
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
index af47815aec4..af1300f8a30 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.spec.ts
@@ -125,7 +125,7 @@ describe("Toolbar", () => {
     await connect();
 
     control1.disabled = true;
-    await DOM.nextUpdate();
+    await Updates.next();
 
     element.focus();
 
@@ -161,7 +161,7 @@ describe("Toolbar", () => {
     await connect();
 
     control1.hidden = true;
-    await DOM.nextUpdate();
+    await Updates.next();
 
     element.focus();
 
@@ -247,7 +247,7 @@ describe("Toolbar", () => {
     expect(document.activeElement).to.equal(control2);
 
     startButton.disabled = false;
-    await DOM.nextUpdate();
+    await Updates.next();
 
     pressRightArrowKey(element);
 
@@ -270,7 +270,7 @@ describe("Toolbar", () => {
     expect(document.activeElement).to.equal(control1);
 
     control1.disabled = true;
-    await DOM.nextUpdate();
+    await Updates.next();
 
     // re-focus the element because focus is lost when control1 became disabled
     element.focus();
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts
index 85fee48580c..1f11dc4436f 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts
@@ -12,7 +12,7 @@ import type { Toolbar, ToolbarOptions } from "./toolbar.js";
 export const toolbarTemplate: FoundationElementTemplate<
     ViewTemplate<Toolbar>,
     ToolbarOptions
-> = (context, definition) => html`
+> = (context, definition) => html<Toolbar>`
     <template
         aria-label="${x => x.ariaLabel}"
         aria-labelledby="${x => x.ariaLabelledby}"
@@ -25,7 +25,7 @@ export const toolbarTemplate: FoundationElementTemplate<
         ${children({
             property: "childItems",
             attributeFilter: ["disabled", "hidden"],
-            filter: elements(),
+            selector: "*",
             subtree: true,
         })}
     >
diff --git a/sites/site-utilities/package.json b/sites/site-utilities/package.json
index 64b151b7b11..c79ace0ce5e 100644
--- a/sites/site-utilities/package.json
+++ b/sites/site-utilities/package.json
@@ -32,6 +32,6 @@
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@microsoft/fast-foundation": "^2.46.9",
+    "@microsoft/fast-foundation": "^2.46.9"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 07ac8d045fb..f2bfa4b7ead 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -181,6 +181,27 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@7.16.12":
+  version "7.16.12"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.12.tgz#5edc53c1b71e54881315923ae2aedea2522bb784"
+  integrity sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.16.8"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helpers" "^7.16.7"
+    "@babel/parser" "^7.16.12"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.10"
+    "@babel/types" "^7.16.8"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+    source-map "^0.5.0"
+
 "@babel/core@^7.1.0", "@babel/core@^7.12.13", "@babel/core@^7.12.3", "@babel/core@^7.15.5", "@babel/core@^7.17.10", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.8.0":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.10.tgz#74ef0fbf56b7dfc3f198fc2d927f4f03e12f4b05"
@@ -202,6 +223,27 @@
     json5 "^2.2.1"
     semver "^6.3.0"
 
+"@babel/core@^7.11.1":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.2.tgz#87b2fcd7cce9becaa7f5acebdc4f09f3dd19d876"
+  integrity sha512-A8pri1YJiC5UnkdrWcmfZTJTV85b4UXTAfImGmCfYmax4TR9Cw8sDS0MOk++Gp2mE/BefVJ5nwy5yzqNJbP/DQ==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.18.2"
+    "@babel/helper-compilation-targets" "^7.18.2"
+    "@babel/helper-module-transforms" "^7.18.0"
+    "@babel/helpers" "^7.18.2"
+    "@babel/parser" "^7.18.0"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.18.2"
+    "@babel/types" "^7.18.2"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
 "@babel/generator@^7.10.3", "@babel/generator@^7.12.5", "@babel/generator@^7.17.10", "@babel/generator@^7.7.2":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.10.tgz#c281fa35b0c349bbe9d02916f4ae08fc85ed7189"
@@ -211,6 +253,15 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.16.8", "@babel/generator@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.2.tgz#33873d6f89b21efe2da63fe554460f3df1c5880d"
+  integrity sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==
+  dependencies:
+    "@babel/types" "^7.18.2"
+    "@jridgewell/gen-mapping" "^0.3.0"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
@@ -236,6 +287,16 @@
     browserslist "^4.20.2"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.2.tgz#67a85a10cbd5fc7f1457fec2e7f45441dc6c754b"
+  integrity sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ==
+  dependencies:
+    "@babel/compat-data" "^7.17.10"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz#71835d7fb9f38bd9f1378e40a4c0902fdc2ea49d"
@@ -249,6 +310,19 @@
     "@babel/helper-replace-supers" "^7.16.7"
     "@babel/helper-split-export-declaration" "^7.16.7"
 
+"@babel/helper-create-class-features-plugin@^7.17.12", "@babel/helper-create-class-features-plugin@^7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.0.tgz#fac430912606331cb075ea8d82f9a4c145a4da19"
+  integrity sha512-Kh8zTGR9de3J63e5nS0rQUdRs/kbtwoeQQ0sriS0lItjC96u8XXZN6lKpuyWd2coKSU13py/y+LTmThLuVX0Pg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-member-expression-to-functions" "^7.17.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+
 "@babel/helper-create-regexp-features-plugin@^7.16.7", "@babel/helper-create-regexp-features-plugin@^7.17.0":
   version "7.17.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1"
@@ -257,6 +331,14 @@
     "@babel/helper-annotate-as-pure" "^7.16.7"
     regexpu-core "^5.0.1"
 
+"@babel/helper-create-regexp-features-plugin@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.12.tgz#bb37ca467f9694bbe55b884ae7a5cc1e0084e4fd"
+  integrity sha512-b2aZrV4zvutr9AIa6/gA3wsZKRwTKYoDxYiFKcESS3Ug2GTXzwBEvMuuFLhCQpEnRXs1zng4ISAXSUxxKBIcxw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    regexpu-core "^5.0.1"
+
 "@babel/helper-define-polyfill-provider@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665"
@@ -278,6 +360,11 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-environment-visitor@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz#8a6d2dedb53f6bf248e31b4baf38739ee4a637bd"
+  integrity sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==
+
 "@babel/helper-explode-assignable-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
@@ -328,6 +415,20 @@
     "@babel/traverse" "^7.17.3"
     "@babel/types" "^7.17.0"
 
+"@babel/helper-module-transforms@^7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.0.tgz#baf05dec7a5875fb9235bd34ca18bad4e21221cd"
+  integrity sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.17.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.18.0"
+    "@babel/types" "^7.18.0"
+
 "@babel/helper-optimise-call-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
@@ -345,6 +446,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
+"@babel/helper-plugin-utils@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
+  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
+
 "@babel/helper-remap-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
@@ -365,6 +471,17 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/helper-replace-supers@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.18.2.tgz#41fdfcc9abaf900e18ba6e5931816d9062a7b2e0"
+  integrity sha512-XzAIyxx+vFnrOxiQrToSUOzUOn0e1J2Li40ntddek1Y69AXUTXoDJ40/D5RdjFu7s7qHiaeoTiempZcbuVXh2Q==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.2"
+    "@babel/helper-member-expression-to-functions" "^7.17.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/traverse" "^7.18.2"
+    "@babel/types" "^7.18.2"
+
 "@babel/helper-simple-access@^7.16.7", "@babel/helper-simple-access@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
@@ -372,6 +489,13 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
+"@babel/helper-simple-access@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.2.tgz#4dc473c2169ac3a1c9f4a51cfcd091d1c36fcff9"
+  integrity sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ==
+  dependencies:
+    "@babel/types" "^7.18.2"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
@@ -415,6 +539,15 @@
     "@babel/traverse" "^7.17.9"
     "@babel/types" "^7.17.0"
 
+"@babel/helpers@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.2.tgz#970d74f0deadc3f5a938bfa250738eb4ac889384"
+  integrity sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.18.2"
+    "@babel/types" "^7.18.2"
+
 "@babel/highlight@^7.16.7":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
@@ -429,6 +562,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78"
   integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==
 
+"@babel/parser@^7.16.12", "@babel/parser@^7.18.0":
+  version "7.18.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.4.tgz#6774231779dd700e0af29f6ad8d479582d7ce5ef"
+  integrity sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
@@ -436,6 +574,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.17.12.tgz#1dca338caaefca368639c9ffb095afbd4d420b1e"
+  integrity sha512-xCJQXl4EeQ3J9C4yOmpTrtVGmzpm2iSzyxbkZHw7UCnZBftHpF/hpII80uWVyVrc40ytIClHjgWGTG1g/yB+aw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz#cc001234dfc139ac45f6bcf801866198c8c72ff9"
@@ -445,6 +590,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
     "@babel/plugin-proposal-optional-chaining" "^7.16.7"
 
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.17.12.tgz#0d498ec8f0374b1e2eb54b9cb2c4c78714c77753"
+  integrity sha512-/vt0hpIw0x4b6BLKUkwlvEoiGZYYLNZ96CzyHYPbtG2jZGz6LBe7/V+drYrc/d+ovrF9NBi0pmtvmNb/FsWtRQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.17.12"
+
 "@babel/plugin-proposal-async-generator-functions@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz#3bdd1ebbe620804ea9416706cd67d60787504bc8"
@@ -454,6 +608,15 @@
     "@babel/helper-remap-async-to-generator" "^7.16.8"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
+"@babel/plugin-proposal-async-generator-functions@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.17.12.tgz#094a417e31ce7e692d84bab06c8e2a607cbeef03"
+  integrity sha512-RWVvqD1ooLKP6IqWTA5GyFVX2isGEgC5iFxKzfYOIy/QEFdxYyCybBDtIGjipHpb9bDWHzcqGqFakf+mVmBTdQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-remap-async-to-generator" "^7.16.8"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
 "@babel/plugin-proposal-class-properties@7.16.7", "@babel/plugin-proposal-class-properties@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
@@ -462,6 +625,14 @@
     "@babel/helper-create-class-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-proposal-class-properties@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.17.12.tgz#84f65c0cc247d46f40a6da99aadd6438315d80a4"
+  integrity sha512-U0mI9q8pW5Q9EaTHFPwSVusPMV/DV9Mm8p7csqROFLtIE9rBF5piLqyrBGigftALrBcsBGu4m38JneAe7ZDLXw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-proposal-class-static-block@^7.17.6":
   version "7.17.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz#164e8fd25f0d80fa48c5a4d1438a6629325ad83c"
@@ -471,6 +642,15 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
+"@babel/plugin-proposal-class-static-block@^7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.0.tgz#7d02253156e3c3793bdb9f2faac3a1c05f0ba710"
+  integrity sha512-t+8LsRMMDE74c6sV7KShIw13sqbqd58tlqNrsWoWBTIMw7SVQ0cZ905wLNS/FBCy/3PyooRHLFFlfrUNyyz5lA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.0"
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
 "@babel/plugin-proposal-dynamic-import@7.16.7", "@babel/plugin-proposal-dynamic-import@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2"
@@ -487,6 +667,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
+"@babel/plugin-proposal-export-namespace-from@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.17.12.tgz#b22864ccd662db9606edb2287ea5fd1709f05378"
+  integrity sha512-j7Ye5EWdwoXOpRmo5QmRyHPsDIe6+u70ZYZrd7uz+ebPYFKfRcLcNu3Ro0vOlJ5zuv8rU7xa+GttNiRzX56snQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
 "@babel/plugin-proposal-json-strings@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz#9732cb1d17d9a2626a08c5be25186c195b6fa6e8"
@@ -495,6 +683,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
+"@babel/plugin-proposal-json-strings@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.17.12.tgz#f4642951792437233216d8c1af370bb0fbff4664"
+  integrity sha512-rKJ+rKBoXwLnIn7n6o6fulViHMrOThz99ybH+hKHcOZbnN14VuMnH9fo2eHE69C8pO4uX1Q7t2HYYIDmv8VYkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
 "@babel/plugin-proposal-logical-assignment-operators@7.16.7", "@babel/plugin-proposal-logical-assignment-operators@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz#be23c0ba74deec1922e639832904be0bea73cdea"
@@ -503,6 +699,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
+"@babel/plugin-proposal-logical-assignment-operators@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.17.12.tgz#c64a1bcb2b0a6d0ed2ff674fd120f90ee4b88a23"
+  integrity sha512-EqFo2s1Z5yy+JeJu7SFfbIUtToJTVlC61/C7WLKDntSw4Sz6JNAIfL7zQ74VvirxpjB5kz/kIx0gCcb+5OEo2Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
 "@babel/plugin-proposal-nullish-coalescing-operator@7.16.7", "@babel/plugin-proposal-nullish-coalescing-operator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz#141fc20b6857e59459d430c850a0011e36561d99"
@@ -511,6 +715,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.17.12.tgz#1e93079bbc2cbc756f6db6a1925157c4a92b94be"
+  integrity sha512-ws/g3FSGVzv+VH86+QvgtuJL/kR67xaEIF2x0iPqdDfYW6ra6JF3lKVBkWynRLcNtIC1oCTfDRVxmm2mKzy+ag==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
 "@babel/plugin-proposal-numeric-separator@7.16.7", "@babel/plugin-proposal-numeric-separator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz#d6b69f4af63fb38b6ca2558442a7fb191236eba9"
@@ -539,6 +751,17 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.16.7"
 
+"@babel/plugin-proposal-object-rest-spread@^7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.0.tgz#79f2390c892ba2a68ec112eb0d895cfbd11155e8"
+  integrity sha512-nbTv371eTrFabDfHLElkn9oyf9VG+VKK6WMzhY2o4eHKaG19BToD9947zzGMO6I/Irstx9d8CwX6njPNIAR/yw==
+  dependencies:
+    "@babel/compat-data" "^7.17.10"
+    "@babel/helper-compilation-targets" "^7.17.10"
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.17.12"
+
 "@babel/plugin-proposal-optional-catch-binding@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz#c623a430674ffc4ab732fd0a0ae7722b67cb74cf"
@@ -556,6 +779,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
+"@babel/plugin-proposal-optional-chaining@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.17.12.tgz#f96949e9bacace3a9066323a5cf90cfb9de67174"
+  integrity sha512-7wigcOs/Z4YWlK7xxjkvaIw84vGhDv/P1dFGQap0nHkc8gFKY/r+hXc8Qzf5k1gY7CvGIcHqAnOagVKJJ1wVOQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
 "@babel/plugin-proposal-private-methods@7.16.11", "@babel/plugin-proposal-private-methods@^7.16.11":
   version "7.16.11"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz#e8df108288555ff259f4527dbe84813aac3a1c50"
@@ -564,6 +796,14 @@
     "@babel/helper-create-class-features-plugin" "^7.16.10"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-proposal-private-methods@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.17.12.tgz#c2ca3a80beb7539289938da005ad525a038a819c"
+  integrity sha512-SllXoxo19HmxhDWm3luPz+cPhtoTSKLJE9PXshsfrOzBqs60QP0r8OaJItrPhAj0d7mZMnNF0Y1UUggCDgMz1A==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-proposal-private-property-in-object@7.16.7", "@babel/plugin-proposal-private-property-in-object@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz#b0b8cef543c2c3d57e59e2c611994861d46a3fce"
@@ -574,6 +814,16 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
+"@babel/plugin-proposal-private-property-in-object@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.17.12.tgz#b02efb7f106d544667d91ae97405a9fd8c93952d"
+  integrity sha512-/6BtVi57CJfrtDNKfK5b66ydK2J5pXUKBKSPD2G1whamMuEnZWgoOIfO8Vf9F/DoD4izBLD/Au4NMQfruzzykg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-create-class-features-plugin" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.16.7", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz#635d18eb10c6214210ffc5ff4932552de08188a2"
@@ -582,6 +832,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-proposal-unicode-property-regex@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.17.12.tgz#3dbd7a67bd7f94c8238b394da112d86aaf32ad4d"
+  integrity sha512-Wb9qLjXf3ZazqXA7IvI7ozqRIXIGPtSo+L5coFmEkhTQK18ao4UDDD0zdTGAarmbLj2urpRwrc6893cu5Bfh0A==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-syntax-async-generators@7.8.4", "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -624,6 +882,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-syntax-import-assertions@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.17.12.tgz#58096a92b11b2e4e54b24c6a0cc0e5e607abcedd"
+  integrity sha512-n/loy2zkq9ZEM8tEOwON9wTQSTNDTDEz6NujPtJGLU7qObzT1N4c4YZZf8E6ATB2AjNQg/Ib2AIpO03EZaCehw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
@@ -722,6 +987,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-arrow-functions@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.17.12.tgz#dddd783b473b1b1537ef46423e3944ff24898c45"
+  integrity sha512-PHln3CNi/49V+mza4xMwrg+WGYevSF1oaiXaC2EQfdp4HWlSjRsrDXWJiQBKpP7749u6vQ9mcry2uuFOv5CXvA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz#b83dff4b970cf41f1b819f8b49cc0cfbaa53a808"
@@ -731,6 +1003,15 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-remap-async-to-generator" "^7.16.8"
 
+"@babel/plugin-transform-async-to-generator@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.17.12.tgz#dbe5511e6b01eee1496c944e35cdfe3f58050832"
+  integrity sha512-J8dbrWIOO3orDzir57NRsjg4uxucvhby0L/KZuGsWDj0g7twWK3g7JhJhOrXtuXiw8MeiSdJ3E0OW9H8LYEzLQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-remap-async-to-generator" "^7.16.8"
+
 "@babel/plugin-transform-block-scoped-functions@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz#4d0d57d9632ef6062cdf354bb717102ee042a620"
@@ -745,6 +1026,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-block-scoping@^7.17.12":
+  version "7.18.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.4.tgz#7988627b3e9186a13e4d7735dc9c34a056613fb9"
+  integrity sha512-+Hq10ye+jlvLEogSOtq4mKvtk7qwcUQ1f0Mrueai866C82f844Yom2cttfJdMdqRLTxWpsbfbkIkOIfovyUQXw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-classes@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz#8f4b9562850cd973de3b498f1218796eb181ce00"
@@ -759,6 +1047,20 @@
     "@babel/helper-split-export-declaration" "^7.16.7"
     globals "^11.1.0"
 
+"@babel/plugin-transform-classes@^7.17.12":
+  version "7.18.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.4.tgz#51310b812a090b846c784e47087fa6457baef814"
+  integrity sha512-e42NSG2mlKWgxKUAD9EJJSkZxR67+wZqzNxLSpc51T8tRU5SLFHsPmgYR5yr7sdgX4u+iHA1C5VafJ6AyImV3A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.18.2"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-replace-supers" "^7.18.2"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-computed-properties@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz#66dee12e46f61d2aae7a73710f591eb3df616470"
@@ -766,6 +1068,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-computed-properties@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.17.12.tgz#bca616a83679698f3258e892ed422546e531387f"
+  integrity sha512-a7XINeplB5cQUWMg1E/GI1tFz3LfK021IjV1rj1ypE+R7jHm+pIHmHl25VNkZxtx9uuYp7ThGk8fur1HHG7PgQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-destructuring@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz#49dc2675a7afa9a5e4c6bdee636061136c3408d1"
@@ -773,6 +1082,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-destructuring@^7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.0.tgz#dc4f92587e291b4daa78aa20cc2d7a63aa11e858"
+  integrity sha512-Mo69klS79z6KEfrLg/1WkmVnB8javh75HX4pi2btjvlIoasuxilEyjtsQW6XPrubNd7AQy0MMaNIaQE4e7+PQw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-dotall-regex@^7.16.7", "@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241"
@@ -788,6 +1104,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-duplicate-keys@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.17.12.tgz#a09aa709a3310013f8e48e0e23bc7ace0f21477c"
+  integrity sha512-EA5eYFUG6xeerdabina/xIoB95jJ17mAkR8ivx6ZSu9frKShBjpOGZPn511MTDTkiCO+zXnzNczvUM69YSf3Zw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-exponentiation-operator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz#efa9862ef97e9e9e5f653f6ddc7b665e8536fe9b"
@@ -803,6 +1126,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-for-of@^7.18.1":
+  version "7.18.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.1.tgz#ed14b657e162b72afbbb2b4cdad277bf2bb32036"
+  integrity sha512-+TTB5XwvJ5hZbO8xvl2H4XaMDOAK57zF4miuC9qQJgysPNEAZZ9Z69rdF5LJkozGdZrjBIUAIyKUWRMmebI7vg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-function-name@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz#5ab34375c64d61d083d7d2f05c38d90b97ec65cf"
@@ -819,6 +1149,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-literals@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.17.12.tgz#97131fbc6bbb261487105b4b3edbf9ebf9c830ae"
+  integrity sha512-8iRkvaTjJciWycPIZ9k9duu663FT7VrBdNqNgxnVXEFwOIp55JWcZd23VBRySYbnS3PwQ3rGiabJBBBGj5APmQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-member-expression-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz#6e5dcf906ef8a098e630149d14c867dd28f92384"
@@ -835,6 +1172,15 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-amd@^7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.0.tgz#7ef1002e67e36da3155edc8bf1ac9398064c02ed"
+  integrity sha512-h8FjOlYmdZwl7Xm2Ug4iX2j7Qy63NANI+NQVWQzv6r25fqgg7k2dZl03p95kvqNclglHs4FZ+isv4p1uXMA+QA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.18.0"
+    "@babel/helper-plugin-utils" "^7.17.12"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-commonjs@7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.8.tgz#cdee19aae887b16b9d331009aa9a219af7c86afe"
@@ -855,6 +1201,16 @@
     "@babel/helper-simple-access" "^7.17.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-commonjs@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.2.tgz#1aa8efa2e2a6e818b6a7f2235fceaf09bdb31e9e"
+  integrity sha512-f5A865gFPAJAEE0K7F/+nm5CmAE3y8AWlMBG9unu5j9+tk50UQVK0QS8RNxSp7MJf0wh97uYyLWt3Zvu71zyOQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.18.0"
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-simple-access" "^7.18.2"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-systemjs@^7.17.8":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.17.8.tgz#81fd834024fae14ea78fbe34168b042f38703859"
@@ -866,6 +1222,17 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-systemjs@^7.18.0":
+  version "7.18.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.4.tgz#3d6fd9868c735cce8f38d6ae3a407fb7e61e6d46"
+  integrity sha512-lH2UaQaHVOAeYrUUuZ8i38o76J/FnO8vu21OE+tD1MyP9lxdZoSfz+pDbWkq46GogUrdrMz3tiz/FYGB+bVThg==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.18.0"
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-umd@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz#23dad479fa585283dbd22215bff12719171e7618"
@@ -874,6 +1241,14 @@
     "@babel/helper-module-transforms" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-modules-umd@^7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.0.tgz#56aac64a2c2a1922341129a4597d1fd5c3ff020f"
+  integrity sha512-d/zZ8I3BWli1tmROLxXLc9A6YXvGK8egMxHp+E/rRwMh1Kip0AP77VwZae3snEJ33iiWwvNv2+UIIhfalqhzZA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.18.0"
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.17.10":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.17.10.tgz#715dbcfafdb54ce8bccd3d12e8917296a4ba66a4"
@@ -881,6 +1256,14 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.17.0"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.17.12.tgz#9c4a5a5966e0434d515f2675c227fd8cc8606931"
+  integrity sha512-vWoWFM5CKaTeHrdUJ/3SIOTRV+MBVGybOC9mhJkaprGNt5demMymDW24yC74avb915/mIRe3TgNb/d8idvnCRA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-new-target@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz#9967d89a5c243818e0800fdad89db22c5f514244"
@@ -888,6 +1271,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-new-target@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.17.12.tgz#10842cd605a620944e81ea6060e9e65c265742e3"
+  integrity sha512-CaOtzk2fDYisbjAD4Sd1MTKGVIpRtx9bWLyj24Y/k6p4s4gQ3CqDGJauFJxt8M/LEx003d0i3klVqnN73qvK3w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-object-super@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz#ac359cf8d32cf4354d27a46867999490b6c32a94"
@@ -903,6 +1293,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-parameters@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.17.12.tgz#eb467cd9586ff5ff115a9880d6fdbd4a846b7766"
+  integrity sha512-6qW4rWo1cyCdq1FkYri7AHpauchbGLXpdwnYsfxFb+KtddHENfsY5JZb35xUwkK5opOLcJ3BNd2l7PhRYGlwIA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-property-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz#2dadac85155436f22c696c4827730e0fe1057a55"
@@ -957,6 +1354,14 @@
   dependencies:
     regenerator-transform "^0.15.0"
 
+"@babel/plugin-transform-regenerator@^7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.0.tgz#44274d655eb3f1af3f3a574ba819d3f48caf99d5"
+  integrity sha512-C8YdRw9uzx25HSIzwA7EM7YP0FhCe5wNvJbZzjVNHHPGVcDJ3Aie+qGYYdS1oVQgn+B3eAIJbWFLrJ4Jipv7nw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    regenerator-transform "^0.15.0"
+
 "@babel/plugin-transform-reserved-words@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz#1d798e078f7c5958eec952059c460b220a63f586"
@@ -964,6 +1369,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-reserved-words@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.17.12.tgz#7dbd349f3cdffba751e817cf40ca1386732f652f"
+  integrity sha512-1KYqwbJV3Co03NIi14uEHW8P50Md6KqFgt0FfpHdK6oyAHQVTosgPuPSiWud1HX0oYJ1hGRRlk0fP87jFpqXZA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-runtime@^7.17.10":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.10.tgz#b89d821c55d61b5e3d3c3d1d636d8d5a81040ae1"
@@ -991,6 +1403,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
 
+"@babel/plugin-transform-spread@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.17.12.tgz#c112cad3064299f03ea32afed1d659223935d1f5"
+  integrity sha512-9pgmuQAtFi3lpNUstvG9nGfk9DkrdmWNp9KeKPFmuZCpEnxRzYlS8JgwPjYj+1AWDOSvoGN0H30p1cBOmT/Svg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+
 "@babel/plugin-transform-sticky-regex@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz#c84741d4f4a38072b9a1e2e3fd56d359552e8660"
@@ -1005,6 +1425,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-template-literals@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.2.tgz#31ed6915721864847c48b656281d0098ea1add28"
+  integrity sha512-/cmuBVw9sZBGZVOMkpAEaVLwm4JmK2GZ1dFKOGGpMzEHWFmyZZ59lUU0PdRr8YNYeQdNzTDwuxP2X2gzydTc9g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-typeof-symbol@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz#9cdbe622582c21368bd482b660ba87d5545d4f7e"
@@ -1012,6 +1439,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-typeof-symbol@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.17.12.tgz#0f12f57ac35e98b35b4ed34829948d42bd0e6889"
+  integrity sha512-Q8y+Jp7ZdtSPXCThB6zjQ74N3lj0f6TDh1Hnf5B+sYlzQ8i5Pjp8gW0My79iekSpT4WnI06blqP6DT0OmaXXmw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-transform-typescript@^7.16.7":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz#591ce9b6b83504903fa9dd3652c357c2ba7a1ee0"
@@ -1036,6 +1470,87 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/preset-env@^7.11.0":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.18.2.tgz#f47d3000a098617926e674c945d95a28cb90977a"
+  integrity sha512-PfpdxotV6afmXMU47S08F9ZKIm2bJIQ0YbAAtDfIENX7G1NUAXigLREh69CWDjtgUy7dYn7bsMzkgdtAlmS68Q==
+  dependencies:
+    "@babel/compat-data" "^7.17.10"
+    "@babel/helper-compilation-targets" "^7.18.2"
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-validator-option" "^7.16.7"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.17.12"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.17.12"
+    "@babel/plugin-proposal-async-generator-functions" "^7.17.12"
+    "@babel/plugin-proposal-class-properties" "^7.17.12"
+    "@babel/plugin-proposal-class-static-block" "^7.18.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.16.7"
+    "@babel/plugin-proposal-export-namespace-from" "^7.17.12"
+    "@babel/plugin-proposal-json-strings" "^7.17.12"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.17.12"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.17.12"
+    "@babel/plugin-proposal-numeric-separator" "^7.16.7"
+    "@babel/plugin-proposal-object-rest-spread" "^7.18.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.16.7"
+    "@babel/plugin-proposal-optional-chaining" "^7.17.12"
+    "@babel/plugin-proposal-private-methods" "^7.17.12"
+    "@babel/plugin-proposal-private-property-in-object" "^7.17.12"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.17.12"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.17.12"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-transform-arrow-functions" "^7.17.12"
+    "@babel/plugin-transform-async-to-generator" "^7.17.12"
+    "@babel/plugin-transform-block-scoped-functions" "^7.16.7"
+    "@babel/plugin-transform-block-scoping" "^7.17.12"
+    "@babel/plugin-transform-classes" "^7.17.12"
+    "@babel/plugin-transform-computed-properties" "^7.17.12"
+    "@babel/plugin-transform-destructuring" "^7.18.0"
+    "@babel/plugin-transform-dotall-regex" "^7.16.7"
+    "@babel/plugin-transform-duplicate-keys" "^7.17.12"
+    "@babel/plugin-transform-exponentiation-operator" "^7.16.7"
+    "@babel/plugin-transform-for-of" "^7.18.1"
+    "@babel/plugin-transform-function-name" "^7.16.7"
+    "@babel/plugin-transform-literals" "^7.17.12"
+    "@babel/plugin-transform-member-expression-literals" "^7.16.7"
+    "@babel/plugin-transform-modules-amd" "^7.18.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.18.2"
+    "@babel/plugin-transform-modules-systemjs" "^7.18.0"
+    "@babel/plugin-transform-modules-umd" "^7.18.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.17.12"
+    "@babel/plugin-transform-new-target" "^7.17.12"
+    "@babel/plugin-transform-object-super" "^7.16.7"
+    "@babel/plugin-transform-parameters" "^7.17.12"
+    "@babel/plugin-transform-property-literals" "^7.16.7"
+    "@babel/plugin-transform-regenerator" "^7.18.0"
+    "@babel/plugin-transform-reserved-words" "^7.17.12"
+    "@babel/plugin-transform-shorthand-properties" "^7.16.7"
+    "@babel/plugin-transform-spread" "^7.17.12"
+    "@babel/plugin-transform-sticky-regex" "^7.16.7"
+    "@babel/plugin-transform-template-literals" "^7.18.2"
+    "@babel/plugin-transform-typeof-symbol" "^7.17.12"
+    "@babel/plugin-transform-unicode-escapes" "^7.16.7"
+    "@babel/plugin-transform-unicode-regex" "^7.16.7"
+    "@babel/preset-modules" "^0.1.5"
+    "@babel/types" "^7.18.2"
+    babel-plugin-polyfill-corejs2 "^0.3.0"
+    babel-plugin-polyfill-corejs3 "^0.5.0"
+    babel-plugin-polyfill-regenerator "^0.3.0"
+    core-js-compat "^3.22.1"
+    semver "^6.3.0"
+
 "@babel/preset-env@^7.12.13", "@babel/preset-env@^7.15.6", "@babel/preset-env@^7.17.10":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.17.10.tgz#a81b093669e3eb6541bb81a23173c5963c5de69c"
@@ -1156,13 +1671,20 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.17.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
   integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.17.9":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.12.7", "@babel/template@^7.16.7", "@babel/template@^7.3.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -1188,6 +1710,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.18.0", "@babel/traverse@^7.18.2":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.2.tgz#b77a52604b5cc836a9e1e08dca01cba67a12d2e8"
+  integrity sha512-9eNwoeovJ6KH9zcCNnENY7DMFwTU9JdGCFtqNLfUAqtUHRCOsTOqWoffosP8vKmNYeSBUv3yVJXjfd8ucwOjUA==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.18.2"
+    "@babel/helper-environment-visitor" "^7.18.2"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.18.0"
+    "@babel/types" "^7.18.2"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.7", "@babel/types@^7.15.6", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.17.10", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4"
@@ -1196,6 +1734,14 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.18.0", "@babel/types@^7.18.2":
+  version "7.18.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.4.tgz#27eae9b9fd18e9dccc3f9d6ad051336f307be354"
+  integrity sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -2446,6 +2992,15 @@
     "@jridgewell/set-array" "^1.0.0"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/gen-mapping@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz#cf92a983c83466b8c0ce9124fadeaf09f7c66ea9"
+  integrity sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
@@ -3259,7 +3814,7 @@
     "@microsoft/fast-web-utilities" "^5.4.1"
     tslib "^1.13.0"
 
-"@microsoft/fast-tooling@^0.37.7", "@microsoft/fast-tooling@^0.37.9":
+"@microsoft/fast-tooling@^0.37.7":
   version "0.37.9"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-tooling/-/fast-tooling-0.37.9.tgz#76454362f84e4ea82ec3f9f2aababae29c1b8936"
   integrity sha512-MGyrjs5d7GMuKM7/Cm8TcQT2FKWEMHaMxzGgUpDvLLoyWWM+Y2hqw0hW11NYg8l/+Q1LmiNZtvAJiAQGi/pIxQ==
@@ -3860,7 +4415,7 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@slorber/static-site-generator-webpack-plugin@^4.0.1":
+"@slorber/static-site-generator-webpack-plugin@^4.0.4":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@slorber/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-4.0.4.tgz#2bf4a2545e027830d2aa5eb950437c26a289b0f1"
   integrity sha512-FvMavoWEIePps6/JwGCOLYKCRhuwIHhMtmbKpBFgzNkxwpa/569LfTkrbRk1m1I3n+ezJK4on9E1A6cjuZmD9g==
@@ -7795,6 +8350,41 @@ cssnano-preset-advanced@^5.3.3:
     postcss-reduce-idents "^5.2.0"
     postcss-zindex "^5.1.0"
 
+cssnano-preset-default@^5.2.10:
+  version "5.2.10"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.10.tgz#6dfffe6cc3b13f3bb356a42c49a334a98700ef45"
+  integrity sha512-H8TJRhTjBKVOPltp9vr9El9I+IfYsOMhmXdK0LwdvwJcxYX9oWkY7ctacWusgPWAgQq1vt/WO8v+uqpfLnM7QA==
+  dependencies:
+    css-declaration-sorter "^6.2.2"
+    cssnano-utils "^3.1.0"
+    postcss-calc "^8.2.3"
+    postcss-colormin "^5.3.0"
+    postcss-convert-values "^5.1.2"
+    postcss-discard-comments "^5.1.2"
+    postcss-discard-duplicates "^5.1.0"
+    postcss-discard-empty "^5.1.1"
+    postcss-discard-overridden "^5.1.0"
+    postcss-merge-longhand "^5.1.5"
+    postcss-merge-rules "^5.1.2"
+    postcss-minify-font-values "^5.1.0"
+    postcss-minify-gradients "^5.1.1"
+    postcss-minify-params "^5.1.3"
+    postcss-minify-selectors "^5.2.1"
+    postcss-normalize-charset "^5.1.0"
+    postcss-normalize-display-values "^5.1.0"
+    postcss-normalize-positions "^5.1.0"
+    postcss-normalize-repeat-style "^5.1.0"
+    postcss-normalize-string "^5.1.0"
+    postcss-normalize-timing-functions "^5.1.0"
+    postcss-normalize-unicode "^5.1.0"
+    postcss-normalize-url "^5.1.0"
+    postcss-normalize-whitespace "^5.1.1"
+    postcss-ordered-values "^5.1.1"
+    postcss-reduce-initial "^5.1.0"
+    postcss-reduce-transforms "^5.1.0"
+    postcss-svgo "^5.1.0"
+    postcss-unique-selectors "^5.1.1"
+
 cssnano-preset-default@^5.2.7:
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.7.tgz#791e3603fb8f1b46717ac53b47e3c418e950f5f3"
@@ -7835,15 +8425,14 @@ cssnano-utils@^3.1.0:
   resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz#95684d08c91511edfc70d2636338ca37ef3a6861"
   integrity sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==
 
-cssnano@^4.1.10:
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.11.tgz#c7b5f5b81da269cb1fd982cb960c1200910c9a99"
-  integrity sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==
+cssnano@^5.0.2:
+  version "5.1.10"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.10.tgz#fc6ddd9a4d7d238f320634326ed814cf0abf6e1c"
+  integrity sha512-ACpnRgDg4m6CZD/+8SgnLcGCgy6DDGdkMbOawwdvVxNietTNLe/MtWcenp6qT0PRt5wzhGl6/cjMWCdhKXC9QA==
   dependencies:
-    cosmiconfig "^5.0.0"
-    cssnano-preset-default "^4.0.8"
-    is-resolvable "^1.0.0"
-    postcss "^7.0.0"
+    cssnano-preset-default "^5.2.10"
+    lilconfig "^2.0.3"
+    yaml "^1.10.2"
 
 cssnano@^5.0.6, cssnano@^5.1.7:
   version "5.1.7"
@@ -9254,7 +9843,7 @@ enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.1, enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^5.9.2, enhanced-resolve@^5.9.3:
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.9.2, enhanced-resolve@^5.9.3:
   version "5.9.3"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
   integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==
@@ -15746,7 +16335,7 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
-nanoid@3.1.20, nanoid@^3.1.31, nanoid@^3.3.3:
+nanoid@3.1.20, nanoid@^3.1.31, nanoid@^3.3.3, nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
@@ -17087,11 +17676,24 @@ postcss-convert-values@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
+postcss-convert-values@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.1.2.tgz#31586df4e184c2e8890e8b34a0b9355313f503ab"
+  integrity sha512-c6Hzc4GAv95B7suy4udszX9Zy4ETyMCgFPUDtWjdFTKH1SE9eFY/jEpHSwTH1QPuwxHpWslhckUQWbNRM4ho5g==
+  dependencies:
+    browserslist "^4.20.3"
+    postcss-value-parser "^4.2.0"
+
 postcss-discard-comments@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-5.1.1.tgz#e90019e1a0e5b99de05f63516ce640bd0df3d369"
   integrity sha512-5JscyFmvkUxz/5/+TB3QTTT9Gi9jHkcn8dcmmuN68JQcv3aQg4y88yEHHhwFB52l/NkaJ43O0dbksGMAo49nfQ==
 
+postcss-discard-comments@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz#8df5e81d2925af2780075840c1526f0660e53696"
+  integrity sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==
+
 postcss-discard-duplicates@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz#9eb4fe8456706a4eebd6d3b7b777d07bad03e848"
@@ -17150,6 +17752,14 @@ postcss-merge-longhand@^5.1.4:
     postcss-value-parser "^4.2.0"
     stylehacks "^5.1.0"
 
+postcss-merge-longhand@^5.1.5:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.5.tgz#b0e03bee3b964336f5f33c4fc8eacae608e91c05"
+  integrity sha512-NOG1grw9wIO+60arKa2YYsrbgvP6tp+jqc7+ZD5/MalIw234ooH2C6KlR6FEn4yle7GqZoBxSK1mLBE9KPur6w==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+    stylehacks "^5.1.0"
+
 postcss-merge-rules@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.1.tgz#d327b221cd07540bcc8d9ff84446d8b404d00162"
@@ -17160,6 +17770,16 @@ postcss-merge-rules@^5.1.1:
     cssnano-utils "^3.1.0"
     postcss-selector-parser "^6.0.5"
 
+postcss-merge-rules@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.2.tgz#7049a14d4211045412116d79b751def4484473a5"
+  integrity sha512-zKMUlnw+zYCWoPN6yhPjtcEdlJaMUZ0WyVcxTAmw3lkkN/NDMRkOkiuctQEoWAOvH7twaxUUdvBWl0d4+hifRQ==
+  dependencies:
+    browserslist "^4.16.6"
+    caniuse-api "^3.0.0"
+    cssnano-utils "^3.1.0"
+    postcss-selector-parser "^6.0.5"
+
 postcss-minify-font-values@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz#f1df0014a726083d260d3bd85d7385fb89d1f01b"
@@ -17185,6 +17805,15 @@ postcss-minify-params@^5.1.2:
     cssnano-utils "^3.1.0"
     postcss-value-parser "^4.2.0"
 
+postcss-minify-params@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-5.1.3.tgz#ac41a6465be2db735099bbd1798d85079a6dc1f9"
+  integrity sha512-bkzpWcjykkqIujNL+EVEPOlLYi/eZ050oImVtHU7b4lFS82jPnsCb44gvC6pxaNt38Els3jWYDHTjHKf0koTgg==
+  dependencies:
+    browserslist "^4.16.6"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
+
 postcss-minify-selectors@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.0.tgz#17c2be233e12b28ffa8a421a02fc8b839825536c"
@@ -17192,6 +17821,13 @@ postcss-minify-selectors@^5.2.0:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
+postcss-minify-selectors@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz#d4e7e6b46147b8117ea9325a915a801d5fe656c6"
+  integrity sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==
+  dependencies:
+    postcss-selector-parser "^6.0.5"
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
@@ -17353,13 +17989,14 @@ postcss-zindex@^5.1.0:
   resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-5.1.0.tgz#4a5c7e5ff1050bd4c01d95b1847dfdcc58a496ff"
   integrity sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A==
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
-  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+postcss@^8.2.1:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
   dependencies:
-    picocolors "^0.2.1"
-    source-map "^0.6.1"
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
 
 postcss@^8.2.15, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.13, postcss@^8.4.7:
   version "8.4.13"
@@ -17409,11 +18046,6 @@ prettier@2.0.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.2.tgz#1ba8f3eb92231e769b7fcd7cb73ae1b6b74ade08"
   integrity sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg==
 
-prettier@^1.15.3:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
-  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
-
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@@ -19530,7 +20162,7 @@ sockjs-client@^1.5.0:
     inherits "^2.0.4"
     url-parse "^1.5.10"
 
-sockjs@^0.3.21:
+sockjs@^0.3.21, sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
   integrity sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==
@@ -21859,6 +22491,40 @@ webpack-dev-server@^4.0.0-beta.1, webpack-dev-server@^4.8.1:
     webpack-dev-middleware "^5.3.1"
     ws "^8.4.2"
 
+webpack-dev-server@^4.9.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.9.1.tgz#184607b0287c791aeaa45e58e8fe75fcb4d7e2a8"
+  integrity sha512-CTMfu2UMdR/4OOZVHRpdy84pNopOuigVIsRbGX3LVDMWNP8EUgC5mUBMErbwBlHTEX99ejZJpVqrir6EXAEajA==
+  dependencies:
+    "@types/bonjour" "^3.5.9"
+    "@types/connect-history-api-fallback" "^1.3.5"
+    "@types/express" "^4.17.13"
+    "@types/serve-index" "^1.9.1"
+    "@types/sockjs" "^0.3.33"
+    "@types/ws" "^8.5.1"
+    ansi-html-community "^0.0.8"
+    bonjour-service "^1.0.11"
+    chokidar "^3.5.3"
+    colorette "^2.0.10"
+    compression "^1.7.4"
+    connect-history-api-fallback "^1.6.0"
+    default-gateway "^6.0.3"
+    express "^4.17.3"
+    graceful-fs "^4.2.6"
+    html-entities "^2.3.2"
+    http-proxy-middleware "^2.0.3"
+    ipaddr.js "^2.0.1"
+    open "^8.0.9"
+    p-retry "^4.5.0"
+    rimraf "^3.0.2"
+    schema-utils "^4.0.0"
+    selfsigned "^2.0.1"
+    serve-index "^1.9.1"
+    sockjs "^0.3.24"
+    spdy "^4.0.2"
+    webpack-dev-middleware "^5.3.1"
+    ws "^8.4.2"
+
 webpack-log@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"

From 9bfdbf5009b4b8fe5566e4b5a00a48c939e7bbb6 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Tue, 31 May 2022 13:11:06 -0700
Subject: [PATCH 132/135] fixing FE2 build breaks (#6044)

* add missing dependency to fast-animation

* adding missing dependency to fast-color-explorer

* update webpack in fast-animation

* Change files

* fix webpack config

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 ...-ec7f08d9-cc86-4982-a722-71e2d45d4ff2.json |   7 +
 .../utilities/fast-animation/package.json     |  31 +--
 .../fast-animation/webpack.config.js          |   7 +-
 sites/fast-color-explorer/package.json        |   1 +
 yarn.lock                                     | 205 ++++--------------
 5 files changed, 76 insertions(+), 175 deletions(-)
 create mode 100644 change/@microsoft-fast-animation-ec7f08d9-cc86-4982-a722-71e2d45d4ff2.json

diff --git a/change/@microsoft-fast-animation-ec7f08d9-cc86-4982-a722-71e2d45d4ff2.json b/change/@microsoft-fast-animation-ec7f08d9-cc86-4982-a722-71e2d45d4ff2.json
new file mode 100644
index 00000000000..0c4ecb2c7c2
--- /dev/null
+++ b/change/@microsoft-fast-animation-ec7f08d9-cc86-4982-a722-71e2d45d4ff2.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Updates webpack and installs missing dependency",
+  "packageName": "@microsoft/fast-animation",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/utilities/fast-animation/package.json b/packages/utilities/fast-animation/package.json
index c81eae6dc62..c587a392096 100644
--- a/packages/utilities/fast-animation/package.json
+++ b/packages/utilities/fast-animation/package.json
@@ -79,31 +79,32 @@
     "@types/react": "^16.3.0",
     "@types/react-dom": "^16.3.0",
     "@types/react-redux": "^4.4.47",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^5.2.6",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.1",
-    "eslint-loader": "^4.0.0",
-    "file-loader": "^3.0.1",
-    "fork-ts-checker-webpack-plugin": "^0.4.0",
-    "html-webpack-plugin": "^3.2.0",
+    "eslint-loader": "^4.0.2",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "html-webpack-plugin": "^5.5.0",
     "jest": "^27.0.0",
-    "mini-css-extract-plugin": "^1.6.1",
-    "postcss": "^8.3.5",
-    "postcss-loader": "^4.2.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^7.0.0",
     "prettier": "2.0.2",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
     "react-router": "^4.1.1",
-    "require-dir": "^0.3.2",
-    "style-loader": "^0.13.2",
+    "require-dir": "^1.2.0",
+    "style-loader": "^3.3.1",
     "ts-jest": "^27.0.0",
-    "ts-loader": "^8.0.0",
+    "ts-loader": "^9.3.0",
     "typescript": "^4.7.0",
-    "webpack": "^4.44.0",
+    "webpack": "^5.72.1",
     "webpack-bundle-analyzer": "^3.5.2",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.1"
   },
   "dependencies": {
     "@microsoft/fast-web-utilities": "^5.4.1"
diff --git a/packages/utilities/fast-animation/webpack.config.js b/packages/utilities/fast-animation/webpack.config.js
index d41d414f8f1..9eb2ce9cc4c 100644
--- a/packages/utilities/fast-animation/webpack.config.js
+++ b/packages/utilities/fast-animation/webpack.config.js
@@ -13,12 +13,13 @@ module.exports = (env, args) => {
         devServer: {
             compress: false,
             historyApiFallback: true,
-            disableHostCheck: true,
             open: true,
-            overlay: true,
             port: 9005,
+            client: {
+                overlay: true,
+            },
         },
-        devtool: isProduction ? "none" : "inline-source-map",
+        devtool: isProduction ? undefined : "inline-source-map",
         entry: appDir + "/app.tsx",
         mode: args.mode || "development",
         module: {
diff --git a/sites/fast-color-explorer/package.json b/sites/fast-color-explorer/package.json
index 2706f945727..9bf2674440f 100644
--- a/sites/fast-color-explorer/package.json
+++ b/sites/fast-color-explorer/package.json
@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "@fluentui/svg-icons": "^1.1.0",
+    "@microsoft/fast-tooling": "0.37.9",
     "@microsoft/fast-colors": "^5.3.0",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.10.2",
diff --git a/yarn.lock b/yarn.lock
index f2bfa4b7ead..b7fbdc04b23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3814,7 +3814,7 @@
     "@microsoft/fast-web-utilities" "^5.4.1"
     tslib "^1.13.0"
 
-"@microsoft/fast-tooling@^0.37.7":
+"@microsoft/fast-tooling@0.37.9", "@microsoft/fast-tooling@^0.37.7":
   version "0.37.9"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-tooling/-/fast-tooling-0.37.9.tgz#76454362f84e4ea82ec3f9f2aababae29c1b8936"
   integrity sha512-MGyrjs5d7GMuKM7/Cm8TcQT2FKWEMHaMxzGgUpDvLLoyWWM+Y2hqw0hW11NYg8l/+Q1LmiNZtvAJiAQGi/pIxQ==
@@ -6111,7 +6111,7 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^10.3.7, autoprefixer@^10.4.5:
+autoprefixer@^10.3.7, autoprefixer@^10.4.5, autoprefixer@^10.4.7:
   version "10.4.7"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.7.tgz#1db8d195f41a52ca5069b7593be167618edbbedf"
   integrity sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==
@@ -6140,7 +6140,7 @@ axios@^0.25.0:
   dependencies:
     follow-redirects "^1.14.7"
 
-babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
+babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
   integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
@@ -6191,7 +6191,7 @@ babel-jest@^27.5.1:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-loader@^8.2.2, babel-loader@^8.2.5:
+babel-loader@^8.2.5:
   version "8.2.5"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
   integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
@@ -6502,11 +6502,6 @@ bfj@^6.1.1:
     hoopy "^0.1.4"
     tryer "^1.0.1"
 
-big.js@^3.1.3:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
-  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -7359,7 +7354,7 @@ chokidar@3.5.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-chokidar@^2.0.4, chokidar@^2.1.8:
+chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
   integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
@@ -8262,22 +8257,6 @@ css-declaration-sorter@^6.2.2:
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz#bfd2f6f50002d6a3ae779a87d3a0c5d5b10e0f02"
   integrity sha512-Ufadglr88ZLsrvS11gjeu/40Lw74D9Am/Jpr3LlYm5Q4ZP5KdlUhG+6u2EjyXeZcxmZ2h1ebCKngDjolpeLHpg==
 
-css-loader@^5.2.6:
-  version "5.2.7"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.7.tgz#9b9f111edf6fb2be5dc62525644cbc9c232064ae"
-  integrity sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==
-  dependencies:
-    icss-utils "^5.1.0"
-    loader-utils "^2.0.0"
-    postcss "^8.2.15"
-    postcss-modules-extract-imports "^3.0.0"
-    postcss-modules-local-by-default "^4.0.0"
-    postcss-modules-scope "^3.0.0"
-    postcss-modules-values "^4.0.0"
-    postcss-value-parser "^4.1.0"
-    schema-utils "^3.0.0"
-    semver "^7.3.5"
-
 css-loader@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.1.tgz#e98106f154f6e1baf3fc3bc455cb9981c1d5fd2e"
@@ -9760,11 +9739,6 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-emojis-list@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
-  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
-
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
@@ -10072,7 +10046,7 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
-eslint-loader@^4.0.0:
+eslint-loader@^4.0.0, eslint-loader@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-4.0.2.tgz#386a1e21bcb613b3cf2d252a3b708023ccfb41ec"
   integrity sha512-EDpXor6lsjtTzZpLUn7KmXs02+nIjGcgees9BYjNkWra3jVq5vVa8IoCKgzT2M7dNNeoMBtaSG83Bd40N3poLw==
@@ -10820,14 +10794,6 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-file-loader@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
-  integrity sha512-4sNIOXgtH/9WZq4NvlfU3Opn5ynUsqBwSLyM+I7UOwdGigTBYfVVQEwe/msZNX/j4pCJTIM14Fsw66Svo1oVrw==
-  dependencies:
-    loader-utils "^1.0.2"
-    schema-utils "^1.0.0"
-
 file-loader@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
@@ -11084,20 +11050,6 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
-fork-ts-checker-webpack-plugin@^0.4.0:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-0.4.15.tgz#7cd9f94f3dd58cd1fe8f953f876e72090eda3f6d"
-  integrity sha512-qNYuygh2GxXehBvQZ5rI5YlQFn+7ZV6kmkyD9Sgs33dWl73NZdUOB5aCp8v0EXJn176AhPrZP8YCMT3h01fs+g==
-  dependencies:
-    babel-code-frame "^6.22.0"
-    chalk "^2.4.1"
-    chokidar "^2.0.4"
-    lodash "^4.17.11"
-    micromatch "^3.1.10"
-    minimatch "^3.0.4"
-    resolve "^1.5.0"
-    tapable "^1.0.0"
-
 fork-ts-checker-webpack-plugin@^6.5.0:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz#4f67183f2f9eb8ba7df7177ce3cf3e75cdafb340"
@@ -11117,6 +11069,23 @@ fork-ts-checker-webpack-plugin@^6.5.0:
     semver "^7.3.2"
     tapable "^1.0.0"
 
+fork-ts-checker-webpack-plugin@^7.2.11:
+  version "7.2.11"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-7.2.11.tgz#aff3febbc11544ba3ad0ae4d5aa4055bd15cd26d"
+  integrity sha512-2e5+NyTUTE1Xq4fWo7KFEQblCaIvvINQwUX3jRmEGlgCTc1Ecqw/975EfQrQ0GEraxJTnp8KB9d/c8hlCHUMJA==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    chalk "^4.1.2"
+    chokidar "^3.5.3"
+    cosmiconfig "^7.0.1"
+    deepmerge "^4.2.2"
+    fs-extra "^10.0.0"
+    memfs "^3.4.1"
+    minimatch "^3.0.4"
+    schema-utils "^3.1.1"
+    semver "^7.3.5"
+    tapable "^2.2.1"
+
 form-data@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
@@ -11179,7 +11148,7 @@ fs-extra@8.1.0, fs-extra@^8.0.1, fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^10.1.0:
+fs-extra@^10.0.0, fs-extra@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
   integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
@@ -12137,7 +12106,7 @@ html-minifier-terser@^6.0.2, html-minifier-terser@^6.1.0:
     relateurl "^0.2.7"
     terser "^5.10.0"
 
-html-minifier@^3.2.3, html-minifier@^3.5.6:
+html-minifier@^3.5.6:
   version "3.5.21"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
   integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
@@ -12169,19 +12138,6 @@ html-webpack-inline-source-plugin@^1.0.0-beta.2:
     slash "^1.0.0"
     source-map-url "^0.4.0"
 
-html-webpack-plugin@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
-  integrity sha1-sBq71yOsqqeze2r0SS69oD2d03s=
-  dependencies:
-    html-minifier "^3.2.3"
-    loader-utils "^0.2.16"
-    lodash "^4.17.3"
-    pretty-error "^2.0.2"
-    tapable "^1.0.0"
-    toposort "^1.0.0"
-    util.promisify "1.0.0"
-
 html-webpack-plugin@^5.3.1, html-webpack-plugin@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50"
@@ -14323,11 +14279,6 @@ json5@2.2.1, json5@2.x, json5@^2.1.2, json5@^2.2.0, json5@^2.2.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
-json5@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
-  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
-
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -14543,7 +14494,7 @@ kleur@^4.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.4.tgz#8c202987d7e577766d039a8cd461934c01cda04d"
   integrity sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==
 
-klona@^2.0.4, klona@^2.0.5:
+klona@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
@@ -14723,16 +14674,6 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@^0.2.16:
-  version "0.2.17"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
-  integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
-  dependencies:
-    big.js "^3.1.3"
-    emojis-list "^2.0.0"
-    json5 "^0.5.0"
-    object-assign "^4.0.1"
-
 loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
@@ -14941,7 +14882,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.7.0, lodash@^4.9.0, lodash@~4.17.15:
+lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.7.0, lodash@^4.9.0, lodash@~4.17.15:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -15944,15 +15885,6 @@ mini-create-react-context@^0.4.0:
     "@babel/runtime" "^7.12.1"
     tiny-warning "^1.0.3"
 
-mini-css-extract-plugin@^1.6.1:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz#83172b4fd812f8fc4a09d6f6d16f924f53990ca8"
-  integrity sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-    webpack-sources "^1.1.0"
-
 mini-css-extract-plugin@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.0.tgz#578aebc7fc14d32c0ad304c2c34f08af44673f5e"
@@ -17716,17 +17648,6 @@ postcss-discard-unused@^5.1.0:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-loader@^4.2.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.3.0.tgz#2c4de9657cd4f07af5ab42bd60a673004da1b8cc"
-  integrity sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==
-  dependencies:
-    cosmiconfig "^7.0.0"
-    klona "^2.0.4"
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-    semver "^7.3.4"
-
 postcss-loader@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
@@ -17736,6 +17657,15 @@ postcss-loader@^6.2.1:
     klona "^2.0.5"
     semver "^7.3.5"
 
+postcss-loader@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-7.0.0.tgz#367d10eb1c5f1d93700e6b399683a6dc7c3af396"
+  integrity sha512-IDyttebFzTSY6DI24KuHUcBjbAev1i+RyICoPEWcAstZsj03r533uMXtDn506l6/wlsRYiS5XBdx7TpccCsyUg==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.5"
+    semver "^7.3.7"
+
 postcss-merge-idents@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-5.1.1.tgz#7753817c2e0b75d0853b56f78a89771e15ca04a1"
@@ -17989,7 +17919,7 @@ postcss-zindex@^5.1.0:
   resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-5.1.0.tgz#4a5c7e5ff1050bd4c01d95b1847dfdcc58a496ff"
   integrity sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A==
 
-postcss@^8.2.1:
+postcss@^8.2.1, postcss@^8.4.14:
   version "8.4.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
   integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
@@ -17998,7 +17928,7 @@ postcss@^8.2.1:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.2.15, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.13, postcss@^8.4.7:
+postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.13, postcss@^8.4.7:
   version "8.4.13"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.13.tgz#7c87bc268e79f7f86524235821dfdf9f73e5d575"
   integrity sha512-jtL6eTBrza5MPzy8oJLFuUscHDXTV5KcLlqAWHl5q5WYRfnNRGSmOZmOZ1T6Gy7A99mOZfqungmZMpMmCVJ8ZA==
@@ -18051,14 +17981,6 @@ pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
-pretty-error@^2.0.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
-  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
-  dependencies:
-    lodash "^4.17.20"
-    renderkid "^2.0.4"
-
 pretty-error@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"
@@ -19082,17 +19004,6 @@ remove-trailing-separator@^1.0.1:
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
   integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
 
-renderkid@^2.0.4:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.7.tgz#464f276a6bdcee606f4a15993f9b29fc74ca8609"
-  integrity sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==
-  dependencies:
-    css-select "^4.1.3"
-    dom-converter "^0.2.0"
-    htmlparser2 "^6.1.0"
-    lodash "^4.17.21"
-    strip-ansi "^3.0.1"
-
 renderkid@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
@@ -19168,10 +19079,10 @@ request@^2.88.0:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-require-dir@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/require-dir/-/require-dir-0.3.2.tgz#c1d5c75e9fbffde9f2e6b33e383db4f594b5a6a9"
-  integrity sha1-wdXHXp+//eny5rM+OD209ZS1pqk=
+require-dir@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/require-dir/-/require-dir-1.2.0.tgz#0d443b75e96012d3ca749cf19f529a789ae74817"
+  integrity sha512-LY85DTSu+heYgDqq/mK+7zFHWkttVNRXC9NKcKGyuGLdlsfbjEPrIEYdCVrx6hqnJb+xSu3Lzaoo8VnmOhhjNA==
 
 require-directory@^2.1.1:
   version "2.1.1"
@@ -19274,7 +19185,7 @@ resolve@1.17.0, resolve@~1.17.0:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.9.0:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.3.2, resolve@^1.9.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -20799,13 +20710,6 @@ strong-log-transformer@^2.0.0:
     minimist "^1.2.0"
     through "^2.3.4"
 
-style-loader@^0.13.2:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.2.tgz#74533384cf698c7104c7951150b49717adc2f3bb"
-  integrity sha1-dFMzhM9pjHEEx5URULSXF63C87s=
-  dependencies:
-    loader-utils "^1.0.2"
-
 style-loader@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
@@ -20948,7 +20852,7 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
+tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
@@ -21291,11 +21195,6 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
-toposort@^1.0.0:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
-  integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
-
 toposort@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
@@ -21438,7 +21337,7 @@ ts-loader@^7.0.1, ts-loader@^7.0.2:
     micromatch "^4.0.0"
     semver "^6.0.0"
 
-ts-loader@^8.0.0, ts-loader@^8.1.0:
+ts-loader@^8.1.0:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.4.0.tgz#e845ea0f38d140bdc3d7d60293ca18d12ff2720f"
   integrity sha512-6nFY3IZ2//mrPc+ImY3hNWx1vCHyEhl6V+wLmL4CZcm6g1CqX7UKrkc6y0i4FwcfOhxyMPCfaEvh20f4r9GNpw==
@@ -22005,14 +21904,6 @@ util-promisify@^2.1.0:
   dependencies:
     object.getownpropertydescriptors "^2.0.3"
 
-util.promisify@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
-  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
-  dependencies:
-    define-properties "^1.1.2"
-    object.getownpropertydescriptors "^2.0.3"
-
 util@0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
@@ -22361,7 +22252,7 @@ webpack-bundle-analyzer@^4.5.0:
     sirv "^1.0.7"
     ws "^7.3.1"
 
-webpack-cli@^3.2.1, webpack-cli@^3.3.11:
+webpack-cli@^3.3.11:
   version "3.3.12"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.12.tgz#94e9ada081453cd0aa609c99e500012fd3ad2d4a"
   integrity sha512-NVWBaz9k839ZH/sinurM+HcDvJOTXwSjYp1ku+5XKeOC03z8v5QitnK/x+lAxGXFyhdayoIf/GOpv85z3/xPag==
@@ -22491,7 +22382,7 @@ webpack-dev-server@^4.0.0-beta.1, webpack-dev-server@^4.8.1:
     webpack-dev-middleware "^5.3.1"
     ws "^8.4.2"
 
-webpack-dev-server@^4.9.0:
+webpack-dev-server@^4.9.0, webpack-dev-server@^4.9.1:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.9.1.tgz#184607b0287c791aeaa45e58e8fe75fcb4d7e2a8"
   integrity sha512-CTMfu2UMdR/4OOZVHRpdy84pNopOuigVIsRbGX3LVDMWNP8EUgC5mUBMErbwBlHTEX99ejZJpVqrir6EXAEajA==
@@ -22620,7 +22511,7 @@ webpack@^5.30.0:
     watchpack "^2.3.1"
     webpack-sources "^3.2.3"
 
-webpack@^5.72.0:
+webpack@^5.72.0, webpack@^5.72.1:
   version "5.72.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.1.tgz#3500fc834b4e9ba573b9f430b2c0a61e1bb57d13"
   integrity sha512-dXG5zXCLspQR4krZVR6QgajnZOjW2K/djHvdcRaDQvsjV9z9vaW6+ja5dZOYbqBBjF6kGXka/2ZyxNdc+8Jung==

From 71b7c04c80c8f4252a77ea3aaab60a876e527ddf Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Tue, 31 May 2022 13:39:51 -0700
Subject: [PATCH 133/135] add PW browser install step to ci-validate-platforms
 process (#6045)

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 .github/workflows/ci-validate-platforms.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/ci-validate-platforms.yml b/.github/workflows/ci-validate-platforms.yml
index 36564eb2230..b1531b31fa1 100644
--- a/.github/workflows/ci-validate-platforms.yml
+++ b/.github/workflows/ci-validate-platforms.yml
@@ -63,6 +63,11 @@ jobs:
       - name: Prepare workspaces
         run: yarn prepare
 
+      - name: Install playwright dependencies and browsers
+        run: |
+          yarn playwright install-deps
+          yarn playwright install
+
       - name: Run tests in changed packages
         if: ${{ github.event_name == 'pull_request' }}
         run: yarn lerna run test --stream --since=origin/master

From 8159cb8b77036ec6ccf7b52e844cdf14912d6b6c Mon Sep 17 00:00:00 2001
From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com>
Date: Tue, 31 May 2022 14:08:40 -0700
Subject: [PATCH 134/135] replace custom badge URL w/ badge.fury.io path
 (#6046)

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
---
 .../versioned_docs/version-legacy/components/getting-started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sites/website/versioned_docs/version-legacy/components/getting-started.md b/sites/website/versioned_docs/version-legacy/components/getting-started.md
index 4f2259e4011..fdf57e5de3c 100644
--- a/sites/website/versioned_docs/version-legacy/components/getting-started.md
+++ b/sites/website/versioned_docs/version-legacy/components/getting-started.md
@@ -8,7 +8,7 @@ keywords:
 ---
 
 [![License: MIT](/badges/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![npm version](/badges/fast-components.svg)](https://www.npmjs.com/package/@microsoft/fast-components)
+[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components.svg)](https://www.npmjs.com/package/@microsoft/fast-components)
 
 The `@microsoft/fast-components` library contains Web Components built on top of our standard component and design system foundation. `@microsoft/fast-components` expresses the FAST design language (FAST Frame). 
 

From 3bbfe175f7bd6de340101be3e6e37c0dd57624e1 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 31 May 2022 14:28:50 -0700
Subject: [PATCH 135/135] Remove the branch specific logic for version updates
 (#6047)

---
 beachball.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/beachball.config.js b/beachball.config.js
index 220c756cc6f..3bc36937161 100644
--- a/beachball.config.js
+++ b/beachball.config.js
@@ -1,5 +1,4 @@
 module.exports = {
-    branch: "origin/features/fast-element-2",
     ignorePatterns: [
         ".ignore",
         ".github/",